@aurorajs.dev/catalyst-cli 1.0.2 → 1.1.3

package/dist/templates/frontend/application/src/@aurora/modules/authentication/shared/token-store.service.ts

@@ -1,7 +1,28 @@
 import { computed, Injectable, signal } from '@angular/core';
-import { CREDENTIALS_KEY, readCredentials } from './authentication';
+import {
+  CREDENTIALS_KEY,
+  getAccountId,
+  getActorAccountId,
+  ORIGIN_CREDENTIALS_KEY,
+  readCredentials,
+  readStoredCredentials,
+} from './authentication';
 import type { OAuthTokens } from './authentication.types';
 
+/** The `(account, actor)` pair identifying WHO the active access token represents. */
+interface IdentityTuple {
+  readonly account: string | null;
+  readonly actor: string | null;
+}
+
+function identityTupleOf(accessToken: string): IdentityTuple {
+  return { account: getAccountId(accessToken), actor: getActorAccountId(accessToken) };
+}
+
+function sameIdentity(a: IdentityTuple, b: IdentityTuple): boolean {
+  return a.account === b.account && a.actor === b.actor;
+}
+
 /**
  * Holds the credentials/accessToken/refreshToken signals and owns the
  * localStorage I/O for the authentication session. Deliberately has zero
@@ -12,18 +33,57 @@ import type { OAuthTokens } from './authentication.types';
  * and delegate to this store. Read-only consumers (route guards, components
  * that gate UI on `authenticated`, the Apollo factory's `SetContextLink`)
  * inject this store directly.
+ *
+ * ## Credential stack (impersonation)
+ *
+ * `beginImpersonation`/`endImpersonation` add a SECOND slot (`originCredentials`) so an
+ * operator's own session can be stashed behind an impersonated one and restored later.
+ * `isImpersonating` deliberately derives from the ACTIVE access token's actor claim (`act.aci`),
+ * never from the presence of the stash — the stash is UX state that can go stale (another tab, a
+ * hand-edited localStorage entry); the token is the only authority.
  */
 @Injectable()
 export class TokenStore {
   private readonly _credentials = signal<OAuthTokens | null>(readCredentials());
+  private readonly _originCredentials = signal<OAuthTokens | null>(
+    readStoredCredentials(ORIGIN_CREDENTIALS_KEY),
+  );
+  private readonly _identityGeneration = signal(0);
+  /**
+   * The `(account, actor)` tuple as of the LAST synced write — never persisted (constraint: the
+   * generation is in-memory session state, so a reload legitimately starts a fresh sequence). Seeded
+   * from whatever `_credentials` hydrated from localStorage at construction, so the FIRST write after
+   * a reload is compared against the identity that was actually already active, not against empty.
+   */
+  private _lastIdentityTuple: IdentityTuple = identityTupleOf(
+    this._credentials()?.accessToken ?? '',
+  );
 
   readonly authenticated = computed(() => this._credentials() !== null);
   readonly accessToken = computed(() => this._credentials()?.accessToken ?? '');
   readonly refreshToken = computed(() => this._credentials()?.refreshToken ?? '');
+  readonly isImpersonating = computed(() => getActorAccountId(this.accessToken()) !== null);
+  /**
+   * `true` iff the origin slot holds a session to roll back to. Read it BEFORE deciding to unwind
+   * an impersonation: `isImpersonating()` says "the ACTIVE token is impersonated", which stays
+   * `true` after a no-op `endImpersonation()`, so a caller that unwinds blindly with an empty
+   * stash dead-ends on the same expired token. It is UX state, never an authorization signal —
+   * `isImpersonating` must keep deriving from the token, not from this.
+   */
+  readonly hasStashedSession = computed(() => this._originCredentials() !== null);
+  /**
+   * Monotonic counter over the `(account, actor)` identity tuple derived from the ACTIVE access
+   * token — NOT over which method was called. Increments exactly when a write leaves the store with
+   * a DIFFERENT tuple than the one before it; a refresh rotation that keeps the same account and
+   * actor claim leaves it untouched, so a retry after a transparent refresh stays legal. In-memory
+   * only — never persisted, so a reload legitimately starts a fresh sequence.
+   */
+  readonly identityGeneration = this._identityGeneration.asReadonly();
 
   setCredentials(credentials: OAuthTokens): void {
     localStorage.setItem(CREDENTIALS_KEY, btoa(JSON.stringify(credentials)));
     this._credentials.set(credentials);
+    this.syncIdentityGeneration(credentials.accessToken);
   }
 
   getCredentials(): OAuthTokens | null {
@@ -32,6 +92,61 @@ export class TokenStore {
 
   clear(): void {
     localStorage.removeItem(CREDENTIALS_KEY);
+    localStorage.removeItem(ORIGIN_CREDENTIALS_KEY);
     this._credentials.set(null);
+    this._originCredentials.set(null);
+    this.syncIdentityGeneration('');
+  }
+
+  /**
+   * Recomputes the `(account, actor)` tuple for `accessToken` and advances `identityGeneration`
+   * only if it differs from the tuple recorded at the previous write. Called from every
+   * state-mutating write (`setCredentials` and `clear`; `beginImpersonation`/`endImpersonation` go
+   * through `setCredentials`), so no call site can forget to advance it — the tuple decides, not
+   * the caller.
+   */
+  private syncIdentityGeneration(accessToken: string): void {
+    const tuple = identityTupleOf(accessToken);
+    if (!sameIdentity(tuple, this._lastIdentityTuple)) {
+      this._identityGeneration.update((generation) => generation + 1);
+    }
+    this._lastIdentityTuple = tuple;
+  }
+
+  /**
+   * Stashes the currently active credentials into the origin slot, then installs `credentials`
+   * as the active session. Refuses (no-op) when the origin slot is already occupied, so a nested
+   * call can never overwrite and lose the operator's real session (mirrors backend veto V2).
+   *
+   * Returns `true` when the swap happened, `false` when it was refused. Security finding F7: the
+   * caller MUST check this — a refused swap leaves the ACTIVE credentials as the operator's own
+   * (unswitched) token, so blindly proceeding as if the swap succeeded (re-materializing session
+   * state, navigating away) would make the operator believe they act as the target while every
+   * request still carries their own privileges.
+   */
+  beginImpersonation(credentials: OAuthTokens): boolean {
+    if (this._originCredentials() !== null) return false;
+
+    const current = this._credentials();
+    if (current) {
+      localStorage.setItem(ORIGIN_CREDENTIALS_KEY, btoa(JSON.stringify(current)));
+      this._originCredentials.set(current);
+    }
+
+    this.setCredentials(credentials);
+    return true;
+  }
+
+  /**
+   * Restores the stashed origin credentials as the active session and empties the origin slot.
+   * A no-op when no stash exists.
+   */
+  endImpersonation(): void {
+    const origin = this._originCredentials();
+    if (!origin) return;
+
+    localStorage.removeItem(ORIGIN_CREDENTIALS_KEY);
+    this._originCredentials.set(null);
+    this.setCredentials(origin);
   }
 }

package/dist/templates/frontend/application/src/@aurora/modules/dashboard/components/dashboard-grid/dashboard-grid.component.css

@@ -0,0 +1,150 @@
+/*
+ * Gridstack chrome theming for <au-dashboard-grid> — our hand-written overrides on top of the
+ * vendored engine CSS, which lives in the sibling dashboard-grid.gridstack.css (loaded first via
+ * the component's styleUrls). The library import is kept in that separate stylesheet so each file
+ * stays under the `anyComponentStyle` budget; both ship together in this component's lazy chunk.
+ *
+ * Encapsulation is None on the component (see the .ts) so these GLOBAL `.grid-stack*`
+ * selectors reach the DOM Gridstack manages. Gridstack writes inline positioning styles; we
+ * only theme the chrome here with Spartan/shadcn tokens.
+ */
+
+/* ── Dock mode ───────────────────────────────────────────────────────────────
+   In dock mode the `.grid-stack` element gets an explicit inline pixel `width`
+   (set in applyDockWidth(): itemCount × tileWidth, where tileWidth = containerWidth /
+   visibleCols) so a row of tiles matches the others-grid card width and gridstack
+   resolves each column to exactly tileWidth. Inline width wins over the vendored
+   engine CSS, so no override is needed here. The parent wrapper is the
+   `overflow-x: auto` scroll container at 100% width; when the grid is wider than
+   the wrapper it scrolls, when narrower the row fills / is left-aligned (block element).
+
+   The host class is `block h-full` by default; in dock mode the height is driven
+   by the single row's cell height + margins, not the container height. We rely on
+   the parent wrapper having a fixed height (matching DOCK_TILE_HEIGHT + margins)
+   rather than changing the host class, so no host override is needed here. */
+
+/* ── Tile body ───────────────────────────────────────────────────────────────
+   A shadcn card. The tile chrome (au-dashboard-tile) draws its own border/bg, so
+   the item-content is a neutral, clipped surface that lets the tile fill the cell edge to edge. */
+.grid-stack-item-content {
+  inset: 0;
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+  background-color: var(--card);
+  color: var(--card-foreground);
+}
+
+/* ── Dock mode: no item-content chrome ─────────────────────────────────────────
+   In dock mode the ONLY visible chrome must be the projected hub-app-card (accent bar +
+   rounded card). The default .grid-stack-item-content above draws its own card surface
+   (background + radius), which would double-box the card. Scoped to the dock host class so
+   the dashboard's normal widget tiles keep their chrome untouched.
+
+   `overflow: visible` lets the card's focus ring / hover shadow render past the cell edge.
+   The h-full chain (host → .grid-stack-item-content → hub-app-card) makes the card fill the
+   tile height, so a 1-line card sits flush with no empty space below. */
+.au-dashboard-grid--dock .grid-stack-item-content {
+  overflow: visible;
+  border-radius: 0;
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Stretch the projected content to fill the tile height (no gap, no clip for the 1-line case).
+   The launchpad's dock tile wraps the card in `.hub-dock-tile.h-full`; this guarantees the
+   item-content's direct child fills the cell even if a future consumer omits `h-full`. */
+.au-dashboard-grid--dock .grid-stack-item-content > * {
+  height: 100%;
+}
+
+/* ── Grid-fixed mode: no item-content chrome ───────────────────────────────────
+   Mirrors the dock chrome-neutralization: the only visible chrome is the projected
+   hub-app-card. Scoped to the grid-fixed host class so dashboard widget tiles and
+   dock tiles keep their own chrome untouched. */
+.au-dashboard-grid--grid-fixed .grid-stack-item-content {
+  overflow: visible;
+  border-radius: 0;
+  background-color: transparent;
+  padding: 0;
+}
+
+.au-dashboard-grid--grid-fixed .grid-stack-item-content > * {
+  height: 100%;
+}
+
+/* Suppress the edit-mode cell-origin dots in grid-fixed mode. The grid is editable (not static),
+   so the `.grid-stack:not(.grid-stack-static)` radial-gradient dot pattern below would otherwise
+   paint a faint dot in EVERY cell — including the empty cells that appear when there are fewer
+   tiles than columns (e.g. 1 tile in a 4-col row leaves 3 dotted empty cells). The others-grid
+   has no concept of "placeable slots" (all tiles are equal; drag only reorders), so the cell
+   guides are pure visual noise. We null ONLY the background-image — `staticGrid` is untouched, so
+   drag/reorder still works. Scoped to the grid-fixed host class: dock mode (no empty cells) and
+   dashboard 'grid' mode (which wants cell guides while editing) are unaffected. */
+.au-dashboard-grid--grid-fixed .grid-stack:not(.grid-stack-static) {
+  background-image: none;
+}
+
+/* Edit-mode cell hints — a faint dot at each cell origin so the placeable slots are visible
+   while arranging (Gridstack adds `.grid-stack-static` in use mode; we show the grid only when
+   NOT static, i.e. edit mode). Dots align to cells via Gridstack v12's layout CSS vars. */
+.grid-stack:not(.grid-stack-static) {
+  background-image: radial-gradient(
+    circle,
+    color-mix(in oklch, var(--muted-foreground) 35%, transparent) 1px,
+    transparent 1.5px
+  );
+  background-size: var(--gs-column-width, 105px) var(--gs-cell-height, 105px);
+  background-position: 0 0;
+}
+
+/* Drop/move placeholder — a full-cell dashed rounded box over a faint primary wash (shadcn
+   drop-zone look). A custom `placeholderClass` replaces Gridstack's default `.grid-stack-
+   placeholder`, so its base CSS (which fills the cell via `inset: 0`) no longer applies —
+   without restoring the fill the box collapses to a thin dashed line. We fill it ourselves. */
+.au-grid-placeholder > .placeholder-content {
+  position: absolute;
+  inset: 0;
+  border: 2px dashed color-mix(in oklch, var(--primary) 32%, transparent);
+  border-radius: var(--radius-lg);
+  background-color: color-mix(in oklch, var(--primary) 4%, transparent);
+}
+
+/* Resize handle (south-east) — only meaningful in edit mode (engine shows it then). Replace
+   Gridstack's default diagonal-lines glyph with a Lucide-style down-right arrow that matches the
+   tile chrome icons. We paint it with a CSS mask so `--muted-foreground` themes it in light AND
+   dark, and clear Gridstack's own background-image / 45° rotation. */
+.grid-stack-item > .ui-resizable-se {
+  width: 16px;
+  height: 16px;
+  right: 10px;
+  bottom: 10px;
+  background-image: none;
+  background-color: var(--muted-foreground);
+  transform: none;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+
+.grid-stack-item:hover > .ui-resizable-se {
+  opacity: 0.9;
+}
+
+/* While dragging, soften the moving tile so the placeholder reads as the target. */
+.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
+  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  opacity: 0.92;
+}
+
+/* Launchpad fixed-cell grids (dock + grid-fixed) are DRAG-ONLY: every tile is a uniform 1×1 and
+   must never be resizable. Gridstack 12.6 still injects a `.ui-resizable-handle` element even with
+   `disableResize:true` + `resizable.handles:''` (an empty `handles` string splits to one empty-dir
+   handle), so the corner triangle would show on mousedown. Hard-hide every resize handle in these
+   modes — the standard `grid` mode keeps its handle (rule above) untouched. */
+.au-dashboard-grid--dock .ui-resizable-handle,
+.au-dashboard-grid--grid-fixed .ui-resizable-handle {
+  display: none !important;
+}

package/dist/templates/frontend/application/src/@aurora/modules/dashboard/components/dashboard-grid/dashboard-grid.component.spec.ts

@@ -0,0 +1,288 @@
+/**
+ * Tests for the dashboard grid helpers — mapping and span clamping (task 3.5).
+ *
+ * Strategy: the facade's testable value is the output mapping (`mapItemGeometry`)
+ * and span clamping (`mapResizeGeometry`). Both are extracted as pure functions
+ * so they can be unit-tested without mounting the Gridstack engine in JSDOM
+ * (Gridstack needs real layout/drag DOM APIs that JSDOM does not implement; the live
+ * drag/resize/add behavior is verified by build + E2E in a real browser, not here).
+ *
+ * Scenarios:
+ *   1. `mapItemGeometry` emits `{ id, x, y, cols, rows }` unchanged.
+ *   2. `mapResizeGeometry` emits the exact geometry for an in-bounds resize.
+ *   3. `mapResizeGeometry` clamps `cols` to `maxCols` when over the limit.
+ *   4. `mapResizeGeometry` clamps `cols` to `minCols` when under the limit.
+ *   5. `mapResizeGeometry` clamps `rows` to `maxRows` when over the limit.
+ *   6. `mapResizeGeometry` clamps `rows` to `minRows` when under the limit.
+ *
+ * Every assertion FAILS if the mapping or clamp logic is inverted/removed.
+ */
+import '@angular/compiler';
+import type { DashboardGridItem } from './dashboard-grid.component';
+import {
+  buildDockPacking,
+  buildResponsiveColumnOpts,
+  currentViewportWidth,
+  DASHBOARD_PHONE_MAX_W,
+  DASHBOARD_TABLET_MAX_W,
+  dockColsForViewport,
+  dockTileWidth,
+  FIXED_CELL_RESIZE_DISABLED,
+  isEditableAtWidth,
+  mapItemGeometry,
+  mapResizeGeometry,
+} from './dashboard-grid.helpers';
+
+// ── Factory ───────────────────────────────────────────────────────────────────
+
+const makeItem = (overrides: Partial<DashboardGridItem> = {}): DashboardGridItem => ({
+  id: 'hub.launcher',
+  x: 0,
+  y: 0,
+  cols: 3,
+  rows: 2,
+  span: { minCols: 2, maxCols: 6, minRows: 2, maxRows: 4, defaultCols: 3, defaultRows: 2 },
+  ...overrides,
+});
+
+// ── 1. mapItemGeometry — emits geometry unchanged ─────────────────────────────
+
+describe('mapItemGeometry — item move payload', () => {
+  it('emits the full { id, x, y, cols, rows } payload unchanged', () => {
+    const result = mapItemGeometry(makeItem({ x: 3, y: 1, cols: 3, rows: 2 }));
+
+    // If the mapping mangled any field → FAILS.
+    expect(result).toEqual({ id: 'hub.launcher', x: 3, y: 1, cols: 3, rows: 2 });
+  });
+
+  it('preserves the widget id in the payload', () => {
+    const result = mapItemGeometry(makeItem({ id: 'iam.stats', x: 0, y: 2 }));
+    expect(result.id).toBe('iam.stats');
+  });
+});
+
+// ── 2. mapResizeGeometry — in-bounds resize ────────────────────────────────────
+
+describe('mapResizeGeometry — in-bounds resize', () => {
+  it('emits the exact geometry when within span bounds', () => {
+    // cols=5 ∈ [2,6]; rows=3 ∈ [2,4] → no clamping
+    const result = mapResizeGeometry(makeItem({ x: 0, y: 0, cols: 5, rows: 3 }));
+    expect(result).toEqual({ id: 'hub.launcher', x: 0, y: 0, cols: 5, rows: 3 });
+  });
+});
+
+// ── 3–6. mapResizeGeometry — span clamping ────────────────────────────────────
+
+describe('mapResizeGeometry — span clamping', () => {
+  it('clamps cols to maxCols when the resize exceeds the declared maximum', () => {
+    // span.maxCols = 6; cols = 9 → clamped to 6.
+    const result = mapResizeGeometry(makeItem({ cols: 9, rows: 2 }));
+    // If clamping were absent, cols would be 9 → FAILS.
+    expect(result.cols).toBe(6);
+  });
+
+  it('clamps cols to minCols when the resize goes below the declared minimum', () => {
+    // span.minCols = 2; cols = 1 → clamped to 2.
+    const result = mapResizeGeometry(makeItem({ cols: 1, rows: 2 }));
+    expect(result.cols).toBe(2);
+  });
+
+  it('clamps rows to maxRows when the resize exceeds the declared maximum', () => {
+    // span.maxRows = 4; rows = 8 → clamped to 4.
+    const result = mapResizeGeometry(makeItem({ cols: 3, rows: 8 }));
+    expect(result.rows).toBe(4);
+  });
+
+  it('clamps rows to minRows when the resize goes below the declared minimum', () => {
+    // span.minRows = 2; rows = 1 → clamped to 2.
+    const result = mapResizeGeometry(makeItem({ cols: 3, rows: 1 }));
+    expect(result.rows).toBe(2);
+  });
+});
+
+// ── 7. buildResponsiveColumnOpts — responsive breakpoints ─────────────────────
+
+describe('buildResponsiveColumnOpts — responsive column breakpoints', () => {
+  it('reduces columns by grid width: 6 at tablet, 1 at phone, measured against the grid', () => {
+    const opts = buildResponsiveColumnOpts();
+    // Measured against the grid's own width, not the window (sidebar-aware).
+    expect(opts.breakpointForWindow).toBe(false);
+    const byWidth = Object.fromEntries((opts.breakpoints ?? []).map((b) => [b.w, b.c]));
+    expect(byWidth[DASHBOARD_TABLET_MAX_W]).toBe(6);
+    expect(byWidth[DASHBOARD_PHONE_MAX_W]).toBe(1);
+  });
+
+  it('stacks widgets as a vertical list at the phone breakpoint', () => {
+    const opts = buildResponsiveColumnOpts();
+    const phone = (opts.breakpoints ?? []).find((b) => b.w === DASHBOARD_PHONE_MAX_W);
+    expect(phone?.layout).toBe('list');
+  });
+});
+
+// ── 8. isEditableAtWidth — editing gated to desktop ───────────────────────────
+
+describe('isEditableAtWidth — editing gated to desktop width', () => {
+  it('allows editing only above the tablet breakpoint', () => {
+    expect(isEditableAtWidth(DASHBOARD_TABLET_MAX_W + 1)).toBe(true);
+  });
+
+  it('disables editing at and below the tablet breakpoint (tablet and phone are read-only)', () => {
+    expect(isEditableAtWidth(DASHBOARD_TABLET_MAX_W)).toBe(false);
+    expect(isEditableAtWidth(DASHBOARD_PHONE_MAX_W)).toBe(false);
+    expect(isEditableAtWidth(320)).toBe(false);
+  });
+});
+
+// ── 9. buildDockPacking — contiguous left-packed dock layout ──────────────────
+
+describe('buildDockPacking — contiguous horizontal packing (no gaps)', () => {
+  const dockItem = (id: string, x: number): DashboardGridItem =>
+    makeItem({
+      id,
+      x,
+      y: 0,
+      cols: 1,
+      rows: 1,
+      span: { minCols: 1, maxCols: 1, minRows: 1, maxRows: 1, defaultCols: 1, defaultRows: 1 },
+    });
+
+  it('packs items at x = 0,1,2,… in order, all on row y = 0', () => {
+    const result = buildDockPacking([dockItem('a', 0), dockItem('b', 1), dockItem('c', 2)]);
+    expect(result).toEqual([
+      { id: 'a', x: 0, y: 0 },
+      { id: 'b', x: 1, y: 0 },
+      { id: 'c', x: 2, y: 0 },
+    ]);
+  });
+
+  it('closes the gap left by a removed first item — survivors shift left to x = 0,1,…', () => {
+    // 'a' removed; the remaining items (still carrying stale x = 1,2) must re-pack to 0,1.
+    const result = buildDockPacking([dockItem('b', 1), dockItem('c', 2)]);
+    // If packing used the stale x instead of the index, x would be 1,2 → gap at 0 → FAILS.
+    expect(result).toEqual([
+      { id: 'b', x: 0, y: 0 },
+      { id: 'c', x: 1, y: 0 },
+    ]);
+  });
+
+  it('appends an added item at the next free column (x = N-1)', () => {
+    const result = buildDockPacking([dockItem('a', 0), dockItem('b', 1), dockItem('d', 0)]);
+    // The newly-added 'd' (stale x = 0) lands at the end, x = 2.
+    expect(result[2]).toEqual({ id: 'd', x: 2, y: 0 });
+  });
+
+  it('respects the given order after a reorder — still contiguous, no gaps', () => {
+    // Dragged order c,a,b — positions follow the array order regardless of stale x.
+    const result = buildDockPacking([dockItem('c', 2), dockItem('a', 0), dockItem('b', 1)]);
+    expect(result).toEqual([
+      { id: 'c', x: 0, y: 0 },
+      { id: 'a', x: 1, y: 0 },
+      { id: 'b', x: 2, y: 0 },
+    ]);
+  });
+
+  it('returns an empty array for an empty dock', () => {
+    expect(buildDockPacking([])).toEqual([]);
+  });
+});
+
+// ── 10. dockColsForViewport — column count from the VIEWPORT (Tailwind media queries) ──
+
+describe('dockColsForViewport — column count mirrors the others-grid Tailwind breakpoints', () => {
+  it('returns 4 at xl viewport and above (≥ 1280) — matches xl:grid-cols-4', () => {
+    expect(dockColsForViewport(1280)).toBe(4);
+    expect(dockColsForViewport(1600)).toBe(4);
+  });
+
+  it('returns 3 at lg viewport (≥ 1024, < 1280) — matches lg:grid-cols-3', () => {
+    expect(dockColsForViewport(1024)).toBe(3);
+    expect(dockColsForViewport(1100)).toBe(3);
+  });
+
+  it('returns 2 at sm viewport (≥ 640, < 1024) — matches sm:grid-cols-2', () => {
+    expect(dockColsForViewport(640)).toBe(2);
+    expect(dockColsForViewport(800)).toBe(2);
+  });
+
+  it('returns 1 below sm viewport (< 640) — matches base grid-cols-1', () => {
+    expect(dockColsForViewport(639)).toBe(1);
+    expect(dockColsForViewport(320)).toBe(1);
+  });
+
+  it('uses the VIEWPORT, not the container: at viewport 1568 the count is 4 even though the content container is ~1256 (< xl)', () => {
+    // Regression: the others grid is 4 cols at viewport 1568 (sidebar shrinks the container to
+    // ~1256). The count MUST follow the viewport so favorite tiles match the others cards.
+    expect(dockColsForViewport(1568)).toBe(4);
+  });
+});
+
+// ── 11. dockTileWidth — tiles fill the CONTAINER at the viewport-derived count ──
+
+describe('dockTileWidth — fills the container so N tiles == full width', () => {
+  it('viewport 1568 + container ~1256 → 4 cols → tileWidth ≈ container/4 ≈ 314 (matches others card)', () => {
+    // The real-world mismatch case: viewport-based count (4) divides the actual container width.
+    const cols = dockColsForViewport(1568); // 4
+    const tile = dockTileWidth(1256, cols);
+    expect(cols).toBe(4);
+    expect(tile).toBe(Math.floor(1256 / 4)); // 314
+    expect(tile * cols).toBeLessThanOrEqual(1256);
+  });
+
+  it('at desktop, 4 tiles exactly fill a 1280 container (tileWidth = container / 4 = 320)', () => {
+    const cols = dockColsForViewport(1280);
+    const tile = dockTileWidth(1280, cols);
+    expect(cols).toBe(4);
+    expect(tile).toBe(320);
+    expect(tile * cols).toBe(1280);
+  });
+
+  it('at lg, 3 tiles fill the container', () => {
+    const cols = dockColsForViewport(1100); // 3
+    const tile = dockTileWidth(1100, cols);
+    expect(tile).toBe(Math.floor(1100 / 3));
+    expect(tile * cols).toBeLessThanOrEqual(1100);
+  });
+
+  it('floors to an integer pixel width (no sub-pixel)', () => {
+    expect(Number.isInteger(dockTileWidth(1000, 3))).toBe(true);
+  });
+
+  it('never collapses below the minimum tile width on an absurdly narrow container', () => {
+    // 100px / 1 col would be 100, but the floor guard keeps it at 200.
+    expect(dockTileWidth(100, 1)).toBe(200);
+  });
+
+  it('guards against zero / invalid width (returns the minimum, never NaN/0)', () => {
+    expect(dockTileWidth(0, 4)).toBe(200);
+    expect(dockTileWidth(1280, 0)).toBe(200);
+  });
+});
+
+// ── 12. currentViewportWidth — SSR-safe viewport read ──────────────────────────
+
+describe('currentViewportWidth — reads window.innerWidth with an SSR fallback', () => {
+  it('returns window.innerWidth when window is available', () => {
+    // JSDOM provides a window; assert the helper reads the real innerWidth, not the fallback.
+    expect(currentViewportWidth(999)).toBe(window.innerWidth);
+  });
+
+  it('defaults the fallback to 0 (caller can override)', () => {
+    // The fallback is only used when window is undefined (SSR); here we just confirm the
+    // signature default exists and the helper still returns the live width in JSDOM.
+    expect(currentViewportWidth()).toBe(window.innerWidth);
+  });
+});
+
+// ── 13. FIXED_CELL_RESIZE_DISABLED — launchpad grids are drag-only (no resize) ──
+
+describe('FIXED_CELL_RESIZE_DISABLED — resize is turned off for the fixed-cell modes', () => {
+  it('disables resize behavior (disableResize=true)', () => {
+    // The launchpad dock + grid-fixed tiles are uniform 1×1 and must never resize.
+    // FAILS if disableResize is dropped (gridstack would resize tiles on the corner handle).
+    expect(FIXED_CELL_RESIZE_DISABLED.disableResize).toBe(true);
+  });
+
+  it('requests no resize handle directions (resizable.handles is empty)', () => {
+    expect(FIXED_CELL_RESIZE_DISABLED.resizable).toEqual({ handles: '' });
+  });
+});