@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/components/ImageLightbox.svelte

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

@@ -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

@@ -1,3 +1,12 @@
+<script module lang="ts">
+	/** A display segment for formula-aware rendering */
+	export interface DisplaySegment {
+		type: 'text' | 'formula';
+		display: string;
+		tooltip?: string;
+	}
+</script>
+
 <script lang="ts">
 	/**
 	 * InlineEdit Component
@@ -14,13 +23,6 @@
 	 * - Optional formula-aware display: segments with type/display/tooltip
 	 */
 
-	/** A display segment for formula-aware rendering */
-	export interface DisplaySegment {
-		type: 'text' | 'formula';
-		display: string;
-		tooltip?: string;
-	}
-
 	interface Props {
 		/** Current value */
 		value: string;
@@ -62,6 +64,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 +139,8 @@
 		});
 	}
 
+	import { fade } from 'svelte/transition';
+
 	// Auto-resize textarea to fit content
 	function autoresize(node: HTMLTextAreaElement) {
 		function resize() {
@@ -157,14 +162,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 +222,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"