@dryui/ui 1.1.3 → 1.1.5

package/dist/border-beam/border-beam.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import {
+		BorderBeam as BorderBeamPrimitive,
+		type BorderBeamProps
+	} from '@dryui/primitives/border-beam';
+
+	let {
+		size,
+		colorVariant,
+		theme,
+		staticColors,
+		duration,
+		active,
+		borderRadius,
+		brightness,
+		saturation,
+		hueRange,
+		strength,
+		onActivate,
+		onDeactivate,
+		children,
+		...rest
+	}: BorderBeamProps = $props();
+</script>
+
+<BorderBeamPrimitive
+	{size}
+	{colorVariant}
+	{theme}
+	{staticColors}
+	{duration}
+	{active}
+	{borderRadius}
+	{brightness}
+	{saturation}
+	{hueRange}
+	{strength}
+	{onActivate}
+	{onDeactivate}
+	{children}
+	{...rest}
+/>

package/dist/border-beam/border-beam.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type BorderBeamProps } from '@dryui/primitives/border-beam';
+declare const BorderBeam: import("svelte").Component<BorderBeamProps, {}, "">;
+type BorderBeam = ReturnType<typeof BorderBeam>;
+export default BorderBeam;

package/dist/border-beam/index.d.ts

@@ -0,0 +1,3 @@
+import type { BorderBeamProps, BorderBeamColorVariant, BorderBeamSize, BorderBeamTheme } from '@dryui/primitives/border-beam';
+export type { BorderBeamProps, BorderBeamColorVariant, BorderBeamSize, BorderBeamTheme };
+export { default as BorderBeam } from './border-beam.svelte';

package/dist/border-beam/index.js

@@ -0,0 +1 @@
+export { default as BorderBeam } from './border-beam.svelte';

package/dist/button/button.svelte

@@ -410,7 +410,8 @@
 			--_dry-btn-color: var(--dry-btn-color, var(--dry-color-text-strong));
 		}
 
-		&[aria-pressed='true'] {
+		&[aria-pressed='true'],
+		&[aria-pressed='true']:hover:not([data-disabled]) {
 			--_dry-btn-bg: var(--dry-btn-bg, var(--dry-color-fill-brand));
 			--_dry-btn-color: var(--dry-btn-color, var(--dry-color-on-brand));
 		}

package/dist/dialog/dialog-body.svelte

@@ -17,7 +17,7 @@
 	[data-dialog-body] {
 		--dry-section-padding: var(--dry-dialog-padding);
 		padding: var(--dry-section-padding);
-		overflow-y: auto;
+		overflow-y: var(--dry-dialog-body-overflow-y, auto);
 		min-height: 0;
 	}
 </style>

package/dist/dialog/dialog-content.svelte

@@ -46,6 +46,10 @@
 	[data-dialog-content] {
 		position: fixed;
 		inset: 0;
+		/* dryui-allow width */
+		width: 100vw;
+		/* dryui-allow width */
+		max-width: none;
 		height: 100vh;
 		height: 100dvh;
 		max-height: none;
@@ -53,9 +57,9 @@
 		background: transparent;
 		color: var(--dry-color-text-strong);
 		padding: 0;
-		margin: 0;
 		display: grid;
 		grid-template-columns: min(90vw, var(--dry-dialog-max-width, 32rem));
+		place-content: center;
 		place-items: center;
 		overflow: visible;
 	}
@@ -89,9 +93,9 @@
 		color: var(--dry-color-text-strong);
 		box-shadow: var(--dry-dialog-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
 		padding: 0;
-		max-height: 85vh;
+		max-block-size: var(--dry-dialog-max-block-size, 85vh);
 		display: grid;
-		overflow: auto;
+		overflow: var(--dry-dialog-overflow, auto);
 
 		transition:
 			opacity var(--dry-duration-normal) var(--dry-ease-spring-snappy),

package/dist/drawer/drawer-body.svelte

@@ -16,6 +16,7 @@
 
 <style>
 	[data-drawer-body] {
+		grid-row: 2;
 		padding: var(--dry-space-12) var(--dry-space-8);
 		overflow-y: auto;
 		min-height: 0;

package/dist/drawer/drawer-dialog-content.svelte

@@ -14,10 +14,15 @@
 	let dialogEl = $state<HTMLDialogElement>();
 
 	$effect(() => {
-		if (ctx.open && dialogEl && !dialogEl.open) {
+		if (!dialogEl) return;
+
+		// Native <dialog> applies a max-width that leaves a strip beside edge drawers.
+		dialogEl.style.setProperty('max-width', 'none');
+
+		if (ctx.open && !dialogEl.open) {
 			dialogEl.showModal();
 		}
-		if (!ctx.open && dialogEl?.open) {
+		if (!ctx.open && dialogEl.open) {
 			dialogEl.close();
 		}
 	});
@@ -55,7 +60,6 @@
 		background: transparent;
 		color: var(--dry-color-text-strong);
 		padding: 0;
-		margin: 0;
 		box-sizing: border-box;
 		display: grid;
 		grid-template-columns: minmax(0, 1fr);
@@ -102,6 +106,8 @@
 		--dry-drawer-bg: var(--dry-color-bg-overlay);
 		--dry-drawer-border: var(--dry-color-stroke-weak);
 		--dry-drawer-size: 25rem;
+		--_drawer-rest-transform: translateX(0);
+		--_drawer-enter-transform: translateX(100%);
 
 		background: var(--dry-drawer-bg);
 		color: var(--dry-color-text-strong);
@@ -110,6 +116,9 @@
 		display: grid;
 		grid-template-rows: max-content minmax(0, 1fr) max-content;
 		overflow: hidden;
+		opacity: 1;
+		transform: var(--_drawer-rest-transform);
+		will-change: transform, opacity;
 
 		transition:
 			transform var(--dry-duration-slow) var(--dry-ease-spring-snappy),
@@ -123,44 +132,37 @@
 	}
 
 	[data-drawer-content][data-side='left'] [data-drawer-panel] {
+		--_drawer-enter-transform: translateX(-100%);
 		grid-column: 1;
 		height: 100%;
 		border-right: 1px solid var(--dry-drawer-border);
 	}
 
 	[data-drawer-content][data-side='top'] [data-drawer-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(-100%);
 		grid-row: 1;
 		height: var(--dry-drawer-size);
 		border-bottom: 1px solid var(--dry-drawer-border);
 	}
 
 	[data-drawer-content][data-side='bottom'] [data-drawer-panel] {
+		--_drawer-rest-transform: translateY(0);
+		--_drawer-enter-transform: translateY(100%);
 		grid-row: 2;
 		height: var(--dry-drawer-size);
 		border-top: 1px solid var(--dry-drawer-border);
 	}
 
 	@starting-style {
-		[data-drawer-content][data-side='right'][open] [data-drawer-panel] {
-			opacity: 0;
-			transform: translateX(100%);
-		}
-		[data-drawer-content][data-side='left'][open] [data-drawer-panel] {
-			opacity: 0;
-			transform: translateX(-100%);
-		}
-		[data-drawer-content][data-side='top'][open] [data-drawer-panel] {
-			opacity: 0;
-			transform: translateY(-100%);
-		}
-		[data-drawer-content][data-side='bottom'][open] [data-drawer-panel] {
+		[data-drawer-content][open] [data-drawer-panel] {
 			opacity: 0;
-			transform: translateY(100%);
+			transform: var(--_drawer-enter-transform);
 		}
 	}
 
 	[data-drawer-content][data-state='open'] [data-drawer-panel] {
 		opacity: 1;
-		transform: translate(0);
+		transform: var(--_drawer-rest-transform);
 	}
 </style>

package/dist/drawer/drawer-footer.svelte

@@ -15,6 +15,7 @@
 
 <style>
 	[data-drawer-footer] {
+		grid-row: 3;
 		padding: var(--dry-space-6) var(--dry-space-8);
 		border-top: 1px solid var(--dry-drawer-border);
 		display: grid;

package/dist/drawer/drawer-header.svelte

@@ -18,6 +18,7 @@
 
 <style>
 	[data-drawer-header] {
+		grid-row: 1;
 		padding: var(--dry-space-6) var(--dry-space-8);
 		border-bottom: 1px solid var(--dry-drawer-border);
 	}

package/dist/index.d.ts

@@ -47,7 +47,7 @@ export type { MultiSelectComboboxRootProps, MultiSelectComboboxInputProps, Multi
 export { SegmentedControl } from './segmented-control/index.js';
 export type { SegmentedControlRootProps, SegmentedControlItemProps } from './segmented-control/index.js';
 export { Slider } from './slider/index.js';
-export type { SliderProps } from './slider/index.js';
+export type { SliderProps, SliderVariant } from './slider/index.js';
 export { Toggle } from './toggle/index.js';
 export type { ToggleProps } from './toggle/index.js';
 export { ToggleGroup } from './toggle-group/index.js';
@@ -270,6 +270,8 @@ export { AlphaSlider } from './alpha-slider/index.js';
 export type { AlphaSliderProps } from './alpha-slider/index.js';
 export { Beam } from './beam/index.js';
 export type { BeamProps } from './beam/index.js';
+export { BorderBeam } from './border-beam/index.js';
+export type { BorderBeamProps } from './border-beam/index.js';
 export { Shimmer } from './shimmer/index.js';
 export type { ShimmerProps } from './shimmer/index.js';
 export { Glass } from './glass/index.js';

package/dist/index.js

@@ -139,6 +139,7 @@ export { Glow } from './glow/index.js';
 export { Adjust } from './adjust/index.js';
 export { AlphaSlider } from './alpha-slider/index.js';
 export { Beam } from './beam/index.js';
+export { BorderBeam } from './border-beam/index.js';
 export { Shimmer } from './shimmer/index.js';
 export { Glass } from './glass/index.js';
 export { GodRays } from './god-rays/index.js';

package/dist/slider/index.d.ts

@@ -1,5 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { SliderProps as PrimitiveSliderProps } from '@dryui/primitives';
+export type SliderVariant = 'default' | 'pill';
 export interface SliderProps extends Omit<PrimitiveSliderProps, 'size'> {
     size?: 'sm' | 'md' | 'lg';
+    variant?: SliderVariant;
+    valueLabel?: Snippet<[{
+        value: number;
+        percentage: number;
+    }]>;
 }
 export { default as Slider } from './slider-input.svelte';

package/dist/slider/slider-input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getFormControlCtx } from '@dryui/primitives';
 
@@ -8,8 +9,10 @@
 		max?: number;
 		step?: number;
 		size?: 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'pill';
 		disabled?: boolean;
 		orientation?: 'horizontal' | 'vertical';
+		valueLabel?: Snippet<[{ value: number; percentage: number }]>;
 	}
 
 	let {
@@ -18,8 +21,10 @@
 		max = 100,
 		step = 1,
 		size = 'md',
+		variant = 'default',
 		disabled = false,
 		orientation = 'horizontal',
+		valueLabel,
 		class: className,
 		...rest
 	}: Props = $props();
@@ -28,6 +33,7 @@
 	const isDisabled = $derived(disabled || ctx?.disabled || false);
 
 	let progress = $derived(((value - min) / (max - min)) * 100);
+	let isPill = $derived(variant === 'pill');
 
 	function applyStyles(node: HTMLElement) {
 		$effect(() => {
@@ -36,7 +42,7 @@
 	}
 </script>
 
-<span class="wrapper">
+<span class="wrapper" data-variant={variant} data-size={size} use:applyStyles>
 	<input
 		type="range"
 		bind:value
@@ -51,11 +57,20 @@
 		aria-errormessage={ctx?.errorMessageId}
 		data-disabled={isDisabled || undefined}
 		data-orientation={orientation}
+		data-variant={variant}
 		data-size={size}
 		class={className}
-		use:applyStyles
 		{...rest}
 	/>
+	{#if isPill}
+		<span data-part="value-label" aria-hidden="true">
+			{#if valueLabel}
+				{@render valueLabel({ value, percentage: progress })}
+			{:else}
+				{Math.round(progress)}%
+			{/if}
+		</span>
+	{/if}
 </span>
 
 <style>
@@ -181,4 +196,81 @@
 		--dry-slider-track-height: 8px;
 		--dry-slider-thumb-size: 28px;
 	}
+
+	/* ── Pill variant ── */
+
+	.wrapper[data-variant='pill'] input,
+	.wrapper[data-variant='pill'] [data-part='value-label'] {
+		grid-area: 1 / 1;
+	}
+
+	input[data-variant='pill'][data-size='sm'] {
+		--dry-slider-track-height: 32px;
+		--dry-slider-thumb-size: 32px;
+	}
+
+	input[data-variant='pill'][data-size='md'] {
+		--dry-slider-track-height: 40px;
+		--dry-slider-thumb-size: 40px;
+	}
+
+	input[data-variant='pill'][data-size='lg'] {
+		--dry-slider-track-height: 48px;
+		--dry-slider-thumb-size: 48px;
+	}
+
+	input[data-variant='pill']::-webkit-slider-thumb {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+		margin-top: 0;
+	}
+
+	input[data-variant='pill']::-moz-range-thumb {
+		background: transparent;
+		border: none;
+		box-shadow: none;
+	}
+
+	input[data-variant='pill']:hover:not([data-disabled])::-webkit-slider-thumb,
+	input[data-variant='pill']:active:not([data-disabled])::-webkit-slider-thumb {
+		transform: none;
+	}
+
+	input[data-variant='pill']:hover:not([data-disabled])::-moz-range-thumb,
+	input[data-variant='pill']:active:not([data-disabled])::-moz-range-thumb {
+		transform: none;
+	}
+
+	/* Pill value label */
+	.wrapper[data-variant='pill'] [data-part='value-label'] {
+		pointer-events: none;
+		display: grid;
+		align-items: center;
+		padding-inline: var(--dry-space-4);
+		font-size: var(--dry-text-sm-size, 0.875rem);
+		font-weight: 600;
+		color: var(--dry-color-text);
+		clip-path: inset(
+			0 calc(100% - var(--dry-slider-progress, 50%)) 0 0 round var(--dry-radius-full)
+		);
+		transition: clip-path var(--dry-duration-fast) var(--dry-ease-default);
+		z-index: 1;
+	}
+
+	.wrapper[data-variant='pill'][data-size='sm'] [data-part='value-label'] {
+		font-size: var(--dry-text-xs-size, 0.75rem);
+		padding-inline: var(--dry-space-3);
+	}
+
+	.wrapper[data-variant='pill'][data-size='lg'] [data-part='value-label'] {
+		font-size: var(--dry-text-base-size, 1rem);
+		padding-inline: var(--dry-space-5);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.wrapper[data-variant='pill'] [data-part='value-label'] {
+			transition: none;
+		}
+	}
 </style>

package/dist/slider/slider-input.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLInputAttributes, 'size'> {
     value?: number;
@@ -5,8 +6,13 @@ interface Props extends Omit<HTMLInputAttributes, 'size'> {
     max?: number;
     step?: number;
     size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'pill';
     disabled?: boolean;
     orientation?: 'horizontal' | 'vertical';
+    valueLabel?: Snippet<[{
+        value: number;
+        percentage: number;
+    }]>;
 }
 declare const SliderInput: import("svelte").Component<Props, {}, "value">;
 type SliderInput = ReturnType<typeof SliderInput>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -76,6 +76,11 @@
       "svelte": "./dist/beam/index.js",
       "default": "./dist/beam/index.js"
     },
+    "./border-beam": {
+      "types": "./dist/border-beam/index.d.ts",
+      "svelte": "./dist/border-beam/index.js",
+      "default": "./dist/border-beam/index.js"
+    },
     "./breadcrumb": {
       "types": "./dist/breadcrumb/index.d.ts",
       "svelte": "./dist/breadcrumb/index.js",
@@ -770,7 +775,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.1.3"
+    "@dryui/primitives": "^1.1.5"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"

package/skills/dryui/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: dryui
-description: 'Use when building UIs with DryUI (@dryui/ui) Svelte 5 components. Teaches correct patterns for compound components, theming, forms, and accessibility. Use MCP tools when available; fall back to CLI.'
+description: 'Use when building UIs with DryUI (@dryui/ui) Svelte 5 components. Teaches correct patterns for compound components, theming, forms, and accessibility. Use the CLI as the default entry point; MCP mirrors the same workflow when available.'
 ---
 
 # DryUI
@@ -13,18 +13,18 @@ Zero-dependency Svelte 5 components. All imports from `@dryui/ui`. Requires a th
 
 **Never guess a component API. Always verify first.**
 
-- Call `ask --scope component` or `ask --scope recipe` before using any component for the first time
+- Call `dryui info <component>` or `dryui compose "<query>"` before using any component for the first time. If MCP is available, `ask --scope component` and `ask --scope recipe` are equivalent.
 - Component APIs vary — `bind:value`, `bind:open`, `bind:checked` are NOT interchangeable
 - Compound vs simple, required parts, available props — all differ per component
 - If you skip the lookup, you'll write plausible-looking code that silently breaks
 
-The test: can you point to an `ask` call for every component or pattern in your output?
+The test: can you point to a `dryui info`, `dryui compose`, or `ask` call for every component or pattern in your output?
 
 ## 2. Everything is Compound Until Proven Otherwise
 
 **Use `.Root`. Always check.**
 
-Most DryUI components are compound — they require `<Card.Root>`, not `<Card>`. The bare name silently fails or renders wrong. Assume compound; verify with `ask --scope component`.
+Most DryUI components are compound — they require `<Card.Root>`, not `<Card>`. The bare name silently fails or renders wrong. Assume compound; verify with `dryui info <Component>` or `ask --scope component`.
 
 ```svelte
 <!-- Wrong -->
@@ -33,7 +33,7 @@ Most DryUI components are compound — they require `<Card.Root>`, not `<Card>`.
 <Card.Root>content</Card.Root>
 ```
 
-Compound components are tracked in the manifest at `packages/mcp/src/component-catalog.ts`. Verify with `ask --scope component` before you assume a bare name works, then use `.Root` and wrap the parts inside it.
+Compound components are tracked in the manifest at `packages/mcp/src/component-catalog.ts`. Verify with `dryui info <Component>` or `ask --scope component` before you assume a bare name works, then use `.Root` and wrap the parts inside it.
 
 The test: every compound component in your markup uses `.Root`, and its parts are wrapped inside it. See `rules/compound-components.md` for the parts reference.
 
@@ -118,21 +118,19 @@ The test: search your markup for raw `<input`, `<select>`, `<dialog>`, `<button>
 
 ## Quick Start
 
-**1. Install this skill** — you're reading it, so it's already loaded. This is the most important step.
+**1. Install the CLI** so every subsequent command is short and fast:
 
-**2. Add the MCP server** for live API lookup and code validation:
-
-- Claude Code: `claude plugin marketplace add rob-balfre/dryui && claude plugin install dryui@dryui` (installs skill + MCP in one step)
-- Codex: public install today is `$skill-installer install https://github.com/rob-balfre/dryui/tree/main/packages/ui/skills/dryui` then `codex mcp add dryui -- npx -y @dryui/mcp`. If you're working inside the DryUI repo itself, install the repo-local plugin from `/plugins` via `.agents/plugins/marketplace.json`.
-- Copilot/Cursor/Windsurf: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .agents/skills/dryui` + add MCP config (see https://dryui.dev/tools)
+```bash
+bun install -g @dryui/cli@latest   # or: npm install -g @dryui/cli@latest
+```
 
-**3. Install the CLI** so every subsequent command is short and fast:
+**2. Start with bare `dryui`** when you want editor integration and feedback:
 
 ```bash
-bun install -g @dryui/cli   # or: npm install -g @dryui/cli
+dryui
 ```
 
-**4. Bootstrap the project** — `init` detects your project state and applies whatever is missing:
+**3. Bootstrap or inspect the project** with the CLI:
 
 ```bash
 dryui init             # existing project
@@ -140,10 +138,16 @@ dryui init my-app      # new project — scaffolds SvelteKit + DryUI in one step
 cd my-app && bun run dev
 ```
 
-This works for greenfield (empty directory), brownfield (existing non-SvelteKit project), and existing SvelteKit projects. Verify: `dryui detect` should show `project: ready`.
+This works for greenfield (empty directory), brownfield (existing non-SvelteKit project), and existing SvelteKit projects. On existing projects, `dryui install` prints the ordered plan and `dryui detect` verifies that setup is complete.
 
 > **No global install?** `bunx @dryui/cli <cmd>` and `npx -y @dryui/cli <cmd>` work anywhere without installing — same commands, just slower (re-fetches on each call).
 
+**4. Add the agent integration layer manually** if you do not want to use `dryui` / `dryui setup`:
+
+- Claude Code: `claude plugin marketplace add rob-balfre/dryui && claude plugin install dryui@dryui` (installs skill + MCP in one step)
+- Codex (0.121.0+): `codex marketplace add rob-balfre/dryui`, then start `codex`, run `/plugins`, and install `DryUI` (installs skill + MCP in one step). Manual fallback: `codex mcp add dryui -- npx -y @dryui/mcp` + copy the skill from `packages/ui/skills/dryui`.
+- Copilot/Cursor/Windsurf: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .agents/skills/dryui` + add MCP config (see https://dryui.dev/tools)
+
 ### Manual setup
 
 1. `bun add @dryui/ui`
@@ -181,7 +185,7 @@ This works for greenfield (empty directory), brownfield (existing non-SvelteKit
 
 ## Bindable Props — Common Confusion
 
-Always verify with `ask --scope component`, but these are the most common mistakes:
+Always verify with `dryui info <Component>` or `ask --scope component`, but these are the most common mistakes:
 
 - `bind:value` (Input, Select, Tabs...) vs `bind:checked` (Checkbox, Switch) vs `bind:pressed` (Toggle) vs `bind:open` (Dialog, Popover, Drawer...)
 - Select and Combobox support both `bind:value` and `bind:open`
@@ -194,25 +198,18 @@ Use these to look up APIs, discover components, plan setup, and validate code.
 
 ### Recommended workflow
 
-1. `ask --scope recipe "<query>"` or `ask --scope component "<Component>"` before writing so you confirm kind, required parts, bindables, and canonical usage.
+1. `dryui info <Component>` or `dryui compose "<query>"` before writing so you confirm kind, required parts, bindables, and canonical usage. If MCP is available, `ask --scope component` and `ask --scope recipe` are the equivalent surface.
 2. Build the route or component with raw CSS grid, `Container` for constrained width, and `@container` for responsive layout.
-3. `check` after implementation to catch composition drift, layout violations, and accessibility regressions.
+3. `dryui review`, `dryui diagnose`, or `dryui doctor` after implementation to catch composition drift, layout violations, and accessibility regressions. If MCP is available, `check` is the equivalent surface.
 4. Never guess component shape from memory. DryUI is intentionally strict, and the lookup cost is lower than rework.
 
-### MCP tools (preferred)
+### CLI (default entry point)
 
-| Workflow             | Tools                                                             |
-| -------------------- | ----------------------------------------------------------------- |
-| Project setup        | `ask --scope setup ""`                                            |
-| Lookup & composition | `ask --scope component`, `ask --scope recipe`, `ask --scope list` |
-| Validation           | `check <file.svelte>`, `check <theme.css>`                        |
-| Audit                | `check`, `check <directory>`                                      |
-
-### CLI fallback
-
-Install once with `bun install -g @dryui/cli` (or `npm install -g @dryui/cli`), then use the short form below. Every command outputs TOON (token-optimized, agent-friendly) by default. Pass `--text` for human-readable plain text, `--json` where supported, or `--full` to disable truncation.
+Install once with `bun install -g @dryui/cli@latest` (or `npm install -g @dryui/cli@latest`), then use the short form below. Every command outputs TOON (token-optimized, agent-friendly) by default. Pass `--text` for human-readable plain text, `--json` where supported, or `--full` to disable truncation.
 
 ```bash
+dryui                           # default onboarding entry point
+dryui setup                     # explicit onboarding subcommand
 dryui init [path] [--pm bun]    # Bootstrap SvelteKit + DryUI project
 dryui info <component>          # Look up component API
 dryui compose "date input"      # Composition guidance
@@ -227,6 +224,15 @@ dryui list                      # List components
 
 Without a global install, prefix any command with `bunx @dryui/cli …` or `npx -y @dryui/cli …` — same behaviour, just slower (re-fetches on each call).
 
+### MCP tools (same workflow in-editor)
+
+| Workflow             | Tools                                                             |
+| -------------------- | ----------------------------------------------------------------- |
+| Project setup        | `ask --scope setup ""`                                            |
+| Lookup & composition | `ask --scope component`, `ask --scope recipe`, `ask --scope list` |
+| Validation           | `check <file.svelte>`, `check <theme.css>`                        |
+| Audit                | `check`, `check <directory>`                                      |
+
 Categories: action, input, form, layout, navigation, overlay, display, feedback, interaction, utility
 
 ## Rule Files

package/skills/dryui/rules/composition.md

@@ -398,7 +398,7 @@ Use Field.Error to show validation messages.
 
 ## Component Selection Quick Reference
 
-Before using any component, call `ask --scope recipe` or `ask --scope component` to get the correct component and usage snippet. This table is a quick reference — `ask` has the full snippets and anti-patterns.
+Before using any component, call `dryui compose "<query>"` or `dryui info <Component>` to get the correct component and usage snippet. If MCP is available, `ask --scope recipe` and `ask --scope component` are equivalent. This table is a quick reference — the CLI and MCP surfaces both return the fuller snippets and anti-patterns.
 
 | UI Need           | Use This                               | NOT This                     |
 | ----------------- | -------------------------------------- | ---------------------------- |
@@ -431,7 +431,7 @@ Before using any component, call `ask --scope recipe` or `ask --scope component`
 
 ## Composition Recipes
 
-Call `ask --scope recipe` with any recipe name to get a full working snippet.
+Call `dryui compose "<recipe>"` with any recipe name to get a full working snippet. If MCP is available, `ask --scope recipe "<recipe>"` is equivalent.
 
 | Recipe                    | Description               | Key Components                         |
 | ------------------------- | ------------------------- | -------------------------------------- |
@@ -457,7 +457,7 @@ DryUI is a presentation and accessibility system, not a workflow engine. For dep
 - Normalize route/session state in script before rendering DryUI inputs.
 - Reset dependent `Select.Root` values when their parent choice changes; do not rely on stale child state surviving domain changes.
 - Use raw CSS grid to lay out planner sections, and keep orchestration logic in route-level stores or derived state.
-- Run `ask` before introducing a new field shape, then run `check` after the flow is wired.
+- Run `dryui info <Component>` or `dryui compose "<pattern>"` before introducing a new field shape, then run `dryui review` or `dryui doctor` after the flow is wired. If MCP is available, `ask` / `check` are equivalent.
 
 ```svelte
 <script lang="ts">

package/skills/dryui/rules/compound-components.md

@@ -18,7 +18,7 @@ Every compound component uses `.Root` as the container. Never use the bare name.
 
 ## Parts Reference
 
-Below are the parts for the most commonly used compound components. Always run `ask --scope component "<name>"` or `dryui info <name>` for the full, up-to-date parts list.
+Below are the parts for the most commonly used compound components. Prefer `dryui info <name>` for the full, up-to-date parts list; if MCP is available, `ask --scope component "<name>"` is equivalent.
 
 ### Card
 
@@ -311,6 +311,6 @@ Parts: Root, Input, Content, Item, Empty
 
 ## Full Compound Component List
 
-Run `ask --scope component "<name>"` or `dryui info <name>` for any component's complete parts list:
+Run `dryui info <name>` for any component's complete parts list. If MCP is available, `ask --scope component "<name>"` is equivalent:
 
 Accordion, AlertDialog, Breadcrumb, Card, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, DataGrid, DatePicker, Dialog, DragAndDrop, Drawer, DropdownMenu, EmptyState, Field, FileUpload, FloatButton, Pagination, Popover, RadioGroup, RichTextEditor, Select, Splitter, Stepper, Table, Tabs, TagsInput, Toast, ToggleGroup, Toolbar, Tooltip, Tour, Transfer

package/skills/dryui/rules/theming.md

@@ -268,11 +268,11 @@ Ensure sufficient contrast between text and background.
 
 ## Validating Theme CSS
 
-Run `check <theme.css>` to catch theme issues. CLI fallback:
+Run `dryui diagnose <theme.css>` to catch theme issues. If MCP is available, `check <theme.css>` is equivalent:
 
 ```bash
-check src/styles/global.css
 dryui diagnose src/styles/global.css
+check src/styles/global.css
 ```
 
 Common diagnostic codes:

package/dist/internal/overlay-base.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {}
-
-	let { class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}></div>
-
-<style>
-	div {
-		position: fixed;
-		inset: 0;
-		background: var(--dry-overlay-bg, var(--dry-color-overlay-backdrop));
-		backdrop-filter: blur(var(--dry-overlay-blur, 12px));
-		-webkit-backdrop-filter: blur(var(--dry-overlay-blur, 12px));
-		z-index: var(--dry-layer-overlay);
-		will-change: opacity;
-	}
-
-	div[data-state='closed'] {
-		display: none;
-	}
-</style>

package/dist/internal/overlay-base.svelte.d.ts

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

package/dist/internal/section-body.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}>
-	{@render children()}
-</div>
-
-<style>
-	div {
-		padding: var(--dry-section-padding);
-		overflow-y: auto;
-		min-height: 0;
-	}
-</style>

package/dist/internal/section-body.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 SectionBody: import("svelte").Component<Props, {}, "">;
-type SectionBody = ReturnType<typeof SectionBody>;
-export default SectionBody;

package/dist/internal/section-footer.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}>
-	{@render children()}
-</div>
-
-<style>
-	div {
-		padding: var(--dry-section-padding);
-		border-top: 1px solid var(--dry-section-border);
-		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
-		justify-items: var(--dry-section-footer-justify, start);
-		gap: var(--dry-section-footer-gap, var(--dry-space-4));
-	}
-</style>

package/dist/internal/section-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 SectionFooter: import("svelte").Component<Props, {}, "">;
-type SectionFooter = ReturnType<typeof SectionFooter>;
-export default SectionFooter;

package/dist/internal/section-header.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	interface Props extends HTMLAttributes<HTMLDivElement> {
-		children: Snippet;
-	}
-
-	let { children, class: className, ...rest }: Props = $props();
-</script>
-
-<div class={className} {...rest}>
-	{@render children()}
-</div>
-
-<style>
-	div {
-		padding: var(--dry-section-padding);
-		border-bottom: 1px solid var(--dry-section-border);
-	}
-</style>

package/dist/internal/section-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 SectionHeader: import("svelte").Component<Props, {}, "">;
-type SectionHeader = ReturnType<typeof SectionHeader>;
-export default SectionHeader;

package/dist/themes/practical-ui-foundation-map.md

@@ -1,46 +0,0 @@
-# Practical UI Foundation Map
-
-> Living note for [docs/research/practical-ui-figma-extraction.md](./docs/research/practical-ui-figma-extraction.md). Extracted from the Practical UI design system file on 2026-03-25.
-
-## Foundation Rules
-
-- Colour tokens are organized as semantic roles first, then tone, emphasis, and state.
-- Background surfaces use `base`, `sunken`, `raised`, and `overlay`.
-- Practical UI’s public neutral text and fill system is transparent, not solid.
-- Elevation is expressed with both surface colour and shadow.
-- Spacing is a fixed 4px-based ladder, not ad hoc values.
-- Typography is centered on Inter with a small named scale.
-
-## DryUI Mapping
-
-| Figma                | DryUI                       |
-| -------------------- | --------------------------- |
-| `Background/Base`    | `--dry-color-bg-base`       |
-| `Background/Sunken`  | `--dry-color-bg-sunken`     |
-| `Background/Raised`  | `--dry-color-bg-raised`     |
-| `Background/Overlay` | `--dry-color-bg-overlay`    |
-| `Background/Inverse` | `--dry-color-bg-inverse`    |
-| `Text/Strong`        | `--dry-color-text-strong`   |
-| `Text/Weak`          | `--dry-color-text-weak`     |
-| `Text/Disabled`      | `--dry-color-text-disabled` |
-| `Stroke/Strong`      | `--dry-color-stroke-strong` |
-| `Stroke/Weak`        | `--dry-color-stroke-weak`   |
-| `Stroke/Focus`       | `--dry-color-stroke-focus`  |
-| `Fill/Strong`        | `--dry-color-fill-strong`   |
-| `Fill/Weak`          | `--dry-color-fill-weak`     |
-| `Fill/Hover`         | `--dry-color-fill-hover`    |
-| `Fill/Press`         | `--dry-color-fill-active`   |
-| `Fill/Selected`      | `--dry-color-fill-selected` |
-| `Fill/Inverse`       | `--dry-color-fill-inverse`  |
-| `Information`        | `info`                      |
-
-## Published Scales
-
-- Spacing: `0`, `4`, `8`, `12`, `16`, `20`, `24`, `32`, `40`, `48`, `56`, `64`, `80`, `96`, `128`, `192`, `256`
-- Desktop typography: `Display 56/64`, `Heading 1 40/48`, `Heading 2 32/40`, `Heading 3 24/32`, `Heading 4 20/28`, `Small 16/24`, `Tiny 14/20`
-- Mobile typography: `Display 40/48`, `Heading 1 36/44`, `Heading 2 28/36`, `Heading 3 24/32`, `Heading 4 20/28`, `Small 16/24`, `Tiny 14/20`
-
-## Notes
-
-- Keep [`default.css`](./packages/ui/src/themes/default.css) and [`dark.css`](./packages/ui/src/themes/dark.css) synchronized with the extracted foundation ladder.
-- The inverse fill family in Dark mode follows the same transparent-neutral logic as the rest of the semantic layer.