@dryui/ui 3.0.0 → 4.0.1

package/src/tree/tree-root.svelte

@@ -0,0 +1,246 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { setTreeCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		defaultExpanded?: string[];
+		selectedItem?: string | null;
+		children: Snippet;
+	}
+
+	let {
+		defaultExpanded = [],
+		selectedItem = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	function createExpandedItems() {
+		return new SvelteSet<string>(defaultExpanded);
+	}
+
+	let expandedItems = createExpandedItems();
+	let branchItems = new SvelteSet<string>();
+	let focusedItem = $state<string | null>(selectedItem);
+
+	function toggleItem(id: string) {
+		if (expandedItems.has(id)) expandedItems.delete(id);
+		else expandedItems.add(id);
+	}
+
+	function expandItem(id: string) {
+		expandedItems.add(id);
+	}
+
+	function collapseItem(id: string) {
+		expandedItems.delete(id);
+	}
+
+	function selectItem(id: string) {
+		selectedItem = id;
+		focusedItem = id;
+	}
+
+	function setFocusedItem(id: string) {
+		focusedItem = id;
+	}
+
+	function registerBranch(id: string) {
+		branchItems.add(id);
+	}
+
+	function unregisterBranch(id: string) {
+		branchItems.delete(id);
+	}
+
+	setTreeCtx({
+		get expandedItems() {
+			return expandedItems;
+		},
+		get selectedItem() {
+			return selectedItem;
+		},
+		get focusedItem() {
+			return focusedItem;
+		},
+		toggleItem,
+		expandItem,
+		collapseItem,
+		selectItem,
+		setFocusedItem,
+		registerBranch,
+		unregisterBranch,
+		isExpanded(id) {
+			return expandedItems.has(id);
+		},
+		isSelected(id) {
+			return selectedItem === id;
+		},
+		isFocused(id) {
+			return focusedItem === id;
+		},
+		hasChildren(id) {
+			return branchItems.has(id);
+		}
+	});
+
+	let rootEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!rootEl) return;
+		if (focusedItem !== null) return;
+		const itemId = rootEl.querySelector<HTMLElement>('[role="treeitem"]')?.dataset.itemId;
+
+		if (itemId) {
+			focusedItem = itemId;
+		}
+	});
+
+	function getVisibleItems(tree: HTMLElement) {
+		const items = Array.from(tree.querySelectorAll('[role="treeitem"]')) as HTMLElement[];
+
+		return items.filter((item) => {
+			let parent = item.parentElement;
+
+			while (parent && parent !== tree) {
+				if (parent.getAttribute('role') === 'group') {
+					const groupParent = parent.closest<HTMLElement>('[role="treeitem"]');
+					if (groupParent?.getAttribute('aria-expanded') === 'false') {
+						return false;
+					}
+				}
+
+				parent = parent.parentElement;
+			}
+
+			return true;
+		});
+	}
+
+	function getCurrentItem(tree: HTMLElement, visibleItems: HTMLElement[]) {
+		const activeItem =
+			document.activeElement instanceof HTMLElement
+				? document.activeElement.closest<HTMLElement>('[role="treeitem"]')
+				: null;
+
+		if (activeItem && tree.contains(activeItem)) {
+			return activeItem;
+		}
+
+		if (focusedItem !== null) {
+			return visibleItems.find((item) => item.dataset.itemId === focusedItem) ?? null;
+		}
+
+		return visibleItems[0] ?? null;
+	}
+
+	function focusItem(item: HTMLElement | null | undefined) {
+		if (!item) return;
+		const itemId = item.dataset.itemId;
+		if (itemId && itemId !== focusedItem) {
+			focusedItem = itemId;
+		}
+		item.focus();
+	}
+
+	function handleFocusIn(e: FocusEvent) {
+		const item =
+			e.target instanceof HTMLElement ? e.target.closest<HTMLElement>('[role="treeitem"]') : null;
+		const itemId = item?.dataset.itemId;
+
+		if (itemId && itemId !== focusedItem) {
+			focusedItem = itemId;
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		const tree = e.currentTarget as HTMLElement;
+		const visibleItems = getVisibleItems(tree);
+		const currentItem = getCurrentItem(tree, visibleItems);
+		if (!currentItem) return;
+
+		const currentIndex = visibleItems.indexOf(currentItem);
+		const itemId = currentItem.dataset.itemId;
+
+		switch (e.key) {
+			case 'ArrowDown': {
+				e.preventDefault();
+				focusItem(visibleItems[currentIndex + 1]);
+				break;
+			}
+			case 'ArrowUp': {
+				e.preventDefault();
+				focusItem(visibleItems[currentIndex - 1]);
+				break;
+			}
+			case 'ArrowRight': {
+				e.preventDefault();
+				if (itemId && branchItems.has(itemId)) {
+					if (!expandedItems.has(itemId)) {
+						expandItem(itemId);
+					} else {
+						focusItem(currentItem.querySelector<HTMLElement>('[role="group"] [role="treeitem"]'));
+					}
+				}
+				break;
+			}
+			case 'ArrowLeft': {
+				e.preventDefault();
+				if (itemId && branchItems.has(itemId) && expandedItems.has(itemId)) {
+					collapseItem(itemId);
+				} else {
+					focusItem(currentItem.parentElement?.closest<HTMLElement>('[role="treeitem"]'));
+				}
+				break;
+			}
+			case 'Home': {
+				e.preventDefault();
+				focusItem(visibleItems[0]);
+				break;
+			}
+			case 'End': {
+				e.preventDefault();
+				focusItem(visibleItems[visibleItems.length - 1]);
+				break;
+			}
+			case 'Enter':
+			case ' ': {
+				if (itemId) {
+					e.preventDefault();
+					selectItem(itemId);
+				}
+				break;
+			}
+		}
+	}
+</script>
+
+<div
+	bind:this={rootEl}
+	role="tree"
+	data-part="root"
+	class={className}
+	onfocusin={handleFocusIn}
+	onkeydown={handleKeydown}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-part='root'] {
+		--dry-tree-indent: var(--dry-space-4);
+		--dry-tree-item-padding: var(--dry-space-1) var(--dry-space-2);
+		--dry-tree-item-radius: min(
+			var(--dry-control-radius, var(--dry-radius-md)),
+			var(--dry-space-4)
+		);
+		--dry-tree-item-hover-bg: var(--dry-color-fill);
+		--dry-tree-item-selected-bg: var(--dry-color-fill-brand-weak);
+		--dry-tree-item-selected-color: var(--dry-color-text-brand);
+		--dry-tree-icon-size: 1rem;
+	}
+</style>

package/src/tree/tree.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Tree',
+	description: 'Hierarchical tree view with expand/collapse',
+	category: 'display',
+	tags: ['tree', 'hierarchy', 'expand', 'collapse', 'nested']
+};

package/src/typing-indicator/index.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface TypingIndicatorProps extends HTMLAttributes<HTMLDivElement> {}
+
+export { default as TypingIndicator } from './typing-indicator.svelte';

package/src/typing-indicator/typing-indicator.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'TypingIndicator',
+	description: 'Animated three-dot typing status indicator',
+	category: 'display',
+	tags: ['typing', 'status', 'chat', 'loading']
+};

package/src/typing-indicator/typing-indicator.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<div
+	data-typing-indicator
+	class={className}
+	role="status"
+	aria-live="polite"
+	aria-label="Typing"
+	{...rest}
+>
+	<span data-dot></span>
+	<span data-dot></span>
+	<span data-dot></span>
+</div>
+
+<style>
+	[data-typing-indicator] {
+		--dry-typing-indicator-gap: var(--dry-space-1_5);
+		--dry-typing-indicator-dot-size: 0.5rem;
+		--dry-typing-indicator-dot-color: var(--dry-color-text-weak);
+
+		display: inline-grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-typing-indicator-gap);
+		min-height: calc(var(--dry-typing-indicator-dot-size) + var(--dry-space-1));
+	}
+
+	[data-dot] {
+		height: var(--dry-typing-indicator-dot-size);
+		aspect-ratio: 1;
+		border-radius: var(--dry-radius-full);
+		background: var(--dry-typing-indicator-dot-color);
+		opacity: 0.75;
+		animation: typing-dot 1s ease-in-out infinite;
+	}
+
+	[data-dot]:nth-child(2) {
+		animation-delay: 0.15s;
+	}
+
+	[data-dot]:nth-child(3) {
+		animation-delay: 0.3s;
+	}
+
+	@keyframes typing-dot {
+		0%,
+		80%,
+		100% {
+			transform: translateY(0);
+			opacity: 0.5;
+		}
+
+		40% {
+			transform: translateY(-0.2rem);
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-dot] {
+			animation: none;
+		}
+	}
+</style>

package/src/typography/blockquote.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLQuoteElement> {
+		children: Snippet;
+	}
+
+	let { class: classAttr, children, ...rest }: Props = $props();
+</script>
+
+<blockquote class={classAttr} {...rest}>{@render children()}</blockquote>
+
+<style>
+	blockquote {
+		margin: var(--dry-space-4) 0;
+		padding: var(--dry-space-3) var(--dry-space-4);
+		border-left: 4px solid var(--dry-typography-blockquote-border, var(--dry-color-fill-brand));
+		background: var(--dry-typography-blockquote-bg, var(--dry-color-bg-overlay));
+		color: var(--dry-color-text-weak);
+		font-style: italic;
+		line-height: 1.7;
+	}
+</style>

package/src/typography/code.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+	}
+
+	let { class: classAttr, children, ...rest }: Props = $props();
+</script>
+
+<code class={classAttr} {...rest}>{@render children()}</code>
+
+<style>
+	code {
+		padding: 0.2em 0.45em;
+		border: 1px solid var(--dry-typography-code-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-radius-sm);
+		background: var(--dry-typography-code-bg, var(--dry-color-bg-overlay));
+		color: var(--dry-color-text-strong);
+		font-family: var(--dry-font-mono);
+		font-size: 0.94em;
+		white-space: break-spaces;
+	}
+</style>

package/src/typography/heading.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HeadingProps } from './index.js';
+	import Heading from '../heading/heading.svelte';
+
+	let {
+		level = 2,
+		variant = 'default',
+		maxMeasure = false,
+		class: _class,
+		children,
+		...rest
+	}: HeadingProps = $props();
+</script>
+
+<Heading {level} {variant} {maxMeasure} {...rest}>
+	{@render children()}
+</Heading>

package/src/typography/index.ts

@@ -0,0 +1,30 @@
+import type { TextProps as SharedTextProps } from '../text/index.js';
+
+export type { HeadingProps } from '../heading/index.js';
+
+export type { CodeProps, BlockquoteProps } from '@dryui/primitives';
+
+export interface TextProps extends Omit<SharedTextProps, 'color' | 'variant'> {
+	color?: 'default' | 'muted' | 'secondary';
+	variant?: 'default' | 'muted' | 'secondary' | 'label';
+	size?: SharedTextProps['size'];
+	font?: SharedTextProps['font'];
+	weight?: SharedTextProps['weight'];
+}
+
+import TypographyHeading from './heading.svelte';
+import TypographyText from './text.svelte';
+import TypographyCode from './code.svelte';
+import TypographyBlockquote from './blockquote.svelte';
+
+export const Typography: {
+	Heading: typeof TypographyHeading;
+	Text: typeof TypographyText;
+	Code: typeof TypographyCode;
+	Blockquote: typeof TypographyBlockquote;
+} = {
+	Heading: TypographyHeading,
+	Text: TypographyText,
+	Code: TypographyCode,
+	Blockquote: TypographyBlockquote
+};

package/src/typography/text.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { TextProps } from './index.js';
+	import Text from '../text/text.svelte';
+
+	let {
+		as = 'p',
+		color,
+		variant,
+		size = 'md',
+		font = 'sans',
+		weight,
+		maxMeasure = false,
+		children,
+		...rest
+	}: TextProps = $props();
+
+	let tone: TextProps['color'] = $derived(
+		color ?? (variant === 'muted' || variant === 'secondary' ? variant : 'default')
+	);
+	let textVariant: 'default' | 'label' = $derived(variant === 'label' ? 'label' : 'default');
+</script>
+
+<Text {as} color={tone} {size} {font} {weight} variant={textVariant} {maxMeasure} {...rest}>
+	{@render children?.()}
+</Text>

package/src/typography/typography.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Typography',
+	description: 'Standalone semantic text exports: heading, text, code, blockquote',
+	category: 'display',
+	tags: ['text', 'heading', 'typography', 'prose', 'standalone']
+};

package/src/video-embed/index.ts

@@ -0,0 +1,3 @@
+export type { VideoEmbedProps } from '@dryui/primitives';
+
+export { default as VideoEmbed } from './video-embed-button.svelte';

package/src/video-embed/video-embed-button.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		src: string;
+		poster?: string;
+		title?: string;
+		provider?: 'youtube' | 'vimeo' | 'native';
+		autoplay?: boolean;
+		aspectRatio?: string;
+		playButton?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		src,
+		poster,
+		title,
+		provider,
+		autoplay = false,
+		aspectRatio = '16/9',
+		playButton,
+		children,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let activated = $state(false);
+
+	const detectedProvider = $derived(
+		provider ??
+			(src.includes('youtube.com') || src.includes('youtu.be')
+				? 'youtube'
+				: src.includes('vimeo.com')
+					? 'vimeo'
+					: 'native')
+	);
+
+	const embedSrc = $derived.by(() => {
+		if (detectedProvider === 'youtube') {
+			const id = src.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&?\s]+)/)?.[1];
+			return id
+				? `https://www.youtube-nocookie.com/embed/${id}${autoplay || activated ? '?autoplay=1' : ''}`
+				: src;
+		}
+		if (detectedProvider === 'vimeo') {
+			const id = src.match(/vimeo\.com\/(\d+)/)?.[1];
+			return id
+				? `https://player.vimeo.com/video/${id}${autoplay || activated ? '?autoplay=1' : ''}`
+				: src;
+		}
+		return src;
+	});
+
+	function activate() {
+		activated = true;
+	}
+
+	let el = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--_ratio', aspectRatio);
+	});
+</script>
+
+<div
+	bind:this={el}
+	data-video-embed
+	data-provider={detectedProvider}
+	data-activated={activated || autoplay ? '' : undefined}
+	class={className}
+	{...rest}
+>
+	{#if activated || autoplay}
+		{#if detectedProvider === 'native'}
+			<video
+				data-part="media"
+				src={embedSrc}
+				{title}
+				width="100%"
+				height="100%"
+				controls
+				autoplay={autoplay || activated}
+				{poster}
+			>
+				<track kind="captions" />
+			</video>
+		{:else}
+			<iframe
+				data-part="media"
+				src={embedSrc}
+				{title}
+				width="100%"
+				height="100%"
+				frameborder="0"
+				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+				allowfullscreen
+			></iframe>
+		{/if}
+	{:else}
+		{#if poster}
+			<img data-part="poster" src={poster} alt="" />
+		{/if}
+		<span class="play-btn-slot">
+			<Button
+				variant="bare"
+				type="button"
+				onclick={activate}
+				aria-label="Play video{title ? `: ${title}` : ''}"
+			>
+				{#if playButton}
+					{@render playButton()}
+				{:else}
+					<svg data-part="play-icon" viewBox="0 0 48 48" width="48" height="48" aria-hidden="true">
+						<circle cx="24" cy="24" r="24" fill="rgba(0,0,0,0.6)" />
+						<polygon points="18,14 36,24 18,34" fill="white" />
+					</svg>
+				{/if}
+			</Button>
+		</span>
+	{/if}
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style>
+	[data-video-embed] {
+		--dry-video-embed-radius: var(--dry-radius-lg, 0.5rem);
+		--dry-video-embed-play-size: 4rem;
+
+		display: grid;
+		position: relative;
+		overflow: hidden;
+		border-radius: var(--dry-video-embed-radius);
+		background: var(--dry-color-fill);
+		aspect-ratio: var(--_ratio, 16/9);
+	}
+
+	[data-video-embed] [data-part='media'] {
+		position: absolute;
+		inset: 0;
+		height: 100%;
+		object-fit: cover;
+		border: 0;
+	}
+
+	[data-video-embed] [data-part='poster'] {
+		height: 100%;
+		object-fit: cover;
+		position: absolute;
+		inset: 0;
+	}
+
+	.play-btn-slot {
+		position: absolute;
+		inset: 0;
+		display: grid;
+		place-items: center;
+		z-index: 1;
+	}
+
+	[data-video-embed] [data-part='play-icon'] {
+		height: var(--dry-video-embed-play-size);
+		aspect-ratio: 1;
+		filter: drop-shadow(var(--dry-video-embed-shadow, 0 2px 8px rgb(15 23 42 / 0.3)));
+		transform: translateX(1px);
+		transition: transform var(--dry-duration-normal) var(--dry-ease-default);
+	}
+
+	.play-btn-slot:hover [data-part='play-icon'] {
+		transform: translateX(1px) scale(1.1);
+	}
+</style>

package/src/video-embed/video-embed.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'VideoEmbed',
+	description: 'Video player embed for YouTube, Vimeo, and native sources',
+	category: 'display',
+	tags: ['video', 'embed', 'youtube', 'vimeo', 'player', 'media']
+};

package/src/virtual-list/index.ts

@@ -0,0 +1,3 @@
+export type { VirtualListProps } from '@dryui/primitives';
+
+export { default as VirtualList } from './virtual-list.svelte';

package/src/virtual-list/virtual-list.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'VirtualList',
+	description: 'Renders only visible items from large lists for performance',
+	category: 'display',
+	tags: ['virtual', 'list', 'scroll', 'performance', 'large']
+};