@joewinke/jatui 0.1.24 → 0.1.26

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

@@ -0,0 +1,24 @@
+import type { ImageProcessingSpec, VariantResult } from "../types/smartImageEditor";
+type $$ComponentProps = {
+    spec?: ImageProcessingSpec;
+    uploadEndpoint?: string;
+    value?: string;
+    onComplete?: (variants: VariantResult[]) => void;
+    /** Called when the user confirms delete on a variant tile. The host
+     *  decides what "delete" means (typically: remove from storage + clear
+     *  the stored URL). Returning false (or throwing) leaves the tile in
+     *  place; returning truthy clears the tile's variant state. */
+    onDelete?: (variantName: string) => Promise<boolean | void> | boolean | void;
+    /** Called when the user drops/picks a file directly into an empty
+     *  variant tile — bypasses the AI pipeline. The host uploads the file
+     *  to its variant slot and returns the resulting VariantResult (or
+     *  null on failure). When provided, idle tiles become drop-targets. */
+    onDirectUpload?: (variantName: string, file: File) => Promise<VariantResult | null>;
+    accept?: string;
+    maxSizeMb?: number;
+    /** Pre-populate variant cells with existing stored URLs (keyed by variant name). */
+    previewUrls?: Record<string, string>;
+};
+declare const SmartImageEditor: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SmartImageEditor = ReturnType<typeof SmartImageEditor>;
+export default SmartImageEditor;

package/dist/components/SortDropdown.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	/**
+	 * SortDropdown Component - Reusable sort dropdown with optional filter input
+	 *
+	 * A standardized dropdown for sorting lists with:
+	 * - Sort button showing current option icon, label, and direction indicator
+	 * - Dropdown menu with configurable sort options
+	 * - Optional filter input for search/filtering
+	 */
+
+	type SortDirection = 'asc' | 'desc';
+
+	export interface SortOption {
+		value: string;
+		label: string;
+		icon: string;
+		defaultDir?: SortDirection;
+	}
+
+	interface Props {
+		/** Sort options array (required) */
+		options: SortOption[];
+		/** Current sort value */
+		sortBy: string;
+		/** Current sort direction */
+		sortDir: SortDirection;
+		/** Current filter input value */
+		filterValue?: string;
+		/** Whether to show the filter input */
+		showFilter?: boolean;
+		/** Placeholder text for filter input */
+		filterPlaceholder?: string;
+		/** Button size variant */
+		size?: 'xs' | 'sm' | 'md';
+		/** Show label on small screens */
+		showLabelOnMobile?: boolean;
+		/** Callback when sort changes */
+		onSortChange?: (value: string, dir: SortDirection) => void;
+		/** Callback when filter changes */
+		onFilterChange?: (value: string) => void;
+	}
+
+	let {
+		options,
+		sortBy,
+		sortDir,
+		filterValue = '',
+		showFilter = false,
+		filterPlaceholder = 'Filter...',
+		size = 'xs',
+		showLabelOnMobile = false,
+		onSortChange,
+		onFilterChange
+	}: Props = $props();
+
+	// Find current sort option
+	const currentOption = $derived(options.find(o => o.value === sortBy));
+	const currentIcon = $derived(currentOption?.icon || '');
+	const currentLabel = $derived(currentOption?.label || 'Sort');
+
+	// Handle sort option click
+	function handleSortClick(value: string) {
+		if (sortBy === value) {
+			onSortChange?.(value, sortDir === 'asc' ? 'desc' : 'asc');
+		} else {
+			const opt = options.find(o => o.value === value);
+			onSortChange?.(value, opt?.defaultDir ?? 'asc');
+		}
+	}
+
+	// Handle filter input change
+	function handleFilterInput(e: Event) {
+		const target = e.currentTarget as HTMLInputElement;
+		onFilterChange?.(target.value);
+	}
+
+	// Size classes
+	const buttonSizeClass = $derived({
+		xs: 'btn-xs',
+		sm: 'btn-sm',
+		md: ''
+	}[size]);
+
+	const menuSizeClass = $derived({
+		xs: 'menu-xs',
+		sm: 'menu-sm',
+		md: ''
+	}[size]);
+
+	const inputSizeClass = $derived({
+		xs: 'input-xs',
+		sm: 'input-sm',
+		md: ''
+	}[size]);
+
+	const inputWidthClass = $derived({
+		xs: 'w-20 focus:w-32',
+		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">
+	<!-- Sort dropdown -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="dropdown dropdown-end flex-shrink-0" onclick={(e) => e.stopPropagation()}>
+		<button
+			tabindex="0"
+			class="btn {buttonSizeClass} btn-ghost gap-1 text-[0.75rem] opacity-70 hover:opacity-100"
+			title="Sort"
+		>
+			<span>{currentIcon}</span>
+			<span class="{showLabelOnMobile ? '' : 'hidden sm:inline'}">{currentLabel}</span>
+			<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 border border-base-300">
+			{#each options as opt (opt.value)}
+				<li>
+					<button
+						class="flex items-center gap-2 {sortBy === opt.value ? 'active' : ''}"
+						onclick={() => handleSortClick(opt.value)}
+					>
+						<span>{opt.icon}</span>
+						<span class="flex-1">{opt.label}</span>
+						{#if sortBy === opt.value}
+							<span class="text-[9px] opacity-70">{sortDir === 'asc' ? '▲' : '▼'}</span>
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+
+	<!-- Filter input (optional) -->
+	{#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()}
+			in:fly={{ x: -8, duration: 180, easing: cubicOut }}
+			out:fly={{ x: -4, duration: 120, easing: cubicOut }}
+		>
+			<input
+				type="text"
+				placeholder={filterPlaceholder}
+				value={filterValue}
+				oninput={handleFilterInput}
+				class="input {inputSizeClass} input-bordered {inputWidthClass} transition-all duration-200 bg-base-200/50"
+			/>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,40 @@
+/**
+ * SortDropdown Component - Reusable sort dropdown with optional filter input
+ *
+ * A standardized dropdown for sorting lists with:
+ * - Sort button showing current option icon, label, and direction indicator
+ * - Dropdown menu with configurable sort options
+ * - Optional filter input for search/filtering
+ */
+type SortDirection = 'asc' | 'desc';
+export interface SortOption {
+    value: string;
+    label: string;
+    icon: string;
+    defaultDir?: SortDirection;
+}
+interface Props {
+    /** Sort options array (required) */
+    options: SortOption[];
+    /** Current sort value */
+    sortBy: string;
+    /** Current sort direction */
+    sortDir: SortDirection;
+    /** Current filter input value */
+    filterValue?: string;
+    /** Whether to show the filter input */
+    showFilter?: boolean;
+    /** Placeholder text for filter input */
+    filterPlaceholder?: string;
+    /** Button size variant */
+    size?: 'xs' | 'sm' | 'md';
+    /** Show label on small screens */
+    showLabelOnMobile?: boolean;
+    /** Callback when sort changes */
+    onSortChange?: (value: string, dir: SortDirection) => void;
+    /** Callback when filter changes */
+    onFilterChange?: (value: string) => void;
+}
+declare const SortDropdown: import("svelte").Component<Props, {}, "">;
+type SortDropdown = ReturnType<typeof SortDropdown>;
+export default SortDropdown;

package/dist/components/Sparkline.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	/**
+	 * Sparkline — Lightweight D3 bar chart for trend visualization.
+	 * Animated entrance with staggered bars, configurable color and opacity gradient.
+	 *
+	 * Requires `d3` as a peer dependency.
+	 */
+	import * as d3 from 'd3';
+
+	let {
+		values,
+		width = 120,
+		height = 32,
+		color = 'var(--color-primary)',
+		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();
+	let animated = false;
+
+	function getEffectiveWidth(): number {
+		if (width === 'auto' && el) return el.clientWidth;
+		if (typeof width === 'number') return width;
+		return 120;
+	}
+
+	$effect(() => {
+		if (!el || values.length < 2) return;
+
+		const w = getEffectiveWidth();
+		if (w <= 0) return;
+
+		d3.select(el).select('svg').remove();
+
+		const pad = 1;
+		const innerW = w - pad * 2;
+		const innerH = height - pad * 2;
+
+		if (innerW <= 0 || innerH <= 0) return;
+
+		const svg = d3
+			.select(el)
+			.append('svg')
+			.attr('width', w)
+			.attr('height', height);
+
+		const g = svg.append('g').attr('transform', `translate(${pad},${pad})`);
+
+		const x = d3
+			.scaleBand<number>()
+			.domain(values.map((_, i) => i))
+			.range([0, innerW])
+			.padding(0.15);
+
+		const yMin = d3.min(values)! * 0.95;
+		const yMax = d3.max(values)! * 1.05;
+		const y = d3.scaleLinear().domain([yMin, yMax]).range([innerH, 0]);
+
+		const n = Math.max(1, values.length - 1);
+		const shouldAnimate = !animated;
+		animated = true;
+
+		const bars = g
+			.selectAll('.bar')
+			.data(values)
+			.join('rect')
+			.attr('x', (_, i) => x(i)!)
+			.attr('width', x.bandwidth())
+			.attr('rx', Math.min(1, x.bandwidth() / 4))
+			.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)
+				.attr('height', 0)
+				.transition()
+				.duration(400)
+				.delay((_, i) => i * 15)
+				.ease(d3.easeCubicOut)
+				.attr('y', (d) => y(d))
+				.attr('height', (d) => innerH - y(d));
+		} else {
+			bars.attr('y', (d) => y(d)).attr('height', (d) => innerH - y(d));
+		}
+	});
+</script>
+
+{#if values.length >= 2}
+	<div
+		bind:this={el}
+		style="{width === 'auto' ? 'width: 100%' : `width: ${width}px`}; height: {height}px"
+	></div>
+{:else}
+	<div
+		class="flex items-center justify-center text-base-content/30 text-xs"
+		style="{width === 'auto' ? 'width: 100%' : `width: ${width}px`}; height: {height}px"
+	>
+		--
+	</div>
+{/if}

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    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[];
+};
+declare const Sparkline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Sparkline = ReturnType<typeof Sparkline>;
+export default Sparkline;

package/dist/components/SpeechForm.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  /**
+   * SpeechForm — Text-to-speech generation form with voice selection, character limit, and audio preview.
+   *
+   * Voice options are configurable via the `voiceOptions` prop. Includes a textarea with character counter,
+   * voice selector dropdown, optional audio preview player, and submit/cancel buttons.
+   */
+
+  let {
+    text = $bindable(""),
+    voice = $bindable("en-US-female-27"),
+    previewUrl = null,
+    isCreating = false,
+    maxLength = 1000,
+    voiceOptions = [
+      { id: "en-US-female-27", label: "US Female (Clear)" },
+      { id: "en-US-male-27", label: "US Male (Clear)" },
+      { id: "en-GB-female-11", label: "UK Female" },
+      { id: "en-GB-male-10", label: "UK Male" },
+      { id: "en-US-female-24", label: "US Female (Warm)" },
+      { id: "en-US-male-24", label: "US Male (Deep)" },
+    ],
+    infoText = "The system will convert your text to natural-sounding speech which you can download and use.",
+    onSubmit,
+    onCancel,
+  } = $props<{
+    text?: string
+    voice?: string
+    previewUrl?: string | null
+    isCreating?: boolean
+    maxLength?: number
+    voiceOptions?: { id: string; label: string }[]
+    infoText?: string
+    onSubmit: () => void
+    onCancel: () => void
+  }>()
+
+  let remaining = $derived(maxLength - (text?.length || 0))
+
+  $effect(() => {
+    return () => {
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl)
+      }
+    }
+  })
+</script>
+
+<div class="space-y-4">
+  <div class="form-control">
+    <label class="label" for="speech-text-input">
+      <span class="label-text font-medium">Text to Convert</span>
+      <span class="label-text-alt">{remaining} characters left</span>
+    </label>
+    <textarea
+      id="speech-text-input"
+      bind:value={text}
+      placeholder="Enter the text you want to convert to speech..."
+      class="textarea min-h-32"
+      maxlength={maxLength}
+      disabled={isCreating}
+    ></textarea>
+  </div>
+
+  <div class="form-control">
+    <label class="label" for="speech-voice-select">
+      <span class="label-text font-medium">Voice</span>
+    </label>
+    <select id="speech-voice-select" bind:value={voice} class="select" disabled={isCreating}>
+      {#each voiceOptions as option}
+        <option value={option.id}>{option.label}</option>
+      {/each}
+    </select>
+  </div>
+
+  {#if previewUrl}
+    <div class="form-control">
+      <div class="label">
+        <span class="label-text font-medium">Preview</span>
+      </div>
+      <audio src={previewUrl} controls class="w-full" aria-label="Generated speech preview">
+        Your browser does not support the audio element.
+      </audio>
+    </div>
+  {/if}
+
+  {#if infoText}
+    <div class="flex items-center gap-2 text-info bg-info/10 p-3 rounded">
+      <!-- Info icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+      <p class="text-sm">{infoText}</p>
+    </div>
+  {/if}
+</div>
+
+<div class="flex justify-end gap-2 mt-6">
+  <button class="btn btn-ghost" onclick={onCancel} disabled={isCreating}>
+    Cancel
+  </button>
+  <button
+    class="btn btn-primary gap-2"
+    onclick={onSubmit}
+    disabled={isCreating || !text}
+  >
+    {#if isCreating}
+      <span class="loading loading-spinner loading-sm"></span>
+      Converting...
+    {:else}
+      <!-- Mic icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>
+      Generate Speech
+    {/if}
+  </button>
+</div>

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

@@ -0,0 +1,17 @@
+type $$ComponentProps = {
+    text?: string;
+    voice?: string;
+    previewUrl?: string | null;
+    isCreating?: boolean;
+    maxLength?: number;
+    voiceOptions?: {
+        id: string;
+        label: string;
+    }[];
+    infoText?: string;
+    onSubmit: () => void;
+    onCancel: () => void;
+};
+declare const SpeechForm: import("svelte").Component<$$ComponentProps, {}, "text" | "voice">;
+type SpeechForm = ReturnType<typeof SpeechForm>;
+export default SpeechForm;

package/dist/components/StatusBadge.svelte

@@ -0,0 +1,157 @@
+<script module lang="ts">
+	export type StatusValue =
+		| 'active'
+		| 'inactive'
+		| 'pending'
+		| 'completed'
+		| 'cancelled'
+		| 'draft'
+		| 'scheduled'
+		| 'in-progress'
+		| 'overdue'
+		| 'paid'
+		| 'unpaid'
+		| 'partial'
+		| 'assigned'
+		| 'available';
+</script>
+
+<script lang="ts">
+	/**
+	 * StatusBadge Component
+	 *
+	 * Predefined status badge with semantic colors, icons, and dot indicators.
+	 */
+
+	interface Props {
+		status: StatusValue;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		showIcon?: boolean;
+		showDot?: boolean;
+		customText?: string;
+		clickable?: boolean;
+		outlined?: boolean;
+		class?: string;
+		ariaLabel?: string;
+		onclick?: (event: { event: MouseEvent; status: string }) => void;
+	}
+
+	let {
+		status,
+		size = 'md',
+		showIcon = false,
+		showDot = false,
+		customText = '',
+		clickable = false,
+		outlined = false,
+		class: className = '',
+		ariaLabel = '',
+		onclick
+	}: Props = $props();
+
+	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: '' },
+		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: '' },
+		assigned: { text: 'Assigned', variant: 'success', icon: '✓' },
+		available: { text: 'Available', variant: 'info', icon: '' }
+	};
+
+	const config = $derived(statusConfig[status] || { text: status || 'Unknown', variant: 'default', icon: '?' });
+	const displayText = $derived(customText || config.text);
+
+	const variantMap: Record<string, string> = {
+		default: 'badge-ghost',
+		primary: 'badge-primary',
+		secondary: 'badge-secondary',
+		accent: 'badge-accent',
+		success: 'badge-success',
+		warning: 'badge-warning',
+		error: 'badge-error',
+		info: 'badge-info'
+	};
+
+	const outlinedVariantMap: Record<string, string> = {
+		default: 'badge-outline',
+		primary: 'badge-primary badge-outline',
+		secondary: 'badge-secondary badge-outline',
+		accent: 'badge-accent badge-outline',
+		success: 'badge-success badge-outline',
+		warning: 'badge-warning badge-outline',
+		error: 'badge-error badge-outline',
+		info: 'badge-info badge-outline'
+	};
+
+	const variantClass = $derived(outlined ? outlinedVariantMap[config.variant] : variantMap[config.variant]);
+	const sizeClass = $derived({ xs: 'badge-xs', sm: 'badge-sm', md: 'badge-md', lg: 'badge-lg' }[size]);
+
+	const dotColor = $derived(
+		{
+			default: 'bg-base-content',
+			primary: 'bg-primary',
+			secondary: 'bg-secondary',
+			accent: 'bg-accent',
+			success: 'bg-success',
+			warning: 'bg-warning',
+			error: 'bg-error',
+			info: 'bg-info'
+		}[config.variant]
+	);
+
+	const badgeClass = $derived(
+		['badge', variantClass, sizeClass, clickable ? 'cursor-pointer hover:opacity-80' : '', className]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	function handleClick(event: MouseEvent) {
+		if (clickable && onclick) {
+			onclick({ event, status });
+		}
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		if (clickable && onclick && (event.key === 'Enter' || event.key === ' ')) {
+			event.preventDefault();
+			onclick({ event: event as any, status });
+		}
+	}
+</script>
+
+{#if clickable}
+	<span
+		class={badgeClass}
+		role="button"
+		tabindex="0"
+		aria-label={ariaLabel || `Status: ${displayText}`}
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
+	>
+		{#if showDot}
+			<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>
+		{/if}
+		{displayText}
+	</span>
+{:else}
+	<span class={badgeClass} aria-label={ariaLabel || `Status: ${displayText}`}>
+		{#if showDot}
+			<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>
+		{/if}
+		{displayText}
+	</span>
+{/if}

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

@@ -0,0 +1,24 @@
+export type StatusValue = 'active' | 'inactive' | 'pending' | 'completed' | 'cancelled' | 'draft' | 'scheduled' | 'in-progress' | 'overdue' | 'paid' | 'unpaid' | 'partial' | 'assigned' | 'available';
+/**
+ * StatusBadge Component
+ *
+ * Predefined status badge with semantic colors, icons, and dot indicators.
+ */
+interface Props {
+    status: StatusValue;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    showIcon?: boolean;
+    showDot?: boolean;
+    customText?: string;
+    clickable?: boolean;
+    outlined?: boolean;
+    class?: string;
+    ariaLabel?: string;
+    onclick?: (event: {
+        event: MouseEvent;
+        status: string;
+    }) => void;
+}
+declare const StatusBadge: import("svelte").Component<Props, {}, "">;
+type StatusBadge = ReturnType<typeof StatusBadge>;
+export default StatusBadge;