@dryui/ui 0.2.1 → 0.2.2

package/skills/dryui/rules/composition.md

@@ -8,12 +8,15 @@ All layout uses raw `display: grid` in scoped `<style>` blocks with `--dry-space
 
 ```svelte
 <div class="stack">
-  <p>First</p>
-  <p>Second</p>
+	<p>First</p>
+	<p>Second</p>
 </div>
 
 <style>
-  .stack { display: grid; gap: var(--dry-space-4); }
+	.stack {
+		display: grid;
+		gap: var(--dry-space-4);
+	}
 </style>
 ```
 
@@ -21,17 +24,17 @@ All layout uses raw `display: grid` in scoped `<style>` blocks with `--dry-space
 
 ```svelte
 <div class="row">
-  <span>Label</span>
-  <Button>Action</Button>
+	<span>Label</span>
+	<Button>Action</Button>
 </div>
 
 <style>
-  .row {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: var(--dry-space-4);
-  }
+	.row {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+		gap: var(--dry-space-4);
+	}
 </style>
 ```
 
@@ -39,23 +42,27 @@ All layout uses raw `display: grid` in scoped `<style>` blocks with `--dry-space
 
 ```svelte
 <div class="grid-container">
-  <div class="grid">
-    <div>A</div>
-    <div>B</div>
-    <div>C</div>
-  </div>
+	<div class="grid">
+		<div>A</div>
+		<div>B</div>
+		<div>C</div>
+	</div>
 </div>
 
 <style>
-  .grid-container { container-type: inline-size; }
-  .grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--dry-space-6);
-  }
-  @container (min-width: 40rem) {
-    .grid { grid-template-columns: repeat(3, 1fr); }
-  }
+	.grid-container {
+		container-type: inline-size;
+	}
+	.grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: var(--dry-space-6);
+	}
+	@container (min-width: 40rem) {
+		.grid {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
 </style>
 ```
 
@@ -65,7 +72,7 @@ Use `Container` (simple component, no `.Root`) for constrained content width:
 
 ```svelte
 <Container>
-  <h1>Page Title</h1>
+	<h1>Page Title</h1>
 </Container>
 ```
 
@@ -77,32 +84,35 @@ Wrap each input in Field.Root, stack them with grid, put everything in a Card.
 
 ```svelte
 <script>
-  import '@dryui/ui/themes/default.css';
-  import { Card, Field, Label, Input, Button } from '@dryui/ui';
+	import '@dryui/ui/themes/default.css';
+	import { Card, Field, Label, Input, Button } from '@dryui/ui';
 
-  let name = $state('');
-  let email = $state('');
+	let name = $state('');
+	let email = $state('');
 </script>
 
 <Card.Root>
-  <Card.Header>Contact Info</Card.Header>
-  <Card.Content>
-    <form class="form-stack">
-      <Field.Root>
-        <Label>Name</Label>
-        <Input bind:value={name} />
-      </Field.Root>
-      <Field.Root>
-        <Label>Email</Label>
-        <Input type="email" bind:value={email} />
-      </Field.Root>
-      <Button type="submit" variant="solid">Save contact</Button>
-    </form>
-  </Card.Content>
+	<Card.Header>Contact Info</Card.Header>
+	<Card.Content>
+		<form class="form-stack">
+			<Field.Root>
+				<Label>Name</Label>
+				<Input bind:value={name} />
+			</Field.Root>
+			<Field.Root>
+				<Label>Email</Label>
+				<Input type="email" bind:value={email} />
+			</Field.Root>
+			<Button type="submit" variant="solid">Save contact</Button>
+		</form>
+	</Card.Content>
 </Card.Root>
 
 <style>
-  .form-stack { display: grid; gap: var(--dry-space-4); }
+	.form-stack {
+		display: grid;
+		gap: var(--dry-space-4);
+	}
 </style>
 ```
 
@@ -112,16 +122,16 @@ Use Field.Error to show validation messages.
 
 ```svelte
 <script>
-  let email = $state('');
-  let error = $derived(email && !email.includes('@') ? 'Please enter a valid email' : '');
+	let email = $state('');
+	let error = $derived(email && !email.includes('@') ? 'Please enter a valid email' : '');
 </script>
 
 <Field.Root>
-  <Label>Email</Label>
-  <Input type="email" bind:value={email} />
-  {#if error}
-    <Field.Error>{error}</Field.Error>
-  {/if}
+	<Label>Email</Label>
+	<Input type="email" bind:value={email} />
+	{#if error}
+		<Field.Error>{error}</Field.Error>
+	{/if}
 </Field.Root>
 ```
 
@@ -129,54 +139,57 @@ Use Field.Error to show validation messages.
 
 ```svelte
 <script>
-  let name = $state('');
-  let bio = $state('');
-  let country = $state('');
-  let agreed = $state(false);
+	let name = $state('');
+	let bio = $state('');
+	let country = $state('');
+	let agreed = $state(false);
 </script>
 
 <form class="form-stack">
-  <Field.Root>
-    <Label>Name</Label>
-    <Input bind:value={name} />
-  </Field.Root>
-
-  <Field.Root>
-    <Label>Bio</Label>
-    <Textarea bind:value={bio} />
-  </Field.Root>
-
-  <Field.Root>
-    <Label>Country</Label>
-    <Select.Root bind:value={country}>
-      <Select.Trigger>
-        <Select.Value placeholder="Select country..." />
-      </Select.Trigger>
-      <Select.Content>
-        <Select.Item value="us">United States</Select.Item>
-        <Select.Item value="uk">United Kingdom</Select.Item>
-      </Select.Content>
-    </Select.Root>
-  </Field.Root>
-
-  <Field.Root>
-    <div class="checkbox-row">
-      <Checkbox bind:checked={agreed} />
-      <Label>I agree to the terms</Label>
-    </div>
-  </Field.Root>
-
-  <Button type="submit" variant="solid">Submit form</Button>
+	<Field.Root>
+		<Label>Name</Label>
+		<Input bind:value={name} />
+	</Field.Root>
+
+	<Field.Root>
+		<Label>Bio</Label>
+		<Textarea bind:value={bio} />
+	</Field.Root>
+
+	<Field.Root>
+		<Label>Country</Label>
+		<Select.Root bind:value={country}>
+			<Select.Trigger>
+				<Select.Value placeholder="Select country..." />
+			</Select.Trigger>
+			<Select.Content>
+				<Select.Item value="us">United States</Select.Item>
+				<Select.Item value="uk">United Kingdom</Select.Item>
+			</Select.Content>
+		</Select.Root>
+	</Field.Root>
+
+	<Field.Root>
+		<div class="checkbox-row">
+			<Checkbox bind:checked={agreed} />
+			<Label>I agree to the terms</Label>
+		</div>
+	</Field.Root>
+
+	<Button type="submit" variant="solid">Submit form</Button>
 </form>
 
 <style>
-  .form-stack { display: grid; gap: var(--dry-space-4); }
-  .checkbox-row {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: center;
-    gap: var(--dry-space-2);
-  }
+	.form-stack {
+		display: grid;
+		gap: var(--dry-space-4);
+	}
+	.checkbox-row {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		align-items: center;
+		gap: var(--dry-space-2);
+	}
 </style>
 ```
 
@@ -186,25 +199,33 @@ Use Field.Error to show validation messages.
 
 ```svelte
 <div class="page-with-sidebar">
-  <nav class="sidebar">
-    <Button variant="ghost">Dashboard</Button>
-    <Button variant="ghost">Settings</Button>
-    <Button variant="ghost">Profile</Button>
-  </nav>
-  <main class="content">
-    <h1>Dashboard</h1>
-    <p>Main content here.</p>
-  </main>
+	<nav class="sidebar">
+		<Button variant="ghost">Dashboard</Button>
+		<Button variant="ghost">Settings</Button>
+		<Button variant="ghost">Profile</Button>
+	</nav>
+	<main class="content">
+		<h1>Dashboard</h1>
+		<p>Main content here.</p>
+	</main>
 </div>
 
 <style>
-  .page-with-sidebar {
-    display: grid;
-    grid-template-columns: 15rem 1fr;
-    gap: var(--dry-space-6);
-  }
-  .sidebar { display: grid; gap: var(--dry-space-2); align-content: start; }
-  .content { display: grid; gap: var(--dry-space-6); align-content: start; }
+	.page-with-sidebar {
+		display: grid;
+		grid-template-columns: 15rem 1fr;
+		gap: var(--dry-space-6);
+	}
+	.sidebar {
+		display: grid;
+		gap: var(--dry-space-2);
+		align-content: start;
+	}
+	.content {
+		display: grid;
+		gap: var(--dry-space-6);
+		align-content: start;
+	}
 </style>
 ```
 
@@ -212,31 +233,35 @@ Use Field.Error to show validation messages.
 
 ```svelte
 <div class="card-grid-container">
-  <div class="card-grid">
-    {#each items as item (item.id)}
-      <Card.Root>
-        <Card.Header>{item.title}</Card.Header>
-        <Card.Content>
-          <p>{item.description}</p>
-        </Card.Content>
-        <Card.Footer>
-          <Button variant="outline">View details</Button>
-        </Card.Footer>
-      </Card.Root>
-    {/each}
-  </div>
+	<div class="card-grid">
+		{#each items as item (item.id)}
+			<Card.Root>
+				<Card.Header>{item.title}</Card.Header>
+				<Card.Content>
+					<p>{item.description}</p>
+				</Card.Content>
+				<Card.Footer>
+					<Button variant="outline">View details</Button>
+				</Card.Footer>
+			</Card.Root>
+		{/each}
+	</div>
 </div>
 
 <style>
-  .card-grid-container { container-type: inline-size; }
-  .card-grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--dry-space-6);
-  }
-  @container (min-width: 40rem) {
-    .card-grid { grid-template-columns: repeat(3, 1fr); }
-  }
+	.card-grid-container {
+		container-type: inline-size;
+	}
+	.card-grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: var(--dry-space-6);
+	}
+	@container (min-width: 40rem) {
+		.card-grid {
+			grid-template-columns: repeat(3, 1fr);
+		}
+	}
 </style>
 ```
 
@@ -244,42 +269,48 @@ Use Field.Error to show validation messages.
 
 ```svelte
 <script>
-  let activeTab = $state('general');
-  let displayName = $state('');
+	let activeTab = $state('general');
+	let displayName = $state('');
 </script>
 
 <Container>
-  <div class="settings-stack">
-    <h1>Settings</h1>
-    <Tabs.Root bind:value={activeTab}>
-      <Tabs.List>
-        <Tabs.Trigger value="general">General</Tabs.Trigger>
-        <Tabs.Trigger value="security">Security</Tabs.Trigger>
-        <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
-      </Tabs.List>
-      <Tabs.Content value="general">
-        <Card.Root>
-          <Card.Content>
-            <form class="form-stack">
-              <Field.Root>
-                <Label>Display Name</Label>
-                <Input bind:value={displayName} />
-              </Field.Root>
-              <Button type="submit" variant="solid">Save settings</Button>
-            </form>
-          </Card.Content>
-        </Card.Root>
-      </Tabs.Content>
-      <Tabs.Content value="security">
-        <!-- Security settings -->
-      </Tabs.Content>
-    </Tabs.Root>
-  </div>
+	<div class="settings-stack">
+		<h1>Settings</h1>
+		<Tabs.Root bind:value={activeTab}>
+			<Tabs.List>
+				<Tabs.Trigger value="general">General</Tabs.Trigger>
+				<Tabs.Trigger value="security">Security</Tabs.Trigger>
+				<Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
+			</Tabs.List>
+			<Tabs.Content value="general">
+				<Card.Root>
+					<Card.Content>
+						<form class="form-stack">
+							<Field.Root>
+								<Label>Display Name</Label>
+								<Input bind:value={displayName} />
+							</Field.Root>
+							<Button type="submit" variant="solid">Save settings</Button>
+						</form>
+					</Card.Content>
+				</Card.Root>
+			</Tabs.Content>
+			<Tabs.Content value="security">
+				<!-- Security settings -->
+			</Tabs.Content>
+		</Tabs.Root>
+	</div>
 </Container>
 
 <style>
-  .settings-stack { display: grid; gap: var(--dry-space-8); }
-  .form-stack { display: grid; gap: var(--dry-space-4); }
+	.settings-stack {
+		display: grid;
+		gap: var(--dry-space-8);
+	}
+	.form-stack {
+		display: grid;
+		gap: var(--dry-space-4);
+	}
 </style>
 ```
 
@@ -287,41 +318,44 @@ Use Field.Error to show validation messages.
 
 ```svelte
 <Container>
-  <div class="page-stack">
-    <div class="page-header">
-      <h1>Users</h1>
-      <Button variant="solid">Add user</Button>
-    </div>
-    <Table.Root>
-      <Table.Header>
-        <Table.Row>
-          <Table.Head>Name</Table.Head>
-          <Table.Head>Email</Table.Head>
-          <Table.Head>Role</Table.Head>
-        </Table.Row>
-      </Table.Header>
-      <Table.Body>
-        {#each users as user (user.id)}
-          <Table.Row>
-            <Table.Cell>{user.name}</Table.Cell>
-            <Table.Cell>{user.email}</Table.Cell>
-            <Table.Cell>
-              <Badge variant="soft">{user.role}</Badge>
-            </Table.Cell>
-          </Table.Row>
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </div>
+	<div class="page-stack">
+		<div class="page-header">
+			<h1>Users</h1>
+			<Button variant="solid">Add user</Button>
+		</div>
+		<Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head>Name</Table.Head>
+					<Table.Head>Email</Table.Head>
+					<Table.Head>Role</Table.Head>
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				{#each users as user (user.id)}
+					<Table.Row>
+						<Table.Cell>{user.name}</Table.Cell>
+						<Table.Cell>{user.email}</Table.Cell>
+						<Table.Cell>
+							<Badge variant="soft">{user.role}</Badge>
+						</Table.Cell>
+					</Table.Row>
+				{/each}
+			</Table.Body>
+		</Table.Root>
+	</div>
 </Container>
 
 <style>
-  .page-stack { display: grid; gap: var(--dry-space-6); }
-  .page-header {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-  }
+	.page-stack {
+		display: grid;
+		gap: var(--dry-space-6);
+	}
+	.page-header {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+	}
 </style>
 ```
 
@@ -341,7 +375,10 @@ Use Field.Error to show validation messages.
 <Container>...</Container>
 
 <style>
-  .layout { display: grid; gap: var(--dry-space-4); }
+	.layout {
+		display: grid;
+		gap: var(--dry-space-4);
+	}
 </style>
 ```
 
@@ -350,12 +387,12 @@ Use Field.Error to show validation messages.
 ```svelte
 <!-- Wrong: bare Card -->
 <Card>
-  <Card.Content>...</Card.Content>
+	<Card.Content>...</Card.Content>
 </Card>
 
 <!-- Right: Card.Root -->
 <Card.Root>
-  <Card.Content>...</Card.Content>
+	<Card.Content>...</Card.Content>
 </Card.Root>
 ```
 
@@ -363,34 +400,34 @@ Use Field.Error to show validation messages.
 
 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.
 
-| UI Need           | Use This                               | NOT This                    |
-| ----------------- | -------------------------------------- | --------------------------- |
-| Date picker       | `DatePicker.Root`                      | `<input type="date">`       |
-| Date range        | `DateRangePicker.Root`                 | Two `<input type="date">`   |
-| Time input        | `TimeInput`                            | `<input type="time">`       |
-| Dropdown select   | `Select.Root`                          | `<select>`                  |
-| Searchable select | `Combobox.Root`                        | `<input>` + custom dropdown |
-| Modal dialog      | `Dialog.Root`                          | `<dialog>` or manual overlay|
-| Confirmation      | `AlertDialog.Root`                     | `window.confirm()`          |
-| Side panel        | `Drawer.Root`                          | Fixed-position div          |
-| Data table        | `Table.Root`                           | `<table>`                   |
-| Person image      | `Avatar`                               | Emoji or bare `<img>`       |
-| Content image     | `Image`                                | Bare `<img>`                |
-| Multi-step flow   | `Stepper.Root`                         | Manual step divs            |
-| Progress bar      | `Progress`                             | CSS-only bar                |
-| Inline chart      | `Sparkline`                            | Manual SVG                  |
-| Full chart        | `Chart.Root`                           | External chart library      |
-| Max-width wrapper | `Container`                            | `max-width` + `margin: auto`|
-| Form field        | `Field.Root` + `Label` + Input         | `<label>` + `<input>`       |
-| Status indicator  | `Badge`                                | Colored `<span>`            |
-| Loading state     | `Skeleton` or `Spinner`                | Text "Loading..."           |
-| Empty state       | `EmptyState.Root`                      | Custom empty div            |
-| Notifications     | `Toast`                                | Alert div                   |
-| Keyboard shortcut | `Kbd`                                  | `<code>`                    |
-| Code display      | `CodeBlock`                            | `<pre><code>`               |
-| File upload       | `FileUpload.Root`                      | `<input type="file">`       |
-| Color picker      | `ColorPicker.Root`                     | `<input type="color">`      |
-| Collapsible       | `Accordion.Root` or `Collapsible.Root` | Manual toggle with if/else  |
+| UI Need           | Use This                               | NOT This                     |
+| ----------------- | -------------------------------------- | ---------------------------- |
+| Date picker       | `DatePicker.Root`                      | `<input type="date">`        |
+| Date range        | `DateRangePicker.Root`                 | Two `<input type="date">`    |
+| Time input        | `TimeInput`                            | `<input type="time">`        |
+| Dropdown select   | `Select.Root`                          | `<select>`                   |
+| Searchable select | `Combobox.Root`                        | `<input>` + custom dropdown  |
+| Modal dialog      | `Dialog.Root`                          | `<dialog>` or manual overlay |
+| Confirmation      | `AlertDialog.Root`                     | `window.confirm()`           |
+| Side panel        | `Drawer.Root`                          | Fixed-position div           |
+| Data table        | `Table.Root`                           | `<table>`                    |
+| Person image      | `Avatar`                               | Emoji or bare `<img>`        |
+| Content image     | `Image`                                | Bare `<img>`                 |
+| Multi-step flow   | `Stepper.Root`                         | Manual step divs             |
+| Progress bar      | `Progress`                             | CSS-only bar                 |
+| Inline chart      | `Sparkline`                            | Manual SVG                   |
+| Full chart        | `Chart.Root`                           | External chart library       |
+| Max-width wrapper | `Container`                            | `max-width` + `margin: auto` |
+| Form field        | `Field.Root` + `Label` + Input         | `<label>` + `<input>`        |
+| Status indicator  | `Badge`                                | Colored `<span>`             |
+| Loading state     | `Skeleton` or `Spinner`                | Text "Loading..."            |
+| Empty state       | `EmptyState.Root`                      | Custom empty div             |
+| Notifications     | `Toast`                                | Alert div                    |
+| Keyboard shortcut | `Kbd`                                  | `<code>`                     |
+| Code display      | `CodeBlock`                            | `<pre><code>`                |
+| File upload       | `FileUpload.Root`                      | `<input type="file">`        |
+| Color picker      | `ColorPicker.Root`                     | `<input type="color">`       |
+| Collapsible       | `Accordion.Root` or `Collapsible.Root` | Manual toggle with if/else   |
 
 ## Composition Recipes