@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/SortDropdown.svelte

@@ -1,156 +0,0 @@
-<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/src/lib/components/Sparkline.svelte

@@ -1,116 +0,0 @@
-<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 = '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();
-	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/src/lib/components/SpeechForm.svelte

@@ -1,114 +0,0 @@
-<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/src/lib/components/StatusBadge.svelte

@@ -1,157 +0,0 @@
-<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/src/lib/components/TaskTypeIcon.svelte

@@ -1,54 +0,0 @@
-<script lang="ts">
-  /**
-   * Stroke icon for a task issue_type value.
-   * Replaces the emoji returned by `typeIcon()`.
-   *
-   * Usage:
-   *   <TaskTypeIcon type={task.issue_type} />
-   *   <TaskTypeIcon type="bug" size={14} class="text-base-content/60" />
-   */
-
-  interface Props {
-    type: string | null | undefined
-    size?: number
-    class?: string
-    title?: string
-  }
-
-  let { type, size = 14, class: className = "", title }: Props = $props()
-
-  // Path data per type. Single-path lucide-style strokes so they inherit
-  // currentColor and size cleanly inside dense tables.
-  const paths: Record<string, string> = {
-    // Bug: body + antennae/legs
-    bug: "M12 4v2M8 6l1 2M16 6l-1 2M6 12H4M20 12h-2M6 16l-2 1M18 16l2 1M9 9h6v5a3 3 0 11-6 0V9z",
-    // Feature (spark): 4-point star
-    feature: "M12 3v4M12 17v4M3 12h4M17 12h4M5.5 5.5l2.5 2.5M16 16l2.5 2.5M5.5 18.5L8 16M16 8l2.5-2.5",
-    // Task: checklist
-    task: "M9 4h9a1 1 0 011 1v14a1 1 0 01-1 1H6a1 1 0 01-1-1V5a1 1 0 011-1h1M9 3h6v2H9zM8.5 11.5l1.5 1.5 3-3M8.5 16.5l1.5 1.5 3-3",
-    // Epic: mountain peaks
-    epic: "M3 19l5-8 4 6 3-4 6 6H3z",
-    // Default: document
-    document: "M13 3H6a1 1 0 00-1 1v16a1 1 0 001 1h12a1 1 0 001-1V9l-6-6zM13 3v6h6",
-  }
-
-  const d = $derived(paths[type ?? ""] ?? paths.document)
-  const label = $derived(title ?? (type ? `${type[0].toUpperCase()}${type.slice(1)}` : "Document"))
-</script>
-
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  width={size}
-  height={size}
-  class={className}
-  role="img"
-  aria-label={label}
->
-  <title>{label}</title>
-  <path d={d} />
-</svg>