@dryui/ui 0.2.0 → 0.2.2

package/dist/tour/index.d.ts

@@ -2,6 +2,6 @@ export type { TourStep, TourRootProps, TourTooltipProps } from '@dryui/primitive
 import TourRoot from './tour-root.svelte';
 import TourTooltip from './tour-tooltip.svelte';
 export declare const Tour: {
-	Root: typeof TourRoot;
-	Tooltip: typeof TourTooltip;
+    Root: typeof TourRoot;
+    Tooltip: typeof TourTooltip;
 };

package/dist/tour/tour-root.svelte

@@ -63,7 +63,10 @@
 		z-index: var(--dry-layer-tour-tooltip);
 		pointer-events: auto;
 		display: grid;
-		grid-template-columns: minmax(16rem, min(var(--dry-tour-tooltip-max-width), calc(100vw - var(--dry-space-4))));
+		grid-template-columns: minmax(
+			16rem,
+			min(var(--dry-tour-tooltip-max-width), calc(100vw - var(--dry-space-4)))
+		);
 		background: var(--dry-tour-tooltip-bg);
 		color: var(--dry-color-text-strong);
 		border: 1px solid var(--dry-color-stroke-weak);

package/dist/transfer/index.d.ts

@@ -1,26 +1,19 @@
 import type { Snippet } from 'svelte';
-import type {
-	TransferListProps as PrimitiveTransferListProps,
-	TransferItem as TransferItemType
-} from '@dryui/primitives';
+import type { TransferListProps as PrimitiveTransferListProps, TransferItem as TransferItemType } from '@dryui/primitives';
 export type { TransferRootProps, TransferItemProps, TransferActionsProps } from '@dryui/primitives';
 export interface TransferListProps extends PrimitiveTransferListProps {
-	filterable?: boolean;
-	content?: Snippet<
-		[
-			{
-				items: TransferItemType[];
-			}
-		]
-	>;
+    filterable?: boolean;
+    content?: Snippet<[{
+        items: TransferItemType[];
+    }]>;
 }
 import TransferRoot from './transfer-root.svelte';
 import TransferList from './transfer-list.svelte';
 import TransferItem from './transfer-item.svelte';
 import TransferActions from './transfer-actions.svelte';
 export declare const Transfer: {
-	Root: typeof TransferRoot;
-	List: typeof TransferList;
-	Item: typeof TransferItem;
-	Actions: typeof TransferActions;
+    Root: typeof TransferRoot;
+    List: typeof TransferList;
+    Item: typeof TransferItem;
+    Actions: typeof TransferActions;
 };

package/dist/tree/index.d.ts

@@ -1,16 +1,11 @@
-export type {
-	TreeRootProps,
-	TreeItemProps,
-	TreeItemLabelProps,
-	TreeItemChildrenProps
-} from '@dryui/primitives';
+export type { TreeRootProps, TreeItemProps, TreeItemLabelProps, TreeItemChildrenProps } from '@dryui/primitives';
 import TreeRoot from './tree-root.svelte';
 import TreeItem from './tree-item.svelte';
 import TreeItemLabel from './tree-item-label.svelte';
 import TreeItemChildren from './tree-item-children.svelte';
 export declare const Tree: {
-	Root: typeof TreeRoot;
-	Item: typeof TreeItem;
-	ItemLabel: typeof TreeItemLabel;
-	ItemChildren: typeof TreeItemChildren;
+    Root: typeof TreeRoot;
+    Item: typeof TreeItem;
+    ItemLabel: typeof TreeItemLabel;
+    ItemChildren: typeof TreeItemChildren;
 };

package/dist/typing-indicator/index.d.ts

@@ -1,3 +1,4 @@
 import type { HTMLAttributes } from 'svelte/elements';
-export interface TypingIndicatorProps extends HTMLAttributes<HTMLDivElement> {}
+export interface TypingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+}
 export { default as TypingIndicator } from './typing-indicator.svelte';

package/dist/typography/index.d.ts

@@ -1,23 +1,20 @@
-import type {
-	HeadingProps as PrimitiveHeadingProps,
-	TextProps as PrimitiveTextProps
-} from '@dryui/primitives';
+import type { HeadingProps as PrimitiveHeadingProps, TextProps as PrimitiveTextProps } from '@dryui/primitives';
 export interface HeadingProps extends PrimitiveHeadingProps {
-	variant?: 'default' | 'display';
+    variant?: 'default' | 'display';
 }
 export type { CodeProps, BlockquoteProps } from '@dryui/primitives';
 export interface TextProps extends PrimitiveTextProps {
-	color?: 'default' | 'muted' | 'secondary';
-	variant?: 'default' | 'muted' | 'secondary';
-	size?: 'sm' | 'md' | 'lg';
+    color?: 'default' | 'muted' | 'secondary';
+    variant?: 'default' | 'muted' | 'secondary';
+    size?: 'sm' | 'md' | 'lg';
 }
 import TypographyHeading from './heading.svelte';
 import TypographyText from './text.svelte';
 import TypographyCode from './code.svelte';
 import TypographyBlockquote from './blockquote.svelte';
 export declare const Typography: {
-	Heading: typeof TypographyHeading;
-	Text: typeof TypographyText;
-	Code: typeof TypographyCode;
-	Blockquote: typeof TypographyBlockquote;
+    Heading: typeof TypographyHeading;
+    Text: typeof TypographyText;
+    Code: typeof TypographyCode;
+    Blockquote: typeof TypographyBlockquote;
 };

package/dist/visually-hidden/index.d.ts

@@ -1,2 +1,6 @@
-export type { VisuallyHiddenProps } from '@dryui/primitives';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface VisuallyHiddenProps extends HTMLAttributes<HTMLSpanElement> {
+    children: Snippet;
+}
 export { default as VisuallyHidden } from './visually-hidden.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {

package/skills/dryui/SKILL.md

@@ -27,8 +27,10 @@ The test: can you point to an `info` or `compose` call for every component in yo
 Most DryUI components are compound — they require `<Card.Root>`, not `<Card>`. The bare name silently fails or renders wrong. Assume compound; verify with `info`.
 
 ```svelte
-<!-- Wrong --> <Card>content</Card>
-<!-- Right --> <Card.Root>content</Card.Root>
+<!-- Wrong -->
+<Card>content</Card>
+<!-- Right -->
+<Card.Root>content</Card.Root>
 ```
 
 Compound components include Accordion, Alert, AlertDialog, Breadcrumb, Calendar, Card, Carousel, Chart, ChipGroup, Collapsible, ColorPicker, Combobox, CommandPalette, ContextMenu, DataGrid, DateField, DatePicker, DateRangePicker, DescriptionList, Dialog, DragAndDrop, Drawer, DropdownMenu, Field, Fieldset, FileSelect, FileUpload, FlipCard, FloatButton, HoverCard, InputGroup, LinkPreview, List, Listbox, Map, MegaMenu, Menubar, MultiSelectCombobox, NavigationMenu, NotificationCenter, OptionSwatchGroup, Pagination, PinInput, Popover, RadioGroup, RangeCalendar, RichTextEditor, SegmentedControl, Select, Sidebar, Splitter, StarRating, Stepper, Table, TableOfContents, Tabs, TagsInput, Timeline, Toast, ToggleGroup, Toolbar, Tooltip, Tour, Transfer, Tree and Typography.
@@ -47,10 +49,16 @@ The test: every compound component in your markup uses `.Root`, and its parts ar
 
 ```css
 /* Wrong */
-.card { background: #6366f1; color: white; }
+.card {
+	background: #6366f1;
+	color: white;
+}
 
 /* Right */
-.card { background: var(--dry-color-fill-brand); color: var(--dry-color-text-strong); }
+.card {
+	background: var(--dry-color-fill-brand);
+	color: var(--dry-color-text-strong);
+}
 ```
 
 The test: does your CSS contain zero hex colors, zero `rgb()` values, and zero inline styles?
@@ -66,8 +74,12 @@ The test: does your CSS contain zero hex colors, zero `rgb()` values, and zero i
 
 ```svelte
 <div class="layout">...</div>
+
 <style>
-  .layout { display: grid; gap: var(--dry-space-4); }
+	.layout {
+		display: grid;
+		gap: var(--dry-space-4);
+	}
 </style>
 ```
 
@@ -89,8 +101,8 @@ The test: grep your output for `display: flex`, `style=`, `@media` — all shoul
 
 <!-- Right -->
 <Field.Root>
-  <Label>Email</Label>
-  <Input bind:value={email} />
+	<Label>Email</Label>
+	<Input bind:value={email} />
 </Field.Root>
 ```
 
@@ -111,7 +123,7 @@ The test: search your markup for raw `<input`, `<select>`, `<dialog>`, `<button>
 **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: `$skill-installer install https://github.com/rob-balfre/dryui/tree/main/packages/ui/skills/dryui` then `codex mcp add dryui -- npx -y @dryui/mcp`
+- 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)
 
 **3. Bootstrap the project** — `init` detects your project state and applies whatever is missing:
@@ -136,8 +148,8 @@ This works for greenfield (empty directory), brownfield (existing non-SvelteKit
 3. In root layout (`src/routes/+layout.svelte`), import themes:
    ```svelte
    <script>
-     import '@dryui/ui/themes/default.css';
-     import '@dryui/ui/themes/dark.css';
+   	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
@@ -164,12 +176,12 @@ Use these to look up APIs, discover components, plan setup, and validate code.
 
 ### MCP tools (preferred)
 
-| Workflow | Tools |
-|----------|-------|
-| Project setup | `detect_project`, `plan_install`, `plan_add` |
-| Lookup & composition | `info`, `get`, `list`, `compose` |
-| Validation | `review`, `diagnose` |
-| Audit | `doctor`, `lint` |
+| Workflow             | Tools                                        |
+| -------------------- | -------------------------------------------- |
+| Project setup        | `detect_project`, `plan_install`, `plan_add` |
+| Lookup & composition | `info`, `get`, `list`, `compose`             |
+| Validation           | `review`, `diagnose`                         |
+| Audit                | `doctor`, `lint`                             |
 
 ### CLI fallback