Photo-fit: the photo shows whole above the words and sheet; dark photos brightened for display

WIP: gate and evidence follow.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Entire-Checkpoint: 01M4PRBZNG64Q4X2GHGBJJ237S

Author: Hotragn

apps/web/src/lib/components/PhotoPrint.svelte

@@ -4,13 +4,16 @@
   --dur-develop (2.4 s), matching the ~3 s the hub takes to draft the six words.
   state: blank | developing | developed. Reduced motion shows the final print at once.
   `scene` is a short description used as the image's accessible name (SRS-ACC-5).
+  Photo-fit: a real photo keeps its own shape (height is then the most it may take, never a
+  crop), a dark one is brightened for display only, and a tap opens it full screen.
   Motion (docs/design/motion.md 3.4): only opacity animates (animated blur is a known
   slow path in iOS Safari). A white haze lifts first, the sepia veil clears from the
   middle, and the edges clear last, like a chemical print. No flash.
 -->
 <script lang="ts">
   import { t } from "#lib/copy/index.ts";
   import SampleScene from "./SampleScene.svelte";
+  import { lit, zoom } from "#lib/photo-fit.ts";
   let {
     state = "developed",
     scene = "",
@@ -29,20 +32,29 @@
   } = $props();
 </script>
 
-<figure class="print {state}" style:--tilt="{tilt}deg" style:height="{height}px">
+{#snippet layers()}
+  {#if state === "developing"}
+    <span class="veil" aria-hidden="true"></span>
+    <span class="edge" aria-hidden="true"></span>
+    <span class="haze" aria-hidden="true"></span>
+  {/if}
+{/snippet}
+
+<figure class="print {state}" class:natural={!!src} style:--tilt="{tilt}deg" style:--max="{height}px" style:height={src ? undefined : `${height}px`}>
   <div class="paper grain">
+    {#if src}
+      <button type="button" class="image photo-art" aria-label={scene || t("invite.photoFallback")} onclick={zoom}>
+        <img {src} alt="" onload={lit} />
+        {@render layers()}
+      </button>
+    {:else}
     <div class="image photo-art" role="img" aria-label={scene || t("invite.photoFallback")}>
-      {#if src}
-        <img {src} alt="" />
-      {:else if sample}
+      {#if sample}
         <SampleScene />
       {/if}
-      {#if state === "developing"}
-        <span class="veil" aria-hidden="true"></span>
-        <span class="edge" aria-hidden="true"></span>
-        <span class="haze" aria-hidden="true"></span>
-      {/if}
+{@render layers()}
     </div>
+    {/if}
   </div>
 </figure>
 
@@ -51,6 +63,12 @@
   .paper { height: 100%; padding: 12px 12px 44px; background: var(--c-birch-50); border-radius: 6px; box-shadow: var(--e-3); }
   .image { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #efe6d4; }
   .image :global(img), .image :global(svg) { width: 100%; height: 100%; object-fit: cover; }
+  /* Photo-fit: the print wraps the photo at its own shape, at most --max tall (44% of the screen
+     on short phones), so the main button still fits on a 375 x 667 screen. */
+  .natural { width: fit-content; max-width: 100%; margin: 0 auto; }
+  .natural .paper, .natural .image { height: auto; }
+  button.image { display: block; padding: 0; border: 0; cursor: zoom-in; color: inherit; }
+  .natural .image :global(img) { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(min(var(--max), 44dvh) - 56px); object-fit: initial; }
   .blank .image > :global(*) { opacity: 0; }
   .developed .image > :global(*) { opacity: 1; }
   .haze, .veil, .edge { position: absolute; inset: 0; pointer-events: none; }

apps/web/src/lib/photo-fit.ts

@@ -0,0 +1,9 @@
+// Photo-fit hooks for the photo screens (I1, H2, H3). Each loads its module on first use, so
+// the entry bundles carry only these lines: the light check on the photo's load event, and
+// the full-screen viewer on tap.
+export const lit = (e: Event) => import("./photo-light.ts").then((m) => m.light(e.currentTarget as HTMLImageElement));
+export const zoom = (e: Event) => {
+  const b = e.currentTarget as HTMLElement;
+  const img = b.querySelector("img");
+  if (img) import("./photo-view.ts").then((m) => m.openPhoto(img, b));
+};

apps/web/src/lib/photo-light.ts

@@ -0,0 +1,50 @@
+// Dark photos, brightened for display only (photo-fit fix). A friend opened a dim indoor photo
+// and could not see the place. We draw the decoded photo onto a 32 x 32 canvas, take its mean
+// luminance (0 to 1), and if it is under 0.35 we set a CSS filter on the <img>. The photo's
+// bytes (sealed, uploaded, decrypted) are never touched: only the element's style changes.
+// Loaded lazily from the photo's load event, so it costs the entry bundles nothing.
+
+/** Under this mean luminance a photo counts as dark. */
+export const DARK = 0.35;
+const SIDE = 32;
+
+/** Mean luma (Rec. 709 weights on sRGB values) of RGBA pixels, 0 to 1. Transparent pixels are skipped. */
+export function meanLuma(rgba: ArrayLike<number>): number {
+  let sum = 0;
+  let n = 0;
+  for (let i = 0; i + 3 < rgba.length; i += 4) {
+    if (rgba[i + 3] === 0) continue;
+    sum += 0.2126 * rgba[i] + 0.7152 * rgba[i + 1] + 0.0722 * rgba[i + 2];
+    n++;
+  }
+  return n ? sum / n / 255 : 1;
+}
+
+/** The display filter for a mean luma: "" when bright enough, stronger the darker it is (max 1.6). */
+export function filterFor(mean: number): string {
+  if (!(mean < DARK)) return "";
+  const b = Math.min(1.6, 1 + (DARK - mean) * 2);
+  const c = 1 + (b - 1) * 0.15;
+  return `brightness(${b.toFixed(2)}) contrast(${c.toFixed(2)})`;
+}
+
+/** Mean luma of a decoded image, or null when the canvas can't be read (tainted, no 2D context). */
+export function measure(img: HTMLImageElement): number | null {
+  try {
+    const canvas = document.createElement("canvas");
+    canvas.width = canvas.height = SIDE;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx || !img.naturalWidth) return null;
+    ctx.drawImage(img, 0, 0, SIDE, SIDE);
+    return meanLuma(ctx.getImageData(0, 0, SIDE, SIDE).data);
+  } catch {
+    return null; // a cross-origin photo taints the canvas: show it as it is
+  }
+}
+
+/** Sets (or clears) the display filter on a loaded photo. */
+export function light(img: HTMLImageElement): void {
+  const mean = measure(img);
+  img.style.filter = mean === null ? "" : filterFor(mean);
+  if (mean !== null) img.dataset.luma = mean.toFixed(3);
+}

apps/web/src/lib/photo-view.ts

@@ -0,0 +1,38 @@
+// Full-screen photo (photo-fit fix): tap the photo to see all of it. A native <dialog> opened
+// with showModal() gives the focus trap, Escape and the top layer; a 44 px close button; focus
+// goes back to the photo that opened it. Loaded lazily on the first tap, so the entry bundles
+// don't carry it. Plain DOM, no Svelte runtime. The same display filter as the small photo.
+
+import { t } from "#lib/copy/index.ts";
+
+export function openPhoto(small: HTMLImageElement, from: HTMLElement): void {
+  const alt = small.alt || from.getAttribute("aria-label") || "";
+  const d = document.createElement("dialog");
+  d.className = "photo-view";
+  d.setAttribute("aria-label", alt);
+  d.style.cssText =
+    "position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;display:grid;place-items:center";
+  const img = document.createElement("img");
+  img.src = small.currentSrc || small.src;
+  img.alt = alt;
+  img.style.cssText = "max-width:100%;max-height:100%;object-fit:contain;display:block";
+  img.style.filter = small.style.filter;
+  const x = document.createElement("button");
+  x.type = "button";
+  x.setAttribute("aria-label", t("app.close"));
+  x.style.cssText =
+    "position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:10px;width:44px;height:44px;border-radius:50%;border:0;background:rgb(255 255 255 / .2);color:#fff;font:700 22px/1 system-ui;display:grid;place-items:center";
+  x.textContent = "×";
+  x.onclick = () => d.close();
+  d.onclick = (e) => {
+    if (e.target === d || e.target === img) d.close();
+  };
+  d.onclose = () => {
+    d.remove();
+    from.focus({ preventScroll: true });
+  };
+  d.append(img, x);
+  document.body.append(d);
+  d.showModal();
+  x.focus();
+}

apps/web/src/lib/screens/H2Develop.svelte

@@ -59,7 +59,7 @@
 </script>
 
 <Screen {theme} heading={t("develop.heading")} offline={view === "offline" ? t("develop.offline") : ""}>
-  <PhotoPrint state={view === "developing" ? "developing" : "developed"} {scene} src={photo} {sample} height={290} />
+  <PhotoPrint state={view === "developing" ? "developing" : "developed"} {scene} src={photo} {sample} height={askLocation ? 210 : 290} />
   {#if spot}<p class="spot"><Icon name="hotspots" size={20} /><span>{spot}</span></p>{/if}
   {#if view === "developing"}
     <p class="t-invite pending" role="status">{t("develop.writing")}</p>

apps/web/src/lib/screens/H3Send.svelte

@@ -8,6 +8,7 @@
   import Icon from "../components/Icon.svelte";
   import Tip from "../components/Tip.svelte";
   import { t } from "#lib/copy/index.ts";
+  import { lit, zoom } from "#lib/photo-fit.ts";
   import type { Access, Theme } from "../components/parts";
   let {
     view = "ready",
@@ -54,8 +55,12 @@
 </script>
 
 <Screen {theme} {onclose} heading={t("send.title")} title={t("send.title")} offline={view === "offline" ? t("send.offline") : ""}
-  stage backdrop={photo} backdropAlt={scene} fallbackArt>
-  {#snippet hero()}<p class="t-invite words">{words}</p>{/snippet}
+  stage fallbackArt={!photo}>
+  {#snippet hero()}
+    <!-- Photo-fit: the photo is the content, shown whole at the top; words and sheet sit below it. -->
+    {#if photo}<button class="pf" type="button" onclick={zoom}><img src={photo} alt={scene || t("invite.photoFallback")} onload={lit} /></button>{/if}
+    <p class="t-invite words">{words}</p>
+  {/snippet}
   <Tip id="send" text="tip.send" />
   {#if askName}
     <TextField label={t("join.nameLabel")} bind:value={hostName} placeholder={t("join.namePlaceholder")} hint={t("join.nameHint")} max={24} />
@@ -89,6 +94,13 @@
 
 <style>
   .words { margin: 0; font-size: calc(2.5rem * var(--text-scale)); line-height: 1.08; max-width: 14ch; }
+  /* Photo-fit: the photo at its own shape, capped so the main button still fits on a 375 x 667
+     phone. The words sit under it and the sheet takes the rest, so nothing covers the place. */
+  .pf { display: block; margin: 0 auto; padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; max-width: 100%; cursor: zoom-in; flex: none; }
+  .pf img { display: block; max-width: 100%; max-height: min(38dvh, 420px); width: auto; height: auto; }
+  .pf + .words { font-size: calc(2rem * var(--text-scale)); max-width: none; }
+  :global(.staged > .hero:has(.pf)) { flex: none; justify-content: flex-start; gap: 10px; padding-top: 4px; }
+  :global(.staged:has(> .hero .pf) > .sheet) { flex: 1; max-height: none; min-height: 0; }
   .hostline { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; }
   .hostline p { margin: 0; }
   .lbl { font-weight: 700; opacity: 0.85; }

apps/web/src/lib/screens/I1Invite.svelte

@@ -8,6 +8,7 @@
   import Tip from "../components/Tip.svelte";
   import Flame from "../components/Flame.svelte";
   import { t } from "#lib/copy/index.ts";
+  import { lit, zoom } from "#lib/photo-fit.ts";
   import type { InviteInfo, Theme } from "../components/parts";
   let {
     view = "kindling",
@@ -47,9 +48,11 @@
 </script>
 
 <Screen {theme} sound {onclose} title={host ? t("invite.title", { host }) : ""} heading={view === "loading" ? t("app.loading") : ""}
-  stage={(view === "kindling" || view === "lit") && !!info} backdrop={info?.photo ?? ""} backdropAlt={info?.scene ?? ""}>
+  stage={(view === "kindling" || view === "lit") && !!info}>
   {#snippet hero()}
     {#if info && (view === "kindling" || view === "lit")}
+      <!-- Photo-fit: the photo is the content, shown whole at the top; words and sheet sit below it. -->
+      {#if info.photo}<button class="pf" type="button" onclick={zoom}><img src={info.photo} alt={info.scene || t("invite.photoFallback")} onload={lit} /></button>{/if}
       <h1 class="t-invite words">{info.words}</h1>
     {/if}
   {/snippet}
@@ -96,6 +99,13 @@
 
 <style>
   .words { margin: 0; font-size: calc(2.5rem * var(--text-scale)); line-height: 1.08; max-width: 14ch; }
+  /* Photo-fit: the photo at its own shape, capped so I'm in still fits on a 375 x 667 phone.
+     The words sit under it and the sheet takes the rest, so nothing covers the place. */
+  .pf { display: block; margin: 0 auto; padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; max-width: 100%; cursor: zoom-in; flex: none; }
+  .pf img { display: block; max-width: 100%; max-height: min(38dvh, 420px); width: auto; height: auto; }
+  .pf + .words { font-size: calc(2rem * var(--text-scale)); max-width: none; }
+  :global(.staged > .hero:has(.pf)) { flex: none; justify-content: flex-start; gap: 10px; padding-top: 4px; }
+  :global(.staged:has(> .hero .pf) > .sheet) { flex: 1; max-height: none; min-height: 0; }
   .where { display: flex; gap: 8px; align-items: flex-start; }
   .where p { margin: 0; }
   .spark { display: flex; gap: 6px; align-items: center; color: var(--accent-text); font-weight: 700; margin-top: 4px !important; }