@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/AvailabilityModal.svelte

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

@@ -0,0 +1,14 @@
+import type { DateOverride } from '../types/booking';
+type $$ComponentProps = {
+    date: Date;
+    existingOverride?: DateOverride | null;
+    hostId?: string;
+    onSave: (override: DateOverride) => void;
+    onClose: () => void;
+};
+declare const AvailabilityModal: import("svelte").Component<$$ComponentProps, {
+    DateOverride: typeof DateOverride;
+    OverrideType: typeof OverrideType;
+}, "">;
+type AvailabilityModal = ReturnType<typeof AvailabilityModal>;
+export default AvailabilityModal;

package/dist/components/AvatarUpload.svelte

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

@@ -0,0 +1,23 @@
+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;
+}
+declare const AvatarUpload: import("svelte").Component<Props, {}, "">;
+type AvatarUpload = ReturnType<typeof AvatarUpload>;
+export default AvatarUpload;

package/dist/components/Badge.svelte

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

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

@@ -0,0 +1,14 @@
+/**
+ * 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;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;