@dryui/ui 3.0.0 → 4.0.0

package/src/markdown-renderer/markdown-renderer.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { parseMarkdownToAst, type MarkdownNode } from '@dryui/primitives/markdown-renderer';
+	import { CodeBlock } from '../code-block/index.js';
+	import { Separator } from '../separator/index.js';
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		content: string;
+		dangerouslyAllowRawHtml?: boolean;
+	}
+
+	let { content, dangerouslyAllowRawHtml = false, class: className, ...rest }: Props = $props();
+
+	const nodes = $derived(parseMarkdownToAst(content, { sanitize: !dangerouslyAllowRawHtml }));
+</script>
+
+{#snippet renderNodes(items: MarkdownNode[])}
+	{#each items as node}
+		{#if node.type === 'heading'}
+			{#if node.level === 1}<h1>{@html node.content}</h1>
+			{:else if node.level === 2}<h2>{@html node.content}</h2>
+			{:else if node.level === 3}<h3>{@html node.content}</h3>
+			{:else if node.level === 4}<h4>{@html node.content}</h4>
+			{:else if node.level === 5}<h5>{@html node.content}</h5>
+			{:else}<h6>{@html node.content}</h6>
+			{/if}
+		{:else if node.type === 'paragraph'}
+			<p>{@html node.content}</p>
+		{:else if node.type === 'code-block'}
+			<CodeBlock code={node.code} language={node.language} />
+		{:else if node.type === 'blockquote'}
+			<blockquote>
+				{@render renderNodes(node.children)}
+			</blockquote>
+		{:else if node.type === 'unordered-list'}
+			<ul>
+				{#each node.items as item}
+					<li>{@html item}</li>
+				{/each}
+			</ul>
+		{:else if node.type === 'ordered-list'}
+			<ol>
+				{#each node.items as item}
+					<li>{@html item}</li>
+				{/each}
+			</ol>
+		{:else if node.type === 'hr'}
+			<Separator />
+		{/if}
+	{/each}
+{/snippet}
+
+<div data-markdown-renderer class={className} data-markdown-renderer-root {...rest}>
+	{@render renderNodes(nodes)}
+</div>
+
+<style>
+	[data-markdown-renderer-root] {
+		display: grid;
+		grid-template-columns: minmax(0, var(--dry-markdown-max-width, 65ch));
+		font-family: var(--dry-font-sans);
+		font-size: var(--dry-markdown-font-size, var(--dry-type-small-size));
+		line-height: var(--dry-markdown-line-height, var(--dry-type-small-leading));
+		color: var(--dry-markdown-color, var(--dry-color-text-strong));
+	}
+
+	/* ── Headings ─────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(h1),
+	[data-markdown-renderer-root] :global(h2),
+	[data-markdown-renderer-root] :global(h3),
+	[data-markdown-renderer-root] :global(h4),
+	[data-markdown-renderer-root] :global(h5),
+	[data-markdown-renderer-root] :global(h6) {
+		color: var(--dry-markdown-heading-color, var(--dry-color-text-strong));
+		font-weight: 600;
+		line-height: 1.25;
+		margin-top: 1.5em;
+		margin-bottom: 0.5em;
+	}
+
+	[data-markdown-renderer-root] :global(h1) {
+		font-size: var(--dry-type-heading-2-size);
+		margin-top: 0;
+	}
+
+	[data-markdown-renderer-root] :global(h2) {
+		font-size: var(--dry-type-heading-2-size);
+		padding-bottom: 0.25em;
+		border-bottom: 1px solid var(--dry-markdown-hr-color, var(--dry-color-stroke-weak));
+	}
+
+	[data-markdown-renderer-root] :global(h3) {
+		font-size: var(--dry-type-heading-3-size);
+	}
+
+	[data-markdown-renderer-root] :global(h4) {
+		font-size: var(--dry-type-heading-4-size);
+	}
+
+	[data-markdown-renderer-root] :global(h5) {
+		font-size: var(--dry-markdown-font-size, var(--dry-type-small-size));
+	}
+
+	[data-markdown-renderer-root] :global(h6) {
+		font-size: var(--dry-type-small-size);
+		color: var(--dry-color-text-weak);
+	}
+
+	/* ── Paragraph ────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(p) {
+		margin-top: 0;
+		margin-bottom: 1em;
+	}
+
+	/* ── Links ────────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(a) {
+		color: var(--dry-markdown-link-color, var(--dry-color-fill-brand));
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	[data-markdown-renderer-root] :global(a:hover) {
+		color: var(--dry-markdown-link-hover-color, var(--dry-color-fill-brand-hover));
+	}
+
+	/* ── Images ───────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(img) {
+		height: auto;
+		border-radius: var(--dry-radius-md);
+		margin-top: 0.5em;
+		margin-bottom: 0.5em;
+	}
+
+	/* ── Lists ────────────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(ul),
+	[data-markdown-renderer-root] :global(ol) {
+		margin-top: 0;
+		margin-bottom: 1em;
+		padding-left: 1.5em;
+	}
+
+	[data-markdown-renderer-root] :global(li) {
+		margin-bottom: 0.25em;
+	}
+
+	[data-markdown-renderer-root] :global(ul) {
+		list-style-type: disc;
+	}
+
+	[data-markdown-renderer-root] :global(ol) {
+		list-style-type: decimal;
+	}
+
+	/* ── Blockquotes ──────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(blockquote) {
+		margin: 0 0 1em 0;
+		padding: var(--dry-space-2) var(--dry-space-4);
+		border-left: 3px solid var(--dry-markdown-blockquote-border, var(--dry-color-stroke-weak));
+		color: var(--dry-markdown-blockquote-color, var(--dry-color-text-weak));
+	}
+
+	[data-markdown-renderer-root] :global(blockquote p:last-child) {
+		margin-bottom: 0;
+	}
+
+	/* ── Inline code ──────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(code) {
+		font-family: var(--dry-font-mono);
+		font-size: 0.875em;
+		padding: 0.125em 0.375em;
+		background: var(--dry-markdown-code-bg, var(--dry-color-bg-raised));
+		color: var(--dry-markdown-code-color, var(--dry-color-text-weak));
+		border: 1px solid var(--dry-markdown-code-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-radius-sm);
+	}
+
+	/* Reset inline code styles inside CodeBlock */
+	[data-markdown-renderer-root] :global([data-code-block] code) {
+		padding: 0;
+		background: none;
+		color: inherit;
+		border: none;
+		border-radius: 0;
+	}
+
+	/* ── Strong & Em ──────────────────────────────────────────────────────────── */
+
+	[data-markdown-renderer-root] :global(strong) {
+		font-weight: 600;
+		color: var(--dry-markdown-heading-color, var(--dry-color-text-strong));
+	}
+
+	[data-markdown-renderer-root] :global(em) {
+		font-style: italic;
+	}
+</style>

package/src/marquee/index.ts

@@ -0,0 +1,3 @@
+export type { MarqueeProps } from '@dryui/primitives';
+
+export { default as Marquee } from './marquee.svelte';

package/src/marquee/marquee.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Marquee',
+	description: 'Scrolling text/content ticker with CSS animations',
+	category: 'display',
+	tags: ['scroll', 'ticker', 'animation', 'text']
+};

package/src/marquee/marquee.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		observeInViewport,
+		observePageVisibility,
+		observeReducedMotionPreference
+	} from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		speed?: number;
+		direction?: 'left' | 'right' | 'up' | 'down';
+		pauseOnHover?: boolean;
+		fade?: boolean;
+		gap?: string;
+		children: Snippet;
+	}
+
+	let {
+		speed = 50,
+		direction = 'left',
+		pauseOnHover = false,
+		fade = false,
+		gap = '1rem',
+		children,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let rootEl: HTMLDivElement | undefined = $state();
+	let contentEl: HTMLDivElement | undefined = $state();
+	let contentSize = $state(0);
+	let prefersReducedMotion = $state(false);
+	let onScreen = $state(true);
+	let tabVisible = $state(true);
+
+	const isVertical = $derived(direction === 'up' || direction === 'down');
+	const duration = $derived(contentSize > 0 && speed > 0 ? contentSize / speed : 0);
+	const paused = $derived(!onScreen || !tabVisible);
+
+	$effect(() => {
+		const unsubscribeMotion = observeReducedMotionPreference((matches) => {
+			prefersReducedMotion = matches;
+		});
+		const unsubscribeVisibility = observePageVisibility((visible) => {
+			tabVisible = visible;
+		});
+		return () => {
+			unsubscribeMotion();
+			unsubscribeVisibility();
+		};
+	});
+
+	$effect(() => {
+		if (!rootEl) return;
+		return observeInViewport(
+			rootEl,
+			(inView) => {
+				onScreen = inView;
+			},
+			{ rootMargin: '200px' }
+		);
+	});
+
+	$effect(() => {
+		if (!contentEl) return;
+
+		const el = contentEl;
+		const measure = () => {
+			contentSize = isVertical ? el.scrollHeight : el.scrollWidth;
+		};
+
+		measure();
+
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+
+		return () => observer.disconnect();
+	});
+
+	function applyRootStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('--_marquee-duration', `${duration}s`);
+			node.style.setProperty('--_marquee-gap', gap);
+			node.style.setProperty('--_marquee-shift', `${contentSize}px`);
+		});
+	}
+
+	function applyFlowDirection(node: HTMLElement) {
+		$effect(() => {
+			node.style.setProperty('--_flow', isVertical ? 'row' : 'column');
+		});
+	}
+</script>
+
+<div
+	bind:this={rootEl}
+	class={className}
+	data-marquee
+	data-direction={direction}
+	data-pause-on-hover={pauseOnHover || undefined}
+	data-fade={fade || undefined}
+	data-reduced-motion={prefersReducedMotion || undefined}
+	data-paused={paused || undefined}
+	use:applyRootStyles
+	{...rest}
+>
+	<div data-marquee-track use:applyFlowDirection>
+		<div data-marquee-content bind:this={contentEl} use:applyFlowDirection>
+			{@render children()}
+		</div>
+		<div data-marquee-content aria-hidden="true" use:applyFlowDirection>
+			{@render children()}
+		</div>
+	</div>
+</div>
+
+<style>
+	[data-marquee] {
+		/* Component tokens (Tier 3) */
+		--dry-marquee-gap: var(--_marquee-gap, 1rem);
+		--dry-marquee-speed: var(--_marquee-duration, 10s);
+
+		overflow: hidden;
+		position: relative;
+		contain: content;
+	}
+
+	[data-marquee-track] {
+		display: grid;
+		grid-auto-flow: var(--_flow, column);
+		animation-duration: var(--dry-marquee-speed);
+		animation-timing-function: linear;
+		animation-iteration-count: infinite;
+		backface-visibility: hidden;
+	}
+
+	[data-marquee]:not([data-paused]) [data-marquee-track] {
+		will-change: transform;
+	}
+
+	[data-marquee-content] {
+		display: grid;
+		grid-auto-flow: var(--_flow, column);
+		gap: var(--_marquee-gap, 1rem);
+	}
+
+	/* Trailing padding on content (not gap on track) keeps the keyframe loop seamless. */
+	[data-marquee][data-direction='left'] [data-marquee-content],
+	[data-marquee][data-direction='right'] [data-marquee-content] {
+		padding-inline-end: var(--_marquee-gap, 1rem);
+	}
+
+	[data-marquee][data-direction='up'] [data-marquee-content],
+	[data-marquee][data-direction='down'] [data-marquee-content] {
+		padding-block-end: var(--_marquee-gap, 1rem);
+	}
+
+	[data-marquee][data-direction='left'] [data-marquee-track],
+	[data-marquee][data-direction='right'] [data-marquee-track] {
+		animation-name: marquee-horizontal;
+	}
+
+	[data-marquee][data-direction='up'] [data-marquee-track],
+	[data-marquee][data-direction='down'] [data-marquee-track] {
+		animation-name: marquee-vertical;
+	}
+
+	[data-marquee][data-direction='right'] [data-marquee-track],
+	[data-marquee][data-direction='down'] [data-marquee-track] {
+		animation-direction: reverse;
+	}
+
+	[data-marquee][data-pause-on-hover]:hover [data-marquee-track] {
+		animation-play-state: paused;
+	}
+
+	[data-marquee][data-paused] [data-marquee-track] {
+		animation-play-state: paused;
+	}
+
+	@keyframes marquee-horizontal {
+		from {
+			transform: translateX(0);
+		}
+		to {
+			transform: translateX(calc(-1 * var(--_marquee-shift, 0px)));
+		}
+	}
+
+	@keyframes marquee-vertical {
+		from {
+			transform: translateY(0);
+		}
+		to {
+			transform: translateY(calc(-1 * var(--_marquee-shift, 0px)));
+		}
+	}
+
+	[data-marquee][data-fade] {
+		mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
+	}
+
+	[data-marquee][data-fade][data-direction='up'],
+	[data-marquee][data-fade][data-direction='down'] {
+		mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
+	}
+
+	[data-marquee][data-reduced-motion] [data-marquee-track] {
+		animation-play-state: paused;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-marquee-track] {
+			animation-play-state: paused;
+		}
+	}
+</style>

package/src/mask-reveal/index.ts

@@ -0,0 +1,5 @@
+import type { MaskRevealProps as PrimitiveMaskRevealProps } from '@dryui/primitives/mask-reveal';
+
+export interface MaskRevealProps extends PrimitiveMaskRevealProps {}
+
+export { default as MaskReveal } from './mask-reveal.svelte';

package/src/mask-reveal/mask-reveal.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'MaskReveal',
+	description: 'Intersection-observer mask transition with circle, diamond, or wipe shapes',
+	category: 'visual',
+	tags: ['mask', 'reveal', 'transition', 'intersection-observer', 'animation', 'clip-path']
+};

package/src/mask-reveal/mask-reveal.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getReducedMotionPreference, observeReducedMotionPreference } from '@dryui/primitives';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		shape?: 'circle' | 'linear' | 'diagonal' | 'diamond';
+		direction?: 'in' | 'out';
+		once?: boolean;
+		threshold?: number;
+		duration?: number;
+		children: Snippet;
+	}
+
+	let {
+		shape = 'circle',
+		direction = 'in',
+		once = true,
+		threshold = 0.18,
+		duration,
+		children: childSnippet,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let element = $state<HTMLDivElement>();
+	let durationEl = $state<HTMLDivElement>();
+	let revealed = $state(false);
+	let prefersReducedMotion = $state(false);
+
+	$effect(() => {
+		if (!durationEl) return;
+		if (typeof duration === 'number') {
+			durationEl.style.setProperty('--dry-mask-reveal-duration', `${Math.max(0, duration)}ms`);
+		} else {
+			durationEl.style.removeProperty('--dry-mask-reveal-duration');
+		}
+	});
+
+	$effect(() => {
+		const stopMotionObserver = observeReducedMotionPreference((matches) => {
+			prefersReducedMotion = matches;
+			if (matches) revealed = true;
+		});
+
+		if (getReducedMotionPreference()) {
+			revealed = true;
+			return stopMotionObserver;
+		}
+
+		const current = element;
+		if (!current) {
+			revealed = true;
+			return stopMotionObserver;
+		}
+
+		const observer = new IntersectionObserver(
+			(entries) => {
+				const entry = entries[0];
+				if (!entry) return;
+
+				if (entry.isIntersecting) {
+					revealed = true;
+					if (once) {
+						observer.unobserve(current);
+					}
+					return;
+				}
+
+				if (!once) {
+					revealed = false;
+				}
+			},
+			{ threshold }
+		);
+
+		observer.observe(current);
+
+		return () => {
+			observer.disconnect();
+			stopMotionObserver();
+		};
+	});
+</script>
+
+<div bind:this={element} class={className} data-mask-reveal-root {...rest}>
+	<div
+		bind:this={durationEl}
+		data-mask-reveal
+		data-shape={shape}
+		data-direction={direction}
+		data-revealed={revealed || undefined}
+		data-reduced-motion={prefersReducedMotion || undefined}
+	>
+		{#if childSnippet}
+			{@render childSnippet()}
+		{/if}
+	</div>
+</div>
+
+<style>
+	[data-mask-reveal-root] {
+		display: block;
+	}
+
+	[data-mask-reveal] {
+		--dry-mask-reveal-duration: var(--dry-duration-entrance, 480ms);
+		--dry-mask-reveal-ease: var(--dry-ease-spring-snappy, cubic-bezier(0.16, 1, 0.3, 1));
+		--dry-mask-reveal-size: 0%;
+
+		display: block;
+		overflow: hidden;
+	}
+
+	/* Circle shape */
+	[data-mask-reveal][data-shape='circle'] {
+		mask-image: radial-gradient(
+			circle,
+			black var(--dry-mask-reveal-size),
+			transparent var(--dry-mask-reveal-size)
+		);
+		-webkit-mask-image: radial-gradient(
+			circle,
+			black var(--dry-mask-reveal-size),
+			transparent var(--dry-mask-reveal-size)
+		);
+	}
+
+	/* Linear shape */
+	[data-mask-reveal][data-shape='linear'] {
+		mask-image: linear-gradient(
+			to top,
+			black var(--dry-mask-reveal-size),
+			transparent var(--dry-mask-reveal-size)
+		);
+		-webkit-mask-image: linear-gradient(
+			to top,
+			black var(--dry-mask-reveal-size),
+			transparent var(--dry-mask-reveal-size)
+		);
+	}
+
+	/* Diagonal shape */
+	[data-mask-reveal][data-shape='diagonal'] {
+		mask-image: linear-gradient(
+			to top right,
+			black var(--dry-mask-reveal-size),
+			transparent var(--dry-mask-reveal-size)
+		);
+		-webkit-mask-image: linear-gradient(
+			to top right,
+			black var(--dry-mask-reveal-size),
+			transparent var(--dry-mask-reveal-size)
+		);
+	}
+
+	/* Diamond shape */
+	[data-mask-reveal][data-shape='diamond'] {
+		mask-image: none;
+		-webkit-mask-image: none;
+		clip-path: polygon(
+			50% calc(50% - var(--dry-mask-reveal-size)),
+			calc(50% + var(--dry-mask-reveal-size)) 50%,
+			50% calc(50% + var(--dry-mask-reveal-size)),
+			calc(50% - var(--dry-mask-reveal-size)) 50%
+		);
+	}
+
+	/* Revealed state */
+	[data-mask-reveal][data-revealed] {
+		--dry-mask-reveal-size: 150%;
+		transition: --dry-mask-reveal-size var(--dry-mask-reveal-duration) var(--dry-mask-reveal-ease);
+	}
+
+	/* Diamond revealed */
+	[data-mask-reveal][data-shape='diamond'][data-revealed] {
+		clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+		transition: clip-path var(--dry-mask-reveal-duration) var(--dry-mask-reveal-ease);
+	}
+
+	/* Direction: out */
+	[data-mask-reveal][data-direction='out'] {
+		--dry-mask-reveal-size: 150%;
+	}
+
+	[data-mask-reveal][data-direction='out'][data-revealed] {
+		--dry-mask-reveal-size: 0%;
+	}
+
+	[data-mask-reveal][data-direction='out'][data-shape='diamond'] {
+		clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
+	}
+
+	[data-mask-reveal][data-direction='out'][data-shape='diamond'][data-revealed] {
+		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
+	}
+
+	/* Reduced motion */
+	[data-mask-reveal][data-reduced-motion] {
+		mask-image: none;
+		-webkit-mask-image: none;
+		clip-path: none;
+		transition: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-mask-reveal] {
+			mask-image: none;
+			-webkit-mask-image: none;
+			clip-path: none;
+			transition: none;
+		}
+	}
+</style>

package/src/mega-menu/context.svelte.ts

@@ -0,0 +1,17 @@
+import { createContext } from '@dryui/primitives';
+
+export interface MegaMenuContext {
+	readonly activeItem: string | null;
+	openItem: (id: string, triggerId: string) => void;
+	closeItem: () => void;
+}
+export const [setMegaMenuCtx, getMegaMenuCtx] = createContext<MegaMenuContext>('mega-menu');
+
+export interface MegaMenuItemContext {
+	readonly itemId: string;
+	readonly triggerId: string;
+	readonly panelId: string;
+	readonly open: boolean;
+}
+export const [setMegaMenuItemCtx, getMegaMenuItemCtx] =
+	createContext<MegaMenuItemContext>('mega-menu-item');