@joewinke/jatui 0.1.33 → 0.2.0

package/dist/showcase/DeviceMock.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+	import type { Snippet } from 'svelte';
+
+	type Variant = 'iphone' | 'safari' | 'android';
+
+	interface Props {
+		variant?: Variant;
+		width?: number;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { variant = 'iphone', width = 300, class: className = '', children }: Props = $props();
+
+	// Viewport sizes relative to SVG viewBox
+	const configs = {
+		iphone: {
+			viewBox: '0 0 390 844',
+			// Screen area inside the device frame
+			screenX: 15,
+			screenY: 55,
+			screenW: 360,
+			screenH: 734
+		},
+		safari: {
+			viewBox: '0 0 1280 832',
+			screenX: 1,
+			screenY: 88,
+			screenW: 1278,
+			screenH: 743
+		},
+		android: {
+			viewBox: '0 0 390 844',
+			screenX: 12,
+			screenY: 24,
+			screenW: 366,
+			screenH: 796
+		}
+	};
+
+	const cfg = $derived(configs[variant]);
+	const aspectRatio = $derived(
+		(() => {
+			const [vw, vh] = cfg.viewBox.split(' ').slice(2).map(Number);
+			return vh / vw;
+		})()
+	);
+	const height = $derived(Math.round(width * aspectRatio));
+	const screenAspect = $derived(cfg.screenH / cfg.screenW);
+</script>
+
+<div
+	class="device-mock {className}"
+	style="width: {width}px; height: {height}px;"
+	role="img"
+	aria-label="{variant} device mockup"
+>
+	<svg
+		viewBox={cfg.viewBox}
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		class="device-frame"
+		aria-hidden="true"
+	>
+		{#if variant === 'iphone'}
+			<!-- iPhone frame -->
+			<rect
+				x="1"
+				y="1"
+				width="388"
+				height="842"
+				rx="55"
+				ry="55"
+				fill="oklch(var(--b2, var(--b1)))"
+				stroke="oklch(var(--bc) / 0.15)"
+				stroke-width="2"
+			/>
+			<!-- Side buttons -->
+			<rect x="-2" y="160" width="4" height="60" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<rect x="-2" y="230" width="4" height="90" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<rect x="-2" y="330" width="4" height="90" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<rect x="388" y="220" width="4" height="120" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<!-- Screen bezel -->
+			<rect x="15" y="55" width="360" height="734" rx="42" ry="42" fill="oklch(var(--b1))" />
+			<!-- Dynamic island -->
+			<rect x="155" y="20" width="80" height="30" rx="15" fill="oklch(var(--n))" />
+			<!-- Home indicator -->
+			<rect x="150" y="808" width="90" height="5" rx="2.5" fill="oklch(var(--bc) / 0.25)" />
+		{:else if variant === 'safari'}
+			<!-- Safari browser window -->
+			<rect
+				x="0"
+				y="0"
+				width="1280"
+				height="832"
+				rx="10"
+				ry="10"
+				fill="oklch(var(--b2, var(--b1)))"
+				stroke="oklch(var(--bc) / 0.15)"
+				stroke-width="1"
+			/>
+			<!-- Title bar -->
+			<rect x="0" y="0" width="1280" height="88" rx="10" fill="oklch(var(--b3, var(--b2, var(--b1))))" />
+			<rect x="10" y="44" width="1260" height="44" rx="0" fill="oklch(var(--b3, var(--b2, var(--b1))))" />
+			<!-- Traffic lights -->
+			<circle cx="20" cy="22" r="7" fill="#ff5f57" />
+			<circle cx="44" cy="22" r="7" fill="#febc2e" />
+			<circle cx="68" cy="22" r="7" fill="#28c840" />
+			<!-- Address bar -->
+			<rect
+				x="320"
+				y="52"
+				width="640"
+				height="28"
+				rx="14"
+				fill="oklch(var(--b1))"
+				stroke="oklch(var(--bc) / 0.1)"
+				stroke-width="1"
+			/>
+			<!-- Screen content area -->
+			<rect x="1" y="88" width="1278" height="743" fill="oklch(var(--b1))" />
+			<!-- Bottom round corners clip -->
+			<rect x="0" y="822" width="1280" height="10" rx="0" fill="oklch(var(--b2, var(--b1)))" />
+		{:else}
+			<!-- Android frame -->
+			<rect
+				x="1"
+				y="1"
+				width="388"
+				height="842"
+				rx="42"
+				ry="42"
+				fill="oklch(var(--b2, var(--b1)))"
+				stroke="oklch(var(--bc) / 0.15)"
+				stroke-width="2"
+			/>
+			<!-- Side buttons -->
+			<rect x="-2" y="200" width="4" height="80" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<rect x="388" y="180" width="4" height="60" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<rect x="388" y="250" width="4" height="100" rx="2" fill="oklch(var(--bc) / 0.2)" />
+			<!-- Screen -->
+			<rect x="12" y="24" width="366" height="796" rx="34" fill="oklch(var(--b1))" />
+			<!-- Front camera -->
+			<circle cx="195" cy="44" r="6" fill="oklch(var(--n))" />
+			<!-- Nav bar -->
+			<rect x="130" y="820" width="130" height="5" rx="2.5" fill="oklch(var(--bc) / 0.25)" />
+		{/if}
+	</svg>
+
+	<!-- Slot content rendered inside screen area -->
+	<div
+		class="device-screen"
+		style="
+			left: {(cfg.screenX / Number(cfg.viewBox.split(' ')[2])) * 100}%;
+			top: {(cfg.screenY / Number(cfg.viewBox.split(' ')[3])) * 100}%;
+			width: {(cfg.screenW / Number(cfg.viewBox.split(' ')[2])) * 100}%;
+			height: {(cfg.screenH / Number(cfg.viewBox.split(' ')[3])) * 100}%;
+		"
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.device-mock {
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+	}
+
+	.device-frame {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.device-screen {
+		position: absolute;
+		overflow: hidden;
+		border-radius: inherit;
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Variant = 'iphone' | 'safari' | 'android';
+interface Props {
+    variant?: Variant;
+    width?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const DeviceMock: import("svelte").Component<Props, {}, "">;
+type DeviceMock = ReturnType<typeof DeviceMock>;
+export default DeviceMock;

package/dist/showcase/Dock.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	// pattern after magicui.design (MIT)
+
+	export interface DockItem {
+		label: string;
+		/** Inline SVG string for the icon */
+		iconSvg?: string;
+		onclick?: () => void;
+	}
+
+	interface Props {
+		items: DockItem[];
+		/** Max scale factor at pointer proximity */
+		magnification?: number;
+		/** Radius in px around pointer that triggers magnification */
+		radius?: number;
+		class?: string;
+	}
+
+	let { items, magnification = 1.6, radius = 120, class: className = '' }: Props = $props();
+
+	let pointerX = $state<number | null>(null);
+	let reducedMotion = $state(false);
+	let dockEl: HTMLElement | undefined = $state();
+	let pointerFine = $state(false);
+
+	$effect(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		pointerFine = window.matchMedia('(pointer: fine)').matches;
+	});
+
+	function scaleForItem(index: number): number {
+		if (reducedMotion || !pointerFine || pointerX === null || !dockEl) return 1;
+
+		const itemEls = dockEl.querySelectorAll<HTMLElement>('.dock-item');
+		const itemEl = itemEls[index];
+		if (!itemEl) return 1;
+
+		const dockRect = dockEl.getBoundingClientRect();
+		const itemRect = itemEl.getBoundingClientRect();
+		const itemCenter = itemRect.left + itemRect.width / 2 - dockRect.left;
+		const dist = Math.abs(pointerX - itemCenter);
+		if (dist >= radius) return 1;
+
+		const t = Math.cos((dist / radius) * (Math.PI / 2));
+		return 1 + (magnification - 1) * t;
+	}
+
+	function onMouseMove(e: MouseEvent) {
+		if (!dockEl) return;
+		const rect = dockEl.getBoundingClientRect();
+		pointerX = e.clientX - rect.left;
+	}
+
+	function onMouseLeave() {
+		pointerX = null;
+	}
+</script>
+
+<nav
+	bind:this={dockEl}
+	class="dock {className}"
+	onmousemove={onMouseMove}
+	onmouseleave={onMouseLeave}
+	aria-label="Dock"
+>
+	{#each items as item, i}
+		<button
+			type="button"
+			class="dock-item"
+			style="transform: scale({scaleForItem(i)});"
+			onclick={item.onclick}
+			aria-label={item.label}
+			title={item.label}
+		>
+			{#if item.iconSvg}
+				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+				{@html item.iconSvg}
+			{/if}
+		</button>
+	{/each}
+</nav>
+
+<style>
+	.dock {
+		display: inline-flex;
+		align-items: flex-end;
+		gap: 8px;
+		padding: 10px 16px;
+		background: oklch(var(--b2, var(--b1)) / 0.8);
+		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.1);
+		border-radius: var(--jatui-radius-box);
+		backdrop-filter: blur(12px);
+	}
+
+	.dock-item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 56px;
+		height: 56px;
+		border-radius: var(--jatui-radius-box);
+		background: oklch(var(--b1));
+		border: var(--jatui-border-w) solid oklch(var(--bc) / 0.08);
+		cursor: pointer;
+		transform-origin: bottom center;
+		transition: transform var(--motion-fast) var(--motion-glide);
+		color: oklch(var(--bc));
+	}
+
+	.dock-item:hover,
+	.dock-item:focus-visible {
+		background: oklch(var(--b2, var(--b1)));
+		outline: 2px solid oklch(var(--p));
+		outline-offset: 2px;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.dock-item {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,17 @@
+export interface DockItem {
+    label: string;
+    /** Inline SVG string for the icon */
+    iconSvg?: string;
+    onclick?: () => void;
+}
+interface Props {
+    items: DockItem[];
+    /** Max scale factor at pointer proximity */
+    magnification?: number;
+    /** Radius in px around pointer that triggers magnification */
+    radius?: number;
+    class?: string;
+}
+declare const Dock: import("svelte").Component<Props, {}, "">;
+type Dock = ReturnType<typeof Dock>;
+export default Dock;

package/dist/showcase/FlipCard.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+
+  interface Props {
+    flipOn?: 'hover' | 'click';
+    class?: string;
+    front: Snippet;
+    back: Snippet;
+  }
+
+  let { flipOn = 'hover', class: className = '', front, back }: Props = $props();
+
+  let flipped = $state(false);
+
+  function handleMouseEnter() {
+    if (flipOn === 'hover') flipped = true;
+  }
+
+  function handleMouseLeave() {
+    if (flipOn === 'hover') flipped = false;
+  }
+
+  function handleClick() {
+    if (flipOn === 'click') flipped = !flipped;
+  }
+</script>
+
+<div
+  class="flip-card-outer {className}"
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
+  onclick={handleClick}
+  role={flipOn === 'click' ? 'button' : undefined}
+  tabindex={flipOn === 'click' ? 0 : undefined}
+  onkeydown={flipOn === 'click' ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); flipped = !flipped; } } : undefined}
+>
+  <div class="flip-card-inner" class:flipped>
+    <div class="flip-card-face flip-card-front">
+      {@render front()}
+    </div>
+    <div class="flip-card-face flip-card-back">
+      {@render back()}
+    </div>
+  </div>
+</div>
+
+<style>
+  .flip-card-outer {
+    perspective: 800px;
+  }
+
+  .flip-card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    transition: transform 0.6s var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+  }
+
+  .flip-card-inner.flipped {
+    transform: rotateY(180deg);
+  }
+
+  .flip-card-face {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+  }
+
+  .flip-card-front {
+    transform: rotateY(0deg);
+  }
+
+  .flip-card-back {
+    transform: rotateY(180deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flip-card-inner {
+      transition: none;
+    }
+
+    .flip-card-inner.flipped {
+      transform: none;
+    }
+
+    .flip-card-inner.flipped .flip-card-front {
+      visibility: hidden;
+    }
+
+    .flip-card-inner.flipped .flip-card-back {
+      transform: none;
+      visibility: visible;
+    }
+
+    .flip-card-back {
+      visibility: hidden;
+    }
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import { type Snippet } from 'svelte';
+interface Props {
+    flipOn?: 'hover' | 'click';
+    class?: string;
+    front: Snippet;
+    back: Snippet;
+}
+declare const FlipCard: import("svelte").Component<Props, {}, "">;
+type FlipCard = ReturnType<typeof FlipCard>;
+export default FlipCard;

package/dist/showcase/FocusReveal.svelte

@@ -0,0 +1,83 @@
+// after animista.net (Ana Travas), re-authored on jatui motion tokens
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	type TriggerMode = 'mount' | 'intersect';
+
+	interface Props {
+		triggerMode?: TriggerMode;
+		durationMs?: number;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		triggerMode = 'mount',
+		durationMs = 800,
+		class: className = '',
+		children,
+	}: Props = $props();
+
+	let reducedMotion = $state(false);
+	let revealed = $state(false);
+	let el: HTMLDivElement | undefined = $state();
+
+	onMount(() => {
+		reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		if (reducedMotion) {
+			revealed = true;
+			return;
+		}
+
+		if (triggerMode === 'mount') {
+			requestAnimationFrame(() => {
+				revealed = true;
+			});
+		} else {
+			const observer = new IntersectionObserver(
+				(entries) => {
+					for (const entry of entries) {
+						if (entry.intersectionRatio >= 0.5) {
+							revealed = true;
+							observer.disconnect();
+						}
+					}
+				},
+				{ threshold: 0.5 }
+			);
+
+			if (el) observer.observe(el);
+
+			return () => observer.disconnect();
+		}
+	});
+</script>
+
+<div
+	bind:this={el}
+	class="focus-reveal-root {className}"
+	style:filter={reducedMotion || revealed ? 'blur(0px)' : 'blur(8px)'}
+	style:opacity={reducedMotion || revealed ? '1' : '0.6'}
+	style:transition={reducedMotion
+		? 'none'
+		: `filter ${durationMs}ms var(--motion-glide), opacity ${durationMs}ms var(--motion-glide)`}
+>
+	{@render children()}
+</div>
+
+<style>
+	.focus-reveal-root {
+		will-change: filter, opacity;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.focus-reveal-root {
+			filter: none !important;
+			opacity: 1 !important;
+			transition: none !important;
+			will-change: auto;
+		}
+	}
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type TriggerMode = 'mount' | 'intersect';
+interface Props {
+    triggerMode?: TriggerMode;
+    durationMs?: number;
+    class?: string;
+    children: Snippet;
+}
+declare const FocusReveal: import("svelte").Component<Props, {}, "">;
+type FocusReveal = ReturnType<typeof FocusReveal>;
+export default FocusReveal;