@joewinke/jatui 0.1.33 → 0.2.0

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;

package/dist/components/progress/Steps.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	interface Step {
+		label?: string;
+		description?: string;
+	}
+
+	interface Props {
+		steps: Step[] | string[];
+		current?: number;
+		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let {
+		steps,
+		current = 1,
+		color = 'primary',
+		size = 'md',
+		class: className = ''
+	}: Props = $props();
+
+	const normalized = $derived(
+		steps.map((s) => (typeof s === 'string' ? { label: s } : s))
+	);
+
+	const count = $derived(normalized.length);
+	const trackFill = $derived(count > 1 ? (current - 1) / (count - 1) : 1);
+
+	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 colorFg: Record<NonNullable<Props['color']>, string> = {
+		primary: 'oklch(var(--pc))',
+		secondary: 'oklch(var(--sc))',
+		accent: 'oklch(var(--ac))',
+		success: 'oklch(var(--suc))',
+		warning: 'oklch(var(--wac))',
+		error: 'oklch(var(--erc))',
+		info: 'oklch(var(--inc))'
+	};
+
+	const fillColor = $derived(colorMap[color]);
+	const fgColor = $derived(colorFg[color]);
+
+	const nodeSize: Record<NonNullable<Props['size']>, number> = { sm: 24, md: 32, lg: 40 };
+	const nodePx = $derived(nodeSize[size]);
+	const fontSize: Record<NonNullable<Props['size']>, string> = { sm: '0.6875rem', md: '0.8125rem', lg: '1rem' };
+	const labelSize = $derived(fontSize[size]);
+</script>
+
+<div
+	class="steps-wrap {className}"
+	role="list"
+	aria-label="Progress steps"
+	style="--fill:{fillColor};--fg:{fgColor};--node:{nodePx}px"
+>
+	<!-- Connector track -->
+	<div class="steps-track" aria-hidden="true">
+		<div class="steps-track-fill" style="transform:scaleX({trackFill})"></div>
+	</div>
+
+	<!-- Step nodes -->
+	{#each normalized as step, i}
+		{@const stepNum = i + 1}
+		{@const isComplete = stepNum < current}
+		{@const isActive = stepNum === current}
+		<div
+			class="step"
+			class:step--complete={isComplete}
+			class:step--active={isActive}
+			role="listitem"
+			aria-current={isActive ? 'step' : undefined}
+		>
+			<div class="step-node" style="font-size:{labelSize}">
+				{#if isComplete}
+					<!-- Check mark drawn in on complete -->
+					<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="step-check" aria-hidden="true">
+						<polyline points="3,8 6.5,12 13,4" />
+					</svg>
+				{:else}
+					<span>{stepNum}</span>
+				{/if}
+			</div>
+			{#if step.label}
+				<span class="step-label" style="font-size:{labelSize}">{step.label}</span>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<style>
+	.steps-wrap {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		width: 100%;
+		padding-top: calc(var(--node) / 2);
+	}
+
+	/* The connector track runs behind the nodes */
+	.steps-track {
+		position: absolute;
+		top: calc(var(--node) / 2);
+		left: calc(var(--node) / 2);
+		right: calc(var(--node) / 2);
+		height: 3px;
+		border-radius: 9999px;
+		background: oklch(var(--b3) / 1);
+		overflow: hidden;
+		transform: translateY(-50%);
+	}
+
+	.steps-track-fill {
+		height: 100%;
+		background: var(--fill);
+		transform-origin: left;
+		transition: transform 0.5s var(--motion-spring);
+	}
+
+	/* Nodes */
+	.step {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.375rem;
+		z-index: 1;
+		position: relative;
+	}
+
+	.step-node {
+		width: var(--node);
+		height: var(--node);
+		border-radius: 9999px;
+		background: oklch(var(--b3) / 1);
+		color: oklch(var(--bc) / 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-weight: 600;
+		border: 2px solid oklch(var(--b3) / 1);
+		transition:
+			background 0.2s var(--motion-glide),
+			color 0.2s var(--motion-glide),
+			border-color 0.2s var(--motion-glide),
+			transform 0.4s var(--motion-spring);
+	}
+
+	.step--active .step-node {
+		background: oklch(var(--b1) / 1);
+		border-color: var(--fill);
+		color: var(--fill);
+		transform: scale(1.18);
+	}
+
+	.step--complete .step-node {
+		background: var(--fill);
+		border-color: var(--fill);
+		color: var(--fg);
+	}
+
+	.step-check {
+		width: 55%;
+		height: 55%;
+	}
+
+	.step-label {
+		color: oklch(var(--bc) / 0.6);
+		text-align: center;
+		max-width: 5rem;
+		line-height: 1.2;
+		transition: color 0.2s var(--motion-glide);
+	}
+
+	.step--active .step-label,
+	.step--complete .step-label {
+		color: oklch(var(--bc) / 1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.steps-track-fill {
+			transition: none;
+		}
+		.step-node {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,14 @@
+interface Step {
+    label?: string;
+    description?: string;
+}
+interface Props {
+    steps: Step[] | string[];
+    current?: number;
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const Steps: import("svelte").Component<Props, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;