test(canvas): add explicit STATUS_CONFIG shape coverage

STATUS_CONFIG exports 7 status keys (online, offline, paused, degraded,
failed, provisioning, not_configured) with dot/glow/label/bar per entry.
The existing statusDotClass.test.ts covered .dot indirectly but left the
constant's full shape (label, glow, bar) untested. Add a dedicated
design-tokens.test.ts that asserts all keys exist, every entry has the
correct fields, and field values match the known tailwind tokens.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

canvas/src/lib/__tests__/design-tokens.test.ts

@@ -0,0 +1,102 @@
+// @vitest-environment jsdom
+/**
+ * Tests for design-tokens.ts constant exports.
+ *
+ * STATUS_CONFIG is tested here directly rather than inside
+ * statusDotClass.test.ts so the constant's full shape (dot, glow, label,
+ * bar per key) is explicitly asserted — not just indirectly via the
+ * statusDotClass helper that consumes its .dot field.
+ */
+import { describe, it, expect } from "vitest";
+import { STATUS_CONFIG } from "../design-tokens";
+
+const ALL_STATUS_KEYS = [
+  "online",
+  "offline",
+  "paused",
+  "degraded",
+  "failed",
+  "provisioning",
+  "not_configured",
+] as const;
+
+describe("STATUS_CONFIG", () => {
+  it("has exactly the expected status keys and no extras", () => {
+    const actual = Object.keys(STATUS_CONFIG).sort();
+    const expected = [...ALL_STATUS_KEYS].sort();
+    expect(actual).toEqual(expected);
+  });
+
+  it("every entry has dot, glow, label, and bar fields", () => {
+    for (const key of ALL_STATUS_KEYS) {
+      const entry = STATUS_CONFIG[key];
+      expect(entry, `entry for "${key}"`).toHaveProperty("dot");
+      expect(entry, `entry for "${key}"`).toHaveProperty("glow");
+      expect(entry, `entry for "${key}"`).toHaveProperty("label");
+      expect(entry, `entry for "${key}"`).toHaveProperty("bar");
+    }
+  });
+
+  it("dot, glow, label, bar are all non-empty strings", () => {
+    for (const key of ALL_STATUS_KEYS) {
+      const entry = STATUS_CONFIG[key];
+      for (const field of ["dot", "glow", "label", "bar"] as const) {
+        expect(typeof entry[field], `"${key}".${field}`).toBe("string");
+        // label must be non-empty; others may be empty (e.g. offline.glow = "").
+        if (field === "label") {
+          expect(entry[field].length, `"${key}".${field}`).toBeGreaterThan(0);
+        }
+      }
+    }
+  });
+
+  it('online: dot is emerald, glow is set, label is "Online"', () => {
+    expect(STATUS_CONFIG.online.dot).toBe("bg-emerald-400");
+    expect(STATUS_CONFIG.online.glow).toBe("shadow-emerald-400/50");
+    expect(STATUS_CONFIG.online.label).toBe("Online");
+    expect(STATUS_CONFIG.online.bar).toBe("from-emerald-500/20 to-transparent");
+  });
+
+  it('offline: dot is zinc, glow is empty, label is "Offline"', () => {
+    expect(STATUS_CONFIG.offline.dot).toBe("bg-zinc-500");
+    expect(STATUS_CONFIG.offline.glow).toBe("");
+    expect(STATUS_CONFIG.offline.label).toBe("Offline");
+    expect(STATUS_CONFIG.offline.bar).toBe("from-zinc-600/10 to-transparent");
+  });
+
+  it('paused: dot is indigo, label is "Paused"', () => {
+    expect(STATUS_CONFIG.paused.dot).toBe("bg-indigo-400");
+    expect(STATUS_CONFIG.paused.glow).toBe("");
+    expect(STATUS_CONFIG.paused.label).toBe("Paused");
+  });
+
+  it('degraded: dot is amber with glow, label is "Degraded"', () => {
+    expect(STATUS_CONFIG.degraded.dot).toBe("bg-amber-400");
+    expect(STATUS_CONFIG.degraded.glow).toBe("shadow-amber-400/50");
+    expect(STATUS_CONFIG.degraded.label).toBe("Degraded");
+  });
+
+  it('failed: dot is red with glow, label is "Failed"', () => {
+    expect(STATUS_CONFIG.failed.dot).toBe("bg-red-400");
+    expect(STATUS_CONFIG.failed.glow).toBe("shadow-red-400/50");
+    expect(STATUS_CONFIG.failed.label).toBe("Failed");
+  });
+
+  it('provisioning: dot is sky with pulse animation, label is "Starting"', () => {
+    expect(STATUS_CONFIG.provisioning.dot).toBe("bg-sky-400 motion-safe:animate-pulse");
+    expect(STATUS_CONFIG.provisioning.glow).toBe("shadow-sky-400/50");
+    expect(STATUS_CONFIG.provisioning.label).toBe("Starting");
+  });
+
+  it('not_configured: dot is amber-300 with glow, label is "Not configured"', () => {
+    expect(STATUS_CONFIG.not_configured.dot).toBe("bg-amber-300");
+    expect(STATUS_CONFIG.not_configured.glow).toBe("shadow-amber-300/50");
+    expect(STATUS_CONFIG.not_configured.label).toBe("Not configured");
+  });
+
+  it("is a frozen static map — same key always returns same object reference", () => {
+    for (const key of ALL_STATUS_KEYS) {
+      expect(STATUS_CONFIG[key]).toBe(STATUS_CONFIG[key]);
+    }
+  });
+});