ferst-core 0.4.8 → 0.4.10

package/layouts/Base.astro

@@ -172,12 +172,23 @@ const metaDescription = description ?? identity.description;
       document.addEventListener('astro:page-load', ferstMarkExternalLinks);
     </script>
     <script>
-      // Live theme preview: only when this page is FRAMED with ?preview=1 (the
-      // portal Theme Studio or the CMS design-tokens pane), listen for draft theme
-      // settings over postMessage and re-theme live. Dynamically imported so the
-      // code never ships to normal visitors. Inert otherwise.
-      if (window.parent !== window && new URLSearchParams(location.search).has('preview')) {
-        import('../lib/theme-preview').then((m) => m.initThemePreviewListener());
+      // Live theme preview: only when this page is FRAMED and either loaded with
+      // ?preview=1 OR already in a preview session (so the draft survives clicking
+      // links inside the frame, which drop the query). Listens for draft theme
+      // settings over postMessage and re-themes live. Dynamically imported so the
+      // code never ships to normal visitors; never runs unframed.
+      try {
+        var inPreview =
+          new URLSearchParams(location.search).has('preview') ||
+          sessionStorage.getItem('ferst-preview-on') === '1';
+        if (window.parent !== window && inPreview) {
+          import('../lib/theme-preview').then((m) => m.initThemePreviewListener());
+        }
+      } catch (_) {
+        /* sessionStorage blocked — fall back to the ?preview query only */
+        if (window.parent !== window && new URLSearchParams(location.search).has('preview')) {
+          import('../lib/theme-preview').then((m) => m.initThemePreviewListener());
+        }
       }
     </script>
   </head>

package/lib/theme-preview.ts

@@ -28,13 +28,36 @@ export const PREVIEW_MESSAGES = {
 } as const;
 
 const STYLE_ID = 'ferst-preview';
+/** Marks a live preview session so the draft survives navigation WITHIN the frame
+ *  (internal links drop ?preview=1). Base.astro's gate also checks this flag. */
+export const PREVIEW_SESSION_FLAG = 'ferst-preview-on';
+const PREVIEW_DRAFT_KEY = 'ferst-preview-draft';
 
-/** Origins allowed to drive the preview (besides same-origin, i.e. the CMS pane). */
+function rememberDraft(theme: ThemeSettings): void {
+  try {
+    sessionStorage.setItem(PREVIEW_DRAFT_KEY, JSON.stringify(theme));
+  } catch {
+    /* storage blocked — the page still themes from the live postMessage */
+  }
+}
+
+function recallDraft(): ThemeSettings | null {
+  try {
+    const raw = sessionStorage.getItem(PREVIEW_DRAFT_KEY);
+    return raw ? (JSON.parse(raw) as ThemeSettings) : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Origins allowed to drive the preview (besides same-origin, i.e. the CMS pane).
+ *  The Ferst portal — both its custom domains and the bare Cloudflare Pages URLs
+ *  it's actually served from (dev has no custom domain today). */
 const PORTAL_ORIGINS = [
   'https://portal.ferst.co.uk',
   'https://portal-dev.ferst.co.uk',
-  'https://signin.ferst.co.uk',
-  'https://signin-dev.ferst.co.uk',
+  'https://myai4-portal.pages.dev',
+  'https://myai4-portal-dev.pages.dev',
 ];
 
 /** True for same-origin (CMS design-tokens pane) or a known Ferst portal origin. */
@@ -64,8 +87,30 @@ export function applyPreviewTheme(theme: ThemeSettings): void {
   else delete document.documentElement.dataset.field;
 }
 
-/** Wire the page to receive drafts from an allowed surface, and announce readiness. */
+/** Wire the page to receive drafts from an allowed surface, and announce readiness.
+ *  Persists the draft for the session so it survives navigation inside the frame. */
 export function initThemePreviewListener(): void {
+  try {
+    sessionStorage.setItem(PREVIEW_SESSION_FLAG, '1'); // keep previewing across in-frame nav
+  } catch {
+    /* storage blocked — the portal re-push on ready still re-themes each new page */
+  }
+
+  const reapply = () => {
+    const draft = recallDraft();
+    if (draft) {
+      try {
+        applyPreviewTheme(draft);
+      } catch {
+        /* ignore a bad stored draft */
+      }
+    }
+  };
+
+  // A freshly-navigated page in the session: re-theme immediately from the stored
+  // draft (before the portal re-pushes), so tokens don't drop on link clicks.
+  reapply();
+
   window.addEventListener('message', (event: MessageEvent) => {
     if (!isAllowedPreviewOrigin(event.origin)) return;
     const data = event.data as { type?: string; theme?: ThemeSettings; mode?: string } | null;
@@ -73,6 +118,7 @@ export function initThemePreviewListener(): void {
     if (data.type === PREVIEW_MESSAGES.theme && data.theme) {
       try {
         applyPreviewTheme(data.theme);
+        rememberDraft(data.theme);
       } catch {
         /* a malformed draft must never break the preview page */
       }
@@ -80,10 +126,15 @@ export function initThemePreviewListener(): void {
       document.documentElement.dataset.theme = data.mode === 'dark' ? 'dark' : 'light';
     }
   });
-  // Tell whoever framed us that we're listening, so it can push the current draft.
+
+  // View-transition (ClientRouter) pages swap the DOM without a full load, which
+  // drops the injected <style> — re-apply after each swap.
+  document.addEventListener('astro:page-load', reapply);
+
+  // Tell whoever framed us that we're listening, so it can push the latest draft.
   try {
     window.parent?.postMessage({ type: PREVIEW_MESSAGES.ready }, '*');
   } catch {
-    /* no parent / blocked — the surface can still push on its own timer */
+    /* no parent / blocked — the stored draft already re-themed this page */
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",