fix: Use slot.parentElement instead of :scope selector for ShadowRoot

The :scope selector may not work correctly when querying from a ShadowRoot.
Use slot.parentElement to reliably find the container div to replace.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/folk-calendar.ts

@@ -270,7 +270,8 @@ export class FolkCalendar extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-chat.ts

@@ -239,7 +239,8 @@ export class FolkChat extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-embed.ts

@@ -259,7 +259,8 @@ export class FolkEmbed extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-google-item.ts

@@ -230,7 +230,8 @@ export class FolkGoogleItem extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our card
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		const cardEl = wrapper.querySelector(".card");
 		if (containerDiv && cardEl) {
 			containerDiv.replaceWith(cardEl);

lib/folk-image-gen.ts

@@ -265,7 +265,8 @@ export class FolkImageGen extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-map.ts

@@ -309,7 +309,8 @@ export class FolkMap extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-markdown.ts

@@ -174,7 +174,8 @@ export class FolkMarkdown extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-obs-note.ts

@@ -367,7 +367,8 @@ export class FolkObsNote extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-piano.ts

@@ -196,7 +196,8 @@ export class FolkPiano extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our piano container
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		const pianoContainer = wrapper.querySelector(".piano-container");
 		if (containerDiv && pianoContainer) {
 			containerDiv.replaceWith(pianoContainer);

lib/folk-prompt.ts

@@ -294,7 +294,8 @@ export class FolkPrompt extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-slide.ts

@@ -89,7 +89,8 @@ export class FolkSlide extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our slide container
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		const slideContainer = wrapper.querySelector(".slide-container");
 		if (containerDiv && slideContainer) {
 			containerDiv.replaceWith(slideContainer);

lib/folk-transcription.ts

@@ -350,7 +350,8 @@ export class FolkTranscription extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-video-chat.ts

@@ -326,7 +326,8 @@ export class FolkVideoChat extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-video-gen.ts

@@ -360,7 +360,8 @@ export class FolkVideoGen extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}

lib/folk-workflow-block.ts

@@ -341,7 +341,8 @@ export class FolkWorkflowBlock extends FolkShape {
 		`;
 
 		// Replace the container div (slot's parent) with our wrapper
-		const containerDiv = root.querySelector(":scope > div");
+		const slot = root.querySelector("slot");
+		const containerDiv = slot?.parentElement as HTMLElement;
 		if (containerDiv) {
 			containerDiv.replaceWith(wrapper);
 		}