@joewinke/jatui 0.1.33 → 0.2.0

package/dist/showcase/ShineSweep.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		interval?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { interval, class: className = '', children }: Props = $props();
+
+	let el = $state<HTMLDivElement | null>(null);
+	let sweeping = $state(false);
+
+	onMount(() => {
+		if (!interval) return;
+
+		let timer: ReturnType<typeof setInterval>;
+
+		function trigger() {
+			sweeping = true;
+			setTimeout(() => {
+				sweeping = false;
+			}, 1000);
+		}
+
+		timer = setInterval(trigger, interval * 1000);
+		return () => clearInterval(timer);
+	});
+</script>
+
+<div
+	bind:this={el}
+	class="shine-sweep-root {sweeping ? 'sweeping' : ''} {className}"
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	.shine-sweep-root {
+		position: relative;
+		overflow: hidden;
+	}
+
+	.shine-sweep-root::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: -120%;
+		width: 60%;
+		height: 100%;
+		transform: skewX(-20deg);
+		background: linear-gradient(
+			90deg,
+			transparent,
+			color-mix(in srgb, white 25%, transparent),
+			transparent
+		);
+		pointer-events: none;
+	}
+
+	.shine-sweep-root:hover::before,
+	.shine-sweep-root.sweeping::before {
+		left: 120%;
+		transition: left 0.9s var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.shine-sweep-root::before {
+			display: none;
+		}
+
+		.shine-sweep-root:hover::before,
+		.shine-sweep-root.sweeping::before {
+			display: none;
+		}
+	}
+</style>

package/dist/showcase/ShineSweep.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    interval?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const ShineSweep: import("svelte").Component<Props, {}, "">;
+type ShineSweep = ReturnType<typeof ShineSweep>;
+export default ShineSweep;

package/dist/showcase/Terminal.svelte

@@ -0,0 +1,230 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import { onMount, onDestroy } from 'svelte';
+
+	export interface TerminalLine {
+		/** Shell prompt prefix. Falsy = output line (no prompt). */
+		prompt?: string;
+		text: string;
+		/** Delay in ms before this line starts rendering (default 0 for first, 400 for rest) */
+		delay?: number;
+	}
+
+	interface Props {
+		lines: TerminalLine[];
+		loop?: boolean;
+		/** Typing speed in characters per second */
+		speed?: number;
+		title?: string;
+		class?: string;
+	}
+
+	let {
+		lines,
+		loop = false,
+		speed = 40,
+		title = 'Terminal',
+		class: className = ''
+	}: Props = $props();
+
+	interface RenderedLine {
+		prompt?: string;
+		text: string;
+		done: boolean;
+	}
+
+	let rendered = $state<RenderedLine[]>([]);
+	let reducedMotion = $state(false);
+	let timer: ReturnType<typeof setTimeout> | null = null;
+	let raf: number | null = null;
+
+	function clear() {
+		if (timer) { clearTimeout(timer); timer = null; }
+		if (raf) { cancelAnimationFrame(raf); raf = null; }
+	}
+
+	function typeLine(lineIdx: number, charIdx: number, startTime: number) {
+		if (lineIdx >= lines.length) {
+			if (loop) {
+				timer = setTimeout(() => {
+					rendered = [];
+					timer = setTimeout(() => runFrom(0), 400);
+				}, 1200);
+			}
+			return;
+		}
+
+		const src = lines[lineIdx];
+		const msPerChar = 1000 / speed;
+
+		if (charIdx === 0) {
+			rendered = [
+				...rendered,
+				{ prompt: src.prompt, text: '', done: false }
+			];
+		}
+
+		const now = performance.now();
+		const elapsed = now - startTime;
+		const targetChar = Math.min(Math.floor(elapsed / msPerChar), src.text.length);
+
+		// Update the current line's text
+		rendered = rendered.map((l, i) =>
+			i === rendered.length - 1
+				? { ...l, text: src.text.slice(0, targetChar), done: targetChar >= src.text.length }
+				: l
+		);
+
+		if (targetChar < src.text.length) {
+			raf = requestAnimationFrame(() => typeLine(lineIdx, targetChar, startTime));
+		} else {
+			// Done with this line, schedule next
+			const nextLine = lines[lineIdx + 1];
+			const nextDelay = nextLine?.delay ?? (lineIdx === 0 ? 0 : 400);
+			timer = setTimeout(() => {
+				runLine(lineIdx + 1);
+			}, nextDelay);
+		}
+	}
+
+	function runLine(idx: number) {
+		if (idx >= lines.length) {
+			if (loop) {
+				timer = setTimeout(() => {
+					rendered = [];
+					timer = setTimeout(() => runFrom(0), 400);
+				}, 1200);
+			}
+			return;
+		}
+		typeLine(idx, 0, performance.now());
+	}
+
+	function runFrom(startIdx: number) {
+		const firstDelay = lines[startIdx]?.delay ?? 0;
+		timer = setTimeout(() => runLine(startIdx), firstDelay);
+	}
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		if (reducedMotion) {
+			rendered = lines.map((l) => ({ prompt: l.prompt, text: l.text, done: true }));
+		} else {
+			runFrom(0);
+		}
+	});
+
+	onDestroy(clear);
+</script>
+
+<div class="terminal {className}" role="region" aria-label={title}>
+	<!-- Chrome header -->
+	<div class="terminal-header" aria-hidden="true">
+		<span class="traffic-dot" style="background:#ff5f57;"></span>
+		<span class="traffic-dot" style="background:#febc2e;"></span>
+		<span class="traffic-dot" style="background:#28c840;"></span>
+		<span class="terminal-title">{title}</span>
+	</div>
+
+	<!-- Output area -->
+	<div class="terminal-body" aria-live="polite" aria-atomic="false">
+		{#each rendered as line, i}
+			<div class="terminal-line">
+				{#if line.prompt}
+					<span class="terminal-prompt">{line.prompt}</span>
+				{/if}
+				<span class="terminal-text" class:terminal-output={!line.prompt}>{line.text}</span>
+				{#if i === rendered.length - 1 && !line.done && !reducedMotion}
+					<span class="terminal-cursor" aria-hidden="true"></span>
+				{/if}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.terminal {
+		font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+		font-size: 0.8125rem;
+		line-height: 1.6;
+		background: oklch(var(--n));
+		color: oklch(var(--nc));
+		border-radius: var(--jatui-radius-box);
+		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.12);
+		overflow: hidden;
+		min-width: 320px;
+	}
+
+	.terminal-header {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 10px 14px;
+		background: oklch(var(--n) / 0.8);
+		border-bottom: var(--jatui-border-w) solid oklch(var(--bc) / 0.1);
+	}
+
+	.traffic-dot {
+		display: inline-block;
+		width: 12px;
+		height: 12px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+
+	.terminal-title {
+		margin-left: 8px;
+		font-size: 0.75rem;
+		opacity: 0.6;
+		flex: 1;
+		text-align: center;
+	}
+
+	.terminal-body {
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-height: 80px;
+	}
+
+	.terminal-line {
+		display: flex;
+		align-items: baseline;
+		gap: 6px;
+		white-space: pre-wrap;
+		word-break: break-all;
+	}
+
+	.terminal-prompt {
+		color: oklch(var(--su, 0.75 0.18 142));
+		flex-shrink: 0;
+		user-select: none;
+	}
+
+	.terminal-output {
+		color: oklch(var(--nc) / 0.7);
+	}
+
+	.terminal-cursor {
+		display: inline-block;
+		width: 8px;
+		height: 1.1em;
+		background: currentColor;
+		vertical-align: text-bottom;
+		animation: term-blink 1s steps(1) infinite;
+		flex-shrink: 0;
+	}
+
+	@keyframes term-blink {
+		0%, 100% { opacity: 1; }
+		50% { opacity: 0; }
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.terminal-cursor {
+			animation: none;
+			display: none;
+		}
+	}
+</style>

package/dist/showcase/Terminal.svelte.d.ts

@@ -0,0 +1,18 @@
+export interface TerminalLine {
+    /** Shell prompt prefix. Falsy = output line (no prompt). */
+    prompt?: string;
+    text: string;
+    /** Delay in ms before this line starts rendering (default 0 for first, 400 for rest) */
+    delay?: number;
+}
+interface Props {
+    lines: TerminalLine[];
+    loop?: boolean;
+    /** Typing speed in characters per second */
+    speed?: number;
+    title?: string;
+    class?: string;
+}
+declare const Terminal: import("svelte").Component<Props, {}, "">;
+type Terminal = ReturnType<typeof Terminal>;
+export default Terminal;

package/dist/showcase/TextSplitReveal.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { splitText } from '../utils/splitText.js';
+
+	type Split = 'char' | 'word';
+	type TriggerMode = 'mount' | 'intersect';
+
+	let {
+		text,
+		split = 'char' as Split,
+		triggerMode = 'mount' as TriggerMode,
+		class: className = ''
+	}: {
+		text: string;
+		split?: Split;
+		triggerMode?: TriggerMode;
+		/** @deprecated staggerMs is now a CSS-only calc — this prop is ignored. */
+		staggerMs?: number;
+		class?: string;
+	} = $props();
+
+	let elRef: HTMLSpanElement | undefined = $state();
+	let revealed = $state(false);
+	let prefersReducedMotion = $state(false);
+
+	onMount(() => {
+		if (!elRef) return;
+
+		prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		if (prefersReducedMotion) {
+			revealed = true;
+			return;
+		}
+
+		// Apply split; stagger delay is pure CSS via calc(var(--char-index) * 30ms)
+		splitText(elRef, { by: split });
+
+		if (triggerMode === 'mount') {
+			// Single rAF so the initial translateY(110%) is painted before we set revealed
+			requestAnimationFrame(() => {
+				revealed = true;
+			});
+		} else if (triggerMode === 'intersect') {
+			const observer = new IntersectionObserver(
+				(entries) => {
+					if (entries[0].isIntersecting) {
+						revealed = true;
+						observer.disconnect();
+					}
+				},
+				{ threshold: 0.1 }
+			);
+			observer.observe(elRef);
+			return () => observer.disconnect();
+		}
+	});
+
+	// Re-split when text or split mode changes after mount.
+	$effect(() => {
+		if (!elRef || prefersReducedMotion) return;
+		void text;
+		void split;
+		splitText(elRef, { by: split });
+		// Reset so re-reveal fires when the text actually changes
+		revealed = false;
+		requestAnimationFrame(() => {
+			revealed = true;
+		});
+	});
+</script>
+
+<!--
+  splitText stamps aria-label on the container with the original text.
+  Injected spans are aria-hidden so screenreaders hear the label only.
+  prefers-reduced-motion: render plain text immediately, skip split.
+-->
+<span
+	bind:this={elRef}
+	class="text-split-reveal {className}"
+	class:revealed
+	data-split={split}
+	aria-label={prefersReducedMotion ? text : undefined}
+>
+	{#if prefersReducedMotion}
+		{text}
+	{/if}
+</span>
+
+<style>
+	.text-split-reveal {
+		display: inline;
+	}
+
+	/*
+	 * Each injected span gets --char-index / --word-index from splitText.
+	 * Stagger delay is pure CSS — no JS timeout loop needed.
+	 *
+	 * Clip trick: overflow:hidden masks the initial translateY(110%);
+	 * .revealed removes the transform via the sibling rule below.
+	 */
+
+	/* char mode */
+	.text-split-reveal[data-split='char'] :global(span[aria-hidden='true']) {
+		display: inline-block;
+		overflow: hidden;
+		vertical-align: bottom;
+		transform: translateY(110%);
+		transition: transform var(--motion-move, 300ms)
+			var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1))
+			calc(var(--char-index, 0) * 30ms);
+	}
+
+	.text-split-reveal[data-split='char'].revealed :global(span[aria-hidden='true']) {
+		transform: translateY(0);
+	}
+
+	/* word mode */
+	.text-split-reveal[data-split='word'] :global(span[aria-hidden='true']) {
+		display: inline-block;
+		overflow: hidden;
+		vertical-align: bottom;
+		transform: translateY(110%);
+		transition: transform var(--motion-move, 300ms)
+			var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1))
+			calc(var(--word-index, 0) * 60ms);
+	}
+
+	.text-split-reveal[data-split='word'].revealed :global(span[aria-hidden='true']) {
+		transform: translateY(0);
+	}
+
+	/* whitespace spacer spans between words — never animate */
+	.text-split-reveal :global(span[style*='white-space: pre']) {
+		overflow: visible;
+		transform: none !important;
+		transition: none !important;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.text-split-reveal :global(span[aria-hidden='true']) {
+			transform: none !important;
+			transition: none !important;
+		}
+	}
+</style>

package/dist/showcase/TextSplitReveal.svelte.d.ts

@@ -0,0 +1,13 @@
+type Split = 'char' | 'word';
+type TriggerMode = 'mount' | 'intersect';
+type $$ComponentProps = {
+    text: string;
+    split?: Split;
+    triggerMode?: TriggerMode;
+    /** @deprecated staggerMs is now a CSS-only calc — this prop is ignored. */
+    staggerMs?: number;
+    class?: string;
+};
+declare const TextSplitReveal: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextSplitReveal = ReturnType<typeof TextSplitReveal>;
+export default TextSplitReveal;

package/dist/showcase/TextWave.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+
+	interface Props {
+		text: string;
+		paused?: boolean;
+		class?: string;
+	}
+
+	let { text, paused = false, class: className = '' }: Props = $props();
+
+	// Cleanup hook — animation is CSS-driven so nothing to cancel,
+	// but we expose the pattern for future imperative needs.
+	onDestroy(() => {});
+</script>
+
+<span class="text-wave {className}" aria-label={text}>
+	{#each text.split('') as char, i}
+		<span
+			class="wave-char"
+			aria-hidden="true"
+			style="animation-delay: -{(i * 0.09).toFixed(2)}s; animation-play-state: {paused
+				? 'paused'
+				: 'running'};"
+		>{char === ' ' ? ' ' : char}</span>
+	{/each}
+</span>
+
+<style>
+	@keyframes bob {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+		28% {
+			transform: translateY(-13px);
+		}
+	}
+
+	.text-wave {
+		display: inline-flex;
+		flex-wrap: wrap;
+	}
+
+	.wave-char {
+		display: inline-block;
+		animation: bob 1.5s ease-in-out infinite;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wave-char {
+			animation: none;
+		}
+	}
+</style>

package/dist/showcase/TextWave.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    text: string;
+    paused?: boolean;
+    class?: string;
+}
+declare const TextWave: import("svelte").Component<Props, {}, "">;
+type TextWave = ReturnType<typeof TextWave>;
+export default TextWave;

package/dist/showcase/TypewriterText.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { onMount, onDestroy } from 'svelte';
+
+	interface Props {
+		phrases: string[];
+		cursor?: boolean;
+		loop?: boolean;
+		class?: string;
+	}
+
+	let {
+		phrases,
+		cursor = true,
+		loop = false,
+		class: className = ''
+	}: Props = $props();
+
+	let displayed = $state('');
+	let caretVisible = $state(true);
+	let reducedMotion = $state(false);
+	let done = $state(false);
+
+	let timeout: ReturnType<typeof setTimeout> | null = null;
+
+	function schedule(fn: () => void, ms: number) {
+		timeout = setTimeout(fn, ms);
+	}
+
+	function clearScheduled() {
+		if (timeout !== null) {
+			clearTimeout(timeout);
+			timeout = null;
+		}
+	}
+
+	function run(phraseIdx: number, charIdx: number, deleting: boolean) {
+		if (reducedMotion) return;
+
+		const phrase = phrases[phraseIdx];
+
+		if (!deleting) {
+			// Typing
+			if (charIdx <= phrase.length) {
+				displayed = phrase.slice(0, charIdx);
+				if (charIdx < phrase.length) {
+					schedule(() => run(phraseIdx, charIdx + 1, false), 55);
+				} else {
+					// Finished typing full phrase
+					schedule(() => {
+						// Pause at full phrase
+						const isLast = phraseIdx === phrases.length - 1;
+						if (!loop && isLast) {
+							done = true;
+							return;
+						}
+						// Start deleting
+						schedule(() => run(phraseIdx, phrase.length, true), 0);
+					}, 1100);
+				}
+			}
+		} else {
+			// Deleting
+			if (charIdx >= 0) {
+				displayed = phrase.slice(0, charIdx);
+				if (charIdx > 0) {
+					schedule(() => run(phraseIdx, charIdx - 1, true), 30);
+				} else {
+					// Finished deleting — pause then move to next phrase
+					const nextIdx = (phraseIdx + 1) % phrases.length;
+					schedule(() => run(nextIdx, 0, false), 320);
+				}
+			}
+		}
+	}
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		if (reducedMotion) {
+			displayed = phrases[0] ?? '';
+		} else {
+			run(0, 0, false);
+		}
+	});
+
+	onDestroy(() => {
+		clearScheduled();
+	});
+</script>
+
+<span class="typewriter {className}" class:no-caret={!cursor || done || reducedMotion}>
+	{displayed}<span class="caret" aria-hidden="true"></span>
+</span>
+
+<style>
+	.typewriter {
+		display: inline;
+	}
+
+	.caret::after {
+		content: '';
+		display: inline-block;
+		width: 2px;
+		height: 1.1em;
+		background: currentColor;
+		margin-left: 1px;
+		vertical-align: text-bottom;
+		animation: caret-blink 1s steps(1) infinite;
+	}
+
+	.no-caret .caret::after {
+		display: none;
+	}
+
+	@keyframes caret-blink {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.caret::after {
+			animation: none;
+			display: none;
+		}
+	}
+</style>

package/dist/showcase/TypewriterText.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    phrases: string[];
+    cursor?: boolean;
+    loop?: boolean;
+    class?: string;
+}
+declare const TypewriterText: import("svelte").Component<Props, {}, "">;
+type TypewriterText = ReturnType<typeof TypewriterText>;
+export default TypewriterText;