@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/messaging/MessageItem.svelte

@@ -21,6 +21,8 @@
   import MessageAttachment from './MessageAttachment.svelte'
   import EmojiSelector from './EmojiSelector.svelte'
 
+  import type { Snippet } from 'svelte'
+
   interface Props {
     message: Message
     isOwn?: boolean
@@ -43,6 +45,10 @@
     onopenthread?: (data: { messageId: string }) => void
     onquotereply?: (data: { messageId: string }) => void
     onreactionchange?: () => void
+    /** Enable swipe-to-reveal on coarse pointers (touch). Defaults to false. */
+    swipeActions?: boolean
+    /** Snippet rendered in the revealed action zone (right side, behind the item). */
+    swipeContent?: Snippet
   }
 
   let {
@@ -64,6 +70,8 @@
     onopenthread,
     onquotereply,
     onreactionchange,
+    swipeActions = false,
+    swipeContent,
   }: Props = $props()
 
   let isEditing = $state(false)
@@ -72,6 +80,66 @@
   let showEmojiSelector = $state(false)
   let emojiSelectorPosition = $state({ x: 0, y: 0 })
 
+  // Swipe-to-reveal state (coarse pointer / touch only)
+  const SWIPE_THRESHOLD = 96
+  const RUBBER_BAND_LIMIT = 130
+  let swipeOpen = $state(false)
+  let swipeDragging = $state(false)
+  let swipeOffset = $state(0)
+  let swipeStartX = 0
+  let swipeStartOpen = false
+
+  function isCoarsePointer(e: PointerEvent) {
+    return e.pointerType === 'touch' || e.pointerType === 'pen'
+  }
+
+  function swipeRubberBand(raw: number): number {
+    if (raw >= 0) return 0
+    const abs = Math.abs(raw)
+    if (abs <= SWIPE_THRESHOLD) return raw
+    const over = abs - SWIPE_THRESHOLD
+    const damped = SWIPE_THRESHOLD + over * (1 - over / (RUBBER_BAND_LIMIT * 2))
+    return -Math.min(damped, RUBBER_BAND_LIMIT)
+  }
+
+  function onSwipePointerDown(e: PointerEvent) {
+    if (!swipeActions || !swipeContent || !isCoarsePointer(e)) return
+    swipeStartX = e.clientX
+    swipeStartOpen = swipeOpen
+    swipeDragging = true
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+
+  function onSwipePointerMove(e: PointerEvent) {
+    if (!swipeDragging) return
+    const baseOffset = swipeStartOpen ? -SWIPE_THRESHOLD : 0
+    const raw = baseOffset + (e.clientX - swipeStartX)
+    swipeOffset = swipeRubberBand(raw)
+  }
+
+  function onSwipePointerUp(e: PointerEvent) {
+    if (!swipeDragging) return
+    swipeDragging = false
+    const baseOffset = swipeStartOpen ? -SWIPE_THRESHOLD : 0
+    const delta = baseOffset + (e.clientX - swipeStartX)
+    // Velocity hint: fast leftward swipe counts even without crossing threshold
+    const velocity = e.clientX - swipeStartX
+    if (delta < -SWIPE_THRESHOLD / 2 || velocity < -30) {
+      swipeOpen = true
+    } else {
+      swipeOpen = false
+    }
+    swipeOffset = 0
+  }
+
+  const swipeTranslateX = $derived(
+    swipeDragging
+      ? swipeOffset
+      : swipeOpen
+        ? -SWIPE_THRESHOLD
+        : 0
+  )
+
   function formatTime(dateString: string): string {
     const date = new Date(dateString)
     const now = new Date()
@@ -182,6 +250,27 @@
   }
 </script>
 
+<!-- Swipe wrapper: always rendered; overflow-hidden clips the action zone -->
+<div
+  class="swipe-wrapper relative overflow-hidden"
+  class:rounded={swipeActions && !!swipeContent}
+>
+  <!-- Action zone — only present when swipe is enabled -->
+  {#if swipeActions && swipeContent}
+    <div class="swipe-actions absolute inset-y-0 right-0 flex items-center pr-2 gap-1" aria-hidden={!swipeOpen}>
+      {@render swipeContent()}
+    </div>
+  {/if}
+
+  <!-- Draggable layer (swipe) or passthrough div -->
+  <div
+    style={swipeActions && swipeContent ? `transform: translateX(${swipeTranslateX}px); transition: ${swipeDragging ? 'none' : 'transform var(--motion-move) var(--motion-spring)'};` : undefined}
+    onpointerdown={swipeActions && swipeContent ? onSwipePointerDown : undefined}
+    onpointermove={swipeActions && swipeContent ? onSwipePointerMove : undefined}
+    onpointerup={swipeActions && swipeContent ? onSwipePointerUp : undefined}
+    onpointercancel={swipeActions && swipeContent ? onSwipePointerUp : undefined}
+  >
+
 <div
   class="group flex gap-3 px-2 py-1 rounded relative transition-colors w-full text-left cursor-pointer {message.isPinned ? 'bg-warning/5 hover:bg-warning/10' : 'hover:bg-base-200'}"
   class:pt-2={!isConsecutive}
@@ -328,6 +417,9 @@
   </div>
 </div>
 
+  </div><!-- /draggable layer -->
+</div><!-- /swipe-wrapper -->
+
 <!-- Emoji Selector -->
 {#if showEmojiSelector && currentUserId}
   <EmojiSelector

package/dist/components/messaging/MessageItem.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Message, ReactionSummary, StandardEmoji, CustomEmoji, ReactionCallbacks, AttachmentCallbacks } from '../../types/messaging';
+import type { Snippet } from 'svelte';
 interface Props {
     message: Message;
     isOwn?: boolean;
@@ -35,6 +36,10 @@ interface Props {
         messageId: string;
     }) => void;
     onreactionchange?: () => void;
+    /** Enable swipe-to-reveal on coarse pointers (touch). Defaults to false. */
+    swipeActions?: boolean;
+    /** Snippet rendered in the revealed action zone (right side, behind the item). */
+    swipeContent?: Snippet;
 }
 declare const MessageItem: import("svelte").Component<Props, {}, "">;
 type MessageItem = ReturnType<typeof MessageItem>;

package/dist/components/messaging/TypingIndicator.svelte

@@ -0,0 +1,63 @@
+<!--
+  TypingIndicator — three-dot phase-offset bounce (kinetics: Typing Indicator).
+  Infinite loop is sanctioned for functional status indicators.
+  Reduced-motion: static dots + label remain visible.
+-->
+
+<script lang="ts">
+  interface Props {
+    users?: string[]
+    class?: string
+  }
+
+  let { users = [], class: cls = '' }: Props = $props()
+
+  const label = $derived(
+    users.length === 0
+      ? 'typing…'
+      : users.length === 1
+        ? `${users[0]} is typing…`
+        : users.length === 2
+          ? `${users[0]} and ${users[1]} are typing…`
+          : `${users[0]} and ${users.length - 1} others are typing…`
+  )
+</script>
+
+<div class="typing-indicator inline-flex items-center gap-1.5 {cls}" aria-label={label} role="status">
+  <span class="dot" aria-hidden="true"></span>
+  <span class="dot" style="animation-delay: 0.16s" aria-hidden="true"></span>
+  <span class="dot" style="animation-delay: 0.32s" aria-hidden="true"></span>
+  {#if users.length > 0}
+    <span class="text-xs text-base-content/60 ml-0.5">{label}</span>
+  {/if}
+</div>
+
+<style>
+  .dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background-color: oklch(from var(--color-base-content, currentColor) l c h / 0.6);
+    animation: typing-bounce 1.2s ease-in-out infinite;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  @keyframes typing-bounce {
+    0%, 60%, 100% {
+      transform: translateY(0);
+      opacity: 0.4;
+    }
+    30% {
+      transform: translateY(-6px);
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dot {
+      animation: none;
+      opacity: 0.6;
+    }
+  }
+</style>

package/dist/components/messaging/TypingIndicator.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    users?: string[];
+    class?: string;
+}
+declare const TypingIndicator: import("svelte").Component<Props, {}, "">;
+type TypingIndicator = ReturnType<typeof TypingIndicator>;
+export default TypingIndicator;

package/dist/components/pipeline/PipelineColumn.svelte

@@ -59,7 +59,25 @@
 			stage.droppableIn !== false
 	);
 
-	const flipDuration = $derived(drag?.flipDurationMs ?? 200);
+	const flipDuration = $derived(drag?.flipDurationMs ?? 300); // var(--motion-move) = 300ms
+
+	// Track which item was just dropped to play a spring settle pulse
+	let settledItemId = $state<string | number | null>(null);
+	let settleTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function handleFinalize(e: CustomEvent) {
+		onDndFinalize?.(e);
+		// Find the dropped item (first item if array changed, or use event detail)
+		const droppedItem = e.detail?.items?.[0];
+		if (droppedItem?.id !== undefined) {
+			if (settleTimer) clearTimeout(settleTimer);
+			settledItemId = droppedItem.id;
+			// Spring settle lasts ~400ms (single overshoot)
+			settleTimer = setTimeout(() => {
+				settledItemId = null;
+			}, 400);
+		}
+	}
 </script>
 
 <div
@@ -119,11 +137,14 @@
 						dropTargetClasses: drag?.dropTargetClass ? [drag.dropTargetClass] : []
 					}}
 					onconsider={(e) => onDndConsider?.(e)}
-					onfinalize={(e) => onDndFinalize?.(e)}
+					onfinalize={handleFinalize}
 					class="flex flex-col gap-2 min-h-8 flex-1"
 				>
 					{#each items as item (item.id)}
-						<div animate:flip={{ duration: flipDuration }}>
+						<div
+							animate:flip={{ duration: flipDuration, easing: (t) => t }}
+							class={settledItemId === item.id ? 'pipeline-card-settle' : ''}
+						>
 							{#if card}
 								{@render card({ item, stage })}
 							{:else}
@@ -161,3 +182,23 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	/* Spring settle pulse — single overshoot scale on drop (gesture-release, sanctioned). */
+	.pipeline-card-settle > :global(*) {
+		animation: pipeline-settle 400ms var(--motion-spring) forwards;
+		transform-origin: center;
+	}
+
+	@keyframes pipeline-settle {
+		0%   { transform: scale(1); }
+		40%  { transform: scale(1.02); }
+		100% { transform: scale(1); }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.pipeline-card-settle > :global(*) {
+			animation: none;
+		}
+	}
+</style>

package/dist/components/progress/ProgressBar.svelte

@@ -0,0 +1,189 @@
+<script lang="ts">
+	interface Segment {
+		value: number;
+		color?: string;
+	}
+
+	interface Props {
+		value?: number;
+		indeterminate?: boolean;
+		segments?: Segment[];
+		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		label?: string;
+		showLabel?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = 0,
+		indeterminate = false,
+		segments,
+		color = 'primary',
+		size = 'md',
+		label,
+		showLabel = false,
+		class: className = ''
+	}: Props = $props();
+
+	const clampedValue = $derived(Math.min(100, Math.max(0, value)));
+
+	const heightMap: Record<NonNullable<Props['size']>, string> = {
+		xs: '4px',
+		sm: '6px',
+		md: '8px',
+		lg: '12px'
+	};
+
+	const colorMap: Record<NonNullable<Props['color']>, string> = {
+		primary: 'oklch(var(--p))',
+		secondary: 'oklch(var(--s))',
+		accent: 'oklch(var(--a))',
+		success: 'oklch(var(--su))',
+		warning: 'oklch(var(--wa))',
+		error: 'oklch(var(--er))',
+		info: 'oklch(var(--in))'
+	};
+
+	const trackHeight = $derived(heightMap[size]);
+	const fillColor = $derived(colorMap[color]);
+</script>
+
+<div class="progress-wrap {className}" aria-label={label ?? 'Progress'}>
+	{#if label && showLabel}
+		<div class="progress-label">
+			<span>{label}</span>
+			{#if !indeterminate}
+				<span class="progress-pct">{clampedValue}%</span>
+			{/if}
+		</div>
+	{/if}
+
+	<div
+		class="progress-track"
+		style="height:{trackHeight}"
+		role="progressbar"
+		aria-valuenow={indeterminate ? undefined : clampedValue}
+		aria-valuemin={0}
+		aria-valuemax={100}
+		aria-label={label ?? 'Progress'}
+	>
+		{#if indeterminate}
+			<div class="progress-indeterminate" style="background:{fillColor}"></div>
+		{:else if segments && segments.length > 0}
+			<div class="progress-segments">
+				{#each segments as seg, i}
+					<div
+						class="progress-segment"
+						class:progress-segment--filled={i < value}
+						style="--seg-color:{seg.color ? seg.color : fillColor}"
+					></div>
+				{/each}
+			</div>
+		{:else}
+			<div
+				class="progress-fill"
+				style="width:{clampedValue}%;background:{fillColor}"
+			></div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.progress-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		width: 100%;
+	}
+
+	.progress-label {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		font-size: 0.8125rem;
+		color: oklch(var(--bc) / 0.7);
+	}
+
+	.progress-pct {
+		font-variant-numeric: tabular-nums;
+		font-size: 0.75rem;
+	}
+
+	.progress-track {
+		position: relative;
+		width: 100%;
+		border-radius: 9999px;
+		background: oklch(var(--b3) / 1);
+		overflow: hidden;
+	}
+
+	/* Determinate fill — gentle glide spring on width change */
+	.progress-fill {
+		height: 100%;
+		border-radius: 9999px;
+		transition: width 0.9s var(--motion-glide);
+	}
+
+	/* Indeterminate sweep */
+	.progress-indeterminate {
+		position: absolute;
+		inset: 0;
+		width: 40%;
+		border-radius: 9999px;
+		animation: progress-slide 1.4s var(--motion-glide) infinite;
+	}
+
+	@keyframes progress-slide {
+		0% {
+			transform: translateX(-100%);
+		}
+		100% {
+			transform: translateX(320%);
+		}
+	}
+
+	/* Segment loader */
+	.progress-segments {
+		display: flex;
+		height: 100%;
+		gap: 3px;
+		padding: 0 2px;
+	}
+
+	.progress-segment {
+		flex: 1;
+		height: 100%;
+		border-radius: 9999px;
+		background: oklch(var(--b1) / 1);
+		overflow: hidden;
+		position: relative;
+	}
+
+	.progress-segment::after {
+		content: '';
+		display: block;
+		height: 100%;
+		background: var(--seg-color);
+		transform: scaleX(0);
+		transform-origin: left;
+		transition: transform 0.35s var(--motion-glide);
+	}
+
+	.progress-segment--filled::after {
+		transform: scaleX(1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.progress-fill {
+			transition: none;
+		}
+		.progress-indeterminate {
+			animation: none;
+			transform: translateX(140%);
+		}
+		.progress-segment::after {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/progress/ProgressBar.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Segment {
+    value: number;
+    color?: string;
+}
+interface Props {
+    value?: number;
+    indeterminate?: boolean;
+    segments?: Segment[];
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    label?: string;
+    showLabel?: boolean;
+    class?: string;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/progress/ProgressRing.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		size?: number;
+		strokeWidth?: number;
+		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		label?: string | null;
+		showValue?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = 0,
+		size = 80,
+		strokeWidth = 6,
+		color = 'primary',
+		label = null,
+		showValue = true,
+		class: className = ''
+	}: Props = $props();
+
+	const clampedValue = $derived(Math.min(100, Math.max(0, value)));
+
+	const r = $derived((size - strokeWidth) / 2);
+	const circumference = $derived(2 * Math.PI * r);
+	const offset = $derived(circumference * (1 - clampedValue / 100));
+	const cx = $derived(size / 2);
+	const cy = $derived(size / 2);
+
+	const colorMap: Record<NonNullable<Props['color']>, string> = {
+		primary: 'oklch(var(--p))',
+		secondary: 'oklch(var(--s))',
+		accent: 'oklch(var(--a))',
+		success: 'oklch(var(--su))',
+		warning: 'oklch(var(--wa))',
+		error: 'oklch(var(--er))',
+		info: 'oklch(var(--in))'
+	};
+
+	const strokeColor = $derived(colorMap[color]);
+	const fontSize = $derived(Math.round(size * 0.2));
+</script>
+
+<div
+	class="progress-ring {className}"
+	style="width:{size}px;height:{size}px"
+	role="progressbar"
+	aria-valuenow={clampedValue}
+	aria-valuemin={0}
+	aria-valuemax={100}
+	aria-label={label ?? 'Progress'}
+>
+	<!-- Rotate -90deg so fill starts from 12 o'clock -->
+	<svg viewBox="0 0 {size} {size}" style="transform:rotate(-90deg)">
+		<!-- Track -->
+		<circle
+			{cx}
+			{cy}
+			r={r}
+			fill="none"
+			stroke="oklch(var(--b3) / 1)"
+			stroke-width={strokeWidth}
+		/>
+		<!-- Progress arc -->
+		<circle
+			{cx}
+			{cy}
+			r={r}
+			fill="none"
+			stroke={strokeColor}
+			stroke-width={strokeWidth}
+			stroke-linecap="round"
+			stroke-dasharray={circumference}
+			stroke-dashoffset={offset}
+			class="ring-prog"
+		/>
+	</svg>
+
+	{#if showValue || label}
+		<div class="ring-label" style="font-size:{fontSize}px">
+			{#if showValue}
+				<span class="ring-value">{clampedValue}%</span>
+			{/if}
+			{#if label}
+				<span class="ring-sublabel">{label}</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.progress-ring {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	.progress-ring svg {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.ring-prog {
+		transition: stroke-dashoffset 0.9s var(--motion-glide);
+	}
+
+	.ring-label {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		line-height: 1.1;
+		color: oklch(var(--bc) / 1);
+		pointer-events: none;
+		z-index: 1;
+	}
+
+	.ring-value {
+		font-variant-numeric: tabular-nums;
+		font-weight: 600;
+	}
+
+	.ring-sublabel {
+		font-size: 0.625em;
+		color: oklch(var(--bc) / 0.6);
+		margin-top: 0.125em;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ring-prog {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/progress/ProgressRing.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    value?: number;
+    size?: number;
+    strokeWidth?: number;
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    label?: string | null;
+    showValue?: boolean;
+    class?: string;
+}
+declare const ProgressRing: import("svelte").Component<Props, {}, "">;
+type ProgressRing = ReturnType<typeof ProgressRing>;
+export default ProgressRing;