@dryui/ui 3.0.0 → 4.0.1

package/src/select/select-root-input.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setSelectCtx } from './context.svelte.js';
+	import SelectTrigger from './select-trigger-button.svelte';
+	import SelectValue from './select-value.svelte';
+	import SelectContent from './select-content.svelte';
+	import SelectItem from './select-item.svelte';
+
+	type SelectOption = { value: string; label: string };
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		open?: boolean;
+		value?: string;
+		disabled?: boolean;
+		name?: string;
+		options?: Array<string | SelectOption>;
+		placeholder?: string;
+		children?: Snippet;
+	}
+
+	let {
+		open = $bindable(false),
+		value = $bindable(''),
+		disabled = false,
+		name,
+		class: className,
+		options,
+		placeholder,
+		children,
+		...rest
+	}: Props = $props();
+
+	const normalizedOptions = $derived(
+		options?.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt))
+	);
+
+	const uid = $props.id();
+	const triggerId = `select-trigger-${uid}`;
+	const contentId = `select-content-${uid}`;
+
+	let displayText = $state('');
+	let triggerEl = $state<HTMLElement | null>(null);
+
+	setSelectCtx({
+		get open() {
+			return open;
+		},
+		get value() {
+			return value;
+		},
+		get displayText() {
+			return displayText;
+		},
+		get disabled() {
+			return disabled;
+		},
+		triggerId,
+		contentId,
+		get triggerEl() {
+			return triggerEl;
+		},
+		set triggerEl(element: HTMLElement | null) {
+			triggerEl = element;
+		},
+		show() {
+			if (!disabled) open = true;
+		},
+		close() {
+			open = false;
+		},
+		toggle() {
+			if (!disabled) open = !open;
+		},
+		select(v: string, text: string) {
+			value = v;
+			displayText = text;
+		}
+	});
+</script>
+
+<div data-select-wrapper class={className} {...rest}>
+	{#if normalizedOptions && !children}
+		<SelectTrigger>
+			<SelectValue {placeholder} />
+		</SelectTrigger>
+		<SelectContent>
+			{#each normalizedOptions as opt (opt.value)}
+				<SelectItem value={opt.value}>{opt.label}</SelectItem>
+			{/each}
+		</SelectContent>
+	{:else if children}
+		{@render children()}
+	{/if}
+
+	{#if name}
+		<input type="hidden" {name} {value} disabled={disabled || undefined} />
+	{/if}
+</div>
+
+<style>
+	[data-select-wrapper] {
+		display: grid;
+	}
+</style>

package/src/select/select-trigger-button.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { variantAttrs } from '@dryui/primitives';
+	import { getSelectCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'children'> {
+		size?: 'sm' | 'md' | 'lg';
+		children: Snippet;
+	}
+
+	let { size = 'md', children, ...rest }: Props = $props();
+
+	const ctx = getSelectCtx();
+
+	let triggerEl = $state<HTMLButtonElement>();
+
+	$effect(() => {
+		if (!triggerEl) return;
+		ctx.triggerEl = triggerEl;
+		return () => {
+			if (ctx.triggerEl === triggerEl) ctx.triggerEl = null;
+		};
+	});
+</script>
+
+<span class="wrapper">
+	<button
+		bind:this={triggerEl}
+		type="button"
+		id={ctx.triggerId}
+		popovertarget={ctx.contentId}
+		aria-haspopup="listbox"
+		aria-expanded={ctx.open}
+		aria-controls={ctx.open ? ctx.contentId : undefined}
+		data-state={ctx.open ? 'open' : 'closed'}
+		data-select-trigger
+		disabled={ctx.disabled}
+		data-disabled={ctx.disabled || undefined}
+		{...variantAttrs({ size })}
+		{...rest}
+	>
+		<span data-content>{@render children()}</span>
+		<svg
+			data-indicator
+			data-state={ctx.open ? 'open' : 'closed'}
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg
+		>
+	</button>
+</span>
+
+<style>
+	.wrapper {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	[data-select-trigger] {
+		/* Form-control surface. Derives from the shared --dry-form-control-*
+		   family so the trigger always matches a sibling <Input>, regardless
+		   of ambient --dry-btn-* overrides from a surrounding container's nested radius. */
+		--_st-bg: var(--dry-select-trigger-bg, var(--dry-form-control-bg));
+		--_st-border: var(--dry-select-trigger-border, var(--dry-form-control-border));
+		--_st-color: var(--dry-select-trigger-color, var(--dry-form-control-color));
+		--_st-radius: var(--dry-select-trigger-radius, var(--dry-form-control-radius));
+		--_st-padding-x: var(--dry-select-trigger-padding-x, var(--dry-form-control-padding-inline));
+		--_st-padding-y: var(--dry-select-trigger-padding-y, var(--dry-form-control-padding-block));
+		--_st-font-size: var(--dry-select-trigger-font-size, var(--dry-form-control-font-size));
+
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) max-content;
+		align-items: center;
+		gap: var(--dry-space-2);
+		padding-block: var(--_st-padding-y);
+		padding-inline: var(--_st-padding-x);
+		font-size: var(--_st-font-size);
+		line-height: var(--dry-type-small-leading);
+		font-family: var(--dry-font-sans);
+		color: var(--_st-color);
+		background: var(--_st-bg);
+		border: 1px solid var(--_st-border);
+		border-radius: var(--_st-radius);
+		box-sizing: border-box;
+		appearance: none;
+		text-align: start;
+		cursor: pointer;
+		user-select: none;
+		transition:
+			border-color var(--dry-duration-fast) var(--dry-ease-default),
+			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-select-trigger] [data-content] {
+		display: block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	[data-select-trigger]:hover:not([data-disabled]) {
+		border-color: var(--dry-form-control-border-hover);
+	}
+
+	[data-select-trigger]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: -1px;
+		border-color: var(--dry-color-stroke-focus);
+		box-shadow: 0 0 0 1px var(--dry-color-stroke-focus);
+	}
+
+	[data-select-trigger][data-disabled] {
+		--dry-select-trigger-bg: var(--dry-color-bg-sunken);
+		--dry-select-trigger-border: var(--dry-color-stroke-disabled);
+		--dry-select-trigger-color: var(--dry-color-text-disabled);
+		cursor: not-allowed;
+	}
+
+	[data-select-trigger][aria-invalid='true'] {
+		--dry-select-trigger-bg: color-mix(
+			in srgb,
+			var(--dry-color-fill-error-weak) 70%,
+			var(--dry-color-bg-raised)
+		);
+		--dry-select-trigger-border: var(--dry-color-stroke-error);
+	}
+
+	[data-select-trigger][aria-invalid='true']:hover:not([data-disabled]) {
+		border-color: var(--dry-color-stroke-error-strong);
+	}
+
+	[data-select-trigger][aria-invalid='true']:focus-visible {
+		outline-color: var(--dry-color-fill-error);
+		border-color: var(--dry-color-stroke-error);
+	}
+
+	[data-select-trigger][data-size='sm'] {
+		--dry-select-trigger-padding-x: var(--dry-space-2);
+		--dry-select-trigger-padding-y: var(--dry-space-1);
+		--dry-select-trigger-font-size: var(--dry-type-tiny-size);
+		line-height: var(--dry-type-tiny-leading);
+	}
+
+	[data-select-trigger][data-size='md'] {
+		--dry-select-trigger-padding-x: var(--dry-space-3);
+		--dry-select-trigger-padding-y: var(--dry-space-2);
+		--dry-select-trigger-font-size: var(--dry-type-small-size);
+		line-height: var(--dry-type-small-leading);
+	}
+
+	[data-select-trigger][data-size='lg'] {
+		--dry-select-trigger-padding-x: var(--dry-space-4);
+		--dry-select-trigger-padding-y: var(--dry-space-2_5);
+		--dry-select-trigger-font-size: var(--dry-type-heading-4-size);
+		line-height: var(--dry-type-heading-4-leading);
+	}
+
+	svg[data-indicator] {
+		height: 1em;
+		aspect-ratio: 1;
+		place-self: center;
+		opacity: 0.5;
+		transform-origin: center;
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-spring-snappy),
+			transform var(--dry-duration-fast) var(--dry-ease-spring-snappy);
+	}
+
+	svg[data-indicator][data-state='open'] {
+		opacity: 1;
+		transform: scale(1.05);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		svg[data-indicator] {
+			transition: none;
+		}
+	}
+</style>

package/src/select/select-value.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getSelectCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		placeholder?: string;
+	}
+
+	let { class: className, placeholder = '', ...rest }: Props = $props();
+
+	const ctx = getSelectCtx();
+</script>
+
+<span
+	data-select-value
+	data-placeholder={!ctx.displayText || undefined}
+	class={className}
+	{...rest}
+>
+	{ctx.displayText || placeholder}
+</span>
+
+<style>
+	[data-select-value][data-placeholder] {
+		color: var(--dry-color-text-weak);
+	}
+</style>

package/src/select/select.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Select',
+	description: 'Closed dropdown select for choosing one option from a fixed list',
+	category: 'form',
+	tags: ['form', 'select', 'dropdown', 'option', 'choice', 'non-searchable']
+};

package/src/separator/index.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+	orientation?: 'horizontal' | 'vertical';
+	variant?: 'weak' | 'strong';
+	decorative?: boolean;
+}
+
+export { default as Separator } from './separator.svelte';

package/src/separator/separator.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Separator',
+	description: 'Visual divider between content',
+	category: 'layout',
+	tags: ['divider', 'line', 'hr', 'separator']
+};

package/src/separator/separator.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		orientation?: 'horizontal' | 'vertical';
+		variant?: 'weak' | 'strong' | 'shadow';
+		decorative?: boolean;
+	}
+
+	let {
+		orientation = 'horizontal',
+		variant = 'weak',
+		decorative = true,
+		class: className,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	role="separator"
+	aria-orientation={orientation}
+	data-orientation={orientation}
+	data-variant={variant}
+	aria-hidden={decorative || undefined}
+	class={className}
+	{...rest}
+></div>
+
+<style>
+	div {
+		--dry-separator-color: var(--dry-color-stroke-weak);
+		--dry-separator-size: 1px;
+		--dry-separator-spacing: var(--dry-space-2);
+
+		background-color: var(--dry-separator-color);
+	}
+
+	div[data-orientation='horizontal'] {
+		height: var(--dry-separator-size);
+		margin: var(--dry-separator-spacing) 0;
+	}
+
+	div[data-orientation='vertical'] {
+		display: grid;
+		grid-template-columns: var(--dry-separator-size);
+		height: 100%;
+		align-self: stretch;
+		margin: 0 var(--dry-separator-spacing);
+	}
+
+	div[data-variant='strong'] {
+		--dry-separator-color: var(--dry-color-stroke-strong);
+	}
+
+	/* ── Variant: shadow (theme-friendlier edge on image backgrounds) ─────── */
+
+	div[data-variant='shadow'] {
+		background-color: transparent;
+		box-shadow: 0 1px 0 var(--dry-color-stroke-weak);
+	}
+
+	div[data-variant='shadow'][data-orientation='horizontal'] {
+		height: 1px;
+	}
+
+	div[data-variant='shadow'][data-orientation='vertical'] {
+		box-shadow: 1px 0 0 var(--dry-color-stroke-weak);
+		grid-template-columns: 1px;
+	}
+</style>

package/src/shader-canvas/index.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ShaderCanvasProps as PrimitiveShaderCanvasProps } from '@dryui/primitives/shader-canvas';
+
+export type ShaderCanvasPreset =
+	| 'gradient-flow'
+	| 'particle-field'
+	| 'wave-distortion'
+	| 'mesh-gradient'
+	| 'liquid-metal';
+
+export interface ShaderCanvasProps extends HTMLAttributes<HTMLDivElement> {
+	fragmentShader?: string;
+	vertexShader?: PrimitiveShaderCanvasProps['vertexShader'];
+	autoUniforms?: PrimitiveShaderCanvasProps['autoUniforms'];
+	uniforms?: PrimitiveShaderCanvasProps['uniforms'];
+	pixelRatio?: PrimitiveShaderCanvasProps['pixelRatio'];
+	fps?: PrimitiveShaderCanvasProps['fps'];
+	paused?: PrimitiveShaderCanvasProps['paused'];
+	fallback?: PrimitiveShaderCanvasProps['fallback'];
+	children: Snippet;
+	preset?: ShaderCanvasPreset;
+	themeColors?: boolean;
+	aspectRatio?: string;
+}
+
+export { default as ShaderCanvas } from './shader-canvas.svelte';
+export { PRESETS } from './presets.js';

package/src/shader-canvas/presets.ts

@@ -0,0 +1,212 @@
+/** sin/cos color rotation using u_time, u_resolution, optional u_color_* uniforms */
+const gradientFlow = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform vec3 u_color_primary;
+uniform vec3 u_color_secondary;
+
+void main() {
+  vec2 uv = v_uv;
+  float t = u_time * 0.4;
+
+  vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.3, 0.4, 0.9);
+  vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.9, 0.3, 0.5);
+
+  float angle = t + uv.x * 3.14159 + uv.y * 2.0;
+  float s = sin(angle) * 0.5 + 0.5;
+  float c = cos(angle * 0.7 + 1.0) * 0.5 + 0.5;
+
+  vec3 color = mix(c1, c2, s);
+  color = mix(color, vec3(1.0) - color * 0.3, c * 0.3);
+
+  fragColor = vec4(color, 1.0);
+}
+`;
+
+/** Procedural dots via hash/noise functions */
+const particleField = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+
+float hash(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+void main() {
+  vec2 uv = v_uv;
+  float aspect = u_resolution.x / u_resolution.y;
+  uv.x *= aspect;
+
+  float t = u_time * 0.3;
+  vec3 color = vec3(0.02, 0.02, 0.06);
+
+  for (int i = 0; i < 36; i++) {
+    float fi = float(i);
+    vec2 pos = vec2(
+      hash(vec2(fi, 0.0)),
+      hash(vec2(0.0, fi))
+    );
+    pos.x *= aspect;
+    pos += vec2(sin(t + fi * 0.5) * 0.05, cos(t * 0.7 + fi * 0.3) * 0.05);
+
+    float d = length(uv - pos);
+    float size = 0.002 + hash(vec2(fi, fi)) * 0.003;
+    float brightness = smoothstep(size * 2.0, size * 0.5, d);
+
+    vec3 particleColor = vec3(
+      0.4 + hash(vec2(fi, 1.0)) * 0.6,
+      0.3 + hash(vec2(fi, 2.0)) * 0.4,
+      0.6 + hash(vec2(fi, 3.0)) * 0.4
+    );
+
+    color += particleColor * brightness * 0.8;
+  }
+
+  fragColor = vec4(color, 1.0);
+}
+`;
+
+/** Sinusoidal UV warp, responds to u_mouse */
+const waveDistortion = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+
+void main() {
+  vec2 uv = v_uv;
+  float t = u_time * 0.5;
+  vec2 mouse = u_mouse;
+
+  float wave1 = sin(uv.x * 8.0 + t * 2.0 + mouse.x * 3.0) * 0.02;
+  float wave2 = sin(uv.y * 6.0 + t * 1.5 + mouse.y * 2.0) * 0.03;
+  float wave3 = cos(uv.x * 4.0 - t + uv.y * 5.0) * 0.015;
+
+  uv.x += wave1 + wave3;
+  uv.y += wave2;
+
+  vec3 c1 = vec3(0.1, 0.2, 0.4);
+  vec3 c2 = vec3(0.3, 0.1, 0.5);
+  vec3 c3 = vec3(0.05, 0.3, 0.4);
+
+  float blend = sin(uv.x * 3.14159 + uv.y * 2.0 + t) * 0.5 + 0.5;
+  vec3 color = mix(mix(c1, c2, uv.x), c3, blend);
+
+  fragColor = vec4(color, 1.0);
+}
+`;
+
+/** Multi-point gradient interpolation */
+const meshGradient = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform vec3 u_color_primary;
+uniform vec3 u_color_secondary;
+
+void main() {
+  vec2 uv = v_uv;
+  float t = u_time * 0.2;
+
+  vec3 c1 = u_color_primary.r > 0.0 ? u_color_primary : vec3(0.5, 0.2, 0.8);
+  vec3 c2 = u_color_secondary.r > 0.0 ? u_color_secondary : vec3(0.2, 0.6, 0.9);
+  vec3 c3 = vec3(0.9, 0.3, 0.4);
+  vec3 c4 = vec3(0.2, 0.8, 0.5);
+
+  vec2 p1 = vec2(0.2 + sin(t) * 0.1, 0.3 + cos(t * 0.7) * 0.1);
+  vec2 p2 = vec2(0.8 + sin(t * 0.8 + 1.0) * 0.1, 0.2 + cos(t * 0.6) * 0.1);
+  vec2 p3 = vec2(0.7 + sin(t * 0.5 + 2.0) * 0.1, 0.8 + cos(t * 0.9) * 0.1);
+  vec2 p4 = vec2(0.3 + sin(t * 0.6 + 3.0) * 0.1, 0.7 + cos(t * 0.4) * 0.1);
+
+  float d1 = 1.0 / (length(uv - p1) + 0.01);
+  float d2 = 1.0 / (length(uv - p2) + 0.01);
+  float d3 = 1.0 / (length(uv - p3) + 0.01);
+  float d4 = 1.0 / (length(uv - p4) + 0.01);
+  float total = d1 + d2 + d3 + d4;
+
+  vec3 color = (c1 * d1 + c2 * d2 + c3 * d3 + c4 * d4) / total;
+
+  fragColor = vec4(color, 1.0);
+}
+`;
+
+/** Fresnel-like metallic reflection via distance fields */
+const liquidMetal = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 fragColor;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+
+float smin(float a, float b, float k) {
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+void main() {
+  vec2 uv = v_uv * 2.0 - 1.0;
+  float aspect = u_resolution.x / u_resolution.y;
+  uv.x *= aspect;
+  float t = u_time * 0.3;
+
+  // Animated blob positions
+  vec2 p1 = vec2(sin(t * 0.7) * 0.6, cos(t * 0.5) * 0.4);
+  vec2 p2 = vec2(cos(t * 0.8 + 1.0) * 0.5, sin(t * 0.6 + 2.0) * 0.5);
+  vec2 p3 = vec2(sin(t * 0.4 + 3.0) * 0.4, cos(t * 0.9 + 1.5) * 0.3);
+
+  float d1 = length(uv - p1) - 0.3;
+  float d2 = length(uv - p2) - 0.25;
+  float d3 = length(uv - p3) - 0.2;
+
+  float d = smin(smin(d1, d2, 0.3), d3, 0.3);
+
+  // Fresnel-like effect
+  float edge = smoothstep(0.02, -0.02, d);
+  float fresnel = pow(1.0 - abs(d) * 3.0, 3.0);
+  fresnel = clamp(fresnel, 0.0, 1.0);
+
+  // Metal color
+  vec3 baseColor = vec3(0.7, 0.72, 0.75);
+  vec3 highlight = vec3(0.95, 0.95, 1.0);
+  vec3 dark = vec3(0.15, 0.16, 0.2);
+
+  float n = sin(uv.x * 8.0 + t) * cos(uv.y * 8.0 - t * 0.7) * 0.5 + 0.5;
+  vec3 color = mix(dark, baseColor, edge);
+  color = mix(color, highlight, fresnel * 0.8);
+  color += n * 0.05 * edge;
+
+  // Environment reflection hint
+  float ref = sin(uv.x * 4.0 + uv.y * 3.0 + t * 2.0) * 0.5 + 0.5;
+  color += vec3(0.1, 0.12, 0.15) * ref * edge * 0.4;
+
+  fragColor = vec4(color, 1.0);
+}
+`;
+
+export const PRESETS: Record<string, string> = {
+	'gradient-flow': gradientFlow,
+	'particle-field': particleField,
+	'wave-distortion': waveDistortion,
+	'mesh-gradient': meshGradient,
+	'liquid-metal': liquidMetal
+};

package/src/shader-canvas/shader-canvas.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'ShaderCanvas',
+	description: 'WebGL shader canvas with built-in presets and theme color integration',
+	category: 'visual',
+	tags: ['shader', 'webgl', 'canvas', 'glsl', 'animation', 'background', 'preset']
+};