@joewinke/jatui 0.1.33 → 0.2.0

package/dist/components/CopyButton.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	interface Props {
+		text?: string;
+		getText?: () => string | Promise<string>;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'error' | 'warning' | 'success' | 'info';
+		label?: string;
+		copiedLabel?: string;
+		class?: string;
+	}
+
+	let {
+		text,
+		getText,
+		size = 'sm',
+		variant = 'ghost',
+		label = 'Copy',
+		copiedLabel = 'Copied',
+		class: className = ''
+	}: Props = $props();
+
+	let copied = $state(false);
+	let timer: ReturnType<typeof setTimeout>;
+
+	const sizeClass = $derived(
+		({ xs: 'btn-xs', sm: 'btn-sm', md: '', lg: 'btn-lg' } as Record<string, string>)[size] ?? ''
+	);
+	const variantClass = $derived(
+		({
+			primary: 'btn-primary',
+			secondary: 'btn-secondary',
+			outline: 'btn-outline',
+			ghost: 'btn-ghost',
+			error: 'btn-error',
+			warning: 'btn-warning',
+			success: 'btn-success',
+			info: 'btn-info'
+		} as Record<string, string>)[variant] ?? 'btn-ghost'
+	);
+
+	async function handleCopy() {
+		if (copied) return;
+		try {
+			const value = getText ? await getText() : (text ?? '');
+			await navigator.clipboard.writeText(value);
+			copied = true;
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				copied = false;
+			}, 1400);
+		} catch {
+			// clipboard not available — no-op
+		}
+	}
+</script>
+
+<button
+	type="button"
+	class="btn {variantClass} {sizeClass} copy-btn {className}"
+	class:copied
+	onclick={handleCopy}
+	aria-label={copied ? copiedLabel : label}
+>
+	<span class="copy-icon-wrap" aria-hidden="true">
+		<!-- Copy icon -->
+		<svg
+			class="ic-copy"
+			width="1em"
+			height="1em"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+			<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+		</svg>
+		<!-- Check icon -->
+		<svg
+			class="ic-check"
+			width="1em"
+			height="1em"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2.5"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<polyline points="20 6 9 17 4 12" />
+		</svg>
+	</span>
+	<span class="copy-label">{copied ? copiedLabel : label}</span>
+
+	<!-- Screen-reader live announcement -->
+	<span class="sr-only" aria-live="polite" aria-atomic="true">
+		{copied ? copiedLabel : ''}
+	</span>
+</button>
+
+<style>
+	.copy-btn {
+		gap: 0.35em;
+	}
+
+	.copy-icon-wrap {
+		position: relative;
+		display: inline-flex;
+		width: 1em;
+		height: 1em;
+	}
+
+	.copy-icon-wrap svg {
+		position: absolute;
+		inset: 0;
+		transition:
+			opacity var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1)),
+			transform var(--motion-fast, 150ms) var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+	}
+
+	.ic-check {
+		opacity: 0;
+		transform: scale(0.5);
+		color: oklch(var(--su, 0.72 0.19 150));
+	}
+
+	/* Use DaisyUI success color if --su is not available */
+	.ic-check {
+		color: var(--color-success, #4cd08a);
+	}
+
+	/* Copied state */
+	.copy-btn.copied .ic-copy {
+		opacity: 0;
+		transform: scale(0.5);
+	}
+	.copy-btn.copied .ic-check {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	.copy-label {
+		transition: opacity var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.copy-icon-wrap svg {
+			transition: opacity var(--motion-instant, 80ms) step-end;
+		}
+		.copy-label {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/CopyButton.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    text?: string;
+    getText?: () => string | Promise<string>;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'error' | 'warning' | 'success' | 'info';
+    label?: string;
+    copiedLabel?: string;
+    class?: string;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/components/HoldToConfirm.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	interface Props {
+		label?: string;
+		holdMs?: number;
+		onconfirm?: () => void;
+		disabled?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		class?: string;
+	}
+
+	let {
+		label = 'Hold to confirm',
+		holdMs = 800,
+		onconfirm,
+		disabled = false,
+		size = 'md',
+		class: className = ''
+	}: Props = $props();
+
+	const RADIUS = 33;
+	const CIRCUMFERENCE = 2 * Math.PI * RADIUS; // ≈ 207.3
+
+	let holding = $state(false);
+	let done = $state(false);
+	let progress = $state(0); // 0–1
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	let raf: number | undefined;
+	let startTime: number;
+
+	const hintId = `htc-hint-${Math.random().toString(36).slice(2)}`;
+
+	function startHold() {
+		if (disabled || done) return;
+		holding = true;
+		startTime = performance.now();
+
+		function tick(now: number) {
+			progress = Math.min((now - startTime) / holdMs, 1);
+			if (progress < 1) {
+				raf = requestAnimationFrame(tick);
+			}
+		}
+		raf = requestAnimationFrame(tick);
+
+		timer = setTimeout(() => {
+			holding = false;
+			done = true;
+			progress = 1;
+			onconfirm?.();
+			// spring settle then reset
+			setTimeout(() => {
+				done = false;
+				progress = 0;
+			}, 600);
+		}, holdMs);
+	}
+
+	function cancelHold() {
+		if (!holding) return;
+		holding = false;
+		clearTimeout(timer);
+		cancelAnimationFrame(raf!);
+		// quick drain
+		progress = 0;
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if ((e.key === ' ' || e.key === 'Enter') && !e.repeat) {
+			e.preventDefault();
+			startHold();
+		}
+	}
+
+	function onkeyup(e: KeyboardEvent) {
+		if (e.key === ' ' || e.key === 'Enter') {
+			cancelHold();
+		}
+	}
+
+	const strokeOffset = $derived(CIRCUMFERENCE * (1 - progress));
+
+	const sizeMap: Record<string, { btn: string; ring: number; font: string }> = {
+		xs: { btn: 'btn-xs', ring: 40, font: 'text-xs' },
+		sm: { btn: 'btn-sm', ring: 52, font: 'text-sm' },
+		md: { btn: '', ring: 64, font: 'text-sm' },
+		lg: { btn: 'btn-lg', ring: 80, font: 'text-base' }
+	};
+	const sz = $derived(sizeMap[size] ?? sizeMap.md);
+</script>
+
+<button
+	type="button"
+	class="hold-btn btn btn-error {sz.btn} relative inline-flex items-center gap-2 select-none {className}"
+	class:holding
+	class:done
+	{disabled}
+	aria-describedby={hintId}
+	onpointerdown={startHold}
+	onpointerup={cancelHold}
+	onpointerleave={cancelHold}
+	onpointercancel={cancelHold}
+	{onkeydown}
+	{onkeyup}
+>
+	<!-- Radial progress ring -->
+	<span class="ring-wrap" aria-hidden="true" style="width:{sz.ring}px;height:{sz.ring}px;">
+		<svg viewBox="0 0 72 72" class="ring-svg" style="width:{sz.ring}px;height:{sz.ring}px;">
+			<!-- track -->
+			<circle
+				class="ring-track"
+				cx="36"
+				cy="36"
+				r={RADIUS}
+				fill="none"
+				stroke-width="4"
+				stroke-linecap="round"
+			/>
+			<!-- progress arc, starts at top (rotate -90deg) -->
+			<circle
+				class="ring-prog"
+				cx="36"
+				cy="36"
+				r={RADIUS}
+				fill="none"
+				stroke-width="4"
+				stroke-linecap="round"
+				stroke-dasharray={CIRCUMFERENCE}
+				stroke-dashoffset={strokeOffset}
+				transform="rotate(-90 36 36)"
+			/>
+		</svg>
+	</span>
+
+	<span class={sz.font}>{done ? 'Confirmed' : label}</span>
+</button>
+
+<!-- Accessible hint (screen-reader only, referenced by aria-describedby) -->
+<span id={hintId} class="sr-only">Press and hold to confirm. Release early to cancel.</span>
+
+<style>
+	.hold-btn {
+		cursor: pointer;
+	}
+	.hold-btn:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.ring-wrap {
+		display: inline-flex;
+		flex-shrink: 0;
+	}
+
+	.ring-track {
+		stroke: oklch(from currentColor l c h / 0.2);
+	}
+
+	.ring-prog {
+		stroke: currentColor;
+		/* Default: quick drain on release */
+		transition: stroke-dashoffset var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
+	}
+
+	/* While holding: fill over holdMs (JS drives via $state) */
+	.hold-btn.holding .ring-prog,
+	.hold-btn.done .ring-prog {
+		transition: none; /* JS RAF drives progress; no CSS transition needed */
+	}
+
+	/* On done: spring settle */
+	.hold-btn.done .ring-prog {
+		transition: stroke-dashoffset var(--motion-fast, 150ms) var(--motion-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ring-prog {
+			transition: none;
+		}
+		.hold-btn.done .ring-prog {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/HoldToConfirm.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    label?: string;
+    holdMs?: number;
+    onconfirm?: () => void;
+    disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+}
+declare const HoldToConfirm: import("svelte").Component<Props, {}, "">;
+type HoldToConfirm = ReturnType<typeof HoldToConfirm>;
+export default HoldToConfirm;

package/dist/components/KeyboardShortcutsOverlay.svelte

@@ -5,6 +5,9 @@
 	 * `Escape` to dismiss. Input/contenteditable fields and Ctrl/Meta/Alt
 	 * combos are ignored so the shortcut never interferes with typing.
 	 *
+	 * While open, physical keydown events depress the matching on-screen keycap
+	 * with a brief translateY(1px) + tint (var(--motion-instant)).
+	 *
 	 * Usage:
 	 *
 	 *   <KeyboardShortcutsOverlay shortcuts={[
@@ -57,6 +60,10 @@
 		open = isOpen;
 	});
 
+	// Track which key label is currently depressed
+	let depressedKey = $state<string | null>(null);
+	let depressTimer: ReturnType<typeof setTimeout> | null = null;
+
 	function isTypingTarget(target: EventTarget | null): boolean {
 		if (!(target instanceof HTMLElement)) return false;
 		const tag = target.tagName;
@@ -78,12 +85,34 @@
 		if (isOpen && e.key === 'Escape') {
 			e.preventDefault();
 			isOpen = false;
+			return;
 		}
+
+		// Keycap depress — highlight matching key while overlay is open
+		if (isOpen) {
+			depressKey(e.key);
+		}
+	}
+
+	function depressKey(key: string) {
+		if (depressTimer) clearTimeout(depressTimer);
+		depressedKey = key;
+		depressTimer = setTimeout(() => { depressedKey = null; }, 120);
+	}
+
+	function keyMatchesPressed(keyLabel: string, pressed: string | null): boolean {
+		if (!pressed) return false;
+		// Match single-char labels directly
+		const parts = keyLabel.split(/\s*\/\s*/);
+		return parts.some(p => p.trim() === pressed || p.trim().toLowerCase() === pressed.toLowerCase());
 	}
 
 	$effect(() => {
 		window.addEventListener('keydown', onKeydown);
-		return () => window.removeEventListener('keydown', onKeydown);
+		return () => {
+			window.removeEventListener('keydown', onKeydown);
+			if (depressTimer) clearTimeout(depressTimer);
+		};
 	});
 </script>
 
@@ -121,6 +150,7 @@
 							<div class="kso-row">
 								<kbd
 									class="kso-key"
+									class:kso-key-pressed={keyMatchesPressed(key, depressedKey)}
 									style={color
 										? `color:${color};border-color:color-mix(in oklch,${color} 50%,oklch(0.35 0.02 250));background:color-mix(in oklch,${color} 12%,oklch(0.25 0.02 250))`
 										: ''}
@@ -134,17 +164,20 @@
 				{:else}
 					{#each shortcuts as { key, description }, i (key + '::' + i)}
 						<div class="kso-row">
-							<kbd class="kso-key">{key}</kbd>
+							<kbd
+								class="kso-key"
+								class:kso-key-pressed={keyMatchesPressed(key, depressedKey)}
+							>{key}</kbd>
 							<span class="kso-description">{description}</span>
 						</div>
 					{/each}
 				{/if}
 				<div class="kso-row kso-row-meta">
-					<kbd class="kso-key">?</kbd>
+					<kbd class="kso-key" class:kso-key-pressed={keyMatchesPressed('?', depressedKey)}>?</kbd>
 					<span class="kso-description">Toggle this overlay</span>
 				</div>
 				<div class="kso-row kso-row-meta">
-					<kbd class="kso-key">Esc</kbd>
+					<kbd class="kso-key" class:kso-key-pressed={keyMatchesPressed('Escape', depressedKey)}>Esc</kbd>
 					<span class="kso-description">Close overlay</span>
 				</div>
 			</div>
@@ -270,12 +303,18 @@
 		color: oklch(0.93 0.02 250);
 		flex-shrink: 0;
 		white-space: nowrap;
+		/* Keycap physical press: quick down + tint, instant easing */
+		transition:
+			transform var(--motion-instant) ease-out,
+			background var(--motion-instant) ease-out,
+			border-color var(--motion-instant) ease-out;
 	}
 
-	.kso-description {
-		font-size: 0.85rem;
-		color: oklch(0.78 0.02 250);
-		line-height: 1.35;
+	/* Depressed state — 1px down, tinted background */
+	.kso-key-pressed {
+		transform: translateY(1px);
+		background: oklch(0.32 0.04 240);
+		border-color: oklch(0.45 0.06 240);
 	}
 
 	@keyframes kso-fade {
@@ -292,5 +331,12 @@
 		.kso-panel {
 			animation: none !important;
 		}
+		.kso-key {
+			transition: none;
+		}
+		.kso-key-pressed {
+			transform: none;
+			background: oklch(0.32 0.04 240);
+		}
 	}
 </style>

package/dist/components/KeyboardShortcutsOverlay.svelte.d.ts

@@ -4,6 +4,9 @@
  * `Escape` to dismiss. Input/contenteditable fields and Ctrl/Meta/Alt
  * combos are ignored so the shortcut never interferes with typing.
  *
+ * While open, physical keydown events depress the matching on-screen keycap
+ * with a brief translateY(1px) + tint (var(--motion-instant)).
+ *
  * Usage:
  *
  *   <KeyboardShortcutsOverlay shortcuts={[

package/dist/components/PasswordMeter.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	interface Props {
+		value?: string;
+		label?: string;
+		showLabel?: boolean;
+	}
+
+	let {
+		value = '',
+		label = 'Password strength',
+		showLabel = true
+	}: Props = $props();
+
+	// zxcvbn-free heuristic: 0-4
+	const score = $derived((() => {
+		if (!value) return 0;
+		let s = 0;
+		if (value.length > 4) s++;
+		if (value.length > 8) s++;
+		if (/[0-9]/.test(value) && /[a-zA-Z]/.test(value)) s++;
+		if (/[^a-zA-Z0-9]/.test(value)) s++;
+		return Math.min(s, 4) as 0 | 1 | 2 | 3 | 4;
+	})());
+
+	const scoreLabels = ['', 'Weak', 'Fair', 'Good', 'Strong'] as const;
+
+	// DaisyUI semantic color classes per score band
+	const scoreColors = ['', 'bg-error', 'bg-warning', 'bg-warning', 'bg-success'] as const;
+	const scoreTextColors = ['text-base-content/45', 'text-error', 'text-warning', 'text-warning', 'text-success'] as const;
+
+	const announcementId = `pm-live-${Math.random().toString(36).slice(2, 9)}`;
+</script>
+
+<div class="password-meter space-y-1.5">
+	{#if showLabel || score > 0}
+		<div class="flex items-center justify-between">
+			{#if showLabel}
+				<span class="text-[0.8125rem] font-medium text-base-content/85">{label}</span>
+			{/if}
+			<span
+				id={announcementId}
+				role="status"
+				aria-live="polite"
+				aria-atomic="true"
+				class="text-[0.8125rem] font-medium transition-colors duration-[var(--motion-fast)] {scoreTextColors[score]}"
+			>
+				{scoreLabels[score]}
+			</span>
+		</div>
+	{/if}
+
+	<div class="flex gap-1" aria-hidden="true">
+		{#each [1, 2, 3, 4] as segment}
+			<div
+				class="meter-segment h-1.5 flex-1 overflow-hidden rounded-full bg-base-300"
+			>
+				<div
+					class="meter-fill h-full w-full rounded-full {scoreColors[score] || 'bg-base-300'}"
+					class:meter-fill--active={score >= segment}
+				></div>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.meter-fill {
+		transform: scaleX(0);
+		transform-origin: left;
+		transition:
+			transform var(--motion-enter) var(--motion-glide),
+			background-color var(--motion-fast) var(--motion-glide);
+	}
+
+	.meter-fill--active {
+		transform: scaleX(1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.meter-fill {
+			transition: background-color var(--motion-fast) var(--motion-glide);
+		}
+		.meter-fill--active {
+			transform: scaleX(1);
+		}
+	}
+</style>

package/dist/components/PasswordMeter.svelte.d.ts

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