@joewinke/jatui 0.26.0 → 0.27.1

package/dist/components/BottomSheet.svelte

@@ -0,0 +1,280 @@
+<!--
+  BottomSheet.svelte — Reusable mobile bottom sheet primitive.
+
+  Usage:
+    <BottomSheet bind:open title="Pick something" onclose={handleClose}>
+      Content here
+    </BottomSheet>
+
+  Props:
+    open      {boolean} — bindable, controls visibility
+    title     {string}  — optional header title
+    zIndex    {number}  — z-index override (default 70)
+    onclose   {() => void} — called when the sheet is dismissed
+    fullHeight {boolean} — sheet takes full viewport height (slot controls scroll)
+    snap      {'single'|'dual'} — 'dual' enables the inspector pattern: two snap
+              heights (peek → expanded) with flick-momentum release and
+              visualViewport keyboard avoidance (wayflow eval §6b).
+              Default 'single' preserves the legacy drag-to-dismiss sheet.
+    peekFraction / expandedFraction {number} — snap heights as a fraction of the
+      keyboard-adjusted visible viewport (dual mode only).
+
+  Drag physics:
+    single — pointer drag downward > 80px dismisses (legacy behavior).
+    dual   — flick release: a fast flick (≥0.5 px/ms) snaps one step in the
+             flick's direction (down from peek dismisses); otherwise the sheet
+             settles on the snap nearest the post-drag height.
+-->
+<script lang="ts">
+	import { onMount, untrack } from 'svelte';
+	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
+	import type { Snippet } from 'svelte';
+	import { fly, fade } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
+	import {
+		resolveSnapTarget,
+		keyboardInsetPx,
+		clampSnapHeight,
+		type SnapHeight
+	} from '../utils/snapFlick';
+
+	let {
+		open = $bindable(false),
+		title = '',
+		zIndex = 70,
+		fullHeight = false,
+		snap = 'single',
+		peekFraction = 0.4,
+		expandedFraction = 0.9,
+		onclose = () => {},
+		shortcutRegistry,
+		shortcutContext = 'bottom-sheet',
+		children
+	}: {
+		open?: boolean;
+		title?: string;
+		zIndex?: number;
+		/** When true, sheet takes full viewport height and content wrapper is overflow:hidden so the slot controls its own scroll zones. */
+		fullHeight?: boolean;
+		/** 'single' = legacy drag-to-dismiss only. 'dual' = peek/expanded snaps + flick release + keyboard avoidance. */
+		snap?: 'single' | 'dual';
+		/** Peek snap height as a fraction of the visible (keyboard-adjusted) viewport. */
+		peekFraction?: number;
+		/** Expanded snap height as a fraction of the visible (keyboard-adjusted) viewport. */
+		expandedFraction?: number;
+		onclose?: () => void;
+		/**
+		 * Shortcut registry to push a modal context into while open — page
+		 * shortcuts registered there stop firing behind it (jatui-voc3i.3).
+		 */
+		shortcutRegistry?: ShortcutRegistry;
+		/** Context name pushed while open. Default `'bottom-sheet'`. */
+		shortcutContext?: string;
+		children?: Snippet;
+	} = $props();
+
+	// While open, a modal shortcut context keeps the host page's registry
+	// shortcuts from firing behind it.
+	$effect(() => {
+		if (!open || !shortcutRegistry) return;
+		return shortcutRegistry.pushContext(shortcutContext, { modal: true, label: untrack(() => title) || undefined });
+	});
+
+	// ── Keyboard avoidance (visualViewport) ───────────────────────────────────
+	// The soft keyboard shrinks the visual viewport; track it so the sheet
+	// clamps to what is actually visible and content clears the keyboard.
+	let visibleHeight = $state(0);
+	let keyboardInset = $state(0);
+
+	function readViewport() {
+		const vv = window.visualViewport;
+		if (!vv) {
+			visibleHeight = window.innerHeight;
+			keyboardInset = 0;
+			return;
+		}
+		visibleHeight = vv.height;
+		keyboardInset = keyboardInsetPx(
+			{ height: vv.height, offsetTop: vv.offsetTop },
+			window.innerHeight
+		);
+	}
+
+	onMount(() => {
+		readViewport();
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const onChange = () => readViewport();
+		vv.addEventListener('resize', onChange);
+		vv.addEventListener('scroll', onChange);
+		return () => {
+			vv.removeEventListener('resize', onChange);
+			vv.removeEventListener('scroll', onChange);
+		};
+	});
+
+	// ── Snap points (dual mode) ───────────────────────────────────────────────
+	// Derived from the keyboard-adjusted visible height, so the expanded snap can
+	// never extend behind the soft keyboard.
+	const isDual = $derived(snap === 'dual');
+
+	const snapPoints = $derived.by<SnapHeight[]>(() => {
+		const avail = Math.max(0, visibleHeight || (typeof window !== 'undefined' ? window.innerHeight : 0));
+		return [
+			{ name: 'peek', heightPx: clampSnapHeight(peekFraction * avail, avail) },
+			{ name: 'expanded', heightPx: clampSnapHeight(expandedFraction * avail, avail) }
+		];
+	});
+
+	// Resting snap index. Dual mode opens at peek (inspector pattern: peek first,
+	// expand on demand); single mode is unaffected.
+	// Resting snap index (dual mode). Opens at peek (index 0) — the inspector
+	// pattern: content summary first, expand on demand. Single mode never reads it.
+	let snapIndex = $state(0);
+
+	// ── Drag-to-dismiss / snap state ──────────────────────────────────────────
+	let dragStartY = 0;
+	let dragCurrentY = $state(0);
+	let isDragging = $state(false);
+	// Last two pointer samples for flick-velocity measurement (px/ms).
+	let prevSample: { y: number; t: number } | null = null;
+	let lastSample: { y: number; t: number } | null = null;
+
+	const DISMISS_THRESHOLD = 80;
+	const FLICK_VELOCITY_PX_MS = 0.5;
+
+	function dismiss() {
+		open = false;
+		onclose();
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		dragStartY = e.clientY;
+		dragCurrentY = 0;
+		isDragging = true;
+		prevSample = null;
+		lastSample = { y: e.clientY, t: performance.now() };
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!isDragging) return;
+		const delta = e.clientY - dragStartY;
+		// Dual mode allows upward drag (grow toward expanded); single mode keeps
+		// the legacy downward-only gesture.
+		dragCurrentY = isDual ? delta : Math.max(0, delta);
+		// Velocity sampling for flick release.
+		const t = performance.now();
+		if (lastSample) prevSample = lastSample;
+		lastSample = { y: e.clientY, t: t };
+	}
+
+	function onPointerUp(_e: PointerEvent) {
+		if (!isDragging) return;
+		isDragging = false;
+
+		if (isDual) {
+			const velocity =
+				prevSample && lastSample && lastSample.t > prevSample.t
+					? (lastSample.y - prevSample.y) / (lastSample.t - prevSample.t)
+					: 0;
+			const result = resolveSnapTarget({
+				dragDeltaY: dragCurrentY,
+				velocity,
+				snapPoints,
+				currentIndex: snapIndex
+			});
+			if (result.dismiss) {
+				dismiss();
+			} else {
+				snapIndex = result.index;
+			}
+		} else if (dragCurrentY >= DISMISS_THRESHOLD) {
+			dismiss();
+		}
+		dragCurrentY = 0;
+		prevSample = null;
+		lastSample = null;
+	}
+
+	// Subtle resistance feedback during drag
+	const dragOpacity = $derived(isDragging ? Math.max(0.4, 1 - Math.abs(dragCurrentY) / 300) : 1);
+
+	// Height applied to the panel: dual mode snaps between peek/expanded; single
+	// mode keeps the legacy max-height/fullHeight styling.
+	const panelHeightStyle = $derived.by(() => {
+		if (isDual) {
+			const i = Math.min(snapIndex, snapPoints.length - 1);
+			return `height: ${snapPoints[i].heightPx}px;`;
+		}
+		return fullHeight ? 'height: 100dvh;' : 'max-height: 80dvh;';
+	});
+</script>
+
+{#if open}
+	<!-- Backdrop -->
+	<div
+		class="fixed inset-0 bg-black/50"
+		style="z-index: {zIndex}"
+		role="button"
+		tabindex="-1"
+		aria-label="Close"
+		transition:fade={{ duration: 150 }}
+		onclick={dismiss}
+		onkeydown={(e) => { if (e.key === 'Escape') dismiss(); }}
+	></div>
+
+	<!-- Sheet Panel -->
+	<div
+		class="fixed bottom-0 inset-x-0 flex flex-col bg-base-100 rounded-t-2xl border-t border-base-300 shadow-2xl"
+		style="z-index: {zIndex + 1}; {panelHeightStyle} transform: translateY({dragCurrentY}px); opacity: {dragOpacity}; transition: {isDragging ? 'none' : 'transform 0.15s ease, opacity 0.15s ease, height 0.2s ease'};"
+		role="dialog"
+		tabindex="-1"
+		aria-modal="true"
+		aria-label={title || 'Bottom sheet'}
+		transition:fly={{ y: 300, duration: 200, easing: cubicOut }}
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={(e) => { if (e.key === 'Escape') dismiss(); }}
+	>
+		<!-- Drag handle (pointer capture target) -->
+		<div
+			class="flex-shrink-0 flex justify-center pt-3 pb-1 cursor-grab active:cursor-grabbing touch-none select-none"
+			role="button"
+			tabindex="-1"
+			aria-label="Drag to resize"
+			onpointerdown={onPointerDown}
+			onpointermove={onPointerMove}
+			onpointerup={onPointerUp}
+			onpointercancel={onPointerUp}
+		>
+			<div class="w-10 h-1.5 bg-base-300 rounded-full"></div>
+		</div>
+
+		<!-- Optional header -->
+		{#if title}
+			<div class="flex-shrink-0 flex items-center justify-between px-4 py-2 border-b border-base-200">
+				<span class="text-sm font-semibold">{title}</span>
+				<button
+					type="button"
+					class="btn btn-sm btn-ghost btn-circle"
+					aria-label="Close"
+					onclick={dismiss}
+				>✕</button>
+			</div>
+		{/if}
+
+		<!-- Scrollable content (or overflow-hidden when fullHeight so the slot controls scroll zones).
+		     Keyboard avoidance: the content's bottom padding clears the occluded strip so
+		     inputs stay above the soft keyboard (visualViewport-driven). -->
+		<div
+			class="flex-1 overscroll-contain {fullHeight && !isDual ? 'overflow-hidden' : isDual ? 'overflow-y-auto' : 'overflow-y-auto'}"
+			style={!fullHeight
+				? 'padding-bottom: max(1rem, env(safe-area-inset-bottom));'
+				: keyboardInset > 0
+					? `padding-bottom: ${keyboardInset}px;`
+					: ''}
+		>
+			{@render children?.()}
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,27 @@
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    open?: boolean;
+    title?: string;
+    zIndex?: number;
+    /** When true, sheet takes full viewport height and content wrapper is overflow:hidden so the slot controls its own scroll zones. */
+    fullHeight?: boolean;
+    /** 'single' = legacy drag-to-dismiss only. 'dual' = peek/expanded snaps + flick release + keyboard avoidance. */
+    snap?: 'single' | 'dual';
+    /** Peek snap height as a fraction of the visible (keyboard-adjusted) viewport. */
+    peekFraction?: number;
+    /** Expanded snap height as a fraction of the visible (keyboard-adjusted) viewport. */
+    expandedFraction?: number;
+    onclose?: () => void;
+    /**
+     * Shortcut registry to push a modal context into while open — page
+     * shortcuts registered there stop firing behind it (jatui-voc3i.3).
+     */
+    shortcutRegistry?: ShortcutRegistry;
+    /** Context name pushed while open. Default `'bottom-sheet'`. */
+    shortcutContext?: string;
+    children?: Snippet;
+};
+declare const BottomSheet: import("svelte").Component<$$ComponentProps, {}, "open">;
+type BottomSheet = ReturnType<typeof BottomSheet>;
+export default BottomSheet;

package/dist/components/ConfirmDialog.svelte

@@ -3,6 +3,20 @@
 	import { cubicOut } from 'svelte/easing';
 	import { tick } from 'svelte';
 	import { getPending, confirmDialog, cancelDialog } from '../stores/confirmDialog';
+	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
+
+	let {
+		shortcutRegistry,
+		shortcutContext = 'confirm-dialog'
+	}: {
+		/**
+		 * Shortcut registry to push a modal context into while the dialog is up
+		 * — page shortcuts registered there stop firing behind it (jatui-voc3i.3).
+		 */
+		shortcutRegistry?: ShortcutRegistry;
+		/** Context name pushed while the dialog is up. Default `'confirm-dialog'`. */
+		shortcutContext?: string;
+	} = $props();
 
 	const pending = $derived(getPending());
 	const opts = $derived(pending?.options ?? null);
@@ -58,6 +72,13 @@
 		if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); confirmDialog(); }
 	}
 
+	// While the dialog is up, a modal shortcut context keeps the host page's
+	// registry shortcuts from firing behind it.
+	$effect(() => {
+		if (!visible || !shortcutRegistry) return;
+		return shortcutRegistry.pushContext(shortcutContext, { modal: true });
+	});
+
 	$effect(() => {
 		window.addEventListener('keydown', handleKeydown, true);
 		return () => window.removeEventListener('keydown', handleKeydown, true);

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

@@ -1,3 +1,13 @@
-declare const ConfirmDialog: import("svelte").Component<Record<string, never>, {}, "">;
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
+type $$ComponentProps = {
+    /**
+     * Shortcut registry to push a modal context into while the dialog is up
+     * — page shortcuts registered there stop firing behind it (jatui-voc3i.3).
+     */
+    shortcutRegistry?: ShortcutRegistry;
+    /** Context name pushed while the dialog is up. Default `'confirm-dialog'`. */
+    shortcutContext?: string;
+};
+declare const ConfirmDialog: import("svelte").Component<$$ComponentProps, {}, "">;
 type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
 export default ConfirmDialog;

package/dist/components/ConfirmModal.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { fly, fade } from 'svelte/transition';
   import { cubicOut } from 'svelte/easing';
+  import { untrack } from 'svelte';
+  import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 
   let {
     open = $bindable(true),
@@ -13,6 +15,8 @@
     iconClass = "text-warning",
     onconfirm,
     oncancel,
+    shortcutRegistry,
+    shortcutContext = 'confirm-modal',
   } = $props<{
     open?: boolean
     title?: string
@@ -24,8 +28,19 @@
     iconClass?: string
     onconfirm?: () => void
     oncancel?: () => void
+    /** Shortcut registry to push a modal context into while open (jatui-voc3i.3). */
+    shortcutRegistry?: ShortcutRegistry
+    /** Context name pushed while open. Default `'confirm-modal'`. */
+    shortcutContext?: string
   }>()
 
+  // While open, a modal shortcut context keeps the host page's registry
+  // shortcuts from firing behind it.
+  $effect(() => {
+    if (!open || !shortcutRegistry) return
+    return shortcutRegistry.pushContext(shortcutContext, { modal: true, label: untrack(() => title) || undefined })
+  })
+
   // Respect prefers-reduced-motion: skip the entrance/exit transitions.
   const reducedMotion =
     typeof window !== 'undefined' &&

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

@@ -1,3 +1,4 @@
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 type $$ComponentProps = {
     open?: boolean;
     title?: string;
@@ -9,6 +10,10 @@ type $$ComponentProps = {
     iconClass?: string;
     onconfirm?: () => void;
     oncancel?: () => void;
+    /** Shortcut registry to push a modal context into while open (jatui-voc3i.3). */
+    shortcutRegistry?: ShortcutRegistry;
+    /** Context name pushed while open. Default `'confirm-modal'`. */
+    shortcutContext?: string;
 };
 declare const ConfirmModal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type ConfirmModal = ReturnType<typeof ConfirmModal>;

package/dist/components/Drawer.svelte

@@ -5,7 +5,8 @@
 	 * Sliding panel overlay with backdrop, escape key, and header actions.
 	 */
 
-	import type { Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
+	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 
 	interface Props {
 		open?: boolean;
@@ -26,6 +27,13 @@
 		 * is open.
 		 */
 		trapKeys?: boolean;
+		/**
+		 * Shortcut registry to push a modal context into while open — page
+		 * shortcuts registered there stop firing behind it (jatui-voc3i.3).
+		 */
+		shortcutRegistry?: ShortcutRegistry;
+		/** Context name pushed while open. Default `'drawer'`. */
+		shortcutContext?: string;
 		onclose?: () => void;
 		class?: string;
 		headerActions?: Snippet;
@@ -40,6 +48,8 @@
 		showCloseButton = true,
 		contentClass = '',
 		trapKeys = true,
+		shortcutRegistry,
+		shortcutContext = 'drawer',
 		onclose,
 		class: className = '',
 		headerActions,
@@ -56,6 +66,13 @@
 		full: 'w-full'
 	};
 
+	// While open, a modal shortcut context keeps the host page's registry
+	// shortcuts from firing behind it.
+	$effect(() => {
+		if (!open || !shortcutRegistry) return;
+		return shortcutRegistry.pushContext(shortcutContext, { modal: true, label: untrack(() => title) || undefined });
+	});
+
 	function handleClose() {
 		open = false;
 		onclose?.();

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

@@ -3,7 +3,8 @@
      *
      * Sliding panel overlay with backdrop, escape key, and header actions.
      */
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 interface Props {
     open?: boolean;
     title?: string;
@@ -23,6 +24,13 @@ interface Props {
      * is open.
      */
     trapKeys?: boolean;
+    /**
+     * Shortcut registry to push a modal context into while open — page
+     * shortcuts registered there stop firing behind it (jatui-voc3i.3).
+     */
+    shortcutRegistry?: ShortcutRegistry;
+    /** Context name pushed while open. Default `'drawer'`. */
+    shortcutContext?: string;
     onclose?: () => void;
     class?: string;
     headerActions?: Snippet;

package/dist/components/InputDialog.svelte

@@ -3,6 +3,20 @@
 	import { cubicOut } from 'svelte/easing';
 	import { tick } from 'svelte';
 	import { getPendingInput, submitInput, cancelInput } from '../stores/inputDialog';
+	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
+
+	let {
+		shortcutRegistry,
+		shortcutContext = 'input-dialog'
+	}: {
+		/**
+		 * Shortcut registry to push a modal context into while the dialog is up
+		 * — page shortcuts registered there stop firing behind it (jatui-voc3i.3).
+		 */
+		shortcutRegistry?: ShortcutRegistry;
+		/** Context name pushed while the dialog is up. Default `'input-dialog'`. */
+		shortcutContext?: string;
+	} = $props();
 
 	const pending = $derived(getPendingInput());
 	const opts = $derived(pending?.options ?? null);
@@ -38,6 +52,13 @@
 		if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); handleSubmit(); }
 	}
 
+	// While the dialog is up, a modal shortcut context keeps the host page's
+	// registry shortcuts from firing behind it.
+	$effect(() => {
+		if (!visible || !shortcutRegistry) return;
+		return shortcutRegistry.pushContext(shortcutContext, { modal: true });
+	});
+
 	$effect(() => {
 		window.addEventListener('keydown', handleKeydown, true);
 		return () => window.removeEventListener('keydown', handleKeydown, true);

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

@@ -1,3 +1,13 @@
-declare const InputDialog: import("svelte").Component<Record<string, never>, {}, "">;
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
+type $$ComponentProps = {
+    /**
+     * Shortcut registry to push a modal context into while the dialog is up
+     * — page shortcuts registered there stop firing behind it (jatui-voc3i.3).
+     */
+    shortcutRegistry?: ShortcutRegistry;
+    /** Context name pushed while the dialog is up. Default `'input-dialog'`. */
+    shortcutContext?: string;
+};
+declare const InputDialog: import("svelte").Component<$$ComponentProps, {}, "">;
 type InputDialog = ReturnType<typeof InputDialog>;
 export default InputDialog;

package/dist/components/Modal.svelte

@@ -6,7 +6,8 @@
 	 * Converted from Svelte 4 to Svelte 5 runes.
 	 */
 
-	import { onMount } from 'svelte';
+	import { onMount, untrack } from 'svelte';
+	import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 	import { fly, fade } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 
@@ -42,6 +43,13 @@
 		 * is open.
 		 */
 		trapKeys?: boolean;
+		/**
+		 * Shortcut registry to push a modal context into while open — page
+		 * shortcuts registered there stop firing behind it (jatui-voc3i.3).
+		 */
+		shortcutRegistry?: ShortcutRegistry;
+		/** Context name pushed while open. Default `'modal'`. */
+		shortcutContext?: string;
 		onclose?: () => void;
 		onopen?: () => void;
 		header?: import('svelte').Snippet;
@@ -64,6 +72,8 @@
 		dismissible = true,
 		zIndex = 1000,
 		trapKeys = true,
+		shortcutRegistry,
+		shortcutContext = 'modal',
 		onclose,
 		onopen,
 		header,
@@ -110,6 +120,13 @@
 		}
 	});
 
+	// While open, a modal shortcut context keeps the host page's registry
+	// shortcuts from firing behind it.
+	$effect(() => {
+		if (!open || !shortcutRegistry) return;
+		return shortcutRegistry.pushContext(shortcutContext, { modal: true, label: untrack(() => title) || undefined });
+	});
+
 	function close() {
 		if (dismissible) {
 			open = false;

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

@@ -1,3 +1,4 @@
+import type { ShortcutRegistry } from '../utils/keyboardShortcutRegistry';
 interface Props {
     open?: boolean;
     title?: string;
@@ -30,6 +31,13 @@ interface Props {
      * is open.
      */
     trapKeys?: boolean;
+    /**
+     * Shortcut registry to push a modal context into while open — page
+     * shortcuts registered there stop firing behind it (jatui-voc3i.3).
+     */
+    shortcutRegistry?: ShortcutRegistry;
+    /** Context name pushed while open. Default `'modal'`. */
+    shortcutContext?: string;
     onclose?: () => void;
     onopen?: () => void;
     header?: import('svelte').Snippet;