@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/components/AnnotationLayer.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { Annotation, AnnotationThread } from '../types/annotation'
+
+  interface Props {
+    annotations: Annotation[]
+    activeAnnotationId?: string | null
+    annotationMode?: boolean
+    showResolved?: boolean
+    onAnnotationClick?: (annotation: Annotation) => void
+    onImageClick?: (x: number, y: number) => void
+  }
+
+  let {
+    annotations = [],
+    activeAnnotationId = null,
+    annotationMode = false,
+    showResolved = false,
+    onAnnotationClick,
+    onImageClick,
+  }: Props = $props()
+
+  // Group into threads (only show root pins)
+  const threads = $derived.by(() => {
+    const roots = annotations.filter((a) => !a.parent_annotation_id)
+    return roots
+      .filter((r) => showResolved || !r.resolved)
+      .map((root) => ({
+        root,
+        replies: annotations.filter((a) => a.parent_annotation_id === root.id),
+      }))
+  })
+
+  function handleOverlayClick(e: MouseEvent) {
+    if (!annotationMode || !onImageClick) return
+    const target = e.currentTarget as HTMLElement
+    const rect = target.getBoundingClientRect()
+    const x = ((e.clientX - rect.left) / rect.width) * 100
+    const y = ((e.clientY - rect.top) / rect.height) * 100
+    onImageClick(Math.round(x * 1000) / 1000, Math.round(y * 1000) / 1000)
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="absolute inset-0 z-10"
+  class:cursor-crosshair={annotationMode}
+  class:pointer-events-none={!annotationMode && threads.length === 0}
+  onclick={handleOverlayClick}
+>
+  {#each threads as thread (thread.root.id)}
+    {@const isActive = activeAnnotationId === thread.root.id}
+    {@const replyCount = thread.replies.length}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="absolute pointer-events-auto"
+      style="left: {thread.root.x_percent}%; top: {thread.root.y_percent}%; transform: translate(-50%, -100%);"
+    >
+      <button
+        class="relative group flex flex-col items-center"
+        onclick={(e) => { e.stopPropagation(); onAnnotationClick?.(thread.root) }}
+        title={thread.root.content.slice(0, 80)}
+      >
+        <!-- Pin icon -->
+        <div
+          class="w-7 h-7 rounded-full flex items-center justify-center shadow-lg border-2 transition-all
+            {isActive
+              ? 'bg-primary border-primary text-primary-content scale-125'
+              : thread.root.resolved
+                ? 'bg-success/80 border-success/60 text-success-content'
+                : 'bg-warning border-warning/80 text-warning-content hover:scale-110'}"
+        >
+          {#if thread.root.resolved}
+            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+            </svg>
+          {:else}
+            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z" />
+            </svg>
+          {/if}
+        </div>
+
+        <!-- Reply count badge -->
+        {#if replyCount > 0}
+          <span class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-base-content text-base-100 text-[10px] font-bold flex items-center justify-center">
+            {replyCount}
+          </span>
+        {/if}
+
+        <!-- Pin tail -->
+        <div
+          class="w-0.5 h-2 -mt-0.5 {isActive ? 'bg-primary' : thread.root.resolved ? 'bg-success/60' : 'bg-warning/80'}"
+        ></div>
+      </button>
+    </div>
+  {/each}
+
+  <!-- Placement indicator when in annotation mode -->
+  {#if annotationMode}
+    <div class="absolute inset-0 border-2 border-dashed border-primary/30 rounded pointer-events-none">
+      <div class="absolute top-2 left-1/2 -translate-x-1/2 bg-primary/90 text-primary-content text-xs px-3 py-1 rounded-full shadow whitespace-nowrap">
+        Click to place annotation
+      </div>
+    </div>
+  {/if}
+</div>

package/src/lib/components/AnnotationPanel.svelte

@@ -0,0 +1,319 @@
+<script lang="ts">
+  import type { Annotation, AnnotationProfile, AnnotationCallbacks } from '../types/annotation'
+
+  interface Props {
+    annotations: Annotation[]
+    profiles: Record<string, AnnotationProfile>
+    activeAnnotationId?: string | null
+    currentUserId: string
+    callbacks: AnnotationCallbacks
+    onAnnotationSelect?: (annotation: Annotation | null) => void
+    onAnnotationsChanged?: () => void
+  }
+
+  let {
+    annotations = [],
+    profiles = {},
+    activeAnnotationId = null,
+    currentUserId,
+    callbacks,
+    onAnnotationSelect,
+    onAnnotationsChanged,
+  }: Props = $props()
+
+  let replyContent = $state("")
+  let isSubmitting = $state(false)
+  let showResolved = $state(false)
+  let editingId = $state<string | null>(null)
+  let editContent = $state("")
+
+  // Group annotations into threads
+  const threads = $derived.by(() => {
+    const roots = annotations.filter((a) => !a.parent_annotation_id)
+    return roots
+      .filter((r) => showResolved || !r.resolved)
+      .map((root) => ({
+        root,
+        replies: annotations
+          .filter((a) => a.parent_annotation_id === root.id)
+          .sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime()),
+      }))
+      .sort((a, b) => new Date(b.root.created_at).getTime() - new Date(a.root.created_at).getTime())
+  })
+
+  const resolvedCount = $derived(
+    annotations.filter((a) => !a.parent_annotation_id && a.resolved).length,
+  )
+  const totalRoots = $derived(annotations.filter((a) => !a.parent_annotation_id).length)
+
+  function getAuthorName(userId: string): string {
+    return profiles[userId]?.full_name || "Unknown"
+  }
+
+  function getInitials(userId: string): string {
+    const name = getAuthorName(userId)
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2)
+  }
+
+  function formatTime(dateStr: string): string {
+    const date = new Date(dateStr)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    if (diffMins < 1) return "just now"
+    if (diffMins < 60) return `${diffMins}m ago`
+    const diffHours = Math.floor(diffMins / 60)
+    if (diffHours < 24) return `${diffHours}h ago`
+    const diffDays = Math.floor(diffHours / 24)
+    if (diffDays < 7) return `${diffDays}d ago`
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" })
+  }
+
+  async function submitReply(parentId: string) {
+    if (!replyContent.trim() || isSubmitting) return
+    isSubmitting = true
+    try {
+      await callbacks.onAddReply(parentId, replyContent.trim())
+      replyContent = ""
+      onAnnotationsChanged?.()
+    } catch (err) {
+      console.error("Error posting reply:", err)
+    } finally {
+      isSubmitting = false
+    }
+  }
+
+  async function toggleResolve(annotation: Annotation) {
+    try {
+      await callbacks.onResolve(annotation.id, !annotation.resolved)
+      onAnnotationsChanged?.()
+    } catch (err) {
+      console.error("Error updating annotation:", err)
+    }
+  }
+
+  async function deleteAnnotation(id: string) {
+    try {
+      await callbacks.onDelete(id)
+      if (activeAnnotationId === id) onAnnotationSelect?.(null)
+      onAnnotationsChanged?.()
+    } catch (err) {
+      console.error("Error deleting annotation:", err)
+    }
+  }
+
+  async function saveEdit(id: string) {
+    if (!editContent.trim() || isSubmitting) return
+    isSubmitting = true
+    try {
+      await callbacks.onEdit(id, editContent.trim())
+      editingId = null
+      editContent = ""
+      onAnnotationsChanged?.()
+    } catch (err) {
+      console.error("Error editing annotation:", err)
+    } finally {
+      isSubmitting = false
+    }
+  }
+
+  function startEdit(annotation: Annotation) {
+    editingId = annotation.id
+    editContent = annotation.content
+  }
+</script>
+
+<div class="flex flex-col h-full">
+  <!-- Header -->
+  <div class="flex items-center justify-between px-3 py-2 border-b border-base-300 flex-shrink-0">
+    <div class="flex items-center gap-2">
+      <h4 class="text-sm font-semibold">Annotations</h4>
+      {#if totalRoots > 0}
+        <span class="badge badge-xs badge-ghost">{totalRoots - resolvedCount} open</span>
+      {/if}
+    </div>
+    {#if resolvedCount > 0}
+      <label class="flex items-center gap-1.5 cursor-pointer">
+        <span class="text-xs text-base-content/50">Show resolved</span>
+        <input
+          type="checkbox"
+          class="toggle toggle-xs"
+          bind:checked={showResolved}
+        />
+      </label>
+    {/if}
+  </div>
+
+  <!-- Thread list -->
+  <div class="flex-1 overflow-y-auto">
+    {#if threads.length === 0}
+      <div class="text-center py-8 px-4">
+        <svg class="mx-auto h-10 w-10 text-base-content/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
+        </svg>
+        <p class="text-sm text-base-content/40 mt-2">No annotations yet</p>
+        <p class="text-xs text-base-content/30 mt-1">Click the pin icon then click on the image to add one</p>
+      </div>
+    {:else}
+      {#each threads as thread (thread.root.id)}
+        {@const isActive = activeAnnotationId === thread.root.id}
+        <div
+          class="border-b border-base-200 transition-colors {isActive ? 'bg-primary/5' : 'hover:bg-base-200/50'}"
+        >
+          <!-- Root annotation -->
+          <button
+            class="w-full text-left px-3 py-2.5"
+            onclick={() => onAnnotationSelect?.(isActive ? null : thread.root)}
+          >
+            <div class="flex items-start gap-2">
+              <!-- Avatar -->
+              <div class="flex-shrink-0 w-6 h-6 rounded-full bg-primary/10 text-primary flex items-center justify-center text-[10px] font-bold mt-0.5">
+                {getInitials(thread.root.user_id)}
+              </div>
+              <div class="flex-1 min-w-0">
+                <div class="flex items-center gap-1.5">
+                  <span class="text-xs font-medium text-base-content">{getAuthorName(thread.root.user_id)}</span>
+                  <span class="text-[10px] text-base-content/40">{formatTime(thread.root.created_at)}</span>
+                  {#if thread.root.resolved}
+                    <span class="badge badge-xs badge-success gap-0.5">
+                      <svg class="w-2.5 h-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
+                      </svg>
+                      Resolved
+                    </span>
+                  {/if}
+                </div>
+                <p class="text-sm text-base-content/80 mt-0.5 {isActive ? '' : 'line-clamp-2'}">{thread.root.content}</p>
+                {#if thread.replies.length > 0 && !isActive}
+                  <span class="text-xs text-base-content/40 mt-1 inline-block">
+                    {thread.replies.length} {thread.replies.length === 1 ? "reply" : "replies"}
+                  </span>
+                {/if}
+              </div>
+            </div>
+          </button>
+
+          <!-- Expanded thread -->
+          {#if isActive}
+            <div class="px-3 pb-3 space-y-2">
+              <!-- Actions for root -->
+              <div class="flex items-center gap-1 ml-8">
+                <button
+                  class="btn btn-ghost btn-xs gap-1 {thread.root.resolved ? 'text-warning' : 'text-success'}"
+                  onclick={() => toggleResolve(thread.root)}
+                >
+                  {#if thread.root.resolved}
+                    <svg class="w-3 h-3" 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>
+                    Reopen
+                  {:else}
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                    </svg>
+                    Resolve
+                  {/if}
+                </button>
+                {#if thread.root.user_id === currentUserId}
+                  <button
+                    class="btn btn-ghost btn-xs text-base-content/50"
+                    onclick={() => startEdit(thread.root)}
+                  >Edit</button>
+                  <button
+                    class="btn btn-ghost btn-xs text-error/70"
+                    onclick={() => deleteAnnotation(thread.root.id)}
+                  >Delete</button>
+                {/if}
+              </div>
+
+              <!-- Edit form for root -->
+              {#if editingId === thread.root.id}
+                <div class="ml-8 space-y-1.5">
+                  <textarea
+                    class="textarea textarea-bordered textarea-sm w-full"
+                    rows="2"
+                    bind:value={editContent}
+                  ></textarea>
+                  <div class="flex gap-1">
+                    <button class="btn btn-xs btn-primary" onclick={() => saveEdit(thread.root.id)} disabled={isSubmitting}>Save</button>
+                    <button class="btn btn-xs btn-ghost" onclick={() => { editingId = null; editContent = ""; }}>Cancel</button>
+                  </div>
+                </div>
+              {/if}
+
+              <!-- Replies -->
+              {#each thread.replies as reply (reply.id)}
+                <div class="ml-8 flex items-start gap-2 bg-base-200/50 rounded-lg p-2">
+                  <div class="flex-shrink-0 w-5 h-5 rounded-full bg-secondary/10 text-secondary flex items-center justify-center text-[9px] font-bold mt-0.5">
+                    {getInitials(reply.user_id)}
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-1.5">
+                      <span class="text-xs font-medium">{getAuthorName(reply.user_id)}</span>
+                      <span class="text-[10px] text-base-content/40">{formatTime(reply.created_at)}</span>
+                    </div>
+                    {#if editingId === reply.id}
+                      <div class="mt-1 space-y-1.5">
+                        <textarea
+                          class="textarea textarea-bordered textarea-xs w-full"
+                          rows="2"
+                          bind:value={editContent}
+                        ></textarea>
+                        <div class="flex gap-1">
+                          <button class="btn btn-xs btn-primary" onclick={() => saveEdit(reply.id)} disabled={isSubmitting}>Save</button>
+                          <button class="btn btn-xs btn-ghost" onclick={() => { editingId = null; editContent = ""; }}>Cancel</button>
+                        </div>
+                      </div>
+                    {:else}
+                      <p class="text-sm text-base-content/80 mt-0.5">{reply.content}</p>
+                      {#if reply.user_id === currentUserId}
+                        <div class="flex gap-1 mt-1">
+                          <button class="btn btn-ghost btn-xs text-base-content/40 h-5 min-h-0" onclick={() => startEdit(reply)}>Edit</button>
+                          <button class="btn btn-ghost btn-xs text-error/50 h-5 min-h-0" onclick={() => deleteAnnotation(reply.id)}>Delete</button>
+                        </div>
+                      {/if}
+                    {/if}
+                  </div>
+                </div>
+              {/each}
+
+              <!-- Reply input -->
+              <div class="ml-8 flex gap-2">
+                <textarea
+                  class="textarea textarea-bordered textarea-sm flex-1 min-h-[36px]"
+                  rows="1"
+                  placeholder="Reply..."
+                  bind:value={replyContent}
+                  onkeydown={(e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault()
+                      submitReply(thread.root.id)
+                    }
+                  }}
+                ></textarea>
+                <button
+                  class="btn btn-sm btn-primary self-end"
+                  disabled={!replyContent.trim() || isSubmitting}
+                  onclick={() => submitReply(thread.root.id)}
+                >
+                  {#if isSubmitting}
+                    <span class="loading loading-spinner loading-xs"></span>
+                  {:else}
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
+                    </svg>
+                  {/if}
+                </button>
+              </div>
+            </div>
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>

package/src/lib/components/AudioWaveform.svelte

@@ -15,9 +15,9 @@
     waveColor = "neutral",
     progressColor = "accent",
     backgroundColor = "base-100",
-    waveColorHex = "#6b7280",
-    progressColorHex = "#f97316",
-    backgroundColorHex = "#f1f5f9",
+    waveColorHex = "",
+    progressColorHex = "",
+    backgroundColorHex = "",
     interactive = true,
     showTrimControls = false,
     onTrim,
@@ -69,8 +69,11 @@
     }
   }
 
+  // svelte-ignore state_referenced_locally
   let resolvedWaveColor = $state(resolveColor(waveColor, waveColorHex))
+  // svelte-ignore state_referenced_locally
   let resolvedProgressColor = $state(resolveColor(progressColor, progressColorHex))
+  // svelte-ignore state_referenced_locally
   let resolvedBackgroundColor = $state(resolveColor(backgroundColor, backgroundColorHex))
 
   function updateResolvedColors() {
@@ -79,7 +82,7 @@
     resolvedBackgroundColor = resolveColor(backgroundColor, backgroundColorHex)
   }
 
-  onMount(async () => {
+  onMount(() => {
     const cleanupThemeWatcher = watchThemeChanges(() => {
       updateResolvedColors()
       if (canvasContext && canvas && waveformData.length > 0) {
@@ -488,6 +491,7 @@
       audio.play()
 
       const checkTime = () => {
+        if (!audio) return
         if (audio.currentTime >= trimEnd) {
           audio.pause()
         } else if (isPlaying) {
@@ -612,7 +616,7 @@
 
     {#if isHovering && interactive && hoverX > 0}
       <div
-        class="absolute pointer-events-none bg-base-900 text-base-100 text-xs px-2 py-1 rounded shadow-lg z-10"
+        class="absolute pointer-events-none bg-neutral text-neutral-content text-xs px-2 py-1 rounded z-10"
         style="left: {hoverX - 20}px; top: -30px;"
       >
         {formatTime(hoverTime)}

package/src/lib/components/AvailabilityModal.svelte

@@ -22,9 +22,13 @@
 		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);
@@ -66,15 +70,15 @@
 <!-- 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-black/50 backdrop-blur-sm p-4"
+	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-2xl border border-base-300 shadow-2xl w-full max-w-md" transition:slide={{ duration: 300 }}>
+	<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-xl font-bold">Set Date Override</h2>
+				<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">

package/src/lib/components/AvatarUpload.svelte

@@ -41,9 +41,31 @@
   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 "?"
@@ -144,7 +166,8 @@
   <!-- Avatar circle -->
   <button
     type="button"
-    class="relative group rounded-full overflow-hidden w-20 h-20 shrink-0 cursor-pointer border-2 border-base-300 hover:border-primary transition-colors"
+    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}
@@ -152,14 +175,14 @@
     {#if displayUrl}
       <img src={displayUrl} alt="Avatar" class="w-full h-full object-cover" />
     {:else}
-      <div class="w-full h-full bg-neutral text-neutral-content flex items-center justify-center text-2xl font-semibold">
+      <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-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+      <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"/>
@@ -169,7 +192,7 @@
 
     <!-- Loading spinner -->
     {#if uploading}
-      <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
+      <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}

package/src/lib/components/BookingForm.svelte

@@ -48,7 +48,9 @@
 		accentColor?: string;
 	} = $props();
 
+	// svelte-ignore state_referenced_locally
 	let guestName = $state(initialName);
+	// svelte-ignore state_referenced_locally
 	let guestEmail = $state(initialEmail);
 	let guestPhone = $state('');
 	let guestNotes = $state('');
@@ -101,7 +103,7 @@
 <form onsubmit={handleSubmit} class="space-y-6">
 	<!-- Name -->
 	<div>
-		<label for="booking-name" class="block text-sm font-medium text-base-content/70 mb-2">
+		<label for="booking-name" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
 			Your Name <span class="text-error">*</span>
 		</label>
 		<input
@@ -117,7 +119,7 @@
 
 	<!-- Email -->
 	<div>
-		<label for="booking-email" class="block text-sm font-medium text-base-content/70 mb-2">
+		<label for="booking-email" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
 			Email Address <span class="text-error">*</span>
 		</label>
 		<input
@@ -129,14 +131,14 @@
 			disabled={submitting}
 			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
 		/>
-		<p class="text-xs text-base-content/50 mt-1">
+		<p class="text-[0.75rem] text-base-content/45 mt-1">
 			Confirmation and meeting details will be sent here
 		</p>
 	</div>
 
 	<!-- Phone -->
 	<div>
-		<label for="booking-phone" class="block text-sm font-medium text-base-content/70 mb-2">
+		<label for="booking-phone" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
 			Phone Number {#if requirePhone}<span class="text-error">*</span>{:else}<span class="text-base-content/50">(optional)</span>{/if}
 		</label>
 		<input
@@ -149,7 +151,7 @@
 			class="input input-bordered w-full bg-base-200/50 focus:border-{accentColor}"
 		/>
 		{#if locationHint}
-			<p class="text-xs text-base-content/50 mt-1">{locationHint}</p>
+			<p class="text-[0.75rem] text-base-content/45 mt-1">{locationHint}</p>
 		{/if}
 	</div>
 
@@ -158,8 +160,8 @@
 		<div class="border-t border-base-300 pt-6">
 			<div class="flex items-center justify-between mb-4">
 				<div>
-					<h3 class="text-sm font-medium">Additional Attendees</h3>
-					<p class="text-xs text-base-content/50">Invite team members to join the meeting</p>
+					<h3 class="text-[0.9375rem] font-medium">Additional Attendees</h3>
+					<p class="text-[0.75rem] text-base-content/45">Invite team members to join the meeting</p>
 				</div>
 				{#if !showAttendees}
 					<button
@@ -231,7 +233,7 @@
 	<!-- Notes -->
 	{#if showNotes}
 		<div>
-			<label for="booking-notes" class="block text-sm font-medium text-base-content/70 mb-2">
+			<label for="booking-notes" class="block text-[0.8125rem] font-medium text-base-content/85 mb-2">
 				Additional Notes <span class="text-base-content/50">(optional)</span>
 			</label>
 			<textarea
@@ -247,7 +249,7 @@
 
 	<!-- Terms Notice -->
 	{#if showTerms}
-		<div class="bg-base-200/30 rounded-lg p-4 text-sm text-base-content/60">
+		<div class="bg-base-200/30 rounded-lg p-4 text-[0.8125rem] text-base-content/45">
 			<p>
 				By scheduling this meeting, you agree to our
 				<a href={termsUrl} class="text-{accentColor} hover:underline">Terms of Service</a>