@joewinke/jatui 0.1.23 → 0.1.25

package/src/lib/components/ImageLightbox.svelte

@@ -1,274 +0,0 @@
-<script lang="ts">
-  import type { Annotation } from '../types/annotation'
-  import type { MarkupShape } from '../components/markup'
-  import AnnotationLayer from './AnnotationLayer.svelte'
-  import MarkupOverlay from './MarkupOverlay.svelte'
-
-  interface Props {
-    /** URL of the image to display */
-    imageUrl: string
-    /** Alt text / filename for accessibility */
-    filename?: string
-    /** Markup shapes to overlay on the image */
-    markupShapes?: MarkupShape[]
-    /** Annotation pins to display */
-    annotations?: Annotation[]
-    /** Active annotation ID (highlighted pin) */
-    activeAnnotationId?: string | null
-    /** Whether annotation placement mode is active */
-    annotationMode?: boolean
-    /** Called when a pin is clicked */
-    onAnnotationClick?: (annotation: Annotation) => void
-    /** Called when the image is clicked in annotation mode */
-    onImageClick?: (x: number, y: number) => void
-    /** Called when the lightbox requests close */
-    onClose?: () => void
-  }
-
-  let {
-    imageUrl,
-    filename = "Image",
-    markupShapes = [],
-    annotations = [],
-    activeAnnotationId = null,
-    annotationMode = false,
-    onAnnotationClick,
-    onImageClick,
-    onClose,
-  }: Props = $props()
-
-  let isFullscreen = $state(false)
-  let zoom = $state(1)
-  let isLoading = $state(true)
-  let error = $state(false)
-
-  function handleImageLoad() {
-    isLoading = false
-  }
-
-  function handleImageError() {
-    error = true
-    isLoading = false
-  }
-
-  function toggleFullscreen() {
-    isFullscreen = !isFullscreen
-    if (!isFullscreen) {
-      zoom = 1
-    }
-  }
-
-  function zoomIn() {
-    zoom = Math.min(3, zoom + 0.25)
-  }
-
-  function zoomOut() {
-    zoom = Math.max(0.5, zoom - 0.25)
-  }
-
-  function resetZoom() {
-    zoom = 1
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape") {
-      if (isFullscreen) {
-        isFullscreen = false
-        zoom = 1
-      } else {
-        onClose?.()
-      }
-    } else if (e.key === "+" || e.key === "=") {
-      zoomIn()
-    } else if (e.key === "-") {
-      zoomOut()
-    } else if (e.key === "0") {
-      resetZoom()
-    }
-  }
-
-  function handleBackdropClick(e: MouseEvent) {
-    if (e.target === e.currentTarget) {
-      if (isFullscreen) {
-        isFullscreen = false
-        zoom = 1
-      }
-    }
-  }
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="flex flex-col h-full min-h-[400px]">
-  <!-- Inline Preview -->
-  <div class="flex-1 bg-base-200 flex items-center justify-center p-2 overflow-auto">
-    {#if isLoading}
-      <div class="flex items-center justify-center">
-        <span class="loading loading-spinner loading-lg text-primary"></span>
-      </div>
-    {/if}
-
-    {#if error}
-      <div class="text-center">
-        <svg
-          class="mx-auto h-12 w-12 text-error"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-          />
-        </svg>
-        <p class="mt-2 text-error">Failed to load image</p>
-      </div>
-    {:else}
-      <div
-        class="relative inline-block"
-        class:hidden={isLoading}
-      >
-        {#if !annotationMode}
-          <button
-            type="button"
-            onclick={toggleFullscreen}
-            class="focus:outline-none focus:ring-2 focus:ring-primary rounded"
-            aria-label="Click to view fullscreen"
-          >
-            <img
-              src={imageUrl}
-              alt={filename}
-              class="max-w-full max-h-full object-contain rounded border border-base-300 shadow-lg cursor-zoom-in"
-              style="max-height: 60vh;"
-              onload={handleImageLoad}
-              onerror={handleImageError}
-            />
-          </button>
-        {:else}
-          <img
-            src={imageUrl}
-            alt={filename}
-            class="max-w-full max-h-full object-contain rounded border border-base-300 shadow-lg"
-            style="max-height: 60vh;"
-            onload={handleImageLoad}
-            onerror={handleImageError}
-          />
-        {/if}
-
-        <!-- Markup shapes overlay -->
-        {#if markupShapes.length > 0}
-          <MarkupOverlay shapes={markupShapes} {imageUrl} />
-        {/if}
-
-        <!-- Annotation overlay -->
-        {#if annotations.length > 0 || annotationMode}
-          <AnnotationLayer
-            {annotations}
-            {activeAnnotationId}
-            {annotationMode}
-            {onAnnotationClick}
-            {onImageClick}
-          />
-        {/if}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<!-- Fullscreen Modal -->
-{#if isFullscreen}
-  <div
-    class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
-    onclick={handleBackdropClick}
-    onkeydown={(e) => e.key === "Escape" && handleBackdropClick(e as unknown as MouseEvent)}
-    role="dialog"
-    aria-modal="true"
-    aria-label="Image fullscreen view"
-    tabindex="-1"
-  >
-    <!-- Close Button -->
-    <button
-      class="absolute top-4 right-4 btn btn-circle btn-ghost text-white hover:bg-white/20"
-      onclick={() => { isFullscreen = false; zoom = 1; }}
-      title="Close (Esc)"
-    >
-      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M6 18L18 6M6 6l12 12"
-        />
-      </svg>
-    </button>
-
-    <!-- Zoom Controls -->
-    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 bg-black/50 rounded-lg p-2">
-      <button
-        class="btn btn-sm btn-ghost text-white"
-        onclick={zoomOut}
-        disabled={zoom <= 0.5}
-        title="Zoom out (-)"
-      >
-        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
-        </svg>
-      </button>
-
-      <span class="text-white text-sm min-w-[60px] text-center">
-        {Math.round(zoom * 100)}%
-      </span>
-
-      <button
-        class="btn btn-sm btn-ghost text-white"
-        onclick={zoomIn}
-        disabled={zoom >= 3}
-        title="Zoom in (+)"
-      >
-        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-        </svg>
-      </button>
-
-      <button
-        class="btn btn-sm btn-ghost text-white"
-        onclick={resetZoom}
-        title="Reset zoom (0)"
-      >
-        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-          />
-        </svg>
-      </button>
-    </div>
-
-    <!-- Image with overlays -->
-    <div class="relative overflow-auto max-w-full max-h-full p-4">
-      <div class="relative inline-block">
-        <img
-          src={imageUrl}
-          alt={filename}
-          class="transition-transform duration-200"
-          style="transform: scale({zoom}); transform-origin: center center;"
-        />
-        {#if markupShapes.length > 0}
-          <MarkupOverlay shapes={markupShapes} {imageUrl} />
-        {/if}
-        {#if annotations.length > 0}
-          <AnnotationLayer
-            {annotations}
-            {activeAnnotationId}
-            annotationMode={false}
-            {onAnnotationClick}
-          />
-        {/if}
-      </div>
-    </div>
-  </div>
-{/if}

package/src/lib/components/ImageUpload.svelte

@@ -1,147 +0,0 @@
-<script lang="ts">
-  let {
-    imageUrl = "",
-    disabled = false,
-    label = "Upload Image",
-    maxSize = 10 * 1024 * 1024,
-    onUpload = undefined,
-  } = $props<{
-    imageUrl?: string
-    disabled?: boolean
-    label?: string
-    maxSize?: number
-    onUpload?: (url: string) => void
-  }>()
-
-  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 = ""
-    const input = event.target as HTMLInputElement
-    if (!input.files?.length) return
-
-    const file = input.files[0]
-
-    if (file.size > maxSize) {
-      error = `File too large! Maximum size is ${formatFileSize(maxSize)}.`
-      return
-    }
-
-    const url = URL.createObjectURL(file)
-    imageUrl = url
-
-    if (onUpload) {
-      onUpload(url)
-    }
-  }
-
-  function clearImage() {
-    if (imageUrl.startsWith("blob:")) {
-      URL.revokeObjectURL(imageUrl)
-    }
-    imageUrl = ""
-    error = ""
-  }
-
-  function formatFileSize(bytes: number): string {
-    if (bytes < 1024) return `${bytes} bytes`
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-  }
-
-  $effect(() => {
-    return () => {
-      if (imageUrl.startsWith("blob:")) {
-        URL.revokeObjectURL(imageUrl)
-      }
-    }
-  })
-</script>
-
-{#if imageUrl}
-  <div class="relative w-full h-40 bg-base-200 rounded-md overflow-hidden">
-    <img src={imageUrl} alt="Uploaded" class="w-full h-full object-contain" />
-    <button
-      class="btn btn-sm btn-circle absolute top-2 right-2 bg-base-100/80"
-      onclick={clearImage}
-      {disabled}
-      aria-label="Remove image"
-    >
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-    </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 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 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"
-      class="hidden"
-      accept="image/*"
-      {disabled}
-      onchange={handleFileInput}
-    />
-  </label>
-{/if}
-
-{#if error}
-  <p class="text-error text-sm mt-1">{error}</p>
-{/if}

package/src/lib/components/InlineEdit.svelte

@@ -1,291 +0,0 @@
-<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>