fix(ui): cover tiles keep the monogram for landscape images; quiet pill header nav

Landscape images (imported video frames, slide pages) would lose most of the
picture in a 3:4 crop, so the tile keeps its monogram; portrait and
near-square images (w/h <= 1.05) fade in over it, cropped from the centre.
The header nav follows the mockup's segmented-control style: muted text, no
underline, the current area raised in accent.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

packages/ui/src/index.ts

@@ -1,2 +1,2 @@
 export { AppShell } from "./AppShell";
-export { Pill, SegmentedToggle, ProgressBar, FloatingActionBar, CourseCover, monogram } from "./primitives";
+export { Pill, SegmentedToggle, ProgressBar, FloatingActionBar, CourseCover, coverFits, monogram } from "./primitives";

packages/ui/src/primitives.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from "react";
+import { useState, type ButtonHTMLAttributes, type CSSProperties, type ReactNode } from "react";
 
 export function Pill({ variant = "default", className, ...rest }: { variant?: "default" | "primary" | "ghost" } & ButtonHTMLAttributes<HTMLButtonElement>) {
   const cls = ["stc-pill", variant !== "default" && `stc-pill--${variant}`, className].filter(Boolean).join(" ");
@@ -36,11 +36,30 @@ export function monogram(title: string): string {
   return letters.join("").toUpperCase();
 }
 
+/**
+ * Whether an image of this size suits the 3:4 cover tile. Portrait and near-square images are cropped from the
+ * centre; landscape ones (video frames, slide pages) would lose most of the picture, so the tile keeps its monogram.
+ */
+export function coverFits(width: number, height: number): boolean {
+  return width > 0 && height > 0 && width / height <= 1.05;
+}
+
 export function CourseCover({ title, image, accent }: { title: string; image?: string; accent?: string }) {
   const style = accent ? ({ "--cfg": accent } as CSSProperties) : undefined;
+  // The monogram is always there; the image fades in over it only once it has loaded and fits the tile.
+  const [shown, setShown] = useState<string | null>(null);
   return (
     <div className="stc-cover" style={style} role="img" aria-label={title}>
-      {image ? <img src={image} alt="" /> : <span aria-hidden="true">{monogram(title)}</span>}
+      <span aria-hidden="true">{monogram(title)}</span>
+      {image ? (
+        <img
+          src={image}
+          alt=""
+          data-shown={shown === image ? "" : undefined}
+          onLoad={(e) => setShown(coverFits(e.currentTarget.naturalWidth, e.currentTarget.naturalHeight) ? image : null)}
+          onError={() => setShown(null)}
+        />
+      ) : null}
     </div>
   );
 }

packages/ui/src/tokens.css

@@ -24,11 +24,12 @@ code, pre { font-family: var(--mono); }
 
 /* shell */
 .stc-top { position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--ground); border-bottom: 1px solid var(--line); }
-.stc-nav { display: flex; align-items: center; gap: 16px; }
-.stc-nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
-.stc-nav a:hover, .stc-nav a.active { color: var(--head); }
-.stc-nav a.active { box-shadow: inset 0 -2px 0 var(--accent-dim); }
-.stc-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
+/* quiet pill nav, as the mockup's segmented control: muted text, the current area raised in accent */
+.stc-nav { display: flex; align-items: center; gap: 2px; }
+.stc-nav a { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 16px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: background 120ms ease-out, color 120ms ease-out; }
+.stc-nav a:hover { color: var(--text); }
+.stc-nav a.active, .stc-nav a[aria-current="page"] { background: var(--raised); color: var(--accent); }
+.stc-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 @media (max-width: 680px) { .stc-nav { display: none; } }
 .stc-shell { display: flex; align-items: flex-start; }
 .stc-side { position: sticky; top: var(--top); flex: none; width: var(--sidew); height: calc(100vh - var(--top)); overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); }
@@ -62,4 +63,5 @@ code, pre { font-family: var(--mono); }
 
 /* cover */
 .stc-cover { flex: none; position: relative; width: var(--cw, 44px); aspect-ratio: 3 / 4; border-radius: 6px; background: var(--cbg, var(--raised)); color: var(--cfg, var(--accent)); border: 1px solid color-mix(in srgb, var(--cfg, var(--accent)) 18%, transparent); overflow: hidden; font: 600 calc(var(--cw, 44px) * .34) / 1 var(--sans); letter-spacing: -.03em; display: flex; align-items: flex-end; padding: calc(var(--cw, 44px) * .12); }
-.stc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.stc-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 120ms ease-out; }
+.stc-cover img[data-shown] { opacity: 1; }

packages/ui/test/primitives.test.tsx

@@ -17,3 +17,15 @@ test("SegmentedToggle marks the active option", () => {
   const html = renderToString(<SegmentedToggle label="Look" value="b" onChange={() => {}} options={[{ value: "a", label: "A" }, { value: "b", label: "B" }]} />);
   expect(html).toMatch(/aria-pressed="true"[^>]*>B</);
 });
+
+test("CourseCover keeps the monogram under an image, shown only if the image suits a 3:4 tile", async () => {
+  const { coverFits } = await import("../src");
+  const html = renderToString(<CourseCover title="Mastering Docker" image="/api/courses/x/cover" />);
+  expect(html).toContain(">MD<");
+  expect(html).toContain('src="/api/courses/x/cover"');
+  expect(html).not.toContain("data-shown"); // hidden until loaded and measured
+  expect(coverFits(600, 800)).toBe(true); // portrait
+  expect(coverFits(500, 500)).toBe(true); // square
+  expect(coverFits(640, 360)).toBe(false); // a 16:9 video frame keeps the monogram
+  expect(coverFits(0, 0)).toBe(false);
+});