@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/TimeSlotPicker.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	/**
+	 * TimeSlotPicker — Display available time slots grouped by morning/afternoon/evening.
+	 *
+	 * Accepts an array of TimeSlot objects with `start` (Date), `end` (Date), and `available` (boolean).
+	 * Grouped automatically by hour: morning (<12), afternoon (<17), evening (17+).
+	 */
+
+	import type { TimeSlot } from '../types/booking';
+
+	export type { TimeSlot };
+
+	let {
+		slots,
+		loading = false,
+		onSelect,
+		accentColor = 'primary',
+	}: {
+		slots: TimeSlot[];
+		loading?: boolean;
+		onSelect: (slot: TimeSlot) => void;
+		accentColor?: string;
+	} = $props();
+
+	const groupedSlots = $derived(() => {
+		const morning: TimeSlot[] = [];
+		const afternoon: TimeSlot[] = [];
+		const evening: TimeSlot[] = [];
+
+		for (const slot of slots) {
+			const hour = slot.start.getHours();
+			if (hour < 12) {
+				morning.push(slot);
+			} else if (hour < 17) {
+				afternoon.push(slot);
+			} else {
+				evening.push(slot);
+			}
+		}
+
+		return { morning, afternoon, evening };
+	});
+
+	function formatTime(date: Date): string {
+		return date.toLocaleTimeString('en-US', {
+			hour: 'numeric',
+			minute: '2-digit',
+			hour12: true
+		});
+	}
+
+	function handleSlotClick(slot: TimeSlot) {
+		if (slot.available) {
+			onSelect(slot);
+		}
+	}
+</script>
+
+<div class="time-slot-picker">
+	{#if loading}
+		<div class="flex justify-center py-12">
+			<span class="loading loading-spinner loading-lg text-{accentColor}"></span>
+		</div>
+	{:else if slots.length === 0}
+		<div class="text-center py-12">
+			<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-base-200 flex items-center justify-center">
+				<!-- Clock icon -->
+				<svg class="w-8 h-8 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+				</svg>
+			</div>
+			<h3 class="text-lg font-semibold mb-2">No Available Times</h3>
+			<p class="text-base-content/60">Please select a different date.</p>
+		</div>
+	{:else}
+		{@const { morning, afternoon, evening } = groupedSlots()}
+		{@const availableCount = slots.filter(s => s.available).length}
+
+		<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-[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" />
+						</svg>
+						Morning
+					</h4>
+					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
+						{#each morning as slot}
+							<button
+								onclick={() => handleSlotClick(slot)}
+								disabled={!slot.available}
+								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'}"
+							>
+								{formatTime(slot.start)}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if afternoon.length > 0}
+				<div>
+					<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>
+						Afternoon
+					</h4>
+					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
+						{#each afternoon as slot}
+							<button
+								onclick={() => handleSlotClick(slot)}
+								disabled={!slot.available}
+								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'}"
+							>
+								{formatTime(slot.start)}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+
+			{#if evening.length > 0}
+				<div>
+					<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" />
+						</svg>
+						Evening
+					</h4>
+					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
+						{#each evening as slot}
+							<button
+								onclick={() => handleSlotClick(slot)}
+								disabled={!slot.available}
+								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'}"
+							>
+								{formatTime(slot.start)}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,18 @@
+/**
+     * TimeSlotPicker — Display available time slots grouped by morning/afternoon/evening.
+     *
+     * Accepts an array of TimeSlot objects with `start` (Date), `end` (Date), and `available` (boolean).
+     * Grouped automatically by hour: morning (<12), afternoon (<17), evening (17+).
+     */
+import type { TimeSlot } from '../types/booking';
+type $$ComponentProps = {
+    slots: TimeSlot[];
+    loading?: boolean;
+    onSelect: (slot: TimeSlot) => void;
+    accentColor?: string;
+};
+declare const TimeSlotPicker: import("svelte").Component<$$ComponentProps, {
+    TimeSlot: typeof TimeSlot;
+}, "">;
+type TimeSlotPicker = ReturnType<typeof TimeSlotPicker>;
+export default TimeSlotPicker;

package/dist/components/UserAvatar.svelte

@@ -0,0 +1,72 @@
+<!--
+  UserAvatar — shows a user's avatar image or initials fallback.
+  Generic component with no DB type coupling.
+  For use anywhere a user needs to be visually represented.
+-->
+<script lang="ts">
+  interface Props {
+    name?: string | null
+    email?: string | null
+    avatarUrl?: string | null
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+    tooltip?: boolean
+    class?: string
+  }
+
+  let {
+    name = null,
+    email = null,
+    avatarUrl = null,
+    size = 'sm',
+    tooltip = true,
+    class: className = '',
+  }: Props = $props()
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'w-5 h-5 text-[9px]',
+    sm: 'w-7 h-7 text-xs',
+    md: 'w-9 h-9 text-sm',
+    lg: 'w-12 h-12 text-base',
+  }
+
+  const initials = $derived.by(() => {
+    const source = name || email || ''
+    if (!source) return '?'
+    // For email, use first char before @
+    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() || '?'
+  })
+
+  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
+  class="inline-flex shrink-0 {className}"
+  title={tooltip ? label : undefined}
+>
+  <div class="rounded-full overflow-hidden {sizeClasses[size]}">
+    {#if avatarUrl}
+      <img src={avatarUrl} alt={label} class="w-full h-full object-cover" />
+    {:else}
+      <div class="w-full h-full flex items-center justify-center font-semibold text-white" style="background: {avatarBg}">
+        {initials}
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+interface Props {
+    name?: string | null;
+    email?: string | null;
+    avatarUrl?: string | null;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    tooltip?: boolean;
+    class?: string;
+}
+declare const UserAvatar: import("svelte").Component<Props, {}, "">;
+type UserAvatar = ReturnType<typeof UserAvatar>;
+export default UserAvatar;

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

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