Save the card. Post to X.

The PNG is a real download, not a share sheet. X, Threads, and Facebook take the walk.

Author: DigitalCurrensy

HOW-TO-PLAY.md

@@ -10,7 +10,7 @@ Live booth: [first-bucket-studios.vercel.app](https://first-bucket-studios.verce
 1. **Rip the pack.** A franchise, an era, and a luck lane land. New every time.
 2. **Tear the foil.** Ten cards flip. Tap five.
 3. **Lock five.** Eighty-two nights walk from those names. The number on the card is that walk.
-4. **Send the card.** Save the PNG. Copy the walk. The URL is the certificate.
+4. **Send the card.** Save the PNG. Post to X. Copy the walk. The URL is the certificate.
 
 ![Home](docs/stills/01-home.jpg)
 
@@ -29,9 +29,11 @@ One pull on tape: [docs/tape/demo.mp4](docs/tape/demo.mp4)
 | **Rip the pack** | Deals a new room. New ten. |
 | **Rip pack** / tap the foil | Tears it. The ten turn. |
 | **Lock five** | Walks 82 nights. |
-| **Send the card** | Opens the tray. |
 | **Save the card** | Downloads `first-bucket-{team}-{wins}.png`. |
-| **Copy the walk** | Copies `/walk/v1.…` so you can paste it. |
+| **Post to X** | Opens X with the walk. Attach the PNG if you want the plate in the post. |
+| **Threads / Facebook** | In **More ways to send**. Same walk URL. |
+| **More ways to send** | Opens the tray: story frame, native share, copy. |
+| **Copy the walk** | Copies the public walk URL so you can paste it. |
 | **Open the walk** | Same five, same nights, forever. |
 
 There is no “copy image.” The file is the card. The URL is the walk.

README.md

@@ -30,7 +30,7 @@ Ninety seconds. [HOW-TO-PLAY.md](HOW-TO-PLAY.md) is the sheet.
 
 ![The card](docs/stills/03-result.jpg)
 
-**4. Send the card.** Save the PNG. Copy the walk. The URL is the certificate.
+**4. Send the card.** Save the PNG. Post to X. Copy the walk. The URL is the certificate.
 
 ![Send](docs/stills/04-tray.jpg)
 
@@ -40,9 +40,10 @@ Tape: [docs/tape/demo.mp4](docs/tape/demo.mp4)
 | --- | --- |
 | **Rip the pack** | New room. New ten. |
 | **Lock five** | 82 nights from those names. |
-| **Send the card** | Opens the tray. |
 | **Save the card** | `first-bucket-{team}-{wins}.png` |
-| **Copy the walk** | `/walk/v1.…` — paste it anywhere. |
+| **Post to X** | Opens X with the walk. Attach the PNG for the plate. |
+| **More ways to send** | Tray: story frame, Threads, Facebook, native share. |
+| **Copy the walk** | Public `/walk/v1.…` — paste it anywhere. |
 | **Open the walk** | Same five, same nights, forever. |
 
 There is no “copy image.” The file is the card. The URL is the walk.

SUPPORT.md

@@ -18,7 +18,11 @@ Do not paste secrets. Walks are public certificates; they are safe to share.
 
 ## Save did not download
 
-Save is a native file link. A nested preview can swallow it. Open the walk in a top-level tab, then Save. Copy the walk still works in the frame.
+Save is a native file link (`<a download>` with a PNG data URL). A nested preview can swallow it. Open the live booth in a top-level tab, then Save. Copy the walk still works in the frame.
+
+## Share on social did nothing
+
+**Post to X** is a real X intent. It posts the walk URL. The PNG is a separate file — Save it, then attach it on X if you want the plate in the post. Instagram has no web share target; pick **9:16 studio** in More ways to send, Save, then upload.
 
 ## Every pack is Thunder 51
 

docs/ANALYTICS.md

@@ -16,8 +16,8 @@ Product analytics live in [`src/lib/demo-funnel.ts`](../src/lib/demo-funnel.ts).
 | `foil` | Tear the foil | Second rip confused them. |
 | `lock` | Five names locked | Draft tax. |
 | `card` | Number on the lithograph | Walk never finished. |
-| `tray` | Send the card | They liked the poster and stalled. |
-| `save` | Save the card | File is the souvenir. |
+| `tray` | More ways to send | They opened the tray. |
+| `save` | Save the card / Post to X | File or social. |
 | `copy` | Copy the walk | URL is the certificate. |
 | `open` | Open the walk | Revisit. Optional. |
 

docs/TESTING.md

@@ -24,7 +24,8 @@ GitHub Action **Pin** runs layers 1 and 3 on every push to `main`. Layer 4 needs
 | Live 82-0 pack | Ready | Random franchise. Tear. Ten plates. Not Thunder every time. |
 | Player cards | Ready | One 5×7 face. Night plate. Pick five. Court back only when face-down. |
 | House pin | Ready | Thunder 51–31, same walk every time. Optional. |
-| Send PNG | Ready in a top-level tab | Tray: Save the card / Copy the walk / Open the walk. |
+| Send PNG | Ready in a top-level tab | **Save the card** is a real `<a download>`. **Post to X** is `x.com/intent/tweet`. |
+| Social | Ready | X on the card. Threads + Facebook + native share in the tray. |
 | Pin tests | Must stay green | `npm run test:pin` then `npm run test:vl` |
 | Public URL | Ready | [first-bucket-studios.vercel.app](https://first-bucket-studios.vercel.app). GitHub stays private. Domain later. |
 

package.json

@@ -19,7 +19,7 @@
     "typecheck": "tsc --noEmit",
     "check:auth": "node scripts/check-auth-invariant.mjs",
     "test": "node --test 'scripts/**/*.test.mjs' && node --experimental-strip-types --test src/lib/app-data/app-data.test.ts src/lib/auth/gate-identity.test.ts",
-    "test:pin": "node --experimental-strip-types --test src/lib/house-pack.test.ts src/lib/nba.test.ts src/lib/walk.test.ts src/lib/demo-funnel.test.ts src/lib/stream-json.test.ts src/lib/foil-gl.test.ts",
+    "test:pin": "node --experimental-strip-types --test src/lib/house-pack.test.ts src/lib/nba.test.ts src/lib/walk.test.ts src/lib/demo-funnel.test.ts src/lib/stream-json.test.ts src/lib/foil-gl.test.ts src/lib/deliver.test.ts",
     "test:demo": "node scripts/demo-eval.mjs",
     "test:vl": "node scripts/vl-bench.mjs",
     "capture": "node scripts/capture-demo.mjs",

scripts/capture-demo.mjs

@@ -63,12 +63,13 @@ for (let i = 0; i < Math.min(5, n); i++) {
 }
 
 await page.getByRole("button", { name: "Lock five" }).click();
-await page.waitForSelector("text=Send the card");
+await page.waitForSelector("text=Save the card");
+await page.waitForSelector("text=Post to X");
 await page.waitForTimeout(400);
 await shot("03-result.jpg");
 
-await page.getByRole("button", { name: "Send the card" }).click();
-await page.waitForSelector("text=Save the card");
+await page.getByRole("button", { name: "More ways to send" }).click();
+await page.waitForSelector("text=Save the PNG");
 await page.waitForTimeout(400);
 await shot("04-tray.jpg");
 

scripts/demo-eval.mjs

@@ -91,15 +91,23 @@ try {
     if ((await card.getAttribute("aria-pressed")) !== "true") await card.click();
   }
   await page.getByRole("button", { name: "Lock five" }).click();
-  await page.getByRole("button", { name: "Send the card" }).waitFor();
+  await page.getByRole("link", { name: "Save the card" }).waitFor();
+  await page.getByRole("link", { name: "Post to X" }).waitFor();
   await flushBeats();
   const walk = (await page.locator("text=/\\/walk\\/v1\\./").first().textContent()) ?? "";
   const id = walk.replace(/^[\s\S]*\/walk\//, "").trim();
   if (!id.startsWith("v1.")) throw new Error(`no walk on the card: ${walk}`);
   if (id === HOUSE) throw new Error("live pack collapsed to the house pin");
   emit({ type: "walk", id, live: true });
-  await page.getByRole("button", { name: "Send the card" }).click();
-  await page.getByRole("link", { name: "Save the card" }).waitFor();
+  const save = page.getByRole("link", { name: "Save the card" }).first();
+  const href = await save.getAttribute("href");
+  if (!href?.startsWith("data:image/png")) throw new Error(`save is not a png data url: ${href?.slice(0, 40)}`);
+  if (!(await save.getAttribute("download"))?.endsWith(".png")) throw new Error("save has no png download name");
+  const post = page.getByRole("link", { name: "Post to X" });
+  const tweet = await post.getAttribute("href");
+  if (!tweet?.includes("x.com/intent/tweet")) throw new Error(`post to x is not an intent: ${tweet}`);
+  await page.getByRole("button", { name: "More ways to send" }).click();
+  await page.getByRole("link", { name: "Save the card" }).nth(1).waitFor();
   await page.getByRole("button", { name: "Copy the walk" }).click();
   await page.waitForTimeout(250);
   const demo = await flushBeats();

src/components/eighty-two.tsx

@@ -43,7 +43,7 @@ import { seasonTelemetry } from "@/lib/telemetry";
 import { seasonWalk, wnbaWalk, type Night } from "@/lib/sim";
 import { bestFrom, justFiled, loadSave, needsExportNag, recordRun, todayKey, yesterdayKey } from "@/lib/studio-save";
 import { ripTick } from "@/lib/tick";
-import { dailyRoom, encodeChallengeIds, encodeWalk, encodeWnbaWalk, houseWalk, playersOf, walkUrl } from "@/lib/walk";
+import { dailyRoom, encodeChallengeIds, encodeWalk, encodeWnbaWalk, houseWalk, playersOf, publicWalkUrl } from "@/lib/walk";
 import { cn } from "@/lib/utils";
 
 type Mode = "82-0" | "daily" | "corners" | "wnba";
@@ -317,7 +317,7 @@ export function EightyTwo({ mode, challenge }: { mode: Mode; challenge?: Challen
   }
 
   async function copyWalk() {
-    const url = walkUrl(walkId);
+    const url = publicWalkUrl(walkId);
     const ok = await copyText(url);
     setWalkCopied(ok);
     if (ok) markDemo("copy", walkId);

src/components/file-tray.tsx

@@ -3,16 +3,19 @@ import { useNavigate } from "@tanstack/react-router";
 import { X } from "lucide-react";
 import {
   copyText,
+  facebookIntent,
   nativeShare,
   objectUrl,
   registerProofOpener,
   shareSheetOk,
+  threadsIntent,
+  tweetIntent,
   type Proof,
 } from "@/lib/deliver";
 import { ASPECTS, lastShareOpts, renderShareCard, type CardAspect } from "@/lib/share-card";
 import { rememberWalk } from "@/lib/studio-save";
 import { markDemo } from "@/lib/demo-funnel";
-import { walkHref, walkIdFromHref } from "@/lib/walk";
+import { publicWalkUrl, walkHref, walkIdFromHref } from "@/lib/walk";
 import { useSpecular } from "@/lib/hooks";
 import { toast } from "@/components/toast-host";
 import { cn } from "@/lib/utils";
@@ -32,7 +35,7 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
   const sheetRef = useRef<HTMLDivElement>(null);
   const navigate = useNavigate();
   useSpecular(sheetRef);
-  const [url, setUrl] = useState("");
+  const [url, setUrl] = useState(() => objectUrl(proof.blob));
   const [saveHref, setSaveHref] = useState("");
   const [preview, setPreview] = useState("");
   const [aspect, setAspect] = useState<CardAspect>("plate");
@@ -42,10 +45,18 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
   const canShare = shareSheetOk();
   const walkId = proof.href ? walkIdFromHref(proof.href) : "";
   const walkPath = walkId ? walkHref(walkId) : proof.href || "";
+  const shareHref = walkId ? publicWalkUrl(walkId) : "";
+  const postText = (proof.caption || "First Bucket Studio")
+    .replace(/\shttps?:\/\/\S+$/, "")
+    .replace(/\s\/walk\/\S+$/, "")
+    .slice(0, 180);
 
   useEffect(() => {
     const next = objectUrl(proof.blob);
-    setUrl(next);
+    setUrl((prev) => {
+      if (prev && prev !== next) URL.revokeObjectURL(prev);
+      return next;
+    });
     setSheet(proof.blob);
     if (proof.kind === "json" || proof.kind === "file") {
       void proof.blob.text().then((text) => setPreview(text.slice(0, 2400)));
@@ -74,8 +85,9 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
 
   async function onCopyWalk() {
     if (!walkPath) return;
-    markDemo("copy", walkPath);
-    const ok = await copyText(walkPath);
+    const copied = shareHref || walkPath;
+    markDemo("copy", copied);
+    const ok = await copyText(copied);
     setNote(ok ? "Walk copied." : "Select the walk and copy it.");
     if (ok) toast("Walk copied.");
     field.current?.select();
@@ -191,7 +203,7 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
             <input
               ref={field}
               readOnly
-              value={walkPath}
+              value={shareHref || walkPath}
               onFocus={(event) => event.currentTarget.select()}
               className="mt-1 w-full min-h-11 rounded-md glass-control px-3 font-mono text-xs text-fg"
             />
@@ -202,6 +214,10 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
 
         {note ? <p className="mt-3 text-sm text-fg">{note}</p> : null}
 
+        <p className="v-secondary mt-4 text-sm">
+          Save the PNG. Post the walk on X. Story frame is for Instagram — save, then upload.
+        </p>
+
         <div className="tray-actions mt-5">
           {fileHref ? (
             <a
@@ -215,14 +231,47 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
           ) : (
             <span className="tray-btn tray-btn-primary opacity-40">Save the card</span>
           )}
+          {shareHref ? (
+            <a
+              className="tray-btn tray-btn-primary"
+              href={tweetIntent(postText, shareHref)}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => markDemo("save", "x")}
+            >
+              Post to X
+            </a>
+          ) : null}
           {walkPath ? (
-            <button type="button" className="tray-btn tray-btn-primary" onClick={() => void onCopyWalk()}>
+            <button type="button" className="tray-btn" onClick={() => void onCopyWalk()}>
               Copy the walk
             </button>
           ) : null}
+          {shareHref ? (
+            <a
+              className="tray-btn"
+              href={threadsIntent(postText, shareHref)}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => markDemo("save", "threads")}
+            >
+              Threads
+            </a>
+          ) : null}
+          {shareHref ? (
+            <a
+              className="tray-btn"
+              href={facebookIntent(shareHref)}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={() => markDemo("save", "facebook")}
+            >
+              Facebook
+            </a>
+          ) : null}
           {canShare ? (
             <button type="button" className="tray-btn" onClick={() => void onShare()}>
-              Send
+              Send to apps
             </button>
           ) : null}
           {walkId ? (