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.

4 files changed, 157 insertions, 13 deletions

diff --git a/src/features/workspaces/logic/tile-layout.test.ts b/src/features/workspaces/logic/tile-layout.test.ts
index f2fbc5b..be61da4 100644
--- a/src/features/workspaces/logic/tile-layout.test.ts
+++ b/src/features/workspaces/logic/tile-layout.test.ts
@@ -52,6 +52,44 @@ describe("geometryFor", () => {
   it("resolves degenerate (unmeasured) sizes to wide", () => {
     expect(geometryFor(0, 0).mode).toBe("wide");
   });
+
+  it("derives the wide unit from the canvas height so the 4 rows fill it", () => {
+    // 4·unit + 3·gap + 2·margin ≈ height: an 800px canvas gets ~160px tiles,
+    // NOT the old fixed 120px (the "squares are so small" complaint).
+    const geometry = geometryFor(1440, 800);
+    const filled = 4 * geometry.unit.height + 3 * geometry.unit.gap + 2 * geometry.margin;
+    expect(geometry.unit.height).toBeGreaterThanOrEqual(140);
+    expect(Math.abs(filled - 800)).toBeLessThanOrEqual(8);
+    expect(geometry.unit.width).toBe(geometry.unit.height);
+  });
+
+  it("clamps the wide unit to its band on very short and very tall canvases", () => {
+    const short = geometryFor(1200, 300);
+    const huge = geometryFor(5000, 4000); // wide (width ≥ height) with a huge height
+    expect(short.unit.height).toBe(112);
+    expect(huge.unit.height).toBe(184);
+    // The margin never collapses (the "no margins" complaint) nor dominates.
+    expect(short.margin).toBeGreaterThanOrEqual(24);
+    expect(huge.margin).toBeLessThanOrEqual(64);
+  });
+
+  it("always carries a positive margin (the tile field never hugs the edge)", () => {
+    const sizes: [number, number][] = [
+      [1920, 1080],
+      [390, 844],
+      [0, 0],
+      [1200, 300],
+    ];
+    for (const [w, h] of sizes) {
+      expect(geometryFor(w, h).margin).toBeGreaterThan(0);
+    }
+  });
+
+  it("keeps the tall unit fixed with a gap (its columns are fluid)", () => {
+    expect(TALL.unit.width).toBe(0);
+    expect(TALL.unit.height).toBeGreaterThanOrEqual(120);
+    expect(TALL.unit.gap).toBeGreaterThan(8);
+  });
 });
 
 describe("clampSpan", () => {
@@ -429,12 +467,15 @@ describe("geometry-agnostic persistence", () => {
 
 describe("type surface", () => {
   it("exposes the geometry fields the picker and grid need", () => {
+    // A 500px-tall canvas: the raw unit (100) clamps UP to the 112px minimum,
+    // so the gap is 12px and the margin 37px (never the old fixed 8px gap).
     const geometry: GridGeometry = geometryFor(1000, 500);
-    expect([geometry.mode, geometry.flowRows, geometry.flowCols, geometry.unit.gap]).toEqual([
-      "wide",
-      4,
-      0,
-      8,
-    ]);
+    expect([
+      geometry.mode,
+      geometry.flowRows,
+      geometry.flowCols,
+      geometry.unit.gap,
+      geometry.margin,
+    ]).toEqual(["wide", 4, 0, 12, 37]);
   });
 });
diff --git a/src/features/workspaces/logic/tile-layout.ts b/src/features/workspaces/logic/tile-layout.ts
index 17923c0..4d81a0c 100644
--- a/src/features/workspaces/logic/tile-layout.ts
+++ b/src/features/workspaces/logic/tile-layout.ts
@@ -46,6 +46,13 @@ export interface GridGeometry {
   /** Maximum vertical span a tile may occupy in this geometry. */
   readonly maxRowSpan: number;
   readonly unit: TileUnitSize;
+  /**
+   * The breathing room around the whole tile field — the grid never renders
+   * flush against the canvas edge. In wide mode the scroller pads all four
+   * sides by this amount (the pan arrow/scroll indicator offset inward by it
+   * too); in tall mode it insets the two fluid columns horizontally.
+   */
+  readonly margin: number;
 }
 
 /** One persisted tile: which workspace it pins, how big it wants to be, and its manual position in the order. */
@@ -82,14 +89,41 @@ export interface Span {
 /** The viewport assumed before the canvas has been measured (a landscape desktop). */
 export const DEFAULT_VIEWPORT = { width: 1280, height: 800 } as const;
 
-const WIDE_UNIT: TileUnitSize = { width: 128, height: 120, gap: 8 };
-const TALL_UNIT: TileUnitSize = { width: 0, height: 120, gap: 8 };
+/**
+ * The wide unit's clamp band (px). Tiles FILL the canvas' height across the 4
+ * fixed rows (the Start-screen feel), but never shrink below a legible small
+ * tile nor grow past a comfortable large one.
+ */
+const WIDE_UNIT_MIN = 112;
+const WIDE_UNIT_MAX = 184;
+
+/** The wide canvas' outer margin band (px) — proportional to the unit size. */
+const WIDE_MARGIN_MIN = 24;
+const WIDE_MARGIN_MAX = 64;
+
+/** The tall unit: the two fluid columns size in `1fr` (width `0` = fluid). */
+const TALL_UNIT: TileUnitSize = { width: 0, height: 148, gap: 12 };
+const TALL_MARGIN = 16;
+
+/** Round to whole pixels (fractional track sizes blur tile edges). */
+function px(value: number): number {
+  return Math.round(value);
+}
+
+function clampNumber(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
 
 /**
  * Resolve the grid geometry from the tile canvas' size. Landscape/desktop →
- * WIDE (4 fixed ~120px rows, column-wise flow, 4×2 span cap); portrait/mobile
- * → TALL (2 fixed columns, row-wise flow, 2×2 span cap). Degenerate sizes
- * (not yet measured) resolve to wide. Pure: numbers in, geometry out.
+ * WIDE (4 fixed rows, column-wise flow, 4×2 span cap); portrait/mobile → TALL
+ * (2 fixed columns, row-wise flow, 2×2 span cap). Degenerate sizes (not yet
+ * measured) resolve to wide.
+ *
+ * The wide unit is DERIVED from the canvas height so the 4 rows exactly fill
+ * it (unit + margin + gap all proportional, clamped to their bands); the tall
+ * unit is fixed (its columns are fluid instead). Pure: numbers in, geometry
+ * out.
  */
 export function geometryFor(width: number, height: number): GridGeometry {
   const tall = width > 0 && height > 0 && height > width;
@@ -101,15 +135,24 @@ export function geometryFor(width: number, height: number): GridGeometry {
       maxColSpan: 2,
       maxRowSpan: 2,
       unit: TALL_UNIT,
+      margin: TALL_MARGIN,
     };
   }
+  // Solve 4·unit + 3·gap + 2·margin = height with gap = unit/9 and margin =
+  // unit/3: 4u + u/3 + 2u/3 = 5u → u = height/5. Unmeasured (height ≤ 0) →
+  // the band's middle, not a tiny tile.
+  const raw = height > 0 ? height / 5 : (WIDE_UNIT_MIN + WIDE_UNIT_MAX) / 2;
+  const unit = px(clampNumber(raw, WIDE_UNIT_MIN, WIDE_UNIT_MAX));
+  const gap = Math.max(10, px(unit / 9));
+  const margin = px(clampNumber(unit / 3, WIDE_MARGIN_MIN, WIDE_MARGIN_MAX));
   return {
     mode: "wide",
     flowRows: 4,
     flowCols: 0,
     maxColSpan: 4,
     maxRowSpan: 2,
-    unit: WIDE_UNIT,
+    unit: { width: unit, height: unit, gap },
+    margin,
   };
 }
 
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
diff --git a/src/features/workspaces/logic/view-model.ts b/src/features/workspaces/logic/view-model.ts
index b994b7c..0b9f239 100644
--- a/src/features/workspaces/logic/view-model.ts
+++ b/src/features/workspaces/logic/view-model.ts
@@ -6,6 +6,40 @@ import type { WorkspaceEntry } from "@dispatch/wire";
 import type { Route } from "./route";
 
 /**
+ * A home tile's color tone. Windows 8's Start screen gave every tile its own
+ * saturated color; here the tile's workspace id DETERMINISTICALLY picks one of
+ * the theme's six semantic tones, so the same workspace keeps its color across
+ * sessions and themes (the tone name maps to a DaisyUI color, which adapts to
+ * the active theme). Starred stays a separate visual concern (a badge), NOT a
+ * tone — any tile may be starred regardless of its color.
+ */
+export type TileTone = "primary" | "secondary" | "accent" | "info" | "success" | "warning";
+
+/** The tones a tile may take, in hash order. */
+const TILE_TONES: readonly TileTone[] = [
+  "primary",
+  "secondary",
+  "accent",
+  "info",
+  "success",
+  "warning",
+];
+
+/**
+ * Map a workspace id to its tile tone. Deterministic (FNV-1a hash of the id)
+ * and uniformly distributed across the six tones — pure: id in, tone out.
+ */
+export function tileTone(id: string): TileTone {
+  let hash = 0x811c9dc5;
+  for (let index = 0; index < id.length; index++) {
+    hash ^= id.charCodeAt(index);
+    // FNV prime (16777619), kept in 32-bit unsigned range.
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+  return TILE_TONES[hash % TILE_TONES.length] ?? "primary";
+}
+
+/**
  * The browser tab / page (`document.title`) text for a route. The home route
  * (`/`) is "Dispatch"; a workspace route (`/<id>`) is "Dispatch: {title}",
  * using the workspace's display title and falling back to the URL slug (`id`)