From 1278bb9ecd29a331a960393b9be1292cda458fe5 Mon Sep 17 00:00:00 2001
From: Robin ELM <64148042+Robin-ELM@users.noreply.github.com>
Date: Wed, 4 Nov 2026 21:46:30 +0300
Subject: [PATCH] fix(board): the foil perk never paints a held pin's shape
 (PIN-279, Bugbot on #242)

---
 src/ui/kit.test.ts  | 6 ++++++
 src/ui/stickers.tsx | 8 +++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/ui/kit.test.ts b/src/ui/kit.test.ts
index ab3ad6b..437f2ed 100644
--- a/src/ui/kit.test.ts
+++ b/src/ui/kit.test.ts
@@ -65,6 +65,12 @@ describe("UI kit components (PIN-97)", () => {
     expect(held).toContain("pn-sticker-held");
     expect(held).toContain("Under review");
     expect(held).not.toContain("<img");
+    // The foil perk never paints a held pin's shape either.
+    const foiled = html(h(Sticker, { src: "/a.webp", seed: "x", held: true, foil: true }));
+    expect(foiled).not.toContain("pn-foil");
+    expect(foiled).not.toContain("data-foil");
+    expect(foiled).not.toContain("--src");
+    expect(foiled).not.toContain("/a.webp");
     const pin = html(h(Pin, { src: "/a.webp", label: "Duck", owner: { id: "p1", name: "Robin" }, held: true, onToggle: () => {} }));
     expect(pin).not.toContain("<button");
     expect(pin).toContain("Under review");
diff --git a/src/ui/stickers.tsx b/src/ui/stickers.tsx
index 610f318..3feb27f 100644
--- a/src/ui/stickers.tsx
+++ b/src/ui/stickers.tsx
@@ -47,12 +47,14 @@ export function Sticker({
   const locale = useLocale();
   const vars: Record<string, string | number> = { "--t": tilt ?? stickerTilt(seed) };
   if (size !== undefined) vars["--pn-size"] = typeof size === "number" ? `${size}px` : size;
-  if (state === "cutting" || foil) vars["--src"] = `url("${src}")`;
+  // PIN-279: a held pin has no picture anywhere, foil mask included.
+  const foiled = Boolean(foil) && !held;
+  if (!held && (state === "cutting" || foiled)) vars["--src"] = `url("${src}")`;
   return (
     <span
       className={cx("pn-sticker", className)}
       data-state={state}
-      data-foil={foil ? "" : undefined}
+      data-foil={foiled ? "" : undefined}
       data-held={held ? "" : undefined}
       style={{ ...(vars as CSSProperties), ...style }}
     >
@@ -61,7 +63,7 @@ export function Sticker({
       ) : (
         <img src={src} alt={alt} draggable={false} loading={loading} decoding="async" />
       )}
-      {foil ? <span className="pn-foil" aria-hidden="true" /> : null}
+      {foiled ? <span className="pn-foil" aria-hidden="true" /> : null}
       {state === "picked" && pickIndex ? (
         <span className="pn-sticker-badge" aria-hidden="true">
           {pickIndex}