@joewinke/jatui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",

package/src/lib/components/UserAvatar.svelte

@@ -0,0 +1,59 @@
+<!--
+  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')
+</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 bg-neutral text-neutral-content flex items-center justify-center font-semibold">
+        {initials}
+      </div>
+    {/if}
+  </div>
+</div>

package/src/lib/components/pipeline/Pipeline.svelte

@@ -10,8 +10,8 @@
 		PipelineViewMode,
 		StageColors,
 		PipelineTableColumn
-	} from '$lib/types/pipeline';
-	import { DEFAULT_PIPELINE_CONFIG } from '$lib/types/pipeline';
+	} from '../../types/pipeline';
+	import { DEFAULT_PIPELINE_CONFIG } from '../../types/pipeline';
 	import PipelineColumn from './PipelineColumn.svelte';
 
 	interface Props {

package/src/lib/components/pipeline/PipelineCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { PipelineItem, PipelineStage, StageColors } from '$lib/types/pipeline';
+	import type { PipelineItem, PipelineStage, StageColors } from '../../types/pipeline';
 
 	interface Props {
 		item: PipelineItem;

package/src/lib/components/pipeline/PipelineColumn.svelte

@@ -5,7 +5,7 @@
 		PipelineItem,
 		StageColors,
 		PipelineDragConfig
-	} from '$lib/types/pipeline';
+	} from '../../types/pipeline';
 	import { dndzone } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import PipelineCard from './PipelineCard.svelte';

package/src/lib/index.ts

@@ -1,3 +1,6 @@
+// Components — Universal
+export { default as UserAvatar } from './components/UserAvatar.svelte';
+
 // Components — from JAT IDE
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';