@joewinke/jatui 0.1.27 → 0.1.29

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;
 }

package/dist/components/SignaturePad.svelte

@@ -4,6 +4,8 @@
 	 *
 	 * Exports `clear()` and `isEmpty()` methods. Outputs signature as base64 PNG data URL
 	 * via the bindable `signatureData` prop or `onSignatureChange` callback.
+	 *
+	 * Pass `disabled` to render a non-interactive, dimmed pad (e.g. form-builder previews).
 	 */
 	import { onMount } from 'svelte';
 
@@ -17,6 +19,7 @@
 		label = 'Signature',
 		required = false,
 		placeholder = 'Sign here',
+		disabled = false,
 	}: {
 		signatureData?: string;
 		onSignatureChange?: (data: string) => void;
@@ -27,6 +30,7 @@
 		label?: string;
 		required?: boolean;
 		placeholder?: string;
+		disabled?: boolean;
 	} = $props();
 
 	let canvas: HTMLCanvasElement;
@@ -68,6 +72,7 @@
 		}
 
 		function startDrawing(e: MouseEvent | TouchEvent) {
+			if (disabled) return;
 			e.preventDefault();
 			isDrawing = true;
 			const coords = getCoordinates(e);
@@ -76,7 +81,7 @@
 		}
 
 		function draw(e: MouseEvent | TouchEvent) {
-			if (!isDrawing || !ctx) return;
+			if (disabled || !isDrawing || !ctx) return;
 			e.preventDefault();
 
 			const coords = getCoordinates(e);
@@ -145,19 +150,21 @@
 					<span class="text-error">*</span>
 				{/if}
 			</span>
-			<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
-				Clear
-			</button>
+			{#if !disabled}
+				<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
+					Clear
+				</button>
+			{/if}
 		</div>
 	{/if}
 
 	<div class="rounded-lg bg-base-100 overflow-hidden relative transition-all duration-300
-		{hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
+		{disabled ? 'opacity-50 border-2 border-base-300' : hasDrawn ? 'border-2 border-success/60' : 'border-2 border-base-300'}">
 		<canvas
 			bind:this={canvas}
 			{width}
 			{height}
-			class="w-full touch-none cursor-crosshair"
+			class="w-full touch-none {disabled ? 'cursor-not-allowed' : 'cursor-crosshair'}"
 		></canvas>
 
 		{#if !hasDrawn}

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

@@ -8,6 +8,7 @@ type $$ComponentProps = {
     label?: string;
     required?: boolean;
     placeholder?: string;
+    disabled?: boolean;
 };
 declare const SignaturePad: import("svelte").Component<$$ComponentProps, {
     clear: () => void;

package/dist/components/ThemeSelector.svelte

@@ -53,12 +53,18 @@
 		defaultTheme = 'light',
 		storageKey = 'theme',
 		onThemeChange,
+		compact = false,
+		inline = false,
 	}: {
 		dropUp?: boolean;
 		themes?: ThemeOption[];
 		defaultTheme?: string;
 		storageKey?: string;
 		onThemeChange?: (theme: string) => void;
+		/** Icon-only trigger (label hidden, shown as tooltip). Dropdown mode only. */
+		compact?: boolean;
+		/** Render a collapsible `<details>` theme list instead of a dropdown — for embedding inside another menu. */
+		inline?: boolean;
 	} = $props();
 
 	// svelte-ignore state_referenced_locally
@@ -104,6 +110,51 @@
 	}
 </script>
 
+{#if inline}
+	<!-- Inline mode: collapsible theme list with color previews, for embedding inside another menu -->
+	<details class="w-full theme-details">
+		<summary class="flex items-center gap-2 cursor-pointer hover:bg-base-300 transition-colors px-2 py-1.5 rounded list-none">
+			<div
+				data-theme={currentTheme}
+				class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded p-0.5 w-4 h-4 transition-transform duration-300 ease-out"
+				class:theme-spin={isAnimating}
+			>
+				<div class="bg-base-content size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 0ms"></div>
+				<div class="bg-primary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 50ms"></div>
+				<div class="bg-secondary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 100ms"></div>
+				<div class="bg-accent size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 150ms"></div>
+			</div>
+			<span class="text-[0.75rem] flex-1 text-left text-base-content/70">{currentThemeLabel}</span>
+			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3 h-3 text-base-content/45 transition-transform duration-200 details-chevron">
+				<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+			</svg>
+		</summary>
+		<div class="max-h-48 overflow-y-auto mt-1 ml-2 border-l border-base-content/10 pl-2">
+			{#each themes as theme}
+				<button
+					class="flex items-center gap-2 w-full px-2 py-1 rounded transition-colors hover:bg-base-300 {currentTheme === theme.name ? 'bg-primary/20' : ''}"
+					onclick={() => handleThemeChange(theme.name)}
+				>
+					<div
+						data-theme={theme.name}
+						class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded p-0.5 w-4 h-4"
+					>
+						<div class="bg-base-content size-1 rounded-full"></div>
+						<div class="bg-primary size-1 rounded-full"></div>
+						<div class="bg-secondary size-1 rounded-full"></div>
+						<div class="bg-accent size-1 rounded-full"></div>
+					</div>
+					<span class="text-[0.75rem] text-base-content/70 flex-1 text-left">{theme.label}</span>
+					{#if currentTheme === theme.name}
+						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3 text-primary">
+							<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
+						</svg>
+					{/if}
+				</button>
+			{/each}
+		</div>
+	</details>
+{:else}
 <div class="dropdown dropdown-end" class:dropdown-top={dropUp}>
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
@@ -111,7 +162,7 @@
 		role="button"
 		class="flex items-center gap-2 cursor-pointer hover:bg-base-300 transition-colors px-2 py-1 rounded"
 		aria-label="Change Theme"
-		title="Change Theme"
+		title={compact ? currentThemeLabel : 'Change Theme'}
 	>
 		<div
 			data-theme={currentTheme}
@@ -123,7 +174,9 @@
 			<div class="bg-secondary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 100ms"></div>
 			<div class="bg-accent size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 150ms"></div>
 		</div>
-		<span class="text-sm font-medium transition-opacity duration-200" class:opacity-50={isAnimating}>{currentThemeLabel}</span>
+		{#if !compact}
+			<span class="text-sm font-medium transition-opacity duration-200" class:opacity-50={isAnimating}>{currentThemeLabel}</span>
+		{/if}
 	</div>
 
 	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -171,8 +224,14 @@
 		</ul>
 	</div>
 </div>
+{/if}
 
 <style>
+	/* Rotate chevron when the inline details list is open */
+	.theme-details[open] .details-chevron {
+		transform: rotate(180deg);
+	}
+
 	/* NOTE: DaisyUI v5.0.0 has a stuck-animation bug on `.dropdown-content`
 	   (`@keyframes dropdown { 0% { opacity: 0 } }` pins opacity to 0). If the
 	   theme dropdown opens but stays invisible, the consuming project needs

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

@@ -8,6 +8,10 @@ type $$ComponentProps = {
     defaultTheme?: string;
     storageKey?: string;
     onThemeChange?: (theme: string) => void;
+    /** Icon-only trigger (label hidden, shown as tooltip). Dropdown mode only. */
+    compact?: boolean;
+    /** Render a collapsible `<details>` theme list instead of a dropdown — for embedding inside another menu. */
+    inline?: boolean;
 };
 declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemeSelector = ReturnType<typeof ThemeSelector>;