@pie-players/pie-section-player 0.2.12 → 0.2.14

package/src/components/PieSectionPlayerSplitPaneElement.svelte

@@ -9,7 +9,6 @@
 			section: { type: "Object", reflect: false },
 			sectionId: { attribute: "section-id", type: "String" },
 			attemptId: { attribute: "attempt-id", type: "String" },
-			view: { type: "String" },
 			playerType: { attribute: "player-type", type: "String" },
 			player: { type: "Object", reflect: false },
 			lazyInit: { attribute: "lazy-init", type: "Boolean" },
@@ -20,7 +19,7 @@
 			isolation: { attribute: "isolation", type: "String" },
 			env: { type: "Object", reflect: false },
 			iifeBundleHost: { attribute: "iife-bundle-host", type: "String" },
-			showToolbar: { attribute: "show-toolbar", type: "Boolean" },
+			showToolbar: { attribute: "show-toolbar", type: "String" },
 			toolbarPosition: { attribute: "toolbar-position", type: "String" },
 			enabledTools: { attribute: "enabled-tools", type: "String" },
 			itemToolbarTools: { attribute: "item-toolbar-tools", type: "String" },
@@ -30,135 +29,157 @@
 />
 
 <script lang="ts">
+	import { onMount } from "svelte";
 	import "./section-player-base-element.js";
-	import "./item-shell-element.js";
-	import "./passage-shell-element.js";
-	import "@pie-players/pie-iife-player";
-	import "@pie-players/pie-section-tools-toolbar";
-	import "@pie-players/pie-assessment-toolkit/components/item-toolbar-element";
-	import "@pie-players/pie-tool-calculator-inline";
+	import * as SectionItemCardModule from "./shared/SectionItemCard.svelte";
+	import * as SectionPassageCardModule from "./shared/SectionPassageCard.svelte";
+	import "@pie-players/pie-toolbars/components/section-toolbar-element";
 	import "@pie-players/pie-tool-calculator";
-	import {
-		normalizeToolsConfig,
-		parseToolList,
-	} from "@pie-players/pie-assessment-toolkit";
-	import { IifeElementLoader } from "@pie-players/pie-players-shared";
+	import "@pie-players/pie-tool-graph";
+	import "@pie-players/pie-tool-periodic-table";
+	import "@pie-players/pie-tool-protractor";
+	import "@pie-players/pie-tool-line-reader";
+	import "@pie-players/pie-tool-ruler";
+	import "@pie-players/pie-tool-theme";
+	import type { Component } from "svelte";
 	import type { SectionCompositionModel } from "../controllers/types.js";
-	import type { AssessmentSection, ItemEntity } from "@pie-players/pie-players-shared/types";
-
-	const EMPTY_COMPOSITION: SectionCompositionModel = {
-		section: null,
-		assessmentItemRefs: [],
-		passages: [],
-		items: [],
-		rubricBlocks: [],
-		instructions: [],
-		currentItemIndex: 0,
-		currentItem: null,
-		isPageMode: false,
-		itemSessionsByItemId: {},
-		testAttemptSession: null,
-	};
-	const DEFAULT_ASSESSMENT_ID = "section-demo-direct";
-	const DEFAULT_PLAYER_TYPE = "iife";
-	const DEFAULT_LAZY_INIT = true;
-	const DEFAULT_ISOLATION = "inherit";
-	const LEGACY_RUNTIME_WARNING_KEY = "pie-section-player-splitpane:legacy-runtime-props";
-	const warnedKeys = new Set<string>();
-	type RuntimeConfig = {
-		assessmentId?: string;
-		playerType?: string;
-		player?: Record<string, unknown> | null;
-		lazyInit?: boolean;
-		tools?: Record<string, unknown> | null;
-		accessibility?: Record<string, unknown> | null;
-		coordinator?: unknown;
-		createSectionController?: unknown;
-		isolation?: string;
-		env?: Record<string, unknown>;
-	};
+	import type { AssessmentSection } from "@pie-players/pie-players-shared/types";
+	import {
+		EMPTY_COMPOSITION,
+	} from "./shared/composition.js";
+	import {
+		createPlayerAction,
+	} from "./shared/player-action.js";
+	import {
+		getRenderablesSignature,
+		orchestratePlayerElementPreload,
+		type PlayerPreloadState,
+	} from "./shared/player-preload.js";
+	import {
+		getCanonicalItemId,
+		getCompositionFromEvent,
+		getItemPlayerParams,
+		getPassagePlayerParams,
+	} from "./shared/section-player-view-state.js";
+	import {
+		type RuntimeConfig,
+		mapRenderablesToItems,
+		resolveSectionPlayerRuntimeState,
+	} from "./shared/section-player-runtime.js";
+
+	const SectionItemCard = (
+		SectionItemCardModule as unknown as { default: Component<any, any, any> }
+	).default;
+	const SectionPassageCard = (
+		SectionPassageCardModule as unknown as {
+			default: Component<any, any, any>;
+		}
+	).default;
 
 	let {
-		assessmentId = DEFAULT_ASSESSMENT_ID,
+		assessmentId,
 		runtime = null as RuntimeConfig | null,
 		section = null as AssessmentSection | null,
 		sectionId = "",
 		attemptId = "",
-		view = "candidate",
-		playerType = DEFAULT_PLAYER_TYPE,
-		player = null as Record<string, unknown> | null,
-		lazyInit = DEFAULT_LAZY_INIT,
-		tools = null as Record<string, unknown> | null,
-		accessibility = null as Record<string, unknown> | null,
-		coordinator = null as unknown,
-		createSectionController = null as unknown,
-		isolation = DEFAULT_ISOLATION,
-		env = { mode: "gather", role: "student" } as Record<string, unknown>,
-		iifeBundleHost = "https://proxy.pie-api.com/bundles",
-		showToolbar = true,
+		playerType,
+		player,
+		lazyInit,
+		tools,
+		accessibility,
+		coordinator,
+		createSectionController,
+		isolation,
+		env,
+		iifeBundleHost,
+		showToolbar = "true" as boolean | string | null | undefined,
 		toolbarPosition = "right",
 		enabledTools = "",
 		itemToolbarTools = "",
 		passageToolbarTools = "",
 	} = $props();
 
+	function resolveToolbarVisibility(value: boolean | string | null | undefined): boolean {
+		if (typeof value === "boolean") {
+			return value;
+		}
+		if (value === null || value === undefined) {
+			return true;
+		}
+		const normalizedValue = String(value).trim().toLowerCase();
+		if (normalizedValue === "") {
+			return true;
+		}
+		if (["false", "0", "off", "no"].includes(normalizedValue)) {
+			return false;
+		}
+		if (["true", "1", "on", "yes"].includes(normalizedValue)) {
+			return true;
+		}
+		return Boolean(normalizedValue);
+	}
+
+	const MANAGED_OUTER_SCROLL_CLASS = "pie-outer-scrollbars-managed";
+	const ACTIVE_OUTER_SCROLL_CLASS = "pie-outer-scrolling";
+
 	let compositionModel = $state<SectionCompositionModel>(EMPTY_COMPOSITION);
 	let leftPanelWidth = $state(50);
 	let isDragging = $state(false);
 	let splitContainerElement = $state<HTMLDivElement | null>(null);
 	let elementsLoaded = $state(false);
+	let lastPreloadSignature = $state("");
+	let preloadRunToken = $state(0);
 
 	const passages = $derived(compositionModel.passages || []);
 	const items = $derived(compositionModel.items || []);
-	const itemSessionsByItemId = $derived(compositionModel.itemSessionsByItemId || {});
 	const hasPassages = $derived(passages.length > 0);
-	const shouldRenderToolbar = $derived(showToolbar && toolbarPosition !== "none");
+	const shouldRenderToolbar = $derived(
+		resolveToolbarVisibility(showToolbar) && toolbarPosition !== "none",
+	);
 	const toolbarBeforeContent = $derived(
 		toolbarPosition === "top" || toolbarPosition === "left",
 	);
 	const toolbarInline = $derived(toolbarPosition === "left" || toolbarPosition === "right");
-	const preloadedRenderables = $derived.by(() => [
-		...(passages as unknown as ItemEntity[]),
-		...(items as ItemEntity[]),
-	]);
-	const effectiveToolsConfig = $derived.by(() => {
-		const runtimeTools = ((runtime as RuntimeConfig | null)?.tools || tools || {}) as any;
-		const normalized = normalizeToolsConfig(runtimeTools);
-		const sectionTools = parseToolList(enabledTools);
-		const itemTools = parseToolList(itemToolbarTools);
-		const passageTools = parseToolList(passageToolbarTools);
-		return normalizeToolsConfig({
-			...normalized,
-			placement: {
-				...normalized.placement,
-				section: sectionTools.length > 0 ? sectionTools : normalized.placement.section,
-				item: itemTools.length > 0 ? itemTools : normalized.placement.item,
-				passage: passageTools.length > 0 ? passageTools : normalized.placement.passage,
-			},
-		});
+	const preloadedRenderables = $derived.by(() =>
+		mapRenderablesToItems(compositionModel.renderables || []),
+	);
+	const preloadedRenderablesSignature = $derived.by(() =>
+		getRenderablesSignature(compositionModel.renderables || []),
+	);
+	const runtimeState = $derived.by(() =>
+		resolveSectionPlayerRuntimeState({
+			assessmentId,
+			playerType,
+			player,
+			lazyInit,
+			tools,
+			accessibility,
+			coordinator,
+			createSectionController,
+			isolation,
+			env,
+			runtime,
+			enabledTools,
+			itemToolbarTools,
+			passageToolbarTools,
+		}),
+	);
+	const effectiveRuntime = $derived(runtimeState.effectiveRuntime);
+	const playerRuntime = $derived(runtimeState.playerRuntime);
+	const resolvedPlayerDefinition = $derived(playerRuntime.resolvedPlayerDefinition);
+	const resolvedPlayerTag = $derived(playerRuntime.resolvedPlayerTag);
+	const resolvedPlayerAttributes = $derived(playerRuntime.resolvedPlayerAttributes);
+	const resolvedPlayerProps = $derived(playerRuntime.resolvedPlayerProps);
+	const resolvedPlayerEnv = $derived(playerRuntime.resolvedPlayerEnv);
+	const playerStrategy = $derived(playerRuntime.strategy);
+	const splitPanePlayerAction = createPlayerAction({
+		stateKey: "__splitPaneAppliedParams",
+		setSkipElementLoadingOnce: true,
+		includeSessionRefInState: true,
 	});
-	const effectiveRuntime = $derived.by(() => ({
-		assessmentId,
-		playerType,
-		player,
-		lazyInit,
-		accessibility,
-		coordinator,
-		createSectionController,
-		isolation,
-		env,
-		...(runtime || {}),
-		tools: effectiveToolsConfig,
-	}));
 
 	function handleBaseCompositionChanged(event: Event) {
-		const detail = (event as CustomEvent<{ composition?: SectionCompositionModel }>).detail;
-		compositionModel = detail?.composition || EMPTY_COMPOSITION;
-	}
-
-	function getSessionForItem(item: ItemEntity): unknown {
-		const itemId = item.id || "";
-		return itemSessionsByItemId[itemId];
+		compositionModel = getCompositionFromEvent(event);
 	}
 
 	function handleDividerMouseDown(event: MouseEvent) {
@@ -208,234 +229,205 @@
 	});
 
 	$effect(() => {
-		const renderables = preloadedRenderables;
-		if (renderables.length === 0) {
-			elementsLoaded = true;
-			return;
-		}
-
-		const bundleHost = String(iifeBundleHost || "").trim();
-		if (!bundleHost) {
-			console.warn(
-				"[pie-section-player-splitpane] Missing iifeBundleHost for element preloading; rendering without preload.",
-			);
-			elementsLoaded = true;
-			return;
-		}
+		resolvedPlayerDefinition?.ensureDefined?.().catch((error) => {
+			console.error("[pie-section-player-splitpane] Failed to load item player component:", error);
+		});
+	});
 
-		let cancelled = false;
-		elementsLoaded = false;
-		const loader = new IifeElementLoader({
-			bundleHost,
-			debugEnabled: () => false,
+	$effect(() => {
+		orchestratePlayerElementPreload({
+			componentTag: "pie-section-player-splitpane",
+			strategy: playerStrategy,
+			renderables: preloadedRenderables,
+			renderablesSignature: preloadedRenderablesSignature,
+			resolvedPlayerProps: resolvedPlayerProps as Record<string, unknown>,
+			resolvedPlayerEnv: resolvedPlayerEnv as Record<string, unknown>,
+			iifeBundleHost,
+			getState: () =>
+				({
+					lastPreloadSignature,
+					preloadRunToken,
+					elementsLoaded,
+				}) as PlayerPreloadState,
+			setState: (next) => {
+				if (next.lastPreloadSignature !== undefined) {
+					lastPreloadSignature = next.lastPreloadSignature;
+				}
+				if (next.preloadRunToken !== undefined) {
+					preloadRunToken = next.preloadRunToken;
+				}
+				if (next.elementsLoaded !== undefined) {
+					elementsLoaded = next.elementsLoaded;
+				}
+			},
 		});
-		const loaderView = (env as any)?.mode === "author" ? "author" : "delivery";
-
-		void loader
-			.loadFromItems(renderables, {
-				view: loaderView,
-				needsControllers: true,
-			})
-			.then(() => {
-				if (!cancelled) elementsLoaded = true;
-			})
-			.catch((error) => {
-				console.error(
-					"[pie-section-player-splitpane] Failed to preload PIE elements:",
-					error,
-				);
-				if (!cancelled) elementsLoaded = true;
-			});
+	});
 
-		return () => {
-			cancelled = true;
+	onMount(() => {
+		let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+		const html = document.documentElement;
+		const body = document.body;
+
+		html.classList.add(MANAGED_OUTER_SCROLL_CLASS);
+		body.classList.add(MANAGED_OUTER_SCROLL_CLASS);
+
+		const showOuterScrollbars = () => {
+			html.classList.add(ACTIVE_OUTER_SCROLL_CLASS);
+			body.classList.add(ACTIVE_OUTER_SCROLL_CLASS);
+			if (scrollTimeout) {
+				clearTimeout(scrollTimeout);
+			}
+			scrollTimeout = setTimeout(() => {
+				html.classList.remove(ACTIVE_OUTER_SCROLL_CLASS);
+				body.classList.remove(ACTIVE_OUTER_SCROLL_CLASS);
+			}, 900);
 		};
-	});
 
-	$effect(() => {
-		if (typeof window === "undefined" || runtime) return;
-		const usedLegacyProps: string[] = [];
-		if (assessmentId !== DEFAULT_ASSESSMENT_ID) usedLegacyProps.push("assessmentId");
-		if (playerType !== DEFAULT_PLAYER_TYPE) usedLegacyProps.push("playerType");
-		if (player !== null) usedLegacyProps.push("player");
-		if (lazyInit !== DEFAULT_LAZY_INIT) usedLegacyProps.push("lazyInit");
-		if (tools !== null) usedLegacyProps.push("tools");
-		if (accessibility !== null) usedLegacyProps.push("accessibility");
-		if (coordinator !== null) usedLegacyProps.push("coordinator");
-		if (createSectionController !== null) usedLegacyProps.push("createSectionController");
-		if (isolation !== DEFAULT_ISOLATION) usedLegacyProps.push("isolation");
-		const key = `${LEGACY_RUNTIME_WARNING_KEY}:${usedLegacyProps.sort().join(",")}`;
-		if (usedLegacyProps.length === 0 || warnedKeys.has(key)) return;
-		warnedKeys.add(key);
-		console.warn(
-			`[pie-section-player-splitpane] Runtime props (${usedLegacyProps.join(", ")}) are deprecated. Prefer the \`runtime\` object prop.`,
-		);
+		window.addEventListener("scroll", showOuterScrollbars, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", showOuterScrollbars);
+			html.classList.remove(ACTIVE_OUTER_SCROLL_CLASS);
+			body.classList.remove(ACTIVE_OUTER_SCROLL_CLASS);
+			html.classList.remove(MANAGED_OUTER_SCROLL_CLASS);
+			body.classList.remove(MANAGED_OUTER_SCROLL_CLASS);
+			if (scrollTimeout) {
+				clearTimeout(scrollTimeout);
+			}
+		};
 	});
 
 </script>
 
 <pie-section-player-base
 	runtime={effectiveRuntime}
-	{assessmentId}
 	{section}
 	section-id={sectionId}
 	attempt-id={attemptId}
-	{view}
-	player-type={playerType}
-	{player}
-	lazy-init={lazyInit}
-	{tools}
-	{accessibility}
-	{coordinator}
-	create-section-controller={createSectionController}
-	{isolation}
 	oncomposition-changed={handleBaseCompositionChanged}
 >
-	<div class={`player-shell player-shell--${toolbarPosition}`}>
+	<div
+		class={`pie-section-player-shell pie-section-player-shell--${toolbarPosition}`}
+	>
 		{#if shouldRenderToolbar && toolbarBeforeContent}
-			<pie-section-tools-toolbar
-				class={`section-toolbar section-toolbar--${toolbarPosition}`}
+			<pie-section-toolbar
+				class={`pie-section-player-toolbar pie-section-player-toolbar--${toolbarPosition}`}
 				position={toolbarPosition}
 				enabled-tools={enabledTools}
-			></pie-section-tools-toolbar>
+			></pie-section-toolbar>
 		{/if}
 
-		<div class={`layout-body ${toolbarInline ? "layout-body--inline" : ""}`}>
+		<div
+			class={`pie-section-player-layout-body ${shouldRenderToolbar && toolbarInline ? "pie-section-player-layout-body--inline" : ""}`}
+		>
 			<div
-				class={`split-content ${!hasPassages ? "split-content--no-passages" : ""}`}
+				class={`pie-section-player-split-content ${!hasPassages ? "pie-section-player-split-content--no-passages" : ""}`}
 				bind:this={splitContainerElement}
 				style={hasPassages
 					? `grid-template-columns: ${leftPanelWidth}% 0.5rem ${100 - leftPanelWidth - 0.5}%`
 					: "grid-template-columns: 1fr"}
 			>
 				{#if hasPassages}
-					<aside class="passages-pane" aria-label="Passages">
+					<aside class="pie-section-player-passages-pane" aria-label="Passages">
 						{#if !elementsLoaded}
-							<div class="content-card">
-								<div class="content-card-body passage-content pie-section-player__passage-content">
+							<div class="pie-section-player-content-card">
+								<div
+									class="pie-section-player-content-card-body pie-section-player-passage-content pie-section-player__passage-content"
+								>
 									Loading passage content...
 								</div>
 							</div>
 						{:else}
 							{#each passages as passage, passageIndex (passage.id || passageIndex)}
-								<pie-passage-shell
-									item-id={passage.id}
-									content-kind="rubric-block-stimulus"
-									item={passage}
-								>
-									<div class="content-card">
-										<div
-											class="content-card-header passage-header pie-section-player__passage-header"
-											data-region="header"
-										>
-											<h2>Passage {passageIndex + 1}</h2>
-											<pie-item-toolbar
-												item-id={passage.id}
-												catalog-id={passage.id}
-												tools={passageToolbarTools}
-												content-kind="rubric-block-stimulus"
-												size="md"
-												language="en-US"
-											></pie-item-toolbar>
-										</div>
-										<div
-											class="content-card-body passage-content pie-section-player__passage-content"
-											data-region="content"
-										>
-											<pie-iife-player
-												config={JSON.stringify(passage.config || {})}
-												env={JSON.stringify({ mode: "view", role: (env as any)?.role || "student" })}
-												bundle-host={iifeBundleHost}
-												skip-element-loading={true}
-											></pie-iife-player>
-										</div>
-									</div>
-								</pie-passage-shell>
+								<SectionPassageCard
+									{passage}
+									{resolvedPlayerTag}
+									playerAction={splitPanePlayerAction}
+									playerParams={getPassagePlayerParams({
+										passage,
+										resolvedPlayerEnv,
+										resolvedPlayerAttributes,
+										resolvedPlayerProps,
+										playerStrategy,
+									})}
+									{passageToolbarTools}
+								/>
 							{/each}
 						{/if}
 					</aside>
 
 					<button
 						type="button"
-						class={`split-divider ${isDragging ? "split-divider--dragging" : ""}`}
+						class={`pie-section-player-split-divider ${isDragging ? "pie-section-player-split-divider--dragging" : ""}`}
 						onmousedown={handleDividerMouseDown}
 						onkeydown={handleDividerKeyDown}
 						aria-label="Resize panels"
 					>
-						<span class="split-divider-handle"></span>
+						<span class="pie-section-player-split-divider-handle"></span>
 					</button>
 				{/if}
 
-				<main class="items-pane" aria-label="Items">
+				<main class="pie-section-player-items-pane" aria-label="Items">
 					{#if !elementsLoaded}
-						<div class="content-card">
-							<div class="content-card-body item-content pie-section-player__item-content">
+						<div class="pie-section-player-content-card">
+							<div
+								class="pie-section-player-content-card-body pie-section-player-item-content pie-section-player__item-content"
+							>
 								Loading section content...
 							</div>
 						</div>
 					{:else}
 						{#each items as item, itemIndex (item.id || itemIndex)}
-						<pie-item-shell item-id={item.id} content-kind="assessment-item" item={item}>
-							<div class="content-card">
-								<div
-									class="content-card-header item-header pie-section-player__item-header"
-									data-region="header"
-								>
-									<h2>Question {itemIndex + 1}</h2>
-									<pie-item-toolbar
-										item-id={item.id}
-										catalog-id={item.id}
-										tools={itemToolbarTools}
-										content-kind="assessment-item"
-										size="md"
-										language="en-US"
-									></pie-item-toolbar>
-								</div>
-								<div
-									class="content-card-body item-content pie-section-player__item-content"
-									data-region="content"
-								>
-									<pie-iife-player
-										config={JSON.stringify(item.config || {})}
-										env={JSON.stringify(env)}
-										session={JSON.stringify(getSessionForItem(item) || { id: "", data: [] })}
-										bundle-host={iifeBundleHost}
-										skip-element-loading={true}
-									></pie-iife-player>
-								</div>
-								<div data-region="footer"></div>
-							</div>
-						</pie-item-shell>
+						<SectionItemCard
+							{item}
+							canonicalItemId={getCanonicalItemId({ compositionModel, item })}
+							{resolvedPlayerTag}
+							playerAction={splitPanePlayerAction}
+							playerParams={getItemPlayerParams({
+								item,
+								compositionModel,
+								resolvedPlayerEnv,
+								resolvedPlayerAttributes,
+								resolvedPlayerProps,
+								playerStrategy,
+							})}
+							{itemToolbarTools}
+						/>
 						{/each}
 					{/if}
 				</main>
 			</div>
 
 			{#if shouldRenderToolbar && toolbarInline && toolbarPosition === "right"}
-				<aside class="section-toolbar-pane section-toolbar-pane--right" aria-label="Section tools">
-					<pie-section-tools-toolbar
+				<aside
+					class="pie-section-player-toolbar-pane pie-section-player-toolbar-pane--right"
+					aria-label="Section tools"
+				>
+					<pie-section-toolbar
 						position="right"
 						enabled-tools={enabledTools}
-					></pie-section-tools-toolbar>
+					></pie-section-toolbar>
 				</aside>
 			{/if}
 
 			{#if shouldRenderToolbar && toolbarInline && toolbarPosition === "left"}
-				<aside class="section-toolbar-pane section-toolbar-pane--left" aria-label="Section tools">
-					<pie-section-tools-toolbar
+				<aside
+					class="pie-section-player-toolbar-pane pie-section-player-toolbar-pane--left"
+					aria-label="Section tools"
+				>
+					<pie-section-toolbar
 						position="left"
 						enabled-tools={enabledTools}
-					></pie-section-tools-toolbar>
+					></pie-section-toolbar>
 				</aside>
 			{/if}
 		</div>
 
 		{#if shouldRenderToolbar && !toolbarBeforeContent && !toolbarInline}
-			<pie-section-tools-toolbar
-				class={`section-toolbar section-toolbar--${toolbarPosition}`}
+			<pie-section-toolbar
+				class={`pie-section-player-toolbar pie-section-player-toolbar--${toolbarPosition}`}
 				position={toolbarPosition}
 				enabled-tools={enabledTools}
-			></pie-section-tools-toolbar>
+			></pie-section-toolbar>
 		{/if}
 	</div>
 </pie-section-player-base>
@@ -450,41 +442,43 @@
 		overflow: hidden;
 	}
 
-	.player-shell {
+	.pie-section-player-shell {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
 		min-height: 0;
 		overflow: hidden;
+		background: var(--pie-background-dark, #ecedf1);
 	}
 
-	.player-shell--left,
-	.player-shell--right {
+	.pie-section-player-shell--left,
+	.pie-section-player-shell--right {
 		flex-direction: row;
 	}
 
-	.player-shell--left .layout-body--inline {
+	.pie-section-player-shell--left .pie-section-player-layout-body--inline {
 		order: 2;
 	}
 
-	.player-shell--left .section-toolbar-pane--left {
+	.pie-section-player-shell--left .pie-section-player-toolbar-pane--left {
 		order: 1;
 	}
 
-	.layout-body {
+	.pie-section-player-layout-body {
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
 		flex: 1;
 		min-height: 0;
 		overflow: hidden;
+		background: var(--pie-background-dark, #ecedf1);
 	}
 
-	.layout-body--inline {
+	.pie-section-player-layout-body--inline {
 		grid-template-columns: minmax(0, 1fr) auto;
 		gap: 1rem;
 	}
 
-	.split-content {
+	.pie-section-player-split-content {
 		display: grid;
 		gap: 0;
 		min-height: 0;
@@ -492,12 +486,12 @@
 		overflow: hidden;
 	}
 
-	.split-content--no-passages .items-pane {
-		padding-left: 0;
+	.pie-section-player-split-content--no-passages .pie-section-player-items-pane {
+		padding-left: 0.5rem;
 	}
 
-	.passages-pane,
-	.items-pane {
+	.pie-section-player-passages-pane,
+	.pie-section-player-items-pane {
 		height: 100%;
 		max-height: 100%;
 		min-height: 0;
@@ -508,24 +502,36 @@
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
+		padding: 0.5rem;
+		box-sizing: border-box;
+		background: var(--pie-background-dark, #ecedf1);
 	}
 
-	.section-toolbar-pane {
+	.pie-section-player-toolbar-pane {
 		min-height: 0;
 		overflow: auto;
+		padding: 0.5rem;
+		box-sizing: border-box;
+		background: var(--pie-background-dark, #ecedf1);
 	}
 
-	.section-toolbar-pane--right {
+	.pie-section-player-toolbar-pane--right {
 		border-left: 1px solid var(--pie-border-light, #e5e7eb);
-		padding-left: 0.5rem;
 	}
 
-	.section-toolbar-pane--left {
+	.pie-section-player-toolbar-pane--left {
 		border-right: 1px solid var(--pie-border-light, #e5e7eb);
-		padding-right: 0.5rem;
 	}
 
-	.split-divider {
+	.pie-section-player-toolbar {
+		margin: 0.5rem;
+	}
+
+	.pie-section-player-toolbar-pane pie-section-toolbar {
+		margin: 0.5rem;
+	}
+
+	.pie-section-player-split-divider {
 		border: none;
 		padding: 0;
 		margin: 0;
@@ -544,16 +550,16 @@
 		transition: background 0.2s ease;
 	}
 
-	.split-divider:hover {
+	.pie-section-player-split-divider:hover {
 		background: var(--pie-border-light, #e5e7eb);
 	}
 
-	.split-divider:focus {
+	.pie-section-player-split-divider:focus {
 		outline: 2px solid var(--pie-focus-checked-border, #1976d2);
 		outline-offset: -2px;
 	}
 
-	.split-divider-handle {
+	.pie-section-player-split-divider-handle {
 		position: absolute;
 		inset: 0;
 		margin: auto;
@@ -565,7 +571,7 @@
 		pointer-events: none;
 	}
 
-	.split-divider-handle::before {
+	.pie-section-player-split-divider-handle::before {
 		content: "";
 		position: absolute;
 		top: 50%;
@@ -578,25 +584,25 @@
 		opacity: 0.8;
 	}
 
-	.split-divider:hover .split-divider-handle,
-	.split-divider:focus .split-divider-handle,
-	.split-divider--dragging .split-divider-handle {
+	.pie-section-player-split-divider:hover .pie-section-player-split-divider-handle,
+	.pie-section-player-split-divider:focus .pie-section-player-split-divider-handle,
+	.pie-section-player-split-divider--dragging .pie-section-player-split-divider-handle {
 		background: var(--pie-primary, #1976d2);
 		height: 80px;
 		box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
 	}
 
-	.split-divider--dragging {
+	.pie-section-player-split-divider--dragging {
 		background: var(--pie-primary-light, #dbeafe);
 	}
 
-	.content-card {
+	.pie-section-player-content-card {
 		border: 1px solid var(--pie-border-light, #e5e7eb);
 		border-radius: 8px;
-		background: var(--pie-white, #fff);
+		background: var(--pie-background, #fff);
 	}
 
-	.content-card-header {
+	.pie-section-player-content-card-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
@@ -604,36 +610,71 @@
 		border-bottom: 1px solid var(--pie-border-light, #e5e7eb);
 	}
 
-	.content-card-header h2 {
-		margin: 0;
-		font-size: 0.95rem;
-		font-weight: 600;
+	.pie-section-player-content-card-body {
+		padding: 1rem;
 	}
 
-	.content-card-body {
-		padding: 1rem;
+	:global(html.pie-outer-scrollbars-managed),
+	:global(body.pie-outer-scrollbars-managed) {
+		scrollbar-width: auto;
+		scrollbar-color: transparent transparent;
+	}
+
+	:global(html.pie-outer-scrollbars-managed.pie-outer-scrolling),
+	:global(body.pie-outer-scrollbars-managed.pie-outer-scrolling) {
+		scrollbar-color: #c1c1c1 #f1f1f1;
+	}
+
+	:global(html.pie-outer-scrollbars-managed::-webkit-scrollbar),
+	:global(body.pie-outer-scrollbars-managed::-webkit-scrollbar) {
+		width: 0;
+		height: 0;
+		background: transparent;
+	}
+
+	:global(html.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar),
+	:global(body.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar) {
+		width: 8px;
+		height: 8px;
+	}
+
+	:global(html.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar-track),
+	:global(body.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar-track) {
+		background: #f1f1f1;
+		border-radius: 4px;
+	}
+
+	:global(html.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar-thumb),
+	:global(body.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar-thumb) {
+		background: #c1c1c1;
+		border-radius: 4px;
+	}
+
+	:global(html.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar-thumb:hover),
+	:global(body.pie-outer-scrollbars-managed.pie-outer-scrolling::-webkit-scrollbar-thumb:hover) {
+		background: #a1a1a1;
 	}
 
 	@media (max-width: 1100px) {
-		.player-shell--left,
-		.player-shell--right {
+		.pie-section-player-shell--left,
+		.pie-section-player-shell--right {
 			flex-direction: column;
 		}
 
-		.layout-body--inline {
+		.pie-section-player-layout-body--inline {
 			grid-template-columns: 1fr;
 		}
 
-		.split-content {
+		.pie-section-player-split-content {
 			grid-template-columns: 1fr !important;
 		}
 
-		.split-divider {
+		.pie-section-player-split-divider {
 			display: none;
 		}
 
-		.section-toolbar-pane--left,
-		.section-toolbar-pane--right {
+		.pie-section-player-toolbar-pane--left,
+		.pie-section-player-toolbar-pane--right {
 			border: none;
 			padding: 0;
 		}