@joewinke/jatui 0.42.0 → 0.44.0

package/dist/components/ImageReveal.svelte

@@ -0,0 +1,353 @@
+<!--
+  ImageReveal — a frame that shows a "generating" ripple until its image
+  exists, then brings the image in blur-to-sharp. Built for slots whose image
+  arrives late: a logo being looked up, an AI generation, a thumbnail still
+  rendering.
+
+    src null / undefined → generating: ripple on the tone, role="status",
+                           aria-busy
+    src set, not decoded → still the ripple (no half-loaded image is shown)
+    src loaded           → blur + slight scale → sharp, ripple fades; onReveal
+    src '' or onerror    → calm initials (from alt) or an image glyph — never a
+                           broken image
+
+  Colours are one tone mixed with color-mix (no hex). The ripple is a
+  decorative loop: .jatui-motion-ambient, and under data-motion="calm" or
+  prefers-reduced-motion it becomes a static tint and the image swaps in
+  without the blur.
+
+  Clean-room (jatui-vui9q): BoardUI's image-generation effect is a Pro item;
+  nothing from it was read or copied.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		IMAGE_REVEAL_RADIUS,
+		imageRevealBusy,
+		imageRevealInitials,
+		imageRevealPhase,
+		imageRevealSize,
+		imageRevealTone,
+		type ImageRevealPhase,
+		type ImageRevealShape,
+		type ImageRevealSizeName,
+		type ImageRevealToneName
+	} from './imageReveal';
+
+	interface Props {
+		/** null / undefined = still generating. '' = nothing to show (fallback). */
+		src?: string | null;
+		/** Alt text for the image; also the source of the fallback initials. */
+		alt?: string;
+		shape?: ImageRevealShape;
+		/** Named size, px number, any CSS length, or 'fill' (100% width). Always square. */
+		size?: ImageRevealSizeName | number | (string & {});
+		/** DaisyUI semantic name or any CSS colour. */
+		tone?: ImageRevealToneName | (string & {});
+		/** Screen-reader status while generating. */
+		label?: string;
+		/** Override the letters derived from `alt`. '' forces the glyph. */
+		initials?: string;
+		/** object-fit for the image. Logos usually want 'contain'. */
+		fit?: 'cover' | 'contain';
+		/** Read-only: the current phase. */
+		phase?: ImageRevealPhase;
+		/** Fires once per src, when that image has loaded. */
+		onReveal?: (src: string) => void;
+		/** Fires once per src, when that image failed to load. */
+		onError?: (src: string) => void;
+		/** Replaces the initials / glyph fallback. */
+		fallback?: Snippet;
+		class?: string;
+	}
+
+	let {
+		src = null,
+		alt = '',
+		shape = 'rounded',
+		size = 'md',
+		tone = 'primary',
+		label = 'Generating image',
+		initials,
+		fit = 'cover',
+		phase = $bindable('generating'),
+		onReveal,
+		onError,
+		fallback,
+		class: className = ''
+	}: Props = $props();
+
+	let loadedSrc = $state<string | null>(null);
+	let failedSrc = $state<string | null>(null);
+	let img = $state<HTMLImageElement | null>(null);
+
+	const current = $derived(imageRevealPhase({ src, loadedSrc, failedSrc }));
+	const busy = $derived(imageRevealBusy(current));
+	const letters = $derived(initials ?? imageRevealInitials(alt));
+
+	$effect.pre(() => {
+		phase = current;
+	});
+
+	function loaded(from: string) {
+		if (from !== src || loadedSrc === from) return;
+		loadedSrc = from;
+		onReveal?.(from);
+	}
+
+	function failed(from: string) {
+		if (from !== src || failedSrc === from) return;
+		failedSrc = from;
+		onError?.(from);
+	}
+
+	// An image served from cache (or loaded before hydration) can finish before
+	// the load listener exists, so read its state once it is in the DOM.
+	$effect(() => {
+		if (!img || !src) return;
+		const el = img;
+		const from = src;
+		if (el.complete) {
+			if (el.naturalWidth > 0) loaded(from);
+			else if (el.currentSrc || el.getAttribute('src')) failed(from);
+		}
+	});
+</script>
+
+<div
+	class="jatui-image-reveal is-{current} {className}"
+	style:--jatui-ir-tone={imageRevealTone(tone)}
+	style:--jatui-ir-size={imageRevealSize(size)}
+	style:--jatui-ir-radius={IMAGE_REVEAL_RADIUS[shape]}
+	aria-busy={busy}
+	data-phase={current}
+>
+	<span class="jatui-ir-status" role="status">{busy ? label : ''}</span>
+
+	{#if current !== 'fallback'}
+		<div class="jatui-ir-ripple" class:jatui-motion-ambient={busy} aria-hidden="true">
+			<span class="jatui-ir-ring"></span>
+			<span class="jatui-ir-ring"></span>
+			<span class="jatui-ir-ring"></span>
+			<span class="jatui-ir-core"></span>
+		</div>
+	{/if}
+
+	{#if src && current !== 'fallback'}
+		{#key src}
+			<img
+				bind:this={img}
+				class="jatui-ir-img"
+				class:is-shown={current === 'revealed'}
+				style:object-fit={fit}
+				{src}
+				{alt}
+				decoding="async"
+				onload={() => loaded(src!)}
+				onerror={() => failed(src!)}
+			/>
+		{/key}
+	{:else if current === 'fallback'}
+		{#if fallback}
+			<div class="jatui-ir-fallback">{@render fallback()}</div>
+		{:else if letters}
+			<div class="jatui-ir-fallback" role={alt ? 'img' : undefined} aria-label={alt || undefined}>
+				<span class="jatui-ir-initials" aria-hidden="true">{letters}</span>
+			</div>
+		{:else}
+			<div class="jatui-ir-fallback" role={alt ? 'img' : undefined} aria-label={alt || undefined}>
+				<svg class="jatui-ir-glyph" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+					<rect x="3" y="4" width="18" height="16" rx="2" />
+					<circle cx="9" cy="10" r="1.75" />
+					<path d="m21 16-5-5-9 9" stroke-linecap="round" stroke-linejoin="round" />
+				</svg>
+			</div>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.jatui-image-reveal {
+		--jatui-ir-reveal: calc(var(--motion-move, 300ms) * 2);
+		position: relative;
+		display: inline-grid;
+		place-items: center;
+		width: var(--jatui-ir-size);
+		max-width: 100%;
+		aspect-ratio: 1;
+		overflow: hidden;
+		isolation: isolate;
+		container-type: inline-size;
+		border-radius: var(--jatui-ir-radius);
+		background: color-mix(in oklab, var(--jatui-ir-tone) 7%, var(--color-base-100, Canvas));
+		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--jatui-ir-tone) 14%, transparent);
+		vertical-align: middle;
+	}
+
+	.jatui-ir-status {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	/* ---- generating: ripple ---- */
+	.jatui-ir-ripple {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		background: radial-gradient(
+			circle at 50% 50%,
+			color-mix(in oklab, var(--jatui-ir-tone) 16%, transparent) 0%,
+			transparent 70%
+		);
+		transition: opacity var(--jatui-ir-reveal) var(--motion-glide, ease-out);
+	}
+
+	.jatui-ir-ring,
+	.jatui-ir-core {
+		grid-area: 1 / 1;
+		border-radius: 9999px;
+	}
+
+	.jatui-ir-ring {
+		width: 90%;
+		aspect-ratio: 1;
+		border: max(1px, 2cqi) solid
+			color-mix(in oklab, var(--jatui-ir-tone) 45%, transparent);
+		opacity: 0;
+		transform: scale(0.2);
+		animation: jatui-ir-ripple 2400ms var(--motion-glide, ease-out) infinite;
+	}
+
+	.jatui-ir-ring:nth-child(2) {
+		animation-delay: 800ms;
+	}
+
+	.jatui-ir-ring:nth-child(3) {
+		animation-delay: 1600ms;
+	}
+
+	.jatui-ir-core {
+		width: 22%;
+		aspect-ratio: 1;
+		background: color-mix(in oklab, var(--jatui-ir-tone) 55%, transparent);
+		filter: blur(4cqi);
+		animation: jatui-ir-breathe 2400ms ease-in-out infinite;
+	}
+
+	@keyframes jatui-ir-ripple {
+		0% {
+			opacity: 0;
+			transform: scale(0.2);
+		}
+		15% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			transform: scale(1.35);
+		}
+	}
+
+	@keyframes jatui-ir-breathe {
+		0%,
+		100% {
+			opacity: 0.55;
+			transform: scale(0.85);
+		}
+		50% {
+			opacity: 1;
+			transform: scale(1.1);
+		}
+	}
+
+	/* ---- reveal ---- */
+	.jatui-ir-img {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		filter: blur(calc(12cqi + 4px));
+		transform: scale(1.06);
+		transition:
+			opacity var(--jatui-ir-reveal) var(--motion-glide, ease-out),
+			filter var(--jatui-ir-reveal) var(--motion-glide, ease-out),
+			transform var(--jatui-ir-reveal) var(--motion-glide, ease-out);
+	}
+
+	.jatui-ir-img.is-shown {
+		opacity: 1;
+		filter: none;
+		transform: none;
+	}
+
+	.is-revealed .jatui-ir-ripple {
+		opacity: 0;
+		visibility: hidden;
+		transition:
+			opacity var(--jatui-ir-reveal) var(--motion-glide, ease-out),
+			visibility 0s linear var(--jatui-ir-reveal);
+	}
+
+	.is-revealed {
+		background: transparent;
+		box-shadow: none;
+	}
+
+	/* ---- fallback ---- */
+	.jatui-ir-fallback {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		color: color-mix(in oklab, var(--jatui-ir-tone) 75%, var(--color-base-content, CanvasText));
+	}
+
+	.jatui-ir-initials {
+		font-weight: 600;
+		font-size: 36cqi;
+		line-height: 1;
+		letter-spacing: 0.02em;
+	}
+
+	.jatui-ir-glyph {
+		width: 42%;
+		height: 42%;
+		opacity: 0.7;
+	}
+
+	/* ---- calm / reduced motion: static tint, instant swap ---- */
+	:global([data-motion='calm']) .jatui-ir-ring,
+	:global([data-motion='calm']) .jatui-ir-core,
+	.jatui-image-reveal:global([data-motion='calm']) .jatui-ir-ring,
+	.jatui-image-reveal:global([data-motion='calm']) .jatui-ir-core {
+		animation: none;
+	}
+	:global([data-motion='calm']) .jatui-ir-ring,
+	.jatui-image-reveal:global([data-motion='calm']) .jatui-ir-ring {
+		opacity: 0;
+	}
+	:global([data-motion='calm']) .jatui-image-reveal,
+	.jatui-image-reveal:global([data-motion='calm']) {
+		--jatui-ir-reveal: 0s;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-image-reveal {
+			--jatui-ir-reveal: 0s;
+		}
+		.jatui-ir-ring,
+		.jatui-ir-core {
+			animation: none;
+		}
+		.jatui-ir-ring {
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import { type ImageRevealPhase, type ImageRevealShape, type ImageRevealSizeName, type ImageRevealToneName } from './imageReveal';
+interface Props {
+    /** null / undefined = still generating. '' = nothing to show (fallback). */
+    src?: string | null;
+    /** Alt text for the image; also the source of the fallback initials. */
+    alt?: string;
+    shape?: ImageRevealShape;
+    /** Named size, px number, any CSS length, or 'fill' (100% width). Always square. */
+    size?: ImageRevealSizeName | number | (string & {});
+    /** DaisyUI semantic name or any CSS colour. */
+    tone?: ImageRevealToneName | (string & {});
+    /** Screen-reader status while generating. */
+    label?: string;
+    /** Override the letters derived from `alt`. '' forces the glyph. */
+    initials?: string;
+    /** object-fit for the image. Logos usually want 'contain'. */
+    fit?: 'cover' | 'contain';
+    /** Read-only: the current phase. */
+    phase?: ImageRevealPhase;
+    /** Fires once per src, when that image has loaded. */
+    onReveal?: (src: string) => void;
+    /** Fires once per src, when that image failed to load. */
+    onError?: (src: string) => void;
+    /** Replaces the initials / glyph fallback. */
+    fallback?: Snippet;
+    class?: string;
+}
+declare const ImageReveal: import("svelte").Component<Props, {}, "phase">;
+type ImageReveal = ReturnType<typeof ImageReveal>;
+export default ImageReveal;

package/dist/components/TextInput.svelte

@@ -7,7 +7,10 @@
 	 * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
 	 */
 
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import FieldLabel from './field/FieldLabel.svelte';
+	import FieldHint from './field/FieldHint.svelte';
 
 	/**
 	 * Any other native attribute (aria-label, aria-labelledby, data-*, title,
@@ -56,6 +59,12 @@
 		 * consumers are unaffected when this prop is absent/false.
 		 */
 		floatingLabel?: boolean;
+		/** Leading icon / addon inside the field (e.g. a search glyph, "https://"). */
+		leading?: Snippet;
+		/** Trailing icon / addon inside the field (e.g. a unit, a clear button). */
+		trailing?: Snippet;
+		/** Info-icon hint after the label (shared `use:tooltip`). */
+		labelTooltip?: string;
 		class?: string;
 		id?: string;
 		name?: string;
@@ -78,6 +87,9 @@
 		pattern,
 		showCount = false,
 		floatingLabel = false,
+		leading,
+		trailing,
+		labelTooltip,
 		class: className = '',
 		id = `text-input-${Math.random().toString(36).substr(2, 9)}`,
 		name = '',
@@ -87,7 +99,10 @@
 
 	const sizeClass = $derived({ sm: 'input-sm', md: '', lg: 'input-lg' }[size]);
 
-	const inputClass = $derived(
+	// With a leading/trailing addon the DaisyUI `input` skin moves to a wrapper
+	// (DaisyUI 5's `<label class="input">` pattern) and the <input> goes bare.
+	const hasAddons = $derived(!!leading || !!trailing);
+	const shellClass = $derived(
 		[
 			'input input-bordered w-full transition-shadow duration-200',
 			sizeClass,
@@ -98,11 +113,13 @@
 			.filter(Boolean)
 			.join(' ')
 	);
+	const inputClass = $derived(hasAddons ? 'jatui-input-bare' : shellClass);
 
 	const characterCount = $derived(value?.length || 0);
 	const isOverLimit = $derived(maxlength ? characterCount > maxlength : false);
 
 	let inputEl: HTMLInputElement | undefined = $state();
+	let shellEl: HTMLDivElement | undefined = $state();
 	let hadError = false;
 
 	// Error shake: embedded keyframe (jatui-shake-x), no host-app dependency.
@@ -110,14 +127,15 @@
 	// Self-contained reflow-restart so repeat errors re-shake.
 	$effect(() => {
 		const hasError = !!error;
-		if (hasError && !hadError && inputEl) {
+		const target = hasAddons ? shellEl : inputEl;
+		if (hasError && !hadError && target) {
 			const reduce =
 				typeof window !== 'undefined' &&
 				window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
 			if (!reduce) {
-				inputEl.classList.remove('jatui-input-shake');
-				void inputEl.offsetWidth;
-				inputEl.classList.add('jatui-input-shake');
+				target.classList.remove('jatui-input-shake');
+				void target.offsetWidth;
+				target.classList.add('jatui-input-shake');
 			}
 		}
 		hadError = hasError;
@@ -126,17 +144,10 @@
 
 <div class="form-control w-full" class:jatui-float-wrap={floatingLabel}>
 	{#if label && !floatingLabel}
-		<label for={id} class="label">
-			<span class="text-[0.8125rem] font-medium text-base-content/85">
-				{label}
-				{#if required}
-					<span class="text-error ml-1">*</span>
-				{/if}
-			</span>
-		</label>
+		<FieldLabel for={id} text={label} {required} tooltip={labelTooltip} />
 	{/if}
 
-	<div class:jatui-float-field={floatingLabel}>
+	{#snippet field()}
 		<input
 			{...rest}
 			bind:this={inputEl}
@@ -161,6 +172,18 @@
 			aria-invalid={error ? 'true' : 'false'}
 			onanimationend={() => inputEl?.classList.remove('jatui-input-shake')}
 		/>
+	{/snippet}
+
+	<div class:jatui-float-field={floatingLabel}>
+		{#if hasAddons}
+			<div class="{shellClass} jatui-input-shell" bind:this={shellEl} onanimationend={() => shellEl?.classList.remove('jatui-input-shake')}>
+				{#if leading}<span class="jatui-input-addon text-base-content/55">{@render leading()}</span>{/if}
+				{@render field()}
+				{#if trailing}<span class="jatui-input-addon text-base-content/55">{@render trailing()}</span>{/if}
+			</div>
+		{:else}
+			{@render field()}
+		{/if}
 
 		{#if label && floatingLabel}
 			<label for={id} class="jatui-float-label">
@@ -181,13 +204,9 @@
 	{/if}
 
 	{#if error}
-		<div class="label">
-			<span id="{id}-error" class="text-[0.8125rem] text-error" role="alert">{error}</span>
-		</div>
+		<FieldHint id="{id}-error" text={error} error />
 	{:else if helpText}
-		<div class="label">
-			<span id="{id}-help" class="text-[0.8125rem] text-base-content/45">{helpText}</span>
-		</div>
+		<FieldHint id="{id}-help" text={helpText} />
 	{/if}
 </div>
 
@@ -213,6 +232,38 @@
 		}
 	}
 
+	/* ── Leading / trailing addons ────────────────────────────────
+	   The shell carries the DaisyUI input skin; the inner input is bare and
+	   grows. Focus ring comes from the shell's :focus-within. */
+	.jatui-input-shell {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base, 8px);
+	}
+	.jatui-input-shell:focus-within {
+		outline: 2px solid var(--color-base-content);
+		outline-offset: 2px;
+	}
+	.jatui-input-shell.input-error:focus-within {
+		outline-color: var(--color-error);
+	}
+	:global(.jatui-input-bare) {
+		flex: 1 1 auto;
+		min-width: 0;
+		height: 100%;
+		background: transparent;
+		border: 0;
+		outline: none;
+		font: inherit;
+		color: inherit;
+	}
+	.jatui-input-addon {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		white-space: nowrap;
+	}
+
 	/* ── Floating Label ───────────────────────────────────────────
 	   Label sits inside the field at rest, lifts + scales on focus or filled.
 	   Pure CSS: uses :placeholder-shown to detect empty state (input must have

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

@@ -5,6 +5,7 @@
      * Adds: motion-token error shake (embedded keyframe, no host-app dependency),
      * opt-in floatingLabel prop (label translates/scales on focus-or-filled, pure CSS).
      */
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 /**
  * Any other native attribute (aria-label, aria-labelledby, data-*, title,
@@ -35,6 +36,12 @@ interface Props extends Omit<HTMLInputAttributes, 'value' | 'type' | 'size' | 'c
      * consumers are unaffected when this prop is absent/false.
      */
     floatingLabel?: boolean;
+    /** Leading icon / addon inside the field (e.g. a search glyph, "https://"). */
+    leading?: Snippet;
+    /** Trailing icon / addon inside the field (e.g. a unit, a clear button). */
+    trailing?: Snippet;
+    /** Info-icon hint after the label (shared `use:tooltip`). */
+    labelTooltip?: string;
     class?: string;
     id?: string;
     name?: string;