@dryui/ui 3.0.0 → 4.0.1

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

@@ -1,312 +0,0 @@
-# Compound Components
-
-## Core Rule
-
-Every compound component uses `.Root` as the container. Never use the bare name.
-
-```svelte
-<!-- Incorrect -->
-<Card>...</Card>
-<Dialog>...</Dialog>
-<Tabs>...</Tabs>
-
-<!-- Correct -->
-<Card.Root>...</Card.Root>
-<Dialog.Root>...</Dialog.Root>
-<Tabs.Root>...</Tabs.Root>
-```
-
-## Parts Reference
-
-Below are the parts for the most commonly used compound components. Prefer `dryui ask --scope component "<name>"` for the full, up-to-date parts list.
-
-### Card
-
-Parts: Root, Header, Content, Footer
-
-```svelte
-<Card.Root>
-	<Card.Header>Title</Card.Header>
-	<Card.Content>
-		<p>Body content goes here.</p>
-	</Card.Content>
-	<Card.Footer>
-		<Button variant="solid">Action</Button>
-	</Card.Footer>
-</Card.Root>
-```
-
-### Dialog
-
-Parts: Root, Trigger, Content, Overlay, Header, Body, Footer, Close
-
-```svelte
-<script>
-	let showDialog = $state(false);
-</script>
-
-<Dialog.Root bind:open={showDialog}>
-	<Dialog.Trigger>
-		<Button>Open Dialog</Button>
-	</Dialog.Trigger>
-	<Dialog.Content>
-		<Dialog.Header>Confirm Action</Dialog.Header>
-		<Dialog.Body>
-			<p>Are you sure you want to proceed?</p>
-		</Dialog.Body>
-		<Dialog.Footer>
-			<Button variant="outline" onclick={() => (showDialog = false)}>Cancel</Button>
-			<Button variant="solid">Confirm</Button>
-		</Dialog.Footer>
-	</Dialog.Content>
-</Dialog.Root>
-```
-
-### Drawer
-
-Parts: Root, Trigger, Content, Overlay, Header, Body, Footer, Close
-
-Same structure as Dialog but slides in from the side.
-
-```svelte
-<script>
-	let showDrawer = $state(false);
-</script>
-
-<Drawer.Root bind:open={showDrawer}>
-	<Drawer.Trigger>
-		<Button>Open Drawer</Button>
-	</Drawer.Trigger>
-	<Drawer.Content>
-		<Drawer.Header>Settings</Drawer.Header>
-		<Drawer.Body>
-			<p>Drawer content here.</p>
-		</Drawer.Body>
-		<Drawer.Footer>
-			<Button variant="solid">Save</Button>
-		</Drawer.Footer>
-	</Drawer.Content>
-</Drawer.Root>
-```
-
-### Tabs
-
-Parts: Root, List, Trigger, Content
-
-Use `bind:value` on Root to track the active tab.
-
-```svelte
-<script>
-	let activeTab = $state('one');
-</script>
-
-<Tabs.Root bind:value={activeTab}>
-	<Tabs.List>
-		<Tabs.Trigger value="one">Tab 1</Tabs.Trigger>
-		<Tabs.Trigger value="two">Tab 2</Tabs.Trigger>
-	</Tabs.List>
-	<Tabs.Content value="one">First panel</Tabs.Content>
-	<Tabs.Content value="two">Second panel</Tabs.Content>
-</Tabs.Root>
-```
-
-### Accordion
-
-Parts: Root, Item, Trigger, Content
-
-```svelte
-<Accordion.Root>
-	<Accordion.Item value="a">
-		<Accordion.Trigger>Section A</Accordion.Trigger>
-		<Accordion.Content>Content for section A.</Accordion.Content>
-	</Accordion.Item>
-	<Accordion.Item value="b">
-		<Accordion.Trigger>Section B</Accordion.Trigger>
-		<Accordion.Content>Content for section B.</Accordion.Content>
-	</Accordion.Item>
-</Accordion.Root>
-```
-
-### AlertDialog
-
-Parts: Root, Trigger, Content, Overlay, Header, Body, Footer, Action, Cancel
-
-Use AlertDialog for destructive confirmations. It traps focus and requires explicit user action.
-
-```svelte
-<AlertDialog.Root>
-	<AlertDialog.Trigger>
-		<Button variant="outline">Delete Account</Button>
-	</AlertDialog.Trigger>
-	<AlertDialog.Content>
-		<AlertDialog.Header>Are you sure?</AlertDialog.Header>
-		<AlertDialog.Body>
-			<p>This action cannot be undone.</p>
-		</AlertDialog.Body>
-		<AlertDialog.Footer>
-			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
-			<AlertDialog.Action>Delete</AlertDialog.Action>
-		</AlertDialog.Footer>
-	</AlertDialog.Content>
-</AlertDialog.Root>
-```
-
-### DropdownMenu
-
-Parts: Root, Trigger, Content, Item, Separator, Group, Label
-
-```svelte
-<DropdownMenu.Root>
-	<DropdownMenu.Trigger>
-		<Button variant="outline">Options</Button>
-	</DropdownMenu.Trigger>
-	<DropdownMenu.Content>
-		<DropdownMenu.Item onclick={handleEdit}>Edit</DropdownMenu.Item>
-		<DropdownMenu.Item onclick={handleDuplicate}>Duplicate</DropdownMenu.Item>
-		<DropdownMenu.Separator />
-		<DropdownMenu.Item onclick={handleDelete}>Delete</DropdownMenu.Item>
-	</DropdownMenu.Content>
-</DropdownMenu.Root>
-```
-
-### Select
-
-Parts: Root, Trigger, Content, Item, Value
-
-```svelte
-<script>
-	let selected = $state('');
-</script>
-
-<Select.Root bind:value={selected}>
-	<Select.Trigger>
-		<Select.Value placeholder="Choose..." />
-	</Select.Trigger>
-	<Select.Content>
-		<Select.Item value="a">Alpha</Select.Item>
-		<Select.Item value="b">Beta</Select.Item>
-		<Select.Item value="c">Gamma</Select.Item>
-	</Select.Content>
-</Select.Root>
-```
-
-### Field
-
-Parts: Root, Description, Error
-
-Field.Root wraps a Label and input component. The Label and input (Input, Select, Textarea, etc.) are direct children, not Field parts.
-
-```svelte
-<Field.Root>
-	<Label>Username</Label>
-	<Input bind:value={username} />
-	<Field.Description>Choose a unique username.</Field.Description>
-	<Field.Error>Username is already taken.</Field.Error>
-</Field.Root>
-```
-
-### Table
-
-Parts: Root, Header, Body, Footer, Row, Head, Cell, Caption
-
-```svelte
-<Table.Root>
-	<Table.Caption>User list</Table.Caption>
-	<Table.Header>
-		<Table.Row>
-			<Table.Head>Name</Table.Head>
-			<Table.Head>Email</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.Row>
-		{/each}
-	</Table.Body>
-</Table.Root>
-```
-
-### Popover
-
-Parts: Root, Trigger, Content
-
-```svelte
-<Popover.Root>
-	<Popover.Trigger>
-		<Button variant="ghost">Info</Button>
-	</Popover.Trigger>
-	<Popover.Content>
-		<p>Additional details here.</p>
-	</Popover.Content>
-</Popover.Root>
-```
-
-### Combobox
-
-Parts: Root, Input, Content, Item, Empty
-
-```svelte
-<script>
-	let query = $state('');
-</script>
-
-<Combobox.Root bind:value={query}>
-	<Combobox.Input placeholder="Search..." />
-	<Combobox.Content>
-		<Combobox.Item value="apple" index={0}>Apple</Combobox.Item>
-		<Combobox.Item value="banana" index={1}>Banana</Combobox.Item>
-		<Combobox.Empty>No results found.</Combobox.Empty>
-	</Combobox.Content>
-</Combobox.Root>
-```
-
-## Common Mistakes
-
-### Using bare compound name
-
-```svelte
-<!-- Incorrect: bare name -->
-<Tabs>...</Tabs>
-<Select>...</Select>
-
-<!-- Correct: always .Root -->
-<Tabs.Root>...</Tabs.Root>
-<Select.Root>...</Select.Root>
-```
-
-### Orphaned parts without Root
-
-```svelte
-<!-- Incorrect: parts without their Root wrapper -->
-<Card.Header>Title</Card.Header>
-<Card.Content>Body</Card.Content>
-
-<!-- Correct: parts inside Root -->
-<Card.Root>
-	<Card.Header>Title</Card.Header>
-	<Card.Content>Body</Card.Content>
-</Card.Root>
-```
-
-### Mixing parts from different components
-
-```svelte
-<!-- Incorrect: Dialog.Header inside Drawer -->
-<Drawer.Root>
-	<Dialog.Header>Title</Dialog.Header>
-</Drawer.Root>
-
-<!-- Correct: use matching parts -->
-<Drawer.Root>
-	<Drawer.Header>Title</Drawer.Header>
-</Drawer.Root>
-```
-
-## Full Compound Component List
-
-Run `dryui ask --scope component "<name>"` for any component's complete parts list:
-
-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/native-web-transitions.md

@@ -1,99 +0,0 @@
-# Native Web Transitions
-
-Use this skill when a UI should animate with platform APIs first, not JS animation libraries.
-
-## Default approach
-
-1. Start from a fully functional no-animation version.
-2. Add JS feature detection for `document.startViewTransition` before calling it.
-3. Gate transition-specific CSS with `@supports (view-transition-name: foo)`.
-4. Gate scroll-driven CSS with `@supports (animation-timeline: view())`.
-5. Add `prefers-reduced-motion` handling that removes typewriter, transition, and scroll-linked animation.
-6. Keep fallback behavior immediate and complete rather than approximating the effect with extra JS.
-
-## View Transition pattern
-
-Use when DOM changes should animate as a single state change.
-
-```ts
-function runWithViewTransition(update: () => void) {
-	if (!document.startViewTransition) {
-		update();
-		return Promise.resolve();
-	}
-
-	const transition = document.startViewTransition(update);
-	return transition.finished.catch(() => {});
-}
-```
-
-Use stable names only on the elements that should animate:
-
-```css
-@supports (view-transition-name: foo) {
-	.message {
-		view-transition-name: var(--vt-name);
-	}
-
-	::view-transition-new(message-enter) {
-		animation: dry-slide-up 240ms ease-out;
-	}
-}
-```
-
-Notes:
-
-- Assign unique `view-transition-name` values per inserted item.
-- Keep transitions short; they should clarify state changes, not delay interaction.
-- Trigger follow-up work such as `scrollIntoView` after `transition.finished`.
-
-## Scroll-driven reveal pattern
-
-Use for footer or section entry reveals tied to viewport position.
-
-```css
-@supports (animation-timeline: view()) {
-	.reveal {
-		animation: dry-fade-up linear both;
-		animation-timeline: view();
-		animation-range: entry 15% cover 35%;
-	}
-}
-```
-
-Fallback: leave the section fully visible with no animation.
-
-## Reduced motion
-
-Always include a reduced-motion override:
-
-```css
-@media (prefers-reduced-motion: reduce) {
-	.typing-dot,
-	.reveal {
-		animation: none;
-	}
-
-	:root {
-		scroll-behavior: auto;
-	}
-}
-```
-
-The `@media` block comes after the default rule in the same scoped stylesheet, so equal specificity plus source order handles the override without `!important` (banned by `@dryui/lint` via `dryui/no-important`). In JS, skip delayed typewriter/replay steps and render the final state immediately when reduced motion is active.
-
-## Svelte notes
-
-- Keep DOM mutation orchestration in the component that owns the rendered list.
-- Use `$effect` or `onMount` for browser-only APIs.
-- Do not access `document` or `window` during SSR; guard with `browser` or call inside browser-only lifecycle.
-- Prefer state-driven rendering and wrap only the mutation boundary in `startViewTransition`.
-
-## Checklist
-
-- Feature-detected `document.startViewTransition`
-- `@supports` around transition CSS
-- `@supports` around `animation-timeline`
-- `prefers-reduced-motion` disables motion and delay
-- Fallback path is functional without animation
-- No dependency on third-party animation runtime

package/skills/dryui/rules/svelte.md

@@ -1,234 +0,0 @@
-# Svelte 5 Standards
-
-## Core Principle
-
-Use Svelte 5 runes correctly. Use native browser APIs. No legacy patterns.
-
-## Rune Rules
-
-### `$state` -- Only for reactive variables
-
-```svelte
-// GOOD: reactive variable that triggers UI updates let count = $state(0); // GOOD: use $state.raw
-for large objects that are reassigned, not mutated let items = $state.raw(await fetchItems()); //
-BAD: deep proxy overhead on large data let items = $state(await fetchItems());
-```
-
-### `$derived` -- For computed values, NOT `$effect`
-
-```svelte
-// GOOD
-let doubled = $derived(count * 2);
-let filtered = $derived.by(() => items.filter(i => i.active));
-
-// BAD: never update state inside $effect
-let doubled;
-$effect(() => { doubled = count * 2; }); // WRONG
-```
-
-### `$effect` -- Escape hatch, mostly avoid
-
-Use `$effect` ONLY for:
-
-- Syncing with external libs (D3, maps, canvas)
-- Browser API setup that needs cleanup (observers, listeners)
-- NOT for derived state, NOT for event responses
-
-**Never use two `$effect`s for bidirectional sync.** They race: Effect A sees a derived value change, reads the stale prop, and overwrites the state back to the old value before Effect B can sync the prop.
-
-```svelte
-// BAD: two effects fighting over the same state
-$effect(() => {
-  if (value !== hex && isValidHex(value)) internalHsv = rgbToHsv(hexToRgb(value));
-});
-$effect(() => { value = hex; }); // races with Effect 1
-
-// GOOD: sync prop directly in setter, single effect for external changes
-function updateHsv(hsv: HSV) {
-  internalHsv = hsv;
-  const newHex = rgbToHex(hsvToRgb(hsv));
-  lastSyncedValue = newHex;
-  value = newHex;
-}
-let lastSyncedValue = value;
-$effect.pre(() => {
-  if (value !== lastSyncedValue && isValid(value)) {
-    lastSyncedValue = value;
-    internalState = parse(value);
-  }
-});
-```
-
-Prefer `{@attach}` for DOM element lifecycle:
-
-```svelte
-<!-- GOOD: attach for element lifecycle -->
-<canvas {@attach node => { const ctx = node.getContext('2d'); ... }}></canvas>
-
-<!-- BAD: $effect + bind:this -->
-<script>
-  let canvas;
-  $effect(() => { if (canvas) { ... } });
-</script>
-<canvas bind:this={canvas}></canvas>
-```
-
-### `$props` -- Always typed, always destructured
-
-```svelte
-<script lang="ts">
-	interface Props extends HTMLButtonAttributes {
-		variant?: 'solid' | 'outline' | 'ghost';
-		size?: 'sm' | 'md' | 'lg';
-	}
-	let { variant = 'solid', size = 'md', children, ...rest }: Props = $props();
-</script>
-```
-
-### `$bindable` -- For two-way binding props
-
-```svelte
-<script lang="ts">
-	interface Props {
-		value: string;
-	}
-	let { value = $bindable('') }: Props = $props();
-</script>
-```
-
-When a component has internal state derived from a `$bindable` prop, sync the prop in setter functions -- never via `$effect` chains.
-
-## Component Patterns
-
-### Snippets replace slots
-
-```svelte
-<!-- Component receives snippet as prop -->
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	interface Props {
-		icon?: Snippet;
-		children: Snippet;
-	}
-	let { icon, children }: Props = $props();
-</script>
-
-{#snippet icon()}
-	<svg>...</svg>
-{/snippet}
-<Button {icon}>Click me</Button>
-<button>
-	{#if icon}{@render icon()}{/if}
-	{@render children()}
-</button>
-```
-
-### Compound components via context
-
-```typescript
-// context.svelte.ts
-import { getContext, setContext } from 'svelte';
-const KEY = Symbol('accordion');
-
-export function setAccordionCtx(ctx: AccordionState) {
-	setContext(KEY, ctx);
-}
-export function getAccordionCtx(): AccordionState {
-	return getContext(KEY);
-}
-```
-
-### Shared reactive logic in `.svelte.ts` files
-
-```typescript
-export function createCounter(initial = 0) {
-	let count = $state(initial);
-	return {
-		get count() {
-			return count;
-		},
-		increment() {
-			count++;
-		},
-		reset() {
-			count = initial;
-		}
-	};
-}
-```
-
-### Event handling in component libraries
-
-Svelte 5 compiles `onclick` on elements into event delegation. This can fail on `<div>` elements in published packages. Use actions for reliable native event binding on non-button elements:
-
-```svelte
-// BAD: onclick on <div> in component library
-<div onclick={handleClick} {...rest}></div>
-
-// GOOD: Svelte action with native addEventListener
-<script>
-  function interactive(node: HTMLElement) {
-    function handleClick() { /* ... */ }
-    node.addEventListener('click', handleClick);
-    return { destroy() { node.removeEventListener('click', handleClick); } };
-  }
-</script>
-<div use:interactive {...rest}></div>
-```
-
-## Native Browser APIs -- No Libraries
-
-| Need        | Use                              | NOT                   |
-| ----------- | -------------------------------- | --------------------- |
-| Modals      | `<dialog>` + `showModal()`       | JS modal libs         |
-| Dropdowns   | Popover API (`popover="auto"`)   | Floating UI           |
-| Positioning | CSS Anchor Positioning           | Floating UI/Popper    |
-| Responsive  | Container queries (`@container`) | Media queries         |
-| Focus trap  | `<dialog>` + `inert` attribute   | focus-trap libs       |
-| Scroll lock | `<dialog>` modal behavior        | body-scroll-lock      |
-| Accordions  | `<details name="group">`         | custom JS             |
-| Animations  | Web Animations API / CSS         | GSAP for simple cases |
-| Dates       | `Intl.DateTimeFormat`            | moment/date-fns       |
-| Copy/paste  | Clipboard API                    | clipboard.js          |
-
-### Popover API: `auto` vs `manual`
-
-`popover="auto"` gives free light-dismiss but only works with `popovertarget` on `<button>`. Components that open programmatically must use `popover="manual"` with explicit dismiss logic.
-
-## Styling Rules
-
-- Svelte scoped `<style>` blocks -- no CSS modules
-- CSS variables (`--dry-*`) for theming
-- Container queries for responsive layout -- never media queries for sizing
-- `data-state`, `data-disabled` attributes for state-based styling
-- No inline styles except dynamic values from props
-- Never use `!important` or `:global()`
-
-### CSS custom property tokens: use `var()` fallbacks
-
-```css
-/* BAD: local declaration blocks parent overrides */
-.root {
-	--sidebar-width: 18rem;
-	width: var(--sidebar-width);
-}
-
-/* GOOD: fallback lets parents override */
-.root {
-	width: var(--sidebar-width, 18rem);
-}
-```
-
-## SSR Safety
-
-Guard browser APIs with `onMount` or `{@attach}`:
-
-```svelte
-<script>
-	import { onMount } from 'svelte';
-	let mounted = $state(false);
-	onMount(() => {
-		mounted = true;
-	});
-</script>
-```