@dryui/ui 1.1.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/alert/alert.svelte +1 -1
  2. package/dist/alert/alert.svelte.d.ts +1 -1
  3. package/dist/alert/index.d.ts +1 -1
  4. package/package.json +2 -2
  5. package/skills/dryui/SKILL.md +38 -16
  6. package/skills/dryui/rules/composition.md +3 -3
  7. package/skills/dryui/rules/compound-components.md +2 -2
  8. package/skills/dryui/rules/theming.md +2 -1
package/dist/alert/alert.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
7
7
 
8
- interface Props extends HTMLAttributes<HTMLDivElement> {
8
+ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
9
9
  variant?: AlertVariant;
10
10
  dismissible?: boolean;
11
11
  onDismiss?: () => void;
package/dist/alert/alert.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { Snippet } from 'svelte';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
3
  export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
4
- interface Props extends HTMLAttributes<HTMLDivElement> {
4
+ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
5
5
  variant?: AlertVariant;
6
6
  dismissible?: boolean;
7
7
  onDismiss?: () => void;
package/dist/alert/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
2
2
  import type { HTMLAttributes } from 'svelte/elements';
3
3
  import Alert from './alert.svelte';
4
4
  export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
5
- export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
5
+ export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
6
6
  variant?: AlertVariant;
7
7
  dismissible?: boolean;
8
8
  onDismiss?: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dryui/ui",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "author": "Rob Balfre",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -770,7 +770,7 @@
770
770
  "postpack": "bun ../../scripts/postpack-exports.ts"
771
771
  },
772
772
  "dependencies": {
773
- "@dryui/primitives": "^1.1.2"
773
+ "@dryui/primitives": "^1.1.3"
774
774
  },
775
775
  "peerDependencies": {
776
776
  "svelte": "^5.55.1"
package/skills/dryui/SKILL.md CHANGED
@@ -13,18 +13,18 @@ Zero-dependency Svelte 5 components. All imports from `@dryui/ui`. Requires a th
13
13
 
14
14
  **Never guess a component API. Always verify first.**
15
15
 
16
- - Call `info` or `compose` before using any component for the first time
16
+ - Call `ask --scope component` or `ask --scope recipe` before using any component for the first time
17
17
  - Component APIs vary — `bind:value`, `bind:open`, `bind:checked` are NOT interchangeable
18
18
  - Compound vs simple, required parts, available props — all differ per component
19
19
  - If you skip the lookup, you'll write plausible-looking code that silently breaks
20
20
 
21
- The test: can you point to an `info` or `compose` call for every component in your output?
21
+ The test: can you point to an `ask` call for every component or pattern in your output?
22
22
 
23
23
  ## 2. Everything is Compound Until Proven Otherwise
24
24
 
25
25
  **Use `.Root`. Always check.**
26
26
 
27
- Most DryUI components are compound — they require `<Card.Root>`, not `<Card>`. The bare name silently fails or renders wrong. Assume compound; verify with `info`.
27
+ 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`.
28
28
 
29
29
  ```svelte
30
30
  <!-- Wrong -->
@@ -33,7 +33,7 @@ Most DryUI components are compound — they require `<Card.Root>`, not `<Card>`.
33
33
  <Card.Root>content</Card.Root>
34
34
  ```
35
35
 
36
- 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.
36
+ 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.
37
37
 
38
38
  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.
39
39
 
@@ -147,19 +147,41 @@ This works for greenfield (empty directory), brownfield (existing non-SvelteKit
147
147
  ### Manual setup
148
148
 
149
149
  1. `bun add @dryui/ui`
150
- 2. Add `class="theme-auto"` to `<html>` in `src/app.html`
151
- 3. In root layout (`src/routes/+layout.svelte`), import themes:
150
+ 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.
151
+ 3. Wire the lint preprocessor in `svelte.config.js` (add `dryuiLint` as the **first** item in the `preprocess` array):
152
+
153
+ ```js
154
+ import { dryuiLint } from '@dryui/lint';
155
+
156
+ /** @type {import('@sveltejs/kit').Config} */
157
+ const config = {
158
+ preprocess: [
159
+ dryuiLint({
160
+ strict: true,
161
+ exclude: ['.svelte-kit/', '/dist/']
162
+ })
163
+ // keep any existing preprocessors after this
164
+ ]
165
+ };
166
+
167
+ export default config;
168
+ ```
169
+
170
+ 4. Add `class="theme-auto"` to `<html>` in `src/app.html`
171
+ 5. In root layout (`src/routes/+layout.svelte`), import themes:
152
172
  ```svelte
153
173
  <script>
154
174
  import '@dryui/ui/themes/default.css';
155
175
  import '@dryui/ui/themes/dark.css';
156
176
  </script>
157
177
  ```
158
- 4. Import `app.css` AFTER theme CSS if you have custom styles
178
+ 6. Import `app.css` AFTER theme CSS if you have custom styles
179
+
180
+ > `dryui init` applies all six steps automatically — prefer it over manual setup when you can.
159
181
 
160
182
  ## Bindable Props — Common Confusion
161
183
 
162
- Always verify with `info`, but these are the most common mistakes:
184
+ Always verify with `ask --scope component`, but these are the most common mistakes:
163
185
 
164
186
  - `bind:value` (Input, Select, Tabs...) vs `bind:checked` (Checkbox, Switch) vs `bind:pressed` (Toggle) vs `bind:open` (Dialog, Popover, Drawer...)
165
187
  - Select and Combobox support both `bind:value` and `bind:open`
@@ -172,19 +194,19 @@ Use these to look up APIs, discover components, plan setup, and validate code.
172
194
 
173
195
  ### Recommended workflow
174
196
 
175
- 1. `compose` or `info` before writing components so you confirm kind, required parts, bindables, and canonical usage.
197
+ 1. `ask --scope recipe "<query>"` or `ask --scope component "<Component>"` before writing so you confirm kind, required parts, bindables, and canonical usage.
176
198
  2. Build the route or component with raw CSS grid, `Container` for constrained width, and `@container` for responsive layout.
177
- 3. `review` or `doctor` after implementation to catch composition drift, layout violations, and accessibility regressions.
199
+ 3. `check` after implementation to catch composition drift, layout violations, and accessibility regressions.
178
200
  4. Never guess component shape from memory. DryUI is intentionally strict, and the lookup cost is lower than rework.
179
201
 
180
202
  ### MCP tools (preferred)
181
203
 
182
- | Workflow | Tools |
183
- | -------------------- | -------------------------------------------- |
184
- | Project setup | `detect_project`, `plan_install`, `plan_add` |
185
- | Lookup & composition | `info`, `get`, `list`, `compose` |
186
- | Validation | `review`, `diagnose` |
187
- | Audit | `doctor`, `lint` |
204
+ | Workflow | Tools |
205
+ | -------------------- | ----------------------------------------------------------------- |
206
+ | Project setup | `ask --scope setup ""` |
207
+ | Lookup & composition | `ask --scope component`, `ask --scope recipe`, `ask --scope list` |
208
+ | Validation | `check <file.svelte>`, `check <theme.css>` |
209
+ | Audit | `check`, `check <directory>` |
188
210
 
189
211
  ### CLI fallback
190
212
 
package/skills/dryui/rules/composition.md CHANGED
@@ -398,7 +398,7 @@ Use Field.Error to show validation messages.
398
398
 
399
399
  ## Component Selection Quick Reference
400
400
 
401
- 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.
401
+ 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.
402
402
 
403
403
  | UI Need | Use This | NOT This |
404
404
  | ----------------- | -------------------------------------- | ---------------------------- |
@@ -431,7 +431,7 @@ Before using any component, call `compose` to get the correct component and usag
431
431
 
432
432
  ## Composition Recipes
433
433
 
434
- Call `compose` with any recipe name to get a full working snippet.
434
+ Call `ask --scope recipe` with any recipe name to get a full working snippet.
435
435
 
436
436
  | Recipe | Description | Key Components |
437
437
  | ------------------------- | ------------------------- | -------------------------------------- |
@@ -457,7 +457,7 @@ DryUI is a presentation and accessibility system, not a workflow engine. For dep
457
457
  - Normalize route/session state in script before rendering DryUI inputs.
458
458
  - Reset dependent `Select.Root` values when their parent choice changes; do not rely on stale child state surviving domain changes.
459
459
  - Use raw CSS grid to lay out planner sections, and keep orchestration logic in route-level stores or derived state.
460
- - Run `compose` or `info` before introducing a new field shape, then run `review` or `doctor` after the flow is wired.
460
+ - Run `ask` before introducing a new field shape, then run `check` after the flow is wired.
461
461
 
462
462
  ```svelte
463
463
  <script lang="ts">
package/skills/dryui/rules/compound-components.md CHANGED
@@ -18,7 +18,7 @@ Every compound component uses `.Root` as the container. Never use the bare name.
18
18
 
19
19
  ## Parts Reference
20
20
 
21
- Below are the parts for the most commonly used compound components. Always run `dryui info <name>` for the full, up-to-date parts list.
21
+ 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.
22
22
 
23
23
  ### Card
24
24
 
@@ -311,6 +311,6 @@ Parts: Root, Input, Content, Item, Empty
311
311
 
312
312
  ## Full Compound Component List
313
313
 
314
- Run `dryui info <name>` for any component's complete parts list:
314
+ Run `ask --scope component "<name>"` or `dryui info <name>` for any component's complete parts list:
315
315
 
316
316
  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 CHANGED
@@ -268,9 +268,10 @@ Ensure sufficient contrast between text and background.
268
268
 
269
269
  ## Validating Theme CSS
270
270
 
271
- Run the CLI diagnose command to catch theme issues:
271
+ Run `check <theme.css>` to catch theme issues. CLI fallback:
272
272
 
273
273
  ```bash
274
+ check src/styles/global.css
274
275
  dryui diagnose src/styles/global.css
275
276
  ```
276
277