@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/InputDialog.svelte

@@ -1,327 +0,0 @@
-<script lang="ts">
-	import { fly, fade } from 'svelte/transition';
-	import { cubicOut } from 'svelte/easing';
-	import { tick } from 'svelte';
-	import { getPendingInput, submitInput, cancelInput } from '../stores/inputDialog.svelte';
-
-	const pending = $derived(getPendingInput());
-	const opts = $derived(pending?.options ?? null);
-	const visible = $derived(pending !== null);
-
-	let value = $state('');
-	let error = $state<string | null>(null);
-	let inputRef = $state<HTMLInputElement | null>(null);
-
-	$effect(() => {
-		if (visible && opts) {
-			value = '';
-			error = null;
-			tick().then(() => inputRef?.focus());
-		}
-	});
-
-	function handleSubmit() {
-		if (opts?.validate) {
-			const msg = opts.validate(value);
-			if (msg !== null) { error = msg; return; }
-		}
-		error = null;
-		submitInput(value);
-	}
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (!visible) return;
-		if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); cancelInput(); }
-		if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); handleSubmit(); }
-	}
-
-	$effect(() => {
-		window.addEventListener('keydown', handleKeydown, true);
-		return () => window.removeEventListener('keydown', handleKeydown, true);
-	});
-</script>
-
-{#if visible && opts}
-	<!-- Scrim (above ConfirmDialog z-9990/9991) -->
-	<div
-		class="id-scrim"
-		transition:fade={{ duration: 120 }}
-		role="presentation"
-		onclick={cancelInput}
-	></div>
-
-	<!-- Dialog -->
-	<div
-		class="id-wrap"
-		role="dialog"
-		aria-modal="true"
-		aria-label="{opts.title}. Press Enter to confirm or Escape to cancel."
-		in:fly={{ y: -20, duration: 200, easing: cubicOut }}
-		out:fade={{ duration: 120 }}
-	>
-		<div class="id-box">
-			<!-- Icon + title -->
-			<div class="id-header">
-				<div class="id-icon">
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
-						<path d="M12 20h9"/>
-						<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>
-					</svg>
-				</div>
-				<div class="id-title-group">
-					<h3 class="id-title">{opts.title}</h3>
-					{#if opts.body}
-						<p class="id-body">{opts.body}</p>
-					{/if}
-				</div>
-			</div>
-
-			<!-- Input field -->
-			<input
-				bind:this={inputRef}
-				bind:value
-				oninput={() => { if (error) error = null; }}
-				type="text"
-				class="id-input"
-				class:id-input-error={error !== null}
-				placeholder={opts.placeholder ?? ''}
-				maxlength={opts.maxLength}
-				autocomplete="off"
-				spellcheck="false"
-			/>
-			{#if error !== null || opts.maxLength}
-				<div class="id-field-footer">
-					{#if error !== null}
-						<p class="id-error">{error}</p>
-					{:else}
-						<span></span>
-					{/if}
-					{#if opts.maxLength}
-						<span class="id-char-count">{value.length}/{opts.maxLength}</span>
-					{/if}
-				</div>
-			{/if}
-
-			<!-- Actions -->
-			<div class="id-actions">
-				<button
-					type="button"
-					class="id-btn id-btn-cancel"
-					onclick={cancelInput}
-				>
-					<kbd class="id-kbd">Esc</kbd>
-					<span>{opts.cancelLabel ?? 'Cancel'}</span>
-				</button>
-
-				<button
-					type="button"
-					class="id-btn id-btn-confirm"
-					onclick={handleSubmit}
-				>
-					<kbd class="id-kbd">⏎</kbd>
-					<span>{opts.confirmLabel ?? 'OK'}</span>
-				</button>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.id-scrim {
-		position: fixed;
-		inset: 0;
-		background: oklch(0 0 0 / 0.45);
-		z-index: 9991;
-		backdrop-filter: blur(2px);
-	}
-
-	.id-wrap {
-		position: fixed;
-		top: 5rem;
-		left: 50%;
-		transform: translateX(-50%);
-		z-index: 9992;
-		pointer-events: auto;
-		width: max-content;
-		max-width: min(92vw, 460px);
-	}
-
-	.id-box {
-		display: flex;
-		flex-direction: column;
-		gap: 0.625rem;
-		padding: 1rem 1.125rem 0.625rem;
-		background: oklch(0.17 0.02 250 / 0.98);
-		border: 1px solid oklch(0.32 0.03 250);
-		border-radius: 0.875rem;
-		box-shadow:
-			0 20px 60px oklch(0 0 0 / 0.55),
-			0 0 0 1px oklch(0.28 0.03 250 / 0.5);
-		backdrop-filter: blur(16px);
-	}
-
-	.id-header {
-		display: flex;
-		align-items: flex-start;
-		gap: 0.875rem;
-	}
-
-	.id-icon {
-		flex-shrink: 0;
-		width: 2.25rem;
-		height: 2.25rem;
-		border-radius: 0.5rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: oklch(0.30 0.06 200 / 0.35);
-		border: 1px solid oklch(0.45 0.10 200 / 0.4);
-		color: oklch(0.75 0.12 200);
-	}
-
-	.id-icon svg {
-		width: 1.125rem;
-		height: 1.125rem;
-	}
-
-	.id-title-group {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		flex: 1;
-		min-width: 0;
-	}
-
-	.id-title {
-		margin: 0;
-		font-size: 0.9375rem;
-		font-weight: 600;
-		color: oklch(0.92 0.04 250);
-		line-height: 1.3;
-	}
-
-	.id-body {
-		margin: 0;
-		font-size: 0.8rem;
-		color: oklch(0.60 0.03 250);
-		line-height: 1.5;
-	}
-
-	.id-input {
-		width: 100%;
-		padding: 0.4375rem 0.75rem;
-		font-size: 0.875rem;
-		background: oklch(0.13 0.02 250);
-		border: 1px solid oklch(0.32 0.03 250);
-		border-radius: 0.5rem;
-		color: oklch(0.92 0.04 250);
-		outline: none;
-		transition: border-color 0.1s ease;
-		box-sizing: border-box;
-	}
-
-	.id-input::placeholder {
-		color: oklch(0.45 0.03 250);
-	}
-
-	.id-input:focus {
-		border-color: oklch(0.55 0.12 250);
-		box-shadow: 0 0 0 2px oklch(0.55 0.12 250 / 0.2);
-	}
-
-	.id-input-error,
-	.id-input-error:focus {
-		border-color: oklch(0.55 0.20 25);
-		box-shadow: 0 0 0 2px oklch(0.55 0.20 25 / 0.2);
-	}
-
-	.id-field-footer {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.5rem;
-		margin-top: -0.125rem;
-		min-height: 1rem;
-	}
-
-	.id-error {
-		margin: 0;
-		font-size: 0.75rem;
-		color: oklch(0.65 0.18 25);
-		line-height: 1.4;
-	}
-
-	.id-char-count {
-		margin-left: auto;
-		font-size: 0.75rem;
-		color: oklch(0.50 0.03 250);
-		font-variant-numeric: tabular-nums;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.id-actions {
-		display: flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding-top: 0.125rem;
-	}
-
-	.id-btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.3125rem 0.75rem;
-		font-size: 0.8rem;
-		font-weight: 500;
-		border-radius: 0.5rem;
-		border: 1px solid transparent;
-		background: transparent;
-		color: oklch(0.80 0.04 250);
-		cursor: pointer;
-		transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
-		white-space: nowrap;
-	}
-
-	.id-btn:hover {
-		background: oklch(0.24 0.03 250);
-		border-color: oklch(0.32 0.04 250);
-	}
-
-	.id-btn-cancel:focus-visible {
-		outline: 2px solid oklch(0.60 0.10 250);
-		outline-offset: 2px;
-	}
-
-	.id-btn-confirm {
-		background: oklch(0.28 0.04 250 / 0.6);
-		border-color: oklch(0.40 0.05 250);
-	}
-
-	.id-btn-confirm:hover {
-		background: oklch(0.34 0.06 250);
-		border-color: oklch(0.50 0.08 250);
-	}
-
-	.id-btn-confirm:focus-visible {
-		outline: 2px solid oklch(0.60 0.10 250);
-		outline-offset: 2px;
-	}
-
-	.id-kbd {
-		font-family: ui-monospace, monospace;
-		font-size: 0.65rem;
-		padding: 0.0625rem 0.3125rem;
-		background: oklch(0.22 0.02 250);
-		border: 1px solid oklch(0.30 0.03 250);
-		border-bottom-width: 2px;
-		border-radius: 0.25rem;
-		color: oklch(0.75 0.04 250);
-		line-height: 1.6;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.id-input { transition: none; }
-		.id-btn { transition: none; }
-	}
-</style>

package/src/lib/components/KeyboardShortcutsOverlay.svelte

@@ -1,296 +0,0 @@
-<script lang="ts">
-	/**
-	 * KeyboardShortcutsOverlay — press `?` to toggle a modal listing the
-	 * keyboard shortcuts available on the current page. Press `?` again or
-	 * `Escape` to dismiss. Input/contenteditable fields and Ctrl/Meta/Alt
-	 * combos are ignored so the shortcut never interferes with typing.
-	 *
-	 * Usage:
-	 *
-	 *   <KeyboardShortcutsOverlay shortcuts={[
-	 *     { key: 'j / ↓', description: 'Focus next item' },
-	 *     { key: 'k / ↑', description: 'Focus previous item' },
-	 *     { key: 'Enter', description: 'Open detail' },
-	 *   ]} />
-	 */
-
-	export interface KeyboardShortcut {
-		key: string;
-		description: string;
-	}
-
-	export interface SectionEntry {
-		key: string;
-		description: string;
-		/** Optional oklch color to tint the key badge — used for legend entries */
-		color?: string;
-	}
-
-	export interface ShortcutSection {
-		title: string;
-		shortcuts: SectionEntry[];
-	}
-
-	let {
-		shortcuts = [],
-		sections,
-		title = 'Keyboard Shortcuts',
-		open = $bindable(false)
-	}: {
-		shortcuts?: KeyboardShortcut[];
-		/**
-		 * Optional grouped sections (e.g. mode-specific shortcut tables for
-		 * /inbox: list / detail / compose). When provided, takes
-		 * precedence over the flat `shortcuts` prop.
-		 */
-		sections?: ShortcutSection[];
-		title?: string;
-		open?: boolean;
-	} = $props();
-
-	let isOpen = $state(open);
-
-	$effect(() => {
-		isOpen = open;
-	});
-	$effect(() => {
-		open = isOpen;
-	});
-
-	function isTypingTarget(target: EventTarget | null): boolean {
-		if (!(target instanceof HTMLElement)) return false;
-		const tag = target.tagName;
-		if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
-		return target.isContentEditable;
-	}
-
-	function onKeydown(e: KeyboardEvent) {
-		if (e.ctrlKey || e.metaKey || e.altKey) return;
-
-		if (e.key === '?') {
-			// `?` is always Shift+/. Don't trigger while typing — would swallow the char.
-			if (isTypingTarget(e.target)) return;
-			e.preventDefault();
-			isOpen = !isOpen;
-			return;
-		}
-
-		if (isOpen && e.key === 'Escape') {
-			e.preventDefault();
-			isOpen = false;
-		}
-	}
-
-	$effect(() => {
-		window.addEventListener('keydown', onKeydown);
-		return () => window.removeEventListener('keydown', onKeydown);
-	});
-</script>
-
-{#if isOpen}
-	<div
-		class="kso-backdrop"
-		role="presentation"
-		onclick={() => (isOpen = false)}
-	>
-		<div
-			class="kso-panel animate-scale-in"
-			role="dialog"
-			aria-modal="true"
-			aria-label={title}
-			onclick={(e) => e.stopPropagation()}
-			onkeydown={(e) => e.stopPropagation()}
-			tabindex="-1"
-		>
-			<div class="kso-header">
-				<h2 class="kso-title">{title}</h2>
-				<button
-					type="button"
-					class="kso-close"
-					onclick={() => (isOpen = false)}
-					aria-label="Close keyboard shortcuts"
-				>
-					×
-				</button>
-			</div>
-			<div class="kso-list">
-				{#if sections && sections.length > 0}
-					{#each sections as section, sIdx (section.title + '::' + sIdx)}
-						<div class="kso-section-title">{section.title}</div>
-						{#each section.shortcuts as { key, description, color }, i (section.title + '::' + key + '::' + i)}
-							<div class="kso-row">
-								<kbd
-									class="kso-key"
-									style={color
-										? `color:${color};border-color:color-mix(in oklch,${color} 50%,oklch(0.35 0.02 250));background:color-mix(in oklch,${color} 12%,oklch(0.25 0.02 250))`
-										: ''}
-								>
-									{key}
-								</kbd>
-								<span class="kso-description">{description}</span>
-							</div>
-						{/each}
-					{/each}
-				{:else}
-					{#each shortcuts as { key, description }, i (key + '::' + i)}
-						<div class="kso-row">
-							<kbd class="kso-key">{key}</kbd>
-							<span class="kso-description">{description}</span>
-						</div>
-					{/each}
-				{/if}
-				<div class="kso-row kso-row-meta">
-					<kbd class="kso-key">?</kbd>
-					<span class="kso-description">Toggle this overlay</span>
-				</div>
-				<div class="kso-row kso-row-meta">
-					<kbd class="kso-key">Esc</kbd>
-					<span class="kso-description">Close overlay</span>
-				</div>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.kso-backdrop {
-		position: fixed;
-		inset: 0;
-		background: oklch(0 0 0 / 0.6);
-		backdrop-filter: blur(2px);
-		z-index: 60;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 1.5rem;
-		animation: kso-fade 0.15s ease-out;
-	}
-
-	.kso-panel {
-		background: oklch(0.18 0.02 250);
-		border: 1px solid oklch(0.30 0.03 250);
-		border-radius: 0.75rem;
-		box-shadow: 0 20px 60px oklch(0 0 0 / 0.6);
-		max-width: 34rem;
-		width: 100%;
-		max-height: 80vh;
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.kso-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.9rem 1.25rem;
-		border-bottom: 1px solid oklch(0.25 0.02 250);
-		flex-shrink: 0;
-	}
-
-	.kso-title {
-		font-size: 0.95rem;
-		font-weight: 600;
-		color: oklch(0.92 0.02 250);
-		margin: 0;
-		letter-spacing: 0.01em;
-	}
-
-	.kso-close {
-		background: transparent;
-		border: none;
-		color: oklch(0.65 0.02 250);
-		font-size: 1.5rem;
-		line-height: 1;
-		cursor: pointer;
-		padding: 0.15rem 0.5rem;
-		border-radius: 0.35rem;
-		transition:
-			background 0.12s ease,
-			color 0.12s ease;
-	}
-
-	.kso-close:hover {
-		color: oklch(0.94 0.02 250);
-		background: oklch(0.25 0.02 250);
-	}
-
-	.kso-list {
-		padding: 0.75rem 1.25rem 1.25rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.3rem;
-		overflow-y: auto;
-	}
-
-	.kso-row {
-		display: flex;
-		align-items: center;
-		gap: 1rem;
-		padding: 0.4rem 0.25rem;
-	}
-
-	.kso-section-title {
-		font-size: 0.7rem;
-		text-transform: uppercase;
-		letter-spacing: 0.08em;
-		color: oklch(0.62 0.05 240);
-		padding: 0.55rem 0.25rem 0.2rem;
-		border-bottom: 1px solid oklch(0.25 0.02 250);
-		margin-top: 0.25rem;
-	}
-
-	.kso-section-title:first-of-type {
-		margin-top: 0;
-		padding-top: 0.1rem;
-	}
-
-	.kso-row-meta {
-		opacity: 0.7;
-		border-top: 1px dashed oklch(0.25 0.02 250);
-		margin-top: 0.25rem;
-		padding-top: 0.5rem;
-	}
-
-	.kso-row-meta:not(:first-of-type) {
-		border-top: none;
-		margin-top: 0;
-	}
-
-	.kso-key {
-		font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
-		font-size: 0.78rem;
-		background: oklch(0.25 0.02 250);
-		border: 1px solid oklch(0.35 0.02 250);
-		border-bottom-width: 2px;
-		border-radius: 0.35rem;
-		padding: 0.18rem 0.55rem;
-		min-width: 3.25rem;
-		text-align: center;
-		color: oklch(0.93 0.02 250);
-		flex-shrink: 0;
-		white-space: nowrap;
-	}
-
-	.kso-description {
-		font-size: 0.85rem;
-		color: oklch(0.78 0.02 250);
-		line-height: 1.35;
-	}
-
-	@keyframes kso-fade {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.kso-backdrop,
-		.kso-panel {
-			animation: none !important;
-		}
-	}
-</style>