@dryui/ui 3.0.0 → 4.0.0

package/src/virtual-list/virtual-list.svelte

@@ -0,0 +1,239 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		items: T[];
+		itemHeight: number | ((index: number) => number);
+		overscan?: number | undefined;
+		children: Snippet<[{ item: T; index: number; style: string }]>;
+	}
+
+	let {
+		items,
+		itemHeight,
+		overscan = 5,
+		children,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	let container: HTMLDivElement | undefined = $state(undefined);
+	let scrollTop = $state(0);
+	let containerHeight = $state(0);
+
+	// Detect mode: fixed (number) vs variable (function)
+	let isFixed = $derived(typeof itemHeight === 'number');
+
+	// ─── Fixed-height mode helpers ──────────────────────────────────────────────
+
+	let fixedHeight = $derived(isFixed ? (itemHeight as number) : 0);
+
+	let fixedTotalHeight = $derived(isFixed ? items.length * fixedHeight : 0);
+
+	let fixedStartIndex = $derived.by(() => {
+		if (!isFixed) return 0;
+		return Math.max(0, Math.floor(scrollTop / fixedHeight) - overscan);
+	});
+
+	let fixedEndIndex = $derived.by(() => {
+		if (!isFixed) return 0;
+		const visible = Math.ceil(containerHeight / fixedHeight);
+		return Math.min(items.length, Math.floor(scrollTop / fixedHeight) + visible + overscan);
+	});
+
+	let fixedVisibleItems = $derived.by(() => {
+		if (!isFixed) return [];
+		const result: Array<{ item: T; index: number; style: string }> = [];
+		for (let i = fixedStartIndex; i < fixedEndIndex; i++) {
+			result.push({
+				item: items[i]!,
+				index: i,
+				style: `position:absolute;top:${i * fixedHeight}px;width:100%;height:${fixedHeight}px;`
+			});
+		}
+		return result;
+	});
+
+	// ─── Variable-height mode helpers ───────────────────────────────────────────
+
+	// Pre-compute offsets from the height function
+	let variableOffsets = $derived.by(() => {
+		if (isFixed) return [];
+		const heightFn = itemHeight as (index: number) => number;
+		const offsets: number[] = new Array(items.length);
+		let cumulative = 0;
+		for (let i = 0; i < items.length; i++) {
+			offsets[i] = cumulative;
+			cumulative += heightFn(i);
+		}
+		return offsets;
+	});
+
+	let variableTotalHeight = $derived.by(() => {
+		if (isFixed || items.length === 0) return 0;
+		const heightFn = itemHeight as (index: number) => number;
+		const lastIdx = items.length - 1;
+		return variableOffsets[lastIdx]! + heightFn(lastIdx);
+	});
+
+	// Binary search to find the first item whose bottom edge is past scrollTop
+	function binarySearchStart(offsets: number[], target: number): number {
+		let lo = 0;
+		let hi = offsets.length - 1;
+		while (lo < hi) {
+			const mid = (lo + hi) >>> 1;
+			if (offsets[mid]! < target) {
+				lo = mid + 1;
+			} else {
+				hi = mid;
+			}
+		}
+		return lo;
+	}
+
+	let variableStartIndex = $derived.by(() => {
+		if (isFixed || items.length === 0) return 0;
+		const raw = binarySearchStart(variableOffsets, scrollTop);
+		// Step back to find the item that actually contains scrollTop
+		const idx = raw > 0 ? raw - 1 : 0;
+		return Math.max(0, idx - overscan);
+	});
+
+	let variableEndIndex = $derived.by(() => {
+		if (isFixed || items.length === 0) return 0;
+		const bottom = scrollTop + containerHeight;
+		const raw = binarySearchStart(variableOffsets, bottom);
+		return Math.min(items.length, raw + 1 + overscan);
+	});
+
+	let variableVisibleItems = $derived.by(() => {
+		if (isFixed) return [];
+		const heightFn = itemHeight as (index: number) => number;
+		const result: Array<{ item: T; index: number; style: string }> = [];
+		for (let i = variableStartIndex; i < variableEndIndex; i++) {
+			const h = heightFn(i);
+			result.push({
+				item: items[i]!,
+				index: i,
+				style: `position:absolute;top:${variableOffsets[i]}px;width:100%;height:${h}px;`
+			});
+		}
+		return result;
+	});
+
+	// ─── Combined derivations ──────────────────────────────────────────────────
+
+	let totalHeight = $derived(isFixed ? fixedTotalHeight : variableTotalHeight);
+	let visibleItems = $derived(isFixed ? fixedVisibleItems : variableVisibleItems);
+
+	// ─── Scroll handling with RAF throttle ──────────────────────────────────────
+
+	let rafId = 0;
+
+	function handleScroll() {
+		if (rafId) return;
+		rafId = requestAnimationFrame(() => {
+			rafId = 0;
+			if (container) {
+				scrollTop = container.scrollTop;
+				containerHeight = container.clientHeight;
+			}
+		});
+	}
+
+	function applyContainerStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+		});
+	}
+
+	function applyInnerStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('--_inner-height', `${totalHeight}px`);
+		});
+	}
+
+	// Measure container on mount and when it resizes
+	$effect(() => {
+		if (!container) return;
+
+		containerHeight = container.clientHeight;
+		scrollTop = container.scrollTop;
+
+		const ro = new ResizeObserver(() => {
+			if (container) {
+				containerHeight = container.clientHeight;
+			}
+		});
+		ro.observe(container);
+
+		return () => {
+			ro.disconnect();
+			if (rafId) {
+				cancelAnimationFrame(rafId);
+				rafId = 0;
+			}
+		};
+	});
+</script>
+
+<div
+	bind:this={container}
+	class={className}
+	use:applyContainerStyles
+	onscroll={handleScroll}
+	role="list"
+	data-virtual-list
+	{...rest}
+>
+	<div data-virtual-list-inner use:applyInnerStyles>
+		{#each visibleItems as entry (entry.index)}
+			{@render children(entry)}
+		{/each}
+	</div>
+</div>
+
+<style>
+	[data-virtual-list] {
+		position: relative;
+		overflow-y: auto;
+		height: 100%;
+		--dry-virtual-list-scrollbar-width: 8px;
+		--dry-virtual-list-scrollbar-track: var(--dry-color-bg-raised, transparent);
+		--dry-virtual-list-scrollbar-thumb: color-mix(
+			in srgb,
+			var(--dry-color-text-strong) 16%,
+			transparent
+		);
+		--dry-virtual-list-scrollbar-thumb-hover: color-mix(
+			in srgb,
+			var(--dry-color-text-strong) 24%,
+			transparent
+		);
+		--dry-virtual-list-scrollbar-radius: var(--dry-radius-full, 9999px);
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--dry-virtual-list-scrollbar-thumb) var(--dry-virtual-list-scrollbar-track);
+	}
+
+	[data-virtual-list]::-webkit-scrollbar-track {
+		background: var(--dry-virtual-list-scrollbar-track);
+		border-radius: var(--dry-virtual-list-scrollbar-radius);
+	}
+
+	[data-virtual-list]::-webkit-scrollbar-thumb {
+		background: var(--dry-virtual-list-scrollbar-thumb);
+		border-radius: var(--dry-virtual-list-scrollbar-radius);
+	}
+
+	[data-virtual-list]::-webkit-scrollbar-thumb:hover {
+		background: var(--dry-virtual-list-scrollbar-thumb-hover);
+	}
+
+	[data-virtual-list-inner] {
+		position: relative;
+		height: var(--_inner-height, 0px);
+	}
+</style>

package/src/visually-hidden/index.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+	children: Snippet;
+}
+
+export { default as VisuallyHidden } from './visually-hidden.svelte';

package/src/visually-hidden/visually-hidden.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'VisuallyHidden',
+	description: 'Hides content visually but keeps it accessible to screen readers',
+	category: 'utility',
+	tags: ['a11y', 'screen-reader', 'hidden', 'accessible']
+};

package/src/visually-hidden/visually-hidden.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLSpanElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<span class={className} {...rest}>
+	{@render children()}
+</span>
+
+<style>
+	span {
+		position: absolute;
+		height: 1px;
+		aspect-ratio: 1;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+</style>

package/dist/card/card-content.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
-		noPadding?: boolean;
-	}
-
-	let { class: className, children, noPadding = false, ...rest }: Props = $props();
-</script>
-
-<div class={className} data-card-content data-no-padding={noPadding ? '' : undefined} {...rest}>
-	{@render children()}
-</div>
-
-<style>
-	[data-card-content] {
-		padding: var(--dry-card-padding, var(--dry-padding-card));
-		overflow-x: auto;
-	}
-
-	[data-card-content][data-no-padding] {
-		padding: 0;
-	}
-
-	@container (max-width: 300px) {
-		[data-card-content]:not([data-no-padding]) {
-			padding: var(--dry-space-4);
-		}
-	}
-</style>

package/dist/card/card-content.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
-    noPadding?: boolean;
-}
-declare const CardContent: import("svelte").Component<Props, {}, "">;
-type CardContent = ReturnType<typeof CardContent>;
-export default CardContent;

package/dist/card/card-footer.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
-}
-declare const CardFooter: import("svelte").Component<Props, {}, "">;
-type CardFooter = ReturnType<typeof CardFooter>;
-export default CardFooter;

package/dist/card/card-header.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
-}
-declare const CardHeader: import("svelte").Component<Props, {}, "">;
-type CardHeader = ReturnType<typeof CardHeader>;
-export default CardHeader;

package/dist/card/card-root.svelte

@@ -1,184 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { variantAttrs } from '@dryui/primitives';
-
-	interface Props extends HTMLAttributes<HTMLElement> {
-		as?: 'div' | 'button';
-		selected?: boolean;
-		disabled?: boolean;
-		orientation?: 'vertical' | 'horizontal';
-		variant?: 'default' | 'elevated' | 'interactive';
-		size?: 'default' | 'sm';
-		bordered?: boolean;
-		children: Snippet;
-	}
-
-	let {
-		as = 'div',
-		selected,
-		disabled,
-		orientation,
-		variant = 'default',
-		size = 'default',
-		bordered = false,
-		class: className,
-		children,
-		...rest
-	}: Props = $props();
-</script>
-
-{#if as === 'button'}
-	<button
-		class={className}
-		data-card
-		data-selected={selected ? '' : undefined}
-		data-orientation={orientation}
-		data-bordered={bordered ? '' : undefined}
-		{...variantAttrs({
-			variant: variant !== 'default' ? variant : undefined,
-			size: size !== 'default' ? size : undefined
-		})}
-		data-disabled={disabled ? '' : undefined}
-		{disabled}
-		aria-disabled={disabled || undefined}
-		type="button"
-		{...rest as HTMLButtonAttributes}
-	>
-		{@render children()}
-	</button>
-{:else}
-	<div
-		class={className}
-		data-card
-		data-selected={selected ? '' : undefined}
-		data-orientation={orientation}
-		data-bordered={bordered ? '' : undefined}
-		{...variantAttrs({
-			variant: variant !== 'default' ? variant : undefined,
-			size: size !== 'default' ? size : undefined
-		})}
-		data-disabled={disabled ? '' : undefined}
-		aria-disabled={disabled || undefined}
-		{...rest}
-	>
-		{@render children()}
-	</div>
-{/if}
-
-<style>
-	/* outer: var(--dry-radius-card); children inside the padded region use var(--dry-radius-nested-card). */
-
-	[data-card] {
-		--dry-card-radius: var(--dry-radius-card);
-		--dry-card-padding: var(--dry-padding-card);
-		--dry-btn-radius: var(--dry-radius-nested-card);
-
-		container-type: inline-size;
-		display: grid;
-		background: var(--dry-card-bg, var(--dry-surface-bg, var(--dry-color-bg-raised)));
-		border-radius: var(--dry-card-radius, var(--dry-surface-radius, var(--dry-radius-card)));
-		box-shadow: var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
-		overflow: hidden;
-		transition: box-shadow var(--dry-duration-fast) var(--dry-ease-out);
-	}
-
-	/* ── Bordered escape hatch (retain the 1px border look) ────────────────── */
-
-	[data-card][data-bordered] {
-		border: 1px solid
-			var(--dry-card-border, var(--dry-surface-border, var(--dry-color-stroke-weak)));
-	}
-
-	/* ── Selected state ────────────────────────────────────────────────────── */
-
-	[data-card][data-selected] {
-		--dry-card-selected-ring-color: var(
-			--dry-color-stroke-selected,
-			var(--dry-color-fill-brand, #3b82f6)
-		);
-
-		outline: 2px solid var(--dry-card-selected-ring-color);
-		outline-offset: -2px;
-		box-shadow:
-			inset 0 0 0 1px var(--dry-card-selected-ring-color),
-			var(--dry-card-shadow, var(--dry-surface-shadow, var(--dry-shadow-sm)));
-	}
-
-	/* ── Clickable card (button) ───────────────────────────────────────────── */
-
-	button[data-card] {
-		appearance: none;
-		border: none;
-		padding: 0;
-		font: inherit;
-		color: inherit;
-		text-align: inherit;
-		cursor: pointer;
-		transition:
-			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
-			transform var(--dry-duration-fast, 100ms) ease;
-	}
-
-	button[data-card]:hover {
-		box-shadow: var(--dry-shadow-sm-hover);
-	}
-
-	button[data-card]:active {
-		transform: scale(0.99);
-	}
-
-	button[data-card]:focus-visible {
-		outline: var(--dry-focus-ring);
-		outline-offset: 2px;
-	}
-
-	[data-card][data-disabled] {
-		cursor: not-allowed;
-	}
-
-	/* ── Horizontal orientation ────────────────────────────────────────────── */
-
-	[data-card][data-orientation='horizontal'] {
-		grid-auto-flow: column;
-	}
-
-	/* ── Variant: elevated (shadow-only separation, stronger shadow) ───────── */
-
-	[data-card][data-variant='elevated'] {
-		--dry-card-bg: var(--dry-color-bg-overlay);
-		--dry-card-shadow: var(--dry-shadow-md);
-	}
-
-	/* ── Variant: interactive (hoverable card) ─────────────────────────────── */
-
-	[data-card][data-variant='interactive'] {
-		cursor: pointer;
-		transition:
-			box-shadow var(--dry-duration-fast) var(--dry-ease-out),
-			transform var(--dry-duration-fast) var(--dry-ease-default);
-	}
-
-	[data-card][data-variant='interactive']:hover {
-		box-shadow: var(--dry-shadow-sm-hover);
-	}
-
-	[data-card][data-variant='elevated']:hover {
-		box-shadow: var(--dry-shadow-md-hover);
-	}
-
-	[data-card][data-variant='interactive']:active {
-		transform: translateY(1px);
-	}
-
-	[data-card][data-variant='interactive']:focus-visible {
-		outline: var(--dry-focus-ring);
-		outline-offset: 2px;
-	}
-
-	/* ── Size: sm (compact padding) ────────────────────────────────────────── */
-
-	[data-card][data-size='sm'] {
-		--dry-card-padding: var(--dry-space-4);
-	}
-</style>

package/dist/card/card-root.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends HTMLAttributes<HTMLElement> {
-    as?: 'div' | 'button';
-    selected?: boolean;
-    disabled?: boolean;
-    orientation?: 'vertical' | 'horizontal';
-    variant?: 'default' | 'elevated' | 'interactive';
-    size?: 'default' | 'sm';
-    bordered?: boolean;
-    children: Snippet;
-}
-declare const CardRoot: import("svelte").Component<Props, {}, "">;
-type CardRoot = ReturnType<typeof CardRoot>;
-export default CardRoot;

package/dist/card/card.meta.js

@@ -1,7 +0,0 @@
-/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
-export default {
-    name: 'Card',
-    description: 'Contained content surface with header/content/footer sections',
-    category: 'display',
-    tags: ['surface', 'container', 'content', 'panel']
-};

package/dist/card/index.d.ts

@@ -1,31 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-export interface CardRootProps extends HTMLAttributes<HTMLElement> {
-    as?: 'div' | 'a' | 'button';
-    selected?: boolean;
-    disabled?: boolean;
-    orientation?: 'vertical' | 'horizontal';
-    variant?: 'default' | 'elevated' | 'interactive';
-    size?: 'default' | 'sm';
-    children: Snippet;
-}
-export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
-}
-export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
-    noPadding?: boolean;
-}
-export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
-}
-import CardRoot from './card-root.svelte';
-import CardHeader from './card-header.svelte';
-import CardContent from './card-content.svelte';
-import CardFooter from './card-footer.svelte';
-export declare const Card: {
-    Root: typeof CardRoot;
-    Header: typeof CardHeader;
-    Content: typeof CardContent;
-    Footer: typeof CardFooter;
-};

package/dist/card/index.js

@@ -1,10 +0,0 @@
-import CardRoot from './card-root.svelte';
-import CardHeader from './card-header.svelte';
-import CardContent from './card-content.svelte';
-import CardFooter from './card-footer.svelte';
-export const Card = {
-    Root: CardRoot,
-    Header: CardHeader,
-    Content: CardContent,
-    Footer: CardFooter
-};