@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/smart-pro/.claude-plugin/merge-permissions.js

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+/**
+ * LEGACY: Merge smart plugin settings into project's .claude/settings.json
+ *
+ * This script is deprecated. The new plugin architecture uses:
+ * - hooks/hooks.json for hook configuration
+ * - skills/ directory for skill definitions
+ * - `claude plugin update smart@smartsoft --scope project` for installation
+ *
+ * See MIGRATION.md for upgrade instructions.
+ *
+ * Usage (legacy):
+ *   node node_modules/@smartsoft001/claude-plugins/plugins/smart/_legacy/merge-permissions.js
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const SETTINGS_PATH = path.join(process.cwd(), '.claude', 'settings.json');
+const TEMPLATE_PATH = path.join(__dirname, 'settings.template.json');
+
+function loadJson(filePath) {
+  try {
+    return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+  } catch (e) {
+    return null;
+  }
+}
+
+function mergeArrays(existing, template) {
+  return [...new Set([...existing, ...template])];
+}
+
+function mergeHooks(existing, template) {
+  if (!template) return existing;
+  if (!existing) return template;
+
+  const merged = { ...existing };
+
+  for (const [event, hooks] of Object.entries(template)) {
+    if (!merged[event]) {
+      merged[event] = hooks;
+    } else {
+      // Merge by checking _description to avoid duplicates
+      const existingDescriptions = merged[event]
+        .map((h) => h._description)
+        .filter(Boolean);
+      for (const hook of hooks) {
+        if (
+          hook._description &&
+          !existingDescriptions.includes(hook._description)
+        ) {
+          merged[event].push(hook);
+        } else if (!hook._description) {
+          merged[event].push(hook);
+        }
+      }
+    }
+  }
+
+  return merged;
+}
+
+function main() {
+  console.log('Smart Plugin - Merge Settings (LEGACY)\n');
+  console.log(
+    'WARNING: This script is deprecated. Use `claude plugin update smart@smartsoft --scope project` instead.\n',
+  );
+
+  // Load template
+  const template = loadJson(TEMPLATE_PATH);
+  if (!template) {
+    console.error('ERROR: Could not load template from:', TEMPLATE_PATH);
+    process.exit(1);
+  }
+
+  // Load or create settings
+  let settings = loadJson(SETTINGS_PATH);
+  if (!settings) {
+    console.log('Creating new .claude/settings.json...');
+    fs.mkdirSync(path.dirname(SETTINGS_PATH), { recursive: true });
+    settings = { permissions: { allow: [], deny: [], ask: [] }, hooks: {} };
+  }
+
+  // Ensure structures exist
+  settings.permissions = settings.permissions || {
+    allow: [],
+    deny: [],
+    ask: [],
+  };
+  settings.permissions.allow = settings.permissions.allow || [];
+  settings.permissions.ask = settings.permissions.ask || [];
+  settings.permissions.deny = settings.permissions.deny || [];
+  settings.hooks = settings.hooks || {};
+
+  // Count before
+  const beforeAllow = settings.permissions.allow.length;
+  const beforeHooks = Object.keys(settings.hooks).length;
+
+  // Merge permissions
+  settings.permissions.allow = mergeArrays(
+    settings.permissions.allow,
+    template.permissions.allow,
+  );
+
+  // Merge hooks
+  settings.hooks = mergeHooks(settings.hooks, template.hooks);
+
+  // Enable plugin
+  settings.enabledPlugins = settings.enabledPlugins || {};
+  settings.enabledPlugins['smart@smartsoft'] = true;
+
+  // Write back
+  fs.writeFileSync(SETTINGS_PATH, JSON.stringify(settings, null, 2) + '\n');
+
+  // Report
+  const addedAllow = settings.permissions.allow.length - beforeAllow;
+  const afterHooks = Object.keys(settings.hooks).length;
+
+  console.log('Settings merged successfully!\n');
+  console.log(
+    `  permissions.allow: ${beforeAllow} -> ${settings.permissions.allow.length} (+${addedAllow})`,
+  );
+  console.log(`  hooks events: ${beforeHooks} -> ${afterHooks}`);
+  console.log(`\nPlugin enabled: smart@smartsoft`);
+  console.log(`\nFile updated: ${SETTINGS_PATH}`);
+}
+
+main();

package/plugins/smart-pro/.claude-plugin/plugin.json

@@ -0,0 +1,5 @@
+{
+  "name": "smart-pro",
+  "description": "Smart-pro integration - safety validation, audit logging, and auto-formatting hooks",
+  "version": "0.0.1"
+}

package/plugins/smart-pro/.claude-plugin/settings.template.json

@@ -0,0 +1,94 @@
+{
+  "$schema": "https://raw.githubusercontent.com/anthropics/claude-code/main/schemas/settings.schema.json",
+  "_description": "LEGACY: Template settings for smart-pro@smart-pro plugin. Replaced by hooks/hooks.json and skills/ directory. See MIGRATION.md for upgrade guide.",
+  "permissions": {
+    "allow": [
+      "Bash(source:*)",
+      "Bash(nvm use:*)",
+      "Bash(npm run format:*)",
+      "Bash(jq:*)"
+    ],
+    "ask": [],
+    "deny": []
+  },
+  "hooks": {
+    "PreToolUse": [
+      {
+        "_description": "Safety gate: blocks destructive bash commands",
+        "matcher": "Bash|Write|Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node_modules/@smartsoft001/pro-claude-plugins/plugins/smart-pro/hooks/safety_validator.py"
+          }
+        ]
+      },
+      {
+        "_description": "Block sensitive files with detailed error message",
+        "matcher": "Read|Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "FILE=$(jq -r '.tool_input.file_path // empty'); echo \"$FILE\" | grep -qE '(\\.env|secrets|credentials)' && { echo \"BLOCKED: Access denied to sensitive file: $FILE\" >&2; exit 2; } || exit 0"
+          }
+        ]
+      },
+      {
+        "_description": "Audit trail: logs all PreToolUse events",
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node_modules/@smartsoft001/pro-claude-plugins/plugins/smart-pro/hooks/audit_logger.py"
+          }
+        ]
+      },
+      {
+        "_description": "Skill validator: soft enforcement warnings for skill files",
+        "matcher": "Write|Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node_modules/@smartsoft001/pro-claude-plugins/plugins/smart-pro/hooks/skill_validator.py"
+          }
+        ]
+      }
+    ],
+    "PostToolUse": [
+      {
+        "_description": "Auto-format files after Write/Edit",
+        "matcher": "Write|Edit",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "source ~/.nvm/nvm.sh && nvm use 24 && npm run format"
+          }
+        ]
+      },
+      {
+        "_description": "Audit trail: logs all PostToolUse events",
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node_modules/@smartsoft001/pro-claude-plugins/plugins/smart-pro/hooks/audit_logger.py"
+          }
+        ]
+      }
+    ],
+    "UserPromptSubmit": [
+      {
+        "_description": "Audit trail: logs all user prompt submissions",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node_modules/@smartsoft001/pro-claude-plugins/plugins/smart-pro/hooks/audit_logger.py"
+          }
+        ]
+      }
+    ]
+  },
+  "enabledPlugins": {
+    "smart-pro@smart-pro": true
+  }
+}

package/plugins/smart-pro/agents/angular-components/AGENT.md

@@ -0,0 +1,214 @@
+---
+name: angular-components
+description: Build UI in end-user projects using @smartsoft001/angular components. Knows available components and delegates to per-component skills for API details.
+---
+
+# Angular Components Agent
+
+Agent for building UI in end-user Angular projects using components from `@smartsoft001/angular`.
+
+## When to Use
+
+Use this agent when a developer needs to:
+
+- Build a page or feature UI using `@smartsoft001/angular` components
+- Choose the right component for a UI requirement
+- Get correct usage, imports, and options for a component
+
+## Available Components
+
+| Component           | Skill                                    | Selector                         | Description                                                                                                                                                                                                                                                                                                                                                            |
+| ------------------- | ---------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Button              | `angular-components-button`              | `<smartpro-button>`              | Button with shapes (standard/rounded/circular), optional `iconPosition` (leading/trailing) on standard, variants (primary/secondary/soft), sizes, color palette                                                                                                                                                                                                        |
+| Card                | `angular-components-card`                | `<smartpro-card>`                | Card container — `variant: 'basic' \| 'well'` with optional `options.edgeToEdge` (drop mobile rounding) and `options.onGray` (well only). Header / body / footer slots driven by template refs and `hasHeader` / `hasFooter` flags.                                                                                                                                    |
+| Details             | `angular-components-details`             | `<smartpro-details>`             | 6 details layouts (left-aligned, card, striped, two-column, with actions, narrow) via `DETAILS_STANDARD_COMPONENT_TOKEN`                                                                                                                                                                                                                                               |
+| Form                | `angular-components-form`                | `<smartpro-form>`                | 2 variants: `stacked` (with `labelPosition: 'top' \| 'left'` — `'left'` replaces the legacy labels-left layout) and `two-column` (with `cardStyle?` for the legacy two-column-cards). Iterates fields from `IFormOptionsPro<T>.model` decorators.                                                                                                                      |
+| List                | `angular-components-list`                | `<smartpro-list>`                | Entity-collection list. 5 variants: `stacked`, `directory`, `grid-card`, `grid-contact`, `table`. The `table` variant accepts composable flags `density: 'condensed'`, `sortable`, `striped`, `selectable`, `avatar`.                                                                                                                                                  |
+| Paging              | `angular-components-paging`              | `<smartpro-paging>`              | Paging with three Tailwind UI variants injected via `PAGING_STANDARD_COMPONENT_TOKEN`                                                                                                                                                                                                                                                                                  |
+| Page                | `angular-components-page`                | `<smartpro-page>`                | 26 page layouts (Page Header / Stacked / Sidebar) plugged in via `PAGE_VARIANT_COMPONENTS_TOKEN`                                                                                                                                                                                                                                                                       |
+| Searchbar           | `angular-components-searchbar`           | `<smartpro-searchbar>`           | Grid-based trailing-icon searchbar variant (Tailwind Plus "Input with trailing icon") injected via `SEARCHBAR_STANDARD_COMPONENT_TOKEN`                                                                                                                                                                                                                                |
+| Toggle              | `angular-components-toggle`              | `<smartpro-toggle>`              | Switch with two layouts (`simple`, `with-labels`, auto-detected from `options.label`). `options.size: 'standard' \| 'short'` and `options.withIcon` shape the knob; `labelPosition` places the label left/right.                                                                                                                                                       |
+| Stacked Layout      | `angular-components-stacked-layout`      | `<smartpro-stacked-layout>`      | 4 page-shell variants: `default` (with `headerStyle: 'overlap' \| 'bottom-border' \| 'subtle-bg'`), `lighter` (with `compact?` flag), `branded` (with `headerStyle: 'lighter' \| 'compact-lighter' \| 'overlap'`), and `two-row-navigation-with-overlap`. `IStackedLayoutOptionsPro` slots in `navTpl` / `headerTpl`.                                                  |
+| Sidebar Layout      | `angular-components-sidebar-layout`      | `<smartpro-sidebar-layout>`      | 4 layouts: `simple`, `with-header`, `constrained-content`, `off-white-background`. The `simple` and `with-header` layouts accept `options.theme: 'light' \| 'brand' \| 'dark'` for sidebar coloring. `options.sidebarTpl` / `headerTpl` slot in nav and header content.                                                                                                |
+| Multi-Column Layout | `angular-components-multi-column-layout` | `<smartpro-multi-column-layout>` | 3 three-column variants: `constrained` (`sticky?` for sticky nav + aside), `full-width` (`secondaryRight?` flips the aside), `narrow-sidebar` (`hasHeader?` adds a sticky top header). `IMultiColumnLayoutOptionsPro` slots in `navTpl` / `secondaryTpl` / `headerTpl`.                                                                                                |
+| Page Heading        | `angular-components-page-heading`        | `<smartpro-page-heading>`        | 3 variants: `default` (adaptive title + actions header that detects breadcrumbs / meta / filters slots), `with-avatar` (large avatar layout; `logo: true` switches to smaller logo + meta layout; `cardStyle: true` wraps in a rounded card with optional stats footer), `with-banner-image`.                                                                          |
+| Card Heading        | `angular-components-card-heading`        | `<smartpro-card-heading>`        | Card header that adapts its layout to the slots provided in `options` (title, description, avatarTpl, metaTpl, actionsTpl). Set `compact: true` for the borderless dropdown-style row.                                                                                                                                                                                 |
+| Command Palette     | `angular-components-command-palette`     | `<smartpro-command-palette>`     | Cmd+K-style overlay palette. 3 layouts auto-detected from options: `simple` (with `padding`, `appearance`, `withIcons`, `withImages`, `withFooter`), `with-preview` (`previewTpl` for the right pane), `with-groups` (`groups: ICommandPaletteGroup[]`). `[(open)]` / `[(query)]` two-way binding; `(runCommand)` emits the picked id.                                 |
+| Modal               | `angular-components-modal`               | `<smartpro-modal>`               | Dialog overlay. 2 layouts auto-detected: `centered` (default, with `width: 'default' \| 'wide'`, `actionsAlignment`, `withDismiss`, `footerStylePro: 'default' \| 'gray'`) and `alert` (icon-led, triggered by `iconName`/`iconStyle`). `[(open)]` two-way; `(actionClick)` / `(closed)` outputs; `<ng-content>` for custom body.                                      |
+| Drawer              | `angular-components-drawer`              | `<smartpro-drawer>`              | Slide-out panel. 2 layouts auto-detected: `empty` (bare shell — `wide`, `withOverlay`, `closePosition: 'inside' \| 'outside'`) and `with-chrome` (header + body + sticky footer template; triggered by `title`/`subtitle`/`headerStyle`/`stickyFooter`). `position: 'left' \| 'right'`, `headerStyle: 'default' \| 'branded'`. `[(open)]`, `(closed)`, `<ng-content>`. |
+| Notification        | `angular-components-notification`        | `<smartpro-notification>`        | Toast / inline alert. 2 layouts auto-detected: `simple` (default — icon/avatar + title + description + actions + close; `iconStyle`, `actionsPosition: 'inline' \| 'below' \| 'split'`, `withAvatar`) and `condensed` (single-line; triggered by `options.condensed: true`). `(dismissed)` / `(actionClick)` outputs.                                                  |
+| Avatar              | `angular-components-avatar`              | `<smartpro-avatar>`              | Avatar. 2 layouts auto-detected: `single` (image/initials/placeholder + optional notification dot top/bottom + optional withText) and `group` (overlapping stack of `IAvatarItem[]`, `stackDirection`). `shape: 'circle' \| 'rounded'`, `size: xs..xl`, `notificationColor: 'green' \| 'gray' \| 'red'`.                                                               |
+| Badge               | `angular-components-badge`               | `<smartpro-badge>`               | Tag / pill. Single `default` layout, 16+ Tailwind UI variants via composable options: `variant: 'border' \| 'flat'`, `shape: 'pill' \| 'square'`, `withDot`, `withRemove`. 8 colors × 2 sizes. `(removed)` output when × clicked.                                                                                                                                      |
+| Dropdown            | `angular-components-dropdown`            | `<smartpro-dropdown>`            | Menu. 2 layouts auto-detected: `default` (trigger + `<el-dropdown>` / `<el-menu>` with items) and `with-header` (header row above items, triggered by `options.headerLabel`). Options: `withIcons`, `showDividers`, `minimal`. `[(open)]`, `(selectedItem: { itemId })`. `<ng-content>` for custom trigger.                                                            |
+| Button Group        | `angular-components-button-group`        | `<smartpro-button-group>`        | Segmented buttons. 2 layouts auto-detected: `default` and `with-stat` (auto when any `button.count != null`). Options: `iconOnly`, `withDropdown` (trailing chevron emits id `'__dropdown__'`), `selectionMode: 'single' \| 'multi'`. `[(selected)]`, `(buttonClick: { buttonId })`.                                                                                   |
+| Container           | `angular-components-container`           | `<smartpro-container>`           | Layout wrapper. Single `default` layout, 5 source variants via options: `mode: 'full-width' \| 'constrained' \| 'container'`, `padding: 'none' \| 'mobile' \| 'always'`, `narrow: boolean`. Pure `<ng-content>` projection.                                                                                                                                            |
+| List Container      | `angular-components-list-container`      | `<smartpro-list-container>`      | List surface wrapper. Single `default` layout, 4 source variants via `options.variant: 'simple-dividers' \| 'card-dividers' \| 'separate-cards' \| 'flat-card-dividers'` + `fullWidthOnMobile` (applied to card variants). Sets `role="list"`; projects `<ng-content>`.                                                                                                |
+| Media Object        | `angular-components-media-object`        | `<smartpro-media-object>`        | Image + body layout. Single `default` layout, 8 source variants via options: `alignment: 'top' \| 'center' \| 'bottom' \| 'stretched'`, `position: 'left' \| 'right'`, `responsive`, `nested`, `wide`. Required `mediaUrl` / `mediaAlt`; projects body via `<ng-content>`.                                                                                             |
+| Divider             | `angular-components-divider`             | `<smartpro-divider>`             | Horizontal separator / section header. 2 layouts auto-detected: `simple` (hr, label, icon, or title centered/left/right on the line) and `with-toolbar` (title + action button; auto when `actionLabel` is set). Inputs: `label`, `iconName`, `title`, `actionLabel`. `options.position`. `(actionClick)`. `<ng-content>` for extra toolbar actions.                   |
+| Section Heading     | `angular-components-section-heading`     | `<smartpro-section-heading>`     | Section header that adapts to provided slots (description / label / actionsTpl / inputGroupTpl / badgeTpl). Setting `tabsTpl` switches to a tabs variant; `inline: true` places tabs beside the title.                                                                                                                                                                 |
+| Description List    | `angular-components-description-list`    | `<smartpro-description-list>`    | 4 layouts: `left-aligned` (default; supports `options.striped` and `options.inlineActions` for per-item action slots), `left-aligned-card`, `two-column`, `narrow-hidden-labels`. Iterates `IDescriptionListOptions.items[]`.                                                                                                                                          |
+| Breadcrumbs         | `angular-components-breadcrumbs`         | `<smartpro-breadcrumbs>`         | Breadcrumb trail with `bar` layout (full-width or `contained` card) or `simple` layout (`chevron` / `slash` / `arrow` separator). Pass `IBreadcrumbsOptionsPro` with `layout`, `contained`, `separator`, `items[]`                                                                                                                                                     |
+| Action Panel        | `angular-components-action-panel`        | `<smartpro-action-panel>`        | Title + description + action area. `layout: 'card'` for vertical action area (buttons / link / email-input), `layout: 'with-action'` for horizontal layout with button or toggle on the right. `style: 'well'` swaps to a muted gray surface. `titleAtTop` controls title placement.                                                                                   |
+| Feed                | `angular-components-feed`                | `<smartpro-feed>`                | Activity feed. `layout: 'icons'` for vertical timeline of colored icon circles (color from `event.type`); `layout: 'comments'` (default) for stacked dot+text rows with rich comment cards when `event.avatarUrl` + `event.type` undefined or `'comment'`.                                                                                                             |
+| Vertical Navigation | `angular-components-vertical-navigation` | `<smartpro-vertical-navigation>` | Sidebar nav. `layout: 'flat'` (default) iterates `options.items` with optional per-item `iconTpl` / `badge`. `layout: 'on-gray'` and `layout: 'with-secondary-navigation'` iterate `options.groups[]` for multi-section navigation with optional group titles.                                                                                                         |
+| Tabs                | `angular-components-tabs`                | `<smartpro-tabs>`                | Horizontal tab bar with mobile select fallback and `[(selectedId)]` binding. `layout: 'underline'` (default) supports `fullWidth`, `inBar`, `bare`, plus per-item `iconTpl` / `badge`. `layout: 'pills'` chooses pill background via `background: 'transparent' \| 'gray' \| 'brand'`.                                                                                 |
+| Stacked List        | `angular-components-stacked-list`        | `<smartpro-stacked-list>`        | Vertical list of items. 3 variants: `simple` (`width: 'narrow' \| 'full' \| 'constrained-full'`, `stickyHeadings: true` groups by first letter), `with-links` (`width: 'full' \| 'card'`, `columns: 2` switches to grid), `complex` (title + inline badge + description + action; `inlineMeta: true` adds dot+meta).                                                   |
+| Table               | `angular-components-table`               | `<smartpro-table>`               | Tabular data driven by `columns` / `rows`. 4 variants: `default` (composable flags `inCard`, `border`, `selectable`, `sortable`, `stickyHeader`, `hideHeadings`, `withAvatars`, `width: 'constrained-full'`), `with-grouped-rows`, `with-summary-rows`, `responsive` (`mobileStrategy: 'hide' \| 'stack'`).                                                            |
+| Select Menu         | `angular-components-select-menu`         | `<smartpro-select-menu>`         | Single-select listbox with `[(value)]` binding. 2 variants: `simple-native` (HTML `<select>`) and `custom` (`<el-select>` listbox; composable flags `branded`, `avatar`, `statusIndicator`, `checkPosition: 'left'`, `secondaryText`).                                                                                                                                 |
+| Progress Bars       | `angular-components-progress-bars`       | `<smartpro-progress-bars>`       | Stepped progress and numeric progress UI. 4 layouts: `bar` (numeric when `value` is set, else step-bar), `bullets` (`withText?` switches to vertical labelled list), `circles` (`withText?` switches to vertical labelled list), `panels` (`bordered?` switches to side-stripe panel layout).                                                                          |
+| Grid List           | `angular-components-grid-list`           | `<smartpro-grid-list>`           | Responsive item grid. 4 variants: `cards` (`layout: 'simple' \| 'horizontal' \| 'logos'`), `contacts` (`portraitSize: 'large' \| 'small'`), `images-with-details`, `actions-with-shared-borders`.                                                                                                                                                                      |
+| Stats               | `angular-components-stats`               | `<smartpro-stats>`               | Key-figure grid. 2 variants: `default` (composable flags `cardStyle`, `brandIcon`, `trending`) and `with-shared-borders`. Items provide `label`, `value`, optional `change` / `trend` / `iconTpl` / `actionTpl`.                                                                                                                                                       |
+| Textarea            | `angular-components-textarea`            | `<smartpro-textarea>`            | Comment/description field. 2 variants: `simple` (`borderStyle: 'box' \| 'underline'`, `withPreview` adds Write/Preview tabs) and `with-actions` (`actionStyle: 'avatar' \| 'pill'`). `[(value)]` binding + `(actionClick)` output for action buttons.                                                                                                                  |
+| Sign-In Form        | `angular-components-sign-in-form`        | `<smartpro-sign-in-form>`        | Email/password authentication form. 2 layouts: `simple` (with `hideLabels?` for the legacy no-labels variant and `cardStyle?` for the legacy card+social-providers variant) and `split-screen` (form next to a hero image). `mode: 'sign-in' \| 'sign-up'` toggles labels.                                                                                             |
+| Empty State         | `angular-components-empty-state`         | `<smartpro-empty-state>`         | Empty-state placeholder. 4 layouts: `simple` (with `dashedBorder?` for clickable dashed-border CTA), `with-recommendations` (with `gridLayout?` for 2-col pill grid), `with-templates`, `starting-points`. `(actionClick)` and `(itemClick)` outputs.                                                                                                                  |
+| Navbar              | `angular-components-navbar`              | `<smartpro-navbar>`              | Top-of-page navigation. 5 layouts: `simple` (with `menuPosition: 'right' \| 'left'`), `with-search` (with `searchAlignment: 'left' \| 'centered'`), `with-quick-action`, `with-secondary-links`, `with-column-layout`. `dark?` flag for dark surfaces; `[(mobileMenuOpen)]` two-way binding.                                                                           |
+| Sidebar Navigation  | `angular-components-sidebar-navigation`  | `<smartpro-sidebar-navigation>`  | Full sidebar with logo + item groups + optional profile footer. 3 layouts: `default` (with `theme: 'light' \| 'brand' \| 'dark'`), `with-expandable-sections`, `with-secondary-navigation`.                                                                                                                                                                            |
+
+## Skills to Use
+
+When a user asks about a specific component, **always delegate to the per-component skill** for detailed API, usage examples, and options:
+
+- **Button** → use skill `angular-components-button`
+- **Card** → use skill `angular-components-card`
+- **Details** → use skill `angular-components-details`
+- **Form** → use skill `angular-components-form`
+- **List** → use skill `angular-components-list`
+- **Paging** → use skill `angular-components-paging`
+- **Page** → use skill `angular-components-page`
+- **Searchbar** → use skill `angular-components-searchbar`
+- **Toggle** → use skill `angular-components-toggle`
+- **Stacked Layout** → use skill `angular-components-stacked-layout`
+- **Sidebar Layout** → use skill `angular-components-sidebar-layout`
+- **Multi-Column Layout** → use skill `angular-components-multi-column-layout`
+- **Page Heading** → use skill `angular-components-page-heading`
+- **Card Heading** → use skill `angular-components-card-heading`
+- **Command Palette** → use skill `angular-components-command-palette`
+- **Modal** → use skill `angular-components-modal`
+- **Drawer** → use skill `angular-components-drawer`
+- **Notification** → use skill `angular-components-notification`
+- **Avatar** → use skill `angular-components-avatar`
+- **Badge** → use skill `angular-components-badge`
+- **Dropdown** → use skill `angular-components-dropdown`
+- **Button Group** → use skill `angular-components-button-group`
+- **Container** → use skill `angular-components-container`
+- **List Container** → use skill `angular-components-list-container`
+- **Media Object** → use skill `angular-components-media-object`
+- **Divider** → use skill `angular-components-divider`
+- **Section Heading** → use skill `angular-components-section-heading`
+- **Description List** → use skill `angular-components-description-list`
+- **Breadcrumbs** → use skill `angular-components-breadcrumbs`
+- **Action Panel** → use skill `angular-components-action-panel`
+- **Feed** → use skill `angular-components-feed`
+- **Vertical Navigation** → use skill `angular-components-vertical-navigation`
+- **Tabs** → use skill `angular-components-tabs`
+- **Stacked List** → use skill `angular-components-stacked-list`
+- **Table** → use skill `angular-components-table`
+- **Select Menu** → use skill `angular-components-select-menu`
+- **Progress Bars** → use skill `angular-components-progress-bars`
+- **Grid List** → use skill `angular-components-grid-list`
+- **Stats** → use skill `angular-components-stats`
+- **Textarea** → use skill `angular-components-textarea`
+- **Sign-In Form** → use skill `angular-components-sign-in-form`
+- **Empty State** → use skill `angular-components-empty-state`
+- **Navbar** → use skill `angular-components-navbar`
+- **Sidebar Navigation** → use skill `angular-components-sidebar-navigation`
+
+## Installation
+
+```bash
+npm i @smartsoft001/angular
+```
+
+## Import Pattern
+
+```typescript
+import {
+  ButtonComponent,
+  DetailsBaseComponent,
+  DETAILS_STANDARD_COMPONENT_TOKEN,
+  FormBaseComponent,
+  FORM_STANDARD_COMPONENT_TOKEN,
+  ListBaseComponent,
+  LIST_MODE_COMPONENTS_TOKEN,
+  ListMode,
+  IListOptions,
+  IListInternalOptions,
+  IListProvider,
+  PageBaseComponent,
+  PAGE_VARIANT_COMPONENTS_TOKEN,
+  SmartPageVariant,
+} from '@smartsoft001/angular';
+import {
+  DetailsLeftAlignedCardComponent,
+  FormStackedComponent,
+  FormTwoColumnComponent,
+  FormTwoColumnCardsComponent,
+  FormLabelsLeftComponent,
+  ListTableComponent,
+  ListTableStripedComponent,
+  ListTableCondensedComponent,
+  ListTableWithAvatarsComponent,
+  ListTableSelectableComponent,
+  ListTableSortableComponent,
+  ListStackedComponent,
+  ListDirectoryComponent,
+  ListGridContactComponent,
+  ListGridCardComponent,
+  PageWithActionsComponent,
+  PageSimpleSidebarComponent,
+  PageDarkSidebarWithHeaderComponent,
+} from '@smartsoft001/pro-angular';
+```
+
+## Architecture
+
+All component variants extend abstract base classes from `@smartsoft001/angular`:
+
+- `ButtonBaseComponent` — base for button shapes (standard, rounded, circular)
+- `CardBaseComponent` — base for card variants (basic, well); pro-side options accept `edgeToEdge?: boolean` and (well only) `onGray?: boolean`
+- `DetailsBaseComponent<T>` — base for details variants (left-aligned, card, striped, two-column, with actions, narrow)
+- `FormBaseComponent<T>` — base for form variants (stacked, two-column); pro-side options accept `labelPosition?: 'top' \| 'left'` (stacked only) and `cardStyle?` (two-column only).
+- `ListBaseComponent<T>` — base for list variants (stacked, directory, grid-card, grid-contact, table); pro-side options accept `density?`, `sortable?`, `striped?`, `selectable?`, `avatar?` (table variant only).
+- `PagingBaseComponent` — base for paging variants (card-footer, centered, simple)
+- `PageBaseComponent` — base for page variants (Page Header / Stacked / Sidebar groups)
+- `SearchbarBaseComponent` — base for searchbar variants (trailing-icon)
+- `ToggleBaseComponent` — base for toggle variants (simple, with-labels); pro-side options accept `size?: 'standard' \| 'short'` and `withIcon?: boolean`
+- `StackedLayoutBaseComponent` — base for stacked layout variants (default, lighter, branded, two-row-navigation-with-overlap); pro-side options accept `headerStyle?` (default + branded) and `compact?` (lighter only).
+- `SidebarLayoutBaseComponent` — base for sidebar layout variants (simple, with-header, constrained-content, off-white-background); pro-side options accept `theme?: 'light' \| 'brand' \| 'dark'` (simple + with-header only).
+- `MultiColumnLayoutBaseComponent` — base for multi-column layout variants (constrained, full-width, narrow-sidebar); pro-side options accept `sticky?` (constrained only), `secondaryRight?` (full-width only), `hasHeader?` (narrow-sidebar only).
+- `PageHeadingBaseComponent` — base for page heading variants (default, with-avatar, with-banner-image); pro-side options accept `logo?: boolean` and `cardStyle?: boolean` (with-avatar only).
+- `CardHeadingBaseComponent` — base for card heading; pro-side options accept `compact?: boolean` to switch from the bordered adaptive layout to the flat dropdown-style row.
+- `SectionHeadingBaseComponent` — base for section heading variants (default, with-tabs); pro-side options accept `inline?: boolean` (with-tabs only — places tabs inline beside the title).
+- `DescriptionListBaseComponent` — base for description list variants (left-aligned, left-aligned-card, two-column, narrow-hidden-labels); pro-side options accept `striped?: boolean` and `inlineActions?: boolean` (left-aligned only).
+- `BreadcrumbsBaseComponent` — base for breadcrumbs variants (bar, simple); pro-side options accept `contained?: boolean` (bar) and `separator?: 'chevron' \| 'slash' \| 'arrow'` (simple)
+- `ActionPanelBaseComponent` — base for action panel variants (card, with-action); pro-side options accept `contentMode?: 'buttons' \| 'link' \| 'input' \| 'toggle'`, `style?: 'plain' \| 'well'`, and `titleAtTop?: boolean`
+- `FeedBaseComponent` — base for the activity feed; pro-side options accept `layout?: 'icons' \| 'comments'`. Per-event rendering keys off `event.avatarUrl`, `event.type`, and `event.iconTpl`.
+- `VerticalNavigationBaseComponent` — base for vertical navigation variants (flat, on-gray, with-secondary-navigation); pro-side options accept `layout?: 'flat' \| 'on-gray' \| 'with-secondary-navigation'`. The flat layout iterates `items[]`, the others iterate `groups[]`.
+- `TabsBaseComponent` — base for tabs variants (underline, pills); pro-side options accept `layout?: 'underline' \| 'pills'` plus underline-only `fullWidth?`, `inBar?`, `bare?` flags and pills-only `background?: 'transparent' \| 'gray' \| 'brand'`.
+- `StackedListBaseComponent` — base for stacked-list variants (simple, with-links, complex); pro-side options accept `width?` (simple + with-links), `stickyHeadings?` (simple only), `columns?` (with-links only), and `inlineMeta?` (complex only).
+- `TableBaseComponent` — base for table variants (default, with-grouped-rows, with-summary-rows, responsive); pro-side options accept `inCard?`, `border?`, `selectable?`, `sortable?`, `stickyHeader?`, `hideHeadings?`, `withAvatars?`, `width?` (default only), and `mobileStrategy?: 'hide' \| 'stack'` (responsive only).
+- `SelectMenuBaseComponent` — base for select-menu variants (simple-native, custom); pro-side options accept `branded?`, `avatar?`, `statusIndicator?`, `checkPosition?: 'left' \| 'right'`, `secondaryText?` (custom variant only).
+- `ProgressBarsBaseComponent` — base for progress-bars variants (bar, bullets, circles, panels); pro-side options accept `withText?` (bullets + circles only) and `bordered?` (panels only).
+- `GridListBaseComponent` — base for grid-list variants (cards, contacts, images-with-details, actions-with-shared-borders); pro-side options accept `layout?: 'simple' \| 'horizontal' \| 'logos'` (cards only) and `portraitSize?: 'large' \| 'small'` (contacts only).
+- `StatsBaseComponent` — base for stats variants (default, with-shared-borders); pro-side options accept `cardStyle?`, `brandIcon?`, `trending?` (default variant only).
+- `TextareaBaseComponent` — base for textarea variants (simple, with-actions); pro-side options accept `borderStyle?: 'box' \| 'underline'` (simple only), `withPreview?` (simple only), `actionStyle?: 'avatar' \| 'pill'` (with-actions only).
+- `SignInFormBaseComponent` — base for sign-in-form variants (simple, split-screen); pro-side options accept `hideLabels?` and `cardStyle?` (simple variant only).
+- `EmptyStateBaseComponent` — base for empty-state variants (simple, with-recommendations, with-templates, starting-points); pro-side options accept `dashedBorder?` (simple only) and `gridLayout?` (with-recommendations only).
+- `NavbarBaseComponent` — base for navbar variants (simple, with-search, with-quick-action, with-secondary-links, with-column-layout); pro-side options accept `menuPosition?: 'right' \| 'left'` (simple only) and `searchAlignment?: 'left' \| 'centered'` (with-search only).
+- `SidebarNavigationBaseComponent` — base for sidebar-navigation variants (default, with-expandable-sections, with-secondary-navigation); pro-side options accept `theme?: 'light' \| 'brand' \| 'dark'` (default only).
+
+Base classes provide signal-based inputs, computed Tailwind classes, and shared logic. This repo (`@smartsoft001/pro-angular`) provides the Tailwind-styled variant implementations that extend those bases. Interfaces (`IButtonOptions`, `ICardOptions`) are also re-exported from `@smartsoft001/angular`.
+
+## Shared Types
+
+All components use shared types from `@smartsoft001/angular`:
+
+- `SmartVariant` — `'primary' | 'secondary' | 'soft'`
+- `SmartSize` — `'xs' | 'sm' | 'md' | 'lg' | 'xl'`
+- `SmartColor` — 22 Tailwind color names (default: `'indigo'`)
+
+## Styling
+
+- Tailwind CSS v4 with `smart:` prefix
+- Dark mode via `smart:dark:` prefix
+- External classes via `class` input