Resizable panels for Svelte, animated with Motion

import { Group, Handle, Panel, Separator } from 'svelte-motion-panels'

// The framework-free core underneath, if you want it directly:
import { createPanel, createPanelGroup } from 'motion-panels'

<!--
A styled separator: a hairline on the seam and a small grip box in the middle,
both drawn with pseudo-elements on the Separator itself.
-->
<script lang="ts">
	import { Group, Panel, Separator } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import { COMPACT, Card, Demo, Editor, FILES, Rows, px } from './shared';

	const compact = new MediaQuery(COMPACT, false);
	let width = $derived(compact.current ? 130 : 240);
</script>

<Demo>
	<Group orientation="horizontal">
		<Panel bind:size={width} minSize="20%" maxSize="55%">
			<Card label="Files" size={px(width)}>
				<Rows items={FILES} active="Panel.svelte" />
			</Card>
		</Panel>
		<Separator class="styled-separator" />
		<Panel>
			<Editor />
		</Panel>
	</Group>
</Demo>

<style>
	:global {
		.styled-separator {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 12px;
			outline: none;
		}

		/* The hairline on the seam. */
		.styled-separator::after {
			position: absolute;
			inset-block: 0;
			width: 1px;
			background: var(--border);
			content: '';
			transition: background-color 150ms;
		}

		/* The grip box: six dots drawn with a background pattern. */
		.styled-separator::before {
			z-index: 1;
			box-sizing: border-box;
			width: 12px;
			height: 16px;
			border: 1px solid var(--border);
			border-radius: 2px;
			padding: 1px;
			background:
				radial-gradient(circle, var(--muted-foreground) 0.8px, transparent 1.1px) 0 0 / 4px 4px
					content-box,
				var(--card);
			content: '';
		}

		.styled-separator:is(:hover, [data-crossing])::after {
			background: var(--muted-foreground);
		}

		.styled-separator[data-resizing]::after {
			background: var(--foreground);
		}

		.styled-separator:focus-visible {
			box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
		}
	}
</style>

<script lang="ts">
	import { Group, Panel } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import { COMPACT, Card, Demo, Editor, FILES, PANE, Rows, px } from './shared';

	const compact = new MediaQuery(COMPACT, false);
	// A phone starts from the narrow size; a drag writes back through bind:size.
	let width = $derived(compact.current ? 130 : 240);
</script>

<Demo>
	<Group orientation="horizontal">
		<Panel bind:size={width} minSize="20%" maxSize="55%" class={PANE}>
			<Card label="Files" size={px(width)}>
				<Rows items={FILES} active="Panel.svelte" />
			</Card>
		</Panel>
		<Panel class={PANE}>
			<Editor />
		</Panel>
	</Group>
</Demo>

<script lang="ts">
	import { Group, Panel, Separator } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import { COMPACT, Card, Demo, Editor, FILES, PANE, Rows, SEPARATOR, px } from './shared';

	const compact = new MediaQuery(COMPACT, false);
	let width = $derived(compact.current ? 130 : 240);
</script>

<Demo>
	<Group orientation="horizontal">
		<Panel bind:size={width} minSize="20%" maxSize="55%" class={PANE}>
			<Card label="Files" size={px(width)}>
				<Rows items={FILES} active="Panel.svelte" />
			</Card>
		</Panel>
		<Separator class={SEPARATOR} aria-label="Resize files" />
		<Panel class={PANE}>
			<Editor />
		</Panel>
	</Group>
</Demo>

<script lang="ts">
	import { Group, Panel, Separator } from 'svelte-motion-panels';

	import { Card, Demo, Editor, Lines, OUTPUT, PANE, SEPARATOR, px } from './shared';

	let height = $state(120);
</script>

<Demo>
	<Group orientation="vertical">
		<Panel class={PANE}>
			<Editor />
		</Panel>
		<Separator class={SEPARATOR} aria-label="Resize output" />
		<Panel bind:size={height} minSize={80} maxSize={220} class={PANE}>
			<Card label="Output" size={px(height)}>
				<Lines lines={OUTPUT} terminal />
			</Card>
		</Panel>
	</Group>
</Demo>

<script lang="ts">
	import { Group, Panel, Separator } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import { FOLDS, FOLD_NAMES, fold, timingOf, type Fold } from './shared/folds.js';
	import {
		COMPACT,
		Card,
		Demo,
		Editor,
		PANE,
		Rows,
		SEPARATOR,
		SYMBOLS,
		px
	} from './shared';
	import Button from './ui/Button.svelte';
	import Toggle from './ui/Toggle.svelte';
	import ToggleGroup from './ui/ToggleGroup.svelte';

	const compact = new MediaQuery(COMPACT, false);
	let width = $derived(compact.current ? 140 : 260);
	// Bound, so a drag past half of minSize and Enter on the separator fold it too.
	let collapsed = $state(false);
	let preset = $state<Fold>('flip');
	// Off, so the content remounts on every unfold and its in: transition plays.
	let keepMounted = $state(false);

	const code = $derived(
		[
			'<Panel',
			'  bind:size={width}',
			'  bind:collapsed',
			`  keepMounted={${keepMounted}}`,
			...(timingOf(preset) ? [`  transition={${JSON.stringify(timingOf(preset))}}`] : []),
			'>',
			FOLDS[preset].code ? `  <div ${FOLDS[preset].code}>` : '  <div>',
			'</Panel>'
		]
			.join('\n')
			.replaceAll(/"(\w+)":/g, '$1: ')
			.replaceAll('"', "'")
	);
</script>

<Demo>
	{#snippet controls()}
		<ToggleGroup label="Fold preset" items={FOLD_NAMES} bind:value={preset} />
		<div class="ml-auto flex items-center gap-2">
			<Toggle bind:pressed={keepMounted}>keepMounted</Toggle>
			<Button size="sm" variant="outline" onclick={() => (collapsed = !collapsed)}>
				{collapsed ? 'Expand' : 'Collapse'}
			</Button>
		</div>
	{/snippet}

	<Group orientation="horizontal">
		<Panel
			bind:size={width}
			bind:collapsed
			{keepMounted}
			minSize="22%"
			maxSize="52%"
			transition={timingOf(preset)}
			class={PANE}
		>
			<div class="h-full origin-right" in:fold|global={preset}>
				<Card label="Navigator" size={px(width, collapsed)}>
					<Rows items={SYMBOLS} active="Panel" />
				</Card>
			</div>
		</Panel>
		<Separator class={SEPARATOR} aria-label="Resize navigator" />
		<Panel class={PANE}>
			<Editor />
		</Panel>
	</Group>

	{#snippet footer()}
		<pre
			class="m-0 overflow-x-auto px-3.5 py-3 font-mono text-[13px] text-muted-foreground">{code}</pre>
	{/snippet}
</Demo>

import type { Transition } from 'motion';
import { reducedMotion } from 'motion-panels';
import { backOut, cubicOut, quadOut } from 'svelte/easing';
import type { TransitionConfig } from 'svelte/transition';

/**
 * Fold presets. There are no motion poses on a Svelte Panel: the panel edge
 * takes `transition`, and the content brings its own `in:` transition, which
 * plays as the panel unfolds when `keepMounted={false}` remounts it.
 */
export type Fold = 'fade' | 'scale' | 'flip' | 'snap' | 'spring';

interface Preset {
	/** How the preset reads in the demo footer. */
	code: string;
	enter: TransitionConfig | null;
	transition?: Transition;
}

export const FOLDS: Record<Fold, Preset> = {
	fade: {
		code: 'in:fade={{ duration: 350 }}',
		enter: { duration: 350, css: (t: number) => `opacity: ${t}` }
	},
	scale: {
		code: 'in:scale={{ start: 0.85 }}',
		enter: {
			duration: 250,
			easing: cubicOut,
			css: (t: number) => `transform: scale(${0.85 + 0.15 * t})`
		}
	},
	flip: {
		// No built-in flips a card in, so this one is folds.ts's own `fold` transition.
		code: "in:fold={'flip'}",
		enter: {
			duration: 280,
			easing: quadOut,
			css: (t: number) => `transform: perspective(500px) rotateY(${-75 * (1 - t)}deg)`
		}
	},
	snap: {
		code: '',
		enter: null,
		transition: { duration: 0 }
	},
	spring: {
		code: 'in:scale={{ start: 0.9, duration: 700, easing: backOut }}',
		enter: {
			duration: 700,
			easing: backOut,
			css: (t: number) => `transform: scale(${0.9 + 0.1 * t})`
		},
		transition: { bounce: 0.4, duration: 0.7, type: 'spring' }
	}
};

export const FOLD_NAMES = Object.keys(FOLDS) as Fold[];

/**
 * The content transition for a preset: `<div in:fold={name}>`. Instant under
 * prefers-reduced-motion, like the panel edge itself.
 */
export const fold = (_node: Element, name: Fold): TransitionConfig =>
	(!reducedMotion.get() && FOLDS[name].enter) || { duration: 0 };

/** The panel's own fold timing for a preset, if it sets one. */
export const timingOf = (name: Fold): Transition | undefined => FOLDS[name].transition;

<script lang="ts">
	import { Group, Panel, Separator } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import { COMPACT, Card, Demo, FILES, PANE, Rows, SEPARATOR, px } from './shared';
	import Button from './ui/Button.svelte';
	import Toggle from './ui/Toggle.svelte';

	const PIN_TEXT =
		'Pinning holds this text at the width the panel ends the fold with, so the line breaks are measured once instead of on every frame. Turn the pin off and watch the words rewrap the whole way through. Real content pays that cost on every frame too: a code editor relaying out, a virtualised table remeasuring its rows.';

	const compact = new MediaQuery(COMPACT, false);
	let width = $derived(compact.current ? 130 : 240);
	let collapsed = $state(false);
	let pinned = $state(true);
</script>

<Demo>
	{#snippet controls()}
		<Toggle bind:pressed={pinned}>pin {pinned ? 'on' : 'off'}</Toggle>
		<Button size="sm" variant="outline" class="ml-auto" onclick={() => (collapsed = !collapsed)}>
			{collapsed ? 'Expand' : 'Collapse'}
		</Button>
	{/snippet}

	<Group orientation="horizontal">
		<Panel bind:size={width} bind:collapsed minSize="20%" maxSize="55%" class={PANE}>
			<Card label="Sidebar" size={px(width, collapsed)}>
				<Rows items={FILES} active="Group.svelte" />
			</Card>
		</Panel>
		<Separator class={SEPARATOR} aria-label="Resize sidebar" />
		<Panel pin={pinned}>
			<p class="overflow-hidden px-4 py-3 text-[13px] leading-[1.7] text-muted-foreground">
				{PIN_TEXT}
			</p>
		</Panel>
	</Group>
</Demo>

<script lang="ts">
	import { Group, Panel, Separator } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import {
		COMPACT,
		Card,
		Demo,
		Editor,
		FILES,
		Lines,
		OUTPUT,
		PANE,
		Rows,
		SEPARATOR,
		px
	} from './shared';

	const compact = new MediaQuery(COMPACT, false);
	let sidebar = $derived(compact.current ? 120 : 200);
	let terminal = $state(100);
</script>

<Demo>
	<Group orientation="horizontal">
		<Panel bind:size={sidebar} minSize="18%" maxSize="45%" class={PANE}>
			<Card label="Files" size={px(sidebar)}>
				<Rows items={FILES} active="Panel.svelte" />
			</Card>
		</Panel>
		<Separator class={SEPARATOR} aria-label="Resize files" />
		<Panel>
			<Group orientation="vertical">
				<Panel class={PANE}>
					<Editor />
				</Panel>
				<Separator class={SEPARATOR} aria-label="Resize console" />
				<Panel bind:size={terminal} minSize={60} maxSize={180} class={PANE}>
					<Card label="Console" size={px(terminal)}>
						<Lines lines={OUTPUT} terminal />
					</Card>
				</Panel>
			</Group>
		</Panel>
	</Group>
</Demo>

<script lang="ts">
	import { Group, Panel, Separator } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import { fold, timingOf } from './shared/folds.js';
	import {
		COMPACT,
		Card,
		Demo,
		Editor,
		FILES,
		Lines,
		OUTPUT,
		PANE,
		Rows,
		SEPARATOR,
		SYMBOLS,
		px
	} from './shared';
	import Toggle from './ui/Toggle.svelte';

	const compact = new MediaQuery(COMPACT, false);
	let files = $derived(compact.current ? 92 : 140);
	let outline = $derived(compact.current ? 84 : 120);
	let terminal = $state(90);
	// Bound both ways: the toggles fold the panels, and so do drags and Enter.
	const hidden = $state({ files: false, outline: false, terminal: false });
</script>

<Demo tall>
	{#snippet controls()}
		<Toggle bind:pressed={hidden.files}>files (flip)</Toggle>
		<Toggle bind:pressed={hidden.outline}>outline (fade)</Toggle>
		<Toggle bind:pressed={hidden.terminal}>terminal (spring)</Toggle>
	{/snippet}

	<Group orientation="horizontal">
		<Panel
			bind:size={files}
			bind:collapsed={hidden.files}
			keepMounted={false}
			minSize="12%"
			maxSize="30%"
			class={PANE}
		>
			<div class="h-full origin-right" in:fold|global={'flip'}>
				<Card label="Files" size={px(files, hidden.files)}>
					<Rows items={FILES} active="Separator.svelte" />
				</Card>
			</div>
		</Panel>
		<Separator class={SEPARATOR} aria-label="Resize files" />
		<Panel>
			<Group orientation="vertical">
				<Panel>
					<Group orientation="horizontal">
						<Panel class={PANE}>
							<Editor />
						</Panel>
						<Separator class={SEPARATOR} aria-label="Resize outline" />
						<Panel
							bind:size={outline}
							bind:collapsed={hidden.outline}
							keepMounted={false}
							minSize="12%"
							maxSize="30%"
							class={PANE}
						>
							<div class="h-full" in:fold|global={'fade'}>
								<Card label="Outline" size={px(outline, hidden.outline)}>
									<Rows items={SYMBOLS} active="Separator" />
								</Card>
							</div>
						</Panel>
					</Group>
				</Panel>
				<Separator class={SEPARATOR} aria-label="Resize terminal" />
				<Panel
					bind:size={terminal}
					bind:collapsed={hidden.terminal}
					keepMounted={false}
					minSize={60}
					maxSize={160}
					transition={timingOf('spring')}
					class={PANE}
				>
					<div class="h-full origin-bottom" in:fold|global={'spring'}>
						<Card label="Terminal" size={px(terminal, hidden.terminal)}>
							<Lines lines={OUTPUT} terminal />
						</Card>
					</div>
				</Panel>
			</Group>
		</Panel>
	</Group>
</Demo>

<script lang="ts">
	import { Group, Handle, Panel, Separator } from 'svelte-motion-panels';
	import { MediaQuery } from 'svelte/reactivity';

	import {
		COMPACT,
		Card,
		Demo,
		FILES,
		Lines,
		PANE,
		Rows,
		SEPARATOR,
		SOURCE,
		SYMBOLS
	} from './shared';

	const compact = new MediaQuery(COMPACT, false);
	let order = $state(['files', 'outline']);
	let files = $derived(compact.current ? 120 : 180);
	let outline = $derived(compact.current ? 96 : 130);

	// One keyed each over the whole row: a reorder swaps two keys, so Svelte
	// moves the two panel elements instead of remounting them.
	const row = $derived([order[0], 'seam-a', 'workspace', 'seam-b', order[1]]);
</script>

{#snippet grip()}
	<Handle
		class="flex flex-none cursor-grab items-center gap-[3px] rounded-sm px-1 py-1.5 outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 active:cursor-grabbing"
	>
		{#each [0, 1, 2] as dot (dot)}
			<span class="size-[3px] rounded-full bg-muted-foreground/60"></span>
		{/each}
	</Handle>
{/snippet}

<Demo>
	<Group {order} onOrderChange={(next) => (order = next)}>
		{#each row as item (item)}
			{#if item === 'workspace'}
				<Panel class={PANE}>
					<Card label="Workspace.svelte" head={grip}>
						<Lines lines={SOURCE} />
					</Card>
				</Panel>
			{:else if item.startsWith('seam')}
				<Separator class={SEPARATOR} />
			{:else if item === 'files'}
				<Panel value="files" bind:size={files} minSize={96} maxSize="40%" class={PANE}>
					<Card label="Files" head={grip}>
						<Rows items={FILES} active="Panel.svelte" />
					</Card>
				</Panel>
			{:else}
				<Panel value="outline" bind:size={outline} minSize={96} maxSize="40%" class={PANE}>
					<Card label="Outline" head={grip}>
						<Rows items={SYMBOLS} active="Separator" />
					</Card>
				</Panel>
			{/if}
		{/each}
	</Group>

	{#snippet footer()}
		<p class="px-3 py-2 font-mono text-[11px] text-muted-foreground">order: [{order.join(', ')}]</p>
	{/snippet}
</Demo>

<script lang="ts">
	import { Group, Panel } from 'svelte-motion-panels';

	import { Card, Demo, Editor, FILES, PANE, Rows, SYMBOLS } from './shared';

	// Percentages in, percentages out: a drag reports a percent string back.
	let left = $state<`${number}%`>('25%');
	let right = $state<`${number}%`>('25%');
</script>

<Demo>
	<Group orientation="horizontal">
		<Panel bind:size={left} minSize="14%" maxSize="35%" class={PANE}>
			<Card label="Files" size={left}>
				<Rows items={FILES} active="+page.svelte" />
			</Card>
		</Panel>
		<Panel class={PANE}>
			<Editor />
		</Panel>
		<Panel bind:size={right} minSize="14%" maxSize="35%" class={PANE}>
			<Card label="Outline" size={right}>
				<Rows items={SYMBOLS} />
			</Card>
		</Panel>
	</Group>
</Demo>

[role='separator'] {
  position: relative; /* its slot is zero wide: lift the grip over both panels */
  z-index: 1;
}

[role='separator'][aria-orientation='vertical'] {
  width: 14px;
}

[role='separator']::after {
  border-radius: 999px;
  background: var(--border);
  content: '';
}

[role='separator']:hover::after,
[role='separator'][data-crossing]::after {
  background: var(--muted-foreground);
}

[role='separator'][data-resizing]::after {
  background: var(--primary);
}

[role='separator'][data-motion-panels-edge]::after {
  display: none;
}

[role='separator'][data-motion-panels-edge]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}