From e9fa5e65676b5e4b1df85a872c4a067030fbffed Mon Sep 17 00:00:00 2001
From: "Olomana (multica agent)" <whitney.server@users.noreply.github.com>
Date: Fri, 6 Nov 2026 18:24:42 -0800
Subject: [PATCH] PWS-11: Replace card download/print buttons with full-screen
 view

Clicking a card image now enlarges it to fill the screen. Remove the
download and print buttons, and restore the Front/Back label in the card
image footer; only the page captions were meant to go.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: multica-agent <github@multica.ai>
---
 .claude/CLAUDE.md              |  4 +--
 .claude/rules/architecture.md  |  2 +-
 components/PrintCardButton.tsx | 44 -------------------------
 components/RecipeCardImage.tsx | 60 ++++++++++++++++++++++++++++++++++
 components/RecipeCardPanel.tsx | 45 +++++++------------------
 lib/recipe-card.tsx            |  4 +--
 recipes/README.md              |  2 +-
 7 files changed, 77 insertions(+), 84 deletions(-)
 delete mode 100644 components/PrintCardButton.tsx
 create mode 100644 components/RecipeCardImage.tsx

diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md
index dd329f2..943f323 100644
--- a/.claude/CLAUDE.md
+++ b/.claude/CLAUDE.md
@@ -39,8 +39,8 @@ components/
   RecipeGridCard.tsx          # Recipe grid card for listing page
   RecipeTabs.tsx              # Tabbed recipe sections (client)
   RecipeMarkdown.tsx          # Renders a parsed markdown tree to React (server)
-  RecipeCardPanel.tsx         # Recipe Card tab: preview, download, print (server)
-  PrintCardButton.tsx         # Prints card images at 5×7 in (client)
+  RecipeCardPanel.tsx         # Recipe Card tab: card image previews (server)
+  RecipeCardImage.tsx         # Card preview that enlarges to full screen on click (client)
   RecipePageLayout.tsx        # Recipe detail page layout (server component)
 
 lib/
diff --git a/.claude/rules/architecture.md b/.claude/rules/architecture.md
index 6e58536..a5a83af 100644
--- a/.claude/rules/architecture.md
+++ b/.claude/rules/architecture.md
@@ -17,5 +17,5 @@
 - Paragraphs containing only images are converted to `<figure>` elements during parsing (caption from the image title), so there's no `<p><figure>` nesting
 - Card fonts are read from `node_modules/@fontsource/*` at build time; satori needs woff/ttf (not woff2) and doesn't support variable fonts
 - `lib/recipes.ts` uses Node.js `fs` — server-side only; never import in client components
-- Build warnings about `<img>` vs `<Image />` in RecipeMarkdown and RecipeCardPanel are intentional
+- Build warnings about `<img>` vs `<Image />` in RecipeMarkdown and RecipeCardImage are intentional
 - Never add redundant ARIA roles on semantic elements (`<main>`, `<aside>`, `<footer>` already carry implicit roles)
diff --git a/components/PrintCardButton.tsx b/components/PrintCardButton.tsx
deleted file mode 100644
index 6077ffa..0000000
--- a/components/PrintCardButton.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client';
-
-interface PrintCardButtonProps {
-  imageUrls: string[];
-  className?: string;
-}
-
-// Prints the card images at their physical size, one per page, from a hidden iframe
-export default function PrintCardButton({ imageUrls, className }: PrintCardButtonProps) {
-  const handlePrint = () => {
-    const iframe = document.createElement('iframe');
-    iframe.setAttribute('aria-hidden', 'true');
-    iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden';
-    iframe.srcdoc = `<!doctype html><html><head><style>
-      @page { size: 7in 5in; margin: 0; }
-      html, body { margin: 0; }
-      img { display: block; width: 7in; height: 5in; break-after: page; }
-      img:last-child { break-after: auto; }
-    </style></head><body>${imageUrls
-      .map((url) => `<img src="${new URL(url, window.location.href).href}" alt="">`)
-      .join('')}</body></html>`;
-
-    iframe.onload = async () => {
-      const printWindow = iframe.contentWindow;
-      if (!printWindow) return;
-      await Promise.all(
-        Array.from(printWindow.document.images).map((img) => img.decode().catch(() => undefined))
-      );
-      printWindow.addEventListener('afterprint', () => iframe.remove());
-      printWindow.focus();
-      printWindow.print();
-    };
-    document.body.appendChild(iframe);
-  };
-
-  return (
-    <button type="button" onClick={handlePrint} className={className}>
-      <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 9V3h12v6M6 18H4a1 1 0 01-1-1v-6a2 2 0 012-2h14a2 2 0 012 2v6a1 1 0 01-1 1h-2M7 14h10v7H7z" />
-      </svg>
-      Print
-    </button>
-  );
-}
diff --git a/components/RecipeCardImage.tsx b/components/RecipeCardImage.tsx
new file mode 100644
index 0000000..18fe669
--- /dev/null
+++ b/components/RecipeCardImage.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { useRef } from 'react';
+
+interface RecipeCardImageProps {
+  src: string;
+  alt: string;
+}
+
+// A card preview that enlarges to fill the screen when clicked. The native <dialog>
+// sits above the tab's overflow clipping and handles Escape and focus; clicking
+// anywhere closes it.
+export default function RecipeCardImage({ src, alt }: RecipeCardImageProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  const open = () => {
+    document.documentElement.style.overflow = 'hidden';
+    dialogRef.current?.showModal();
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={open}
+        aria-label={`View ${alt} full screen`}
+        className="block w-full cursor-zoom-in rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+      >
+        <img
+          src={src}
+          alt={alt}
+          width={2100}
+          height={1500}
+          loading="lazy"
+          className="h-auto w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white shadow-sm"
+        />
+      </button>
+
+      <dialog
+        ref={dialogRef}
+        aria-label={alt}
+        onClick={() => dialogRef.current?.close()}
+        onClose={() => { document.documentElement.style.overflow = ''; }}
+        className="fixed inset-0 m-0 h-full max-h-none w-full max-w-none cursor-zoom-out bg-black/90 p-2 open:block"
+      >
+        <img src={src} alt="" loading="lazy" className="h-full w-full object-contain" />
+        <button
+          type="button"
+          autoFocus
+          aria-label="Close full screen view"
+          className="absolute right-3 top-3 rounded-full bg-black/60 p-2 text-white hover:bg-black/80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white"
+        >
+          <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </dialog>
+    </>
+  );
+}
diff --git a/components/RecipeCardPanel.tsx b/components/RecipeCardPanel.tsx
index 77f343a..25ba091 100644
--- a/components/RecipeCardPanel.tsx
+++ b/components/RecipeCardPanel.tsx
@@ -1,45 +1,24 @@
-import type { RecipeCardImage } from '@/lib/recipe-card';
-import PrintCardButton from './PrintCardButton';
+import type { RecipeCardImage as RecipeCardImageData } from '@/lib/recipe-card';
+import RecipeCardImage from './RecipeCardImage';
 
 interface RecipeCardPanelProps {
   title: string;
-  images: RecipeCardImage[];
+  images: RecipeCardImageData[];
 }
 
-const buttonClass =
-  'inline-flex items-center gap-2 rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm font-medium text-gray-800 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors';
-
 export default function RecipeCardPanel({ title, images }: RecipeCardPanelProps) {
   const doubleSided = images.length > 1;
 
   return (
-    <div className="space-y-6">
-      <div className={doubleSided ? 'grid gap-6 xl:grid-cols-2' : ''}>
-        {images.map((image) => (
-          <figure key={image.fileName} className="!my-0">
-            <img
-              src={image.url}
-              alt={`${title} recipe card${doubleSided ? ` (${image.label.toLowerCase()})` : ''}`}
-              width={2100}
-              height={1500}
-              loading="lazy"
-              className="h-auto w-full rounded-md border border-gray-200 dark:border-gray-700 bg-white shadow-sm"
-            />
-          </figure>
-        ))}
-      </div>
-
-      <div className="flex flex-wrap gap-3">
-        {images.map((image) => (
-          <a key={image.fileName} href={image.url} download={image.downloadName} className={buttonClass}>
-            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16" />
-            </svg>
-            {doubleSided ? `Download ${image.label.toLowerCase()}` : 'Download PNG'}
-          </a>
-        ))}
-        <PrintCardButton imageUrls={images.map((image) => image.url)} className={buttonClass} />
-      </div>
+    <div className={doubleSided ? 'grid gap-6 xl:grid-cols-2' : ''}>
+      {images.map((image) => (
+        <figure key={image.fileName} className="!my-0">
+          <RecipeCardImage
+            src={image.url}
+            alt={`${title} recipe card${doubleSided ? ` (${image.label.toLowerCase()})` : ''}`}
+          />
+        </figure>
+      ))}
     </div>
   );
 }
diff --git a/lib/recipe-card.tsx b/lib/recipe-card.tsx
index 84b8cc7..27d5e4a 100644
--- a/lib/recipe-card.tsx
+++ b/lib/recipe-card.tsx
@@ -74,7 +74,6 @@ export interface RecipeCardImage {
   label: string;
   url: string;
   fileName: string;
-  downloadName: string;
 }
 
 let fonts: Font[] | null = null;
@@ -404,7 +403,6 @@ export async function getRecipeCardImages(recipe: Recipe): Promise<RecipeCardIma
     label: FACE_LABELS[face.name],
     fileName: `${face.name}.png`,
     url: recipeCardImageUrl(recipe, `${face.name}.png`),
-    downloadName: `${recipe.slug}-recipe-card${face.name === 'card' ? '' : `-${face.name}`}.png`,
   }));
 }
 
@@ -456,7 +454,7 @@ function renderFace(recipe: Recipe, layout: CardLayout, face: CardFace): ReactEl
         }}
       >
         <div style={{ display: 'flex' }}>{pageUrl}</div>
-        <div style={{ display: 'flex' }}>{SITE_NAME}</div>
+        <div style={{ display: 'flex' }}>{face.name === 'card' ? SITE_NAME : `${SITE_NAME}  ·  ${FACE_LABELS[face.name]}`}</div>
       </div>
     </div>
   );
diff --git a/recipes/README.md b/recipes/README.md
index 9b3cb42..30ad429 100644
--- a/recipes/README.md
+++ b/recipes/README.md
@@ -88,7 +88,7 @@ Markdown before the first section is intro prose; markdown after the last is out
 
 #### Recipe Card (optional)
 
-Add `::card` on its own line for a **Recipe Card** tab: a 5×7 in, 300 DPI PNG built from the ingredients and instructions, ready to download or print. Long recipes are split into a front and back automatically. The tab always sits after Notes and before References, wherever `::card` appears in the file.
+Add `::card` on its own line for a **Recipe Card** tab: a 5×7 in, 300 DPI PNG built from the ingredients and instructions. Click the image to view it full screen. Long recipes are split into a front and back automatically. The tab always sits after Notes and before References, wherever `::card` appears in the file.
 
 To put a shorter version on the card, use the container form with **four** colons. Leave out a section to use the full one: