@joewinke/jatui 0.1.24 → 0.1.26

package/dist/components/TaskTypeIcon.svelte

@@ -0,0 +1,54 @@
+<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>

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

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

package/dist/components/TextArea.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+	/**
+	 * TextArea Component
+	 *
+	 * Multi-line text input with validation, auto-resize, and character count.
+	 * Converted from Svelte 4 to Svelte 5 runes.
+	 */
+
+	interface Props {
+		label?: string;
+		value?: string;
+		placeholder?: string;
+		rows?: number;
+		maxlength?: number;
+		minlength?: number;
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		autoResize?: boolean;
+		error?: string;
+		helpText?: string;
+		showCount?: boolean;
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		id?: string;
+		name?: string;
+		resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+		oninput?: (value: string) => void;
+	}
+
+	let {
+		label = '',
+		value = $bindable(''),
+		placeholder = '',
+		rows = 3,
+		maxlength,
+		minlength,
+		required = false,
+		disabled = false,
+		readonly = false,
+		autoResize = false,
+		error = '',
+		helpText = '',
+		showCount = false,
+		size = 'md',
+		class: className = '',
+		id = `textarea-${Math.random().toString(36).substr(2, 9)}`,
+		name = '',
+		resize = 'vertical',
+		oninput
+	}: Props = $props();
+
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+
+	const sizeClass = $derived({ sm: 'textarea-sm', md: '', lg: 'textarea-lg' }[size]);
+	const resizeClass = $derived(
+		{ none: 'resize-none', vertical: 'resize-y', horizontal: 'resize-x', both: 'resize' }[resize]
+	);
+
+	const textareaClass = $derived(
+		[
+			'textarea textarea-bordered w-full transition-shadow duration-200',
+			sizeClass,
+			resizeClass,
+			error ? 'textarea-error' : '',
+			disabled ? 'textarea-disabled' : '',
+			className
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	const characterCount = $derived(value?.length || 0);
+	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
+
+	function handleInput(event: Event) {
+		const target = event.target as HTMLTextAreaElement;
+		value = target.value;
+		if (autoResize) autoResizeTextarea(target);
+		oninput?.(value);
+	}
+
+	function autoResizeTextarea(textarea: HTMLTextAreaElement) {
+		textarea.style.height = 'auto';
+		textarea.style.height = textarea.scrollHeight + 'px';
+	}
+
+	$effect(() => {
+		if (autoResize && textareaElement && value !== undefined) {
+			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="text-[0.8125rem] font-medium text-base-content/85">
+				{label}
+				{#if required}
+					<span class="text-error ml-1">*</span>
+				{/if}
+			</span>
+		</label>
+	{/if}
+
+	<textarea
+		bind:this={textareaElement}
+		{id}
+		{name}
+		{placeholder}
+		{rows}
+		{maxlength}
+		{minlength}
+		{required}
+		{disabled}
+		{readonly}
+		bind:value
+		oninput={handleInput}
+		class={textareaClass}
+		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="text-[0.8125rem] {isOverLimit ? 'text-error' : 'text-base-content/45'}">
+				{characterCount}/{maxlength}
+			</span>
+		</div>
+	{/if}
+
+	{#if error}
+		<div class="label">
+			<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="text-[0.8125rem] text-base-content/45">{helpText}</span>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,30 @@
+/**
+ * TextArea Component
+ *
+ * Multi-line text input with validation, auto-resize, and character count.
+ * Converted from Svelte 4 to Svelte 5 runes.
+ */
+interface Props {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    rows?: number;
+    maxlength?: number;
+    minlength?: number;
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    autoResize?: boolean;
+    error?: string;
+    helpText?: string;
+    showCount?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+    id?: string;
+    name?: string;
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+    oninput?: (value: string) => void;
+}
+declare const TextArea: import("svelte").Component<Props, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/dist/components/TextInput.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	/**
+	 * TextInput Component
+	 *
+	 * Labeled text input with validation, error state, help text, and character count.
+	 * Converted from Svelte 4 to Svelte 5 runes.
+	 */
+
+	interface Props {
+		label: string;
+		value?: string;
+		placeholder?: string;
+		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+		required?: boolean;
+		disabled?: boolean;
+		readonly?: boolean;
+		error?: string;
+		helpText?: string;
+		size?: 'sm' | 'md' | 'lg';
+		maxlength?: number;
+		minlength?: number;
+		pattern?: string;
+		showCount?: boolean;
+		class?: string;
+		id?: string;
+		name?: string;
+		autocomplete?: string;
+	}
+
+	let {
+		label,
+		value = $bindable(''),
+		placeholder = '',
+		type = 'text',
+		required = false,
+		disabled = false,
+		readonly = false,
+		error = '',
+		helpText = '',
+		size = 'md',
+		maxlength,
+		minlength,
+		pattern,
+		showCount = false,
+		class: className = '',
+		id = `text-input-${Math.random().toString(36).substr(2, 9)}`,
+		name = '',
+		autocomplete = ''
+	}: Props = $props();
+
+	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
+
+	const inputClass = $derived(
+		['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="text-[0.8125rem] font-medium text-base-content/85">
+			{label}
+			{#if required}
+				<span class="text-error ml-1">*</span>
+			{/if}
+		</span>
+	</label>
+
+	<input
+		bind:this={inputEl}
+		{id}
+		{name}
+		{type}
+		{placeholder}
+		{required}
+		{disabled}
+		{readonly}
+		{maxlength}
+		{minlength}
+		{pattern}
+		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="text-[0.8125rem] {isOverLimit ? 'text-error' : 'text-base-content/45'}">
+				{characterCount}/{maxlength}
+			</span>
+		</div>
+	{/if}
+
+	{#if error}
+		<div class="label">
+			<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="text-[0.8125rem] text-base-content/45">{helpText}</span>
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,29 @@
+/**
+ * TextInput Component
+ *
+ * Labeled text input with validation, error state, help text, and character count.
+ * Converted from Svelte 4 to Svelte 5 runes.
+ */
+interface Props {
+    label: string;
+    value?: string;
+    placeholder?: string;
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    required?: boolean;
+    disabled?: boolean;
+    readonly?: boolean;
+    error?: string;
+    helpText?: string;
+    size?: 'sm' | 'md' | 'lg';
+    maxlength?: number;
+    minlength?: number;
+    pattern?: string;
+    showCount?: boolean;
+    class?: string;
+    id?: string;
+    name?: string;
+    autocomplete?: string;
+}
+declare const TextInput: import("svelte").Component<Props, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/components/ThemeSelector.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+	/**
+	 * ThemeSelector — DaisyUI theme switcher with visual preview dots, localStorage persistence,
+	 * and animated transitions on theme change.
+	 *
+	 * By default includes all 33 standard DaisyUI themes. Pass custom `themes` prop to override.
+	 */
+	import { onMount } from 'svelte';
+
+	interface ThemeOption {
+		name: string;
+		label: string;
+	}
+
+	const DEFAULT_THEMES: ThemeOption[] = [
+		{ name: 'light', label: 'Light' },
+		{ name: 'dark', label: 'Dark' },
+		{ name: 'cupcake', label: 'Cupcake' },
+		{ name: 'bumblebee', label: 'Bumblebee' },
+		{ name: 'emerald', label: 'Emerald' },
+		{ name: 'corporate', label: 'Corporate' },
+		{ name: 'synthwave', label: 'Synthwave' },
+		{ name: 'retro', label: 'Retro' },
+		{ name: 'cyberpunk', label: 'Cyberpunk' },
+		{ name: 'valentine', label: 'Valentine' },
+		{ name: 'halloween', label: 'Halloween' },
+		{ name: 'garden', label: 'Garden' },
+		{ name: 'forest', label: 'Forest' },
+		{ name: 'aqua', label: 'Aqua' },
+		{ name: 'lofi', label: 'Lofi' },
+		{ name: 'pastel', label: 'Pastel' },
+		{ name: 'fantasy', label: 'Fantasy' },
+		{ name: 'wireframe', label: 'Wireframe' },
+		{ name: 'black', label: 'Black' },
+		{ name: 'luxury', label: 'Luxury' },
+		{ name: 'dracula', label: 'Dracula' },
+		{ name: 'cmyk', label: 'CMYK' },
+		{ name: 'autumn', label: 'Autumn' },
+		{ name: 'business', label: 'Business' },
+		{ name: 'acid', label: 'Acid' },
+		{ name: 'lemonade', label: 'Lemonade' },
+		{ name: 'night', label: 'Night' },
+		{ name: 'coffee', label: 'Coffee' },
+		{ name: 'winter', label: 'Winter' },
+		{ name: 'dim', label: 'Dim' },
+		{ name: 'nord', label: 'Nord' },
+		{ name: 'sunset', label: 'Sunset' }
+	];
+
+	let {
+		dropUp = false,
+		themes = DEFAULT_THEMES,
+		defaultTheme = 'light',
+		storageKey = 'theme',
+		onThemeChange,
+	}: {
+		dropUp?: boolean;
+		themes?: ThemeOption[];
+		defaultTheme?: string;
+		storageKey?: string;
+		onThemeChange?: (theme: string) => void;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	let currentTheme = $state(defaultTheme);
+	let isAnimating = $state(false);
+
+	const currentThemeLabel = $derived(
+		themes.find((t) => t.name === currentTheme)?.label || currentTheme
+	);
+
+	onMount(() => {
+		const savedTheme = localStorage.getItem(storageKey);
+		if (savedTheme && themes.some((t) => t.name === savedTheme)) {
+			currentTheme = savedTheme;
+			document.documentElement.setAttribute('data-theme', savedTheme);
+		} else {
+			currentTheme = defaultTheme;
+			document.documentElement.setAttribute('data-theme', defaultTheme);
+			localStorage.setItem(storageKey, defaultTheme);
+		}
+	});
+
+	function handleThemeChange(themeName: string) {
+		if (themeName === currentTheme) return;
+
+		// Close dropdown first so the trigger is visible during animation
+		if (document.activeElement instanceof HTMLElement) {
+			document.activeElement.blur();
+		}
+
+		isAnimating = true;
+
+		setTimeout(() => {
+			currentTheme = themeName;
+			document.documentElement.setAttribute('data-theme', themeName);
+			localStorage.setItem(storageKey, themeName);
+			onThemeChange?.(themeName);
+		}, 150);
+
+		setTimeout(() => {
+			isAnimating = false;
+		}, 500);
+	}
+</script>
+
+<div class="dropdown dropdown-end" class:dropdown-top={dropUp}>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<div
+		tabindex="0"
+		role="button"
+		class="flex items-center gap-2 cursor-pointer hover:bg-base-300 transition-colors px-2 py-1 rounded"
+		aria-label="Change Theme"
+		title="Change Theme"
+	>
+		<div
+			data-theme={currentTheme}
+			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>
+			<div class="bg-primary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 50ms"></div>
+			<div class="bg-secondary size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 100ms"></div>
+			<div class="bg-accent size-1 rounded-full transition-all duration-300 theme-dot" class:theme-dot-animate={isAnimating} style="--dot-delay: 150ms"></div>
+		</div>
+		<span class="text-sm font-medium transition-opacity duration-200" class:opacity-50={isAnimating}>{currentThemeLabel}</span>
+	</div>
+
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<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-base-300
+		mb-2 z-50"
+	>
+		<ul class="menu w-56">
+			<li class="menu-title text-xs">Theme</li>
+
+			{#each themes as theme}
+				<li>
+					<button
+						class="gap-3 px-2"
+						onclick={() => handleThemeChange(theme.name)}
+						class:active={currentTheme === theme.name}
+					>
+						<div
+							data-theme={theme.name}
+							class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5
+							rounded-md p-1"
+						>
+							<div class="bg-base-content size-1 rounded-full"></div>
+							<div class="bg-primary size-1 rounded-full"></div>
+							<div class="bg-secondary size-1 rounded-full"></div>
+							<div class="bg-accent size-1 rounded-full"></div>
+						</div>
+
+						<div class="w-32 truncate">{theme.label}</div>
+
+						{#if currentTheme === theme.name}
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="h-3 w-3 shrink-0">
+								<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
+							</svg>
+						{:else}
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="invisible h-3 w-3 shrink-0">
+								<path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path>
+							</svg>
+						{/if}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</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);
+	}
+
+	@keyframes theme-spin {
+		0% { transform: rotate(0deg) scale(1); }
+		50% { transform: rotate(180deg) scale(1.2); }
+		100% { transform: rotate(360deg) scale(1); }
+	}
+
+	.theme-dot-animate {
+		animation: dot-pulse 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+		animation-delay: var(--dot-delay);
+	}
+
+	@keyframes dot-pulse {
+		0% { transform: scale(1); opacity: 1; }
+		50% { transform: scale(0.5); opacity: 0.5; }
+		100% { transform: scale(1); opacity: 1; }
+	}
+</style>

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

@@ -0,0 +1,14 @@
+interface ThemeOption {
+    name: string;
+    label: string;
+}
+type $$ComponentProps = {
+    dropUp?: boolean;
+    themes?: ThemeOption[];
+    defaultTheme?: string;
+    storageKey?: string;
+    onThemeChange?: (theme: string) => void;
+};
+declare const ThemeSelector: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeSelector = ReturnType<typeof ThemeSelector>;
+export default ThemeSelector;