@pie-players/pie-section-player-tools-shared 0.3.3

package/dist/section-controller.d.ts

@@ -0,0 +1,19 @@
+export type SectionControllerKeyLike = {
+    sectionId?: string;
+    attemptId?: string;
+};
+export type SectionControllerLifecycleEventLike = {
+    type?: "ready" | "disposed" | string;
+    key?: SectionControllerKeyLike;
+};
+export type ToolkitCoordinatorWithSectionController<TController> = {
+    getSectionController?: (args: {
+        sectionId: string;
+        attemptId?: string;
+    }) => TController | undefined;
+    onSectionControllerLifecycle?: (listener: (event: SectionControllerLifecycleEventLike) => void) => () => void;
+};
+export declare function optionalIdsEqual(left?: string, right?: string): boolean;
+export declare function isMatchingSectionControllerLifecycleEvent(event: SectionControllerLifecycleEventLike, sectionId: string, attemptId?: string): boolean;
+export declare function getSectionControllerFromCoordinator<TController>(coordinator: ToolkitCoordinatorWithSectionController<TController> | null | undefined, sectionId: string, attemptId?: string): TController | null;
+//# sourceMappingURL=section-controller.d.ts.map

package/dist/section-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section-controller.d.ts","sourceRoot":"","sources":["../section-controller.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAG;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG;IACjD,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACrC,GAAG,CAAC,EAAE,wBAAwB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,uCAAuC,CAAC,WAAW,IAAI;IAClE,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE;QAC7B,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACnB,KAAK,WAAW,GAAG,SAAS,CAAC;IAC9B,4BAA4B,CAAC,EAAE,CAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,mCAAmC,KAAK,IAAI,KAC1D,MAAM,IAAI,CAAC;CAChB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,wBAAgB,yCAAyC,CACxD,KAAK,EAAE,mCAAmC,EAC1C,SAAS,EAAE,MAAM,EACjB,SAAS,CAAC,EAAE,MAAM,GAChB,OAAO,CAKT;AAED,wBAAgB,mCAAmC,CAAC,WAAW,EAC9D,WAAW,EACR,uCAAuC,CAAC,WAAW,CAAC,GACpD,IAAI,GACJ,SAAS,EACZ,SAAS,EAAE,MAAM,EACjB,SAAS,CAAC,EAAE,MAAM,GAChB,WAAW,GAAG,IAAI,CAQpB"}

package/dist/vite.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import('vite').UserConfig;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/dist/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AAKA,wBA8BG"}

package/floating-panel.ts

@@ -0,0 +1,165 @@
+export type FloatingPanelState = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+};
+
+export type FloatingPanelViewportSizing = {
+	widthRatio: number;
+	heightRatio: number;
+	minWidth: number;
+	maxWidth: number;
+	minHeight: number;
+	maxHeight: number;
+	alignX: "left" | "center" | "right";
+	alignY: "top" | "center" | "bottom";
+	paddingX?: number;
+	paddingY?: number;
+};
+
+export function computePanelSizeFromViewport(
+	viewport: { width: number; height: number },
+	sizing: FloatingPanelViewportSizing,
+): FloatingPanelState {
+	const clamp = (value: number, min: number, max: number) =>
+		Math.max(min, Math.min(value, max));
+	const width = clamp(
+		Math.round(viewport.width * sizing.widthRatio),
+		sizing.minWidth,
+		sizing.maxWidth,
+	);
+	const height = clamp(
+		Math.round(viewport.height * sizing.heightRatio),
+		sizing.minHeight,
+		sizing.maxHeight,
+	);
+	const paddingX = sizing.paddingX ?? 16;
+	const paddingY = sizing.paddingY ?? 16;
+	const maxX = Math.max(paddingX, viewport.width - width - paddingX);
+	const maxY = Math.max(paddingY, viewport.height - height - paddingY);
+	const x =
+		sizing.alignX === "left"
+			? paddingX
+			: sizing.alignX === "right"
+				? maxX
+				: Math.max(paddingX, Math.round((viewport.width - width) / 2));
+	const y =
+		sizing.alignY === "top"
+			? paddingY
+			: sizing.alignY === "bottom"
+				? maxY
+				: Math.max(paddingY, Math.round((viewport.height - height) / 2));
+	return { x, y, width, height };
+}
+
+type PointerControllerArgs = {
+	getState: () => FloatingPanelState;
+	setState: (next: FloatingPanelState) => void;
+	minWidth: number;
+	minHeight: number;
+	padding?: number;
+};
+
+export type FloatingPanelPointerController = {
+	startDrag: (event: MouseEvent) => void;
+	startResize: (event: MouseEvent) => void;
+	stop: () => void;
+};
+
+export function createFloatingPanelPointerController(
+	args: PointerControllerArgs,
+): FloatingPanelPointerController {
+	const padding = args.padding ?? 0;
+	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;
+
+	const onDrag = (event: MouseEvent) => {
+		if (!isDragging) return;
+		const state = args.getState();
+		const deltaX = event.clientX - dragStartX;
+		const deltaY = event.clientY - dragStartY;
+		const maxX = Math.max(padding, window.innerWidth - state.width - padding);
+		const maxY = Math.max(padding, window.innerHeight - 100 - padding);
+		args.setState({
+			...state,
+			x: Math.max(padding, Math.min(dragStartPanelX + deltaX, maxX)),
+			y: Math.max(padding, Math.min(dragStartPanelY + deltaY, maxY)),
+		});
+	};
+
+	const onResize = (event: MouseEvent) => {
+		if (!isResizing) return;
+		const state = args.getState();
+		const deltaX = event.clientX - resizeStartX;
+		const deltaY = event.clientY - resizeStartY;
+		const maxWidth = Math.max(
+			args.minWidth,
+			window.innerWidth - state.x - padding,
+		);
+		const maxHeight = Math.max(
+			args.minHeight,
+			window.innerHeight - state.y - padding,
+		);
+		args.setState({
+			...state,
+			width: Math.max(
+				args.minWidth,
+				Math.min(resizeStartWidth + deltaX, maxWidth),
+			),
+			height: Math.max(
+				args.minHeight,
+				Math.min(resizeStartHeight + deltaY, maxHeight),
+			),
+		});
+	};
+
+	const stopDrag = () => {
+		isDragging = false;
+		document.removeEventListener("mousemove", onDrag);
+		document.removeEventListener("mouseup", stopDrag);
+	};
+
+	const stopResize = () => {
+		isResizing = false;
+		document.removeEventListener("mousemove", onResize);
+		document.removeEventListener("mouseup", stopResize);
+	};
+
+	return {
+		startDrag(event: MouseEvent) {
+			isDragging = true;
+			dragStartX = event.clientX;
+			dragStartY = event.clientY;
+			const state = args.getState();
+			dragStartPanelX = state.x;
+			dragStartPanelY = state.y;
+			document.addEventListener("mousemove", onDrag);
+			document.addEventListener("mouseup", stopDrag);
+		},
+		startResize(event: MouseEvent) {
+			isResizing = true;
+			resizeStartX = event.clientX;
+			resizeStartY = event.clientY;
+			const state = args.getState();
+			resizeStartWidth = state.width;
+			resizeStartHeight = state.height;
+			document.addEventListener("mousemove", onResize);
+			document.addEventListener("mouseup", stopResize);
+			event.preventDefault();
+			event.stopPropagation();
+		},
+		stop() {
+			stopDrag();
+			stopResize();
+		},
+	};
+}

package/index.ts

@@ -0,0 +1,17 @@
+export { default as PanelWindowControls } from "./PanelWindowControls.svelte";
+export { default as PanelResizeHandle } from "./PanelResizeHandle.svelte";
+export {
+	createFloatingPanelPointerController,
+	computePanelSizeFromViewport,
+	type FloatingPanelPointerController,
+	type FloatingPanelState,
+	type FloatingPanelViewportSizing,
+} from "./floating-panel.js";
+export {
+	getSectionControllerFromCoordinator,
+	isMatchingSectionControllerLifecycleEvent,
+	optionalIdsEqual,
+	type SectionControllerLifecycleEventLike,
+	type SectionControllerKeyLike,
+	type ToolkitCoordinatorWithSectionController,
+} from "./section-controller.js";

package/package.json

@@ -0,0 +1,71 @@
+{
+	"name": "@pie-players/pie-section-player-tools-shared",
+	"version": "0.3.3",
+	"type": "module",
+	"description": "Shared UI and helpers for PIE section-player debug tools",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/pie-framework/pie-players.git",
+		"directory": "packages/section-player-tools-shared"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"keywords": [
+		"pie",
+		"section-player",
+		"debugger",
+		"shared",
+		"web-component"
+	],
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"svelte": "./index.ts"
+		},
+		"./PanelWindowControls.svelte": {
+			"types": "./dist/PanelWindowControls.svelte.d.ts",
+			"svelte": "./PanelWindowControls.svelte"
+		},
+		"./PanelResizeHandle.svelte": {
+			"types": "./dist/PanelResizeHandle.svelte.d.ts",
+			"svelte": "./PanelResizeHandle.svelte"
+		}
+	},
+	"files": [
+		"dist",
+		"*.svelte",
+		"*.ts",
+		"package.json"
+	],
+	"license": "MIT",
+	"dependencies": {
+		"@pie-players/pie-theme": "0.3.3"
+	},
+	"types": "./dist/index.d.ts",
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"typecheck": "tsc --noEmit",
+		"lint": "biome check PanelWindowControls.svelte floating-panel.ts section-controller.ts index.ts vite.config.ts package.json"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.3.10",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"svelte": "^5.53.7",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1",
+		"vite-plugin-dts": "^4.5.4"
+	},
+	"homepage": "https://github.com/pie-framework/pie-players/tree/master/packages/section-player-tools-shared#readme",
+	"bugs": {
+		"url": "https://github.com/pie-framework/pie-players/issues"
+	},
+	"engines": {
+		"node": ">=20.0.0"
+	},
+	"sideEffects": false
+}

package/section-controller.ts

@@ -0,0 +1,51 @@
+export type SectionControllerKeyLike = {
+	sectionId?: string;
+	attemptId?: string;
+};
+
+export type SectionControllerLifecycleEventLike = {
+	type?: "ready" | "disposed" | string;
+	key?: SectionControllerKeyLike;
+};
+
+export type ToolkitCoordinatorWithSectionController<TController> = {
+	getSectionController?: (args: {
+		sectionId: string;
+		attemptId?: string;
+	}) => TController | undefined;
+	onSectionControllerLifecycle?: (
+		listener: (event: SectionControllerLifecycleEventLike) => void,
+	) => () => void;
+};
+
+export function optionalIdsEqual(left?: string, right?: string): boolean {
+	return (left || undefined) === (right || undefined);
+}
+
+export function isMatchingSectionControllerLifecycleEvent(
+	event: SectionControllerLifecycleEventLike,
+	sectionId: string,
+	attemptId?: string,
+): boolean {
+	const eventSectionId = event?.key?.sectionId || "";
+	const eventAttemptId = event?.key?.attemptId || undefined;
+	if (eventSectionId !== sectionId) return false;
+	return optionalIdsEqual(eventAttemptId, attemptId);
+}
+
+export function getSectionControllerFromCoordinator<TController>(
+	coordinator:
+		| ToolkitCoordinatorWithSectionController<TController>
+		| null
+		| undefined,
+	sectionId: string,
+	attemptId?: string,
+): TController | null {
+	if (!coordinator?.getSectionController || !sectionId) return null;
+	return (
+		coordinator.getSectionController({
+			sectionId,
+			attemptId,
+		}) || null
+	);
+}

package/vite.config.ts

@@ -0,0 +1,36 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+export default defineConfig({
+	plugins: [
+		svelte({
+			emitCss: false,
+		}),
+		dts({
+			tsconfigPath: resolve(__dirname, "tsconfig.json"),
+			outDir: "dist",
+			insertTypesEntry: true,
+			include: ["**/*.ts", "**/*.svelte"],
+		}),
+	],
+	build: {
+		lib: {
+			entry: resolve(__dirname, "index.ts"),
+			name: "PieSectionPlayerToolsShared",
+			fileName: () => "index.js",
+			formats: ["es"],
+		},
+		outDir: "dist",
+		emptyOutDir: true,
+		target: "es2020",
+		minify: "esbuild",
+		sourcemap: false,
+		rollupOptions: {
+			output: {
+				format: "es",
+			},
+		},
+	},
+});