From 9ac8cb62568a7908688d767669008da74f24d1e7 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sun, 22 Mar 2026 18:27:56 -0700
Subject: [PATCH] fix(flipbook): replicate StPageFlip CSS inside shadow DOM
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

StPageFlip injects its CSS (.stf__parent, .stf__block, .stf__item, etc.)
into document.head, which doesn't penetrate shadow DOM boundaries.
Pages rendered but were unstyled — collapsed/invisible. Replicate the
required rules inside each component's shadow root styles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rbooks/components/folk-book-reader.ts | 43 ++++++++++++++++++
 .../rpubs/components/folk-pubs-flipbook.ts    | 45 ++++++++++++++++++-
 2 files changed, 87 insertions(+), 1 deletion(-)

diff --git a/modules/rbooks/components/folk-book-reader.ts b/modules/rbooks/components/folk-book-reader.ts
index f97348a..8cf5ed0 100644
--- a/modules/rbooks/components/folk-book-reader.ts
+++ b/modules/rbooks/components/folk-book-reader.ts
@@ -367,6 +367,49 @@ export class FolkBookReader extends HTMLElement {
 				height: 100%;
 				min-height: calc(100vh - 52px);
 				background: var(--rs-bg-page);
+			}
+
+			/* StPageFlip CSS — injected to document.head but doesn't
+			   penetrate shadow DOM, so replicated here. */
+			.stf__parent {
+				position: relative;
+				display: block;
+				box-sizing: border-box;
+				transform: translateZ(0);
+				-ms-touch-action: pan-y;
+				touch-action: pan-y;
+			}
+			.stf__wrapper {
+				position: relative;
+				width: 100%;
+				box-sizing: border-box;
+			}
+			.stf__parent canvas {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+			}
+			.stf__block {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				perspective: 2000px;
+			}
+			.stf__item {
+				display: none;
+				position: absolute;
+				transform-style: preserve-3d;
+			}
+			.stf__outerShadow,
+			.stf__innerShadow,
+			.stf__hardShadow,
+			.stf__hardInnerShadow {
+				position: absolute;
+				left: 0;
+				top: 0;
 				color: var(--rs-text-primary);
 			}
 
diff --git a/modules/rpubs/components/folk-pubs-flipbook.ts b/modules/rpubs/components/folk-pubs-flipbook.ts
index 36a95cd..87f347a 100644
--- a/modules/rpubs/components/folk-pubs-flipbook.ts
+++ b/modules/rpubs/components/folk-pubs-flipbook.ts
@@ -269,7 +269,50 @@ export class FolkPubsFlipbook extends HTMLElement {
 			:host {
 				display: block;
 				position: relative;
-				z-index: 0; /* stacking context — keeps StPageFlip elements above backgrounds */
+				z-index: 0;
+			}
+
+			/* StPageFlip injects these into document.head, but they don't
+			   penetrate shadow DOM — so we replicate them here. */
+			.stf__parent {
+				position: relative;
+				display: block;
+				box-sizing: border-box;
+				transform: translateZ(0);
+				-ms-touch-action: pan-y;
+				touch-action: pan-y;
+			}
+			.stf__wrapper {
+				position: relative;
+				width: 100%;
+				box-sizing: border-box;
+			}
+			.stf__parent canvas {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				left: 0;
+				top: 0;
+			}
+			.stf__block {
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				perspective: 2000px;
+			}
+			.stf__item {
+				display: none;
+				position: absolute;
+				transform-style: preserve-3d;
+			}
+			.stf__outerShadow,
+			.stf__innerShadow,
+			.stf__hardShadow,
+			.stf__hardInnerShadow {
+				position: absolute;
+				left: 0;
+				top: 0;
 			}
 
 			.loading {