lint

packages/paneforge/src/lib/components/pane-group.svelte

@@ -13,7 +13,6 @@
 		onLayoutChange = noop,
 		storage = defaultStorage,
 		ref = $bindable(null),
-		setPaneGroupApi = noop,
 		child,
 		children,
 		...restProps
@@ -32,13 +31,9 @@
 		storage: box.with(() => storage),
 	});
 
-	$effect(() => {
-		setPaneGroupApi({
-			getLayout: () => paneGroupState.layout,
-			setLayout: paneGroupState.setLayout,
-			getId: () => paneGroupState.id.current,
-		});
-	});
+	export const getLayout = () => paneGroupState.layout;
+	export const setLayout = paneGroupState.setLayout;
+	export const getId = () => paneGroupState.id.current;
 
 	const mergedProps = $derived(mergeProps(restProps, paneGroupState.props));
 </script>

packages/paneforge/src/lib/components/pane.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
-	import { untrack } from "svelte";
 	import type { PaneProps } from "./types.js";
 	import { noop } from "$lib/internal/helpers.js";
 	import { useId } from "$lib/internal/utils/useId.js";
@@ -9,7 +8,6 @@
 	let {
 		id = useId(),
 		ref = $bindable(null),
-		setPaneApi = noop,
 		collapsedSize,
 		collapsible,
 		defaultSize,
@@ -41,11 +39,13 @@
 		order: box.with(() => order),
 	});
 
-	$effect(() => {
-		untrack(() => {
-			setPaneApi(paneState.pane);
-		});
-	});
+	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>

packages/paneforge/src/lib/components/types.ts

@@ -91,12 +91,6 @@ export type PanePropsWithoutHTML = WithChild<{
 	 * A callback that is called when the pane is resized.
 	 */
 	onResize?: PaneOnResize | undefined;
-
-	/**
-	 * A callback that receives an imperative API for the pane. You can assign
-	 * this to a variable to programmatically control the pane.
-	 */
-	setPaneApi?: (api: PaneAPI) => void;
 }>;
 
 export type PaneProps = PanePropsWithoutHTML &
@@ -130,12 +124,6 @@ export type PaneGroupPropsWithoutHTML = WithChild<{
 	 * The storage object to use for saving the layout of the panes in the group.
 	 */
 	storage?: PaneGroupStorage | undefined;
-
-	/**
-	 * A callback that receives an imperative API for the pane group. You can assign
-	 * this to a variable to programmatically control the pane group.
-	 */
-	setPaneGroupApi?: (api: PaneGroupAPI) => void;
 }>;
 
 export type PaneGroupProps = PaneGroupPropsWithoutHTML &

packages/paneforge/src/lib/internal/helpers.ts

@@ -224,7 +224,7 @@ export function validatePaneGroupLayout({
 			initialSize: unsafeSize,
 		});
 
-		if (unsafeSize != safeSize) {
+		if (unsafeSize !== safeSize) {
 			remainingSize += unsafeSize - safeSize;
 
 			nextLayout[index] = safeSize;

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

@@ -38,6 +38,7 @@ export function adjustLayoutByDelta({
 	// A positive delta means the pane(s) immediately before the resize handle should "expand".
 	// This is accomplished by shrinking/contracting (and shifting) one or more of the panes after the resize handle.
 
+	// eslint-disable-next-line no-lone-blocks
 	{
 		// If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
 		// We no longer check the halfway threshold because this may prevent the pane from expanding at all.
@@ -109,7 +110,6 @@ export function adjustLayoutByDelta({
 
 		while (true) {
 			const prevSize = prevLayout[index];
-			console.log("prevSize", prevSize);
 			assert(prevSize != null);
 
 			const maxSafeSize = resizePane({

packages/paneforge/src/lib/internal/utils/assert.ts

@@ -1,5 +1,5 @@
 export function assert(
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	// eslint-disable-next-line ts/no-explicit-any
 	expectedCondition: any,
 	message: string = "Assertion failed!"
 ): asserts expectedCondition {

packages/paneforge/src/lib/internal/utils/chain.ts

@@ -9,7 +9,6 @@ type NonEmptyArray<T> = [T, ...T[]];
 /**
  * Executes an array of callback functions with the same arguments.
  * @template T The types of the arguments that the callback functions take.
- * @param n array of callback functions to execute.
  * @returns A new function that executes all of the original callback functions with the same arguments.
  */
 export function chain<T extends unknown[]>(

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

@@ -1,5 +1,3 @@
-import { type Writable, get } from "svelte/store";
-import type { SvelteMap } from "svelte/reactivity";
 import type { PaneData } from "../types.js";
 import { LOCAL_STORAGE_DEBOUNCE_INTERVAL } from "../constants.js";
 
@@ -130,11 +128,11 @@ const debounceMap: {
 /**
  * Returns a debounced version of the given function.
  */
-// eslint-disable-next-line @typescript-eslint/ban-types
+// eslint-disable-next-line ts/no-unsafe-function-type
 function debounce<T extends Function>(callback: T, durationMs: number = 10) {
 	let timeoutId: NodeJS.Timeout | null = null;
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	// eslint-disable-next-line ts/no-explicit-any
 	const callable = (...args: any) => {
 		if (timeoutId !== null) {
 			clearTimeout(timeoutId);

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

@@ -1,22 +1,5 @@
 import type { DragState, PaneData } from "../types.js";
 
-/**
- * A utility function that converts a style object to a string,
- * which can be used as the value of the `style` attribute for
- * an element.
- *
- * @param style - The style object to convert
- * @returns The style object as a string
- */
-export function styleToString(style: StyleObject): string {
-	return Object.keys(style).reduce((str, key) => {
-		if (style[key] === undefined) return str;
-		return `${str}${key}:${style[key]};`;
-	}, "");
-}
-
-export type StyleObject = Record<string, number | string | undefined>;
-
 type CursorState =
 	| "horizontal"
 	| "horizontal-max"

packages/paneforge/src/lib/paneforge.svelte.ts

@@ -5,17 +5,8 @@ import {
 	executeCallbacks,
 	useRefById,
 } from "svelte-toolbelt";
-import { isKeyDown, isMouseEvent, isTouchEvent } from "$lib/internal/utils/is.js";
 import { onMount, untrack } from "svelte";
-import { adjustLayoutByDelta } from "$lib/internal/utils/adjust-layout.js";
-import { areArraysEqual, areNumbersAlmostEqual } from "$lib/internal/utils/compare.js";
-import {
-	computePaneFlexBoxStyle,
-	getCursorStyle,
-	resetGlobalCursorStyle,
-	setGlobalCursorStyle,
-} from "$lib/internal/utils/style.js";
-import { assert } from "$lib/internal/utils/assert.js";
+import { createContext } from "$lib/internal/utils/createContext.js";
 import {
 	callPaneCallbacks,
 	findPaneDataIndex,
@@ -31,8 +22,17 @@ import {
 	paneDataHelper,
 	updateResizeHandleAriaValues,
 	validatePaneGroupLayout,
-} from "./internal/helpers.js";
-import { createContext } from "./internal/utils/createContext.js";
+} from "$lib/internal/helpers.js";
+import { isKeyDown, isMouseEvent, isTouchEvent } from "$lib/internal/utils/is.js";
+import { adjustLayoutByDelta } from "$lib/internal/utils/adjust-layout.js";
+import { areArraysEqual, areNumbersAlmostEqual } from "$lib/internal/utils/compare.js";
+import {
+	computePaneFlexBoxStyle,
+	getCursorStyle,
+	resetGlobalCursorStyle,
+	setGlobalCursorStyle,
+} from "$lib/internal/utils/style.js";
+import { assert } from "$lib/internal/utils/assert.js";
 import type {
 	Direction,
 	DragState,
@@ -233,7 +233,7 @@ class PaneGroupState {
 				// In this case, Pane sizes might not change–
 				// but updating cursor in this scenario would cause a flicker.
 				const prevDelta = this.prevDelta;
-				if (prevDelta != delta) {
+				if (prevDelta !== delta) {
 					this.prevDelta = delta;
 
 					if (!layoutChanged) {
@@ -823,10 +823,6 @@ class PaneState {
 				this.group.unregisterPane(this.paneData);
 			};
 		});
-
-		$effect(() => {
-			console.log("style", this.group.getPaneStyle(this.paneData, this.defaultSize.current));
-		});
 	}
 
 	props = $derived.by(() => ({

sites/docs/src/lib/components/demos/collapsible-demo.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { Pane, PaneGroup, PaneResizer } from "paneforge";
-	import type { PaneAPI } from "paneforge";
 	import { DotsSixVertical } from "$icons/index.js";
 	import { Button } from "$lib/components/ui/button";
 
-	let paneOne = $state<PaneAPI>();
+	let paneOne = $state<Pane>();
 	let collapsed = $state(false);
 </script>
 
@@ -35,7 +34,6 @@
 		collapsedSize={5}
 		collapsible={true}
 		minSize={15}
-		setPaneApi={(api) => (paneOne = api)}
 		onCollapse={() => (collapsed = true)}
 		onExpand={() => (collapsed = false)}
 	>