@joewinke/jatui 0.1.24 → 0.1.26

package/dist/components/InlineEdit.svelte

@@ -0,0 +1,291 @@
+<script module lang="ts">
+	// Declared in the module script so `import type { DisplaySegment } from
+	// './InlineEdit.svelte'` resolves (instance-script exports are not module members).
+	/** A display segment for formula-aware rendering */
+	export interface DisplaySegment {
+		type: 'text' | 'formula';
+		display: string;
+		tooltip?: string;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * InlineEdit Component
+	 *
+	 * A reusable inline editing component for text and textarea inputs.
+	 * Shows display value when not editing, converts to input on click.
+	 *
+	 * Features:
+	 * - Auto-saves on blur or Enter (Enter only for text type)
+	 * - Cancels on Escape, reverting to original value
+	 * - Hover state to indicate editability
+	 * - Auto-focus when editing starts
+	 * - Disabled state during saves
+	 * - Optional formula-aware display: segments with type/display/tooltip
+	 */
+
+	interface Props {
+		/** Current value */
+		value: string;
+		/** Callback when value is saved */
+		onSave: (newValue: string) => Promise<void> | void;
+		/** Input type: 'text' or 'textarea' */
+		type?: 'text' | 'textarea';
+		/** Placeholder text when empty */
+		placeholder?: string;
+		/** Disable editing */
+		disabled?: boolean;
+		/** Additional CSS classes for the container */
+		class?: string;
+		/** Number of rows for textarea (default: 3) */
+		rows?: number;
+		/** Show save/cancel buttons instead of auto-save on blur */
+		showButtons?: boolean;
+		/** Truncate long text with ellipsis (shows full text on hover) */
+		truncate?: boolean;
+		/** Optional display segments for formula-aware rendering */
+		displaySegments?: DisplaySegment[];
+	}
+
+	let {
+		value,
+		onSave,
+		type = 'text',
+		placeholder = 'Click to edit...',
+		disabled = false,
+		class: className = '',
+		rows = 3,
+		showButtons = false,
+		truncate = false,
+		displaySegments = []
+	}: Props = $props();
+
+	// --- Formula rendering ---
+	let hasFormulas = $derived(displaySegments.length > 0);
+
+	// 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);
+
+	// Sync editValue when value prop changes (only when not editing)
+	$effect(() => {
+		if (!isEditing) {
+			editValue = value;
+		}
+	});
+
+	// Start editing
+	function startEditing() {
+		if (disabled || isSaving) return;
+		editValue = value;
+		isEditing = true;
+	}
+
+	// Cancel editing
+	function cancelEditing() {
+		editValue = value;
+		isEditing = false;
+	}
+
+	// Save the edited value
+	async function saveValue() {
+		// Don't save if value hasn't changed
+		if (editValue === value) {
+			isEditing = false;
+			return;
+		}
+
+		isSaving = true;
+		try {
+			await onSave(editValue);
+			isEditing = false;
+		} catch (err) {
+			console.error('Failed to save:', err);
+			// Keep editing mode open on error
+		} finally {
+			isSaving = false;
+		}
+	}
+
+	// Handle keydown events
+	function handleKeyDown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			cancelEditing();
+		} else if (event.key === 'Enter') {
+			if (type === 'text' || event.metaKey || event.ctrlKey) {
+				event.preventDefault();
+				saveValue();
+			}
+		}
+	}
+
+	// Handle blur (auto-save when not using buttons)
+	function handleBlur() {
+		if (!showButtons) {
+			saveValue();
+		}
+	}
+
+	// Auto-focus action
+	function autofocus(node: HTMLElement) {
+		requestAnimationFrame(() => {
+			node.focus();
+			if (node instanceof HTMLInputElement) {
+				node.select();
+			}
+		});
+	}
+
+	import { fade } from 'svelte/transition';
+
+	// Auto-resize textarea to fit content
+	function autoresize(node: HTMLTextAreaElement) {
+		function resize() {
+			node.style.height = 'auto';
+			node.style.height = node.scrollHeight + 'px';
+		}
+
+		requestAnimationFrame(resize);
+
+		node.addEventListener('input', resize);
+
+		return {
+			destroy() {
+				node.removeEventListener('input', resize);
+			}
+		};
+	}
+</script>
+
+{#if isEditing}
+	<!-- Edit mode -->
+	<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-[0.9375rem] resize-none overflow-hidden"
+				style="min-height: {rows * 1.5}rem;"
+				disabled={isSaving}
+				onkeydown={handleKeyDown}
+				onblur={handleBlur}
+				use:autofocus
+				use:autoresize
+			></textarea>
+		{:else}
+			<input
+				bind:this={inputElement}
+				bind:value={editValue}
+				type="text"
+				{placeholder}
+				class="input input-bordered input-sm w-full"
+				disabled={isSaving}
+				onkeydown={handleKeyDown}
+				onblur={handleBlur}
+				use:autofocus
+			/>
+		{/if}
+
+		{#if showButtons}
+			<div class="flex gap-1 mt-1">
+				<button
+					class="btn btn-xs btn-success"
+					onclick={saveValue}
+					disabled={isSaving}
+				>
+					{#if isSaving}
+						<span class="loading loading-spinner loading-xs"></span>
+					{:else}
+						Save
+					{/if}
+				</button>
+				<button
+					class="btn btn-xs btn-ghost"
+					onclick={cancelEditing}
+					disabled={isSaving}
+				>
+					Cancel
+				</button>
+			</div>
+		{:else if isSaving}
+			<div class="absolute right-2 top-1/2 -translate-y-1/2">
+				<span class="loading loading-spinner loading-xs"></span>
+			</div>
+		{/if}
+	</div>
+{:else}
+	<!-- 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"
+		title={truncate && value ? value : undefined}
+	>
+		{#if value}
+			{#if hasFormulas}
+				<span class={type === 'textarea' ? 'whitespace-pre-wrap' : (truncate ? 'truncate-text' : '')}>
+					{#each displaySegments as seg}
+						{#if seg.type === 'formula'}
+							<span class="inline-fx-result" title={seg.tooltip}>{seg.display}</span>
+						{:else}
+							{seg.display}
+						{/if}
+					{/each}
+				</span>
+			{:else if type === 'textarea'}
+				<span class="whitespace-pre-wrap">{value}</span>
+			{:else}
+				<span class={truncate ? 'truncate-text' : ''}>{value}</span>
+			{/if}
+		{:else}
+			<span class="text-base-content/50 italic">{placeholder}</span>
+		{/if}
+	</button>
+{/if}
+
+<style>
+	.inline-edit-container {
+		position: relative;
+	}
+
+	.inline-edit-display {
+		min-height: 2rem;
+		display: flex;
+		align-items: center;
+	}
+
+	/* Truncation styles */
+	.inline-edit-truncate {
+		max-width: 100%;
+		overflow: hidden;
+	}
+
+	.truncate-text {
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 100%;
+	}
+
+	.inline-fx-result {
+		display: inline;
+		padding: 0 4px;
+		border-radius: 3px;
+		background: oklch(0.25 0.06 80 / 0.4);
+		border: 1px solid oklch(0.35 0.08 80 / 0.3);
+		color: oklch(0.82 0.10 80);
+		font-family: 'JetBrains Mono', ui-monospace, monospace;
+		font-size: 0.85em;
+		cursor: help;
+	}
+</style>

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

@@ -0,0 +1,45 @@
+/** A display segment for formula-aware rendering */
+export interface DisplaySegment {
+    type: 'text' | 'formula';
+    display: string;
+    tooltip?: string;
+}
+/**
+ * InlineEdit Component
+ *
+ * A reusable inline editing component for text and textarea inputs.
+ * Shows display value when not editing, converts to input on click.
+ *
+ * Features:
+ * - Auto-saves on blur or Enter (Enter only for text type)
+ * - Cancels on Escape, reverting to original value
+ * - Hover state to indicate editability
+ * - Auto-focus when editing starts
+ * - Disabled state during saves
+ * - Optional formula-aware display: segments with type/display/tooltip
+ */
+interface Props {
+    /** Current value */
+    value: string;
+    /** Callback when value is saved */
+    onSave: (newValue: string) => Promise<void> | void;
+    /** Input type: 'text' or 'textarea' */
+    type?: 'text' | 'textarea';
+    /** Placeholder text when empty */
+    placeholder?: string;
+    /** Disable editing */
+    disabled?: boolean;
+    /** Additional CSS classes for the container */
+    class?: string;
+    /** Number of rows for textarea (default: 3) */
+    rows?: number;
+    /** Show save/cancel buttons instead of auto-save on blur */
+    showButtons?: boolean;
+    /** Truncate long text with ellipsis (shows full text on hover) */
+    truncate?: boolean;
+    /** Optional display segments for formula-aware rendering */
+    displaySegments?: DisplaySegment[];
+}
+declare const InlineEdit: import("svelte").Component<Props, {}, "">;
+type InlineEdit = ReturnType<typeof InlineEdit>;
+export default InlineEdit;

package/dist/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/dist/components/InputDialog.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const InputDialog: import("svelte").Component<Record<string, never>, {}, "">;
+type InputDialog = ReturnType<typeof InputDialog>;
+export default InputDialog;