svelte-p5-components 0.3.0 → 0.4.1

package/dist/EntityToggleList.test.svelte.js

@@ -0,0 +1,69 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import EntityToggleList, {} from './EntityToggleList.svelte';
+// NOTE: Several structural assertions (counting `.entity-toggle-list__item`
+// elements, clicking a label by its text) hit a happy-dom + Svelte 5
+// runes interaction where entities inside a keyed `{#each}` over a
+// $derived don't render under the test harness even though they render
+// correctly in real browsers. A Playwright smoke pass in
+// `tests/examples/` covers the render-and-interact path end-to-end.
+//
+// The tests below verify what happy-dom can reliably observe: the root
+// element, the heading, the data attribute that reflects group presence,
+// and the expander button that appears when maxVisible truncates.
+describe('<EntityToggleList>', () => {
+    it('mounts without throwing with an empty entities array', () => {
+        const { container } = render(EntityToggleList, { props: { entities: [] } });
+        expect(container.querySelector('.entity-toggle-list')).not.toBeNull();
+    });
+    it('renders a heading when provided', () => {
+        const { container } = render(EntityToggleList, {
+            props: { entities: [], heading: 'Speakers' }
+        });
+        expect(container.querySelector('.entity-toggle-list__heading')?.textContent).toBe('Speakers');
+    });
+    it('data-has-groups is false when no entity declares a group', () => {
+        const entities = [
+            { id: 'a', label: 'A', color: '#000' },
+            { id: 'b', label: 'B', color: '#111' }
+        ];
+        const { container } = render(EntityToggleList, { props: { entities } });
+        expect(container.querySelector('.entity-toggle-list')?.getAttribute('data-has-groups')).toBe('false');
+    });
+    it('data-has-groups is true when any entity declares a group', () => {
+        const entities = [
+            { id: 'a', label: 'A', color: '#000', group: 'G1' },
+            { id: 'b', label: 'B', color: '#111' }
+        ];
+        const { container } = render(EntityToggleList, { props: { entities } });
+        expect(container.querySelector('.entity-toggle-list')?.getAttribute('data-has-groups')).toBe('true');
+    });
+    it('group labels render for grouped entities in insertion order', () => {
+        const entities = [
+            { id: '1', label: 'A1', color: '#000', group: 'A' },
+            { id: '2', label: 'B1', color: '#000', group: 'B' },
+            { id: '3', label: 'A2', color: '#000', group: 'A' }
+        ];
+        const { container } = render(EntityToggleList, { props: { entities } });
+        const labels = [...container.querySelectorAll('.entity-toggle-list__group-label')].map((n) => n.textContent);
+        expect(labels).toEqual(['A', 'B']);
+    });
+    it('renders a "+N more" expander when maxVisible truncates', () => {
+        const entities = Array.from({ length: 10 }, (_, i) => ({
+            id: `u${i}`,
+            label: `U${i}`,
+            color: '#000'
+        }));
+        const { container } = render(EntityToggleList, { props: { entities, maxVisible: 3 } });
+        const expander = container.querySelector('.entity-toggle-list__expand');
+        expect(expander?.textContent).toContain('+7 more');
+    });
+    it('omits the expander when no truncation is happening', () => {
+        const entities = [
+            { id: 'a', label: 'A', color: '#000' },
+            { id: 'b', label: 'B', color: '#000' }
+        ];
+        const { container } = render(EntityToggleList, { props: { entities, maxVisible: 5 } });
+        expect(container.querySelector('.entity-toggle-list__expand')).toBeNull();
+    });
+});

package/dist/HoverTooltip.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	// Position-aware tooltip, anchored to a screen-space point.
+	//
+	// Canvas apps hover hit-test results and want a floating tooltip that
+	// tracks the pointer, flips to the other side when it would hit the
+	// viewport edge, and doesn't swallow canvas input. HoverTooltip is the
+	// minimum-viable version: pass `anchor` coordinates (page space) and
+	// `show`; the tooltip measures itself after mount and picks the side
+	// that fits.
+	//
+	// No floating-ui dependency — the edge-flip logic is tiny and handles
+	// the common cases. If you need multi-reference positioning, portal
+	// nesting, or collision detection against arbitrary boundaries, reach
+	// for @floating-ui/dom directly.
+	//
+	// See the package README for a usage example.
+	interface Props {
+		/** Tooltip content. */
+		children: Snippet;
+		/** Anchor point in client (page) coordinates. */
+		anchor: { x: number; y: number } | null;
+		/** Whether the tooltip is visible. */
+		show?: boolean;
+		/** Offset between the anchor and the tooltip's nearest edge, in px. Default: 12. */
+		offset?: number;
+		/** Draw a small triangle pointer from the tooltip toward the anchor. Default: true. */
+		triangle?: boolean;
+		/** Preferred side when there's room. Default: `'top'`. */
+		preferredSide?: 'top' | 'bottom' | 'left' | 'right';
+		class?: string;
+	}
+
+	let {
+		children,
+		anchor,
+		show = true,
+		offset = 12,
+		triangle = true,
+		preferredSide = 'top',
+		class: className = ''
+	}: Props = $props();
+
+	type Side = 'top' | 'bottom' | 'left' | 'right';
+
+	let tooltipEl: HTMLDivElement | null = $state(null);
+	let measuredWidth = $state(0);
+	let measuredHeight = $state(0);
+
+	// Remeasure whenever content changes. The ResizeObserver handles dynamic
+	// content (e.g. tooltip copy updating mid-hover).
+	$effect(() => {
+		if (!tooltipEl) return;
+		const el = tooltipEl;
+		const ro = new ResizeObserver(() => {
+			const r = el.getBoundingClientRect();
+			measuredWidth = r.width;
+			measuredHeight = r.height;
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+
+	const placement = $derived.by<{ left: number; top: number; side: Side } | null>(() => {
+		if (!anchor) return null;
+		if (typeof window === 'undefined') return null;
+
+		const vpW = window.innerWidth;
+		const vpH = window.innerHeight;
+		const { x, y } = anchor;
+
+		const fits: Record<Side, boolean> = {
+			top: y - measuredHeight - offset >= 0,
+			bottom: y + measuredHeight + offset <= vpH,
+			left: x - measuredWidth - offset >= 0,
+			right: x + measuredWidth + offset <= vpW
+		};
+
+		// Order of preference: requested side first, then opposite axis, then fallbacks.
+		const order: Side[] =
+			preferredSide === 'top'
+				? ['top', 'bottom', 'right', 'left']
+				: preferredSide === 'bottom'
+					? ['bottom', 'top', 'right', 'left']
+					: preferredSide === 'left'
+						? ['left', 'right', 'top', 'bottom']
+						: ['right', 'left', 'top', 'bottom'];
+
+		const chosen = order.find((s) => fits[s]) ?? preferredSide;
+
+		let left = 0;
+		let top = 0;
+		if (chosen === 'top') {
+			left = x - measuredWidth / 2;
+			top = y - measuredHeight - offset;
+		} else if (chosen === 'bottom') {
+			left = x - measuredWidth / 2;
+			top = y + offset;
+		} else if (chosen === 'left') {
+			left = x - measuredWidth - offset;
+			top = y - measuredHeight / 2;
+		} else {
+			left = x + offset;
+			top = y - measuredHeight / 2;
+		}
+
+		// Clamp within viewport so the tooltip can't spill over an edge when the
+		// anchor is jammed against one.
+		left = Math.max(4, Math.min(vpW - measuredWidth - 4, left));
+		top = Math.max(4, Math.min(vpH - measuredHeight - 4, top));
+
+		return { left, top, side: chosen };
+	});
+</script>
+
+{#if show && anchor}
+	<div
+		bind:this={tooltipEl}
+		class="hover-tooltip {className}"
+		data-side={placement?.side ?? preferredSide}
+		style:left="{placement?.left ?? 0}px"
+		style:top="{placement?.top ?? 0}px"
+		style:visibility={placement ? 'visible' : 'hidden'}
+		role="tooltip"
+	>
+		{@render children()}
+		{#if triangle}
+			<div class="hover-tooltip__arrow" data-side={placement?.side ?? preferredSide}></div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.hover-tooltip {
+		position: fixed;
+		z-index: 1000;
+		pointer-events: none;
+		padding: 6px 10px;
+		max-width: 320px;
+		font:
+			12px/1.4 system-ui,
+			-apple-system,
+			Segoe UI,
+			sans-serif;
+		color: var(--tooltip-fg, #fff);
+		background: var(--tooltip-bg, rgba(17, 24, 39, 0.95));
+		border-radius: 6px;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+		user-select: none;
+	}
+
+	.hover-tooltip__arrow {
+		position: absolute;
+		width: 0;
+		height: 0;
+		border: 6px solid transparent;
+	}
+
+	.hover-tooltip__arrow[data-side='top'] {
+		left: 50%;
+		bottom: -12px;
+		transform: translateX(-50%);
+		border-top-color: var(--tooltip-bg, rgba(17, 24, 39, 0.95));
+	}
+	.hover-tooltip__arrow[data-side='bottom'] {
+		left: 50%;
+		top: -12px;
+		transform: translateX(-50%);
+		border-bottom-color: var(--tooltip-bg, rgba(17, 24, 39, 0.95));
+	}
+	.hover-tooltip__arrow[data-side='left'] {
+		top: 50%;
+		right: -12px;
+		transform: translateY(-50%);
+		border-left-color: var(--tooltip-bg, rgba(17, 24, 39, 0.95));
+	}
+	.hover-tooltip__arrow[data-side='right'] {
+		top: 50%;
+		left: -12px;
+		transform: translateY(-50%);
+		border-right-color: var(--tooltip-bg, rgba(17, 24, 39, 0.95));
+	}
+</style>

package/dist/HoverTooltip.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Tooltip content. */
+    children: Snippet;
+    /** Anchor point in client (page) coordinates. */
+    anchor: {
+        x: number;
+        y: number;
+    } | null;
+    /** Whether the tooltip is visible. */
+    show?: boolean;
+    /** Offset between the anchor and the tooltip's nearest edge, in px. Default: 12. */
+    offset?: number;
+    /** Draw a small triangle pointer from the tooltip toward the anchor. Default: true. */
+    triangle?: boolean;
+    /** Preferred side when there's room. Default: `'top'`. */
+    preferredSide?: 'top' | 'bottom' | 'left' | 'right';
+    class?: string;
+}
+declare const HoverTooltip: import("svelte").Component<Props, {}, "">;
+type HoverTooltip = ReturnType<typeof HoverTooltip>;
+export default HoverTooltip;

package/dist/HoverTooltip.test.svelte.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/HoverTooltip.test.svelte.js

@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import HoverTooltip from './HoverTooltip.svelte';
+const snippet = (html) => createRawSnippet(() => ({ render: () => html }));
+describe('<HoverTooltip>', () => {
+    it('does not render when show is false', () => {
+        const { container } = render(HoverTooltip, {
+            props: {
+                children: snippet('<span>HELLO</span>'),
+                anchor: { x: 100, y: 100 },
+                show: false
+            }
+        });
+        expect(container.querySelector('.hover-tooltip')).toBeNull();
+    });
+    it('does not render when anchor is null even if show is true', () => {
+        const { container } = render(HoverTooltip, {
+            props: {
+                children: snippet('<span>HELLO</span>'),
+                anchor: null,
+                show: true
+            }
+        });
+        expect(container.querySelector('.hover-tooltip')).toBeNull();
+    });
+    it('renders children content when visible', () => {
+        const { container } = render(HoverTooltip, {
+            props: {
+                children: snippet('<span>HELLO</span>'),
+                anchor: { x: 100, y: 100 },
+                show: true
+            }
+        });
+        expect(container.querySelector('.hover-tooltip')?.textContent).toContain('HELLO');
+    });
+    it('applies role=tooltip for assistive tech', () => {
+        const { container } = render(HoverTooltip, {
+            props: {
+                children: snippet('<span>x</span>'),
+                anchor: { x: 50, y: 50 },
+                show: true
+            }
+        });
+        expect(container.querySelector('[role="tooltip"]')).not.toBeNull();
+    });
+    it('renders a triangle arrow by default and omits it when triangle=false', () => {
+        const { container: withArrow } = render(HoverTooltip, {
+            props: {
+                children: snippet('<span>x</span>'),
+                anchor: { x: 50, y: 50 },
+                show: true
+            }
+        });
+        expect(withArrow.querySelector('.hover-tooltip__arrow')).not.toBeNull();
+        const { container: noArrow } = render(HoverTooltip, {
+            props: {
+                children: snippet('<span>x</span>'),
+                anchor: { x: 50, y: 50 },
+                show: true,
+                triangle: false
+            }
+        });
+        expect(noArrow.querySelector('.hover-tooltip__arrow')).toBeNull();
+    });
+});

package/dist/SplitPane.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy } from 'svelte';
+
+	/**
+	 * Two-panel resizable split. Accepts snippets for each pane and a
+	 * bindable `sizes` tuple of percentages that always sums to 100.
+	 *
+	 * Orientation follows CSS flex convention:
+	 * - `orientation: 'vertical'` → `flex-direction: column` → panels stacked
+	 *   top/bottom, divider is a horizontal bar.
+	 * - `orientation: 'horizontal'` → panels side-by-side, divider is vertical.
+	 *
+	 * Colors and divider thickness are themable via CSS custom properties
+	 * (see the style block) so consumers can match their app palette without
+	 * overriding selectors.
+	 *
+	 * @example
+	 * ```svelte
+	 * <SplitPane orientation="horizontal" bind:sizes={[60, 40]} minSize={200}>
+	 *   {#snippet first()}<Sketch {sketch} bind:instance />{/snippet}
+	 *   {#snippet second()}<MyEditor />{/snippet}
+	 * </SplitPane>
+	 * ```
+	 */
+	interface Props {
+		/** `vertical` = stacked, `horizontal` = side-by-side. Default: `vertical`. */
+		orientation?: 'horizontal' | 'vertical';
+		/** Panel sizes as percentages (sum to 100). Bindable. */
+		sizes?: [number, number];
+		/** Minimum size in px for each panel. Default: 100. */
+		minSize?: number;
+		/** When true, one panel collapses fully to show only the other. */
+		collapsed?: boolean;
+		/** Which panel collapses when `collapsed` is true. Default: `second`. */
+		collapsedPanel?: 'first' | 'second';
+		first?: Snippet;
+		second?: Snippet;
+		/** Fired when the divider starts being dragged. */
+		ondragstart?: () => void;
+		/** Fired when the divider is released. */
+		ondragend?: () => void;
+		/** Fired on every size update (drag move, keyboard arrow). */
+		onresize?: (data: { sizes: [number, number] }) => void;
+		class?: string;
+	}
+
+	let {
+		orientation = 'vertical',
+		sizes = $bindable<[number, number]>([60, 40]),
+		minSize = 100,
+		collapsed = false,
+		collapsedPanel = 'second',
+		first,
+		second,
+		ondragstart,
+		ondragend,
+		onresize,
+		class: className = ''
+	}: Props = $props();
+
+	let container: HTMLElement;
+	let isDragging = $state(false);
+	let startPos = 0;
+	let startSizes: [number, number] = [...sizes];
+
+	const flexDirection = $derived(orientation === 'vertical' ? 'column' : 'row');
+	const cursorStyle = $derived(orientation === 'vertical' ? 'row-resize' : 'col-resize');
+
+	function containerExtent(): number {
+		if (!container) return 0;
+		return orientation === 'vertical' ? container.offsetHeight : container.offsetWidth;
+	}
+
+	function beginDrag(clientX: number, clientY: number) {
+		if (collapsed) return;
+		isDragging = true;
+		startPos = orientation === 'vertical' ? clientY : clientX;
+		startSizes = [...sizes];
+		document.addEventListener('pointermove', handlePointerMove);
+		document.addEventListener('pointerup', handlePointerUp);
+		document.body.style.cursor = cursorStyle;
+		document.body.style.userSelect = 'none';
+		ondragstart?.();
+	}
+
+	function handlePointerDown(event: PointerEvent) {
+		beginDrag(event.clientX, event.clientY);
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		if (!isDragging) return;
+
+		const currentPos = orientation === 'vertical' ? event.clientY : event.clientX;
+		const delta = currentPos - startPos;
+		const extent = containerExtent();
+		if (extent === 0) return;
+
+		const deltaPercent = (delta / extent) * 100;
+		let next0 = startSizes[0] + deltaPercent;
+		let next1 = startSizes[1] - deltaPercent;
+		const minPercent = (minSize / extent) * 100;
+
+		if (next0 < minPercent) {
+			next0 = minPercent;
+			next1 = 100 - minPercent;
+		} else if (next1 < minPercent) {
+			next1 = minPercent;
+			next0 = 100 - minPercent;
+		}
+
+		sizes = [next0, next1];
+		onresize?.({ sizes });
+	}
+
+	function handlePointerUp() {
+		isDragging = false;
+		document.removeEventListener('pointermove', handlePointerMove);
+		document.removeEventListener('pointerup', handlePointerUp);
+		document.body.style.cursor = '';
+		document.body.style.userSelect = '';
+		ondragend?.();
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (collapsed) return;
+
+		const step = 2;
+		let next: [number, number] = [...sizes];
+
+		if (orientation === 'vertical') {
+			if (event.key === 'ArrowUp') next[0] = Math.max(10, sizes[0] - step);
+			else if (event.key === 'ArrowDown') next[0] = Math.min(90, sizes[0] + step);
+			else return;
+		} else {
+			if (event.key === 'ArrowLeft') next[0] = Math.max(10, sizes[0] - step);
+			else if (event.key === 'ArrowRight') next[0] = Math.min(90, sizes[0] + step);
+			else return;
+		}
+		next[1] = 100 - next[0];
+
+		if (next[0] !== sizes[0]) {
+			sizes = next;
+			onresize?.({ sizes });
+			event.preventDefault();
+		}
+	}
+
+	onDestroy(() => {
+		if (typeof document !== 'undefined') {
+			document.removeEventListener('pointermove', handlePointerMove);
+			document.removeEventListener('pointerup', handlePointerUp);
+		}
+	});
+
+	const firstSize = $derived.by(() => {
+		if (!collapsed) return `${sizes[0]}%`;
+		return collapsedPanel === 'first' ? '0%' : '100%';
+	});
+	const secondSize = $derived.by(() => {
+		if (!collapsed) return `${sizes[1]}%`;
+		return collapsedPanel === 'second' ? '0%' : '100%';
+	});
+	const sizeProp = $derived(orientation === 'vertical' ? 'height' : 'width');
+</script>
+
+<div
+	class="split-pane {className}"
+	class:vertical={orientation === 'vertical'}
+	class:horizontal={orientation === 'horizontal'}
+	bind:this={container}
+	style="flex-direction: {flexDirection};"
+>
+	<div class="split-pane__panel" style="{sizeProp}: {firstSize};">
+		{@render first?.()}
+	</div>
+
+	{#if !collapsed}
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<div
+			class="split-pane__divider"
+			class:is-dragging={isDragging}
+			role="separator"
+			tabindex="0"
+			aria-orientation={orientation}
+			aria-valuenow={Math.round(sizes[0])}
+			aria-valuemin="10"
+			aria-valuemax="90"
+			onpointerdown={handlePointerDown}
+			onkeydown={handleKeyDown}
+		>
+			<div class="split-pane__grip"></div>
+		</div>
+	{/if}
+
+	<div class="split-pane__panel" style="{sizeProp}: {secondSize};">
+		{@render second?.()}
+	</div>
+</div>
+
+<style>
+	.split-pane {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+
+		/* Themeable via custom properties. Defaults match a neutral gray scale. */
+		--split-divider-bg: #e5e7eb;
+		--split-divider-bg-active: #d1d5db;
+		--split-divider-bg-focus: #3b82f6;
+		--split-grip-bg: #9ca3af;
+		--split-grip-bg-active: #6b7280;
+		--split-divider-size: 8px;
+		--split-grip-length: 40px;
+		--split-grip-thickness: 4px;
+	}
+
+	.split-pane__panel {
+		overflow: hidden;
+		position: relative;
+		min-width: 0;
+		min-height: 0;
+		flex-shrink: 0;
+	}
+
+	.split-pane__divider {
+		flex: 0 0 auto;
+		background-color: var(--split-divider-bg);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.15s;
+	}
+
+	.split-pane__divider:hover,
+	.split-pane__divider.is-dragging {
+		background-color: var(--split-divider-bg-active);
+	}
+
+	.split-pane__divider:focus-visible {
+		outline: 2px solid var(--split-divider-bg-focus);
+		outline-offset: -2px;
+	}
+
+	.vertical .split-pane__divider {
+		width: 100%;
+		height: var(--split-divider-size);
+		cursor: row-resize;
+	}
+
+	.horizontal .split-pane__divider {
+		width: var(--split-divider-size);
+		height: 100%;
+		cursor: col-resize;
+	}
+
+	.split-pane__grip {
+		background-color: var(--split-grip-bg);
+		border-radius: 2px;
+	}
+
+	.vertical .split-pane__grip {
+		width: var(--split-grip-length);
+		height: var(--split-grip-thickness);
+	}
+
+	.horizontal .split-pane__grip {
+		width: var(--split-grip-thickness);
+		height: var(--split-grip-length);
+	}
+
+	.split-pane__divider:hover .split-pane__grip,
+	.split-pane__divider.is-dragging .split-pane__grip {
+		background-color: var(--split-grip-bg-active);
+	}
+</style>

package/dist/SplitPane.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { Snippet } from 'svelte';
+/**
+ * Two-panel resizable split. Accepts snippets for each pane and a
+ * bindable `sizes` tuple of percentages that always sums to 100.
+ *
+ * Orientation follows CSS flex convention:
+ * - `orientation: 'vertical'` → `flex-direction: column` → panels stacked
+ *   top/bottom, divider is a horizontal bar.
+ * - `orientation: 'horizontal'` → panels side-by-side, divider is vertical.
+ *
+ * Colors and divider thickness are themable via CSS custom properties
+ * (see the style block) so consumers can match their app palette without
+ * overriding selectors.
+ *
+ * @example
+ * ```svelte
+ * <SplitPane orientation="horizontal" bind:sizes={[60, 40]} minSize={200}>
+ *   {#snippet first()}<Sketch {sketch} bind:instance />{/snippet}
+ *   {#snippet second()}<MyEditor />{/snippet}
+ * </SplitPane>
+ * ```
+ */
+interface Props {
+    /** `vertical` = stacked, `horizontal` = side-by-side. Default: `vertical`. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Panel sizes as percentages (sum to 100). Bindable. */
+    sizes?: [number, number];
+    /** Minimum size in px for each panel. Default: 100. */
+    minSize?: number;
+    /** When true, one panel collapses fully to show only the other. */
+    collapsed?: boolean;
+    /** Which panel collapses when `collapsed` is true. Default: `second`. */
+    collapsedPanel?: 'first' | 'second';
+    first?: Snippet;
+    second?: Snippet;
+    /** Fired when the divider starts being dragged. */
+    ondragstart?: () => void;
+    /** Fired when the divider is released. */
+    ondragend?: () => void;
+    /** Fired on every size update (drag move, keyboard arrow). */
+    onresize?: (data: {
+        sizes: [number, number];
+    }) => void;
+    class?: string;
+}
+declare const SplitPane: import("svelte").Component<Props, {}, "sizes">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;

package/dist/SplitPane.test.svelte.d.ts

@@ -0,0 +1 @@
+export {};