@pie-players/pie-section-player-tools-shared 0.3.11 → 0.3.13

package/PanelResizeHandle.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	let {
 		onPointerDown,
-		handleClass = "absolute bottom-0 right-0 w-4 h-4 cursor-se-resize",
-		iconClass = "w-full h-full text-base-content/30",
+		handleClass = "pie-panel-resize-handle",
+		iconClass = "pie-panel-resize-icon",
 	} = $props<{
 		onPointerDown?: (event: MouseEvent) => void;
 		handleClass?: string;
@@ -16,6 +16,7 @@
 	role="button"
 	tabindex="0"
 	title="Resize window"
+	aria-label="Resize window"
 >
 	<svg class={iconClass} viewBox="0 0 16 16" fill="currentColor">
 		<path d="M16 16V14H14V16H16Z" />
@@ -23,3 +24,29 @@
 		<path d="M13 16V14H11V16H13Z" />
 	</svg>
 </div>
+
+<style>
+	.pie-panel-resize-handle {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		width: 12px;
+		height: 12px;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: nwse-resize;
+		opacity: 0.82;
+		z-index: 2;
+	}
+
+	.pie-panel-resize-handle:hover {
+		opacity: 1;
+	}
+
+	.pie-panel-resize-icon {
+		width: 100%;
+		height: 100%;
+		color: color-mix(in srgb, var(--color-base-content, #334155) 30%, transparent);
+	}
+</style>

package/SharedFloatingPanel.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+	import { onDestroy, onMount, untrack } from "svelte";
+	import type { Snippet } from "svelte";
+	import PanelResizeHandle from "./PanelResizeHandle.svelte";
+	import PanelWindowControls from "./PanelWindowControls.svelte";
+	import {
+		claimNextFloatingPanelZIndex,
+		computePanelSizeFromViewport,
+		createFloatingPanelPointerController,
+		type FloatingPanelViewportSizing,
+	} from "./floating-panel.js";
+
+	let {
+		title,
+		ariaLabel = "Drag panel",
+		initialSizing,
+		minWidth = 320,
+		minHeight = 260,
+		defaultMinimized = false,
+		onClose,
+		className = "",
+		bodyClass = "",
+		headerClass = "",
+		children,
+		icon,
+		headerActions,
+	}: {
+		title: string;
+		ariaLabel?: string;
+		initialSizing: FloatingPanelViewportSizing;
+		minWidth?: number;
+		minHeight?: number;
+		defaultMinimized?: boolean;
+		onClose?: () => void;
+		className?: string;
+		bodyClass?: string;
+		headerClass?: string;
+		children?: Snippet;
+		icon?: Snippet;
+		headerActions?: Snippet;
+	} = $props();
+
+	let panelX = $state(16);
+	let panelY = $state(16);
+	let panelWidth = $state(420);
+	let panelHeight = $state(480);
+	let panelZIndex = $state(claimNextFloatingPanelZIndex());
+	let isMinimized = $state(untrack(() => defaultMinimized));
+
+	const pointerController = createFloatingPanelPointerController({
+		getState: () => ({
+			x: panelX,
+			y: panelY,
+			width: panelWidth,
+			height: panelHeight,
+		}),
+		setState: (next) => {
+			panelX = next.x;
+			panelY = next.y;
+			panelWidth = next.width;
+			panelHeight = next.height;
+		},
+		minWidth: untrack(() => minWidth),
+		minHeight: untrack(() => minHeight),
+		onFocus: () => {
+			panelZIndex = claimNextFloatingPanelZIndex();
+		},
+	});
+
+	function bringToFront(): void {
+		panelZIndex = claimNextFloatingPanelZIndex();
+	}
+
+	onMount(() => {
+		const initial = computePanelSizeFromViewport(
+			{ width: window.innerWidth, height: window.innerHeight },
+			initialSizing,
+		);
+		panelX = initial.x;
+		panelY = initial.y;
+		panelWidth = initial.width;
+		panelHeight = initial.height;
+	});
+
+	onDestroy(() => {
+		pointerController.stop();
+	});
+
+	const resolvedPanelClass = $derived.by(() =>
+		["pie-shared-floating-panel", className || ""].join(" ").trim(),
+	);
+	const resolvedBodyClass = $derived.by(() =>
+		["pie-shared-floating-panel__body", bodyClass || ""].join(" ").trim(),
+	);
+	const resolvedHeaderClass = $derived.by(() =>
+		["pie-shared-floating-panel__header", headerClass || ""].join(" ").trim(),
+	);
+</script>
+
+<section
+	class={resolvedPanelClass}
+	style={`left: ${panelX}px; top: ${panelY}px; width: ${panelWidth}px; z-index: ${panelZIndex}; ${
+		isMinimized ? "height: auto;" : `height: ${panelHeight}px;`
+	}`}
+>
+	<header
+		class={resolvedHeaderClass}
+		onmousedown={(event: MouseEvent) => {
+			bringToFront();
+			pointerController.startDrag(event);
+		}}
+		role="button"
+		tabindex="0"
+		aria-label={ariaLabel}
+	>
+		<div class="pie-shared-floating-panel__header-main">
+			<div class="pie-shared-floating-panel__header-title-wrap">
+				{@render icon?.()}
+				<h3 class="pie-shared-floating-panel__title">{title}</h3>
+			</div>
+			{@render headerActions?.()}
+		</div>
+		<div class="pie-shared-floating-panel__header-controls">
+			<PanelWindowControls
+				minimized={isMinimized}
+				onToggle={() => (isMinimized = !isMinimized)}
+				onClose={onClose}
+			/>
+		</div>
+	</header>
+
+	{#if !isMinimized}
+		<div class={resolvedBodyClass}>
+			{@render children?.()}
+		</div>
+		<PanelResizeHandle onPointerDown={(event: MouseEvent) => pointerController.startResize(event)} />
+	{/if}
+</section>
+
+<style>
+	.pie-shared-floating-panel {
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		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-shared-floating-panel__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-shared-floating-panel__header-main {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+		flex: 1;
+	}
+
+	.pie-shared-floating-panel__header-title-wrap {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		min-width: 0;
+	}
+
+	.pie-shared-floating-panel__title {
+		margin: 0;
+		font-size: 0.95rem;
+		font-weight: 700;
+	}
+
+	.pie-shared-floating-panel__header-controls {
+		display: flex;
+		gap: 4px;
+	}
+
+	.pie-shared-floating-panel__body {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+</style>

package/dist/SharedFloatingPanel.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponent as default } from 'svelte';

package/dist/floating-panel.d.ts

@@ -4,6 +4,7 @@ export type FloatingPanelState = {
     width: number;
     height: number;
 };
+export declare function claimNextFloatingPanelZIndex(): number;
 export type FloatingPanelViewportSizing = {
     widthRatio: number;
     heightRatio: number;
@@ -26,6 +27,7 @@ type PointerControllerArgs = {
     minWidth: number;
     minHeight: number;
     padding?: number;
+    onFocus?: () => void;
 };
 export type FloatingPanelPointerController = {
     startDrag: (event: MouseEvent) => void;

package/dist/floating-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"floating-panel.d.ts","sourceRoot":"","sources":["../floating-panel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,4BAA4B,CAC3C,QAAQ,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC3C,MAAM,EAAE,2BAA2B,GACjC,kBAAkB,CA8BpB;AAED,KAAK,qBAAqB,GAAG;IAC5B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC5C,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,MAAM,IAAI,CAAC;CACjB,CAAC;AAEF,wBAAgB,oCAAoC,CACnD,IAAI,EAAE,qBAAqB,GACzB,8BAA8B,CA6FhC"}
+{"version":3,"file":"floating-panel.d.ts","sourceRoot":"","sources":["../floating-panel.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAChC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AASF,wBAAgB,4BAA4B,IAAI,MAAM,CAUrD;AAED,MAAM,MAAM,2BAA2B,GAAG;IACzC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,4BAA4B,CAC3C,QAAQ,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC3C,MAAM,EAAE,2BAA2B,GACjC,kBAAkB,CA8BpB;AAED,KAAK,qBAAqB,GAAG;IAC5B,QAAQ,EAAE,MAAM,kBAAkB,CAAC;IACnC,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC5C,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,MAAM,IAAI,CAAC;CACjB,CAAC;AAEF,wBAAgB,oCAAoC,CACnD,IAAI,EAAE,qBAAqB,GACzB,8BAA8B,CA+FhC"}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 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 { default as SharedFloatingPanel } from './SharedFloatingPanel.svelte';
+export { createFloatingPanelPointerController, computePanelSizeFromViewport, claimNextFloatingPanelZIndex, type FloatingPanelPointerController, type FloatingPanelState, type FloatingPanelViewportSizing, } from './floating-panel.js';
 export { getSectionControllerFromCoordinator, isMatchingSectionControllerLifecycleEvent, optionalIdsEqual, type SectionControllerLifecycleEventLike, type SectionControllerKeyLike, type ToolkitCoordinatorWithSectionController, } from './section-controller.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EACN,oCAAoC,EACpC,4BAA4B,EAC5B,KAAK,8BAA8B,EACnC,KAAK,kBAAkB,EACvB,KAAK,2BAA2B,GAChC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACN,mCAAmC,EACnC,yCAAyC,EACzC,gBAAgB,EAChB,KAAK,mCAAmC,EACxC,KAAK,wBAAwB,EAC7B,KAAK,uCAAuC,GAC5C,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EACN,oCAAoC,EACpC,4BAA4B,EAC5B,4BAA4B,EAC5B,KAAK,8BAA8B,EACnC,KAAK,kBAAkB,EACvB,KAAK,2BAA2B,GAChC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACN,mCAAmC,EACnC,yCAAyC,EACzC,gBAAgB,EAChB,KAAK,mCAAmC,EACxC,KAAK,wBAAwB,EAC7B,KAAK,uCAAuC,GAC5C,MAAM,yBAAyB,CAAC"}