@pie-players/pie-section-player-tools-event-debugger 0.3.3 → 0.3.5

package/EventPanel.svelte

@@ -1,7 +1,7 @@
 <svelte:options
 	customElement={{
 		tag: "pie-section-player-tools-event-debugger",
-		shadow: "none",
+		shadow: "open",
 		props: {
 			maxEvents: { type: "Number", attribute: "max-events" },
 			toolkitCoordinator: { type: "Object", attribute: "toolkit-coordinator" },
@@ -13,7 +13,15 @@
 
 <script lang="ts">
 	import "@pie-players/pie-theme/components.css";
-	import { createEventDispatcher, onDestroy, onMount } from "svelte";
+	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 {
+		computePanelSizeFromViewport,
+		createFloatingPanelPointerController,
+		getSectionControllerFromCoordinator,
+		isMatchingSectionControllerLifecycleEvent,
+	} from "@pie-players/pie-section-player-tools-shared";
+	import { createEventDispatcher, onDestroy, onMount, untrack } from "svelte";
 
 	type ControllerEvent = {
 		type?: string;
@@ -21,14 +29,38 @@
 		itemId?: string;
 		canonicalItemId?: string;
 		intent?: string;
-		replayed?: boolean;
 		[key: string]: unknown;
 	};
+	type ControllerRuntimeState = {
+		loadingComplete?: boolean;
+		totalRegistered?: number;
+		totalLoaded?: number;
+		itemsComplete?: boolean;
+		completedCount?: number;
+		totalItems?: number;
+	} | null;
+	type ToolkitCoordinatorLike = {
+		subscribeSectionEvents: (args: {
+			sectionId: string;
+			attemptId?: string;
+			listener: (event: ControllerEvent) => void;
+		}) => () => void;
+		getSectionController?: (args: {
+			sectionId: string;
+			attemptId?: string;
+		}) => unknown;
+		onSectionControllerLifecycle?: (
+			listener: (event: {
+				key?: { sectionId?: string; attemptId?: string };
+			}) => void,
+		) => () => void;
+	};
 
 	type EventType =
 		| "item-session-data-changed"
 		| "item-session-meta-changed"
 		| "item-selected"
+		| "section-navigation-change"
 		| "content-loaded"
 		| "item-player-error"
 		| "item-complete-changed"
@@ -45,7 +77,6 @@
 		itemId: string | null;
 		canonicalItemId: string | null;
 		intent: string | null;
-		replayed: boolean;
 		duplicateCount: number;
 		payload: unknown;
 		fingerprint: string;
@@ -61,7 +92,7 @@
 		attemptId = undefined,
 	}: {
 		maxEvents?: number;
-		toolkitCoordinator?: any;
+		toolkitCoordinator?: ToolkitCoordinatorLike | null;
 		sectionId?: string;
 		attemptId?: string;
 	} = $props();
@@ -76,22 +107,19 @@
 	let records = $state<EventRecord[]>([]);
 	let controllerAvailable = $state(false);
 
-	let isDragging = false;
-	let isResizing = false;
-	let dragStartX = 0;
-	let dragStartY = 0;
-	let dragStartPanelX = 0;
-	let dragStartPanelY = 0;
-	let resizeStartX = 0;
-	let resizeStartY = 0;
-	let resizeStartWidth = 0;
-	let resizeStartHeight = 0;
 	let nextRecordId = 1;
-	let activeController: {
-		subscribe?: (listener: (event: ControllerEvent) => void) => () => void;
-	} | null = null;
-	let unsubscribeController: (() => void) | null = null;
-	let unsubscribeLifecycle: (() => void) | null = null;
+	let resubscribeQueued = false;
+	const subscriptions: {
+		controller: (() => void) | null;
+		lifecycle: (() => void) | null;
+		activeSectionId: string;
+		activeAttemptId?: string;
+	} = {
+		controller: null,
+		lifecycle: null,
+		activeSectionId: "",
+		activeAttemptId: undefined,
+	};
 
 	function safeClone<T>(value: T): T {
 		try {
@@ -139,6 +167,7 @@
 			value === "item-session-data-changed" ||
 			value === "item-session-meta-changed" ||
 			value === "item-selected" ||
+			value === "section-navigation-change" ||
 			value === "content-loaded" ||
 			value === "item-player-error" ||
 			value === "item-complete-changed" ||
@@ -153,6 +182,7 @@
 
 	function getEventLevel(type: EventType): EventLevel {
 		if (
+			type === "section-navigation-change" ||
 			type === "section-loading-complete" ||
 			type === "section-items-complete-changed" ||
 			type === "section-error"
@@ -178,7 +208,6 @@
 			itemId: getValueAsString(detail?.itemId),
 			canonicalItemId: getValueAsString(detail?.canonicalItemId),
 			intent: getValueAsString(detail?.intent),
-			replayed: detail?.replayed === true,
 			duplicateCount: 1,
 			payload,
 			fingerprint,
@@ -210,25 +239,62 @@
 		}
 	}
 
+	function handleControllerEvent(event: ControllerEvent): void {
+		pushRecord(event || {});
+	}
+
 	function getController(): any | null {
-		if (!toolkitCoordinator || !sectionId) return null;
-		return (
-			toolkitCoordinator.getSectionController?.({
-				sectionId,
-				attemptId,
-			}) || null
+		return getSectionControllerFromCoordinator(
+			toolkitCoordinator,
+			sectionId,
+			attemptId,
 		);
 	}
 
+	function seedFromRuntimeState(controller: {
+		getRuntimeState?: () => ControllerRuntimeState;
+	}): void {
+		const runtimeState = controller?.getRuntimeState?.();
+		if (!runtimeState || typeof runtimeState !== "object") return;
+		const totalItems =
+			typeof runtimeState.totalItems === "number" ? runtimeState.totalItems : 0;
+		const now = Date.now();
+		pushRecord({
+			type: "section-items-complete-changed",
+			complete: runtimeState.itemsComplete === true,
+			completedCount:
+				typeof runtimeState.completedCount === "number"
+					? runtimeState.completedCount
+					: 0,
+			totalItems,
+			timestamp: now,
+		});
+		if (runtimeState.loadingComplete === true) {
+			pushRecord({
+				type: "section-loading-complete",
+				totalRegistered:
+					typeof runtimeState.totalRegistered === "number"
+						? runtimeState.totalRegistered
+						: 0,
+				totalLoaded:
+					typeof runtimeState.totalLoaded === "number"
+						? runtimeState.totalLoaded
+						: 0,
+				timestamp: now,
+			});
+		}
+	}
+
 	function detachControllerSubscription() {
-		unsubscribeController?.();
-		unsubscribeController = null;
-		activeController = null;
+		subscriptions.controller?.();
+		subscriptions.controller = null;
+		subscriptions.activeSectionId = "";
+		subscriptions.activeAttemptId = undefined;
 	}
 
 	function detachLifecycleSubscription() {
-		unsubscribeLifecycle?.();
-		unsubscribeLifecycle = null;
+		subscriptions.lifecycle?.();
+		subscriptions.lifecycle = null;
 	}
 
 	function ensureControllerSubscription() {
@@ -238,64 +304,57 @@
 			detachControllerSubscription();
 			return;
 		}
-		if (controller === activeController) return;
-		detachControllerSubscription();
-		activeController = controller;
-		unsubscribeController =
-			controller.subscribe?.((event: ControllerEvent) => {
-				pushRecord(event || {});
-			}) || null;
-	}
-
-	function startDrag(event: MouseEvent) {
-		isDragging = true;
-		dragStartX = event.clientX;
-		dragStartY = event.clientY;
-		dragStartPanelX = panelX;
-		dragStartPanelY = panelY;
-		document.addEventListener("mousemove", onDrag);
-		document.addEventListener("mouseup", stopDrag);
-	}
-
-	function onDrag(event: MouseEvent) {
-		if (!isDragging) return;
-		const deltaX = event.clientX - dragStartX;
-		const deltaY = event.clientY - dragStartY;
-		panelX = Math.max(0, Math.min(dragStartPanelX + deltaX, window.innerWidth - panelWidth));
-		panelY = Math.max(0, Math.min(dragStartPanelY + deltaY, window.innerHeight - 100));
-	}
 
-	function stopDrag() {
-		isDragging = false;
-		document.removeEventListener("mousemove", onDrag);
-		document.removeEventListener("mouseup", stopDrag);
-	}
-
-	function startResize(event: MouseEvent) {
-		isResizing = true;
-		resizeStartX = event.clientX;
-		resizeStartY = event.clientY;
-		resizeStartWidth = panelWidth;
-		resizeStartHeight = panelHeight;
-		document.addEventListener("mousemove", onResize);
-		document.addEventListener("mouseup", stopResize);
-		event.preventDefault();
-		event.stopPropagation();
-	}
-
-	function onResize(event: MouseEvent) {
-		if (!isResizing) return;
-		const deltaX = event.clientX - resizeStartX;
-		const deltaY = event.clientY - resizeStartY;
-		panelWidth = Math.max(340, Math.min(resizeStartWidth + deltaX, window.innerWidth - panelX));
-		panelHeight = Math.max(260, Math.min(resizeStartHeight + deltaY, window.innerHeight - panelY));
-	}
+		const nextAttemptId = attemptId || undefined;
+		const isSameTarget =
+			subscriptions.activeSectionId === sectionId &&
+			subscriptions.activeAttemptId === nextAttemptId;
+		if (isSameTarget && subscriptions.controller) {
+			return;
+		}
 
-	function stopResize() {
-		isResizing = false;
-		document.removeEventListener("mousemove", onResize);
-		document.removeEventListener("mouseup", stopResize);
-	}
+		detachControllerSubscription();
+		subscriptions.controller =
+			toolkitCoordinator?.subscribeSectionEvents({
+				sectionId,
+				attemptId,
+				listener: handleControllerEvent,
+			}) || null;
+		subscriptions.activeSectionId = sectionId;
+		subscriptions.activeAttemptId = nextAttemptId;
+		seedFromRuntimeState(controller);
+	}
+
+	function queueEnsureControllerSubscription(): void {
+		if (resubscribeQueued) return;
+		resubscribeQueued = true;
+		queueMicrotask(() => {
+			resubscribeQueued = false;
+			ensureControllerSubscription();
+		});
+	}
+
+	const pointerController = createFloatingPanelPointerController({
+		getState: () => ({
+			x: panelX,
+			y: panelY,
+			width: panelWidth,
+			height: panelHeight,
+		}),
+		setState: (next: {
+			x: number;
+			y: number;
+			width: number;
+			height: number;
+		}) => {
+			panelX = next.x;
+			panelY = next.y;
+			panelWidth = next.width;
+			panelHeight = next.height;
+		},
+		minWidth: 340,
+		minHeight: 260,
+	});
 
 	function clearRecords() {
 		records = [];
@@ -326,53 +385,68 @@
 	);
 
 	onMount(() => {
-		const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
-		const viewportWidth = window.innerWidth;
-		const viewportHeight = window.innerHeight;
-		panelWidth = clamp(Math.round(viewportWidth * 0.34), 380, 720);
-		panelHeight = clamp(Math.round(viewportHeight * 0.74), 360, 860);
-		panelX = Math.max(16, Math.round(viewportWidth * 0.58));
-		panelY = Math.max(16, Math.round((viewportHeight - panelHeight) / 2));
-		ensureControllerSubscription();
-		unsubscribeLifecycle = toolkitCoordinator?.onSectionControllerLifecycle?.(
-			(event: { key?: { sectionId?: string; attemptId?: string } }) => {
-				const eventSectionId = event?.key?.sectionId || "";
-				const eventAttemptId = event?.key?.attemptId || undefined;
-				if (eventSectionId !== sectionId) return;
-				if ((eventAttemptId || undefined) !== (attemptId || undefined)) return;
-				ensureControllerSubscription();
+		const initial = computePanelSizeFromViewport(
+			{ width: window.innerWidth, height: window.innerHeight },
+			{
+				widthRatio: 0.34,
+				heightRatio: 0.74,
+				minWidth: 380,
+				maxWidth: 720,
+				minHeight: 360,
+				maxHeight: 860,
+				alignX: "right",
+				alignY: "center",
+				paddingX: 16,
+				paddingY: 16,
 			},
 		);
-
-		return () => {
-			detachControllerSubscription();
-			detachLifecycleSubscription();
-		};
+		panelX = initial.x;
+		panelY = initial.y;
+		panelWidth = initial.width;
+		panelHeight = initial.height;
 	});
 
 	$effect(() => {
 		void toolkitCoordinator;
 		void sectionId;
 		void attemptId;
-		ensureControllerSubscription();
-		detachLifecycleSubscription();
-		unsubscribeLifecycle = toolkitCoordinator?.onSectionControllerLifecycle?.(
-			(event: { key?: { sectionId?: string; attemptId?: string } }) => {
-				const eventSectionId = event?.key?.sectionId || "";
-				const eventAttemptId = event?.key?.attemptId || undefined;
-				if (eventSectionId !== sectionId) return;
-				if ((eventAttemptId || undefined) !== (attemptId || undefined)) return;
-				ensureControllerSubscription();
-			},
-		);
+		untrack(() => {
+			ensureControllerSubscription();
+			detachLifecycleSubscription();
+			subscriptions.lifecycle = toolkitCoordinator?.onSectionControllerLifecycle?.(
+				(event: {
+					type?: "ready" | "disposed";
+					key?: { sectionId?: string; attemptId?: string };
+				}) => {
+					if (
+						!isMatchingSectionControllerLifecycleEvent(event, sectionId, attemptId)
+					)
+						return;
+					if (event?.type === "disposed") {
+						detachControllerSubscription();
+						queueEnsureControllerSubscription();
+						return;
+					}
+					const nextAttemptId = attemptId || undefined;
+					if (
+						subscriptions.controller &&
+						subscriptions.activeSectionId === sectionId &&
+						subscriptions.activeAttemptId === nextAttemptId
+					) {
+						return;
+					}
+					queueEnsureControllerSubscription();
+				},
+			) || null;
+		});
 		return () => {
+			detachControllerSubscription();
 			detachLifecycleSubscription();
 		};
 	});
 
 	onDestroy(() => {
-		stopDrag();
-		stopResize();
+		pointerController.stop();
 		detachControllerSubscription();
 		detachLifecycleSubscription();
 	});
@@ -384,35 +458,34 @@
 >
 	<div
 		class="pie-section-player-tools-event-debugger__header"
-		onmousedown={startDrag}
+		onmousedown={(event: MouseEvent) => pointerController.startDrag(event)}
 		role="button"
 		tabindex="0"
 		aria-label="Drag event debugger panel"
 	>
 		<div class="pie-section-player-tools-event-debugger__header-title">
-			<h3 class="pie-section-player-tools-event-debugger__title">Session Broadcasts</h3>
-			<span class="pie-section-player-tools-event-debugger__counter">{records.length}</span>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="pie-section-player-tools-event-debugger__icon-sm"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h5m-7 7h12a2 2 0 002-2V5a2 2 0 00-2-2H6a2 2 0 00-2 2v14a2 2 0 002 2z" />
+			</svg>
+			<h3 class="pie-section-player-tools-event-debugger__title">Controller Events</h3>
 		</div>
 		<div class="pie-section-player-tools-event-debugger__header-actions">
-			<button
-				class="pie-section-player-tools-event-debugger__icon-button"
-				onclick={() => (isMinimized = !isMinimized)}
-				title={isMinimized ? "Maximize" : "Minimize"}
-			>
-				{isMinimized ? "▴" : "▾"}
-			</button>
-			<button
-				class="pie-section-player-tools-event-debugger__icon-button"
-				onclick={() => dispatch("close")}
-				title="Close"
-			>
-				✕
-			</button>
+			<PanelWindowControls
+				minimized={isMinimized}
+				onToggle={() => (isMinimized = !isMinimized)}
+				onClose={() => dispatch("close")}
+			/>
 		</div>
 	</div>
 
 	{#if !isMinimized}
-		<div class="pie-section-player-tools-event-debugger__content-shell" style="height: {panelHeight - 56}px;">
+		<div class="pie-section-player-tools-event-debugger__content-shell" style="height: {panelHeight - 50}px;">
 			<div class="pie-section-player-tools-event-debugger__toolbar">
 				<div
 					class="pie-section-player-tools-event-debugger__toggle-group"
@@ -455,7 +528,7 @@
 				<div class="pie-section-player-tools-event-debugger__list">
 					{#if visibleRecords.length === 0}
 						<div class="pie-section-player-tools-event-debugger__empty">
-							No matching events yet. Interact with an item to capture broadcasts.
+							No matching events yet. Interact with an item to capture controller events.
 						</div>
 					{:else}
 						{#each visibleRecords as record (record.id)}
@@ -475,9 +548,6 @@
 									{#if record.itemId}
 										<span>item: {record.itemId}</span>
 									{/if}
-									{#if record.replayed}
-										<span>replayed</span>
-									{/if}
 									{#if record.intent}
 										<span>intent: {record.intent}</span>
 									{/if}
@@ -501,7 +571,6 @@
 							<div><strong>Target:</strong> {selectedRecord.targetTag || "unknown"}</div>
 							<div><strong>Item:</strong> {selectedRecord.itemId || "n/a"}</div>
 							<div><strong>Canonical:</strong> {selectedRecord.canonicalItemId || "n/a"}</div>
-							<div><strong>Replayed:</strong> {selectedRecord.replayed ? "yes" : "no"}</div>
 							<div><strong>Intent:</strong> {selectedRecord.intent || "n/a"}</div>
 							<div><strong>Duplicates:</strong> {selectedRecord.duplicateCount}</div>
 							<div>
@@ -525,15 +594,7 @@
 	{/if}
 
 	{#if !isMinimized}
-		<div
-			class="pie-section-player-tools-event-debugger__resize-handle"
-			onmousedown={startResize}
-			role="button"
-			tabindex="0"
-			title="Resize window"
-		>
-			◢
-		</div>
+		<PanelResizeHandle onPointerDown={(event: MouseEvent) => pointerController.startResize(event)} />
 	{/if}
 </div>
 
@@ -543,22 +604,22 @@
 		z-index: 9999;
 		background: var(--color-base-100, #fff);
 		color: var(--color-base-content, #1f2937);
-		border: 1px solid var(--color-base-300, #d1d5db);
+		border: 2px solid var(--color-base-300, #d1d5db);
 		border-radius: 8px;
-		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+		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-event-debugger__header {
-		height: 56px;
-		padding: 0 12px;
+		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-event-debugger__header-title {
@@ -567,32 +628,20 @@
 		gap: 8px;
 	}
 
+	.pie-section-player-tools-event-debugger__icon-sm {
+		width: 1rem;
+		height: 1rem;
+	}
+
 	.pie-section-player-tools-event-debugger__title {
 		margin: 0;
 		font-size: 0.95rem;
 		font-weight: 700;
 	}
 
-	.pie-section-player-tools-event-debugger__counter {
-		font-size: 0.75rem;
-		padding: 2px 7px;
-		border-radius: 999px;
-		background: var(--color-primary, #2563eb);
-		color: white;
-	}
-
 	.pie-section-player-tools-event-debugger__header-actions {
 		display: flex;
-		gap: 6px;
-	}
-
-	.pie-section-player-tools-event-debugger__icon-button {
-		border: 1px solid var(--color-base-300, #d1d5db);
-		background: var(--color-base-100, #fff);
-		border-radius: 6px;
-		font-size: 0.8rem;
-		padding: 4px 7px;
-		cursor: pointer;
+		gap: 4px;
 	}
 
 	.pie-section-player-tools-event-debugger__content-shell {
@@ -729,13 +778,4 @@
 		opacity: 0.8;
 	}
 
-	.pie-section-player-tools-event-debugger__resize-handle {
-		position: absolute;
-		right: 6px;
-		bottom: 4px;
-		cursor: nwse-resize;
-		user-select: none;
-		font-size: 0.9rem;
-		opacity: 0.7;
-	}
 </style>