svelte-p5-components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Edwin Zhao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,110 @@
+# svelte-p5-components
+
+Higher-level Svelte 5 components built on [`svelte-p5`](../core). The pieces that almost every sketch-driven app ends up writing.
+
+## Install
+
+```bash
+pnpm add svelte-p5 svelte-p5-components p5
+```
+
+## `<Sketch>`
+
+`<P5Canvas>` plus a `ResizeObserver` on the parent element and automatic `pixelDensity(devicePixelRatio)`. The default you probably want.
+
+```svelte
+<script lang="ts">
+	import { Sketch } from 'svelte-p5-components';
+	import type p5 from 'p5';
+
+	const sketch = (p: p5) => {
+		p.setup = () => p.createCanvas(p.windowWidth, p.windowHeight);
+		p.draw = () => {
+			p.background(240);
+			p.circle(p.mouseX, p.mouseY, 40);
+		};
+	};
+</script>
+
+<div style="width: 100%; height: 400px;">
+	<Sketch {sketch} />
+</div>
+```
+
+## `<FPSMonitor>`
+
+Absolute-positioned FPS readout. Takes the p5 instance and samples `p.frameRate()` every 30 frames by default.
+
+```svelte
+<script lang="ts">
+	import { P5Canvas } from 'svelte-p5';
+	import { FPSMonitor } from 'svelte-p5-components';
+	import type p5 from 'p5';
+
+	let instance = $state<p5 | null>(null);
+</script>
+
+<div style="position: relative;">
+	<P5Canvas {sketch} bind:instance />
+	<FPSMonitor {instance} position="top-right" />
+</div>
+```
+
+## `<SketchDebug>`
+
+Development overlay with mouse position, canvas size, frame count, delta time, and FPS. Same rAF-driven pattern as `<FPSMonitor>`.
+
+## `<DraggableWindow>`
+
+A floating, draggable, resizable panel powered by [neodrag](https://neodrag.dev/). Covers the floating-palette pattern: inspectors, info panels, notes, anything you'd otherwise build on top of a bare drag library.
+
+What it handles for you:
+
+- Drag-by-title-bar only, so buttons in the header stay clickable.
+- Focus to front on click. Every `<DraggableWindow>` on the page shares a z-index manager; clicking raises.
+- Clamps back into view on drag end and on window resize. `minVisible` (default 60px) guarantees a reachable grab handle.
+- Passes extra neodrag plugins through, so you can add grid snapping, axis locks, thresholds without forking the component.
+
+```svelte
+<script lang="ts">
+	import { DraggableWindow } from 'svelte-p5-components';
+	import { grid, axis } from '@neodrag/svelte';
+
+	let showInspector = $state(true);
+</script>
+
+{#if showInspector}
+	<DraggableWindow
+		title="Inspector"
+		initialX={40}
+		initialY={80}
+		width={320}
+		height={240}
+		plugins={[grid([20, 20]), axis('x')]}
+		onClose={() => (showInspector = false)}
+	>
+		<p>Snaps to a 20px grid, slides horizontally only.</p>
+	</DraggableWindow>
+{/if}
+```
+
+## `<DraggableSketch>`
+
+`<DraggableWindow>` with a `<Sketch>` inside. One line for a floating, draggable, resizable p5 sketch. This is the primitive for multi-window visualization suites.
+
+```svelte
+<DraggableSketch
+	title="Speaker Garden"
+	{sketch}
+	initialX={80}
+	initialY={80}
+	width={420}
+	height={320}
+/>
+```
+
+Same `plugins` escape hatch as `<DraggableWindow>`.
+
+## License
+
+MIT

package/dist/DraggableSketch.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import DraggableWindow from './DraggableWindow.svelte';
+	import Sketch from './Sketch.svelte';
+	import type { SketchFn } from 'svelte-p5';
+	import type { Plugin } from '@neodrag/svelte';
+	import type p5 from 'p5';
+
+	interface Props {
+		sketch: SketchFn;
+		title?: string;
+		initialX?: number;
+		initialY?: number;
+		width?: string | number;
+		height?: string | number;
+		minWidth?: string | number;
+		minHeight?: string | number;
+		minVisible?: number;
+		hidpi?: boolean;
+		constrained?: 'viewport' | 'parent' | 'none';
+		/** Extra neodrag plugins appended to the ones DraggableWindow sets internally. Escape hatch for power users (axis, grid, threshold, etc.). */
+		plugins?: Plugin<unknown>[];
+		onClose?: () => void;
+		instance?: p5 | null;
+	}
+
+	let {
+		sketch,
+		title = 'Sketch',
+		initialX = 40,
+		initialY = 40,
+		width = 400,
+		height = 300,
+		minWidth = 200,
+		minHeight = 150,
+		minVisible = 60,
+		hidpi = true,
+		constrained = 'viewport',
+		plugins,
+		onClose,
+		instance = $bindable(null)
+	}: Props = $props();
+</script>
+
+<DraggableWindow
+	{title}
+	{initialX}
+	{initialY}
+	{width}
+	{height}
+	{minWidth}
+	{minHeight}
+	{minVisible}
+	{constrained}
+	{plugins}
+	{onClose}
+>
+	<Sketch {sketch} {hidpi} bind:instance />
+</DraggableWindow>

package/dist/DraggableSketch.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { SketchFn } from 'svelte-p5';
+import type { Plugin } from '@neodrag/svelte';
+import type p5 from 'p5';
+interface Props {
+    sketch: SketchFn;
+    title?: string;
+    initialX?: number;
+    initialY?: number;
+    width?: string | number;
+    height?: string | number;
+    minWidth?: string | number;
+    minHeight?: string | number;
+    minVisible?: number;
+    hidpi?: boolean;
+    constrained?: 'viewport' | 'parent' | 'none';
+    /** Extra neodrag plugins appended to the ones DraggableWindow sets internally. Escape hatch for power users (axis, grid, threshold, etc.). */
+    plugins?: Plugin<unknown>[];
+    onClose?: () => void;
+    instance?: p5 | null;
+}
+declare const DraggableSketch: import("svelte").Component<Props, {}, "instance">;
+type DraggableSketch = ReturnType<typeof DraggableSketch>;
+export default DraggableSketch;

package/dist/DraggableWindow.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+	import {
+		draggable,
+		controls,
+		ControlFrom,
+		bounds,
+		BoundsFrom,
+		events,
+		position,
+		Compartment,
+		type Plugin
+	} from '@neodrag/svelte';
+	import { untrack, type Snippet } from 'svelte';
+	import { registerWindow } from './windowManager.svelte.js';
+
+	type ConstrainTo = 'viewport' | 'parent' | 'none';
+
+	interface Props {
+		title?: string;
+		initialX?: number;
+		initialY?: number;
+		width?: string | number;
+		height?: string | number;
+		minWidth?: string | number;
+		minHeight?: string | number;
+		/** Constrain drag within the viewport, the parent element, or not at all. */
+		constrained?: ConstrainTo;
+		/** Pixels of the window that must remain visible after clamp. Default: 60 */
+		minVisible?: number;
+		/** Extra neodrag plugins appended to the ones the window sets internally. Escape hatch for power users (axis, grid, threshold, etc.). */
+		plugins?: Plugin<unknown>[];
+		/** Called when the close (×) button is clicked. Omit to hide the button. */
+		onClose?: () => void;
+		/** Optional custom content for the title-bar (defaults to `title`). */
+		header?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		title = 'Window',
+		initialX = 40,
+		initialY = 40,
+		width = 480,
+		height = 320,
+		minWidth = 200,
+		minHeight = 120,
+		constrained = 'viewport',
+		minVisible = 60,
+		plugins: userPlugins,
+		onClose,
+		header,
+		children
+	}: Props = $props();
+
+	function toCssSize(v: string | number): string {
+		return typeof v === 'number' ? `${v}px` : v;
+	}
+
+	// Focus management — each window gets a reactive z-index slot shared
+	// across every DraggableWindow on the page. Clicking brings it to top.
+	const win = registerWindow();
+
+	// Live position. Neodrag's `position` plugin drives the element via
+	// transform; we update this state from onDrag AND on resize/clamp,
+	// and the Compartment re-evaluates to push changes back into neodrag.
+	// `untrack` prevents these props from forming a reactive dep — they're
+	// *initial* values only; later position comes from user drag.
+	let pos = $state(untrack(() => ({ x: initialX, y: initialY })));
+
+	// Window size (tracked so we can compute clamp bounds). Updated once
+	// the element mounts and on every resize of the element itself.
+	let size = $state(untrack(() => ({ w: typeof width === 'number' ? width : 480, h: 40 })));
+	let rootEl: HTMLDivElement | null = $state(null);
+
+	function clampToViewport() {
+		if (typeof window === 'undefined') return;
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		// Never allow the titlebar above the viewport top — that's the
+		// "unreachable" case. Allow partial horizontal overflow so narrow
+		// screens don't trap wide windows, but always keep `minVisible`
+		// pixels of the window on-screen for a grab handle.
+		const minX = -(size.w - minVisible);
+		const maxX = vw - minVisible;
+		const minY = 0;
+		const maxY = vh - minVisible;
+		pos = {
+			x: Math.max(minX, Math.min(maxX, pos.x)),
+			y: Math.max(minY, Math.min(maxY, pos.y))
+		};
+	}
+
+	// Keep size fresh (used for clamp math) — ResizeObserver on our own
+	// root element catches CSS resize-from-corner too.
+	$effect(() => {
+		if (!rootEl) return;
+		const el = rootEl;
+		const ro = new ResizeObserver(() => {
+			const r = el.getBoundingClientRect();
+			size = { w: r.width, h: r.height };
+		});
+		ro.observe(el);
+		// seed
+		const r = el.getBoundingClientRect();
+		size = { w: r.width, h: r.height };
+		return () => ro.disconnect();
+	});
+
+	// Re-clamp on window resize — this is the "snap back in when the
+	// viewport shrinks" case.
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		const onResize = () => clampToViewport();
+		window.addEventListener('resize', onResize);
+		return () => window.removeEventListener('resize', onResize);
+	});
+
+	// The neodrag `position` plugin takes a `current: {x, y}` and forces
+	// the element to that transform. Wrapped in a Compartment so updates
+	// to `pos` re-run just this plugin (not the whole plugin list).
+	const posComp = Compartment.of(() => position({ current: pos }));
+
+	const plugins = $derived([
+		posComp,
+		controls({ allow: ControlFrom.selector('.dw-handle') }),
+		events({
+			onDragStart: () => win.focus(),
+			onDrag: ({ offset }) => {
+				pos = { x: offset.x, y: offset.y };
+			},
+			onDragEnd: () => clampToViewport()
+		}),
+		...(constrained === 'viewport' ? [bounds(BoundsFrom.viewport())] : []),
+		...(constrained === 'parent' ? [bounds(BoundsFrom.parent())] : []),
+		...(userPlugins ?? [])
+	]);
+</script>
+
+<div
+	bind:this={rootEl}
+	class="draggable-window"
+	style:width={toCssSize(width)}
+	style:height={toCssSize(height)}
+	style:min-width={toCssSize(minWidth)}
+	style:min-height={toCssSize(minHeight)}
+	style:z-index={win.z}
+	onpointerdowncapture={() => win.focus()}
+	{@attach draggable(() => plugins)}
+>
+	<div class="dw-titlebar">
+		<div class="dw-handle">
+			{#if header}{@render header()}{:else}<span class="dw-title-text">{title}</span>{/if}
+		</div>
+		{#if onClose}
+			<button class="dw-close" onclick={onClose} aria-label="Close window">×</button>
+		{/if}
+	</div>
+	<div class="dw-body">
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.draggable-window {
+		position: fixed;
+		top: 0;
+		left: 0;
+		display: flex;
+		flex-direction: column;
+		background: #fff;
+		border: 1px solid rgba(0, 0, 0, 0.15);
+		border-radius: 8px;
+		box-shadow:
+			0 2px 4px rgba(0, 0, 0, 0.04),
+			0 10px 30px rgba(0, 0, 0, 0.12);
+		overflow: hidden;
+		/* Native resize from the bottom-right corner. */
+		resize: both;
+	}
+	.dw-titlebar {
+		display: flex;
+		align-items: center;
+		padding: 0 4px 0 10px;
+		background: #f3f3f5;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+		user-select: none;
+	}
+	.dw-handle {
+		flex: 1;
+		padding: 6px 0;
+		cursor: move;
+		font:
+			12px/1.4 system-ui,
+			-apple-system,
+			sans-serif;
+		font-weight: 600;
+		color: #333;
+	}
+	.dw-title-text {
+		display: inline-block;
+		vertical-align: middle;
+	}
+	.dw-close {
+		background: none;
+		border: 0;
+		font:
+			18px/1 system-ui,
+			sans-serif;
+		color: #555;
+		cursor: pointer;
+		padding: 2px 8px;
+		border-radius: 4px;
+	}
+	.dw-close:hover {
+		background: rgba(0, 0, 0, 0.06);
+		color: #000;
+	}
+	.dw-body {
+		flex: 1;
+		overflow: hidden;
+		position: relative;
+	}
+</style>

package/dist/DraggableWindow.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type Plugin } from '@neodrag/svelte';
+import { type Snippet } from 'svelte';
+type ConstrainTo = 'viewport' | 'parent' | 'none';
+interface Props {
+    title?: string;
+    initialX?: number;
+    initialY?: number;
+    width?: string | number;
+    height?: string | number;
+    minWidth?: string | number;
+    minHeight?: string | number;
+    /** Constrain drag within the viewport, the parent element, or not at all. */
+    constrained?: ConstrainTo;
+    /** Pixels of the window that must remain visible after clamp. Default: 60 */
+    minVisible?: number;
+    /** Extra neodrag plugins appended to the ones the window sets internally. Escape hatch for power users (axis, grid, threshold, etc.). */
+    plugins?: Plugin<unknown>[];
+    /** Called when the close (×) button is clicked. Omit to hide the button. */
+    onClose?: () => void;
+    /** Optional custom content for the title-bar (defaults to `title`). */
+    header?: Snippet;
+    children?: Snippet;
+}
+declare const DraggableWindow: import("svelte").Component<Props, {}, "">;
+type DraggableWindow = ReturnType<typeof DraggableWindow>;
+export default DraggableWindow;

package/dist/FPSMonitor.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type p5 from 'p5';
+
+	type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+	interface Props {
+		instance: p5 | null;
+		position?: Position;
+		/** How many frames to average FPS over before rendering a new value. Default: 30 */
+		sampleFrames?: number;
+	}
+
+	let { instance, position = 'top-right', sampleFrames = 30 }: Props = $props();
+
+	let fps = $state(0);
+
+	$effect(() => {
+		if (!instance) return;
+		const p = instance;
+		let raf = 0;
+		let frames = 0;
+		const tick = () => {
+			frames += 1;
+			if (frames >= sampleFrames) {
+				fps = Math.round(p.frameRate());
+				frames = 0;
+			}
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	});
+
+	const positionStyles: Record<Position, string> = {
+		'top-left': 'top: 8px; left: 8px;',
+		'top-right': 'top: 8px; right: 8px;',
+		'bottom-left': 'bottom: 8px; left: 8px;',
+		'bottom-right': 'bottom: 8px; right: 8px;'
+	};
+</script>
+
+<div class="fps-monitor" style={positionStyles[position]}>
+	{fps} fps
+</div>
+
+<style>
+	.fps-monitor {
+		position: absolute;
+		padding: 4px 8px;
+		font:
+			11px/1 ui-monospace,
+			'SF Mono',
+			Menlo,
+			monospace;
+		color: #fff;
+		background: rgba(0, 0, 0, 0.65);
+		border-radius: 4px;
+		pointer-events: none;
+		user-select: none;
+		z-index: 10;
+	}
+</style>

package/dist/FPSMonitor.svelte.d.ts

@@ -0,0 +1,11 @@
+import type p5 from 'p5';
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface Props {
+    instance: p5 | null;
+    position?: Position;
+    /** How many frames to average FPS over before rendering a new value. Default: 30 */
+    sampleFrames?: number;
+}
+declare const FPSMonitor: import("svelte").Component<Props, {}, "">;
+type FPSMonitor = ReturnType<typeof FPSMonitor>;
+export default FPSMonitor;

package/dist/Sketch.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { P5Canvas, type SketchFn } from 'svelte-p5';
+	import type p5 from 'p5';
+
+	interface Props {
+		sketch: SketchFn;
+		/** Apply `pixelDensity(devicePixelRatio)` on ready. Default: true */
+		hidpi?: boolean;
+		class?: string;
+		style?: string;
+		instance?: p5 | null;
+		onReady?: (instance: p5) => void;
+	}
+
+	let {
+		sketch,
+		hidpi = true,
+		class: className = '',
+		style = 'display: block; width: 100%; height: 100%; overflow: hidden;',
+		instance = $bindable(null),
+		onReady
+	}: Props = $props();
+
+	let container: HTMLDivElement | null = $state(null);
+
+	function handleReady(p: p5) {
+		if (hidpi && typeof window !== 'undefined') {
+			p.pixelDensity(window.devicePixelRatio);
+		}
+		// Size immediately to the current container dimensions.
+		if (container) {
+			const rect = container.getBoundingClientRect();
+			p.resizeCanvas(Math.max(1, Math.floor(rect.width)), Math.max(1, Math.floor(rect.height)));
+		}
+		onReady?.(p);
+	}
+
+	$effect(() => {
+		if (!container) return;
+		const el = container;
+		const ro = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (!entry || !instance) return;
+			const w = Math.max(1, Math.floor(entry.contentRect.width));
+			const h = Math.max(1, Math.floor(entry.contentRect.height));
+			instance.resizeCanvas(w, h);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+</script>
+
+<div bind:this={container} class={className} {style}>
+	<P5Canvas {sketch} bind:instance onReady={handleReady} />
+</div>

package/dist/Sketch.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type SketchFn } from 'svelte-p5';
+import type p5 from 'p5';
+interface Props {
+    sketch: SketchFn;
+    /** Apply `pixelDensity(devicePixelRatio)` on ready. Default: true */
+    hidpi?: boolean;
+    class?: string;
+    style?: string;
+    instance?: p5 | null;
+    onReady?: (instance: p5) => void;
+}
+declare const Sketch: import("svelte").Component<Props, {}, "instance">;
+type Sketch = ReturnType<typeof Sketch>;
+export default Sketch;

package/dist/SketchDebug.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type p5 from 'p5';
+
+	type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+	interface Props {
+		instance: p5 | null;
+		position?: Position;
+	}
+
+	let { instance, position = 'bottom-right' }: Props = $props();
+
+	let stats = $state({
+		mouseX: 0,
+		mouseY: 0,
+		width: 0,
+		height: 0,
+		frameCount: 0,
+		deltaTime: 0,
+		fps: 0
+	});
+
+	$effect(() => {
+		if (!instance) return;
+		const p = instance;
+		let raf = 0;
+		const tick = () => {
+			stats.mouseX = Math.round(p.mouseX);
+			stats.mouseY = Math.round(p.mouseY);
+			stats.width = p.width;
+			stats.height = p.height;
+			stats.frameCount = p.frameCount;
+			stats.deltaTime = Math.round(p.deltaTime);
+			stats.fps = Math.round(p.frameRate());
+			raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	});
+
+	const positionStyles: Record<Position, string> = {
+		'top-left': 'top: 8px; left: 8px;',
+		'top-right': 'top: 8px; right: 8px;',
+		'bottom-left': 'bottom: 8px; left: 8px;',
+		'bottom-right': 'bottom: 8px; right: 8px;'
+	};
+</script>
+
+<div class="sketch-debug" style={positionStyles[position]}>
+	<div>mouse {stats.mouseX}, {stats.mouseY}</div>
+	<div>size {stats.width}×{stats.height}</div>
+	<div>frame {stats.frameCount}</div>
+	<div>dt {stats.deltaTime}ms · {stats.fps}fps</div>
+</div>
+
+<style>
+	.sketch-debug {
+		position: absolute;
+		padding: 6px 10px;
+		font:
+			10px/1.4 ui-monospace,
+			'SF Mono',
+			Menlo,
+			monospace;
+		color: #fff;
+		background: rgba(0, 0, 0, 0.7);
+		border-radius: 4px;
+		pointer-events: none;
+		user-select: none;
+		z-index: 10;
+	}
+	.sketch-debug > div {
+		margin: 0;
+	}
+</style>

package/dist/SketchDebug.svelte.d.ts

@@ -0,0 +1,9 @@
+import type p5 from 'p5';
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface Props {
+    instance: p5 | null;
+    position?: Position;
+}
+declare const SketchDebug: import("svelte").Component<Props, {}, "">;
+type SketchDebug = ReturnType<typeof SketchDebug>;
+export default SketchDebug;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Sketch } from './Sketch.svelte';
+export { default as FPSMonitor } from './FPSMonitor.svelte';
+export { default as SketchDebug } from './SketchDebug.svelte';
+export { default as DraggableWindow } from './DraggableWindow.svelte';
+export { default as DraggableSketch } from './DraggableSketch.svelte';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as Sketch } from './Sketch.svelte';
+export { default as FPSMonitor } from './FPSMonitor.svelte';
+export { default as SketchDebug } from './SketchDebug.svelte';
+export { default as DraggableWindow } from './DraggableWindow.svelte';
+export { default as DraggableSketch } from './DraggableSketch.svelte';

package/dist/windowManager.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared focus manager for DraggableWindow instances.
+ *
+ * Each DraggableWindow registers once and receives a reactive `z` value
+ * plus a `focus()` method. Calling `focus()` increments a shared counter
+ * and reassigns that window's z-index, bringing it to the front relative
+ * to every other registered window.
+ *
+ * Counter is a single `$state` number; z-index values are small integers
+ * starting at 100. At 1 click/ms it would take ~285,000 years to
+ * overflow `Number.MAX_SAFE_INTEGER`, so no normalization step is needed.
+ */
+export interface WindowHandle {
+    readonly z: number;
+    focus(): void;
+}
+export declare function registerWindow(): WindowHandle;

package/dist/windowManager.svelte.js

@@ -0,0 +1,27 @@
+/**
+ * Shared focus manager for DraggableWindow instances.
+ *
+ * Each DraggableWindow registers once and receives a reactive `z` value
+ * plus a `focus()` method. Calling `focus()` increments a shared counter
+ * and reassigns that window's z-index, bringing it to the front relative
+ * to every other registered window.
+ *
+ * Counter is a single `$state` number; z-index values are small integers
+ * starting at 100. At 1 click/ms it would take ~285,000 years to
+ * overflow `Number.MAX_SAFE_INTEGER`, so no normalization step is needed.
+ */
+let counter = $state(100);
+export function registerWindow() {
+    let myZ = $state(++counter);
+    return {
+        get z() {
+            return myZ;
+        },
+        focus() {
+            // Only reassign if we're not already the top window — avoids a
+            // no-op reactive write when the already-focused window gets clicked.
+            if (myZ !== counter)
+                myZ = ++counter;
+        }
+    };
+}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "svelte-p5-components",
+  "version": "0.1.0",
+  "description": "Higher-level Svelte 5 components built on svelte-p5: responsive canvas, FPS monitor, sketch debug overlay, draggable windows",
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "p5",
+    "p5.js",
+    "draggable",
+    "dashboard",
+    "visualization",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/edwinzhao/svelte-p5.git",
+    "directory": "packages/components"
+  },
+  "homepage": "https://github.com/edwinzhao/svelte-p5/tree/main/packages/components#readme",
+  "bugs": {
+    "url": "https://github.com/edwinzhao/svelte-p5/issues"
+  },
+  "author": "Edwin Zhao",
+  "license": "MIT",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "svelte-package -o dist && publint",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json",
+    "test": "echo \"no tests yet\" && exit 0"
+  },
+  "dependencies": {
+    "@neodrag/svelte": "3.0.0-next.8"
+  },
+  "peerDependencies": {
+    "svelte-p5": "workspace:^",
+    "p5": ">=1.11.0 <3",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "svelte-p5": "workspace:*",
+    "@sveltejs/package": "catalog:",
+    "@sveltejs/vite-plugin-svelte": "catalog:",
+    "@types/p5": "catalog:",
+    "p5": "catalog:",
+    "publint": "catalog:",
+    "svelte": "catalog:",
+    "svelte-check": "catalog:",
+    "typescript": "catalog:"
+  }
+}