From ff2a421450c22eaaeac78ba5cd2101045af9da3a Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Wed, 26 Nov 2025 17:23:55 -0500
Subject: [PATCH] fix some standalone theme and canvas stuff

---
 .../[did]/[publication]/[rkey]/CanvasPage.tsx |  2 +-
 .../[rkey]/DocumentPageRenderer.tsx           |  3 ++-
 .../[rkey]/LinearDocumentPage.tsx             |  2 +-
 .../[did]/[publication]/[rkey]/PostPages.tsx  | 23 +++++++++++++++----
 .../ThemeManager/PublicationThemeProvider.tsx | 15 ++++++++++--
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
index 32bccd2c..9d45e6b6 100644
--- a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
@@ -45,10 +45,10 @@ export function CanvasPage({
     pageId,
     pageOptions,
     fullPageScroll,
+    hasPageBackground,
   } = props;
   if (!document) return null;
 
-  let hasPageBackground = !!theme?.showPageBackground;
   let isSubpage = !!pageId;
   let drawer = useDrawerOpen(document_uri);
 
diff --git a/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx b/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
index b53b6383..6f7518fb 100644
--- a/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
@@ -108,6 +108,7 @@ export async function DocumentPageRenderer({
   let theme = pubRecord?.theme || record.theme || null;
   let pub_creator =
     document.documents_in_publications[0]?.publications?.identity_did || did;
+  let isStandalone = !pubRecord;
 
   let firstPage = record.pages[0];
 
@@ -121,7 +122,7 @@ export async function DocumentPageRenderer({
 
   return (
     <PostPageContextProvider value={document}>
-      <PublicationThemeProvider theme={theme} pub_creator={pub_creator}>
+      <PublicationThemeProvider theme={theme} pub_creator={pub_creator} isStandalone={isStandalone}>
         <PublicationBackgroundProvider theme={theme} pub_creator={pub_creator}>
           <LeafletLayout>
             <PostPages
diff --git a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
index 18e4fdd0..89995b47 100644
--- a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
@@ -45,13 +45,13 @@ export function LinearDocumentPage({
     pageId,
     pageOptions,
     fullPageScroll,
+    hasPageBackground,
   } = props;
   let { identity } = useIdentityData();
   let drawer = useDrawerOpen(document_uri);
 
   if (!document) return null;
 
-  let hasPageBackground = !!theme?.showPageBackground;
   let record = document.data as PubLeafletDocument.Record;
 
   const isSubpage = !!pageId;
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
index e599e241..05576804 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
@@ -111,6 +111,7 @@ export type SharedPageProps = {
   pollData: PollData[];
   document_uri: string;
   fullPageScroll: boolean;
+  hasPageBackground: boolean;
   pageId?: string;
   pageOptions?: React.ReactNode;
   allPages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
@@ -171,13 +172,19 @@ export function PostPages({
 
   let record = document.data as PubLeafletDocument.Record;
   let theme = pubRecord?.theme || record.theme || null;
-  let hasPageBackground = !!theme?.showPageBackground;
+  // For publication posts, respect the publication's showPageBackground setting
+  // For standalone documents, default to showing page background
+  let isInPublication = !!pubRecord;
+  let hasPageBackground = isInPublication ? !!theme?.showPageBackground : true;
   let quotesAndMentions = document.quotesAndMentions;
 
   let firstPage = record.pages[0] as
     | PubLeafletPagesLinearDocument.Main
     | PubLeafletPagesCanvas.Main;
 
+  // Canvas pages don't support fullPageScroll well due to fixed 1272px width
+  let firstPageIsCanvas = PubLeafletPagesCanvas.isMain(firstPage);
+
   // Shared props used for all pages
   const sharedProps: SharedPageProps = {
     document,
@@ -190,11 +197,16 @@ export function PostPages({
     bskyPostData,
     pollData,
     document_uri,
+    hasPageBackground,
     allPages: record.pages as (
       | PubLeafletPagesLinearDocument.Main
       | PubLeafletPagesCanvas.Main
     )[],
-    fullPageScroll: !hasPageBackground && !drawer && openPageIds.length === 0,
+    fullPageScroll:
+      !hasPageBackground &&
+      !drawer &&
+      openPageIds.length === 0 &&
+      !firstPageIsCanvas,
   };
 
   return (
@@ -219,8 +231,11 @@ export function PostPages({
       {openPageIds.map((pageId) => {
         let page = record.pages.find(
           (p) =>
-            (p as PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)
-              .id === pageId,
+            (
+              p as
+                | PubLeafletPagesLinearDocument.Main
+                | PubLeafletPagesCanvas.Main
+            ).id === pageId,
         ) as
           | PubLeafletPagesLinearDocument.Main
           | PubLeafletPagesCanvas.Main
diff --git a/components/ThemeManager/PublicationThemeProvider.tsx b/components/ThemeManager/PublicationThemeProvider.tsx
index 0429fb4e..b8ff543c 100644
--- a/components/ThemeManager/PublicationThemeProvider.tsx
+++ b/components/ThemeManager/PublicationThemeProvider.tsx
@@ -16,6 +16,9 @@ const PubThemeDefaults = {
   accentText: "#FFFFFF",
   accentBackground: "#0000FF",
 };
+
+// Default page background for standalone leaflets (matches editor default)
+const StandalonePageBackground = "#FFFFFF";
 function parseThemeColor(
   c: PubLeafletThemeColor.Rgb | PubLeafletThemeColor.Rgba,
 ) {
@@ -95,8 +98,9 @@ export function PublicationThemeProvider(props: {
   children: React.ReactNode;
   theme?: PubLeafletPublication.Record["theme"] | null;
   pub_creator: string;
+  isStandalone?: boolean;
 }) {
-  let colors = usePubTheme(props.theme);
+  let colors = usePubTheme(props.theme, props.isStandalone);
   return (
     <BaseThemeProvider local={props.local} {...colors}>
       {props.children}
@@ -106,10 +110,17 @@ export function PublicationThemeProvider(props: {
 
 export const usePubTheme = (
   theme?: PubLeafletPublication.Record["theme"] | null,
+  isStandalone?: boolean,
 ) => {
   let bgLeaflet = useColor(theme, "backgroundColor");
   let bgPage = useColor(theme, "pageBackground");
-  bgPage = theme?.pageBackground ? bgPage : bgLeaflet;
+  // For standalone documents, use the editor default page background (#FFFFFF)
+  // For publications without explicit pageBackground, use bgLeaflet
+  if (isStandalone && !theme?.pageBackground) {
+    bgPage = parseColor(StandalonePageBackground);
+  } else if (theme && !theme.pageBackground) {
+    bgPage = bgLeaflet;
+  }
   let showPageBackground = theme?.showPageBackground;
 
   let primary = useColor(theme, "primary");
-- 
2.51.2