@joewinke/jatui 0.1.11 → 0.1.20

package/src/lib/components/ImageUpload.svelte

@@ -14,6 +14,38 @@
   }>()
 
   let error = $state("")
+  let isDragging = $state(false)
+
+  function handleDragOver(event: DragEvent) {
+    event.preventDefault()
+    isDragging = true
+  }
+
+  function handleDragLeave(event: DragEvent) {
+    // Only clear if leaving the label entirely (not entering a child)
+    if (!(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node)) {
+      isDragging = false
+    }
+  }
+
+  function handleDrop(event: DragEvent) {
+    event.preventDefault()
+    isDragging = false
+    error = ""
+    const file = event.dataTransfer?.files[0]
+    if (!file) return
+    if (!file.type.startsWith("image/")) {
+      error = "Please drop an image file."
+      return
+    }
+    if (file.size > maxSize) {
+      error = `File too large! Maximum size is ${formatFileSize(maxSize)}.`
+      return
+    }
+    const url = URL.createObjectURL(file)
+    imageUrl = url
+    onUpload?.(url)
+  }
 
   async function handleFileInput(event: Event) {
     error = ""
@@ -71,17 +103,34 @@
     </button>
   </div>
 {:else}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
   <label
-    class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-md cursor-pointer bg-base-200 hover:bg-base-300"
+    class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-md cursor-pointer transition-all duration-200
+      {isDragging
+        ? 'border-primary bg-primary/8 scale-[1.01]'
+        : 'border-base-content/20 bg-base-200 hover:bg-base-300 hover:border-base-content/30'}"
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    ondrop={handleDrop}
   >
-    <div class="flex flex-col items-center justify-center pt-5 pb-6">
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
-      <p class="mb-2 text-sm">
-        <span class="font-semibold">Click to upload</span> or drag and drop
-      </p>
-      <p class="text-xs opacity-70">
-        PNG, JPG or JPEG (max {formatFileSize(maxSize)})
-      </p>
+    <div class="flex flex-col items-center justify-center pt-5 pb-6 pointer-events-none">
+      {#if isDragging}
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2 text-primary">
+          <path d="M12 15V3"/><path d="M7 10l5 5 5-5"/>
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+        </svg>
+        <p class="mb-2 text-sm font-semibold text-primary">Drop to upload</p>
+      {:else}
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2 text-base-content/40">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/>
+        </svg>
+        <p class="mb-2 text-sm">
+          <span class="font-semibold">Click to upload</span> or drag and drop
+        </p>
+        <p class="text-xs text-base-content/45">
+          PNG, JPG or JPEG (max {formatFileSize(maxSize)})
+        </p>
+      {/if}
     </div>
     <input
       type="file"

package/src/lib/components/InlineEdit.svelte

@@ -62,6 +62,7 @@
 
 	// Internal state
 	let isEditing = $state(false);
+	// svelte-ignore state_referenced_locally
 	let editValue = $state(value);
 	let isSaving = $state(false);
 	let inputElement = $state<HTMLInputElement | HTMLTextAreaElement | null>(null);
@@ -136,6 +137,8 @@
 		});
 	}
 
+	import { fade } from 'svelte/transition';
+
 	// Auto-resize textarea to fit content
 	function autoresize(node: HTMLTextAreaElement) {
 		function resize() {
@@ -157,14 +160,14 @@
 
 {#if isEditing}
 	<!-- Edit mode -->
-	<div class="inline-edit-container w-full {className}">
+	<div class="inline-edit-container w-full {className}" in:fade={{ duration: 120 }}>
 		{#if type === 'textarea'}
 			<textarea
 				bind:this={inputElement}
 				bind:value={editValue}
 				{placeholder}
 				{rows}
-				class="textarea textarea-bordered w-full text-sm resize-none overflow-hidden"
+				class="textarea textarea-bordered w-full text-[0.9375rem] resize-none overflow-hidden"
 				style="min-height: {rows * 1.5}rem;"
 				disabled={isSaving}
 				onkeydown={handleKeyDown}
@@ -217,6 +220,7 @@
 	<!-- Display mode -->
 	<button
 		class="inline-edit-display text-left w-full rounded px-2 py-1 transition-colors {disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-base-200'} {truncate ? 'inline-edit-truncate' : ''} {className}"
+		in:fade={{ duration: 120 }}
 		onclick={startEditing}
 		disabled={disabled}
 		type="button"

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>