@joewinke/jatui 0.1.23 → 0.1.24

package/src/lib/components/AvailabilityModal.svelte

@@ -1,177 +0,0 @@
-<script lang="ts">
-	/**
-	 * AvailabilityModal — Modal for setting date overrides: mark a day as unavailable
-	 * or set custom hours. Used in scheduling/booking interfaces.
-	 */
-	import { slide } from 'svelte/transition';
-	import type { DateOverride, OverrideType } from '../types/booking';
-
-	export type { DateOverride, OverrideType };
-
-	let {
-		date,
-		existingOverride = null,
-		hostId = '',
-		onSave,
-		onClose,
-	}: {
-		date: Date;
-		existingOverride?: DateOverride | null;
-		hostId?: string;
-		onSave: (override: DateOverride) => void;
-		onClose: () => void;
-	} = $props();
-
-	// svelte-ignore state_referenced_locally
-	const initialType = existingOverride?.override_type || 'unavailable';
-	// svelte-ignore state_referenced_locally
-	const initialStart = existingOverride?.start_time?.slice(0, 5) || '09:00';
-	// svelte-ignore state_referenced_locally
-	const initialEnd = existingOverride?.end_time?.slice(0, 5) || '17:00';
-	// svelte-ignore state_referenced_locally
-	const initialReason = existingOverride?.reason || '';
-
-	let overrideType = $state<OverrideType>(initialType);
-	let startTime = $state(initialStart);
-	let endTime = $state(initialEnd);
-	let reason = $state(initialReason);
-
-	const formattedDate = $derived(
-		date.toLocaleDateString('en-US', {
-			weekday: 'long',
-			year: 'numeric',
-			month: 'long',
-			day: 'numeric'
-		})
-	);
-
-	function handleSave() {
-		const override: DateOverride = {
-			id: existingOverride?.id || `override-${Date.now()}`,
-			host_id: hostId,
-			override_date: date.toISOString().split('T')[0],
-			override_type: overrideType,
-			start_time: overrideType === 'custom_hours' ? startTime + ':00' : undefined,
-			end_time: overrideType === 'custom_hours' ? endTime + ':00' : undefined,
-			reason: reason.trim() || undefined,
-			created_at: existingOverride?.created_at || new Date().toISOString()
-		};
-
-		onSave(override);
-	}
-
-	function handleBackdropClick(e: MouseEvent) {
-		if (e.target === e.currentTarget) {
-			onClose();
-		}
-	}
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="fixed inset-0 z-50 flex items-center justify-center bg-[color-mix(in_oklch,#180042_55%,transparent)] p-4"
-	onclick={handleBackdropClick}
-	transition:slide={{ duration: 200 }}
->
-	<div class="bg-base-100 rounded-md border border-base-300 w-full max-w-md" transition:slide={{ duration: 300 }}>
-		<!-- Header -->
-		<div class="p-6 border-b border-base-300">
-			<div class="flex items-center justify-between">
-				<h2 class="text-lg font-semibold">Set Date Override</h2>
-				<button onclick={onClose} class="btn btn-ghost btn-sm btn-circle" aria-label="Close">
-					<!-- X icon -->
-					<svg class="w-5 h-5" 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>
-			</div>
-			<p class="text-sm text-base-content/60 mt-1">{formattedDate}</p>
-		</div>
-
-		<!-- Body -->
-		<div class="p-6 space-y-6">
-			<fieldset>
-				<legend class="text-sm font-medium text-base-content/70 mb-3 block">What would you like to do?</legend>
-				<div class="space-y-2">
-					<label class="flex items-start gap-3 p-3 rounded-lg bg-base-200/50 cursor-pointer hover:bg-base-200 transition-colors {overrideType === 'unavailable' ? 'ring-2 ring-primary' : ''}">
-						<input
-							type="radio"
-							name="override_type"
-							value="unavailable"
-							bind:group={overrideType}
-							class="radio radio-primary mt-0.5"
-						/>
-						<div>
-							<p class="font-medium">Mark as Unavailable</p>
-							<p class="text-sm text-base-content/60">No bookings will be allowed on this day</p>
-						</div>
-					</label>
-
-					<label class="flex items-start gap-3 p-3 rounded-lg bg-base-200/50 cursor-pointer hover:bg-base-200 transition-colors {overrideType === 'custom_hours' ? 'ring-2 ring-primary' : ''}">
-						<input
-							type="radio"
-							name="override_type"
-							value="custom_hours"
-							bind:group={overrideType}
-							class="radio radio-primary mt-0.5"
-						/>
-						<div>
-							<p class="font-medium">Set Custom Hours</p>
-							<p class="text-sm text-base-content/60">Override your regular hours for this day</p>
-						</div>
-					</label>
-				</div>
-			</fieldset>
-
-			{#if overrideType === 'custom_hours'}
-				<div transition:slide={{ duration: 200 }}>
-					<p class="text-sm font-medium text-base-content/70 mb-2">Available Hours</p>
-					<div class="flex items-center gap-3">
-						<label class="sr-only" for="avail-start-time">Start time</label>
-						<input
-							id="avail-start-time"
-							type="time"
-							bind:value={startTime}
-							class="input input-bordered bg-base-200/50 flex-1"
-						/>
-						<span class="text-base-content/50">to</span>
-						<label class="sr-only" for="avail-end-time">End time</label>
-						<input
-							id="avail-end-time"
-							type="time"
-							bind:value={endTime}
-							class="input input-bordered bg-base-200/50 flex-1"
-						/>
-					</div>
-				</div>
-			{/if}
-
-			<div>
-				<label for="avail-reason" class="text-sm font-medium text-base-content/70 mb-2 block">
-					Reason <span class="text-base-content/50">(optional)</span>
-				</label>
-				<input
-					id="avail-reason"
-					type="text"
-					bind:value={reason}
-					placeholder="e.g., Vacation, Conference, Doctor's appointment"
-					class="input input-bordered w-full bg-base-200/50"
-				/>
-			</div>
-		</div>
-
-		<!-- Footer -->
-		<div class="p-6 border-t border-base-300 flex gap-3">
-			<button onclick={onClose} class="btn btn-ghost flex-1">
-				Cancel
-			</button>
-			<button
-				onclick={handleSave}
-				class="btn btn-primary flex-1"
-			>
-				Save Override
-			</button>
-		</div>
-	</div>
-</div>

package/src/lib/components/AvatarUpload.svelte

@@ -1,234 +0,0 @@
-<!--
-  AvatarUpload — circular avatar picker with client-side crop to square.
-  Shows current avatar or initials fallback. Click to select a new image.
-  Crops to square via canvas, fires onSelect(file) with the cropped File.
-  Parent handles the actual upload to storage.
--->
-<script lang="ts">
-  interface Props {
-    /** Current avatar URL (from DB) */
-    avatarUrl?: string | null
-    /** User's name for initials fallback */
-    name?: string | null
-    /** User's email for initials fallback */
-    email?: string | null
-    /** Pixel size to crop/resize to */
-    cropSize?: number
-    /** Max file size in bytes before cropping */
-    maxSize?: number
-    /** Whether the upload is disabled */
-    disabled?: boolean
-    /** Whether an upload is in progress */
-    uploading?: boolean
-    /** Fired with the cropped File when user selects an image */
-    onSelect?: (file: File) => void
-    /** Fired when user clicks remove */
-    onRemove?: () => void
-  }
-
-  let {
-    avatarUrl = null,
-    name = null,
-    email = null,
-    cropSize = 256,
-    maxSize = 10 * 1024 * 1024,
-    disabled = false,
-    uploading = false,
-    onSelect = undefined,
-    onRemove = undefined,
-  }: Props = $props()
-
-  let error = $state("")
-  let previewUrl = $state<string | null>(null)
-  let fileInput: HTMLInputElement | undefined = $state()
-  let justUploaded = $state(false)
-
-  const displayUrl = $derived(previewUrl ?? avatarUrl)
-
-  // Flash green border briefly when uploading transitions to done
-  $effect(() => {
-    if (!uploading && previewUrl) {
-      justUploaded = true
-      const t = setTimeout(() => { justUploaded = false }, 1000)
-      return () => clearTimeout(t)
-    }
-  })
-
-  // Colorized initials background — consistent color per user
-  const avatarBg = $derived.by(() => {
-    const source = name || email || ""
-    if (!source) return "oklch(0.62 0.14 240)"
-    let hash = 0
-    for (let i = 0; i < source.length; i++) {
-      hash = source.charCodeAt(i) + ((hash << 5) - hash)
-    }
-    const hues = [30, 85, 145, 200, 240, 270, 310, 350]
-    return `oklch(0.62 0.14 ${hues[Math.abs(hash) % hues.length]})`
-  })
-
-  const initials = $derived.by(() => {
-    const source = name || email || ""
-    if (!source) return "?"
-    const parts = source.includes("@")
-      ? [source.split("@")[0]]
-      : source.split(" ").filter(Boolean)
-    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
-    return parts[0]?.charAt(0).toUpperCase() || "?"
-  })
-
-  function openPicker() {
-    if (disabled || uploading) return
-    fileInput?.click()
-  }
-
-  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. Max ${formatSize(maxSize)}.`
-      input.value = ""
-      return
-    }
-
-    if (!file.type.startsWith("image/")) {
-      error = "Please select an image file."
-      input.value = ""
-      return
-    }
-
-    try {
-      const cropped = await cropToSquare(file, cropSize)
-      if (previewUrl) URL.revokeObjectURL(previewUrl)
-      previewUrl = URL.createObjectURL(cropped)
-      onSelect?.(cropped)
-    } catch (e) {
-      error = "Failed to process image."
-      console.error("AvatarUpload crop error:", e)
-    }
-    input.value = ""
-  }
-
-  function handleRemove() {
-    if (previewUrl) {
-      URL.revokeObjectURL(previewUrl)
-      previewUrl = null
-    }
-    onRemove?.()
-  }
-
-  function cropToSquare(file: File, size: number): Promise<File> {
-    return new Promise((resolve, reject) => {
-      const img = new Image()
-      img.onload = () => {
-        const canvas = document.createElement("canvas")
-        canvas.width = size
-        canvas.height = size
-        const ctx = canvas.getContext("2d")
-        if (!ctx) { reject(new Error("No canvas context")); return }
-
-        // Center-crop: take the largest centered square from the source
-        const min = Math.min(img.width, img.height)
-        const sx = (img.width - min) / 2
-        const sy = (img.height - min) / 2
-
-        ctx.drawImage(img, sx, sy, min, min, 0, 0, size, size)
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) { reject(new Error("Canvas toBlob failed")); return }
-            resolve(new File([blob], "avatar.webp", { type: "image/webp" }))
-          },
-          "image/webp",
-          0.85,
-        )
-        URL.revokeObjectURL(img.src)
-      }
-      img.onerror = () => { URL.revokeObjectURL(img.src); reject(new Error("Image load failed")) }
-      img.src = URL.createObjectURL(file)
-    })
-  }
-
-  function formatSize(bytes: number): string {
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
-    return `${(bytes / (1024 * 1024)).toFixed(0)} MB`
-  }
-
-  $effect(() => {
-    return () => {
-      if (previewUrl) URL.revokeObjectURL(previewUrl)
-    }
-  })
-</script>
-
-<div class="flex items-center gap-4">
-  <!-- Avatar circle -->
-  <button
-    type="button"
-    class="relative group rounded-full overflow-hidden w-20 h-20 shrink-0 cursor-pointer border-2 transition-all duration-300
-      {justUploaded ? 'border-success scale-[1.04]' : 'border-base-300 hover:border-primary'}"
-    class:opacity-50={disabled || uploading}
-    onclick={openPicker}
-    {disabled}
-  >
-    {#if displayUrl}
-      <img src={displayUrl} alt="Avatar" class="w-full h-full object-cover" />
-    {:else}
-      <div class="w-full h-full flex items-center justify-center text-2xl font-semibold text-white" style="background: {avatarBg}">
-        {initials}
-      </div>
-    {/if}
-
-    <!-- Hover overlay -->
-    {#if !disabled && !uploading}
-      <div class="absolute inset-0 bg-[color-mix(in_oklch,#180042_45%,transparent)] opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
-          <circle cx="12" cy="13" r="4"/>
-        </svg>
-      </div>
-    {/if}
-
-    <!-- Loading spinner -->
-    {#if uploading}
-      <div class="absolute inset-0 bg-[color-mix(in_oklch,#180042_45%,transparent)] flex items-center justify-center">
-        <span class="loading loading-spinner loading-sm text-white"></span>
-      </div>
-    {/if}
-  </button>
-
-  <!-- Label + remove -->
-  <div class="flex flex-col gap-1">
-    <button
-      type="button"
-      class="btn btn-sm btn-ghost text-primary"
-      class:btn-disabled={disabled || uploading}
-      onclick={openPicker}
-    >
-      {displayUrl ? "Change photo" : "Upload photo"}
-    </button>
-    {#if displayUrl && onRemove}
-      <button
-        type="button"
-        class="btn btn-sm btn-ghost text-error"
-        class:btn-disabled={disabled || uploading}
-        onclick={handleRemove}
-      >
-        Remove
-      </button>
-    {/if}
-  </div>
-
-  <input
-    bind:this={fileInput}
-    type="file"
-    class="hidden"
-    accept="image/*"
-    onchange={handleFileInput}
-  />
-</div>
-
-{#if error}
-  <p class="text-error text-sm mt-2">{error}</p>
-{/if}

package/src/lib/components/Badge.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-	/**
-	 * Badge Component
-	 *
-	 * Simple DaisyUI badge with variant and size options.
-	 */
-
-	interface Props {
-		variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
-		size?: 'sm' | 'md' | 'lg';
-		class?: string;
-		children?: import('svelte').Snippet;
-	}
-
-	let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();
-
-	const variantClass = $derived(
-		{
-			default: 'badge-neutral',
-			primary: 'badge-primary',
-			secondary: 'badge-secondary',
-			success: 'badge-success',
-			warning: 'badge-warning',
-			error: 'badge-error',
-			info: 'badge-info',
-			neutral: 'badge-neutral'
-		}[variant] || 'badge-neutral'
-	);
-
-	const sizeClass = $derived({ sm: 'badge-sm', md: '', lg: 'badge-lg' }[size]);
-	const badgeClass = $derived(`badge ${variantClass} ${sizeClass} ${className}`.trim());
-</script>
-
-<span class={badgeClass}>
-	{#if children}
-		{@render children()}
-	{/if}
-</span>