@wibly/ui-kit 0.1.1

package/src/lib/duration.test.ts

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+
+import { formatRemaining, remainingMs } from './duration.js';
+
+describe('remainingMs', () => {
+  it('returns the positive difference for a future deadline', () => {
+    expect(remainingMs(10_000, 7_500)).toBe(2_500);
+  });
+
+  it('returns 0 when the deadline has already passed', () => {
+    expect(remainingMs(5_000, 8_000)).toBe(0);
+  });
+
+  it('returns 0 when the deadline equals now', () => {
+    expect(remainingMs(1_000, 1_000)).toBe(0);
+  });
+
+  it('returns 0 for non-finite inputs (NaN guards)', () => {
+    expect(remainingMs(Number.NaN, 0)).toBe(0);
+    expect(remainingMs(0, Number.NaN)).toBe(0);
+    expect(remainingMs(Number.POSITIVE_INFINITY, 0)).toBe(0);
+  });
+});
+
+describe('formatRemaining', () => {
+  it('formats whole minutes with zero-padded seconds (default mm:ss)', () => {
+    expect(formatRemaining(60_000)).toBe('1:00');
+    expect(formatRemaining(125_000)).toBe('2:05');
+    expect(formatRemaining(720_000)).toBe('12:00');
+  });
+
+  it('ceils sub-second slivers up so the counter never lies about expiry', () => {
+    expect(formatRemaining(1)).toBe('0:01');
+    expect(formatRemaining(500)).toBe('0:01');
+    expect(formatRemaining(999)).toBe('0:01');
+    expect(formatRemaining(1_000)).toBe('0:01');
+    expect(formatRemaining(1_001)).toBe('0:02');
+  });
+
+  it('renders 0:00 for zero or negative remaining', () => {
+    expect(formatRemaining(0)).toBe('0:00');
+    expect(formatRemaining(-1_000)).toBe('0:00');
+  });
+
+  it('supports the ss format for sub-minute countdowns', () => {
+    expect(formatRemaining(5_000, 'ss')).toBe('5');
+    expect(formatRemaining(30_500, 'ss')).toBe('31');
+    expect(formatRemaining(0, 'ss')).toBe('0');
+  });
+
+  it('is timezone-independent — pure duration math, no Date coercion', () => {
+    // Even if the caller passes a value that looks like a wall-clock
+    // millisecond (Jan 1 2026 noon UTC), the function still treats it
+    // as a duration. A timezone shift on the host machine cannot
+    // change the output.
+    const wallClockLooking = 1_767_268_800_000;
+    const out1 = formatRemaining(wallClockLooking);
+    const out2 = formatRemaining(wallClockLooking);
+    expect(out1).toBe(out2);
+    // And the output is the duration, not derived from a Date — so
+    // if we add a year of ms, the formatted string changes
+    // mechanically by the added duration, not by a timezone offset.
+    const oneMinuteMore = formatRemaining(wallClockLooking + 60_000);
+    expect(oneMinuteMore).not.toBe(out1);
+  });
+
+  it('handles non-finite ms by rendering the expired state', () => {
+    expect(formatRemaining(Number.NaN)).toBe('0:00');
+    expect(formatRemaining(Number.NEGATIVE_INFINITY)).toBe('0:00');
+  });
+});

package/src/lib/duration.ts

@@ -0,0 +1,57 @@
+/**
+ * Duration formatting helpers used by `Timer` and any consumer that
+ * needs to render a server-anchored countdown.
+ *
+ * The helpers are deliberately UTC- and timezone-agnostic: callers
+ * pass `remainingMs` (a non-negative duration in milliseconds) and
+ * receive a string. They do NOT take a `Date` or a wall-clock value,
+ * so a session running across a daylight-savings boundary or a
+ * device with a misconfigured timezone produces identical output to
+ * a normal device. (Per Dev Spec §6.6 chunk-B10 acceptance:
+ * "Timer's deadline math (countdown, expiry, timezone independence)".)
+ *
+ * `formatRemaining` uses ceiling rounding so the visible counter
+ * matches operator intuition — a half-second of remaining time
+ * still shows `0:01`, not `0:00`. The counter only flips to the
+ * expired representation when `remainingMs <= 0`.
+ */
+
+export type DurationFormat = 'mm:ss' | 'ss';
+
+/**
+ * Compute the non-negative remaining milliseconds between `nowMs`
+ * and `deadlineMs`. Returns 0 when the deadline is in the past;
+ * never returns a negative number (callers don't need to clamp).
+ */
+export const remainingMs = (deadlineMs: number, nowMs: number): number => {
+  if (!Number.isFinite(deadlineMs) || !Number.isFinite(nowMs)) {
+    return 0;
+  }
+  const diff = deadlineMs - nowMs;
+  return diff > 0 ? diff : 0;
+};
+
+/**
+ * Format a duration in milliseconds. Default format is `mm:ss`
+ * (`0:30`, `1:05`, `12:00`); `ss` strips the minutes for sub-minute
+ * countdowns where a leading zero is noise.
+ *
+ * Ceiling rounds: 1ms remaining still shows `0:01`. Zero / negative
+ * input shows `0:00` / `0`.
+ */
+export const formatRemaining = (
+  ms: number,
+  format: DurationFormat = 'mm:ss',
+): string => {
+  if (!Number.isFinite(ms) || ms <= 0) {
+    return format === 'ss' ? '0' : '0:00';
+  }
+  const seconds = Math.ceil(ms / 1000);
+  if (format === 'ss') {
+    return String(seconds);
+  }
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  const padded = remainingSeconds < 10 ? `0${remainingSeconds}` : `${remainingSeconds}`;
+  return `${minutes}:${padded}`;
+};

package/src/test/setup.ts

@@ -0,0 +1,19 @@
+/**
+ * Vitest setup for `@platform/ui-kit` (chunk B10).
+ *
+ * Sets `IS_REACT_ACT_ENVIRONMENT = true` so React 19's `act(...)`
+ * implementation suppresses its "not configured" stderr noise. Also
+ * unmounts any leftover roots between tests by relying on
+ * `@testing-library/react`'s `cleanup`, run from `afterEach`.
+ */
+
+import '@testing-library/react';
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// React 19's act() emits a runtime warning unless this flag is set.
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  cleanup();
+});

package/styles/wibly-shell-theme.css

@@ -0,0 +1,215 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700&display=swap');
+
+/**
+ * Wibly shell theme — aligned with Studio / Portal (warm cream, purple
+ * primary, Fraunces display). Consumed by host-web, player-web, and
+ * uikit-preview via each app's `globals.css`.
+ *
+ * Legacy `--color-surface*` aliases remain for shell chrome that has
+ * not yet migrated to semantic Tailwind tokens.
+ */
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-purple: var(--purple);
+  --color-sunbeam: var(--sunbeam);
+  --color-mint: var(--mint);
+  --color-ink: var(--ink);
+  --color-cream: var(--cream);
+  --color-paper: var(--paper);
+
+  --font-display: var(--font-fraunces), ui-serif, Georgia, serif;
+  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+:root {
+  --font-fraunces: 'Fraunces', ui-serif, Georgia, serif;
+  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --radius: 0.875rem;
+
+  --purple: oklch(0.66 0.22 320);
+  --purple-foreground: oklch(0.99 0.01 320);
+  --sunbeam: oklch(0.86 0.18 92);
+  --mint: oklch(0.82 0.17 165);
+  --ink: oklch(0.2 0.04 300);
+  --cream: oklch(0.97 0.03 80);
+  --paper: oklch(0.93 0.05 60);
+
+  --background: var(--cream);
+  --foreground: var(--ink);
+  --card: oklch(0.99 0.015 80);
+  --card-foreground: var(--ink);
+  --popover: oklch(0.99 0.015 80);
+  --popover-foreground: var(--ink);
+  --primary: var(--purple);
+  --primary-foreground: var(--purple-foreground);
+  --secondary: var(--paper);
+  --secondary-foreground: var(--ink);
+  --muted: var(--paper);
+  --muted-foreground: oklch(0.45 0.05 300);
+  --accent: var(--sunbeam);
+  --accent-foreground: var(--ink);
+  --destructive: oklch(0.72 0.21 30);
+  --destructive-foreground: oklch(0.99 0.01 80);
+  --border: oklch(0.2 0.04 300 / 12%);
+  --input: oklch(0.2 0.04 300 / 8%);
+  --ring: var(--purple);
+
+  /* Legacy shell tokens (@platform/ui-kit backward compat) */
+  --color-surface: var(--background);
+  --color-surface-2: var(--card);
+  --color-muted-2: var(--muted-foreground);
+  --color-success: oklch(0.62 0.17 155);
+
+  /* Consent dialog bridge (Portal parity) */
+  --consent-border: var(--border);
+  --consent-surface: var(--card);
+  --consent-foreground: var(--foreground);
+  --consent-muted: var(--muted-foreground);
+  --consent-muted-2: var(--muted-foreground);
+  --consent-primary: var(--primary);
+  --consent-primary-foreground: var(--primary-foreground);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    background-color: var(--background);
+    background-image:
+      radial-gradient(
+        ellipse at 50% 0%,
+        color-mix(in oklab, var(--purple) 12%, transparent) 0px,
+        transparent 55%
+      ),
+      radial-gradient(
+        ellipse at 5% 90%,
+        color-mix(in oklab, var(--mint) 18%, transparent) 0px,
+        transparent 50%
+      );
+    background-attachment: fixed;
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    font-size: 0.9375rem;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-display);
+    letter-spacing: -0.02em;
+  }
+}
+
+.wibly-hover {
+  transition: transform 220ms var(--ease-bounce);
+}
+.wibly-hover:hover {
+  transform: scale(1.02);
+}
+
+@keyframes wibly-avatar-breathe {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.03);
+  }
+}
+
+@keyframes wibly-avatar-speak {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent),
+      0 10px 28px color-mix(in oklab, var(--primary) 22%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 0 10px color-mix(in oklab, var(--primary) 8%, transparent),
+      0 14px 32px color-mix(in oklab, var(--primary) 30%, transparent);
+  }
+}
+
+@keyframes wibly-avatar-think {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 3px color-mix(in oklab, var(--accent) 28%, transparent),
+      0 8px 20px color-mix(in oklab, var(--accent) 16%, transparent);
+  }
+  50% {
+    box-shadow:
+      0 0 0 8px color-mix(in oklab, var(--accent) 12%, transparent),
+      0 12px 26px color-mix(in oklab, var(--accent) 24%, transparent);
+  }
+}
+
+.wibly-avatar-stage-idle {
+  animation: wibly-avatar-breathe 4s ease-in-out infinite;
+}
+
+.wibly-avatar-stage-speaking {
+  animation: wibly-avatar-speak 1s ease-in-out infinite;
+}
+
+.wibly-avatar-stage-judging {
+  animation: wibly-avatar-think 2.5s ease-in-out infinite;
+}
+
+.wibly-response-card {
+  gap: 0;
+  padding: 1.25rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}