@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/components/SortDropdown.svelte

@@ -98,6 +98,9 @@
 		sm: 'w-24 focus:w-36',
 		md: 'w-32 focus:w-44'
 	}[size]);
+
+	import { fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 </script>
 
 <div class="flex items-center gap-1">
@@ -107,7 +110,7 @@
 	<div class="dropdown dropdown-end flex-shrink-0" onclick={(e) => e.stopPropagation()}>
 		<button
 			tabindex="0"
-			class="btn {buttonSizeClass} btn-ghost gap-1 font-mono text-[10px] uppercase tracking-wider opacity-70 hover:opacity-100"
+			class="btn {buttonSizeClass} btn-ghost gap-1 text-[0.75rem] opacity-70 hover:opacity-100"
 			title="Sort"
 		>
 			<span>{currentIcon}</span>
@@ -115,7 +118,7 @@
 			<span class="text-[9px]">{sortDir === 'asc' ? '▲' : '▼'}</span>
 		</button>
 		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-		<ul tabindex="0" class="dropdown-content menu {menuSizeClass} bg-base-200 rounded-box z-40 w-36 p-1 shadow-lg border border-base-300">
+		<ul tabindex="0" class="dropdown-content menu {menuSizeClass} bg-base-200 rounded-box z-40 w-36 p-1 border border-base-300">
 			{#each options as opt (opt.value)}
 				<li>
 					<button
@@ -137,7 +140,10 @@
 	{#if showFilter}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="flex-shrink-0" onclick={(e) => e.stopPropagation()}>
+		<div class="flex-shrink-0" onclick={(e) => e.stopPropagation()}
+			in:fly={{ x: -8, duration: 180, easing: cubicOut }}
+			out:fly={{ x: -4, duration: 120, easing: cubicOut }}
+		>
 			<input
 				type="text"
 				placeholder={filterPlaceholder}

package/src/lib/components/Sparkline.svelte

@@ -13,12 +13,15 @@
 		height = 32,
 		color = 'oklch(var(--p))',
 		fillOpacity = 0.15,
+		labels,
 	}: {
 		values: number[];
 		width?: number | 'auto';
 		height?: number;
 		color?: string;
 		fillOpacity?: number;
+		/** Optional tooltip label per bar. If provided, shown as SVG title on hover. */
+		labels?: string[];
 	} = $props();
 
 	let el: HTMLDivElement | undefined = $state();
@@ -76,6 +79,12 @@
 			.style('fill', color)
 			.style('fill-opacity', (_, i) => fillOpacity + (1 - fillOpacity) * (i / n));
 
+		bars.each(function (d, i) {
+			d3.select(this).selectAll('title').remove();
+			const label = labels && labels[i] !== undefined ? labels[i] : String(d);
+			d3.select(this).append('title').text(label);
+		});
+
 		if (shouldAnimate) {
 			bars
 				.attr('y', innerH)

package/src/lib/components/StatusBadge.svelte

@@ -1,10 +1,4 @@
-<script lang="ts">
-	/**
-	 * StatusBadge Component
-	 *
-	 * Predefined status badge with semantic colors, icons, and dot indicators.
-	 */
-
+<script module lang="ts">
 	export type StatusValue =
 		| 'active'
 		| 'inactive'
@@ -20,6 +14,14 @@
 		| 'partial'
 		| 'assigned'
 		| 'available';
+</script>
+
+<script lang="ts">
+	/**
+	 * StatusBadge Component
+	 *
+	 * Predefined status badge with semantic colors, icons, and dot indicators.
+	 */
 
 	interface Props {
 		status: StatusValue;
@@ -50,18 +52,18 @@
 	const statusConfig: Record<string, { text: string; variant: string; icon: string }> = {
 		active: { text: 'Active', variant: 'success', icon: '✓' },
 		inactive: { text: 'Inactive', variant: 'error', icon: '✗' },
-		pending: { text: 'Pending', variant: 'warning', icon: '⏳' },
+		pending: { text: 'Pending', variant: 'warning', icon: '' },
 		completed: { text: 'Completed', variant: 'success', icon: '✓' },
 		cancelled: { text: 'Cancelled', variant: 'error', icon: '✗' },
-		draft: { text: 'Draft', variant: 'default', icon: '📝' },
-		scheduled: { text: 'Scheduled', variant: 'info', icon: '📅' },
-		'in-progress': { text: 'In Progress', variant: 'primary', icon: '⏱️' },
-		overdue: { text: 'Overdue', variant: 'error', icon: '⚠️' },
-		paid: { text: 'Paid', variant: 'success', icon: '💰' },
-		unpaid: { text: 'Unpaid', variant: 'warning', icon: '💸' },
-		partial: { text: 'Partial', variant: 'warning', icon: '📊' },
+		draft: { text: 'Draft', variant: 'default', icon: '' },
+		scheduled: { text: 'Scheduled', variant: 'info', icon: '' },
+		'in-progress': { text: 'In Progress', variant: 'primary', icon: '' },
+		overdue: { text: 'Overdue', variant: 'error', icon: '' },
+		paid: { text: 'Paid', variant: 'success', icon: '✓' },
+		unpaid: { text: 'Unpaid', variant: 'warning', icon: '' },
+		partial: { text: 'Partial', variant: 'warning', icon: '' },
 		assigned: { text: 'Assigned', variant: 'success', icon: '✓' },
-		available: { text: 'Available', variant: 'info', icon: '⭕' }
+		available: { text: 'Available', variant: 'info', icon: '' }
 	};
 
 	const config = $derived(statusConfig[status] || { text: status || 'Unknown', variant: 'default', icon: '?' });
@@ -135,7 +137,7 @@
 		onkeydown={handleKeyDown}
 	>
 		{#if showDot}
-			<span class="w-2 h-2 rounded-full {dotColor} mr-1.5"></span>
+			<span class="w-2 h-2 rounded-full {dotColor} mr-1.5 {status === 'active' ? 'animate-pulse' : ''}"></span>
 		{/if}
 		{#if showIcon}
 			<span class="mr-1">{config.icon}</span>
@@ -145,7 +147,7 @@
 {:else}
 	<span class={badgeClass} aria-label={ariaLabel || `Status: ${displayText}`}>
 		{#if showDot}
-			<span class="w-2 h-2 rounded-full {dotColor} mr-1.5"></span>
+			<span class="w-2 h-2 rounded-full {dotColor} mr-1.5 {status === 'active' ? 'animate-pulse' : ''}"></span>
 		{/if}
 		{#if showIcon}
 			<span class="mr-1">{config.icon}</span>

package/src/lib/components/TextArea.svelte

@@ -59,7 +59,7 @@
 
 	const textareaClass = $derived(
 		[
-			'textarea textarea-bordered w-full',
+			'textarea textarea-bordered w-full transition-shadow duration-200',
 			sizeClass,
 			resizeClass,
 			error ? 'textarea-error' : '',
@@ -90,12 +90,30 @@
 			autoResizeTextarea(textareaElement);
 		}
 	});
+
+	// Error-state shake (transitions.dev). Replays `t-input-shake` when `error`
+	// becomes set. See TextInput for the full rationale.
+	let hadError = false;
+	$effect(() => {
+		const hasError = !!error;
+		if (hasError && !hadError && textareaElement) {
+			const reduce =
+				typeof window !== 'undefined' &&
+				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+			if (!reduce) {
+				textareaElement.classList.remove('t-input-shake');
+				void textareaElement.offsetWidth;
+				textareaElement.classList.add('t-input-shake');
+			}
+		}
+		hadError = hasError;
+	});
 </script>
 
 <div class="form-control w-full">
 	{#if label}
 		<label for={id} class="label">
-			<span class="label-text font-medium">
+			<span class="text-[0.8125rem] font-medium text-base-content/85">
 				{label}
 				{#if required}
 					<span class="text-error ml-1">*</span>
@@ -121,11 +139,12 @@
 		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
 		aria-invalid={error ? 'true' : 'false'}
 		style={autoResize ? `min-height: calc(1.5em * ${rows} + 1rem);` : ''}
+		onanimationend={() => textareaElement?.classList.remove('t-input-shake')}
 	></textarea>
 
 	{#if showCount && maxlength}
 		<div class="label">
-			<span class="label-text-alt {isOverLimit ? 'text-error' : 'text-base-content/70'}">
+			<span class="text-[0.8125rem] {isOverLimit ? 'text-error' : 'text-base-content/45'}">
 				{characterCount}/{maxlength}
 			</span>
 		</div>
@@ -133,11 +152,11 @@
 
 	{#if error}
 		<div class="label">
-			<span id="{id}-error" class="label-text-alt text-error" role="alert">{error}</span>
+			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
 		</div>
 	{:else if helpText}
 		<div class="label">
-			<span id="{id}-help" class="label-text-alt text-base-content/70">{helpText}</span>
+			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
 		</div>
 	{/if}
 </div>

package/src/lib/components/TextInput.svelte

@@ -51,18 +51,39 @@
 	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
 
 	const inputClass = $derived(
-		['input input-bordered w-full', sizeClass, error ? 'input-error' : '', disabled ? 'input-disabled' : '', className]
+		['input input-bordered w-full transition-shadow duration-200', sizeClass, error ? 'input-error' : '', disabled ? 'input-disabled' : '', className]
 			.filter(Boolean)
 			.join(' ')
 	);
 
 	const characterCount = $derived(value?.length || 0);
 	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
+
+	// Error-state shake (transitions.dev "Error state shake"). When `error`
+	// transitions from empty to set, replay the `t-input-shake` keyframe from the
+	// host app's transitions.css. Self-contained reflow-restart so a repeat error
+	// re-shakes. Colour stays on the `input-error` class; this owns only motion.
+	let inputEl: HTMLInputElement | undefined = $state();
+	let hadError = false;
+	$effect(() => {
+		const hasError = !!error;
+		if (hasError && !hadError && inputEl) {
+			const reduce =
+				typeof window !== 'undefined' &&
+				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+			if (!reduce) {
+				inputEl.classList.remove('t-input-shake');
+				void inputEl.offsetWidth; // force reflow to restart the animation
+				inputEl.classList.add('t-input-shake');
+			}
+		}
+		hadError = hasError;
+	});
 </script>
 
 <div class="form-control w-full">
 	<label for={id} class="label">
-		<span class="label-text font-medium">
+		<span class="text-[0.8125rem] font-medium text-base-content/85">
 			{label}
 			{#if required}
 				<span class="text-error ml-1">*</span>
@@ -71,6 +92,7 @@
 	</label>
 
 	<input
+		bind:this={inputEl}
 		{id}
 		{name}
 		{type}
@@ -81,16 +103,17 @@
 		{maxlength}
 		{minlength}
 		{pattern}
-		{autocomplete}
+		autocomplete={autocomplete as AutoFill}
 		bind:value
 		class={inputClass}
 		aria-describedby={error ? `${id}-error` : helpText ? `${id}-help` : undefined}
 		aria-invalid={error ? 'true' : 'false'}
+		onanimationend={() => inputEl?.classList.remove('t-input-shake')}
 	/>
 
 	{#if showCount && maxlength}
 		<div class="label">
-			<span class="label-text-alt {isOverLimit ? 'text-error' : 'text-base-content/70'}">
+			<span class="text-[0.8125rem] {isOverLimit ? 'text-error' : 'text-base-content/45'}">
 				{characterCount}/{maxlength}
 			</span>
 		</div>
@@ -98,11 +121,11 @@
 
 	{#if error}
 		<div class="label">
-			<span id="{id}-error" class="label-text-alt text-error" role="alert">{error}</span>
+			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
 		</div>
 	{:else if helpText}
 		<div class="label">
-			<span id="{id}-help" class="label-text-alt text-base-content/70">{helpText}</span>
+			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
 		</div>
 	{/if}
 </div>

package/src/lib/components/ThemeSelector.svelte

@@ -61,6 +61,7 @@
 		onThemeChange?: (theme: string) => void;
 	} = $props();
 
+	// svelte-ignore state_referenced_locally
 	let currentTheme = $state(defaultTheme);
 	let isAnimating = $state(false);
 
@@ -114,7 +115,7 @@
 	>
 		<div
 			data-theme={currentTheme}
-			class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm transition-transform duration-300 ease-out"
+			class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 transition-transform duration-300 ease-out"
 			class:theme-spin={isAnimating}
 		>
 			<div class="bg-base-content size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 0ms"></div>
@@ -129,8 +130,8 @@
 	<div
 		tabindex="0"
 		class="dropdown-content bg-base-200 text-base-content rounded-box
-		top-px max-h-[calc(50vh-6.5rem)] overflow-y-auto border border-white/5
-		shadow-2xl outline-1 outline-black/5 mb-2 z-50"
+		top-px max-h-[calc(50vh-6.5rem)] overflow-y-auto border border-base-300
+		mb-2 z-50"
 	>
 		<ul class="menu w-56">
 			<li class="menu-title text-xs">Theme</li>
@@ -145,7 +146,7 @@
 						<div
 							data-theme={theme.name}
 							class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5
-							rounded-md p-1 shadow-sm"
+							rounded-md p-1"
 						>
 							<div class="bg-base-content size-1 rounded-full"></div>
 							<div class="bg-primary size-1 rounded-full"></div>
@@ -172,6 +173,16 @@
 </div>
 
 <style>
+	/* NOTE: DaisyUI v5.0.0 has a stuck-animation bug on `.dropdown-content`
+	   (`@keyframes dropdown { 0% { opacity: 0 } }` pins opacity to 0). If the
+	   theme dropdown opens but stays invisible, the consuming project needs
+	   the global fix in its `app.css`:
+
+	     .dropdown-content { animation: none !important; }
+
+	   Upstream daisyui >= 5.5.x patches this; once you upgrade you can drop
+	   the override. */
+
 	.theme-spin {
 		animation: theme-spin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 	}

package/src/lib/components/TimeSlotPicker.svelte

@@ -76,14 +76,14 @@
 		{@const { morning, afternoon, evening } = groupedSlots()}
 		{@const availableCount = slots.filter(s => s.available).length}
 
-		<p class="text-sm text-base-content/60 mb-4">
+		<p class="text-[0.8125rem] text-base-content/45 mb-4">
 			{availableCount} time{availableCount !== 1 ? 's' : ''} available
 		</p>
 
 		<div class="space-y-6">
 			{#if morning.length > 0}
 				<div>
-					<h4 class="text-sm font-medium text-base-content/70 mb-3 flex items-center gap-2">
+					<h4 class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
 						<!-- Sun icon -->
 						<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 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
@@ -95,7 +95,7 @@
 							<button
 								onclick={() => handleSlotClick(slot)}
 								disabled={!slot.available}
-								class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200
+								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
 									{slot.available
 										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
 										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
@@ -109,7 +109,7 @@
 
 			{#if afternoon.length > 0}
 				<div>
-					<h4 class="text-sm font-medium text-base-content/70 mb-3 flex items-center gap-2">
+					<h4 class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
 						<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 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
 						</svg>
@@ -120,7 +120,7 @@
 							<button
 								onclick={() => handleSlotClick(slot)}
 								disabled={!slot.available}
-								class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200
+								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
 									{slot.available
 										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
 										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
@@ -134,7 +134,7 @@
 
 			{#if evening.length > 0}
 				<div>
-					<h4 class="text-sm font-medium text-base-content/70 mb-3 flex items-center gap-2">
+					<h4 class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
 						<!-- Moon icon -->
 						<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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
@@ -146,7 +146,7 @@
 							<button
 								onclick={() => handleSlotClick(slot)}
 								disabled={!slot.available}
-								class="py-3 px-4 rounded-lg text-sm font-medium transition-all duration-200
+								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
 									{slot.available
 										? `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
 										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"

package/src/lib/components/UserAvatar.svelte

@@ -41,6 +41,19 @@
   })
 
   const label = $derived(name || email || 'Unknown')
+
+  // Derive a consistent color per user from their name/email
+  const avatarBg = $derived.by(() => {
+    const source = name || email || ''
+    if (!source) return 'oklch(0.65 0.10 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]
+    const hue = hues[Math.abs(hash) % hues.length]
+    return `oklch(0.62 0.14 ${hue})`
+  })
 </script>
 
 <div
@@ -51,7 +64,7 @@
     {#if avatarUrl}
       <img src={avatarUrl} alt={label} class="w-full h-full object-cover" />
     {:else}
-      <div class="w-full h-full bg-neutral text-neutral-content flex items-center justify-center font-semibold">
+      <div class="w-full h-full flex items-center justify-center font-semibold text-white" style="background: {avatarBg}">
         {initials}
       </div>
     {/if}

package/src/lib/components/VariablePicker.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  /**
+   * VariablePicker — browse and insert template merge variables.
+   *
+   * Renders the available merge variables for a document template, grouped by
+   * context (client / org / financial / custom). Clicking a variable inserts
+   * its `{{name}}` token at the caret of a bound textarea/input and/or fires
+   * an `onInsert` callback.
+   *
+   * Source of `groups`: the JST server-side registry
+   * `getVarsForCategory(category, template.available_vars)` in
+   * `src/lib/server/template-vars.ts`. Compute it in a `+page.server.ts` load
+   * (the registry is server-only) and pass the result straight in.
+   *
+   * This is a self-contained panel (not a modal) so it can sit beside a
+   * template editor as a sidebar. Wrap it in your own Drawer/Modal if needed.
+   */
+
+  import type { TemplateVar, TemplateVarGroup } from "../types/templateVars"
+
+  interface Props {
+    /** Variable groups to show. From `getVarsForCategory(...)`. */
+    groups: TemplateVarGroup[]
+    /**
+     * Optional textarea/input to insert into. When set, clicking a variable
+     * splices `{{name}}` at the current caret, restores focus + caret after
+     * the token, and dispatches an `input` event so `bind:value` updates.
+     */
+    targetEl?: HTMLTextAreaElement | HTMLInputElement | null
+    /** Called with the inserted token (`{{name}}`) and the bare var name. */
+    onInsert?: (token: string, varName: string) => void
+    /** Show the filter box. Default true. */
+    searchable?: boolean
+    /** Denser layout for narrow sidebars. Default false. */
+    compact?: boolean
+    /** Panel heading. Default "Variables". */
+    title?: string
+    /** Shown when there are no groups/vars at all. */
+    emptyText?: string
+  }
+
+  let {
+    groups,
+    targetEl = null,
+    onInsert,
+    searchable = true,
+    compact = false,
+    title = "Variables",
+    emptyText = "No variables available for this template.",
+  }: Props = $props()
+
+  let query = $state("")
+
+  const totalVars = $derived(
+    groups.reduce((n, g) => n + g.vars.length, 0),
+  )
+
+  // Filter vars by name/label/description, dropping groups left empty.
+  const filteredGroups = $derived.by<TemplateVarGroup[]>(() => {
+    const q = query.trim().toLowerCase()
+    if (!q) return groups
+    const out: TemplateVarGroup[] = []
+    for (const g of groups) {
+      const vars = g.vars.filter(
+        (v) =>
+          v.name.toLowerCase().includes(q) ||
+          v.label.toLowerCase().includes(q) ||
+          (v.description?.toLowerCase().includes(q) ?? false),
+      )
+      if (vars.length > 0) out.push({ ...g, vars })
+    }
+    return out
+  })
+
+  function tokenFor(v: TemplateVar): string {
+    return `{{${v.name}}}`
+  }
+
+  function insert(v: TemplateVar) {
+    const token = tokenFor(v)
+
+    if (targetEl) {
+      const el = targetEl
+      const start = el.selectionStart ?? el.value.length
+      const end = el.selectionEnd ?? el.value.length
+      el.value = el.value.slice(0, start) + token + el.value.slice(end)
+      const caret = start + token.length
+      // Restore focus + caret after the inserted token.
+      el.focus()
+      el.setSelectionRange(caret, caret)
+      // Notify Svelte bindings / listeners.
+      el.dispatchEvent(new Event("input", { bubbles: true }))
+    }
+
+    onInsert?.(token, v.name)
+  }
+</script>
+
+<div
+  class="border-base-300 bg-base-100 flex flex-col rounded-box border"
+  class:text-sm={compact}
+>
+  <div class="border-base-300 flex items-center justify-between border-b px-4 py-3">
+    <h3 class="font-semibold">{title}</h3>
+    {#if totalVars > 0}
+      <span class="badge badge-ghost badge-sm">{totalVars}</span>
+    {/if}
+  </div>
+
+  {#if searchable && totalVars > 0}
+    <div class="border-base-300 border-b p-3">
+      <input
+        type="text"
+        class="input input-bordered input-sm w-full"
+        placeholder="Filter variables…"
+        aria-label="Filter variables"
+        bind:value={query}
+      />
+    </div>
+  {/if}
+
+  <div class="flex-1 overflow-y-auto p-2" class:max-h-96={!compact}>
+    {#if totalVars === 0}
+      <p class="text-base-content/60 px-2 py-6 text-center text-sm">
+        {emptyText}
+      </p>
+    {:else if filteredGroups.length === 0}
+      <p class="text-base-content/60 px-2 py-6 text-center text-sm">
+        No variables match "{query}".
+      </p>
+    {:else}
+      {#each filteredGroups as group (group.id)}
+        <div class="mb-3 last:mb-0">
+          <div
+            class="text-base-content/45 px-2 pb-1 text-[0.8125rem] tracking-[0.005em]"
+          >
+            {group.label}
+          </div>
+          <div class="flex flex-col gap-0.5">
+            {#each group.vars as v (v.name)}
+              <button
+                type="button"
+                class="hover:bg-base-200 focus-visible:bg-base-200 group flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors"
+                onclick={() => insert(v)}
+                title={`Insert ${tokenFor(v)}`}
+              >
+                <div class="flex w-full items-baseline gap-2">
+                  <span class="font-medium flex-1 min-w-0 truncate">{v.label}</span>
+                  <code
+                    class="text-base-content/60 group-hover:text-primary shrink-0 font-mono text-xs"
+                  >
+                    {tokenFor(v)}
+                  </code>
+                </div>
+                {#if v.description && !compact}
+                  <span class="text-base-content/45 text-[0.75rem]">
+                    {v.description}{#if v.example}
+                      <span class="text-base-content/45">
+                        — e.g. {v.example}</span
+                      >{/if}
+                  </span>
+                {/if}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>

package/src/lib/components/VoicePlayer.svelte

@@ -53,6 +53,7 @@
   let voices = $state<any[]>([])
   let voicesLoading = $state(false)
   let showVoices = $state(false)
+  // svelte-ignore state_referenced_locally
   let selectedVoiceId = $state<string | undefined>(voiceId || "alloy")
 
   let speed = $state(1.0)
@@ -254,7 +255,7 @@
       {/if}
       {#if showControls}
         <div
-          class="absolute flex items-center gap-2 bg-base-200 border border-base-300 rounded-full shadow-lg z-50 transition-all {expandDirection === 'right' ? 'right-0' : 'left-0'}"
+          class="absolute flex items-center gap-2 bg-base-200 border border-base-300 rounded-full z-50 transition-all {expandDirection === 'right' ? 'right-0' : 'left-0'}"
           style="min-width: 180px;"
         >
           <!-- Play/Pause -->
@@ -330,7 +331,7 @@
             <!-- Settings panel -->
             {#if showSettings}
               <div
-                class="absolute right-0 top-full z-50 bg-base-200 border border-base-300 rounded-lg shadow-lg p-3 w-64"
+                class="absolute right-0 top-full z-50 bg-base-200 border border-base-300 rounded-lg p-3 w-64"
                 style="margin-top: 0.25rem;"
               >
                 <div class="mb-3">
@@ -364,7 +365,7 @@
             <!-- Voice selection dropdown -->
             {#if showVoices}
               <div
-                class="absolute right-0 top-full z-50 bg-base-200 border border-base-300 rounded-lg shadow-lg p-2 max-h-64 overflow-y-auto w-64"
+                class="absolute right-0 top-full z-50 bg-base-200 border border-base-300 rounded-lg p-2 max-h-64 overflow-y-auto w-64"
                 style="margin-top: 0.25rem;"
               >
                 {#if voicesLoading}