From cb6026059a938ef4534e69c22c4454cf4cb789e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Fri, 4 Sep 2026 15:03:32 +0100
Subject: [PATCH] a template previews against something real
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The builder loaded the template's own slug — `/collection` — which is not an address, so the frame
showed a 404 while the same arrangement rendered perfectly at /collections/70s in a tab. The page was
fine; the preview was asking for the wrong URL.

It previews an instance now: whichever the server names in `preview_slug`, the first of whatever the
template draws. Which row it is does not matter and deliberately is not a choice — a template IS the
arrangement, and the point of the preview is to see the arrangement with something real in it.

Null when there is nothing to draw yet, which shows as an empty preview rather than a broken one.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/sections/PageBuilderPanel.tsx | 9 ++++++++-
 web/usePages.ts                   | 8 ++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/web/sections/PageBuilderPanel.tsx b/web/sections/PageBuilderPanel.tsx
index 2f85ad4..4b0a79d 100644
--- a/web/sections/PageBuilderPanel.tsx
+++ b/web/sections/PageBuilderPanel.tsx
@@ -1017,7 +1017,14 @@ export const PageBuilderPanel = () => {
           has no leading slash — Home's is the empty string, which the proxy resolves to the root. */}
       {/* `reloadToken` moves on every write, which refetches the document AND re-runs `onDocument` —
           so the decoration is redrawn against the sections that now exist. */}
-      <SitePreview port={devPort} path={page.slug} onDocument={onDocument} reloadToken={rendered} />
+      {/* A TEMPLATE is previewed against a real instance — its own slug is not an address. See
+          preview_slug, which the server fills from the first thing the template draws. */}
+      <SitePreview
+        port={devPort}
+        path={page.is_template ? (page.preview_slug ?? page.slug) : page.slug}
+        onDocument={onDocument}
+        reloadToken={rendered}
+      />
 
       <AddSectionDialog
         open={adding}
diff --git a/web/usePages.ts b/web/usePages.ts
index a7e0337..abc03b2 100644
--- a/web/usePages.ts
+++ b/web/usePages.ts
@@ -19,6 +19,14 @@ export type Page = {
    * place to learn — and marked so nothing offers to rename it, reorder it or put it in a menu.
    */
   is_template?: boolean;
+  /**
+   * A real page to preview a template against — `collections/70s`.
+   *
+   * A template has no page of its own, so previewing its own slug loaded `/collection` and got a 404
+   * in the frame while the same arrangement rendered perfectly in a tab. Null when there is nothing
+   * for it to draw yet, which shows as an empty preview rather than a broken one.
+   */
+  preview_slug?: string | null;
 };
 
 /**