@joewinke/jatui 0.1.25 → 0.1.26

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

@@ -0,0 +1,25 @@
+import type { Annotation } from '../types/annotation';
+import type { MarkupShape } from '../components/markup';
+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;
+}
+declare const ImageLightbox: import("svelte").Component<Props, {}, "">;
+type ImageLightbox = ReturnType<typeof ImageLightbox>;
+export default ImageLightbox;

package/dist/components/ImageUpload.svelte

@@ -0,0 +1,147 @@
+<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/dist/components/ImageUpload.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    imageUrl?: string;
+    disabled?: boolean;
+    label?: string;
+    maxSize?: number;
+    onUpload?: (url: string) => void;
+};
+declare const ImageUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
+export default ImageUpload;