Add /set: on-set screen tracking markers for crews

- Unlinked, noindex page listing marker PNGs from public/set/markers
  (discovered at build time; filenames encode device/resolution/orientation)
- Detects the current screen and offers the closest match first
- One-tap full-screen viewer: wake lock, hidden controls, full grid/edges
  toggle, fill vs fit by aspect, back button closes, deep links via hash
- Offline service worker + home-screen manifest for iPhone full screen
- Marketing chrome moved into an (site) route group so /set has none

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

components/set/MarkerPicker.tsx

@@ -0,0 +1,445 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import type { Kind, MarkerExtra, MarkerScreen } from "@/lib/markers";
+
+type Mode = "full" | "edge";
+type Showing = { src: string; label: string; detail: string; screen?: MarkerScreen; extra?: MarkerExtra };
+
+const KIND_LABEL: Record<Kind, string> = { phone: "Phones", tablet: "Tablets", laptop: "Laptops", monitor: "Monitors" };
+const MODE_KEY = "ttvfx-set-mode";
+
+function detectScreen() {
+  const dpr = window.devicePixelRatio || 1;
+  let w = Math.round(window.screen.width * dpr);
+  let h = Math.round(window.screen.height * dpr);
+  const landscape = window.matchMedia("(orientation: landscape)").matches;
+  // iOS reports screen size in portrait regardless of rotation
+  if (landscape !== w > h) [w, h] = [h, w];
+  return { w, h, landscape };
+}
+
+function bestMatch(screens: MarkerScreen[], w: number, h: number) {
+  const pool = screens.filter((s) => s.width > s.height === w > h);
+  const candidates = pool.length ? pool : screens;
+  let best: { s: MarkerScreen; score: number } | null = null;
+  for (const s of candidates) {
+    const aspect = Math.abs(s.width / s.height - w / h);
+    const size = Math.abs(s.width * s.height - w * h) / (s.width * s.height);
+    const score = aspect * 10 + size;
+    if (!best || score < best.score) best = { s, score };
+  }
+  if (!best) return null;
+  const exact = Math.abs(best.s.width - w) <= 2 && Math.abs(best.s.height - h) <= 2;
+  return { screen: best.s, exact };
+}
+
+function srcFor(s: MarkerScreen, mode: Mode) {
+  return (mode === "edge" ? s.edge : s.full) ?? s.full ?? s.edge ?? "";
+}
+
+function Shape({ w, h, active }: { w: number; h: number; active?: boolean }) {
+  const scale = 34 / Math.max(w, h);
+  return (
+    <span className="flex h-10 w-10 shrink-0 items-center justify-center">
+      <span
+        className={`block rounded-[3px] border-2 ${active ? "border-accent bg-accent/20" : "border-white/60"}`}
+        style={{ width: Math.max(10, w * scale), height: Math.max(10, h * scale) }}
+      />
+    </span>
+  );
+}
+
+// --- Browser-owned state, read via useSyncExternalStore -------------------
+// The URL hash says which marker is open (#<screen-id>/<full|edge> or #<extra-id>),
+// so share links, refresh and the back button all behave the same way.
+const HASH_EVENT = "ttvfx-set-hash";
+const MODE_EVENT = "ttvfx-set-mode";
+
+function subscribe(events: string[]) {
+  return (cb: () => void) => {
+    events.forEach((e) => window.addEventListener(e, cb));
+    return () => events.forEach((e) => window.removeEventListener(e, cb));
+  };
+}
+const subscribeHash = subscribe(["popstate", "hashchange", HASH_EVENT]);
+const subscribeMode = subscribe(["storage", MODE_EVENT]);
+const subscribeScreen = subscribe(["resize", "orientationchange"]);
+
+function setHash(hash: string, push: boolean) {
+  history[push ? "pushState" : "replaceState"]({ marker: Boolean(hash) }, "", hash || location.pathname);
+  window.dispatchEvent(new Event(HASH_EVENT));
+}
+
+function readMode(): Mode {
+  try {
+    return localStorage.getItem(MODE_KEY) === "edge" ? "edge" : "full";
+  } catch {
+    return "full";
+  }
+}
+function writeMode(m: Mode) {
+  try {
+    localStorage.setItem(MODE_KEY, m);
+  } catch {}
+  window.dispatchEvent(new Event(MODE_EVENT));
+}
+
+function screenKey() {
+  const { w, h } = detectScreen();
+  return w > 0 && h > 0 ? `${w}x${h}` : ""; // some browsers report 0×0 while hidden
+}
+
+function iosNeedsTip() {
+  const ios = /iPhone|iPod/.test(navigator.userAgent);
+  const standalone = window.matchMedia("(display-mode: standalone), (display-mode: fullscreen)").matches;
+  return ios && !standalone;
+}
+
+function requestFullscreen() {
+  if (document.fullscreenEnabled && !document.fullscreenElement) {
+    document.documentElement.requestFullscreen?.().catch(() => {});
+  }
+}
+
+export default function MarkerPicker({ screens, extras }: { screens: MarkerScreen[]; extras: MarkerExtra[] }) {
+  const hash = useSyncExternalStore(subscribeHash, () => location.hash, () => "");
+  const mode = useSyncExternalStore(subscribeMode, readMode, () => "full" as Mode);
+  const key = useSyncExternalStore(subscribeScreen, screenKey, () => "");
+  const iosTip = useSyncExternalStore(() => () => {}, iosNeedsTip, () => false);
+  const [offline, setOffline] = useState<"idle" | "saving" | "ready">("idle");
+
+  const device = useMemo(() => {
+    if (!key) return null;
+    const [w, h] = key.split("x").map(Number);
+    return { w, h };
+  }, [key]);
+  const match = useMemo(() => (device ? bestMatch(screens, device.w, device.h) : null), [device, screens]);
+
+  // What the viewer shows, derived from the hash
+  const showing = useMemo<(Showing & { mode: Mode }) | null>(() => {
+    const [id, m] = hash.slice(1).split("/");
+    if (!id) return null;
+    const viewMode: Mode = m === "edge" ? "edge" : "full";
+    const s = screens.find((x) => x.id === id);
+    if (s)
+      return {
+        src: srcFor(s, viewMode),
+        label: s.name,
+        detail: `${s.width}×${s.height}${s.landscape ? " · landscape" : ""}`,
+        screen: s,
+        mode: viewMode,
+      };
+    const e = extras.find((x) => x.id === id);
+    return e ? { src: e.src, label: e.name, detail: "", extra: e, mode: viewMode } : null;
+  }, [hash, screens, extras]);
+
+  // Leave browser full screen whenever the viewer closes (incl. back button)
+  useEffect(() => {
+    if (!showing && document.fullscreenElement) document.exitFullscreen?.().catch(() => {});
+  }, [showing]);
+
+  // Offline: register the service worker, then warm its cache with every marker
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "production" || !("serviceWorker" in navigator)) return;
+    navigator.serviceWorker
+      .register("/set/sw.js", { scope: "/set/" })
+      .then(async () => {
+        setOffline("saving");
+        const urls = [...screens.flatMap((s) => [s.full, s.edge]), ...extras.map((e) => e.src)].filter(Boolean) as string[];
+        await Promise.all(urls.map((u) => fetch(u).catch(() => null)));
+        setOffline("ready");
+      })
+      .catch(() => {});
+  }, [screens, extras]);
+
+  const showScreen = (s: MarkerScreen) => {
+    setHash(`#${s.id}/${mode}`, true);
+    requestFullscreen();
+  };
+  const showExtra = (e: MarkerExtra) => {
+    setHash(`#${e.id}`, true);
+    requestFullscreen();
+  };
+  const close = useCallback(() => {
+    if (history.state?.marker) history.back();
+    else setHash("", false);
+  }, []);
+  const switchMode = useCallback(
+    (m: Mode) => {
+      writeMode(m);
+      if (showing?.screen) setHash(`#${showing.screen.id}/${m}`, false);
+    },
+    [showing],
+  );
+  const chooseMode = writeMode;
+
+  const grouped = useMemo(() => {
+    const out = new Map<Kind, MarkerScreen[]>();
+    for (const s of screens) out.set(s.kind, [...(out.get(s.kind) ?? []), s]);
+    return [...out.entries()];
+  }, [screens]);
+
+  return (
+    <div className="mx-auto max-w-2xl px-4 pt-6 pb-24">
+      <header className="flex items-start justify-between gap-4">
+        <div>
+          <p className="font-mono text-[11px] tracking-[0.25em] text-accent uppercase">Two Tales VFX · On set</p>
+          <h1 className="mt-1 font-display text-3xl font-light tracking-wide uppercase">Screen markers</h1>
+        </div>
+        <p className="pt-1 text-right font-mono text-[11px] leading-relaxed text-muted">
+          {offline === "ready" ? "✓ Works offline" : offline === "saving" ? "Saving for offline…" : ""}
+        </p>
+      </header>
+
+      {/* Marker style */}
+      <div className="mt-6 grid grid-cols-2 gap-2 rounded-xl bg-white/5 p-1.5" role="radiogroup" aria-label="Marker style">
+        {(
+          [
+            ["full", "Full grid", "Dots across the whole screen"],
+            ["edge", "Edges only", "Clear centre for actors' hands"],
+          ] as const
+        ).map(([m, label, hint]) => (
+          <button
+            key={m}
+            type="button"
+            role="radio"
+            aria-checked={mode === m}
+            onClick={() => chooseMode(m)}
+            className={`min-h-16 rounded-lg px-3 py-2.5 text-left transition-colors ${
+              mode === m ? "bg-fg text-ink" : "text-fg hover:bg-white/5"
+            }`}
+          >
+            <span className="block text-base font-medium">{label}</span>
+            <span className={`block text-xs ${mode === m ? "text-ink/70" : "text-muted"}`}>{hint}</span>
+          </button>
+        ))}
+      </div>
+
+      {/* This screen */}
+      {match && device && (
+        <section className="mt-6">
+          <h2 className="mb-2 font-mono text-[11px] tracking-[0.25em] text-muted uppercase">This screen</h2>
+          <button
+            type="button"
+            onClick={() => showScreen(match.screen)}
+            className="flex min-h-24 w-full items-center gap-4 rounded-xl border-2 border-accent bg-accent/10 px-4 py-4 text-left active:bg-accent/25"
+          >
+            <Shape w={match.screen.width} h={match.screen.height} active />
+            <span className="min-w-0 flex-1">
+              <span className="block text-xl font-medium">{match.screen.name}</span>
+              <span className="block font-mono text-xs text-muted">
+                {match.screen.width}×{match.screen.height}
+                {match.screen.landscape ? " · landscape" : ""} ·{" "}
+                {match.exact ? "exact match" : `closest to ${device.w}×${device.h}`}
+              </span>
+            </span>
+            <span className="shrink-0 rounded-lg bg-accent px-4 py-3 text-sm font-semibold text-ink">Show</span>
+          </button>
+        </section>
+      )}
+
+      {iosTip && (
+        <p className="mt-4 rounded-lg bg-white/5 px-4 py-3 text-sm leading-relaxed text-muted">
+          <span className="text-fg">iPhone tip:</span> Safari can&apos;t hide its bars. For true full screen tap{" "}
+          <span className="text-fg">Share → Add to Home Screen</span> once, then open “Markers” from the home screen.
+        </p>
+      )}
+
+      {/* All screens */}
+      {grouped.map(([kind, list]) => (
+        <section key={kind} className="mt-8">
+          <h2 className="mb-2 font-mono text-[11px] tracking-[0.25em] text-muted uppercase">{KIND_LABEL[kind]}</h2>
+          <ul className="divide-y divide-white/10 overflow-hidden rounded-xl bg-white/[0.04]">
+            {list.map((s) => {
+              const isMatch = match?.screen.id === s.id;
+              return (
+                <li key={s.id}>
+                  <button
+                    type="button"
+                    onClick={() => showScreen(s)}
+                    className="flex min-h-16 w-full items-center gap-4 px-4 py-3 text-left active:bg-white/10"
+                  >
+                    <Shape w={s.width} h={s.height} active={isMatch} />
+                    <span className="min-w-0 flex-1">
+                      <span className="block text-base">{s.name}</span>
+                      <span className="block font-mono text-xs text-muted">
+                        {s.width}×{s.height}
+                        {s.landscape ? " · landscape" : " · portrait"}
+                      </span>
+                    </span>
+                    {isMatch && <span className="font-mono text-[10px] tracking-widest text-accent uppercase">This</span>}
+                    <span className="text-xl text-muted" aria-hidden="true">
+                      ›
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </section>
+      ))}
+
+      {extras.length > 0 && (
+        <section className="mt-8">
+          <h2 className="mb-2 font-mono text-[11px] tracking-[0.25em] text-muted uppercase">Other</h2>
+          <ul className="divide-y divide-white/10 overflow-hidden rounded-xl bg-white/[0.04]">
+            {extras.map((e) => (
+              <li key={e.id}>
+                <button
+                  type="button"
+                  onClick={() => showExtra(e)}
+                  className="flex min-h-16 w-full items-center gap-4 px-4 py-3 text-left active:bg-white/10"
+                >
+                  <span className="flex h-10 w-10 shrink-0 items-center justify-center">
+                    <span className="block h-7 w-7 rounded-[3px] bg-[#808080]" />
+                  </span>
+                  <span className="flex-1 text-base">{e.name}</span>
+                  <span className="text-xl text-muted" aria-hidden="true">
+                    ›
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+      )}
+
+      <p className="mt-10 text-center text-xs leading-relaxed text-muted">
+        Tap the image for controls · Back or Esc to close · Screen stays awake while showing
+      </p>
+
+      {showing && (
+        <Viewer showing={showing} mode={showing.mode} onMode={switchMode} onClose={close} />
+      )}
+    </div>
+  );
+}
+
+function Viewer({
+  showing,
+  mode,
+  onMode,
+  onClose,
+}: {
+  showing: Showing;
+  mode: Mode;
+  onMode: (m: Mode) => void;
+  onClose: () => void;
+}) {
+  const [controls, setControls] = useState(false);
+  const [fullscreen, setFullscreen] = useState(false);
+  const hideTimer = useRef<number | undefined>(undefined);
+  // Stretch to fill when the image's shape is close to the visible area (markers sit on
+  // the real screen edges); otherwise fit it whole so the dots stay round.
+  const viewport = useSyncExternalStore(subscribeScreen, () => `${innerWidth}x${innerHeight}`, () => "1x1");
+  const fit = useMemo(() => {
+    if (!showing.screen) return "object-cover";
+    const [vw, vh] = viewport.split("x").map(Number);
+    const ratio = showing.screen.width / showing.screen.height / (vw / vh);
+    return Math.abs(ratio - 1) <= 0.15 ? "object-fill" : "object-contain";
+  }, [showing.screen, viewport]);
+  const canFullscreen = typeof document !== "undefined" && document.fullscreenEnabled;
+
+  // Keep the screen awake while a marker is up
+  useEffect(() => {
+    let lock: WakeLockSentinel | null = null;
+    const acquire = async () => {
+      try {
+        lock = (await navigator.wakeLock?.request("screen")) ?? null;
+      } catch {}
+    };
+    const onVisible = () => document.visibilityState === "visible" && acquire();
+    acquire();
+    document.addEventListener("visibilitychange", onVisible);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("visibilitychange", onVisible);
+      document.body.style.overflow = "";
+      lock?.release().catch(() => {});
+    };
+  }, []);
+
+  useEffect(() => {
+    const onFs = () => setFullscreen(Boolean(document.fullscreenElement));
+    onFs();
+    document.addEventListener("fullscreenchange", onFs);
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !document.fullscreenElement) onClose();
+      if (e.key === "f") onMode("full");
+      if (e.key === "e") onMode("edge");
+      if (e.key === " ") setControls((v) => !v);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("fullscreenchange", onFs);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [onClose, onMode]);
+
+  const poke = () => {
+    window.clearTimeout(hideTimer.current);
+    setControls((v) => {
+      if (!v) hideTimer.current = window.setTimeout(() => setControls(false), 4000);
+      return !v;
+    });
+  };
+
+  return (
+    <div
+      className={`fixed inset-0 z-[100] bg-black ${controls ? "" : "cursor-none"}`}
+      onClick={() => {
+        if (canFullscreen && !document.fullscreenElement) document.documentElement.requestFullscreen?.().catch(() => {});
+        poke();
+      }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={showing.src} alt={showing.label} className={`h-full w-full select-none ${fit}`} draggable={false} />
+
+      {canFullscreen && !fullscreen && !controls && (
+        <p className="pointer-events-none absolute inset-x-0 bottom-6 text-center font-mono text-xs text-white/70">
+          Tap for full screen
+        </p>
+      )}
+
+      {controls && (
+        <div
+          className="absolute inset-x-0 top-0 flex flex-wrap items-center gap-2 bg-black/85 px-3 pt-[max(0.75rem,env(safe-area-inset-top))] pb-3"
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            type="button"
+            onClick={onClose}
+            className="min-h-12 rounded-lg bg-white/10 px-4 text-sm font-medium text-fg active:bg-white/20"
+          >
+            ✕ Close
+          </button>
+          {showing.screen && (
+            <div className="flex rounded-lg bg-white/10 p-1">
+              {(["full", "edge"] as const).map((m) => (
+                <button
+                  key={m}
+                  type="button"
+                  onClick={() => onMode(m)}
+                  className={`min-h-10 rounded-md px-3 text-sm ${mode === m ? "bg-fg text-ink" : "text-fg"}`}
+                >
+                  {m === "full" ? "Full grid" : "Edges"}
+                </button>
+              ))}
+            </div>
+          )}
+          <span className="min-w-0 flex-1 truncate px-1 text-right font-mono text-xs text-white/70">
+            {showing.label} {showing.detail && `· ${showing.detail}`}
+          </span>
+          <a
+            href={showing.src}
+            download
+            className="flex min-h-12 items-center rounded-lg bg-white/10 px-4 text-sm text-fg active:bg-white/20"
+          >
+            Save
+          </a>
+        </div>
+      )}
+    </div>
+  );
+}