@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/components/InputDialog.svelte

@@ -0,0 +1,327 @@
+<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/LazyImage.svelte

@@ -25,6 +25,7 @@
 
   let loaded = $state(false)
   let error = $state(false)
+  // svelte-ignore state_referenced_locally
   let shouldLoad = $state(preload || priority)
   let containerRef: HTMLDivElement
 

package/src/lib/components/LinkShortener.svelte

@@ -77,7 +77,7 @@
 <div class="space-y-4 {className}">
 	{#if showHeader}
 		<div class="flex items-center justify-between">
-			<h2 class="text-xl font-bold">Short Links</h2>
+			<h2 class="text-lg font-semibold">Short Links</h2>
 			{#if !showForm}
 				<button class="btn btn-primary btn-sm" onclick={() => showForm = true}>
 					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">

package/src/lib/components/LoadingSpinner.svelte

@@ -61,7 +61,7 @@
 
 	const containerClass = $derived(
 		[
-			overlay ? 'fixed inset-0 bg-black/50 flex items-center justify-center z-50' : '',
+			overlay ? 'fixed inset-0 flex items-center justify-center z-50' : '',
 			centered && !overlay ? 'flex items-center justify-center' : '',
 			textPosition === 'left' || textPosition === 'right' ? 'flex items-center' : '',
 			textPosition === 'top' || textPosition === 'bottom' ? 'flex flex-col items-center' : ''
@@ -70,6 +70,10 @@
 			.join(' ')
 	);
 
+	const containerStyle = $derived(
+		overlay ? 'background: color-mix(in oklch, #180042 55%, transparent)' : ''
+	);
+
 	const textClass = $derived(
 		['text-sm text-base-content/70', { top: 'mb-2', bottom: 'mt-2', left: 'mr-2', right: 'ml-2' }[textPosition]]
 			.filter(Boolean)
@@ -80,7 +84,7 @@
 </script>
 
 {#if visible}
-	<div class={containerClass} aria-label={ariaLabel} role="status" aria-live="polite">
+	<div class={containerClass} style={containerStyle} aria-label={ariaLabel} role="status" aria-live="polite">
 		{#if text && textPosition === 'top'}
 			<div class={textClass}>{text}</div>
 		{/if}