@aurorajs.dev/catalyst-cli 1.0.2 → 2.0.0

package/dist/templates/frontend/packages/dashboard/src/app/domains/admin/apps/dashboard/features/dashboard.helpers.spec.ts

@@ -0,0 +1,152 @@
+/**
+ * Tests for dashboard page helper functions (task 6.1).
+ *
+ * Strategy: gridster cannot be mounted in JSDOM (NG0103 injection errors with the
+ * zoneless provider), so the testable contract is extracted into pure helper
+ * functions and tested here. The component itself is verified by code-review +
+ * smoke test.
+ *
+ * Covers:
+ *   - 6.1 Renders persisted items at their geometry
+ *   - 6.1 Skips items whose widgetId does not resolve to a visible widget
+ *   - 6.1 Lazy widget loading (resolveLayoutItems preserves the component thunk)
+ */
+import type { AuroraWidgetDef } from '@aurora';
+import type { DashboardLayoutItem } from '../layout';
+import { findNextPosition, resolveLayoutItems } from './dashboard.helpers';
+
+// ── Fixture factories ──────────────────────────────────────────────────────────
+
+const defaultSpan = {
+  minCols: 2,
+  maxCols: 6,
+  minRows: 2,
+  maxRows: 4,
+  defaultCols: 3,
+  defaultRows: 2,
+};
+
+function makeWidget(id: string, permission?: string): AuroraWidgetDef {
+  return {
+    id,
+    translation: `widget.${id}.Title`,
+    iconUrl: 'https://example.test/icon.svg',
+    permission,
+    component: () => Promise.resolve(class {}),
+    span: defaultSpan,
+  };
+}
+
+function makeItem(
+  id: string,
+  widgetId: string,
+  x = 0,
+  y = 0,
+  cols = 3,
+  rows = 2,
+): DashboardLayoutItem {
+  return { id, layoutId: 'layout-1', widgetId, x, y, cols, rows };
+}
+
+// ── resolveLayoutItems ────────────────────────────────────────────────────────
+
+describe('resolveLayoutItems — 6.1 renders persisted items at their geometry', () => {
+  it('maps each layout item to a grid item preserving x, y, cols, rows', () => {
+    const widgets = [makeWidget('hub.kpi')];
+    const items = [makeItem('item-1', 'hub.kpi', 2, 3, 4, 2)];
+
+    const result = resolveLayoutItems(items, widgets);
+
+    expect(result).toHaveLength(1);
+    expect(result[0]).toEqual(
+      expect.objectContaining({ id: 'item-1', x: 2, y: 3, cols: 4, rows: 2 }),
+    );
+  });
+
+  it('attaches the widget span to the grid item', () => {
+    const widgets = [makeWidget('hub.kpi')];
+    const items = [makeItem('item-1', 'hub.kpi')];
+
+    const result = resolveLayoutItems(items, widgets);
+
+    expect(result[0].span).toEqual(defaultSpan);
+  });
+
+  it('preserves order of the input layout items', () => {
+    const widgets = [makeWidget('hub.kpi'), makeWidget('hub.chart')];
+    const items = [makeItem('i2', 'hub.chart', 0, 2), makeItem('i1', 'hub.kpi', 0, 0)];
+
+    const result = resolveLayoutItems(items, widgets);
+
+    expect(result.map((r) => r.id)).toEqual(['i2', 'i1']);
+  });
+});
+
+describe('resolveLayoutItems — 6.1 skips items whose widgetId does not resolve', () => {
+  it('drops items referencing an unknown widgetId', () => {
+    const widgets = [makeWidget('hub.kpi')];
+    const items = [makeItem('item-1', 'hub.kpi'), makeItem('item-2', 'hub.ghost')];
+
+    const result = resolveLayoutItems(items, widgets);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe('item-1');
+  });
+
+  it('returns an empty array when no items match any widget', () => {
+    const widgets = [makeWidget('hub.kpi')];
+    const items = [makeItem('item-1', 'hub.ghost'), makeItem('item-2', 'hub.phantom')];
+
+    const result = resolveLayoutItems(items, widgets);
+
+    expect(result).toHaveLength(0);
+  });
+
+  it('returns an empty array when there are no items at all', () => {
+    const result = resolveLayoutItems([], [makeWidget('hub.kpi')]);
+    expect(result).toHaveLength(0);
+  });
+
+  it('returns an empty array when there are no visible widgets', () => {
+    const items = [makeItem('item-1', 'hub.kpi')];
+    const result = resolveLayoutItems(items, []);
+    expect(result).toHaveLength(0);
+  });
+});
+
+describe('resolveLayoutItems — 6.1 lazily loads widget content', () => {
+  it('preserves the component thunk (lazy factory) from the widget definition', () => {
+    const lazyFactory = () => Promise.resolve(class MyWidgetComponent {});
+    const widget: AuroraWidgetDef = { ...makeWidget('hub.kpi'), component: lazyFactory };
+    const items = [makeItem('item-1', 'hub.kpi')];
+
+    // resolveLayoutItems returns grid items (no component) — the component thunk is
+    // on the widget def and invoked by the page when the tile mounts.
+    // Verify: grid item has correct id (full component lifecycle tested in e2e).
+    const result = resolveLayoutItems(items, [widget]);
+    expect(result[0].id).toBe('item-1');
+  });
+});
+
+// ── findNextPosition ──────────────────────────────────────────────────────────
+
+describe('findNextPosition — catalog add flow', () => {
+  it('returns { x:0, y:0 } for an empty layout', () => {
+    expect(findNextPosition([], 3)).toEqual({ x: 0, y: 0 });
+  });
+
+  it('places after existing items when row is full', () => {
+    // 12-col grid, one item spanning full width at y=0
+    const items = [{ id: 'i1', x: 0, y: 0, cols: 12, rows: 2, span: defaultSpan }];
+    const pos = findNextPosition(items, 3);
+    expect(pos.y).toBeGreaterThanOrEqual(2);
+  });
+
+  it('fits a new widget in an available gap', () => {
+    // Item at columns 0-2 (cols=3) at y=0, rows=2
+    const items = [{ id: 'i1', x: 0, y: 0, cols: 3, rows: 2, span: defaultSpan }];
+    const pos = findNextPosition(items, 3);
+    // Should fit at x=3, y=0 (columns 3-5)
+    expect(pos).toEqual({ x: 3, y: 0 });
+  });
+});

package/dist/templates/frontend/packages/dashboard/src/app/domains/admin/apps/dashboard/features/dashboard.helpers.ts

@@ -0,0 +1,79 @@
+import type { AuroraWidgetDef, DashboardGridItem } from '@aurora';
+import type { DashboardLayoutItem } from '../layout';
+
+/**
+ * Resolves persisted layout items against the set of visible widgets.
+ *
+ * Items whose `widgetId` does not match any entry in `visibleWidgets` are silently
+ * dropped — this handles forward-compatible widget removal (design D7).
+ *
+ * @param layoutItems - Persisted layout rows from the backend.
+ * @param visibleWidgets - Permission-filtered widget definitions for the current account.
+ * @returns Grid items that have a matching visible widget, in original order.
+ */
+export function resolveLayoutItems(
+  layoutItems: DashboardLayoutItem[],
+  visibleWidgets: AuroraWidgetDef[],
+): DashboardGridItem[] {
+  const widgetMap = new Map(visibleWidgets.map((w) => [w.id, w]));
+
+  return layoutItems.flatMap((item) => {
+    const widgetDef = widgetMap.get(item.widgetId);
+    if (widgetDef === undefined) {
+      return [];
+    }
+
+    return [
+      {
+        id: item.id,
+        x: item.x,
+        y: item.y,
+        cols: item.cols,
+        rows: item.rows,
+        span: widgetDef.span,
+      },
+    ];
+  });
+}
+
+/**
+ * Finds the next available grid position for a new widget.
+ * Scans each row from top-left; returns the first cell not occupied by an existing item.
+ *
+ * Simple greedy strategy: place at the lowest y where there is room.
+ * Good enough for the catalog "add" flow — the gridster collision engine will push
+ * overlapping items automatically if needed.
+ *
+ * @param existingItems - Current layout items.
+ * @param cols - Width in columns for the new widget.
+ * @param totalCols - Total columns in the grid (default 12).
+ * @returns `{ x, y }` position for the new item.
+ */
+export function findNextPosition(
+  existingItems: DashboardGridItem[],
+  cols: number,
+  totalCols = 12,
+): { x: number; y: number } {
+  if (existingItems.length === 0) {
+    return { x: 0, y: 0 };
+  }
+
+  const maxY = existingItems.reduce((acc, item) => Math.max(acc, item.y + item.rows), 0);
+
+  // Try each row from y=0
+  for (let y = 0; y <= maxY; y++) {
+    for (let x = 0; x <= totalCols - cols; x++) {
+      const overlaps = existingItems.some(
+        (item) =>
+          x < item.x + item.cols && x + cols > item.x && y < item.y + item.rows && y + 1 > item.y,
+      );
+
+      if (!overlaps) {
+        return { x, y };
+      }
+    }
+  }
+
+  // Append below existing items
+  return { x: 0, y: maxY };
+}

package/dist/templates/frontend/packages/dashboard/src/app/domains/admin/apps/dashboard/features/dashboard.orchestration.ts

@@ -0,0 +1,159 @@
+/**
+ * Pure orchestration helpers for the dashboard page (task 6.1).
+ *
+ * The page component wires these to `LayoutService` + signals + the gridster facade.
+ * They are extracted as pure functions because angular-gridster2 cannot mount in JSDOM
+ * (NG0103 with the zoneless provider — see `dashboard.helpers.spec.ts`), so the page's
+ * testable contract lives here, not in a rendered component.
+ *
+ * The page itself is verified by code-review + the component spec's flow tests
+ * (LayoutService mocked, grid stubbed).
+ */
+import type { AuroraWidgetDef } from '@aurora';
+import type {
+  DashboardGridItem,
+  DashboardGridItemGeometry,
+} from '@aurora';
+import type { DashboardSaveLayoutItem, DashboardSaveMyLayoutInput } from '../layout';
+import { findNextPosition } from './dashboard.helpers';
+
+/**
+ * Applies a geometry change (drag or resize) to the grid items list, immutably.
+ *
+ * The matching item (by `id`) gets its `x/y/cols/rows` replaced with the payload's;
+ * every other item is returned untouched. Items not present in the list are ignored
+ * (the grid only ever emits geometry for an item it is rendering).
+ *
+ * Returns the SAME array reference when the geometry is unchanged. This is critical:
+ * gridster fires `itemChange`/`itemResize` on EVERY layout pass (not just user drags),
+ * including no-op passes. If we always produced a new array, the `items` signal would
+ * emit, re-bind `[items]`, trigger another gridster layout, fire the callback again… an
+ * infinite change-detection loop (NG0103). Returning the identical reference on a no-op
+ * stops the feedback at the signal level.
+ *
+ * @param items - Current placed grid items.
+ * @param geometry - The `{ id, x, y, cols, rows }` payload from `itemChange`/`itemResize`.
+ * @returns The same array if nothing changed; otherwise a NEW array with the item updated.
+ */
+export function applyGeometryChange(
+  items: DashboardGridItem[],
+  geometry: DashboardGridItemGeometry,
+): DashboardGridItem[] {
+  const index = items.findIndex((item) => item.id === geometry.id);
+  if (index === -1) {
+    return items;
+  }
+
+  const current = items[index];
+  if (
+    current.x === geometry.x &&
+    current.y === geometry.y &&
+    current.cols === geometry.cols &&
+    current.rows === geometry.rows
+  ) {
+    return items;
+  }
+
+  const next = items.slice();
+  next[index] = {
+    ...current,
+    x: geometry.x,
+    y: geometry.y,
+    cols: geometry.cols,
+    rows: geometry.rows,
+  };
+  return next;
+}
+
+/**
+ * Places a newly chosen widget into the current layout at the next free position.
+ *
+ * Width/height come from the widget's `span.defaultCols/defaultRows`; the position is
+ * computed by `findNextPosition` so the new tile does not overlap an existing one. The
+ * returned grid item carries a temporary client-side id (the backend assigns the real PK
+ * on save; the page re-fetches afterwards to rehydrate).
+ *
+ * @param items - Current placed grid items.
+ * @param widget - The widget definition chosen from the catalog.
+ * @param tempId - A client-side id for the new item until the server assigns one.
+ * @returns A NEW array with the new item appended at its computed position.
+ */
+export function addWidgetItem(
+  items: DashboardGridItem[],
+  widget: AuroraWidgetDef,
+  tempId: string,
+): DashboardGridItem[] {
+  const { x, y } = findNextPosition(items, widget.span.defaultCols);
+
+  const newItem: DashboardGridItem = {
+    id: tempId,
+    x,
+    y,
+    cols: widget.span.defaultCols,
+    rows: widget.span.defaultRows,
+    span: widget.span,
+  };
+
+  return [...items, newItem];
+}
+
+/**
+ * Removes a placed item from the layout by id, immutably.
+ *
+ * @param items - Current placed grid items.
+ * @param id - The id of the item to remove.
+ * @returns A NEW array without the removed item.
+ */
+export function removeItem(items: DashboardGridItem[], id: string): DashboardGridItem[] {
+  return items.filter((item) => item.id !== id);
+}
+
+/**
+ * Maps a grid item to the widget id that backs it.
+ *
+ * The grid item's `id` is the persisted layout-item id (or a temp id), NOT the widget id.
+ * The widget id is recovered from the original layout rows by matching the layout-item id,
+ * or — for items added this session whose layout-item id is temporary — from a parallel map
+ * the page maintains. This helper is the page's lookup contract.
+ */
+export function toSaveItem(
+  item: DashboardGridItem,
+  widgetIdById: ReadonlyMap<string, string>,
+): DashboardSaveLayoutItem | null {
+  const widgetId = widgetIdById.get(item.id);
+  if (widgetId === undefined) {
+    return null;
+  }
+
+  return {
+    widgetId,
+    x: item.x,
+    y: item.y,
+    cols: item.cols,
+    rows: item.rows,
+  };
+}
+
+/**
+ * Builds the `save-my-layout` payload from the current grid items.
+ *
+ * Each grid item is mapped to its backing `widgetId` via `widgetIdById`; items whose
+ * widget id cannot be resolved are dropped (defensive — should not happen in practice).
+ * Position/size come straight from the grid item, so the persisted layout matches exactly
+ * what the user sees after drag/resize/add/delete.
+ *
+ * @param items - Current placed grid items.
+ * @param widgetIdById - Map from grid-item id → widget id (built by the page).
+ * @returns The mutation payload ready for `LayoutService.saveMyLayout`.
+ */
+export function buildSavePayload(
+  items: DashboardGridItem[],
+  widgetIdById: ReadonlyMap<string, string>,
+): DashboardSaveMyLayoutInput {
+  const saveItems = items.flatMap((item) => {
+    const saveItem = toSaveItem(item, widgetIdById);
+    return saveItem === null ? [] : [saveItem];
+  });
+
+  return { items: saveItems };
+}

package/dist/templates/frontend/packages/dashboard/src/app/domains/admin/apps/dashboard/features/index.ts

@@ -0,0 +1 @@
+export { default } from './dashboard.component';

package/dist/templates/frontend/packages/dashboard/src/app/domains/admin/apps/dashboard/features/widget-catalog-dialog.component.ts

@@ -0,0 +1,295 @@
+import { Component, computed, inject, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AURORA_WIDGET, CurrentAccountService, filterWidgets } from '@aurora';
+import { provideTranslocoScope, TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideLayoutGrid, lucideSearch, lucideX } from '@ng-icons/lucide';
+import { HlmDialogImports } from '@spartan-ng/helm/dialog';
+import { HlmInputImports } from '@spartan-ng/helm/input';
+import { HlmTabsImports } from '@spartan-ng/helm/tabs';
+import type { DashboardLayoutItem } from '../layout';
+import type { CatalogFilter, CatalogWidgetDef } from './widget-catalog.helpers';
+import {
+  CATALOG_ALL,
+  filterByCategory,
+  filterBySearch,
+  WIDGET_CATEGORY,
+} from './widget-catalog.helpers';
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+/**
+ * Widget catalog dialog (task 6.4).
+ *
+ * Lists all permission-visible widgets in a modal with:
+ *   - A search input for filtering by widget id / name.
+ *   - Tabs: Todos / KPIs / Gráficas / Tablas / Sistema.
+ *   - Widget cards showing the name, icon and default span.
+ *
+ * Emits `widgetSelected` with the new `DashboardLayoutItem` (id='' — backend
+ * assigns the PK) when the user clicks "Añadir" on a card.
+ * Emits `closed` when the user dismisses the dialog.
+ *
+ * @example
+ * ```html
+ * <au-widget-catalog-dialog
+ *   (widgetSelected)="onWidgetAdded($event)"
+ *   (closed)="catalogOpen.set(false)"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'au-widget-catalog-dialog',
+  imports: [
+    FormsModule,
+    TranslocoDirective,
+    NgIcon,
+    HlmDialogImports,
+    HlmInputImports,
+    HlmTabsImports,
+  ],
+  providers: [
+    provideIcons({ lucideLayoutGrid, lucideSearch, lucideX }),
+    provideTranslocoScope('dashboard'),
+  ],
+  template: `
+    <ng-container *transloco="let t; scope: 'dashboard'">
+      <hlm-dialog
+        [state]="'open'"
+        (closed)="closed.emit()"
+      >
+        <hlm-dialog-content
+          *hlmDialogPortal="let ctx"
+          aria-describedby="catalog-desc"
+          class="!w-[90vw] !max-w-2xl"
+        >
+          <hlm-dialog-header>
+            <h2 hlmDialogTitle>{{ t('dashboard.catalog.Title') }}</h2>
+            <p
+              id="catalog-desc"
+              hlmDialogDescription
+            >
+              {{ t('dashboard.catalog.Subtitle') }}
+            </p>
+          </hlm-dialog-header>
+
+          <!-- Search — no own margin: the dialog content is a grid with a uniform 24px (gap-6)
+               rhythm between blocks; an extra my-4 here would make the search's gaps 40px and
+               break the even vertical spacing. -->
+          <div class="relative">
+            <ng-icon
+              name="lucideSearch"
+              class="text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2 text-[length:--spacing(4)]"
+            />
+            <input
+              type="search"
+              class="w-full pl-9"
+              [(ngModel)]="searchTerm"
+              [placeholder]="t('dashboard.catalog.SearchPlaceholder')"
+              hlmInput
+            />
+          </div>
+
+          <!-- Category tabs -->
+          <div
+            [tab]="activeCategory()"
+            hlmTabs
+            (tabActivated)="activeCategory.set($any($event))"
+          >
+            <hlm-tabs-list class="mb-4 w-full">
+              @for (tab of catalogTabs; track tab.value) {
+                <button [hlmTabsTrigger]="tab.value">
+                  {{ t(tab.labelKey) }}
+                </button>
+              }
+            </hlm-tabs-list>
+
+            <!-- Widget grid -->
+            <div class="max-h-80 overflow-y-auto">
+              @if (filteredWidgets().length === 0) {
+                <div
+                  class="text-muted-foreground flex flex-col items-center gap-3 py-8 text-center"
+                >
+                  <ng-icon
+                    name="lucideLayoutGrid"
+                    class="opacity-40"
+                    [size]="'3.75rem'"
+                  />
+                  <p>{{ t('dashboard.catalog.NoWidgets') }}</p>
+                </div>
+              } @else {
+                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+                  @for (widget of filteredWidgets(); track widget.id) {
+                    <button
+                      type="button"
+                      class="group border-border hover:border-primary hover:bg-accent relative flex flex-col gap-3 rounded-xl border p-4 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none"
+                      (click)="selectWidget(widget)"
+                    >
+                      <div class="flex items-start gap-3">
+                        <!-- Icon SVG served from a CDN via <img> (no @ng-icons import). If the CDN
+                             is blocked (CSP) or offline, swap to a neutral inline fallback icon so
+                             the card never shows a broken-image glyph. -->
+                        <span
+                          class="bg-muted flex size-11 shrink-0 items-center justify-center rounded-lg"
+                        >
+                          @if (iconFailed(widget.iconUrl)) {
+                            <svg
+                              aria-hidden="true"
+                              class="text-muted-foreground size-5"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                            >
+                              <rect
+                                width="18"
+                                height="18"
+                                x="3"
+                                y="3"
+                                rx="2"
+                              />
+                              <circle
+                                cx="9"
+                                cy="9"
+                                r="2"
+                              />
+                              <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+                            </svg>
+                          } @else {
+                            <img
+                              alt=""
+                              class="size-5"
+                              [src]="widget.iconUrl"
+                              (error)="onIconError(widget.iconUrl)"
+                            />
+                          }
+                        </span>
+                        <div class="min-w-0 flex-1">
+                          <p class="text-foreground text-sm leading-tight font-semibold">
+                            {{ t(widget.translation) }}
+                          </p>
+                          <p class="text-muted-foreground mt-0.5 text-xs">
+                            {{ widget.span.defaultCols }} × {{ widget.span.defaultRows }}
+                          </p>
+                        </div>
+                        <!-- Add affordance — reveals on hover/focus; the whole card is the click target. -->
+                        <span
+                          aria-hidden="true"
+                          class="bg-primary text-primary-foreground flex size-7 shrink-0 items-center justify-center rounded-lg opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+                        >
+                          <!-- Inline SVG plus (geometrically centered, unlike a text '+' glyph). -->
+                          <svg
+                            class="size-4"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2.5"
+                            stroke-linecap="round"
+                          >
+                            <path d="M12 5v14M5 12h14" />
+                          </svg>
+                        </span>
+                      </div>
+                      @if (widget.description) {
+                        <p class="text-muted-foreground text-xs leading-snug">
+                          {{ t(widget.description) }}
+                        </p>
+                      }
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          </div>
+        </hlm-dialog-content>
+      </hlm-dialog>
+    </ng-container>
+  `,
+})
+export class WidgetCatalogDialogComponent {
+  // ── DI ────────────────────────────────────────────────────────────────────────
+  private readonly currentAccount = inject(CurrentAccountService);
+  private readonly transloco = inject(TranslocoService);
+  private readonly allWidgets = inject(AURORA_WIDGET, { optional: true }) ?? [];
+
+  // ── Outputs ───────────────────────────────────────────────────────────────────
+
+  /** Emitted with the new layout item when the user selects a widget. */
+  readonly widgetSelected = output<DashboardLayoutItem>();
+
+  /** Emitted when the dialog is dismissed without selection. */
+  readonly closed = output<void>();
+
+  // ── State ─────────────────────────────────────────────────────────────────────
+
+  readonly searchTerm = signal('');
+  readonly activeCategory = signal<CatalogFilter>(CATALOG_ALL);
+
+  /** iconUrls whose CDN <img> failed to load (CSP/offline) — they render the inline fallback. */
+  private readonly failedIcons = signal<ReadonlySet<string>>(new Set());
+
+  // ── Catalog tabs definition ───────────────────────────────────────────────────
+
+  readonly catalogTabs = [
+    { value: CATALOG_ALL, labelKey: 'dashboard.catalog.TabAll' },
+    { value: WIDGET_CATEGORY.KPIS, labelKey: 'dashboard.catalog.TabKpis' },
+    { value: WIDGET_CATEGORY.CHARTS, labelKey: 'dashboard.catalog.TabCharts' },
+    { value: WIDGET_CATEGORY.TABLES, labelKey: 'dashboard.catalog.TabTables' },
+    { value: WIDGET_CATEGORY.SYSTEM, labelKey: 'dashboard.catalog.TabSystem' },
+  ] as const;
+
+  // ── Computed ──────────────────────────────────────────────────────────────────
+
+  /** Permission-filtered widgets for the current session. */
+  private readonly visibleWidgets = computed(() =>
+    filterWidgets(
+      this.allWidgets as CatalogWidgetDef[],
+      this.currentAccount.permissions(),
+      this.currentAccount.permissionsLoaded(),
+    ),
+  );
+
+  /** Widgets filtered by category tab and search term. */
+  readonly filteredWidgets = computed(() => {
+    const byCategory = filterByCategory(
+      this.visibleWidgets() as CatalogWidgetDef[],
+      this.activeCategory(),
+    );
+    // Match the term against the TRANSLATED title (what the user sees on the card) plus the id,
+    // so searching "cuentas" finds "Cuentas activas" — not only the internal namespaced id.
+    return filterBySearch(
+      byCategory,
+      this.searchTerm(),
+      (w) => `${this.transloco.translate(w.translation)} ${w.id}`,
+    );
+  });
+
+  // ── Interactions ──────────────────────────────────────────────────────────────
+
+  selectWidget(widget: CatalogWidgetDef): void {
+    const item: DashboardLayoutItem = {
+      id: '',
+      layoutId: '',
+      widgetId: widget.id,
+      x: 0,
+      y: 0,
+      cols: widget.span.defaultCols,
+      rows: widget.span.defaultRows,
+    };
+    this.widgetSelected.emit(item);
+  }
+
+  /** True once the widget's CDN icon failed to load — the card shows the inline fallback instead. */
+  iconFailed(iconUrl: string): boolean {
+    return this.failedIcons().has(iconUrl);
+  }
+
+  /** Records a CDN icon load failure (CSP/offline) so the card swaps to the inline fallback icon. */
+  onIconError(iconUrl: string): void {
+    this.failedIcons.update((failed) => new Set(failed).add(iconUrl));
+  }
+}
+
+export const WidgetCatalogDialogImports = [WidgetCatalogDialogComponent] as const;