@aurorajs.dev/catalyst-cli 1.0.2 → 2.0.0

package/dist/templates/frontend/application/.claude/skills/catalyst-widget-creator/SKILL.md

@@ -0,0 +1,288 @@
+---
+name: catalyst-widget-creator
+description: >
+  Guides authoring and publishing a dashboard widget in Aurora Catalyst: picking the right path
+  (declarative archetype vs bespoke component), declaring the data source, registering via
+  provideWidget, wiring icons and i18n, and enabling server-side aggregations when needed. Trigger:
+  any mention of "add a widget", "dashboard widget", "defineStatWidget", "defineChartWidget",
+  "defineTableWidget", "AURORA_WIDGET", "provideWidget", "widget catalog", "widget archetype", or
+  "WidgetDataSource". Also trigger when the user asks how to display a KPI, a chart, or a top-N
+  table on the dashboard. Does NOT apply to: consuming / querying / filtering already-registered
+  widgets; styling the dashboard grid or tile chrome, spacing, or visual density — that is
+  `layout-design-system`; generic Angular component composition unrelated to the widget catalog.
+license: MIT
+metadata:
+  author: aurora
+  version: '1.0'
+---
+
+## When to Use
+
+- Publishing a new widget in any bounded context
+- Migrating a bespoke widget component to an archetype factory
+- Enabling a server-side aggregation operation to feed a widget data source
+- Deciding whether a new widget shape needs a new archetype
+
+## The Two-Path Decision Gate
+
+Start here every time. The path decides everything that follows.
+
+```
+Does the widget fit one of the three archetypes?
+│
+├── Stat   — one headline scalar value (+ optional delta + optional sparkline)
+├── Chart  — a series rendered as area / bar / line / pie (ECharts)
+└── Table  — a read-only top-N preview of rows (no sort / filter / pagination inside the tile)
+│
+YES → DECLARATIVE path  (no new component, factory call only)
+NO  → BESPOKE path      (new *.widget.ts component, register manually)
+```
+
+When in doubt, prefer an archetype. If a recurring bespoke shape appears 2-3 times across BCs, that
+is the signal to graduate it into a new archetype in `@aurora/modules/widget/archetypes/`.
+
+---
+
+## Declarative Path (archetype)
+
+### 1. Choose the factory
+
+All three factories live in `@aurora` and accept the same shared fields (`id`, `translation`,
+`iconUrl`, `description?`, `permission?`, `category?`, `span?`, `link?`) plus archetype-specific
+fields:
+
+| Factory             | Archetype-specific required fields                                                            | Optional fields                                                                              |
+| ------------------- | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| `defineStatWidget`  | `source: WidgetDataSource<number>`                                                            | `format` (`'number'`\|`'compact'`\|`'currency'`\|`'percent'`), `delta`, `sparkline`, `label` |
+| `defineChartWidget` | `chartType` (`'area'`\|`'bar'`\|`'line'`\|`'pie'`), `source: WidgetDataSource<ChartSeries[]>` | `xAxisData`, `options` (ECharts merge)                                                       |
+| `defineTableWidget` | `source: WidgetDataSource<Record<string, unknown>[]>`, `columns: TableColumnDef[]`            | `maxRows` (default 10)                                                                       |
+
+### 2. Declare the data source
+
+The `WidgetDataSource<T>` discriminated union is the BC's side of the port — the archetype never
+imports BC code; the BC supplies the operation.
+
+**GraphQL kind (primary — preferred because it is auditable):**
+
+```typescript
+source: {
+  kind: 'graphql',
+  document: MyAggregateDocument,          // compiled DocumentNode
+  variables: { query: { offset: 0, limit: 0 } },
+  map: (raw) => (raw as { pagination: { total: number } }).pagination.total,
+  fetchPolicy: 'network-only',            // omit to use the project default 'no-cache'
+},
+```
+
+**Observable kind (escape hatch — for non-GraphQL or composed sources):**
+
+```typescript
+source: {
+  kind: 'observable',
+  connect: () => myService.stream$,
+},
+```
+
+The runner (`runWidgetDataSource`) normalizes both kinds into `{ loading, value, error }` signals;
+archetypes render them uniformly. You never call the runner directly — the archetype does it.
+
+### 3. Volumetry gate
+
+Data sources must aggregate server-side and return scalars or small bounded series. The rule is
+structural: each archetype's source type (`number`, `ChartSeries[]`, `Record<string, unknown>[]`)
+already makes unbounded fetches awkward — lean on that shape constraint.
+
+- Stat: use `paginate(limit:0) → total` for a count (0 rows shipped, just the total). This is the
+  cheapest count available without enabling an explicit `count` operation.
+- Chart: group-by client-side is acceptable only for bounded-size admin entities (e.g., accounts,
+  clients). For large entities, enable a server-side aggregation instead.
+- Table: always limit to exactly the preview count (`limit: maxRows`). Never omit `limit`.
+- Mind refresh × N widgets: each refresh triggers N data-source fetches. Keep widget counts per
+  dashboard sane and ensure the aggregated columns are indexed on the server.
+
+### 4. Register the widget
+
+In the BC's `<bc>/widgets/<bc>.widgets.ts` file, export a `provideWidget(...)` array:
+
+```typescript
+export const myBcWidgetProviders = [
+  provideWidget(defineStatWidget({ ... })),
+  provideWidget(defineChartWidget({ ... })),
+];
+```
+
+Then add this array to `src/app/aurora-widget.providers.ts` — the ONLY place where all BC widget
+arrays are spread together:
+
+```typescript
+// aurora-widget.providers.ts
+import { myBcWidgetProviders } from './domains/.../my-bc/widgets/my-bc.widgets';
+
+export const auroraWidgetProviders: EnvironmentProviders[] = [
+  ...existingProviders,
+  ...myBcWidgetProviders,
+];
+```
+
+Never edit `aurora.provider.ts` directly for individual widget registrations. The composition root
+(`aurora-widget.providers.ts`) is the single fan-in for all BCs.
+
+### 5. Icons — CDN only
+
+Widget icons are rendered via `<img src="...">` by the tile chrome. Because `<img>` SVGs cannot
+inherit `currentColor`, you must supply the color explicitly via a query parameter. Use Iconify:
+
+```
+https://api.iconify.design/<set>/<icon>.svg?color=%23RRGGBB
+```
+
+Example: `https://api.iconify.design/lucide/users.svg?color=%236366f1`
+
+To find an icon URL: use the `thesvg` MCP (`get_icon_url`) or browse `https://iconify.design`.
+
+Never use `@ng-icons` imports or `provideIcons` for widget icons. Importing an icon symbol for a
+widget drags it into the bundle and duplicates it; the CDN path keeps widgets zero-JS.
+
+### 6. i18n — keys live in the `dashboard` scope
+
+Widget `translation` and `description` keys are resolved in the `dashboard` scope, not the BC's own
+scope. The convention is:
+
+```
+dashboard.widgets.<bc>.<WidgetName>               ← title key (translation field)
+dashboard.widgets.<bc>.<WidgetName>Description    ← subtitle key (description field)
+```
+
+Example (IAM):
+
+```json
+// frontend/public/i18n/dashboard/en.json
+{
+  "widgets": {
+    "iam": {
+      "ActiveAccountsStat": "Active Accounts",
+      "ActiveAccountsStatDescription": "Total active accounts in the system"
+    }
+  }
+}
+```
+
+This is a common gotcha: using the BC scope (e.g., `iam.account.xxx`) for widget keys will silently
+fall back to the raw key string because the catalog loads the `dashboard` scope.
+
+### 7. Permissions
+
+```typescript
+permission: 'bc.entity.operation'; // single string
+permission: ['bc.entity.get', 'feature.x']; // array — require ALL
+```
+
+Permission is a **client-side visibility filter only**. The server `@Auth` is the security boundary.
+By convention, mirror the `@Auth` permission(s) of the operation(s) the data source consumes — this
+ensures the widget is visible exactly to sessions that can read its data.
+
+Omit `permission` only for widgets that any authenticated user may see.
+
+### 8. Optional drill-down link
+
+Any archetype accepts `link?: { route: string; label?: string }`. When present the tile renders a
+navigation affordance. The Table archetype relies on it (preview → full list):
+
+```typescript
+link: { route: '/o-auth/access-token', label: 'See all access tokens' },
+```
+
+---
+
+## Bespoke Path
+
+Use when the required shape (interactive chart, multi-query composite, custom layout) does not fit
+any archetype.
+
+1. Create `<bc>/widgets/<widget-name>.widget.ts` — a standalone Angular component.
+2. Declare `input()` signals for any config the widget needs.
+3. Run your own data access (via `@aurora/modules/graphql` composables or `runWidgetDataSource`).
+4. Implement the `RefreshableWidget` interface so the tile's refresh control works:
+   ```typescript
+   implements RefreshableWidget {
+     refresh(): void { /* re-trigger your data source */ }
+   }
+   ```
+5. Register manually with `provideWidget`:
+   ```typescript
+   provideWidget({
+     id: 'bc.widget.id',
+     translation: 'dashboard.widgets.bc.WidgetName',
+     iconUrl: 'https://api.iconify.design/...',
+     category: WIDGET_CATEGORY.SYSTEM,
+     span: { minCols: 2, maxCols: 6, minRows: 2, maxRows: 4, defaultCols: 3, defaultRows: 3 },
+     component: () => import('./my-widget.widget').then((m) => m.MyWidgetComponent),
+   });
+   ```
+
+The `component` field is always a dynamic `import()` thunk — never a static import. This keeps the
+widget out of the eager bundle.
+
+**Graduation rule**: if a bespoke shape appears in 2-3 different BCs, extract it into a new
+archetype in `@aurora/modules/widget/archetypes/` (following the Stat/Chart/Table pattern:
+component + factory + typed config interface).
+
+---
+
+## Enabling a Server-Side Aggregation Operation
+
+Some operations (`count`, `sum`, `max`, `min`) are excluded by default. To enable one:
+
+1. Open `cliter/<bc>/<aggregate>.aurora.yaml` and remove the operation from `excludedOperations`.
+2. Run `catalyst generate` (read the `catalyst-cli` skill first — generated files may drift from the
+   template if the backend has unregenerated changes).
+3. Add `@Auth` gating to the generated resolver method.
+4. Mirror that permission string in the widget's `permission` field.
+
+Treat each enablement as its own reviewed step: running `catalyst generate` over a drifted backend
+can regenerate far more than intended. When in doubt, check what would regenerate before committing.
+The `paginate(limit:0) → total` pattern is a safe alternative that avoids enabling `count` entirely
+(0 rows shipped, just the total from the pagination metadata).
+
+---
+
+## Lazy / Bundle Hygiene
+
+Archetype components (and ECharts) are kept out of the eager `@aurora` barrel. The factory files use
+`import type` for the component class and reference it only inside a dynamic `import()` thunk:
+
+```typescript
+component: () => import('./stat-widget.component').then((m) => m.StatWidgetComponent),
+```
+
+This means: importing a factory (`defineStatWidget`) never drags the component or ECharts into the
+initial bundle. Respect this pattern in bespoke widgets too — always lazy.
+
+---
+
+## Worked Examples
+
+Study these before writing a new widget — they show all the patterns above in production code:
+
+- **IAM widgets** (Stat + Chart): `frontend/src/app/domains/admin/apps/iam/widgets/iam.widgets.ts`
+- **OAuth widgets** (Stat + Chart + Table + drill-down link):
+  `frontend/src/app/domains/admin/apps/o-auth/widgets/o-auth.widgets.ts`
+- **Composition root**: `frontend/src/app/aurora-widget.providers.ts`
+
+---
+
+## Commands
+
+```bash
+# Type-check after adding a widget definition
+pnpm --filter aurora-front build
+
+# Run the frontend test suite
+pnpm --filter aurora-front test
+
+# Find all existing widget registrations
+grep -r "provideWidget" frontend/src/app --include="*.ts"
+
+# Find all i18n dashboard scope files
+ls frontend/public/i18n/dashboard/
+```

package/dist/templates/frontend/application/.claude/skills/layout-design-system/SKILL.md

@@ -5,7 +5,10 @@ description: >
   structure. Provides spacing rules, visual hierarchy principles, and density guidelines to achieve
   clean, breathable interfaces that maximize data consumption without visual stress. Trigger: When
   reviewing UI layout, adjusting spacing, designing new pages, evaluating visual balance, or
-  composing dashboard/form layouts.
+  composing dashboard/form layouts. Does NOT apply to authoring or registering a NEW dashboard
+  widget (`defineStatWidget`/`defineChartWidget`/`defineTableWidget`, `provideWidget`,
+  `WidgetDataSource`) — that is `catalyst-widget-creator`; this skill only governs layout, spacing,
+  and visual hierarchy once a widget or page already exists.
 license: MIT
 metadata:
   author: aurora
@@ -83,13 +86,68 @@ Every data page follows this vertical structure:
 
 ### Reference spacing values (current implementation)
 
-| Zone                             | Class       | px  |
-| -------------------------------- | ----------- | --- |
-| Layout → content gap             | `gap-3`     | 12  |
-| Content container padding        | `px-6 pb-6` | 24  |
-| Section spacing (within content) | `space-y-3` | 12  |
-| Page header → toolbar separation | `mb-3`      | 12  |
-| Pagination → table separation    | `mt-1`      | 4   |
+| Zone                             | Class                          | px  |
+| -------------------------------- | ------------------------------ | --- |
+| Layout → content gap             | `gap-3`                        | 12  |
+| Content container padding        | `listContainerClass(...)` (↓)  | —   |
+| Section spacing (within content) | `space-y-3`                    | 12  |
+| Page header → toolbar separation | `mb-2`                         | 8   |
+| Pagination → table separation    | `mt-1`                         | 4   |
+
+---
+
+## Page scaffold: container + header (SHARED — use the helper, do NOT hardcode)
+
+**Hard rule: every standalone screen uses the SAME scaffold, in code — not just a lookalike.
+All screens must be identical here; only a genuine design reason (or force majeure) justifies
+drift.** The canonical references are `iam/tag` (list screen) and `/dashboard`.
+
+### Container — always `listContainerClass`
+
+The outer container padding is owned by ONE shared helper, never hardcoded per page:
+
+```ts
+import { listContainerClass } from '@aurora'; // src/@aurora/lib/list-container-class.ts
+
+@Component({
+  host: { class: 'block' },
+  template: `<div *transloco="let t; scope: '<scope>'" [class]="containerClass"> … </div>`,
+})
+export default class XxxPage {
+  protected readonly containerClass = listContainerClass('standalone');
+}
+```
+
+`listContainerClass('standalone')` → `space-y-3 px-4 pt-2 pb-6 sm:px-6` (mode `'embed'` →
+`space-y-3 pb-6`, for a component nested in a container that already pads). This is the single
+source of truth; if the spacing needs to change, change the helper, not the page.
+
+> ⚠️ Hardcoding a bespoke container padding is a bug. `px-6 pb-6` (no `pt-2`) makes the page header
+> sit HIGHER than every other screen — a real drift we hit and fixed. Use the helper.
+
+### Page header — icon + title + subtitle
+
+The page header markup/classes are identical across screens (the `<h1>` is byte-for-byte the same on
+`iam/tag` and `/dashboard`):
+
+```html
+<div class="mb-2 flex items-center justify-between">
+  <div>
+    <h1 class="flex items-center gap-2 text-2xl font-bold tracking-tight">
+      <ng-icon name="lucideXxx" class="text-[1em]" />
+      {{ t('<scope>.page.Title') }}
+    </h1>
+    <p class="text-muted-foreground mt-1 text-sm">{{ t('<scope>.page.Subtitle') }}</p>
+  </div>
+  <!-- optional right-side actions: <div class="flex shrink-0 items-center gap-2">…</div> -->
+</div>
+```
+
+- The lucide icon is the domain's icon (same one as its sidebar nav item), sized `text-[1em]`.
+- The subtitle `<p>` is optional and design-driven: `/dashboard` has one, `iam/tag` (a bare list)
+  does not. Presence of a subtitle is justified drift; the `<h1>` (icon + title) never drifts.
+- The header renders ABOVE the page content (and, for stateful pages, above any loading/empty/error
+  shell) so it shows in every state — same as `/dashboard`.
 
 ---
 
@@ -259,7 +317,7 @@ When evaluating a page layout, check these in order:
 | Problem                            | Why it fails                                          | Fix                              |
 | ---------------------------------- | ----------------------------------------------------- | -------------------------------- |
 | `space-y-6` everywhere             | Uniform large gaps waste viewport                     | Use `space-y-3` for tight groups |
-| `p-6` on content container         | Creates dead space at top when layout already has gap | Use `px-6 pb-6` (no top padding) |
+| Hardcoded container padding (`p-6`, `px-6 pb-6`) | Drifts from other screens → wrong page-header offset | Use `listContainerClass('standalone')` |
 | `size="icon"` for row actions      | 36px button inflates row height to 53px               | Use `h-6 w-6 p-0.5` (24px)       |
 | Inconsistent section gaps          | 24px here, 8px there -- breaks visual rhythm          | Pick one scale step per zone     |
 | `rounded-full` on toolbar buttons  | Pill shape clashes with standard rounded UI           | Use default border-radius        |
@@ -308,4 +366,5 @@ The layout wrapper (`domains/admin/layout/layout.component.ts`) defines the oute
 </div>
 ```
 
-Content components should use `px-6 pb-6` (no top padding) to avoid double-padding with the layout.
+Content components own their inner spacing via `listContainerClass('standalone')` (see "Page
+scaffold" above) — never a hardcoded padding string.

package/dist/templates/frontend/application/.claude/skills/transloco-i18n/SKILL.md

@@ -242,3 +242,24 @@ which covers:
 | Sidebar/layout not rendering | `*transloco` on element with `<ng-content>` | Use `translate()` in class instead |
 | Translations not updating on lang change | Using `langChanges$` | Use `selectTranslation('scope')` instead |
 | Grid columns not updating on lang change | Static column labels resolved at init | Use `label: () => translator?.translate(...) ?? fallback` |
+
+## Keys the BACKEND sends (`translation` in an error body)
+
+A backend error can carry `translation: '<scope>.<path>'`; the Apollo error link resolves it with
+Transloco and falls back to the body's `message`. With NEITHER field present the toast renders
+`undefined` — a real incident, not a hypothetical.
+
+Two rules follow:
+
+- A domain error that can reach the global toast carries **both** `message` (English, developer
+  facing) and `translation`. Copying the shape of a neighbouring error is not enough: the `/token`
+  flow errors ship bare on purpose, because sign-in suppresses them with `context.skipGlobalErrors`
+  and renders them inline.
+- Put the key in a scope that is **already loaded** when the refusal can happen. `navigation` is
+  loaded eagerly by a blocking app initializer, so it is safe from any screen; a lazily-loaded
+  scope would render the raw key instead — no better than `undefined`.
+
+Adding the key on one side only is invisible to both sides' own tests: the backend spec asserts its
+own literal, the frontend spec asserts its own catalog. `scripts/contracts/README.md` explains that
+failure class and holds the suite that cross-checks the two (`pnpm test:contracts`); if you add or
+rename a backend-sent key, extend that contract with it.

package/dist/templates/frontend/application/CLAUDE.md

@@ -30,7 +30,15 @@ practices.
 - Keep components small and focused on a single responsibility
 - Use `input()` and `output()` functions instead of decorators
 - Use `computed()` for derived state
-- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
+- Do NOT set `changeDetection` — `OnPush` is the default in Angular 22 (the old
+  `Default`/CheckAlways is now the deprecated alias `Eager`). Set
+  `changeDetection: ChangeDetectionStrategy.Eager` ONLY when a template reads
+  external state mutated in place with no Angular trigger — no input change, no
+  signal, no local event. Today the only cases are the TanStack selection cells
+  (`au-row-selection`, `au-head-selection`): "select all" mutates sibling rows
+  without re-rendering them, so OnPush would leave their checkboxes stale. Most
+  flexRender cells (e.g. `BooleanCell`) do NOT need it — their value changes only
+  when flexRender re-renders the cell, which already triggers OnPush
 - Prefer inline templates for small components
 - Prefer Reactive forms instead of Template-driven ones
 - Do NOT use `ngClass`, use `class` bindings instead
@@ -54,7 +62,11 @@ practices.
 ## Services
 
 - Design services around a single responsibility
-- Use the `providedIn: 'root'` option for singleton services
+- For a root singleton resolved via `inject()`, use Angular 22's `@Service()` —
+  the ergonomic alias for `@Injectable({ providedIn: 'root' })` (available since
+  `@angular/core` 22.0.0). Keep `@Injectable` only when you need constructor DI,
+  advanced providers (`useClass`/`useValue`/`useExisting`/`useFactory` — `@Service`
+  exposes a single `factory` instead), or a non-root scope (`providedIn: 'platform'`).
 - Use the `inject()` function instead of constructor injection
 
 ## Skills (Auto-invoke based on context)
@@ -69,6 +81,9 @@ practices.
 | Composing UI with `@aurora/components`, picking between options           | `.claude/skills/catalyst-component-catalog/SKILL.md`        |
 | Authoring stories for `@aurora/components` (framework mode)               | `.claude/skills/catalyst-component-story-composer/SKILL.md` |
 | Wiring components / resolvers to `@aurora/modules/graphql` (query/mutate) | `.claude/skills/catalyst-data-layer/SKILL.md`               |
+| Publishing a dashboard widget (defineStatWidget/Chart/Table, provideWidget, WidgetDataSource, widget catalog) | `.claude/skills/catalyst-widget-creator/SKILL.md` |
+| Composing or auditing `*-detail.component.ts` / `*-form.component.ts` (COMPOSE or AUDIT mode)  | `.claude/skills/catalyst-form-composer-auditor/SKILL.md`    |
+| Adding, searching, composing, styling, or debugging Spartan UI (Brain/Helm), `@spartan-ng/*` imports | `.claude/skills/spartan/SKILL.md` |
 
 > **`skills/spartan/` is vendored content** — synced from the `spartan-ng-skills` repo via the
 > `spartan_install_skills` tool of the `spartan-ng-mcp` server. Do NOT hand-edit it: changes go to
@@ -76,5 +91,5 @@ practices.
 > `spartan_search`, `spartan_list`, …), NOT the official `@spartan-ng/mcp`.
 
 <!-- catalyst-ai:skills-index -->
-[Project Skills Index]|root:.claude|IMPORTANT:Prefer retrieval-led reasoning over pre-training.Read SKILL.md first,then related files.|skills/catalyst-component-catalog:{SKILL.md}|skills/catalyst-component-story-composer:{SKILL.md,STORIES.md}|skills/catalyst-data-layer:{SKILL.md,known-patterns.md}|skills/catalyst-data-table-management:{SKILL.md}|skills/catalyst-form-composer-auditor:{SKILL.md,catalyst-detail-form-rules.md}|skills/catalyst-project-structure:{SKILL.md}|skills/catalyst-review-module:{SKILL.md}|skills/layout-design-system:{SKILL.md}|skills/spartan:{SKILL.md,brain-helm.md,cli.md,composition.md,customization.md,directives.md,forms.md,icons.md,mcp.md,styling.md}|skills/transloco-i18n:{SKILL.md}
+[Project Skills Index]|root:.claude|IMPORTANT:Prefer retrieval-led reasoning over pre-training.Read SKILL.md first,then related files.|skills/catalyst-component-catalog:{SKILL.md}|skills/catalyst-component-story-composer:{SKILL.md,STORIES.md}|skills/catalyst-data-layer:{SKILL.md,known-patterns.md}|skills/catalyst-data-table-management:{SKILL.md}|skills/catalyst-form-composer-auditor:{SKILL.md,catalyst-detail-form-rules.md}|skills/catalyst-project-structure:{SKILL.md}|skills/catalyst-review-module:{SKILL.md}|skills/catalyst-widget-creator:{SKILL.md}|skills/layout-design-system:{SKILL.md}|skills/spartan:{SKILL.md,brain-helm.md,cli.md,composition.md,customization.md,directives.md,forms.md,icons.md,mcp.md,styling.md}|skills/transloco-i18n:{SKILL.md}
 <!-- /catalyst-ai:skills-index -->

package/dist/templates/frontend/application/angular.json

@@ -25,7 +25,9 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.css"]
+            "styles": [
+              "src/styles.css"
+            ]
           },
           "configurations": {
             "prod": {
@@ -38,8 +40,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1.3MB",
-                  "maximumError": "1.5MB"
+                  "maximumWarning": "1.1MB",
+                  "maximumError": "1.3MB"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -112,4 +114,4 @@
       }
     }
   }
-}
+}

package/dist/templates/frontend/application/codegen.ts

@@ -2,9 +2,10 @@ import type { CodegenConfig } from '@graphql-codegen/cli';
 
 const config: CodegenConfig = {
   schema: '../backend/src/**/*.graphql',
+  documents: ['src/**/*.{graphql,widgets}.ts'],
   generates: {
     './src/app/aurora.types.ts': {
-      plugins: ['typescript'],
+      plugins: ['typescript', 'typescript-operations'],
       config: {
         useTypeImports: true,
         enumsAsTypes: false,

package/dist/templates/frontend/application/libs/ui/accordion/src/lib/hlm-accordion-trigger.ts

@@ -40,7 +40,7 @@ export class HlmAccordionTrigger {
 
   protected readonly _computedTriggerClass = computed(() =>
     hlm(
-      'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-md py-4 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)] group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+      'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-md py-4 text-start text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[length:--spacing(4)] group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
       this.triggerClass(),
     ),
   );

package/dist/templates/frontend/application/libs/ui/alert/src/lib/hlm-alert.ts

@@ -3,7 +3,7 @@ import { classes } from '@spartan-ng/helm/utils';
 import { cva, type VariantProps } from 'class-variance-authority';
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2.5 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)] group/alert relative w-full",
+  "grid gap-0.5 rounded-lg border px-4 py-3 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2.5 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0.5 *:[ng-icon]:text-current *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group/alert relative w-full",
   {
     variants: {
       variant: {

package/dist/templates/frontend/application/libs/ui/alert-dialog/src/index.ts

@@ -5,6 +5,7 @@ import { HlmAlertDialogContent } from './lib/hlm-alert-dialog-content';
 import { HlmAlertDialogDescription } from './lib/hlm-alert-dialog-description';
 import { HlmAlertDialogFooter } from './lib/hlm-alert-dialog-footer';
 import { HlmAlertDialogHeader } from './lib/hlm-alert-dialog-header';
+import { HlmAlertDialogMedia } from './lib/hlm-alert-dialog-media';
 import { HlmAlertDialogOverlay } from './lib/hlm-alert-dialog-overlay';
 import { HlmAlertDialogPortal } from './lib/hlm-alert-dialog-portal';
 import { HlmAlertDialogTitle } from './lib/hlm-alert-dialog-title';
@@ -17,6 +18,7 @@ export * from './lib/hlm-alert-dialog-content';
 export * from './lib/hlm-alert-dialog-description';
 export * from './lib/hlm-alert-dialog-footer';
 export * from './lib/hlm-alert-dialog-header';
+export * from './lib/hlm-alert-dialog-media';
 export * from './lib/hlm-alert-dialog-overlay';
 export * from './lib/hlm-alert-dialog-portal';
 export * from './lib/hlm-alert-dialog-title';
@@ -30,6 +32,7 @@ export const HlmAlertDialogImports = [
   HlmAlertDialogDescription,
   HlmAlertDialogFooter,
   HlmAlertDialogHeader,
+  HlmAlertDialogMedia,
   HlmAlertDialogOverlay,
   HlmAlertDialogPortal,
   HlmAlertDialogTitle,

package/dist/templates/frontend/application/libs/ui/alert-dialog/src/lib/hlm-alert-dialog-action.ts

@@ -4,9 +4,7 @@ import { HlmButton } from '@spartan-ng/helm/button';
 @Directive({
   selector: 'button[hlmAlertDialogAction]',
   hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
-  host: {
-    '[type]': 'type()',
-  },
+  host: { 'data-slot': 'alert-dialog-action', '[type]': 'type()' },
 })
 export class HlmAlertDialogAction {
   public readonly type = input<'button' | 'submit' | 'reset'>('button');

package/dist/templates/frontend/application/libs/ui/alert-dialog/src/lib/hlm-alert-dialog-cancel.ts

@@ -1,13 +1,12 @@
 import { Directive, input } from '@angular/core';
+import { BrnDialogClose } from '@spartan-ng/brain/dialog';
 import { HlmButton, provideBrnButtonConfig } from '@spartan-ng/helm/button';
 
 @Directive({
   selector: 'button[hlmAlertDialogCancel]',
   providers: [provideBrnButtonConfig({ variant: 'outline' })],
-  hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
-  host: {
-    '[type]': 'type()',
-  },
+  hostDirectives: [BrnDialogClose, { directive: HlmButton, inputs: ['variant', 'size'] }],
+  host: { 'data-slot': 'alert-dialog-cancel', '[type]': 'type()' },
 })
 export class HlmAlertDialogCancel {
   public readonly type = input<'button' | 'submit' | 'reset'>('button');

package/dist/templates/frontend/application/libs/ui/alert-dialog/src/lib/hlm-alert-dialog-content.ts

@@ -1,4 +1,4 @@
-import { Directive, signal } from '@angular/core';
+import { Directive, input, signal } from '@angular/core';
 import { injectExposesStateProvider } from '@spartan-ng/brain/core';
 import { classes } from '@spartan-ng/helm/utils';
 
@@ -7,16 +7,19 @@ import { classes } from '@spartan-ng/helm/utils';
   host: {
     'data-slot': 'alert-dialog-content',
     '[attr.data-state]': 'state()',
+    '[attr.data-size]': 'size()',
   },
 })
 export class HlmAlertDialogContent {
   private readonly _stateProvider = injectExposesStateProvider({ optional: true, host: true });
   public readonly state = this._stateProvider?.state ?? signal('closed');
 
+  public readonly size = input<'sm' | 'default'>('default');
+
   constructor() {
     classes(
       () =>
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 mx-auto grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg data-[state=closed]:duration-200 data-[state=open]:duration-200 sm:mx-0 sm:max-w-lg',
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-6 rounded-xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg group/alert-dialog-content grid w-full outline-none',
     );
   }
 }

package/dist/templates/frontend/application/libs/ui/alert-dialog/src/lib/hlm-alert-dialog-description.ts

@@ -5,12 +5,13 @@ import { classes } from '@spartan-ng/helm/utils';
 @Directive({
   selector: '[hlmAlertDialogDescription]',
   hostDirectives: [BrnAlertDialogDescription],
-  host: {
-    'data-slot': 'alert-dialog-description',
-  },
+  host: { 'data-slot': 'alert-dialog-description' },
 })
 export class HlmAlertDialogDescription {
   constructor() {
-    classes(() => 'text-muted-foreground text-sm');
+    classes(
+      () =>
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+    );
   }
 }

package/dist/templates/frontend/application/libs/ui/alert-dialog/src/lib/hlm-alert-dialog-footer.ts

@@ -3,12 +3,13 @@ import { classes } from '@spartan-ng/helm/utils';
 
 @Directive({
   selector: '[hlmAlertDialogFooter],hlm-alert-dialog-footer',
-  host: {
-    'data-slot': 'alert-dialog-footer',
-  },
+  host: { 'data-slot': 'alert-dialog-footer' },
 })
 export class HlmAlertDialogFooter {
   constructor() {
-    classes(() => 'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end');
+    classes(
+      () =>
+        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+    );
   }
 }