Separate media-kit publication from profile picture selection

.gitignore

@@ -54,3 +54,6 @@ __pycache__/
 
 # Claude Code personal settings
 .claude/settings.local.json
+
+# Local isolated development checkouts
+.worktrees/

apps/web/e2e/image-readiness.ts

@@ -0,0 +1,6 @@
+import { expect, type Locator } from "@playwright/test";
+
+export async function expectDecodedImage(image: Locator, timeout = 15_000) {
+  await image.scrollIntoViewIfNeeded();
+  await expect.poll(() => image.evaluate((element: HTMLImageElement) => element.complete && element.naturalWidth > 0), { timeout }).toBe(true);
+}

apps/web/e2e/image-readiness.visual.spec.ts

@@ -0,0 +1,27 @@
+import sharp from "sharp";
+import { expect, test } from "@playwright/test";
+import { expectDecodedImage } from "./image-readiness";
+
+test("image readiness waits for loading then actual decoded pixels @storybook-visual", async ({ page }) => {
+  let release!: () => void;
+  const ready = new Promise<void>(resolve => { release = resolve; });
+  const bytes = await sharp({ create: { width: 48, height: 32, channels: 3, background: "#173e35" } }).png().toBuffer();
+  await page.route("https://image.example/slow.png", async route => { await ready; await route.fulfill({ contentType: "image/png", body: bytes }); });
+  await page.setContent('<div style="height:2000px"></div><img loading="lazy" src="https://image.example/slow.png">');
+  const image = page.locator("img");
+  await image.scrollIntoViewIfNeeded();
+  expect(await image.evaluate((element: HTMLImageElement) => element.complete && element.naturalWidth > 0)).toBe(false);
+  const check = expectDecodedImage(image);
+  release();
+  await check;
+  expect(await image.evaluate((element: HTMLImageElement) => element.naturalWidth)).toBe(48);
+});
+
+test("image readiness still fails for broken pixels @storybook-visual", async ({ page }) => {
+  await page.route("https://image.example/broken.png", route => route.fulfill({ status: 404, body: "missing" }));
+  await page.setContent('<img src="https://image.example/broken.png">');
+  let failure: unknown;
+  try { await expectDecodedImage(page.locator("img"), 600); } catch (error) { failure = error; }
+  expect(failure).toBeInstanceOf(Error);
+  expect(await page.locator("img").evaluate((element: HTMLImageElement) => element.naturalWidth)).toBe(0);
+});

apps/web/e2e/media-admission.storybook.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from "@playwright/test";
+import { gotoComponentStory, prepareStorybookVisualPage, captureStorybookScreenshot } from "./storybook-components";
+
+test.beforeEach(async ({ page }) => { await prepareStorybookVisualPage(page); });
+test("available contribution form keeps the credit URL limit @storybook-visual", async ({ page }, testInfo) => {
+  await gotoComponentStory(page, "profiles-media-contribution-editor--inline");
+  await expect(page.getByRole("heading", { name: "Media contributions" })).toBeVisible();
+  await expect(page.locator('input[name="creditUrl"]')).toHaveAttribute("maxlength", "2048");
+  await captureStorybookScreenshot(page, testInfo, "contribution-intake-available");
+});
+test("unavailable kit hides contribution intake @storybook-visual", async ({ page }, testInfo) => {
+  await gotoComponentStory(page, "profiles-media-contribution-editor--unavailable");
+  await expect(page.getByRole("heading", { name: "Edit profile" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Media contributions" })).toHaveCount(0);
+  await expect(page.locator('input[type="file"]')).toHaveCount(0);
+  await expect(page.locator('input[name="creditUrl"]')).toHaveCount(0);
+  await captureStorybookScreenshot(page, testInfo, "contribution-intake-unavailable");
+});

apps/web/e2e/media-kit.visual.spec.ts

@@ -767,7 +767,7 @@ test("public profile media kit @visual @fixture", async ({ page }, testInfo) =>
     mediaKit.getByRole("link", { name: "Artwork by Afterglow Studio" }),
   ).toHaveAttribute("href", "https://example.invalid/afterglow-studio");
   await expect(
-    mediaKit.getByRole("link", { name: "https://example.invalid/aurora-source" }),
+    mediaKit.locator('a[href="https://example.invalid/aurora-source"]'),
   ).toHaveAttribute("href", "https://example.invalid/aurora-source");
   for (const title of [
     "Aurora press portrait",
@@ -787,5 +787,12 @@ test("public profile media kit @visual @fixture", async ({ page }, testInfo) =>
   await expect(mediaKit.getByRole("link", { name: "Download" }).first()).toBeVisible();
   await expect(mediaKit.getByText("PNG / 180 KB", { exact: true })).toBeVisible();
   await expect(mediaKit.locator("article")).toHaveCount(4);
+  await mediaKit.locator("img").evaluateAll(async images => {
+    await Promise.all(images.map(async image => {
+      (image as HTMLImageElement).loading = "eager";
+      await (image as HTMLImageElement).decode();
+    }));
+  });
   await captureRouteScreenshot(page, testInfo, "profile-media-kit");
+  await mediaKit.screenshot({ path: `playwright-artifacts/screenshots/${testInfo.project.name}-profile-media-kit-section.png` });
 });