@dryui/ui 3.0.0 → 4.0.0

package/src/shader-canvas/shader-canvas.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		ShaderCanvas as ShaderCanvasPrimitive,
+		type ShaderCanvasProps as PrimitiveShaderCanvasProps
+	} from '@dryui/primitives/shader-canvas';
+	import { extractThemeColor } from '../internal/motion.js';
+	import { PRESETS } from './presets.js';
+
+	interface Props 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?:
+			| 'gradient-flow'
+			| 'particle-field'
+			| 'wave-distortion'
+			| 'mesh-gradient'
+			| 'liquid-metal';
+		themeColors?: boolean;
+		aspectRatio?: string;
+	}
+
+	let {
+		fragmentShader,
+		vertexShader,
+		autoUniforms = { time: true, resolution: true },
+		uniforms = {},
+		pixelRatio,
+		fps,
+		paused = $bindable(false),
+		fallback,
+		children: childSnippet,
+		preset,
+		themeColors = false,
+		aspectRatio,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let containerEl = $state<HTMLDivElement>();
+	let themeUniforms = $state<Record<string, number[]>>({});
+
+	const resolvedShader = $derived.by((): string => {
+		if (fragmentShader) return fragmentShader;
+		if (preset) {
+			const presetShader = PRESETS[preset];
+			if (presetShader) return presetShader;
+		}
+		return PRESETS['gradient-flow']!;
+	});
+
+	const mergedUniforms = $derived({ ...themeUniforms, ...uniforms });
+	const effectiveFps = $derived(fps ?? 30);
+
+	$effect(() => {
+		if (!containerEl) return;
+		if (aspectRatio) {
+			containerEl.style.setProperty('--_ratio', aspectRatio);
+		} else {
+			containerEl.style.removeProperty('--_ratio');
+		}
+	});
+
+	$effect(() => {
+		if (themeColors && containerEl) {
+			try {
+				const primary = extractThemeColor('--dry-color-fill-brand', containerEl);
+				const secondary = extractThemeColor('--dry-color-bg-raised', containerEl);
+				themeUniforms = {
+					u_color_primary: primary,
+					u_color_secondary: secondary
+				};
+			} catch {
+				// Fallback: no theme colors available
+			}
+		}
+	});
+</script>
+
+<div bind:this={containerEl} data-shader-canvas-root class={className}>
+	<ShaderCanvasPrimitive
+		fragmentShader={resolvedShader}
+		{autoUniforms}
+		uniforms={mergedUniforms}
+		bind:paused
+		data-shader-canvas
+		{...Object.fromEntries(
+			Object.entries({ vertexShader, pixelRatio, fps: effectiveFps, fallback }).filter(
+				([, v]) => v !== undefined
+			)
+		)}
+	>
+		{#if childSnippet}
+			{@render childSnippet()}
+		{/if}
+	</ShaderCanvasPrimitive>
+</div>
+
+<style>
+	[data-shader-canvas-root] {
+		display: grid;
+		position: relative;
+		overflow: hidden;
+		border-radius: inherit;
+		aspect-ratio: var(--_ratio);
+	}
+</style>

package/src/shimmer/index.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface ShimmerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+	color?: string;
+	duration?: number;
+	children: Snippet;
+}
+
+export { default as Shimmer } from './shimmer.svelte';

package/src/shimmer/shimmer.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Shimmer',
+	description: 'Warm highlight sweep that travels across wrapped text and inline icons together',
+	category: 'visual',
+	tags: ['shimmer', 'shine', 'highlight', 'text', 'icon', 'animation', 'effect']
+};

package/src/shimmer/shimmer.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { observeInViewport, observePageVisibility } from '@dryui/primitives';
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+		color?: string;
+		duration?: number;
+		children: Snippet;
+	}
+
+	let {
+		color = 'var(--dry-color-fill-brand)',
+		duration = 3,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	let el = $state<HTMLSpanElement>();
+
+	$effect(() => {
+		if (!el) return;
+		el.style.setProperty('--dry-shimmer-color', color);
+		el.style.setProperty('--dry-shimmer-duration', `${duration}s`);
+	});
+
+	$effect(() => {
+		if (!el) return;
+		const node = el;
+		let onScreen = true;
+		let tabVisible = true;
+
+		const apply = () => {
+			if (onScreen && tabVisible) node.dataset.active = '';
+			else delete node.dataset.active;
+		};
+
+		const unsubscribeViewport = observeInViewport(
+			node,
+			(inView) => {
+				onScreen = inView;
+				apply();
+			},
+			{ rootMargin: '100px' }
+		);
+		const unsubscribeVisibility = observePageVisibility((visible) => {
+			tabVisible = visible;
+			apply();
+		});
+		return () => {
+			unsubscribeViewport();
+			unsubscribeVisibility();
+		};
+	});
+</script>
+
+<span bind:this={el} data-shimmer class={className} {...rest}>
+	<span data-shimmer-base>
+		{@render children()}
+	</span>
+	<span data-shimmer-streak aria-hidden="true">
+		{@render children()}
+	</span>
+</span>
+
+<style>
+	[data-shimmer] {
+		display: grid;
+		grid-template-columns: var(--dry-shimmer-outer-columns, max-content);
+		grid-column: var(--dry-shimmer-column, auto);
+		justify-self: var(--dry-shimmer-justify-self, auto);
+		isolation: isolate;
+		content-visibility: auto;
+		contain-intrinsic-size: auto;
+	}
+
+	[data-shimmer-base],
+	[data-shimmer-streak] {
+		grid-area: 1 / 1;
+		display: grid;
+		grid-template-columns: var(--dry-shimmer-content-columns, none);
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		align-items: center;
+		gap: var(--dry-shimmer-gap, var(--dry-space-2));
+	}
+
+	[data-shimmer-streak] {
+		color: var(--dry-shimmer-color, var(--dry-color-fill-brand));
+		pointer-events: none;
+		-webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
+		mask-image: linear-gradient(100deg, transparent 40%, #000 50%, transparent 60%);
+		-webkit-mask-size: 200% 100%;
+		mask-size: 200% 100%;
+		-webkit-mask-repeat: no-repeat;
+		mask-repeat: no-repeat;
+		animation: shimmer-sweep var(--dry-shimmer-duration, 3s) linear infinite;
+		animation-play-state: paused;
+	}
+
+	[data-shimmer][data-active] [data-shimmer-streak] {
+		animation-play-state: running;
+		will-change: mask-position;
+	}
+
+	@keyframes shimmer-sweep {
+		from {
+			-webkit-mask-position: 150% 0;
+			mask-position: 150% 0;
+		}
+		to {
+			-webkit-mask-position: -50% 0;
+			mask-position: -50% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-shimmer-streak] {
+			animation: none;
+			-webkit-mask-position: 50% 0;
+			mask-position: 50% 0;
+		}
+	}
+</style>

package/src/sidebar/context.svelte.ts

@@ -0,0 +1,10 @@
+import { createContext } from '@dryui/primitives';
+
+interface SidebarContext {
+	readonly collapsed: boolean;
+	readonly side: 'left' | 'right';
+	toggle: () => void;
+	expand: () => void;
+	collapse: () => void;
+}
+export const [setSidebarCtx, getSidebarCtx] = createContext<SidebarContext>('sidebar');

package/src/sidebar/index.ts

@@ -0,0 +1,66 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
+
+export interface SidebarRootProps extends HTMLAttributes<HTMLElement> {
+	collapsed?: boolean;
+	side?: 'left' | 'right';
+	children: Snippet;
+}
+
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+export interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+export interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {
+	children: Snippet;
+}
+
+export interface SidebarItemProps extends HTMLAnchorAttributes {
+	active?: boolean;
+	children: Snippet;
+}
+
+export interface SidebarTriggerProps extends HTMLButtonAttributes {
+	children?: Snippet;
+}
+
+import SidebarRoot from './sidebar-root.svelte';
+import SidebarHeader from './sidebar-header.svelte';
+import SidebarContent from './sidebar-content.svelte';
+import SidebarFooter from './sidebar-footer.svelte';
+import SidebarGroup from './sidebar-group.svelte';
+import SidebarGroupLabel from './sidebar-group-label.svelte';
+import SidebarItem from './sidebar-item.svelte';
+import SidebarTrigger from './sidebar-trigger-button.svelte';
+
+export const Sidebar: {
+	Root: typeof SidebarRoot;
+	Header: typeof SidebarHeader;
+	Content: typeof SidebarContent;
+	Footer: typeof SidebarFooter;
+	Group: typeof SidebarGroup;
+	GroupLabel: typeof SidebarGroupLabel;
+	Item: typeof SidebarItem;
+	Trigger: typeof SidebarTrigger;
+} = {
+	Root: SidebarRoot,
+	Header: SidebarHeader,
+	Content: SidebarContent,
+	Footer: SidebarFooter,
+	Group: SidebarGroup,
+	GroupLabel: SidebarGroupLabel,
+	Item: SidebarItem,
+	Trigger: SidebarTrigger
+};

package/src/sidebar/sidebar-content.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-sidebar-content class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-sidebar-content] {
+		grid-row: 2;
+		display: grid;
+		align-items: start;
+		gap: var(--dry-sidebar-content-gap, var(--dry-space-3));
+		padding: var(--dry-sidebar-content-padding);
+		min-height: 0;
+		overflow: var(--dry-sidebar-content-overflow, auto);
+		scrollbar-gutter: var(--dry-sidebar-content-scrollbar-gutter, auto);
+		scrollbar-width: var(--dry-sidebar-content-scrollbar-width, thin);
+		scrollbar-color: var(--dry-scrollbar-thumb) transparent;
+		transition: scrollbar-color var(--dry-duration-normal) var(--dry-ease-emphasized);
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
+		&::-webkit-scrollbar-thumb {
+			background: var(--dry-scrollbar-thumb);
+			border: 0;
+			background-clip: border-box;
+			border-radius: var(--dry-radius-full);
+		}
+		&::-webkit-scrollbar-thumb:hover {
+			background: var(--dry-scrollbar-thumb-hover);
+		}
+	}
+</style>

package/src/sidebar/sidebar-footer.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-sidebar-footer class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-sidebar-footer] {
+		grid-row: 3;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		align-content: start;
+		justify-items: stretch;
+		gap: var(--dry-space-2);
+		padding-block: var(--dry-sidebar-footer-padding-y, var(--dry-space-3));
+		padding-inline: var(--dry-sidebar-content-padding, 0px);
+		border-top: 1px solid var(--dry-sidebar-border);
+	}
+</style>

package/src/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getSidebarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getSidebarCtx();
+</script>
+
+<div
+	data-sidebar-group-label
+	data-collapsed={ctx.collapsed || undefined}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-sidebar-group-label] {
+		position: sticky;
+		top: calc(-1 * var(--dry-sidebar-content-padding));
+		z-index: 1;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		align-items: center;
+		margin-inline: calc(-1 * var(--dry-sidebar-content-padding));
+		min-height: var(--dry-sidebar-group-label-min-height, var(--dry-space-8));
+		padding-block: var(--dry-sidebar-group-label-padding-y, var(--dry-space-3))
+			var(--dry-sidebar-group-label-padding-bottom, var(--dry-space-2));
+		padding-inline: calc(var(--dry-sidebar-content-padding) + var(--dry-sidebar-item-padding-x));
+		background: var(--dry-sidebar-bg, var(--dry-color-bg-raised));
+		font-size: var(--dry-type-tiny-size, var(--dry-text-xs-size));
+		font-weight: var(--dry-sidebar-group-label-weight, 700);
+		letter-spacing: var(--dry-sidebar-group-label-letter-spacing, 0.12em);
+		line-height: var(--dry-sidebar-group-label-line-height, 1.1);
+		text-transform: uppercase;
+		color: var(--dry-sidebar-group-label-color, var(--dry-color-text-weak));
+	}
+</style>

package/src/sidebar/sidebar-group.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div role="group" data-sidebar-group class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-sidebar-group] {
+		display: grid;
+		gap: var(--dry-sidebar-group-gap, var(--dry-space-1));
+		padding-block: var(--dry-sidebar-group-padding-y, var(--dry-space-2));
+	}
+
+	[data-sidebar-group]:not(:first-child) {
+		margin-block-start: var(--dry-sidebar-group-stack-gap, var(--dry-space-1));
+		padding-block-start: var(--dry-sidebar-group-stack-padding, var(--dry-space-4));
+		border-top: 1px solid
+			var(--dry-sidebar-group-divider, var(--dry-sidebar-border, var(--dry-color-stroke-weak)));
+	}
+</style>

package/src/sidebar/sidebar-header.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-sidebar-header class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	[data-sidebar-header] {
+		grid-row: 1;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		align-content: start;
+		justify-items: start;
+		gap: var(--dry-sidebar-header-gap, var(--dry-space-1));
+		padding: var(
+			--dry-sidebar-header-padding,
+			var(--dry-space-5) var(--dry-space-6) var(--dry-space-4)
+		);
+		border-bottom: 1px solid var(--dry-sidebar-border, var(--dry-color-stroke-weak));
+		color: var(--dry-sidebar-header-color, var(--dry-color-text-strong));
+		font-size: var(--dry-sidebar-header-size, var(--dry-text-base-size, 1rem));
+		font-weight: var(--dry-sidebar-header-weight, 600);
+		line-height: var(--dry-sidebar-header-line-height, 1.2);
+	}
+</style>

package/src/sidebar/sidebar-item.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAnchorAttributes {
+		active?: boolean;
+		children: Snippet;
+	}
+
+	let { href, active = false, class: className, children, ...rest }: Props = $props();
+</script>
+
+<a {href} data-active={active || undefined} data-sidebar-item class={className} {...rest}>
+	{@render children()}
+</a>
+
+<style>
+	[data-sidebar-item] {
+		position: relative;
+		display: grid;
+		grid-template-columns: max-content minmax(0, 1fr) max-content;
+		align-items: center;
+		gap: var(--dry-space-3);
+		min-height: var(--dry-sidebar-item-height, var(--dry-space-12));
+		padding: var(--dry-sidebar-item-padding-y, var(--dry-space-3)) var(--dry-sidebar-item-padding-x);
+		color: var(--dry-color-text-strong);
+		text-decoration: none;
+		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
+		transition:
+			background var(--dry-duration-fast) var(--dry-ease-default),
+			color var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	[data-sidebar-item]:hover {
+		background: var(--dry-color-fill);
+	}
+
+	[data-sidebar-item][data-active] {
+		background: var(--dry-sidebar-active-bg, var(--dry-color-fill-hover));
+		color: var(--dry-sidebar-active-color, var(--dry-color-text-strong));
+		font-weight: var(--dry-sidebar-active-weight, inherit);
+	}
+
+	[data-sidebar-item][data-active]::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		inset-inline-end: calc(100% - var(--dry-sidebar-active-indicator-width, 4px));
+		background: var(--dry-sidebar-active-indicator-color, var(--dry-color-stroke-selected));
+	}
+
+	[data-sidebar-item]:focus-visible {
+		outline: var(--dry-focus-ring);
+		outline-offset: 2px;
+	}
+</style>

package/src/sidebar/sidebar-root.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setSidebarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLElement> {
+		collapsed?: boolean;
+		side?: 'left' | 'right';
+		children: Snippet;
+	}
+
+	let {
+		collapsed = $bindable(false),
+		side = 'left',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+
+	setSidebarCtx({
+		get collapsed() {
+			return collapsed;
+		},
+		get side() {
+			return side;
+		},
+		toggle() {
+			collapsed = !collapsed;
+		},
+		expand() {
+			collapsed = false;
+		},
+		collapse() {
+			collapsed = true;
+		}
+	});
+</script>
+
+<aside
+	data-sidebar
+	data-state={collapsed ? 'collapsed' : 'expanded'}
+	data-side={side}
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</aside>
+
+<style>
+	[data-sidebar] {
+		--dry-sidebar-item-padding-x: var(--dry-space-6);
+		--dry-sidebar-content-padding: 0px;
+
+		display: grid;
+		grid-template-columns: var(--dry-sidebar-width, 320px);
+		grid-template-rows: auto 1fr auto;
+		height: 100%;
+		overflow: var(--dry-sidebar-overflow, hidden);
+		background: var(--dry-sidebar-bg, var(--dry-chrome-bg, var(--dry-color-bg-raised)));
+		font-family: var(--dry-font-sans);
+	}
+
+	[data-sidebar][data-side='left'] {
+		border-inline-end: 1px solid
+			var(--dry-sidebar-border, var(--dry-chrome-border, var(--dry-color-stroke-weak)));
+	}
+
+	[data-sidebar][data-side='right'] {
+		border-inline-start: 1px solid
+			var(--dry-sidebar-border, var(--dry-chrome-border, var(--dry-color-stroke-weak)));
+	}
+
+	[data-sidebar][data-state='collapsed'] {
+		grid-template-columns: var(--dry-sidebar-collapsed-width, 4.5rem);
+	}
+</style>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getSidebarCtx } from './context.svelte.js';
+
+	interface Props extends HTMLButtonAttributes {
+		children?: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getSidebarCtx();
+</script>
+
+<Button
+	variant="outline"
+	type="button"
+	aria-label="Toggle sidebar"
+	aria-expanded={!ctx.collapsed}
+	data-sidebar-trigger
+	data-side={ctx.side}
+	{...rest}
+	onclick={() => ctx.toggle()}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</Button>

package/src/sidebar/sidebar.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Sidebar',
+	description: 'Collapsible side navigation panel',
+	category: 'navigation',
+	tags: ['sidebar', 'navigation', 'panel', 'collapsible']
+};