@dryui/ui 3.0.0 → 4.0.1

package/src/gradient-mesh/gradient-mesh.svelte

@@ -0,0 +1,295 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		getReducedMotionPreference,
+		observeInViewport,
+		observePageVisibility,
+		observeReducedMotionPreference,
+		supportsPointerTracking
+	} from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		colors?: readonly [string, string, string, string];
+		speed?: 'slow' | 'normal' | 'fast' | number;
+		interactive?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		colors,
+		speed = 'normal',
+		interactive = false,
+		children: childSnippet,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	let element = $state<HTMLDivElement>();
+	let prefersReducedMotion = $state(false);
+	let animated = $state(false);
+	let onScreen = $state(true);
+	let tabVisible = $state(true);
+	const paused = $derived(!onScreen || !tabVisible);
+	let pointerX = $state('50%');
+	let pointerY = $state('50%');
+	let pointerFrame = $state<number | null>(null);
+	let pendingPointerX = '50%';
+	let pendingPointerY = '50%';
+
+	const speedDuration = $derived.by(() => {
+		if (typeof speed === 'number' && Number.isFinite(speed) && speed > 0) {
+			return `${(12 / speed).toFixed(2)}s`;
+		}
+		if (speed === 'fast') return '8s';
+		if (speed === 'slow') return '20s';
+		return '12s';
+	});
+
+	function flushPointerPosition() {
+		pointerFrame = null;
+		pointerX = pendingPointerX;
+		pointerY = pendingPointerY;
+	}
+
+	function queuePointerPosition(nextX: string, nextY: string) {
+		pendingPointerX = nextX;
+		pendingPointerY = nextY;
+
+		if (pointerFrame !== null) return;
+
+		pointerFrame = requestAnimationFrame(() => {
+			flushPointerPosition();
+		});
+	}
+
+	function cancelQueuedPointerPosition() {
+		if (pointerFrame === null) return;
+		cancelAnimationFrame(pointerFrame);
+		pointerFrame = null;
+	}
+
+	function handlePointerMove(event: PointerEvent) {
+		if (!interactive || prefersReducedMotion || !element || !supportsPointerTracking()) return;
+		const rect = element.getBoundingClientRect();
+		queuePointerPosition(
+			`${(((event.clientX - rect.left) / rect.width) * 100).toFixed(1)}%`,
+			`${(((event.clientY - rect.top) / rect.height) * 100).toFixed(1)}%`
+		);
+	}
+
+	function handlePointerLeave() {
+		cancelQueuedPointerPosition();
+		pendingPointerX = '50%';
+		pendingPointerY = '50%';
+		pointerX = '50%';
+		pointerY = '50%';
+	}
+
+	$effect(() => {
+		const updateAnimatedState = (matches: boolean) => {
+			prefersReducedMotion = matches;
+			animated = !matches;
+		};
+
+		const stopMotionObserver = observeReducedMotionPreference(updateAnimatedState);
+		const stopVisibility = observePageVisibility((visible) => {
+			tabVisible = visible;
+		});
+		let stopViewport = () => {};
+		if (element) {
+			stopViewport = observeInViewport(
+				element,
+				(inView) => {
+					onScreen = inView;
+				},
+				{ rootMargin: '200px' }
+			);
+		}
+
+		animated = !getReducedMotionPreference();
+
+		return () => {
+			cancelQueuedPointerPosition();
+			stopMotionObserver();
+			stopVisibility();
+			stopViewport();
+		};
+	});
+
+	$effect(() => {
+		if (!element) return;
+		element.style.cssText = style || '';
+		if (colors) {
+			for (let i = 0; i < 4; i++) {
+				const value = colors[i];
+				const prop = `--dry-mesh-color-${i + 1}`;
+				if (value) element.style.setProperty(prop, value);
+				else element.style.removeProperty(prop);
+			}
+		}
+		element.style.setProperty('--dry-mesh-duration', speedDuration);
+		element.style.setProperty('--dry-mesh-pointer-x', pointerX);
+		element.style.setProperty('--dry-mesh-pointer-y', pointerY);
+	});
+</script>
+
+<div
+	bind:this={element}
+	class={className}
+	data-gradient-mesh
+	data-animated={animated || undefined}
+	data-interactive={interactive || undefined}
+	data-reduced-motion={prefersReducedMotion || undefined}
+	data-paused={paused || undefined}
+	onpointermove={interactive ? handlePointerMove : undefined}
+	onpointerleave={interactive ? handlePointerLeave : undefined}
+	{...rest}
+>
+	{#if childSnippet}
+		<div data-gradient-mesh-content>
+			{@render childSnippet()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	[data-gradient-mesh] {
+		--dry-mesh-duration: 12s;
+		--dry-mesh-pointer-x: 50%;
+		--dry-mesh-pointer-y: 50%;
+		--dry-mesh-origin-1: 18% 18%;
+		--dry-mesh-origin-2: 82% 18%;
+		--dry-mesh-origin-3: 72% 82%;
+		--dry-mesh-origin-4: 18% 78%;
+		--dry-mesh-base: linear-gradient(
+			135deg,
+			var(--dry-mesh-color-4, #4ade80) 0%,
+			var(--dry-mesh-color-1, #7b68ee) 34%,
+			var(--dry-mesh-color-2, #38bdf8) 68%,
+			var(--dry-mesh-color-3, #f472b6) 100%
+		);
+
+		position: relative;
+		isolation: isolate;
+		overflow: hidden;
+		border-radius: inherit;
+		background:
+			radial-gradient(
+				ellipse 80% 70% at var(--dry-mesh-origin-1),
+				var(--dry-mesh-color-1, #7b68ee) 0%,
+				transparent 68%
+			),
+			radial-gradient(
+				ellipse 70% 68% at var(--dry-mesh-origin-2),
+				var(--dry-mesh-color-2, #38bdf8) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 78% 62% at var(--dry-mesh-origin-3),
+				var(--dry-mesh-color-3, #f472b6) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 72% 66% at var(--dry-mesh-origin-4),
+				var(--dry-mesh-color-4, #4ade80) 0%,
+				transparent 72%
+			),
+			var(--dry-mesh-base);
+		background:
+			radial-gradient(
+				ellipse 80% 70% at var(--dry-mesh-origin-1),
+				color-mix(in srgb, var(--dry-mesh-color-1, #7b68ee) 86%, transparent) 0%,
+				transparent 68%
+			),
+			radial-gradient(
+				ellipse 70% 68% at var(--dry-mesh-origin-2),
+				color-mix(in srgb, var(--dry-mesh-color-2, #38bdf8) 82%, transparent) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 78% 62% at var(--dry-mesh-origin-3),
+				color-mix(in srgb, var(--dry-mesh-color-3, #f472b6) 84%, transparent) 0%,
+				transparent 70%
+			),
+			radial-gradient(
+				ellipse 72% 66% at var(--dry-mesh-origin-4),
+				color-mix(in srgb, var(--dry-mesh-color-4, #4ade80) 84%, transparent) 0%,
+				transparent 72%
+			),
+			var(--dry-mesh-base);
+		background-size:
+			130% 130%,
+			125% 125%,
+			135% 130%,
+			125% 130%,
+			100% 100%;
+		background-position:
+			0% 8%,
+			100% 0%,
+			90% 100%,
+			0% 92%,
+			center;
+	}
+
+	[data-gradient-mesh][data-animated] {
+		animation: mesh-cycle var(--dry-mesh-duration) ease-in-out infinite alternate;
+	}
+
+	[data-gradient-mesh][data-animated]:not([data-paused]) {
+		will-change: background-position;
+	}
+
+	[data-gradient-mesh][data-animated][data-paused] {
+		animation-play-state: paused;
+	}
+
+	[data-gradient-mesh][data-interactive] {
+		--dry-mesh-origin-1: var(--dry-mesh-pointer-x) var(--dry-mesh-pointer-y);
+	}
+
+	[data-gradient-mesh][data-reduced-motion] {
+		animation: none;
+	}
+
+	[data-gradient-mesh-content] {
+		position: relative;
+		z-index: 1;
+	}
+
+	@keyframes mesh-cycle {
+		0% {
+			background-position:
+				0% 8%,
+				100% 0%,
+				90% 100%,
+				0% 92%,
+				center;
+		}
+
+		50% {
+			background-position:
+				12% 18%,
+				88% 14%,
+				100% 82%,
+				14% 100%,
+				center;
+		}
+
+		100% {
+			background-position:
+				8% 0%,
+				96% 18%,
+				82% 94%,
+				6% 84%,
+				center;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-gradient-mesh] {
+			animation: none;
+		}
+	}
+</style>

package/src/gradient-mesh/index.ts

@@ -0,0 +1,5 @@
+import type { GradientMeshProps as PrimitiveGradientMeshProps } from '@dryui/primitives/gradient-mesh';
+
+export interface GradientMeshProps extends PrimitiveGradientMeshProps {}
+
+export { default as GradientMesh } from './gradient-mesh.svelte';

package/src/halftone/halftone.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Halftone',
+	description: 'SVG halftone dot pattern overlay with configurable size, angle, and color',
+	category: 'visual',
+	tags: ['halftone', 'dots', 'pattern', 'texture', 'print', 'overlay']
+};

package/src/halftone/halftone.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		dotSize?: 'fine' | 'medium' | 'coarse' | number;
+		angle?: number;
+		color?: string;
+		opacity?: number;
+		children?: Snippet;
+	}
+
+	let {
+		dotSize = 'medium',
+		angle = 45,
+		color = 'currentColor',
+		opacity = 0.3,
+		children,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const dotSizeName = $derived(
+		dotSize === 'fine' || dotSize === 'medium' || dotSize === 'coarse' ? dotSize : 'custom'
+	);
+
+	const baseSize = $derived(
+		typeof dotSize === 'number'
+			? Math.max(1, dotSize)
+			: dotSize === 'fine'
+				? 2
+				: dotSize === 'coarse'
+					? 6
+					: 4
+	);
+	const patternSize = $derived(`${baseSize * 3}`);
+	const dotRadius = $derived(`${baseSize * 0.45}`);
+
+	const normalizedOpacity = $derived(`${Math.max(0, Math.min(1, opacity))}`);
+	const angleValue = $derived(`${angle}deg`);
+
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-halftone-pattern-size', patternSize);
+		el.style.setProperty('--dry-halftone-dot-radius', dotRadius);
+		el.style.setProperty('--dry-halftone-color', color);
+		el.style.setProperty('--dry-halftone-opacity', normalizedOpacity);
+		el.style.setProperty('--dry-halftone-angle', angleValue);
+	});
+</script>
+
+<div bind:this={el} class={className} data-halftone data-dot-size={dotSizeName} {...rest}>
+	{#if children}
+		<div data-halftone-content>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	[data-halftone] {
+		position: relative;
+		isolation: isolate;
+		border-radius: inherit;
+		overflow: hidden;
+	}
+
+	[data-halftone]::after {
+		content: '';
+		position: absolute;
+		inset: -10%;
+		pointer-events: none;
+		opacity: var(--dry-halftone-opacity, 0.3);
+		mix-blend-mode: multiply;
+		transform: rotate(var(--dry-halftone-angle, 45deg));
+		transform-origin: center;
+		background-image: radial-gradient(
+			circle at center,
+			var(--dry-halftone-color, currentColor) 0 calc(var(--dry-halftone-dot-radius, 1.8) * 1px),
+			transparent calc((var(--dry-halftone-dot-radius, 1.8) * 1px) + 0.8px)
+		);
+		background-size: calc(var(--dry-halftone-pattern-size, 12) * 1px)
+			calc(var(--dry-halftone-pattern-size, 12) * 1px);
+		background-repeat: repeat;
+	}
+
+	[data-halftone-content] {
+		position: relative;
+		z-index: 1;
+	}
+</style>

package/src/halftone/index.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type HalftoneDotSize = 'fine' | 'medium' | 'coarse' | number;
+
+export interface HalftoneProps extends HTMLAttributes<HTMLDivElement> {
+	dotSize?: HalftoneDotSize;
+	angle?: number;
+	color?: string;
+	opacity?: number;
+	children?: Snippet;
+}
+
+export { default as Halftone } from './halftone.svelte';

package/src/heading/heading.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Heading',
+	description: 'Standalone semantic heading export for starter-kit typography',
+	category: 'display',
+	tags: ['text', 'heading', 'title', 'typography']
+};

package/src/heading/heading.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLHeadingElement> {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+		variant?: 'default' | 'display';
+		maxMeasure?: 'narrow' | 'default' | 'wide' | false;
+		className?: HTMLAttributes<HTMLHeadingElement>['class'];
+		children: Snippet;
+	}
+
+	let {
+		level = 2,
+		variant = 'default',
+		maxMeasure = false,
+		class: classAttr,
+		className = classAttr,
+		children,
+		...rest
+	}: Props = $props();
+
+	let measure: 'narrow' | 'default' | 'wide' | undefined = $derived(
+		maxMeasure === false ? undefined : maxMeasure
+	);
+</script>
+
+{#if level === 1}
+	<h1 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
+		{@render children()}
+	</h1>
+{:else if level === 2}
+	<h2 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
+		{@render children()}
+	</h2>
+{:else if level === 3}
+	<h3 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
+		{@render children()}
+	</h3>
+{:else if level === 4}
+	<h4 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
+		{@render children()}
+	</h4>
+{:else if level === 5}
+	<h5 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
+		{@render children()}
+	</h5>
+{:else}
+	<h6 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
+		{@render children()}
+	</h6>
+{/if}
+
+<style>
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin: 0;
+		color: var(--dry-typography-heading-color, var(--dry-color-text-strong));
+		font-family: var(--dry-font-sans);
+		font-weight: 700;
+		line-height: var(--dry-type-heading-2-leading, 2.5rem);
+		text-wrap: balance;
+	}
+
+	[data-level='1'] {
+		font-size: var(--dry-type-heading-1-size, var(--dry-text-4xl-size, 2.25rem));
+		line-height: var(--dry-type-heading-1-leading, 3rem);
+	}
+
+	[data-level='2'] {
+		font-size: var(--dry-type-heading-2-size, var(--dry-text-3xl-size, 1.875rem));
+		line-height: var(--dry-type-heading-2-leading, 2.5rem);
+	}
+
+	[data-level='3'] {
+		font-size: var(--dry-type-heading-3-size, var(--dry-text-2xl-size, 1.5rem));
+		line-height: var(--dry-type-heading-3-leading, 2rem);
+	}
+
+	[data-level='4'] {
+		font-size: var(--dry-type-heading-4-size, var(--dry-text-xl-size, 1.25rem));
+		line-height: var(--dry-type-heading-4-leading, 1.75rem);
+	}
+
+	[data-level='5'] {
+		font-size: var(--dry-type-small-size, var(--dry-text-lg-size, 1.125rem));
+		line-height: var(--dry-type-small-leading, 1.5rem);
+	}
+
+	[data-level='6'] {
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		line-height: var(--dry-type-tiny-leading, 1.25rem);
+	}
+
+	[data-variant='display'] {
+		font-family: var(--dry-font-display, var(--dry-font-sans));
+		font-size: var(--dry-type-display-size, var(--dry-text-4xl-size, 2.25rem));
+		line-height: var(--dry-type-display-leading, 4rem);
+	}
+
+	/* ── Measure (max-inline-size) ─────────────────────────────────────────────
+	   ch-unit measure tracks text content, not viewport layout. Editorial
+	   headlines wrap at narrow widths (~22ch) for rhythm. */
+	[data-measure='narrow'] {
+		max-inline-size: 22ch;
+	}
+
+	[data-measure='default'] {
+		max-inline-size: 45ch;
+	}
+
+	[data-measure='wide'] {
+		max-inline-size: 65ch;
+	}
+</style>

package/src/heading/index.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+	variant?: 'default' | 'display';
+	/**
+	 * Caps the rendered inline size in ch units so editorial headlines wrap on
+	 * ergonomic measure. `false` (default) keeps the existing behaviour of no
+	 * cap. `narrow` ≈ 22ch, `default` ≈ 45ch, `wide` ≈ 65ch.
+	 */
+	maxMeasure?: 'narrow' | 'default' | 'wide' | false;
+	className?: HTMLAttributes<HTMLHeadingElement>['class'];
+	children: Snippet;
+}
+
+export { default as Heading } from './heading.svelte';

package/src/hotkey/hotkey.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Hotkey',
+	description: 'Keyboard shortcut handler with modifier support',
+	category: 'utility',
+	tags: ['keyboard', 'shortcut', 'hotkey', 'keybinding']
+};

package/src/hotkey/index.ts

@@ -0,0 +1,2 @@
+export { Hotkey, createHotkey } from '@dryui/primitives';
+export type { HotkeyProps, HotkeyConfig } from '@dryui/primitives';

package/src/hover-card/context.svelte.ts

@@ -0,0 +1 @@
+export { getHoverCardCtx } from '@dryui/primitives';

package/src/hover-card/hover-card-content.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Placement } from '@dryui/primitives';
+	import { createAnchoredOverlayContent } from '../internal/anchored-overlay-content.svelte.js';
+	import { getHoverCardCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		placement?: Placement;
+		offset?: number;
+		children: Snippet;
+	}
+
+	let {
+		placement = 'bottom',
+		offset = 8,
+		class: className,
+		children,
+		style,
+		...rest
+	}: Props = $props();
+
+	const ctx = getHoverCardCtx();
+
+	let contentEl = $state<HTMLDivElement>();
+
+	const overlay = createAnchoredOverlayContent({
+		ctx,
+		contentEl: () => contentEl ?? null,
+		placement: () => placement,
+		offset: () => offset,
+		onContentChange: (next) => {
+			ctx.contentEl = next;
+		}
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			ctx.forceClose();
+			ctx.ignoreNextTriggerFocusOpen = true;
+			ctx.triggerEl?.focus();
+		}
+	}
+
+	function handlePointerEnter() {
+		ctx.contentHovered = true;
+		ctx.showImmediate();
+	}
+
+	function handlePointerLeave() {
+		ctx.contentHovered = false;
+		ctx.close();
+	}
+
+	function handleFocusIn() {
+		ctx.contentFocused = true;
+		ctx.showImmediate();
+	}
+
+	function handleFocusOut() {
+		ctx.contentFocused = false;
+		ctx.close();
+	}
+</script>
+
+<div
+	bind:this={contentEl}
+	use:overlay.applyPosition={style}
+	id={ctx.contentId}
+	popover="manual"
+	role="dialog"
+	aria-labelledby={ctx.triggerId}
+	data-hover-card-content
+	data-state={ctx.open ? 'open' : 'closed'}
+	onpointerenter={handlePointerEnter}
+	onpointerleave={handlePointerLeave}
+	onfocusin={handleFocusIn}
+	onfocusout={handleFocusOut}
+	onkeydown={handleKeydown}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-hover-card-content]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-hover-card-content]:popover-open {
+		display: grid;
+	}
+
+	[data-hover-card-content] {
+		--dry-hover-card-bg: var(--dry-color-bg-overlay);
+		--dry-hover-card-border: var(--dry-color-stroke-weak);
+		--dry-hover-card-radius: var(--dry-radius-lg);
+		--dry-hover-card-shadow: var(--dry-shadow-lg);
+		--dry-hover-card-padding: var(--dry-space-4);
+		--dry-hover-card-min-width: 14rem;
+		--dry-hover-card-max-width: min(22rem, calc(100vw - (var(--dry-space-6) * 2)));
+
+		inset: unset;
+		margin: 0;
+		box-sizing: border-box;
+		display: grid;
+		grid-template-columns: minmax(var(--dry-hover-card-min-width), var(--dry-hover-card-max-width));
+		background: var(--dry-hover-card-bg);
+		color: var(--dry-color-text-strong);
+		border: 1px solid var(--dry-hover-card-border);
+		border-radius: var(--dry-hover-card-radius);
+		box-shadow: var(--dry-hover-card-shadow);
+		padding: var(--dry-hover-card-padding);
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+		z-index: var(--dry-layer-overlay);
+	}
+</style>