@dryui/ui 1.1.2 → 1.1.4

package/dist/alert/alert.svelte

@@ -5,7 +5,7 @@
 
 	export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 
-	interface Props extends HTMLAttributes<HTMLDivElement> {
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
 		variant?: AlertVariant;
 		dismissible?: boolean;
 		onDismiss?: () => void;

package/dist/alert/alert.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
-interface Props extends HTMLAttributes<HTMLDivElement> {
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
     variant?: AlertVariant;
     dismissible?: boolean;
     onDismiss?: () => void;

package/dist/alert/index.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 import Alert from './alert.svelte';
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
-export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
     variant?: AlertVariant;
     dismissible?: boolean;
     onDismiss?: () => void;

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

@@ -53,9 +53,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 +89,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-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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -770,7 +770,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.1.2"
+    "@dryui/primitives": "^1.1.4"
   },
   "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 `info` or `compose` 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 `info` or `compose` call for every component 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 `info`.
+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 `info` 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,26 +138,54 @@ 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: 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)
+
 ### Manual setup
 
 1. `bun add @dryui/ui`
-2. Add `class="theme-auto"` to `<html>` in `src/app.html`
-3. In root layout (`src/routes/+layout.svelte`), import themes:
+2. `bun add -d @dryui/lint` — enforces grid-only layout, bans flexbox/inline-style/width at build time. Without this step the CSS discipline rules are not enforced at build time, and only post-write `check` / CLI validation remain.
+3. Wire the lint preprocessor in `svelte.config.js` (add `dryuiLint` as the **first** item in the `preprocess` array):
+
+   ```js
+   import { dryuiLint } from '@dryui/lint';
+
+   /** @type {import('@sveltejs/kit').Config} */
+   const config = {
+   	preprocess: [
+   		dryuiLint({
+   			strict: true,
+   			exclude: ['.svelte-kit/', '/dist/']
+   		})
+   		// keep any existing preprocessors after this
+   	]
+   };
+
+   export default config;
+   ```
+
+4. Add `class="theme-auto"` to `<html>` in `src/app.html`
+5. In root layout (`src/routes/+layout.svelte`), import themes:
    ```svelte
    <script>
    	import '@dryui/ui/themes/default.css';
    	import '@dryui/ui/themes/dark.css';
    </script>
    ```
-4. Import `app.css` AFTER theme CSS if you have custom styles
+6. Import `app.css` AFTER theme CSS if you have custom styles
+
+> `dryui init` applies all six steps automatically — prefer it over manual setup when you can.
 
 ## Bindable Props — Common Confusion
 
-Always verify with `info`, 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`
@@ -172,25 +198,18 @@ Use these to look up APIs, discover components, plan setup, and validate code.
 
 ### Recommended workflow
 
-1. `compose` or `info` before writing components 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. `review` or `doctor` 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        | `detect_project`, `plan_install`, `plan_add` |
-| Lookup & composition | `info`, `get`, `list`, `compose`             |
-| Validation           | `review`, `diagnose`                         |
-| Audit                | `doctor`, `lint`                             |
-
-### 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
@@ -205,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 `compose` to get the correct component and usage snippet. This table is a quick reference — `compose` has 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 `compose` to get the correct component and usag
 
 ## Composition Recipes
 
-Call `compose` 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 `compose` or `info` before introducing a new field shape, then run `review` or `doctor` 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 `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 `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,10 +268,11 @@ Ensure sufficient contrast between text and background.
 
 ## Validating Theme CSS
 
-Run the CLI diagnose command to catch theme issues:
+Run `dryui diagnose <theme.css>` to catch theme issues. If MCP is available, `check <theme.css>` is equivalent:
 
 ```bash
 dryui diagnose src/styles/global.css
+check src/styles/global.css
 ```
 
 Common diagnostic codes: