feat(workspaces): rework tile-grid visuals — Start-screen polish

The home canvas now reads as a real Windows 8 Start screen instead of a
cramped, edge-hugging list:

- Geometry: the wide unit is DERIVED from the canvas height (4 rows fill
  it: unit=height/5 clamped to 112-184px, gap=unit/9, margin=unit/3 clamped
  24-64px) — tiles are no longer tiny, and the tile field always carries a
  proportional outer margin (never compressed against the left edge). Tall
  mode keeps fluid columns with a taller 148px row + 12px gap.
- Tiles take a per-workspace SATURATED tone (new pure tileTone(id): FNV-1a
  hash → one of the six theme-semantic colors) with tone-content text —
  the Win8 colored-tile identity. Starred is now a ★ badge (a tile keeps
  its own color), not a gray-tint override.
- The tile face is the Win8 layout: small uppercase slug caption at the top,
  a bold span-aware title (lg → 3xl across 1×1 → 4×2), and a single-line
  stat row pinned to the bottom (count compacts to 'conv.' on 1×1 tiles,
  truncation-safe so narrow tiles never clip).
- Selection is a high-contrast offset ring (visible on any tile color);
  tiles lift on hover; the pan arrow is a solid elevated circle.
- Header gains a 'WORKSPACES' kicker; empty/loading states are centered
  and styled for the Start-screen canvas.

Persisted data (order + spans only) and all interaction semantics
(drag/FLIP, long-press, action bar, resize picker, create popover) are
untouched. Tests: geometry derivation/clamping, tileTone determinism,
wide-vs-compact count label — 1664 green.

1 files changed, 27 insertions, 1 deletions

diff --git a/src/features/workspaces/logic/view-model.test.ts b/src/features/workspaces/logic/view-model.test.ts
index 44d2f31..d283481 100644
--- a/src/features/workspaces/logic/view-model.test.ts
+++ b/src/features/workspaces/logic/view-model.test.ts
@@ -1,6 +1,32 @@
 import type { WorkspaceEntry } from "@dispatch/wire";
 import { describe, expect, it } from "vitest";
-import { applyStarred, pageTitle, relativeTime, sortWorkspaces } from "./view-model";
+import { applyStarred, pageTitle, relativeTime, sortWorkspaces, tileTone } from "./view-model";
+
+describe("tileTone", () => {
+  const TONES = ["primary", "secondary", "accent", "info", "success", "warning"];
+
+  it("is deterministic — the same id always gets the same tone", () => {
+    expect(tileTone("my-workspace")).toBe(tileTone("my-workspace"));
+  });
+
+  it("only returns known tones", () => {
+    for (const id of ["default", "a", "my-workspace", "x-1", "project-phoenix", "zzz"]) {
+      expect(TONES).toContain(tileTone(id));
+    }
+  });
+
+  it("spreads distinct ids across more than one tone", () => {
+    const tones = new Set(
+      ["default", "alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta"].map(tileTone),
+    );
+    expect(tones.size).toBeGreaterThan(1);
+  });
+
+  it("is case-sensitive (ids are slugs, but the hash makes no normalization promise)", () => {
+    // Not a correctness requirement — just documents the hash reads raw chars.
+    expect(typeof tileTone("ABC")).toBe("string");
+  });
+});
 
 describe("relativeTime", () => {
   const now = 1_000_000_000_000; // 2001-09-09