@joewinke/jatui 0.1.27 → 0.1.28

package/dist/components/InlineEdit.svelte

@@ -46,6 +46,17 @@
 		truncate?: boolean;
 		/** Optional display segments for formula-aware rendering */
 		displaySegments?: DisplaySegment[];
+		/**
+		 * Optional Svelte action applied to the textarea while editing. Lets the
+		 * host inject richer paste/undo handling without this library depending on
+		 * it. No-op by default.
+		 */
+		pasteAction?: (node: HTMLTextAreaElement) => { destroy?: () => void } | void;
+		/**
+		 * Optional guard consulted on blur: return true to keep the editor open
+		 * (e.g. a paste-undo toast is still showing). Receives the textarea node.
+		 */
+		keepOpenOnBlur?: (node: HTMLTextAreaElement) => boolean;
 	}
 
 	let {
@@ -58,9 +69,14 @@
 		rows = 3,
 		showButtons = false,
 		truncate = false,
-		displaySegments = []
+		displaySegments = [],
+		pasteAction,
+		keepOpenOnBlur
 	}: Props = $props();
 
+	// No-op action so `use:` always has a valid target.
+	const applyPaste = (node: HTMLTextAreaElement) => pasteAction?.(node);
+
 	// --- Formula rendering ---
 	let hasFormulas = $derived(displaySegments.length > 0);
 
@@ -127,6 +143,14 @@
 	// Handle blur (auto-save when not using buttons)
 	function handleBlur() {
 		if (!showButtons) {
+			// Host may veto auto-save (e.g. a paste-undo toast is still available).
+			if (
+				type === 'textarea' &&
+				inputElement instanceof HTMLTextAreaElement &&
+				keepOpenOnBlur?.(inputElement)
+			) {
+				return;
+			}
 			saveValue();
 		}
 	}
@@ -178,6 +202,7 @@
 				onblur={handleBlur}
 				use:autofocus
 				use:autoresize
+				use:applyPaste
 			></textarea>
 		{:else}
 			<input

package/dist/components/InlineEdit.svelte.d.ts

@@ -39,6 +39,19 @@ interface Props {
     truncate?: boolean;
     /** Optional display segments for formula-aware rendering */
     displaySegments?: DisplaySegment[];
+    /**
+     * Optional Svelte action applied to the textarea while editing. Lets the
+     * host inject richer paste/undo handling without this library depending on
+     * it. No-op by default.
+     */
+    pasteAction?: (node: HTMLTextAreaElement) => {
+        destroy?: () => void;
+    } | void;
+    /**
+     * Optional guard consulted on blur: return true to keep the editor open
+     * (e.g. a paste-undo toast is still showing). Receives the textarea node.
+     */
+    keepOpenOnBlur?: (node: HTMLTextAreaElement) => boolean;
 }
 declare const InlineEdit: import("svelte").Component<Props, {}, "">;
 type InlineEdit = ReturnType<typeof InlineEdit>;

package/dist/components/PhoneInput.svelte

@@ -3,13 +3,22 @@
 	 * PhoneInput Component — International phone number input.
 	 *
 	 * Country selector dropdown (flag + dial code + search) alongside a tel input.
-	 * Formats numbers with libphonenumber-js AsYouType as the user types.
+	 * Formats numbers with libphonenumber-js AsYouType as the user types, and caps
+	 * national digits at the country's example-number length so users can't overtype.
 	 * Exposes the parsed E.164 value via `bind:value` and a hidden form field
-	 * named `name` so it submits cleanly with native `<form>` actions.
+	 * named `name` so it submits cleanly with native `<form>` actions. Also fires the
+	 * optional `onChange(value)` callback on every change.
 	 *
 	 * Auto-detects country when the user's input begins with a `+` prefix.
 	 */
-	import { AsYouType, parsePhoneNumberFromString, type CountryCode } from "libphonenumber-js";
+	import {
+		AsYouType,
+		parsePhoneNumberFromString,
+		getCountryCallingCode,
+		getExampleNumber,
+		type CountryCode,
+	} from "libphonenumber-js";
+	import examples from "libphonenumber-js/examples.mobile.json";
 	import { listCountries, PRIORITY_COUNTRIES, type CountryOption } from "../utils/phone";
 
 	type Props = {
@@ -22,6 +31,7 @@
 		class?: string;
 		disabled?: boolean;
 		autocomplete?: HTMLInputElement["autocomplete"];
+		onChange?: (value: string) => void;
 	};
 
 	let {
@@ -34,8 +44,25 @@
 		class: klass = "",
 		disabled = false,
 		autocomplete = "tel" as HTMLInputElement["autocomplete"],
+		onChange,
 	}: Props = $props();
 
+	function maxNationalDigits(cc: CountryCode): number {
+		const example = getExampleNumber(cc, examples);
+		return example?.nationalNumber.length ?? 15;
+	}
+
+	function capNationalDigits(raw: string, cc: CountryCode, max: number): string {
+		const allDigits = raw.replace(/\D/g, "");
+		if (!allDigits) return "";
+		const callingCode = getCountryCallingCode(cc);
+		const stripped =
+			allDigits.length > max && allDigits.startsWith(callingCode)
+				? allDigits.slice(callingCode.length)
+				: allDigits;
+		return stripped.slice(0, max);
+	}
+
 	const all = listCountries();
 	const priorityOptions = PRIORITY_COUNTRIES.map((c) => all.find((o) => o.code === c)).filter(
 		(o): o is CountryOption => !!o,
@@ -68,28 +95,49 @@
 		);
 	});
 
+	function setValue(next: string) {
+		value = next;
+		onChange?.(next);
+	}
+
 	function updateE164(raw: string, cc: CountryCode) {
 		const parsed = parsePhoneNumberFromString(raw, cc);
-		value = parsed?.isValid() ? parsed.number : "";
+		setValue(parsed?.isValid() ? parsed.number : display || "");
 	}
 
 	function onInput(e: Event) {
-		const raw = (e.target as HTMLInputElement).value;
+		const inputEl = e.target as HTMLInputElement;
+		const raw = inputEl.value;
 		if (raw.startsWith("+")) {
-			const parsed = parsePhoneNumberFromString(raw);
+			const allDigits = raw.replace(/\D/g, "");
+			let parsed = parsePhoneNumberFromString(`+${allDigits}`);
+			for (let len = allDigits.length - 1; !parsed?.country && len >= 1; len--) {
+				parsed = parsePhoneNumberFromString(`+${allDigits.slice(0, len)}`);
+			}
 			if (parsed?.country) {
 				country = parsed.country;
-				display = parsed.formatNational();
-				value = parsed.isValid() ? parsed.number : "";
+				const max = maxNationalDigits(parsed.country);
+				const cc = getCountryCallingCode(parsed.country);
+				const national = allDigits.startsWith(cc) ? allDigits.slice(cc.length) : allDigits;
+				const capped = national.slice(0, max);
+				const formatter = new AsYouType();
+				display = formatter.input(`+${cc}${capped}`);
+				inputEl.value = display;
+				const reparsed = parsePhoneNumberFromString(`+${cc}${capped}`);
+				setValue(reparsed?.isValid() ? reparsed.number : display || "");
 				return;
 			}
-			display = raw;
-			value = "";
+			display = `+${allDigits.slice(0, 15)}`;
+			inputEl.value = display;
+			setValue("");
 			return;
 		}
+		const max = maxNationalDigits(country);
+		const nationalDigits = capNationalDigits(raw, country, max);
 		const formatter = new AsYouType(country);
-		display = formatter.input(raw);
-		updateE164(raw, country);
+		display = formatter.input(nationalDigits);
+		inputEl.value = display;
+		updateE164(nationalDigits, country);
 	}
 
 	function pickCountry(code: CountryCode) {
@@ -118,11 +166,13 @@
 	});
 </script>
 
-<div class="flex w-full {klass}">
+<div
+	class="flex w-full rounded-field has-[input:focus]:ring-2 has-[input:focus]:ring-primary/40 transition-shadow {klass}"
+>
 	<div class="relative">
 		<button
 			type="button"
-			class="btn btn-outline rounded-r-none border-r-0 px-3 min-w-[5.5rem] justify-start"
+			class="btn btn-outline rounded-r-none border-r-0 px-3 min-w-[5.5rem] justify-start focus-visible:outline-0"
 			onclick={toggleDropdown}
 			{disabled}
 			aria-label="Select country code"
@@ -131,14 +181,14 @@
 		>
 			<span class="text-lg leading-none">{current?.flag}</span>
 			<span class="text-sm font-mono">{current?.dialCode}</span>
-			<svg class="w-3 h-3 opacity-60" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<svg class="w-3 h-3 opacity-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
 			</svg>
 		</button>
 
 		{#if dropdownOpen}
 			<div
-				class="absolute z-50 mt-1 w-72 max-h-80 overflow-y-auto bg-base-200 border border-base-300 rounded-lg"
+				class="absolute z-50 mt-1 w-72 max-h-80 overflow-y-auto bg-base-100 border border-base-300 rounded-box shadow-lg"
 				role="listbox"
 			>
 				<div class="sticky top-0 bg-base-100 p-2 border-b border-base-300">
@@ -163,7 +213,7 @@
 								>
 									<span class="text-lg leading-none">{opt.flag}</span>
 									<span class="flex-1 text-left">{opt.name}</span>
-									<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
+									<span class="text-base-content/45 font-mono text-xs">{opt.dialCode}</span>
 								</button>
 							</li>
 						{/each}
@@ -180,12 +230,12 @@
 							>
 								<span class="text-lg leading-none">{opt.flag}</span>
 								<span class="flex-1 text-left">{opt.name}</span>
-								<span class="text-base-content/60 font-mono text-xs">{opt.dialCode}</span>
+								<span class="text-base-content/45 font-mono text-xs">{opt.dialCode}</span>
 							</button>
 						</li>
 					{/each}
 					{#if filteredOthers.length === 0}
-						<li class="px-3 py-2 text-sm text-base-content/60">No matches</li>
+						<li class="px-3 py-2 text-sm text-base-content/45">No matches</li>
 					{/if}
 				</ul>
 			</div>
@@ -194,7 +244,7 @@
 
 	<input
 		type="tel"
-		class="input input-bordered rounded-l-none flex-1 min-w-0"
+		class="input input-bordered rounded-l-none flex-1 min-w-0 focus:outline-0"
 		{id}
 		{placeholder}
 		{required}

package/dist/components/PhoneInput.svelte.d.ts

@@ -2,9 +2,11 @@
      * PhoneInput Component — International phone number input.
      *
      * Country selector dropdown (flag + dial code + search) alongside a tel input.
-     * Formats numbers with libphonenumber-js AsYouType as the user types.
+     * Formats numbers with libphonenumber-js AsYouType as the user types, and caps
+     * national digits at the country's example-number length so users can't overtype.
      * Exposes the parsed E.164 value via `bind:value` and a hidden form field
-     * named `name` so it submits cleanly with native `<form>` actions.
+     * named `name` so it submits cleanly with native `<form>` actions. Also fires the
+     * optional `onChange(value)` callback on every change.
      *
      * Auto-detects country when the user's input begins with a `+` prefix.
      */
@@ -19,6 +21,7 @@ type Props = {
     class?: string;
     disabled?: boolean;
     autocomplete?: HTMLInputElement["autocomplete"];
+    onChange?: (value: string) => void;
 };
 declare const PhoneInput: import("svelte").Component<Props, {}, "value">;
 type PhoneInput = ReturnType<typeof PhoneInput>;

package/dist/components/ResizableDivider.svelte

@@ -14,12 +14,23 @@
 	 */
 
 	interface Props {
-		onResize: (deltaY: number) => void;
+		/**
+		 * Drag delta callback. For `horizontal` orientation this is the vertical
+		 * pointer delta (deltaY); for `vertical` orientation it is the horizontal
+		 * pointer delta (deltaX). Positive = down / right.
+		 */
+		onResize: (delta: number) => void;
 		class?: string;
+		/**
+		 * Divider axis. `horizontal` = a horizontal bar that resizes panels stacked
+		 * vertically (drag up/down). `vertical` = a vertical bar that resizes panels
+		 * laid out side-by-side (drag left/right). Default: horizontal.
+		 */
+		orientation?: 'horizontal' | 'vertical';
 		/** Whether a panel is currently collapsed */
 		isCollapsed?: boolean;
-		/** Which direction the panel collapsed ('top' = top panel hidden, 'bottom' = bottom panel hidden) */
-		collapsedDirection?: 'top' | 'bottom' | null;
+		/** Which direction the panel collapsed (hidden panel side) */
+		collapsedDirection?: 'top' | 'bottom' | 'left' | 'right' | null;
 		/** Callback when clicking the divider while collapsed (to restore) */
 		onCollapsedClick?: () => void;
 	}
@@ -27,21 +38,26 @@
 	let {
 		onResize,
 		class: className = '',
+		orientation = 'horizontal',
 		isCollapsed = false,
 		collapsedDirection = null,
 		onCollapsedClick
 	}: Props = $props();
 
+	const isVertical = $derived(orientation === 'vertical');
+
 	let isDragging = $state(false);
 	let isNearby = $state(false);
 	let isHovering = $state(false);
-	let startY = $state(0);
+	// Drag origin along the active axis (clientY for horizontal, clientX for vertical).
+	let startPos = $state(0);
 	let dividerElement: HTMLDivElement | undefined = $state();
 
 	// Proximity detection threshold in pixels
 	const PROXIMITY_THRESHOLD = 24;
 
 	function handleMouseDown(e: MouseEvent) {
+		// If collapsed and we have a restore handler, treat click as restore
 		if (isCollapsed && onCollapsedClick) {
 			onCollapsedClick();
 			return;
@@ -49,7 +65,7 @@
 
 		e.preventDefault();
 		isDragging = true;
-		startY = e.clientY;
+		startPos = isVertical ? e.clientX : e.clientY;
 
 		document.addEventListener('mousemove', handleMouseMove);
 		document.addEventListener('mouseup', handleMouseUp);
@@ -57,9 +73,10 @@
 
 	function handleMouseMove(e: MouseEvent) {
 		if (!isDragging) return;
-		const deltaY = e.clientY - startY;
-		startY = e.clientY;
-		onResize(deltaY);
+		const pos = isVertical ? e.clientX : e.clientY;
+		const delta = pos - startPos;
+		startPos = pos;
+		onResize(delta);
 	}
 
 	function handleMouseUp() {
@@ -69,6 +86,7 @@
 	}
 
 	function handleTouchStart(e: TouchEvent) {
+		// If collapsed and we have a restore handler, treat tap as restore
 		if (isCollapsed && onCollapsedClick) {
 			onCollapsedClick();
 			return;
@@ -76,14 +94,15 @@
 
 		if (e.touches.length !== 1) return;
 		isDragging = true;
-		startY = e.touches[0].clientY;
+		startPos = isVertical ? e.touches[0].clientX : e.touches[0].clientY;
 	}
 
 	function handleTouchMove(e: TouchEvent) {
 		if (!isDragging || e.touches.length !== 1) return;
-		const deltaY = e.touches[0].clientY - startY;
-		startY = e.touches[0].clientY;
-		onResize(deltaY);
+		const pos = isVertical ? e.touches[0].clientX : e.touches[0].clientY;
+		const delta = pos - startPos;
+		startPos = pos;
+		onResize(delta);
 	}
 
 	function handleTouchEnd() {
@@ -98,16 +117,19 @@
 		isHovering = false;
 	}
 
+	// Proximity detection: track mouse movement near the divider
 	function handleProximityMove(e: MouseEvent) {
 		if (!dividerElement || isDragging) return;
 
 		const rect = dividerElement.getBoundingClientRect();
-		const dividerCenterY = rect.top + rect.height / 2;
-		const distance = Math.abs(e.clientY - dividerCenterY);
+		const distance = isVertical
+			? Math.abs(e.clientX - (rect.left + rect.width / 2))
+			: Math.abs(e.clientY - (rect.top + rect.height / 2));
 
 		isNearby = distance <= PROXIMITY_THRESHOLD;
 	}
 
+	// Set up proximity tracking on mount
 	$effect(() => {
 		if (typeof window === 'undefined') return;
 
@@ -118,19 +140,21 @@
 		};
 	});
 
+	// Derived state for expanded appearance
 	const isExpanded = $derived(isDragging || isHovering || isNearby);
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	bind:this={dividerElement}
-	class="divider-container flex items-center justify-center select-none {className} {isCollapsed ? 'cursor-pointer divider-collapsed' : 'cursor-row-resize'} {isDragging ? 'bg-primary/25' : isExpanded && isCollapsed ? 'bg-primary/40' : isExpanded ? 'bg-primary/15' : ''}"
+	class="divider-container flex items-center justify-center select-none {className} {isCollapsed ? 'cursor-pointer divider-collapsed' : isVertical ? 'cursor-col-resize' : 'cursor-row-resize'} {isDragging ? 'bg-primary/25' : isExpanded && isCollapsed ? 'bg-primary/40' : isExpanded ? 'bg-primary/15' : ''}"
 	class:expanded={isExpanded}
 	class:dragging={isDragging}
+	class:vertical={isVertical}
 	role="separator"
-	aria-orientation="horizontal"
-	aria-label={isCollapsed ? 'Expand panel' : 'Resize panel'}
+	aria-orientation={isVertical ? 'vertical' : 'horizontal'}
+	aria-valuenow={isCollapsed ? 0 : 1}
 	tabindex="0"
 	onmousedown={handleMouseDown}
 	onmouseenter={handleMouseEnter}
@@ -140,6 +164,7 @@
 	ontouchend={handleTouchEnd}
 >
 	{#if isCollapsed}
+		<!-- Collapsed state: minimal industrial indicator -->
 		<div class="collapsed-indicator">
 			<div class="indicator-line"></div>
 			<div class="indicator-dots">
@@ -150,6 +175,7 @@
 			<div class="indicator-line"></div>
 		</div>
 	{:else}
+		<!-- Normal state: grippy handle with proximity-aware sizing -->
 		<div class="grippy-handle">
 			<div class="grip-line"></div>
 			<div class="grip-line"></div>
@@ -158,6 +184,7 @@
 </div>
 
 <style>
+	/* Main divider container with smooth transitions */
 	.divider-container {
 		height: 8px;
 		min-height: 8px;
@@ -167,6 +194,8 @@
 			box-shadow 200ms ease;
 	}
 
+	/* Expanded state: larger hit target + glow */
+	/* NOTE: background uses Tailwind class (bg-primary/15) on element instead of CSS */
 	.divider-container.expanded {
 		height: 16px;
 		min-height: 16px;
@@ -175,6 +204,8 @@
 			inset 0 0 8px color-mix(in oklch, var(--color-primary) 20%, transparent);
 	}
 
+	/* Dragging state: stronger glow */
+	/* NOTE: background uses Tailwind class (bg-primary/25) on element instead of CSS */
 	.divider-container.dragging {
 		height: 16px;
 		min-height: 16px;
@@ -183,6 +214,7 @@
 			inset 0 0 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
 	}
 
+	/* Grippy handle styling */
 	.grippy-handle {
 		display: flex;
 		flex-direction: column;
@@ -226,6 +258,7 @@
 		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 60%, transparent);
 	}
 
+	/* Collapsed state styling */
 	.divider-collapsed {
 		height: 6px;
 		min-height: 6px;
@@ -233,6 +266,8 @@
 		border-color: var(--color-base-300) !important;
 	}
 
+	/* Collapsed + expanded (proximity/hover): grow larger for easy targeting */
+	/* NOTE: background uses Tailwind class (bg-primary/40) on element instead of CSS */
 	.divider-collapsed.expanded {
 		height: 20px;
 		min-height: 20px;
@@ -250,6 +285,7 @@
 		transition: transform 200ms ease;
 	}
 
+	/* Scale up the indicator when expanded */
 	.divider-collapsed.expanded .collapsed-indicator {
 		transform: scaleY(1.5);
 	}
@@ -267,6 +303,7 @@
 		transition: background 200ms ease, height 200ms ease;
 	}
 
+	/* Brighter lines when expanded */
 	.divider-collapsed.expanded .indicator-line {
 		height: 2px;
 		background: linear-gradient(
@@ -293,6 +330,7 @@
 		transition: width 200ms ease, height 200ms ease, background 200ms ease, box-shadow 200ms ease;
 	}
 
+	/* Expanded state: larger, brighter dots with glow */
 	.divider-collapsed.expanded .indicator-dots {
 		opacity: 1;
 		gap: 5px;
@@ -304,4 +342,96 @@
 		background: var(--color-primary);
 		box-shadow: 0 0 8px color-mix(in oklch, var(--color-primary) 70%, transparent);
 	}
+
+	/* ── Vertical orientation ─────────────────────────────────────────────────
+	   Mirrors the horizontal styles across the X axis: the bar runs top-to-bottom
+	   and resizes side-by-side panels (drag left/right). Width replaces height
+	   everywhere, and the grippy handle / collapsed indicator rotate 90°. */
+	.divider-container.vertical {
+		height: auto;
+		min-height: 0;
+		width: 8px;
+		min-width: 8px;
+	}
+
+	.divider-container.vertical.expanded {
+		height: auto;
+		min-height: 0;
+		width: 16px;
+		min-width: 16px;
+	}
+
+	.divider-container.vertical.dragging {
+		height: auto;
+		min-height: 0;
+		width: 16px;
+		min-width: 16px;
+	}
+
+	.divider-container.vertical .grippy-handle {
+		flex-direction: row;
+		padding: 32px 4px;
+	}
+
+	.divider-container.vertical.expanded .grippy-handle {
+		transform: scaleX(1.2);
+	}
+
+	.divider-container.vertical.dragging .grippy-handle {
+		transform: scaleX(1.3);
+	}
+
+	.divider-container.vertical .grip-line {
+		width: 2px;
+		height: 32px;
+	}
+
+	.divider-collapsed.vertical {
+		height: auto;
+		min-height: 0;
+		width: 6px;
+		min-width: 6px;
+	}
+
+	.divider-collapsed.vertical.expanded {
+		height: auto;
+		min-height: 0;
+		width: 20px;
+		min-width: 20px;
+	}
+
+	.divider-container.vertical .collapsed-indicator {
+		flex-direction: column;
+		width: auto;
+		height: 100%;
+		padding: 16px 0;
+	}
+
+	.divider-collapsed.vertical.expanded .collapsed-indicator {
+		transform: scaleX(1.5);
+	}
+
+	.divider-container.vertical .indicator-line {
+		width: 1px;
+		height: auto;
+		background: linear-gradient(
+			180deg,
+			transparent 0%,
+			color-mix(in oklch, var(--color-base-content) 30%, transparent) 20%,
+			color-mix(in oklch, var(--color-base-content) 30%, transparent) 80%,
+			transparent 100%
+		);
+	}
+
+	.divider-collapsed.vertical.expanded .indicator-line {
+		width: 2px;
+		height: auto;
+		background: linear-gradient(
+			180deg,
+			transparent 0%,
+			color-mix(in oklch, var(--color-primary) 70%, transparent) 15%,
+			color-mix(in oklch, var(--color-primary) 70%, transparent) 85%,
+			transparent 100%
+		);
+	}
 </style>

package/dist/components/ResizableDivider.svelte.d.ts

@@ -12,12 +12,23 @@
  * - Glow effect on hover for better visibility
  */
 interface Props {
-    onResize: (deltaY: number) => void;
+    /**
+     * Drag delta callback. For `horizontal` orientation this is the vertical
+     * pointer delta (deltaY); for `vertical` orientation it is the horizontal
+     * pointer delta (deltaX). Positive = down / right.
+     */
+    onResize: (delta: number) => void;
     class?: string;
+    /**
+     * Divider axis. `horizontal` = a horizontal bar that resizes panels stacked
+     * vertically (drag up/down). `vertical` = a vertical bar that resizes panels
+     * laid out side-by-side (drag left/right). Default: horizontal.
+     */
+    orientation?: 'horizontal' | 'vertical';
     /** Whether a panel is currently collapsed */
     isCollapsed?: boolean;
-    /** Which direction the panel collapsed ('top' = top panel hidden, 'bottom' = bottom panel hidden) */
-    collapsedDirection?: 'top' | 'bottom' | null;
+    /** Which direction the panel collapsed (hidden panel side) */
+    collapsedDirection?: 'top' | 'bottom' | 'left' | 'right' | null;
     /** Callback when clicking the divider while collapsed (to restore) */
     onCollapsedClick?: () => void;
 }