@smartsoft001/pro-claude-plugins 0.4.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartsoft001/pro-claude-plugins",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "publishConfig": {
     "access": "public"
   },

package/plugins/flow/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "flow",
   "description": "Development flow skills for Linear-driven development workflow",
-  "version": "0.0.1"
+  "version": "0.7.0"
 }

package/plugins/flow/skills/impl/SKILL.md

@@ -915,6 +915,7 @@ When verification fails, delegate to appropriate fix agent:
 19. **Capture before screenshots in background**: Launch `screenshot-reporter` agent with `run_in_background: true` BEFORE implementing UI changes to capture "before" state while implementation proceeds
 20. **Capture after screenshots + post to Linear**: After implementation, launch `screenshot-reporter` agent to capture "after" screenshots, generate comparison report, post to Linear, and cleanup
 21. **Document translations changes**: If `apps/web/public/translations.json` was modified, include a table with added/changed translation keys and their PL/EN values in the Implementation Report
+21a. **⚠️ MANDATORY: Translation completeness before completion**: No hardcoded UI strings — every static label, heading, button, aria-label, meta/SEO text goes through a translation key. Before marking a subtask complete, verify that EVERY key referenced in the changed templates/TS exists in `apps/web/public/translations.json` in BOTH `pl` and `en` (a raw `GROUP.key` rendered in the UI is a defect), and that the touched groups are complete against the design/mockup — every visible text on the mockup has its key. When a reference project is available, diff the touched groups against it and fill the gaps
 22. **Capture screenshots in both modes**: Agent captures screenshots in BOTH normal mode and dark mode (high contrast) for complete visual documentation
 23. **Ask before collecting feedback for agent evolution**: When user provides corrections or suggestions during implementation, **explicitly ask** if they want to create a Linear issue for the improvement. Only user-confirmed feedback (answered "Yes") should be processed at evolution checkpoints (Step 3g-evolve, Step 4a) via `shared-agent-evolver` agent.
 24. **Never modify agent files directly during implementation**: The `shared-agent-evolver` agent files all proposals as Linear issues for manual review — it does NOT modify agent, command, or skill files directly.

package/plugins/flow-external/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "flow-external",
   "description": "Development flow skills for standalone Angular 6-11 projects without framework (Angular CLI, Karma/Jasmine, Bootstrap 4)",
-  "version": "0.0.1"
+  "version": "0.7.0"
 }

package/plugins/flow-legacy/.claude-plugin/plugin.json

@@ -1,5 +1,5 @@
 {
   "name": "flow-legacy",
   "description": "Development flow skills for legacy Angular 14 projects with Linear-driven workflow",
-  "version": "0.0.1"
+  "version": "0.7.0"
 }

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

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

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

@@ -0,0 +1,236 @@
+---
+name: angular-components-crud
+description: Pro CRUD shell for @smartsoft001/pro-crud-shell-angular — ProCrudModule.forFeature wiring, 6 smartpro-* components with inputs/selectors, DYNAMIC_COMPONENTS_STORE override mechanism, cssClass/variant styling surface, known routed-wrapper projection limitation, and [class]-not-[class.smart:X] Tailwind rule.
+user-invocable: false
+---
+
+# Pro CRUD Shell (`@smartsoft001/pro-crud-shell-angular`)
+
+This package is the pro UI tier of the CRUD engine. It inherits all logic from
+`@smartsoft001/crud-shell-angular` (config-driven routing, NgRx facades,
+filter/sort/export/multiselect) and replaces the rendering layer with
+`smartpro-*` components styled with the `smart:` Tailwind prefix.
+
+## When to Use This Skill
+
+- Developer wants to wire a CRUD feature with pro Tailwind UI → show `ProCrudModule.forFeature` setup
+- Developer asks which pro CRUD components exist → show the component table below
+- Developer asks how the engine selects the pro page over the free one → explain `DYNAMIC_COMPONENTS_STORE`
+- Developer asks how to style the CRUD pages → show `cssClass` / `variant` on `CrudFullConfig`
+- Developer gets a blank page despite the override being registered → point to the known routed-wrapper limitation
+- Developer tries to use `[class.smart:X]` → apply the Tailwind rule
+
+## Module Setup
+
+### `ProCrudModule.forFeature`
+
+```typescript
+import { NgModule } from '@angular/core';
+import { ProCrudModule } from '@smartsoft001/pro-crud-shell-angular';
+
+@NgModule({
+  imports: [
+    ProCrudModule.forFeature({
+      routing: true, // true -> ProCrudModule (routed pages); false -> ProCrudCoreModule (no routes)
+      config: userConfig, // CrudFullConfig<T>
+      // socket: true,    // opt-in realtime provider (inert stub today)
+    }),
+  ],
+})
+export class UserModule {}
+```
+
+`forFeature` delegates to the engine's `CrudModule.forFeature` for all engine
+providers, then additionally provides `ProCrudListPageComponent` and
+`ProCrudItemPageComponent` into `DYNAMIC_COMPONENTS_STORE`.
+
+### `ProCrudCoreModule`
+
+When `routing: false`, `forFeature` returns `ProCrudCoreModule`, which wraps
+the engine's `CrudCoreModule` (logic without routed pages). Use this when you
+manage routing yourself or compose the pro components manually.
+
+## CrudFullConfig — Relevant Fields
+
+Declare `CrudFullConfig<T>` from `@smartsoft001/crud-shell-angular`. The fields
+below are the ones the pro layer reads directly; the full reference is in the
+engine's README.
+
+```typescript
+import { CrudFullConfig } from '@smartsoft001/crud-shell-angular';
+import { ListMode, PaginationMode } from '@smartsoft001/angular';
+
+export const userConfig: CrudFullConfig<User> = {
+  apiUrl: 'https://api.example.com',
+  entity: 'user',
+  type: User,
+
+  title: 'Users',
+  details: true,
+  edit: true,
+  add: true,
+  remove: true,
+  search: true,
+  export: true,
+  pagination: { limit: 25 },
+  sort: { default: 'lastName', defaultDesc: false },
+  list: {
+    mode: ListMode.desktop,
+    paginationMode: PaginationMode.singlePage,
+    groups: [], // optional — activates the group accordion
+  },
+  inputComponents: {}, // per-field input overrides keyed by field name
+
+  // Pro styling surface (tier 2)
+  cssClass: 'smart:bg-gray-50', // forwarded as [class] to page host
+  variant: 'with-actions', // picks the smartpro-page-* variant
+};
+```
+
+## DYNAMIC_COMPONENTS_STORE Override Mechanism
+
+The engine resolves `'crud-list-page'` and `'crud-item-page'` dynamic slots
+against `DYNAMIC_COMPONENTS_STORE`. Each pro page component carries a static
+`smartType` field that matches those keys:
+
+```typescript
+// Pro list page
+ProCrudListPageComponent.smartType = 'crud-list-page';
+
+// Pro item page
+ProCrudItemPageComponent.smartType = 'crud-item-page';
+```
+
+`ProCrudModule.forFeature` registers both into the token:
+
+```typescript
+{
+  provide: DYNAMIC_COMPONENTS_STORE,
+  useValue: [ProCrudListPageComponent, ProCrudItemPageComponent],
+}
+```
+
+The engine's dynamic-component resolver checks `DYNAMIC_COMPONENTS_STORE` first
+and selects the pro variant over the free standard variant for those two slots.
+
+## Component Reference
+
+All six components are `ChangeDetectionStrategy.OnPush` and extend an engine
+base class that provides all facade wiring.
+
+| Selector                    | Class                         | Extends                     | Purpose                                                                                                                                                   |
+| --------------------------- | ----------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `smartpro-crud-list-page`   | `ProCrudListPageComponent`    | `CrudListPageBaseComponent` | List page: `smart-crud-filters-config` + `smartpro-list`; shows group accordion when `config.list.groups` is set; hides flat list during search           |
+| `smartpro-crud-item-page`   | `ProCrudItemPageComponent`    | `CrudItemPageBaseComponent` | Item page: `smartpro-details` in details mode; `smart-form` with `config.inputComponents` in add/update mode                                              |
+| `smartpro-crud-filters`     | `ProCrudFiltersComponent`     | `FiltersBaseComponent`      | Filters panel: Tailwind header with close button; individual filter controls via engine `smart-crud-filter`                                               |
+| `smartpro-crud-group`       | `ProCrudGroupComponent`       | `GroupBaseComponent`        | Group accordion: accessible `button`/region with `aria-expanded`, rotating chevron; recursive child group support; embeds `smartpro-list` for leaf groups |
+| `smartpro-crud-multiselect` | `ProCrudMultiselectComponent` | `MultiselectBaseComponent`  | Multiselect panel: count header with close; optional `config.list.components.multi` outlet; multi-update `smart-form` + `smartpro-button` submit          |
+| `smartpro-crud-export`      | `ProCrudExportComponent`      | `ExportBaseComponent`       | Export popover: CSV and XLSX triggers via `smartpro-button`; `config.cssClass` forwarded to wrapper                                                       |
+
+### Key inputs (inherited from engine base classes)
+
+| Component                   | Signal/Input                                         | Source                      | Description                                                          |
+| --------------------------- | ---------------------------------------------------- | --------------------------- | -------------------------------------------------------------------- |
+| `smartpro-crud-list-page`   | `listOptions()`                                      | `CrudListPageBaseComponent` | `IListOptionsPro<T>` fed to `smartpro-list`                          |
+| `smartpro-crud-list-page`   | `config`                                             | `inject(CrudFullConfig)`    | Full config (groups, cssClass, variant)                              |
+| `smartpro-crud-item-page`   | `mode()`                                             | `CrudItemPageBaseComponent` | `'details' \| 'add' \| 'update'`                                     |
+| `smartpro-crud-item-page`   | `detailsOptions()`                                   | `CrudItemPageBaseComponent` | Options fed to `smartpro-details`                                    |
+| `smartpro-crud-item-page`   | `selected()`                                         | `CrudItemPageBaseComponent` | Current entity fed to `smart-form`                                   |
+| `smartpro-crud-filters`     | `list()`                                             | `FiltersBaseComponent`      | Array of filter items; each rendered by `smart-crud-filter`          |
+| `smartpro-crud-filters`     | `hideMenu()`                                         | `FiltersBaseComponent`      | Hides the header row when `true`                                     |
+| `smartpro-crud-group`       | `groups()`                                           | `GroupBaseComponent`        | Array of group nodes with `key`, `text`, `show`, optional `children` |
+| `smartpro-crud-group`       | `listOptions()`                                      | `GroupBaseComponent`        | `IListOptionsPro<T>` for leaf group `smartpro-list`                  |
+| `smartpro-crud-multiselect` | `list()`                                             | `MultiselectBaseComponent`  | Array of selected entities                                           |
+| `smartpro-crud-export`      | `buttonExportCsvOptions` / `buttonExportXlsxOptions` | `ExportBaseComponent`       | `IButtonOptions` for each trigger                                    |
+
+## Styling Rules
+
+### Tier-2 surface: `cssClass` and `variant`
+
+```typescript
+// In CrudFullConfig
+cssClass: 'smart:bg-gray-50 smart:rounded-xl',
+variant: 'with-actions',   // any SmartPageVariant from @smartsoft001/pro-angular
+```
+
+- `cssClass` is bound as `[class]` on the page host element of the list and item pages, and on the export wrapper.
+- `variant` is threaded into `pageOptions().variant`, which `SmartProComponentsModule` resolves to the matching `smartpro-page-*` component via `PAGE_VARIANT_COMPONENTS_TOKEN`.
+
+### Tailwind `smart:` prefix — no `[class.smart:X]` shorthand
+
+Angular's `[class.X]` shorthand treats the full string `smart:X` as the class
+name, which breaks the Tailwind `smart:` prefix during JIT purging.
+
+```html
+<!-- WRONG -->
+<div [class.smart:font-semibold]="isActive"></div>
+
+<!-- CORRECT -->
+<div [class]="isActive ? 'smart:font-semibold' : ''"></div>
+```
+
+All pro CRUD components follow this rule. Enforce it in any customization.
+
+## Known Limitation — Routed Wrappers Do Not Project the Pro Page
+
+The engine's free routed wrappers (`smart-crud-list-page` /
+`smart-crud-item-page`) use `CreateDynamicComponent` to mount the override
+found in `DYNAMIC_COMPONENTS_STORE`. The wrapper templates currently do not
+include `DynamicContentDirective` in their `imports` array, so the pro component
+is instantiated but not inserted into the DOM — the page renders blank.
+
+**This is an engine-side fix pending in `@smartsoft001/crud-shell-angular`.**
+
+Until the fix lands, mount the pro pages directly instead of relying on the
+routed wrappers:
+
+```html
+<smartpro-crud-list-page></smartpro-crud-list-page>
+<smartpro-crud-item-page></smartpro-crud-item-page>
+```
+
+Or compose the components manually inside your own page shell.
+
+## Usage Example
+
+```typescript
+// user.module.ts
+import { NgModule } from '@angular/core';
+import { ProCrudModule } from '@smartsoft001/pro-crud-shell-angular';
+import { userConfig } from './user.config';
+
+@NgModule({
+  imports: [ProCrudModule.forFeature({ routing: true, config: userConfig })],
+})
+export class UserModule {}
+```
+
+```html
+<!-- user-list.page.html — direct mount (recommended until engine fix) -->
+<smartpro-crud-list-page></smartpro-crud-list-page>
+```
+
+```html
+<!-- user-item.page.html -->
+<smartpro-crud-item-page></smartpro-crud-item-page>
+```
+
+Compositional use — embed only the filters panel in a custom page shell:
+
+```html
+<aside class="smart:w-72">
+  <smartpro-crud-filters></smartpro-crud-filters>
+</aside>
+<main>
+  <!-- your own content -->
+</main>
+```
+
+## File Locations
+
+- Package: `packages/crud/shell/pro-angular/`
+- Module: `packages/crud/shell/pro-angular/src/lib/pro-crud.module.ts`
+- Pages: `packages/crud/shell/pro-angular/src/lib/pages/{list,item}/`
+- Components: `packages/crud/shell/pro-angular/src/lib/components/{filters,group,multiselect,export}/`
+- Barrel: `packages/crud/shell/pro-angular/src/index.ts`
+- README: `packages/crud/shell/pro-angular/README.md`