Restore standalone POP Basket surface

.github/workflows/pop-visual-proof.yml

@@ -0,0 +1,101 @@
+name: POP visual proof
+
+on:
+  push:
+    branches:
+      - pop-recovery-current
+  workflow_dispatch:
+
+jobs:
+  screenshot:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci --no-audit --no-fund
+      - name: Install Playwright for proof only
+        run: |
+          npm install --no-save --no-package-lock playwright@1.55.0
+          npx playwright install --with-deps chromium
+      - run: npm run build
+      - name: Start index
+        run: |
+          npm run start > /tmp/index-server.log 2>&1 &
+          for i in {1..30}; do
+            if curl -fsS http://127.0.0.1:3000/basket >/dev/null; then exit 0; fi
+            sleep 1
+          done
+          cat /tmp/index-server.log
+          exit 1
+      - name: Capture standalone and iframe POP
+        run: |
+          mkdir -p /tmp/pop-proof
+          node <<'NODE'
+          const { chromium } = require('playwright');
+          const fs = require('fs');
+          async function loadLazyAssets(page) {
+            await page.evaluate(async () => {
+              const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+              for (let y = 0; y < document.documentElement.scrollHeight; y += Math.max(320, window.innerHeight * 0.75)) {
+                window.scrollTo(0, y);
+                await delay(80);
+              }
+              window.scrollTo(0, 0);
+              await delay(200);
+            });
+            await page.waitForLoadState('networkidle');
+          }
+          (async () => {
+            const browser = await chromium.launch({
+              headless: true,
+              args: ['--host-resolver-rules=MAP pop.1d3x.com 127.0.0.1']
+            });
+            for (const [mode, viewport] of [['desktop',{width:1440,height:1000}], ['mobile',{width:390,height:844}]]) {
+              const page = await browser.newPage({ viewport });
+              await page.goto('http://127.0.0.1:3000/basket', { waitUntil: 'networkidle' });
+              await loadLazyAssets(page);
+              await page.screenshot({ path: `/tmp/pop-proof/basket-${mode}.png`, fullPage: true });
+              const directMetrics = await page.evaluate(() => ({
+                width: document.documentElement.scrollWidth,
+                viewport: window.innerWidth,
+                height: document.documentElement.scrollHeight,
+                hasBasket: Boolean(document.querySelector('[data-basket-site]')),
+                failedImages: [...document.images].filter((img) => !img.complete || img.naturalWidth === 0).map((img) => img.getAttribute('src')),
+                text: document.body.innerText.slice(0, 4000)
+              }));
+              fs.writeFileSync(`/tmp/pop-proof/basket-${mode}.json`, JSON.stringify(directMetrics, null, 2));
+              await page.close();
+            }
+
+            const hostPage = await browser.newPage({ viewport: { width: 1440, height: 1000 } });
+            await hostPage.goto('http://pop.1d3x.com:3000/', { waitUntil: 'networkidle' });
+            await loadLazyAssets(hostPage);
+            await hostPage.screenshot({ path: '/tmp/pop-proof/pop-host-desktop.png', fullPage: true });
+            const hostMetrics = await hostPage.evaluate(() => ({
+              hasBasket: Boolean(document.querySelector('[data-basket-site]')),
+              failedImages: [...document.images].filter((img) => !img.complete || img.naturalWidth === 0).map((img) => img.getAttribute('src')),
+              text: document.body.innerText.slice(0, 4000)
+            }));
+            fs.writeFileSync('/tmp/pop-proof/pop-host-desktop.json', JSON.stringify(hostMetrics, null, 2));
+            await hostPage.close();
+
+            const iframePage = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+            await iframePage.setContent('<html><body style="margin:0;background:#111"><iframe id="pop" src="http://pop.1d3x.com:3000/" style="width:100%;height:820px;border:0"></iframe></body></html>');
+            const frame = iframePage.frameLocator('#pop');
+            await frame.locator('[data-basket-site]').waitFor({ timeout: 15000 });
+            await iframePage.screenshot({ path: '/tmp/pop-proof/pop-iframe-desktop.png', fullPage: true });
+            const iframeText = await frame.locator('body').innerText();
+            fs.writeFileSync('/tmp/pop-proof/pop-iframe-desktop.json', JSON.stringify({ text: iframeText.slice(0, 3000) }, null, 2));
+            await iframePage.close();
+            await browser.close();
+          })().catch((error) => { console.error(error); process.exit(1); });
+          NODE
+      - uses: actions/upload-artifact@v4
+        with:
+          name: pop-visual-proof
+          path: /tmp/pop-proof
+          retention-days: 3

src/app/basket/page.tsx

@@ -1,5 +1,5 @@
-import { redirect } from "next/navigation";
+import { BasketLanding } from "@/components/basket/basket-landing";
 
-export default function BasketCompatibilityRedirect() {
-  redirect("/");
+export default function BasketPage() {
+  return <BasketLanding />;
 }

src/app/page.tsx

@@ -1,6 +1,10 @@
 import { cookies } from "next/headers";
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
+import {
+  BasketHeroEmbed,
+  BasketLanding,
+} from "@/components/basket/basket-landing";
 import { PlatformLanding } from "@/components/platform/platform-landing";
 import {
   detectLocaleFromCountry,
@@ -16,6 +20,11 @@ export default async function HomeRedirect() {
     headerStore.get("host") ??
     undefined;
 
+  if (isPopHost(requestHost)) {
+    const isIframe = headerStore.get("sec-fetch-dest") === "iframe";
+    return isIframe ? <BasketHeroEmbed /> : <BasketLanding />;
+  }
+
   if (isPlatformSite(requestHost ?? undefined)) {
     return <PlatformLanding />;
   }
@@ -35,6 +44,23 @@ export default async function HomeRedirect() {
   redirect(`/${locale}`);
 }
 
+function isPopHost(value?: string) {
+  if (!value) return false;
+
+  const host = value
+    .split(",")
+    .map((item) => item.trim().toLowerCase())
+    .find(Boolean);
+
+  return Boolean(
+    host &&
+      (host === "pop.1d3x.com" ||
+        host.startsWith("pop.1d3x.com:") ||
+        host.includes("1d3x-basket") ||
+        host.includes("basket")),
+  );
+}
+
 function getCountryHeader(headerStore: Headers) {
   return (
     headerStore.get("x-vercel-ip-country") ??