@dryui/ui 3.0.0 → 4.0.1

package/src/command-palette/command-palette-list.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getCommandPaletteCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getCommandPaletteCtx();
+</script>
+
+<div
+	role="listbox"
+	data-command-palette-list
+	data-dry-stagger
+	id={ctx.listId}
+	aria-label="Commands"
+	class={className}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	[data-command-palette-list] {
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: var(--dry-space-1);
+		min-height: 0;
+		scrollbar-width: thin;
+		scrollbar-color: var(--dry-scrollbar-thumb) var(--dry-scrollbar-track);
+	}
+
+	[data-command-palette-list]::-webkit-scrollbar-track {
+		background: var(--dry-scrollbar-track);
+	}
+
+	[data-command-palette-list]::-webkit-scrollbar-thumb {
+		background: var(--dry-scrollbar-thumb);
+		border-radius: var(--dry-radius-full);
+		border: 2px solid transparent;
+		background-clip: content-box;
+	}
+
+	[data-command-palette-list]::-webkit-scrollbar-thumb:hover {
+		background: var(--dry-scrollbar-thumb-hover);
+		background-clip: content-box;
+	}
+</style>

package/src/command-palette/command-palette-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<div role="separator" data-command-palette-separator class={className} {...rest}></div>
+
+<style>
+	[data-command-palette-separator] {
+		height: 1px;
+		background: var(--dry-cmd-border);
+		margin: var(--dry-space-1) 0;
+	}
+</style>

package/src/command-palette/command-palette.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'CommandPalette',
+	description: 'Searchable command menu dialog',
+	category: 'overlay',
+	tags: ['modal', 'search', 'command', 'shortcut', 'palette', 'navigation', 'launcher']
+};

package/src/command-palette/context.svelte.ts

@@ -0,0 +1,19 @@
+import { createContext } from '@dryui/primitives';
+
+export interface CommandPaletteContext {
+	readonly open: boolean;
+	query: string;
+	activeItemId: string;
+	itemCount: number;
+	show: () => void;
+	close: () => void;
+	readonly listId: string;
+	readonly inputId: string;
+	registerItem: (id: string, el: HTMLElement) => void;
+	unregisterItem: (id: string) => void;
+	setActiveItem: (id: string) => void;
+	getItems: () => Map<string, HTMLElement>;
+}
+
+export const [setCommandPaletteCtx, getCommandPaletteCtx] =
+	createContext<CommandPaletteContext>('command-palette');

package/src/command-palette/index.ts

@@ -0,0 +1,35 @@
+export type {
+	CommandPaletteRootProps,
+	CommandPaletteInputProps,
+	CommandPaletteListProps,
+	CommandPaletteGroupProps,
+	CommandPaletteItemProps,
+	CommandPaletteEmptyProps,
+	CommandPaletteSeparatorProps
+} from '@dryui/primitives';
+
+import CommandPaletteRoot from './command-palette-dialog-root.svelte';
+import CommandPaletteInput from './command-palette-input.svelte';
+import CommandPaletteList from './command-palette-list.svelte';
+import CommandPaletteGroup from './command-palette-group.svelte';
+import CommandPaletteItem from './command-palette-item.svelte';
+import CommandPaletteEmpty from './command-palette-empty.svelte';
+import CommandPaletteSeparator from './command-palette-separator.svelte';
+
+export const CommandPalette: {
+	Root: typeof CommandPaletteRoot;
+	Input: typeof CommandPaletteInput;
+	List: typeof CommandPaletteList;
+	Group: typeof CommandPaletteGroup;
+	Item: typeof CommandPaletteItem;
+	Empty: typeof CommandPaletteEmpty;
+	Separator: typeof CommandPaletteSeparator;
+} = {
+	Root: CommandPaletteRoot,
+	Input: CommandPaletteInput,
+	List: CommandPaletteList,
+	Group: CommandPaletteGroup,
+	Item: CommandPaletteItem,
+	Empty: CommandPaletteEmpty,
+	Separator: CommandPaletteSeparator
+};

package/src/container/container.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'Container',
+	description: 'Centered content container with max-width',
+	category: 'layout',
+	tags: ['wrapper', 'center', 'max-width']
+};

package/src/container/container.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+		padding?: boolean;
+		children: Snippet;
+	}
+
+	let { size = 'lg', padding = true, class: className, children, ...rest }: Props = $props();
+</script>
+
+<div data-size={size} data-padding={padding || undefined} class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	div {
+		--dry-container-padding: var(--dry-space-4);
+
+		container-type: inline-size;
+		display: grid;
+		justify-content: center;
+	}
+
+	/* ── Sizes ─────────────────────────────────────────────────────────────────── */
+
+	div[data-size='sm'] {
+		grid-template-columns: minmax(0, 640px);
+	}
+
+	div[data-size='md'] {
+		grid-template-columns: minmax(0, 768px);
+	}
+
+	div[data-size='lg'] {
+		grid-template-columns: minmax(0, 1024px);
+	}
+
+	div[data-size='xl'] {
+		grid-template-columns: minmax(0, 1280px);
+	}
+
+	div[data-size='full'] {
+		grid-template-columns: minmax(0, 1fr);
+	}
+
+	/* ── Padding ───────────────────────────────────────────────────────────────── */
+
+	div[data-padding] {
+		padding-inline: var(--dry-container-padding);
+	}
+
+	@container (max-width: 640px) {
+		div[data-padding] {
+			--dry-container-padding: var(--dry-space-4);
+		}
+	}
+
+	@container (min-width: 641px) {
+		div[data-padding] {
+			--dry-container-padding: var(--dry-space-6);
+		}
+	}
+</style>

package/src/container/index.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+	size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+	padding?: boolean;
+	children: Snippet;
+}
+
+export { default as Container } from './container.svelte';

package/src/context-menu/context-menu-content.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		createDismiss,
+		createMenuNavigation,
+		tryShowPopover,
+		tryHidePopover
+	} from '@dryui/primitives';
+	import { getContextMenuCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, style, ...rest }: Props = $props();
+
+	const ctx = getContextMenuCtx();
+
+	let el = $state<HTMLDivElement>();
+
+	const menu = createMenuNavigation({
+		container: () => el ?? null,
+		orientation: 'vertical'
+	});
+
+	$effect(() => {
+		const node = el;
+		if (!node) return;
+		if (ctx.open) {
+			node.style.position = 'fixed';
+			node.style.left = `${ctx.position.x}px`;
+			node.style.top = `${ctx.position.y}px`;
+			const wasOpen = node.matches(':popover-open');
+			tryShowPopover(node);
+			if (!wasOpen) menu.focusFirst();
+		} else {
+			tryHidePopover(node);
+		}
+	});
+
+	createDismiss({
+		enabled: () => ctx.open,
+		onDismiss: () => ctx.close(),
+		contentEl: () => el ?? null,
+		preventDefaultOnEscape: true
+	});
+</script>
+
+<div
+	bind:this={el}
+	popover="manual"
+	role="menu"
+	tabindex="-1"
+	id={ctx.contentId}
+	aria-labelledby={ctx.triggerId}
+	data-context-menu-content
+	data-dry-stagger
+	data-state={ctx.open ? 'open' : 'closed'}
+	class={className}
+	{style}
+	onkeydown={(e) => menu.handleKeydown(e)}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	/* outer: var(--dry-radius-popover); children inside the padded region use var(--dry-radius-nested-popover). */
+	[data-context-menu-content] {
+		/* Reset UA popover defaults */
+		inset: unset;
+		margin: 0;
+
+		--dry-menu-bg: var(--dry-color-bg-overlay);
+		--dry-menu-border: var(--dry-color-stroke-weak);
+		--dry-menu-radius: var(--dry-radius-popover);
+		--dry-menu-shadow: var(--dry-shadow-lg);
+		--dry-menu-padding: var(--dry-space-1);
+		--dry-menu-item-padding: var(--dry-space-2_5) var(--dry-space-2);
+
+		display: grid;
+		grid-template-columns: minmax(12rem, max-content);
+		background: var(--dry-menu-bg);
+		color: var(--dry-color-text-strong);
+		border: 1px solid var(--dry-menu-border);
+		border-radius: var(--dry-menu-radius);
+		box-shadow: var(--dry-menu-shadow);
+		font-family: var(--dry-font-sans);
+		padding: var(--dry-menu-padding);
+
+		transition:
+			opacity var(--dry-duration-fast) var(--dry-ease-emphasized),
+			transform var(--dry-duration-fast) var(--dry-ease-emphasized);
+	}
+
+	[data-context-menu-content]:not(:popover-open) {
+		display: none;
+	}
+
+	[data-context-menu-content]:popover-open {
+		display: grid;
+		opacity: 1;
+		transform: scale(1) translateY(0);
+	}
+
+	@starting-style {
+		[data-context-menu-content]:popover-open {
+			opacity: 0;
+			transform: scale(var(--dry-motion-scale-enter))
+				translateY(calc(var(--dry-motion-distance-xs) * -1));
+		}
+	}
+</style>

package/src/context-menu/context-menu-group.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuGroup from '../internal/menu-group.svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<MenuGroup {className} {...rest}>
+	{@render children()}
+</MenuGroup>

package/src/context-menu/context-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getContextMenuCtx } from './context.svelte.js';
+	import MenuItem from '../internal/menu-item.svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		disabled?: boolean;
+		children: Snippet;
+	}
+
+	let { class: className, disabled, children, onclick, onkeydown, ...rest }: Props = $props();
+
+	const ctx = getContextMenuCtx();
+</script>
+
+<MenuItem
+	data-context-menu-item
+	{className}
+	close={ctx.close}
+	{disabled}
+	{onclick}
+	{onkeydown}
+	{...rest}
+>
+	{@render children()}
+</MenuItem>

package/src/context-menu/context-menu-label.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuLabel from '../internal/menu-label.svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<MenuLabel data-context-menu-label {className} {...rest}>
+	{@render children()}
+</MenuLabel>

package/src/context-menu/context-menu-root.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContextMenuCtx } from './context.svelte.js';
+	import { createPositionedMenuRootState } from '../internal/menu-root-state.svelte.js';
+
+	interface Props {
+		open?: boolean;
+		children: Snippet;
+	}
+
+	let { open = $bindable(false), children }: Props = $props();
+	const uid = $props.id();
+
+	setContextMenuCtx(
+		createPositionedMenuRootState({
+			idBase: 'context-menu',
+			uid,
+			getOpen: () => open,
+			setOpen: (value) => {
+				open = value;
+			}
+		})
+	);
+</script>
+
+{@render children()}

package/src/context-menu/context-menu-separator.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import MenuSeparator from '../internal/menu-separator.svelte';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {}
+
+	let { class: className, ...rest }: Props = $props();
+</script>
+
+<MenuSeparator data-context-menu-separator {className} {...rest}></MenuSeparator>

package/src/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getContextMenuCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { children, ...rest }: Props = $props();
+
+	const ctx = getContextMenuCtx();
+
+	let triggerEl = $state<HTMLDivElement>();
+
+	$effect(() => {
+		if (triggerEl) {
+			ctx.triggerEl = triggerEl;
+		}
+	});
+</script>
+
+<div
+	bind:this={triggerEl}
+	id={ctx.triggerId}
+	data-state={ctx.open ? 'open' : 'closed'}
+	oncontextmenu={(e) => {
+		e.preventDefault();
+		ctx.position = { x: e.clientX, y: e.clientY };
+		ctx.show();
+	}}
+	{...rest}
+>
+	{@render children()}
+</div>

package/src/context-menu/context-menu.meta.ts

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+	name: 'ContextMenu',
+	description: 'Right-click menu with actions',
+	category: 'overlay',
+	tags: ['menu', 'right-click', 'context', 'actions']
+};

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

@@ -0,0 +1,7 @@
+import { createContext } from '@dryui/primitives';
+import type { PositionedMenuRootState } from '../internal/menu-root-state.svelte.js';
+
+export interface ContextMenuContext extends PositionedMenuRootState {}
+
+export const [setContextMenuCtx, getContextMenuCtx] =
+	createContext<ContextMenuContext>('context-menu');

package/src/context-menu/index.ts

@@ -0,0 +1,35 @@
+export type {
+	ContextMenuRootProps,
+	ContextMenuTriggerProps,
+	ContextMenuContentProps,
+	ContextMenuItemProps,
+	ContextMenuSeparatorProps,
+	ContextMenuGroupProps,
+	ContextMenuLabelProps
+} from '@dryui/primitives';
+
+import ContextMenuRoot from './context-menu-root.svelte';
+import ContextMenuTrigger from './context-menu-trigger.svelte';
+import ContextMenuContent from './context-menu-content.svelte';
+import ContextMenuItem from './context-menu-item.svelte';
+import ContextMenuSeparator from './context-menu-separator.svelte';
+import ContextMenuGroup from './context-menu-group.svelte';
+import ContextMenuLabel from './context-menu-label.svelte';
+
+export const ContextMenu: {
+	Root: typeof ContextMenuRoot;
+	Trigger: typeof ContextMenuTrigger;
+	Content: typeof ContextMenuContent;
+	Item: typeof ContextMenuItem;
+	Separator: typeof ContextMenuSeparator;
+	Group: typeof ContextMenuGroup;
+	Label: typeof ContextMenuLabel;
+} = {
+	Root: ContextMenuRoot,
+	Trigger: ContextMenuTrigger,
+	Content: ContextMenuContent,
+	Item: ContextMenuItem,
+	Separator: ContextMenuSeparator,
+	Group: ContextMenuGroup,
+	Label: ContextMenuLabel
+};

package/src/data-grid/context.svelte.ts

@@ -0,0 +1,28 @@
+import { createContext } from '@dryui/primitives';
+
+export interface DataGridContext<T = unknown> {
+	readonly sortColumn: string | null;
+	readonly sortDirection: 'asc' | 'desc';
+	readonly page: number;
+	readonly pageSize: number;
+	readonly totalItems: number;
+	readonly totalPages: number;
+	readonly filteredItems: T[];
+	readonly pagedItems: T[];
+	sort: (column: string) => void;
+	setPage: (page: number) => void;
+	setFilter: (column: string, value: string) => void;
+	getFilter: (column: string) => string;
+	readonly selectable: boolean;
+	readonly selectedItems: string[];
+	toggleSelect: (id: string) => void;
+	toggleSelectAll: () => void;
+	isSelected: (id: string) => boolean;
+	clearSelection: () => void;
+	readonly expandedRows: string[];
+	toggleExpand: (id: string) => void;
+	isExpanded: (id: string) => boolean;
+	readonly columnWidths: Record<string, number>;
+	setColumnWidth: (key: string, width: number) => void;
+}
+export const [setDataGridCtx, getDataGridCtx] = createContext<DataGridContext>('data-grid');

package/src/data-grid/data-grid-body.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" generics="T = unknown">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDataGridCtx } from './context.svelte.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> {
+		children: Snippet<[{ items: T[]; page: number }]>;
+	}
+
+	let { class: className, children, ...rest }: Props = $props();
+
+	const ctx = getDataGridCtx();
+</script>
+
+<tbody data-dg-body class={className} {...rest}>
+	{@render children({ items: ctx.pagedItems as T[], page: ctx.page })}
+</tbody>

package/src/data-grid/data-grid-button-expand-trigger.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import { getDataGridCtx } from './context.svelte.js';
+
+	interface Props extends HTMLAttributes<HTMLButtonElement> {
+		rowId: string;
+		children?: Snippet;
+	}
+
+	let { rowId, children, ...rest }: Props = $props();
+
+	const ctx = getDataGridCtx();
+
+	let expanded = $derived(ctx.isExpanded(rowId));
+</script>
+
+<Button
+	variant="trigger"
+	size="icon-sm"
+	type="button"
+	data-expanded={expanded ? '' : undefined}
+	aria-expanded={expanded}
+	aria-label={expanded ? 'Collapse row' : 'Expand row'}
+	onclick={() => ctx.toggleExpand(rowId)}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<span class="chevron" class:open={expanded} aria-hidden="true">&#9654;</span>
+	{/if}
+</Button>
+
+<style>
+	.chevron {
+		display: inline-grid;
+		transition: transform var(--dry-duration-fast) var(--dry-ease-default);
+	}
+
+	.chevron.open {
+		transform: rotate(90deg);
+	}
+</style>