sheer-ui 0.0.0

package/src/lib/internal/paneforge/internal/types.ts

@@ -0,0 +1,33 @@
+export type Direction = 'horizontal' | 'vertical';
+
+export type PaneOnCollapse = () => void;
+export type PaneOnExpand = () => void;
+export type PaneOnResize = (size: number, prevSize: number | undefined) => void;
+
+export type PaneCallbacks = {
+	onCollapse?: PaneOnCollapse;
+	onExpand?: PaneOnExpand;
+	onResize?: PaneOnResize;
+};
+
+export type PaneConstraints = {
+	collapsedSize?: number | undefined;
+	collapsible?: boolean | undefined;
+	defaultSize?: number | undefined;
+	maxSize?: number | undefined;
+	minSize?: number | undefined;
+};
+
+export type PaneTransitionState = '' | 'collapsing' | 'expanding';
+
+export type DragState = {
+	dragHandleId: string;
+	groupSizeInPixels: number;
+	initialCursorPosition: number;
+	initialLayout: number[];
+};
+
+export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent;
+export type ResizeHandler = (event: ResizeEvent) => void;
+
+export type PaneResizeHandleOnDragging = (isDragging: boolean) => void;

package/src/lib/internal/paneforge/internal/utils/adjust-layout.ts

@@ -0,0 +1,122 @@
+import type { PaneConstraints } from '../types.js';
+import { areNumbersAlmostEqual, compareNumbersWithTolerance } from './compare.js';
+import { resizePane } from './resize.js';
+
+/**
+ * Adjusts the layout of panes based on the delta of the resize handle.
+ * All units must be in percentages; pixel values should be pre-converted.
+ *
+ * Credit: https://github.com/bvaughn/react-resizable-panels
+ */
+export function adjustLayoutByDelta({
+	delta,
+	layout: prevLayout,
+	paneConstraints,
+	pivotIndices: [firstPivotIndex, secondPivotIndex],
+	trigger,
+}: {
+	delta: number;
+	layout: number[];
+	paneConstraints: PaneConstraints[];
+	pivotIndices: [number, number];
+	trigger: 'imperative-api' | 'keyboard' | 'mouse-or-touch';
+}): number[] {
+	if (areNumbersAlmostEqual(delta, 0)) return prevLayout;
+	if (prevLayout.length !== paneConstraints.length) return prevLayout;
+	if (
+		!Number.isInteger(firstPivotIndex) ||
+		!Number.isInteger(secondPivotIndex) ||
+		firstPivotIndex < 0 ||
+		secondPivotIndex < 0 ||
+		secondPivotIndex !== firstPivotIndex + 1 ||
+		firstPivotIndex >= prevLayout.length ||
+		secondPivotIndex >= prevLayout.length
+	) {
+		return prevLayout;
+	}
+	for (let index = 0; index < prevLayout.length; index++) {
+		if (prevLayout[index] == null || paneConstraints[index] == null) return prevLayout;
+	}
+
+	const nextLayout = [...prevLayout];
+	const safeSize = (paneIndex: number, initialSize: number) => resizePane({ paneConstraints, paneIndex, initialSize });
+
+	// Keyboard resizes snap collapsible panes through their full collapsed<->min transition,
+	// rather than gating on the halfway threshold (which could prevent expansion entirely).
+	if (trigger === 'keyboard')
+		for (const expand of [true, false]) {
+			const index = delta < 0 === expand ? secondPivotIndex : firstPivotIndex;
+			const constraints = paneConstraints[index]!;
+			if (!constraints.collapsible) continue;
+
+			const { collapsedSize = 0, minSize = 0 } = constraints;
+			const prevSize = prevLayout[index]!;
+			if (!areNumbersAlmostEqual(prevSize, expand ? collapsedSize : minSize)) continue;
+
+			const localDelta = expand ? minSize - prevSize : prevSize - collapsedSize;
+			if (compareNumbersWithTolerance(localDelta, Math.abs(delta)) > 0) delta = delta < 0 ? -localDelta : localDelta;
+		}
+
+	// Clamp the requested delta to the max the panes opposite the pivot can actually yield.
+	{
+		const increment = delta < 0 ? 1 : -1;
+		let maxAvailableDelta = 0;
+		for (let index = delta < 0 ? secondPivotIndex : firstPivotIndex; index >= 0 && index < paneConstraints.length; index += increment) {
+			const prevSize = prevLayout[index]!;
+			maxAvailableDelta += safeSize(index, 100) - prevSize;
+		}
+		const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+		delta = delta < 0 ? -minAbsDelta : minAbsDelta;
+	}
+
+	// Subtract the delta from panes on one side of the pivot, within their constraints.
+	let deltaApplied = 0;
+	{
+		let index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+		while (index >= 0 && index < paneConstraints.length) {
+			const prevSize = prevLayout[index]!;
+
+			const next = safeSize(index, prevSize - (Math.abs(delta) - Math.abs(deltaApplied)));
+			if (!areNumbersAlmostEqual(prevSize, next)) {
+				deltaApplied += prevSize - next;
+				nextLayout[index] = next;
+
+				if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), undefined, { numeric: true }) >= 0) break;
+			}
+			index += delta < 0 ? -1 : 1;
+		}
+	}
+
+	// Nothing moved — bail (e.g. drag past a pane's boundary).
+	if (areNumbersAlmostEqual(deltaApplied, 0)) return prevLayout;
+
+	// Add the applied delta to the pivot pane on the other side.
+	{
+		const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+		const prevSize = prevLayout[pivotIndex]!;
+
+		const unsafeSize = prevSize + deltaApplied;
+		const size = safeSize(pivotIndex, unsafeSize);
+		nextLayout[pivotIndex] = size;
+
+		// Expanding/contracting one pane flipped another's collapsed state — redistribute the remainder.
+		if (!areNumbersAlmostEqual(size, unsafeSize)) {
+			let deltaRemaining = unsafeSize - size;
+			let index = pivotIndex;
+			while (index >= 0 && index < paneConstraints.length) {
+				const prevSize = nextLayout[index]!;
+
+				const next = safeSize(index, prevSize + deltaRemaining);
+				if (!areNumbersAlmostEqual(prevSize, next)) {
+					deltaRemaining -= next - prevSize;
+					nextLayout[index] = next;
+				}
+				if (areNumbersAlmostEqual(deltaRemaining, 0)) break;
+				index += delta > 0 ? -1 : 1;
+			}
+		}
+	}
+
+	const totalSize = nextLayout.reduce((total, size) => total + size, 0);
+	return areNumbersAlmostEqual(totalSize, 100) ? nextLayout : prevLayout;
+}

package/src/lib/internal/paneforge/internal/utils/aria.ts

@@ -0,0 +1,36 @@
+import type { PaneState } from '../../paneforge.svelte.js';
+
+/**
+ * Calculates `aria-valuemax`/`aria-valuemin`/`aria-valuenow` for the pane at
+ * `pivotIndices[0]`, accounting for the min/max sizes of all other panes.
+ */
+export const calculateAriaValues = ({
+	layout,
+	panesArray,
+	pivotIndices: [firstIndex],
+}: {
+	layout: number[];
+	panesArray: PaneState[];
+	pivotIndices: number[];
+}) => {
+	let currentMinSize = 0;
+	let currentMaxSize = 100;
+	let totalMinSize = 0;
+	let totalMaxSize = 0;
+
+	panesArray.forEach(({ constraints: { maxSize = 100, minSize = 0 } }, i) => {
+		if (i === firstIndex) {
+			currentMinSize = minSize;
+			currentMaxSize = maxSize;
+		} else {
+			totalMinSize += minSize;
+			totalMaxSize += maxSize;
+		}
+	});
+
+	return {
+		valueMax: Math.min(currentMaxSize, 100 - totalMinSize),
+		valueMin: Math.max(currentMinSize, 100 - totalMaxSize),
+		valueNow: layout[firstIndex!],
+	};
+};

package/src/lib/internal/paneforge/internal/utils/compare.ts

@@ -0,0 +1,15 @@
+import { PRECISION } from '../constants.js';
+
+/**
+ * Compares two numbers for equality with a given fractional precision.
+ */
+export const areNumbersAlmostEqual = (actual: number, expected: number, digits = PRECISION) =>
+	actual.toFixed(digits) === expected.toFixed(digits);
+/**
+ * Compares two numbers with a given tolerance.
+ *
+ * @returns `-1` if `actual` is less than `expected`, `0` if they are equal,
+ * and `1` if `actual` is greater than `expected`.
+ */
+export const compareNumbersWithTolerance = (actual: number, expected: number, digits = PRECISION) =>
+	Math.sign(Number(actual.toFixed(digits)) - Number(expected.toFixed(digits)));

package/src/lib/internal/paneforge/internal/utils/is.ts

@@ -0,0 +1,13 @@
+import type { ResizeEvent } from '../types.js';
+
+export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
+	return event.type === 'keydown';
+}
+
+export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
+	return event.type.startsWith('mouse');
+}
+
+export function isTouchEvent(event: ResizeEvent): event is TouchEvent {
+	return event.type.startsWith('touch');
+}

package/src/lib/internal/paneforge/internal/utils/resize.ts

@@ -0,0 +1,31 @@
+import { PRECISION } from '../constants.js';
+import type { PaneConstraints } from '../types.js';
+import { compareNumbersWithTolerance } from './compare.js';
+
+/**
+ * If the pane is collapsible, snaps below-min sizes to `collapsedSize` or
+ * `minSize` based on the halfway point; otherwise clamps to `minSize`.
+ */
+const getAdjustedSizeForCollapsible = (size: number, collapsible: boolean | undefined, collapsedSize: number, minSize: number) =>
+	!collapsible ? minSize : compareNumbersWithTolerance(size, (collapsedSize + minSize) / 2) < 0 ? collapsedSize : minSize;
+
+/** Resizes a pane based on its constraints. */
+export const resizePane = ({
+	paneConstraints,
+	paneIndex,
+	initialSize,
+}: {
+	paneConstraints: PaneConstraints[];
+	paneIndex: number;
+	initialSize: number;
+}): number => {
+	const constraints = paneConstraints[paneIndex];
+	if (!constraints) return initialSize;
+	const { collapsedSize = 0, collapsible, maxSize = 100, minSize = 0 } = constraints;
+
+	const size =
+		compareNumbersWithTolerance(initialSize, minSize) < 0
+			? getAdjustedSizeForCollapsible(initialSize, collapsible, collapsedSize, minSize)
+			: initialSize;
+	return Number(Math.min(maxSize, size).toFixed(PRECISION));
+};

package/src/lib/internal/paneforge/internal/utils/storage.ts

@@ -0,0 +1,116 @@
+import { LOCAL_STORAGE_DEBOUNCE_INTERVAL } from '../constants.js';
+import type { PaneState } from '../../paneforge.svelte.js';
+
+export interface PaneConfigState {
+	expandToSizes: { [paneId: string]: number };
+	layout: number[];
+}
+
+export interface SerializedPaneGroupState {
+	[paneIds: string]: PaneConfigState;
+}
+
+export interface PaneGroupStorage {
+	getItem: (name: string) => string | null;
+	setItem: (name: string, value: string) => void;
+}
+
+/**
+ * Initializes the storage object with the appropriate getItem
+ * and setItem functions depending on the environment (browser or not).
+ */
+export const initializeStorage = (storageObject: PaneGroupStorage): void => {
+	try {
+		if (typeof localStorage === 'undefined') throw new TypeError('localStorage is not supported in this environment');
+		storageObject.getItem = (name) => localStorage.getItem(name);
+		storageObject.setItem = (name, value) => localStorage.setItem(name, value);
+	} catch (err) {
+		console.error(err);
+		storageObject.getItem = () => null;
+		storageObject.setItem = () => {};
+	}
+};
+
+const getPaneGroupKey = (autoSaveId: string) => `paneforge:${autoSaveId}`;
+
+/** Key derived from pane order + constraints, stable across reorderings of the array. */
+const getPaneKey = (panes: PaneState[]) =>
+	panes
+		.map(({ opts, constraints }) =>
+			opts.order.current ? `${opts.order.current}:${JSON.stringify(constraints)}` : JSON.stringify(constraints),
+		)
+		.sort()
+		.join(',');
+
+/** Loads the serialized pane group state from storage, or null if missing/corrupt. */
+const loadSerializedPaneGroupState = (autoSaveId: string, storage: PaneGroupStorage): SerializedPaneGroupState | null => {
+	try {
+		const parsed = JSON.parse(storage.getItem(getPaneGroupKey(autoSaveId)) || '');
+		if (typeof parsed === 'object' && parsed !== null) return parsed as SerializedPaneGroupState;
+	} catch {
+		// noop
+	}
+	return null;
+};
+
+/** Loads the pane group state from storage, or null if not found. */
+export const loadPaneGroupState = (autoSaveId: string, panesArray: PaneState[], storage: PaneGroupStorage): PaneConfigState | null =>
+	(loadSerializedPaneGroupState(autoSaveId, storage) || {})[getPaneKey(panesArray)] || null;
+
+/** Saves the pane group state to storage. */
+export const savePaneGroupState = (
+	autoSaveId: string,
+	panesArray: PaneState[],
+	paneSizesBeforeCollapse: Map<string, number>,
+	sizes: number[],
+	storage: PaneGroupStorage,
+): void => {
+	const state = loadSerializedPaneGroupState(autoSaveId, storage) || {};
+	state[getPaneKey(panesArray)] = {
+		expandToSizes: Object.fromEntries(paneSizesBeforeCollapse),
+		layout: sizes,
+	};
+
+	try {
+		storage.setItem(getPaneGroupKey(autoSaveId), JSON.stringify(state));
+	} catch (error) {
+		console.error(error);
+	}
+};
+
+/** Returns a debounced version of the given function. */
+const debounce = <A extends unknown[]>(callback: (...args: A) => void, durationMs = 10) => {
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+	return (...args: A) => {
+		if (timeoutId !== null) clearTimeout(timeoutId);
+		timeoutId = setTimeout(() => callback(...args), durationMs);
+	};
+};
+
+const debounceMap: { [key: string]: typeof savePaneGroupState } = {};
+
+/**
+ * Updates the values in storage based on the current state of the pane group.
+ * Debounced to limit the frequency of storage writes.
+ */
+export const updateStorageValues = ({
+	autoSaveId,
+	layout,
+	storage,
+	panesArray,
+	paneSizeBeforeCollapse,
+}: {
+	autoSaveId: string;
+	layout: number[];
+	storage: PaneGroupStorage;
+	panesArray: PaneState[];
+	paneSizeBeforeCollapse: Map<string, number>;
+}) => {
+	if (layout.length === 0 || layout.length !== panesArray.length) return;
+
+	const debouncedSave = (debounceMap[autoSaveId] ??= debounce(savePaneGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL));
+
+	// Clone mutable data before passing to the debounced function,
+	// else we risk saving a stale combination of mutable and immutable values.
+	debouncedSave(autoSaveId, [...panesArray], new Map(paneSizeBeforeCollapse), layout, storage);
+};

package/src/lib/internal/paneforge/internal/utils/style.ts

@@ -0,0 +1,104 @@
+import type { PaneState } from '../../paneforge.svelte.js';
+import type { DragState } from '../types.js';
+
+type CursorState = 'horizontal' | 'horizontal-max' | 'horizontal-min' | 'vertical' | 'vertical-max' | 'vertical-min';
+
+/* Global cursor state */
+let currentState: CursorState | null = null;
+
+/* Global cursor element */
+let element: HTMLStyleElement | null = null;
+
+/**
+ * Returns the cursor style for a given cursor state.
+ */
+export function getCursorStyle(state: CursorState): string {
+	switch (state) {
+		case 'horizontal':
+			return 'ew-resize';
+		case 'horizontal-max':
+			return 'w-resize';
+		case 'horizontal-min':
+			return 'e-resize';
+		case 'vertical':
+			return 'ns-resize';
+		case 'vertical-max':
+			return 'n-resize';
+		case 'vertical-min':
+			return 's-resize';
+	}
+}
+
+/**
+ * Resets the global cursor style to the default.
+ */
+export function resetGlobalCursorStyle() {
+	if (element === null) return;
+
+	document.head.removeChild(element);
+
+	currentState = null;
+	element = null;
+}
+
+/**
+ * Sets the global cursor style to the given state.
+ */
+export function setGlobalCursorStyle(state: CursorState, doc: Document) {
+	if (currentState === state) return;
+
+	currentState = state;
+
+	const style = getCursorStyle(state);
+
+	if (element === null) {
+		element = doc.createElement('style');
+		doc.head.appendChild(element);
+	}
+
+	element.innerHTML = `*{cursor: ${style}!important;}`;
+}
+
+/**
+ * Computes the flexbox style for a pane given its layout and drag state.
+ */
+export function computePaneFlexBoxStyle({
+	defaultSize,
+	dragState,
+	layout,
+	panesArray,
+	paneIndex,
+	precision = 3,
+}: {
+	defaultSize: number | undefined;
+	layout: number[];
+	dragState: DragState | null;
+	panesArray: PaneState[];
+	paneIndex: number;
+	precision?: number;
+}): Record<string, unknown> {
+	const size = layout[paneIndex];
+
+	let flexGrow;
+	if (size == null) {
+		// Initial render (before panes have registered themselves)
+		// To support server rendering, fallback to default size
+		flexGrow = defaultSize ?? '1';
+	} else if (panesArray.length === 1) {
+		//  Single pane group should always fill full width/height
+		flexGrow = '1';
+	} else {
+		flexGrow = size.toPrecision(precision);
+	}
+
+	return {
+		flexBasis: 0,
+		flexGrow,
+		flexShrink: 1,
+		// Without this, pane sizes may be unintentionally overridden by their content
+		overflow: 'hidden',
+		// Disable pointer events inside of a pane during resize
+		// This avoid edge cases like nested iframes
+		pointerEvents: dragState !== null ? 'none' : undefined,
+	};
+}

package/src/lib/internal/paneforge/pane-group.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { boxWith } from '../tools/index.js';
+	import { mergeProps } from '../merge-props.js';
+	import type { PaneGroupProps } from './types.js';
+	import { defaultStorage, PaneGroupState } from './paneforge.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		autoSaveId = null,
+		direction,
+		id = uid,
+		keyboardResizeBy = null,
+		onLayoutChange = () => {},
+		storage = defaultStorage,
+		ref = $bindable(null),
+		child,
+		children,
+		...restProps
+	}: PaneGroupProps = $props();
+
+	const paneGroupState = PaneGroupState.create({
+		id: boxWith(() => id ?? uid),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		autoSaveId: boxWith(() => autoSaveId),
+		direction: boxWith(() => direction),
+		keyboardResizeBy: boxWith(() => keyboardResizeBy),
+		onLayout: boxWith(() => onLayoutChange),
+		storage: boxWith(() => storage),
+	});
+
+	export const getLayout = () => paneGroupState.layout;
+	export const setLayout = paneGroupState.setLayout;
+	export const getId = () => paneGroupState.opts.id.current;
+
+	const mergedProps = $derived(mergeProps(restProps, paneGroupState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/internal/paneforge/pane-resizer.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { boxWith } from '../tools/index.js';
+	import { mergeProps } from '../merge-props.js';
+	import type { PaneResizerProps } from './types.js';
+	import { PaneResizerState } from './paneforge.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		id = uid,
+		ref = $bindable(null),
+		disabled = false,
+		onDraggingChange = () => {},
+		tabindex = 0,
+		child,
+		children,
+		...restProps
+	}: PaneResizerProps = $props();
+
+	const resizerState = PaneResizerState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		disabled: boxWith(() => disabled),
+		onDraggingChange: boxWith(() => onDraggingChange),
+		tabIndex: boxWith(() => tabindex),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, resizerState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/src/lib/internal/paneforge/pane.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { boxWith } from '../tools/index.js';
+	import { mergeProps } from '../merge-props.js';
+	import type { PaneProps } from './types.js';
+	import { PaneState } from './paneforge.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		id = uid,
+		ref = $bindable(null),
+		collapsedSize,
+		collapsible,
+		defaultSize,
+		maxSize,
+		minSize,
+		onCollapse = () => {},
+		onExpand = () => {},
+		onResize = () => {},
+		order,
+		child,
+		children,
+		...restProps
+	}: PaneProps = $props();
+
+	const paneState = PaneState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		collapsedSize: boxWith(() => collapsedSize),
+		collapsible: boxWith(() => collapsible),
+		defaultSize: boxWith(() => defaultSize),
+		maxSize: boxWith(() => maxSize),
+		minSize: boxWith(() => minSize),
+		onCollapse: boxWith(() => onCollapse),
+		onExpand: boxWith(() => onExpand),
+		onResize: boxWith(() => onResize),
+		order: boxWith(() => order),
+	});
+
+	export const collapse = paneState.pane.collapse;
+	export const expand = paneState.pane.expand;
+	export const getSize = paneState.pane.getSize;
+	export const isCollapsed = paneState.pane.isCollapsed;
+	export const isExpanded = paneState.pane.isExpanded;
+	export const resize = paneState.pane.resize;
+	export const getId = paneState.pane.getId;
+
+	const mergedProps = $derived(mergeProps(restProps, paneState.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}