@pie-players/pie-section-player-tools-session-debugger 0.3.12 → 0.3.16

package/SectionSessionPanel.svelte

@@ -12,17 +12,12 @@
 
 <script lang="ts">
 	import '@pie-players/pie-theme/components.css';
-	import PanelResizeHandle from '@pie-players/pie-section-player-tools-shared/PanelResizeHandle.svelte';
-	import PanelWindowControls from '@pie-players/pie-section-player-tools-shared/PanelWindowControls.svelte';
+	import SharedFloatingPanel from '@pie-players/pie-section-player-tools-shared/SharedFloatingPanel.svelte';
 	import {
-		claimNextFloatingPanelZIndex,
-		computePanelSizeFromViewport,
-		createFloatingPanelPointerController,
 		getSectionControllerFromCoordinator,
 		isMatchingSectionControllerLifecycleEvent
 	} from '@pie-players/pie-section-player-tools-shared';
 	import { createEventDispatcher } from 'svelte';
-	import { onMount } from 'svelte';
 	const dispatch = createEventDispatcher<{ close: undefined }>();
 
 
@@ -91,13 +86,6 @@
 		attemptId?: string;
 	} = $props();
 
-	let isSessionMinimized = $state(false);
-	let sessionWindowX = $state(24);
-	let sessionWindowY = $state(100);
-	let sessionWindowWidth = $state(220);
-	let sessionWindowHeight = $state(600);
-	let sessionPanelZIndex = $state(claimNextFloatingPanelZIndex());
-
 	let sessionPanelSnapshot = $state<SessionPanelSnapshot>({
 		currentItemIndex: null,
 		currentItemId: null,
@@ -286,69 +274,30 @@
 		};
 	});
 
-	onMount(() => {
-		const initial = computePanelSizeFromViewport(
-			{ width: window.innerWidth, height: window.innerHeight },
-			{
-				widthRatio: 0.29,
-				heightRatio: 0.72,
-				minWidth: 280,
-				maxWidth: 560,
-				minHeight: 360,
-				maxHeight: 860,
-				alignX: 'left',
-				alignY: 'center',
-				paddingX: 16,
-				paddingY: 16
-			}
-		);
-		sessionWindowX = initial.x;
-		sessionWindowY = initial.y;
-		sessionWindowWidth = initial.width;
-		sessionWindowHeight = initial.height;
-	});
-
-	function bringSessionPanelToFront(): void {
-		sessionPanelZIndex = claimNextFloatingPanelZIndex();
-	}
-
-	const pointerController = createFloatingPanelPointerController({
-		getState: () => ({
-			x: sessionWindowX,
-			y: sessionWindowY,
-			width: sessionWindowWidth,
-			height: sessionWindowHeight
-		}),
-		setState: (next) => {
-			sessionWindowX = next.x;
-			sessionWindowY = next.y;
-			sessionWindowWidth = next.width;
-			sessionWindowHeight = next.height;
-		},
-		minWidth: 300,
-		minHeight: 200,
-		onFocus: bringSessionPanelToFront
-	});
-
-	$effect(() => {
-		return () => {
-			pointerController.stop();
-		};
-	});
 </script>
 
-<div
-	class="pie-section-player-tools-session-debugger"
-	style="left: {sessionWindowX}px; top: {sessionWindowY}px; width: {sessionWindowWidth}px; z-index: {sessionPanelZIndex}; {isSessionMinimized ? 'height: auto;' : `height: ${sessionWindowHeight}px;`}"
+<SharedFloatingPanel
+	title="Session Data"
+	ariaLabel="Drag session panel"
+	minWidth={340}
+	minHeight={260}
+	initialSizing={{
+		widthRatio: 0.29,
+		heightRatio: 0.72,
+		minWidth: 280,
+		maxWidth: 560,
+		minHeight: 360,
+		maxHeight: 860,
+		alignX: 'left',
+		alignY: 'center',
+		paddingX: 16,
+		paddingY: 16
+	}}
+	className="pie-section-player-tools-session-debugger"
+	bodyClass="pie-section-player-tools-session-debugger__content-shell"
+	onClose={() => dispatch('close')}
 >
-	<div
-		class="pie-section-player-tools-session-debugger__header"
-		onmousedown={(event: MouseEvent) => pointerController.startDrag(event)}
-		role="button"
-		tabindex="0"
-		aria-label="Drag session panel"
-	>
-		<div class="pie-section-player-tools-session-debugger__header-title">
+	<svelte:fragment slot="icon">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
 				class="pie-section-player-tools-session-debugger__icon-sm"
@@ -358,116 +307,53 @@
 			>
 				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
 			</svg>
-			<h3 class="pie-section-player-tools-session-debugger__title">Session Data</h3>
-		</div>
-		<div class="pie-section-player-tools-session-debugger__header-actions">
-			<PanelWindowControls
-				minimized={isSessionMinimized}
-				onToggle={() => (isSessionMinimized = !isSessionMinimized)}
-				onClose={() => dispatch('close')}
-			/>
+	</svelte:fragment>
+
+	<div class="pie-section-player-tools-session-debugger__content">
+		<div class="pie-section-player-tools-session-debugger__section-intro">
+			<div class="pie-section-player-tools-session-debugger__heading">PIE Session Data (Persistent)</div>
 		</div>
-	</div>
 
-	{#if !isSessionMinimized}
-		<div class="pie-section-player-tools-session-debugger__content-shell" style="height: {sessionWindowHeight - 50}px;">
-			<div class="pie-section-player-tools-session-debugger__content">
-				<div class="pie-section-player-tools-session-debugger__section-intro">
-					<div class="pie-section-player-tools-session-debugger__heading">PIE Session Data (Persistent)</div>
+		{#if !controllerAvailable}
+			<div class="pie-section-player-tools-session-debugger__alert pie-section-player-tools-session-debugger__alert--warning">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="pie-section-player-tools-session-debugger__icon-md"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z" />
+				</svg>
+				<span class="pie-section-player-tools-session-debugger__text-xs">Section controller not available for this section yet.</span>
+			</div>
+		{:else}
+			{#if Object.keys(sessionPanelSnapshot.itemSessions || {}).length === 0}
+				<div class="pie-section-player-tools-session-debugger__alert pie-section-player-tools-session-debugger__alert--info">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="pie-section-player-tools-session-debugger__icon-md"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+					</svg>
+					<span class="pie-section-player-tools-session-debugger__text-xs">No section session data yet. Interact with the questions to see updates.</span>
 				</div>
-
-				{#if !controllerAvailable}
-					<div class="pie-section-player-tools-session-debugger__alert pie-section-player-tools-session-debugger__alert--warning">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							class="pie-section-player-tools-session-debugger__icon-md"
-							fill="none"
-							viewBox="0 0 24 24"
-						>
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z" />
-						</svg>
-						<span class="pie-section-player-tools-session-debugger__text-xs">Section controller not available for this section yet.</span>
-					</div>
-				{:else}
-					{#if Object.keys(sessionPanelSnapshot.itemSessions || {}).length === 0}
-						<div class="pie-section-player-tools-session-debugger__alert pie-section-player-tools-session-debugger__alert--info">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								class="pie-section-player-tools-session-debugger__icon-md"
-								fill="none"
-								viewBox="0 0 24 24"
-							>
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-							</svg>
-							<span class="pie-section-player-tools-session-debugger__text-xs">No section session data yet. Interact with the questions to see updates.</span>
-						</div>
-					{/if}
-					<div class="pie-section-player-tools-session-debugger__card">
-						<div class="pie-section-player-tools-session-debugger__card-title">
-							Item Sessions Snapshot
-						</div>
-						<pre class="pie-section-player-tools-session-debugger__card-pre">{JSON.stringify(sessionPanelSnapshot, null, 2)}</pre>
-					</div>
-				{/if}
+			{/if}
+			<div class="pie-section-player-tools-session-debugger__card">
+				<div class="pie-section-player-tools-session-debugger__card-title">
+					Item Sessions Snapshot
+				</div>
+				<pre class="pie-section-player-tools-session-debugger__card-pre">{JSON.stringify(sessionPanelSnapshot, null, 2)}</pre>
 			</div>
-		</div>
-	{/if}
-
-	{#if !isSessionMinimized}
-		<PanelResizeHandle onPointerDown={(event: MouseEvent) => pointerController.startResize(event)} />
-	{/if}
-</div>
+		{/if}
+	</div>
+</SharedFloatingPanel>
 
 <style>
-	.pie-section-player-tools-session-debugger {
-		position: fixed;
-		z-index: 9999;
-		background: var(--color-base-100, #fff);
-		color: var(--color-base-content, #1f2937);
-		border: 2px solid var(--color-base-300, #d1d5db);
-		border-radius: 8px;
-		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-		overflow: hidden;
-		font-family: var(--pie-font-family, Inter, system-ui, sans-serif);
-	}
-
-	.pie-section-player-tools-session-debugger__header {
-		padding: 8px 16px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background: var(--color-base-200, #f3f4f6);
-		cursor: move;
-		user-select: none;
-		border-bottom: 1px solid var(--color-base-300, #d1d5db);
-	}
-
-	.pie-section-player-tools-session-debugger__header-title {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
 	.pie-section-player-tools-session-debugger__icon-sm {
 		width: 1rem;
 		height: 1rem;
 	}
 
-	.pie-section-player-tools-session-debugger__title {
-		margin: 0;
-		font-size: 0.95rem;
-		font-weight: 700;
-	}
-
-	.pie-section-player-tools-session-debugger__header-actions {
-		display: flex;
-		gap: 4px;
-	}
-
-	.pie-section-player-tools-session-debugger__content-shell {
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-
 </style>