@dryui/ui 3.0.0 → 4.0.1

package/src/chromatic-shift/chromatic-shift.svelte

@@ -0,0 +1,226 @@
+<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> {
+		offset?: number;
+		channels?: 'rgb' | 'rb';
+		trigger?: 'hover' | 'always' | 'none';
+		animated?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		offset = 3,
+		channels = 'rgb',
+		trigger = 'hover',
+		animated = false,
+		children: childSnippet,
+		class: className,
+		style,
+		...rest
+	}: Props = $props();
+
+	let active = $state(false);
+	let prefersReducedMotion = $state(false);
+	let onScreen = $state(true);
+	let tabVisible = $state(true);
+	const paused = $derived(!onScreen || !tabVisible);
+
+	const shouldActivate = $derived.by(() => {
+		if (prefersReducedMotion) return false;
+		if (trigger === 'always') return true;
+		if (trigger === 'none') return false;
+		return active;
+	});
+
+	function handlePointerEnter() {
+		if (trigger === 'hover') active = true;
+	}
+
+	function handlePointerLeave() {
+		if (trigger === 'hover') active = false;
+	}
+
+	const offsetValue = $derived(`${Math.max(0, offset)}px`);
+
+	$effect(() =>
+		observeReducedMotionPreference((matches) => {
+			prefersReducedMotion = matches;
+		})
+	);
+
+	function applyStyles(node: HTMLElement) {
+		$effect(() => {
+			node.style.cssText = style || '';
+			node.style.setProperty('--dry-chromatic-offset', offsetValue);
+		});
+
+		$effect(() => {
+			const stopViewport = observeInViewport(
+				node,
+				(inView) => {
+					onScreen = inView;
+				},
+				{ rootMargin: '200px' }
+			);
+			const stopVisibility = observePageVisibility((visible) => {
+				tabVisible = visible;
+			});
+			return () => {
+				stopViewport();
+				stopVisibility();
+			};
+		});
+	}
+</script>
+
+<div
+	data-chromatic-shift
+	class={className}
+	data-active={shouldActivate || undefined}
+	data-channels={channels}
+	data-animated={(animated && !prefersReducedMotion) || undefined}
+	data-reduced-motion={prefersReducedMotion || undefined}
+	data-paused={paused || undefined}
+	onpointerenter={trigger === 'hover' ? handlePointerEnter : undefined}
+	onpointerleave={trigger === 'hover' ? handlePointerLeave : undefined}
+	{...rest}
+	use:applyStyles
+>
+	{#if childSnippet}
+		{@render childSnippet()}
+	{/if}
+</div>
+
+<style>
+	[data-chromatic-shift] {
+		--dry-chromatic-offset: 3px;
+		position: relative;
+		isolation: isolate;
+		border-radius: inherit;
+	}
+
+	[data-chromatic-shift][data-active]::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: inherit;
+		mix-blend-mode: screen;
+		opacity: 0.6;
+		pointer-events: none;
+		transform: translate(var(--dry-chromatic-offset), 0);
+		filter: saturate(2) hue-rotate(-30deg);
+		transition: transform var(--dry-duration-fast) var(--dry-ease-out);
+	}
+
+	[data-chromatic-shift][data-active]::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		background: inherit;
+		mix-blend-mode: screen;
+		opacity: 0.6;
+		pointer-events: none;
+		transform: translate(calc(var(--dry-chromatic-offset) * -1), 0);
+		filter: saturate(2) hue-rotate(30deg);
+		transition: transform var(--dry-duration-fast) var(--dry-ease-out);
+	}
+
+	[data-chromatic-shift][data-channels='rgb'][data-active] {
+		text-shadow:
+			var(--dry-chromatic-offset) 0 var(--dry-chromatic-shift-r, rgba(255, 0, 0, 0.3)),
+			calc(var(--dry-chromatic-offset) * -1) 0 var(--dry-chromatic-shift-b, rgba(0, 0, 255, 0.3)),
+			0 var(--dry-chromatic-offset) var(--dry-chromatic-shift-g, rgba(0, 255, 0, 0.2));
+	}
+
+	[data-chromatic-shift][data-channels='rb'][data-active] {
+		text-shadow:
+			var(--dry-chromatic-offset) 0 var(--dry-chromatic-shift-r, rgba(255, 0, 0, 0.3)),
+			calc(var(--dry-chromatic-offset) * -1) 0 var(--dry-chromatic-shift-b, rgba(0, 0, 255, 0.3));
+	}
+
+	[data-chromatic-shift]:not([data-active])::before,
+	[data-chromatic-shift]:not([data-active])::after {
+		content: none;
+	}
+
+	[data-chromatic-shift]:not([data-active]) {
+		text-shadow: none;
+	}
+
+	[data-chromatic-shift][data-animated]::before {
+		animation: chromatic-drift-r 4s ease-in-out infinite alternate;
+	}
+
+	[data-chromatic-shift][data-animated]::after {
+		animation: chromatic-drift-b 4s ease-in-out infinite alternate-reverse;
+	}
+
+	[data-chromatic-shift][data-animated][data-paused]::before,
+	[data-chromatic-shift][data-animated][data-paused]::after {
+		animation-play-state: paused;
+	}
+
+	@keyframes chromatic-drift-r {
+		0% {
+			transform: translate(var(--dry-chromatic-offset), 0);
+		}
+		50% {
+			transform: translate(var(--dry-chromatic-offset), calc(var(--dry-chromatic-offset) * 0.5));
+		}
+		100% {
+			transform: translate(
+				calc(var(--dry-chromatic-offset) * 0.8),
+				calc(var(--dry-chromatic-offset) * -0.3)
+			);
+		}
+	}
+
+	@keyframes chromatic-drift-b {
+		0% {
+			transform: translate(calc(var(--dry-chromatic-offset) * -1), 0);
+		}
+		50% {
+			transform: translate(
+				calc(var(--dry-chromatic-offset) * -1),
+				calc(var(--dry-chromatic-offset) * -0.5)
+			);
+		}
+		100% {
+			transform: translate(
+				calc(var(--dry-chromatic-offset) * -0.8),
+				calc(var(--dry-chromatic-offset) * 0.3)
+			);
+		}
+	}
+
+	[data-chromatic-shift][data-reduced-motion]::before,
+	[data-chromatic-shift][data-reduced-motion]::after {
+		animation: none;
+		transition: none;
+	}
+
+	[data-chromatic-shift][data-reduced-motion] {
+		text-shadow: none;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-chromatic-shift]::before,
+		[data-chromatic-shift]::after {
+			animation: none;
+			transition: none;
+		}
+
+		[data-chromatic-shift] {
+			text-shadow: none;
+		}
+	}
+</style>

package/src/chromatic-shift/index.ts

@@ -0,0 +1,5 @@
+import type { ChromaticShiftProps as PrimitiveChromaticShiftProps } from '@dryui/primitives/chromatic-shift';
+
+export interface ChromaticShiftProps extends PrimitiveChromaticShiftProps {}
+
+export { default as ChromaticShift } from './chromatic-shift.svelte';

package/src/clipboard/clipboard.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Clipboard',
+	description: 'Copy text to clipboard with native Clipboard API',
+	category: 'action',
+	tags: ['copy', 'clipboard', 'paste', 'text']
+};

package/src/clipboard/clipboard.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+		value: string;
+		timeout?: number;
+		children: Snippet<[{ copied: boolean; copy: () => void }]>;
+	}
+
+	let { value, timeout = 2000, class: className, children, ...rest }: Props = $props();
+
+	let copied = $state(false);
+	let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+	function copy() {
+		navigator.clipboard.writeText(value).then(() => {
+			copied = true;
+			clearTimeout(timeoutId);
+			timeoutId = setTimeout(() => {
+				copied = false;
+			}, timeout);
+		});
+	}
+</script>
+
+<div data-clipboard data-copied={copied || undefined} class={className} {...rest}>
+	{@render children({ copied, copy })}
+</div>
+
+<style>
+	[data-clipboard] {
+		display: inline-grid;
+		grid-auto-flow: column;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
+</style>

package/src/clipboard/index.ts

@@ -0,0 +1,3 @@
+export type { ClipboardProps } from '@dryui/primitives';
+
+export { default as Clipboard } from './clipboard.svelte';

package/src/code-block/code-block-button.svelte

@@ -0,0 +1,371 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { highlight } from './highlighter/index.js';
+	import type { Token } from './highlighter/types.js';
+
+	interface Segment {
+		text: string;
+		tokenType?: string;
+	}
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		code: string;
+		language?: string;
+		showLineNumbers?: boolean;
+		showCopyButton?: boolean;
+		linkResolver?: (text: string, type: string) => string | undefined;
+		children?: Snippet;
+	}
+
+	let {
+		code = '',
+		language,
+		showLineNumbers = false,
+		showCopyButton = true,
+		linkResolver,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let copied = $state(false);
+	let copyTimer: ReturnType<typeof setTimeout> | undefined;
+	const isSingleLine = $derived(!code.includes('\n'));
+	const lineBreak = '\n';
+
+	function showCopiedFeedback() {
+		copied = true;
+		clearTimeout(copyTimer);
+		copyTimer = setTimeout(() => {
+			copied = false;
+		}, 2000);
+	}
+
+	function copyWithTextarea(value: string) {
+		const textarea = document.createElement('textarea');
+		textarea.value = value;
+		textarea.setAttribute('readonly', '');
+		textarea.style.position = 'fixed';
+		textarea.style.inset = '0 auto auto 0';
+		textarea.style.opacity = '0';
+
+		document.body.appendChild(textarea);
+		textarea.select();
+		const copiedToClipboard = document.execCommand('copy');
+		textarea.remove();
+
+		if (!copiedToClipboard) {
+			throw new Error('Unable to copy code block contents');
+		}
+	}
+
+	async function copyText(value: string) {
+		if (navigator.clipboard?.writeText) {
+			try {
+				await navigator.clipboard.writeText(value);
+				return;
+			} catch {
+				copyWithTextarea(value);
+				return;
+			}
+		}
+
+		copyWithTextarea(value);
+	}
+
+	async function handleCopy() {
+		try {
+			await copyText(code);
+			showCopiedFeedback();
+		} catch (error) {
+			console.warn('Failed to copy code block contents', error);
+		}
+	}
+
+	function renderLine(
+		code: string,
+		tokens: Token[],
+		lineStart: number,
+		lineEnd: number
+	): Segment[] {
+		const segments: Segment[] = [];
+		let pos = lineStart;
+
+		const lineTokens = tokens.filter((t) => t.end > lineStart && t.start < lineEnd);
+
+		for (const token of lineTokens) {
+			const tokenStart = Math.max(token.start, lineStart);
+			const tokenEnd = Math.min(token.end, lineEnd);
+
+			if (tokenStart > pos) {
+				segments.push({ text: code.slice(pos, tokenStart) });
+			}
+
+			segments.push({
+				text: code.slice(tokenStart, tokenEnd),
+				tokenType: token.type
+			});
+
+			pos = tokenEnd;
+		}
+
+		if (pos < lineEnd) {
+			segments.push({ text: code.slice(pos, lineEnd) });
+		}
+
+		return segments;
+	}
+
+	const highlightedLines = $derived.by(() => {
+		const tokens = highlight(code, language);
+		const lines = code.split('\n');
+		let offset = 0;
+
+		return lines.map((line, i) => {
+			const lineStart = offset;
+			const lineEnd = offset + line.length;
+			offset = lineEnd + 1;
+
+			return {
+				number: i + 1,
+				segments: renderLine(code, tokens, lineStart, lineEnd)
+			};
+		});
+	});
+</script>
+
+<div
+	data-code-block
+	data-language={language || undefined}
+	data-single-line={isSingleLine || undefined}
+	data-copied={copied || undefined}
+	class={className}
+	{...rest}
+>
+	{#if language && language !== 'text'}
+		<div data-code-block-header>
+			<span data-code-block-language>{language}</span>
+		</div>
+	{/if}
+
+	{#if children}
+		<pre data-code-block-pre>{@render children()}</pre>
+	{:else}
+		<!-- prettier-ignore -->
+		<pre data-code-block-pre><code data-code-block-code data-language={language || undefined}>{#each highlightedLines as line, i (i)}{#if showLineNumbers}<span data-code-block-line-number>{line.number}</span>{/if}<span data-code-block-line-content>{#each line.segments as segment, segmentIndex (segmentIndex)}{@const href = linkResolver && segment.tokenType ? linkResolver(segment.text, segment.tokenType) : undefined}{#if href}<a {href} data-token-type={segment.tokenType} data-code-block-token-link>{segment.text}</a>{:else if segment.tokenType}<span data-token-type={segment.tokenType}>{segment.text}</span>{:else}{segment.text}{/if}{/each}</span>{#if i < highlightedLines.length - 1}{lineBreak}{/if}{/each}</code></pre>
+	{/if}
+
+	{#if showCopyButton}
+		<span class="copy-btn-slot">
+			<Button
+				variant="trigger"
+				size="sm"
+				type="button"
+				data-code-block-copy
+				onclick={handleCopy}
+				aria-label={copied ? 'Copied' : 'Copy code'}
+			>
+				{#if copied}
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<polyline points="20 6 9 17 4 12"></polyline>
+					</svg>
+					<span>Copied</span>
+				{:else}
+					<svg
+						width="16"
+						height="16"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+						<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+					</svg>
+					<span>Copy</span>
+				{/if}
+			</Button>
+		</span>
+	{/if}
+</div>
+
+<style>
+	[data-code-block] {
+		--dry-code-font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		--dry-code-line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
+		--dry-code-padding: var(--dry-space-4);
+		--dry-code-radius: var(--dry-radius-lg);
+
+		position: relative;
+		background: var(--dry-code-bg, #0d1117);
+		border: 1px solid var(--dry-code-border, #30363d);
+		border-radius: var(--dry-code-radius);
+		overflow: hidden;
+	}
+
+	[data-code-block-header] {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		padding: var(--dry-space-2) var(--dry-code-padding);
+		background: var(--dry-code-header-bg, #161b22);
+		border-bottom: 1px solid var(--dry-code-border, #30363d);
+	}
+
+	[data-code-block-language] {
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		font-family: var(--dry-font-sans);
+		color: var(--dry-code-header-color, #8b949e);
+		text-transform: lowercase;
+		user-select: none;
+	}
+
+	.copy-btn-slot {
+		position: absolute;
+		top: var(--dry-space-2);
+		right: var(--dry-space-2);
+		z-index: 1;
+		display: inline-grid;
+		color: var(--dry-code-copy-color, #8b949e);
+		background: var(--dry-code-bg, #0d1117);
+		border-radius: var(--dry-radius-md);
+		--dry-btn-color: var(--dry-code-copy-color, #8b949e);
+	}
+
+	[data-code-block]:hover .copy-btn-slot,
+	[data-code-block]:focus-within .copy-btn-slot,
+	[data-code-block][data-copied] .copy-btn-slot {
+		color: var(--dry-code-copy-hover-color, #e6edf3);
+		--dry-btn-color: var(--dry-code-copy-hover-color, #e6edf3);
+	}
+
+	[data-code-block]:has([data-code-block-header]) .copy-btn-slot {
+		top: calc(
+			var(--dry-space-2) + var(--dry-type-tiny-size, var(--dry-text-xs-size)) + var(--dry-space-2) *
+				2 + 1px
+		);
+	}
+
+	[data-code-block][data-single-line] {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+	}
+
+	[data-code-block][data-single-line] [data-code-block-header] {
+		grid-column: 1 / -1;
+	}
+
+	[data-code-block][data-single-line] .copy-btn-slot {
+		position: static;
+		align-self: center;
+		margin-right: var(--dry-space-2);
+	}
+
+	[data-code-block][data-single-line]:has(.copy-btn-slot) [data-code-block-pre] {
+		-webkit-mask-image: linear-gradient(to right, black calc(100% - 0.75rem), transparent);
+		mask-image: linear-gradient(to right, black calc(100% - 0.75rem), transparent);
+	}
+
+	[data-code-block]:not([data-single-line]):has(.copy-btn-slot) [data-code-block-pre] {
+		padding-right: calc(var(--dry-code-padding) + var(--dry-space-12));
+	}
+
+	[data-code-block-pre] {
+		margin: 0;
+		padding: var(--dry-code-padding);
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		text-align: left;
+	}
+
+	[data-code-block-code] {
+		display: block;
+		font-family: var(--dry-font-mono);
+		font-size: var(--dry-code-font-size);
+		line-height: var(--dry-code-line-height);
+		color: var(--dry-code-color, #e6edf3);
+		background: transparent;
+		padding: 0;
+		border-radius: 0;
+		white-space: pre;
+		tab-size: 2;
+	}
+
+	[data-code-block-code]:has([data-code-block-line-number]) {
+		display: grid;
+		grid-template-columns: 3ch 1fr;
+	}
+
+	[data-code-block-line-number] {
+		margin-right: var(--dry-space-3);
+		color: var(--dry-code-token-line-number, #484f58);
+		text-align: right;
+		user-select: none;
+	}
+
+	[data-token-type='comment'] {
+		color: var(--dry-code-token-comment, #6e7681);
+		font-style: italic;
+	}
+	[data-token-type='string'] {
+		color: var(--dry-code-token-string, #7ee787);
+	}
+	[data-token-type='keyword'] {
+		color: var(--dry-code-token-keyword, #c084fc);
+	}
+	[data-token-type='number'] {
+		color: var(--dry-code-token-number, #fb923c);
+	}
+	[data-token-type='tag'] {
+		color: var(--dry-code-token-tag, #60a5fa);
+	}
+	[data-token-type='component'] {
+		color: var(--dry-code-token-component, #fde68a);
+	}
+	[data-token-type='attribute'] {
+		color: var(--dry-code-token-attribute, #93c5fd);
+	}
+	[data-token-type='svelte-keyword'] {
+		color: var(--dry-code-token-svelte-keyword, #d8b4fe);
+	}
+	[data-token-type='rune'] {
+		color: var(--dry-code-token-rune, #f87171);
+	}
+	[data-token-type='function'] {
+		color: var(--dry-code-token-function, #facc15);
+	}
+	[data-token-type='type'] {
+		color: var(--dry-code-token-type, #86efac);
+	}
+	[data-token-type='operator'] {
+		color: var(--dry-code-token-operator, #8b949e);
+	}
+	[data-token-type='punctuation'] {
+		color: var(--dry-code-token-punctuation, #6e7681);
+	}
+
+	[data-code-block-token-link] {
+		text-decoration: none;
+		cursor: pointer;
+		border-radius: var(--dry-radius-sm);
+		transition: background var(--dry-duration-fast) var(--dry-ease-default);
+
+		&:hover {
+			background: color-mix(in srgb, currentColor 15%, transparent);
+		}
+	}
+</style>

package/src/code-block/code-block.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'CodeBlock',
+	description: 'Code display with optional line numbers and copy button',
+	category: 'display',
+	tags: ['code', 'syntax', 'pre', 'monospace', 'copy']
+};