@dryui/ui 0.2.1 → 0.3.0

package/dist/timeline/index.d.ts

@@ -1,14 +1,7 @@
 import type { TimelineRootProps as PrimitiveTimelineRootProps } from '@dryui/primitives';
-export type {
-	TimelineItemProps,
-	TimelineIconProps,
-	TimelineContentProps,
-	TimelineTitleProps,
-	TimelineDescriptionProps,
-	TimelineTimeProps
-} from '@dryui/primitives';
+export type { TimelineItemProps, TimelineIconProps, TimelineContentProps, TimelineTitleProps, TimelineDescriptionProps, TimelineTimeProps } from '@dryui/primitives';
 export interface TimelineRootProps extends PrimitiveTimelineRootProps {
-	orientation?: 'vertical' | 'horizontal';
+    orientation?: 'vertical' | 'horizontal';
 }
 import TimelineRoot from './timeline-root.svelte';
 import TimelineItem from './timeline-item.svelte';
@@ -18,11 +11,11 @@ import TimelineTitle from './timeline-title.svelte';
 import TimelineDescription from './timeline-description.svelte';
 import TimelineTime from './timeline-time.svelte';
 export declare const Timeline: {
-	Root: typeof TimelineRoot;
-	Item: typeof TimelineItem;
-	Icon: typeof TimelineIcon;
-	Content: typeof TimelineContent;
-	Title: typeof TimelineTitle;
-	Description: typeof TimelineDescription;
-	Time: typeof TimelineTime;
+    Root: typeof TimelineRoot;
+    Item: typeof TimelineItem;
+    Icon: typeof TimelineIcon;
+    Content: typeof TimelineContent;
+    Title: typeof TimelineTitle;
+    Description: typeof TimelineDescription;
+    Time: typeof TimelineTime;
 };

package/dist/timeline/timeline-item.svelte

@@ -38,6 +38,7 @@
 		bottom: var(--dry-timeline-line-bottom, calc(var(--dry-space-1) * -1));
 		right: var(--dry-timeline-line-right, auto);
 		height: var(--dry-timeline-line-h, auto);
-		border-left: var(--dry-timeline-line-w, 1px) solid var(--dry-timeline-line-color, var(--dry-color-stroke-weak));
+		border-left: var(--dry-timeline-line-w, 1px) solid
+			var(--dry-timeline-line-color, var(--dry-color-stroke-weak));
 	}
 </style>

package/dist/toast/index.d.ts

@@ -1,13 +1,5 @@
 export { toastStore, createToastStore } from '@dryui/primitives';
-export type {
-	ToastData,
-	ToastProviderProps,
-	ToastRootProps,
-	ToastActionProps,
-	ToastTitleProps,
-	ToastDescriptionProps,
-	ToastCloseProps
-} from '@dryui/primitives';
+export type { ToastData, ToastProviderProps, ToastRootProps, ToastActionProps, ToastTitleProps, ToastDescriptionProps, ToastCloseProps } from '@dryui/primitives';
 import ToastProvider from './toast-provider.svelte';
 import ToastRoot from './toast-root.svelte';
 import ToastTitle from './toast-title.svelte';
@@ -15,10 +7,10 @@ import ToastDescription from './toast-description.svelte';
 import ToastClose from './toast-close.svelte';
 import ToastAction from './toast-action.svelte';
 export declare const Toast: {
-	Provider: typeof ToastProvider;
-	Root: typeof ToastRoot;
-	Title: typeof ToastTitle;
-	Description: typeof ToastDescription;
-	Close: typeof ToastClose;
-	Action: typeof ToastAction;
+    Provider: typeof ToastProvider;
+    Root: typeof ToastRoot;
+    Title: typeof ToastTitle;
+    Description: typeof ToastDescription;
+    Close: typeof ToastClose;
+    Action: typeof ToastAction;
 };

package/dist/toggle/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { ToggleProps as PrimitiveToggleProps } from '@dryui/primitives';
 export interface ToggleProps extends PrimitiveToggleProps {
-	size?: 'sm' | 'md' | 'lg';
-	icon?: Snippet;
+    size?: 'sm' | 'md' | 'lg';
+    icon?: Snippet;
 }
 export { default as Toggle } from './toggle.svelte';

package/dist/toggle-group/index.d.ts

@@ -1,11 +1,11 @@
 import type { ToggleGroupRootProps as PrimitiveToggleGroupRootProps } from '@dryui/primitives';
 export type { ToggleGroupItemProps } from '@dryui/primitives';
 export interface ToggleGroupRootProps extends PrimitiveToggleGroupRootProps {
-	size?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
 }
 import ToggleGroupRoot from './toggle-group-root.svelte';
 import ToggleGroupItem from './toggle-group-item.svelte';
 export declare const ToggleGroup: {
-	Root: typeof ToggleGroupRoot;
-	Item: typeof ToggleGroupItem;
+    Root: typeof ToggleGroupRoot;
+    Item: typeof ToggleGroupItem;
 };

package/dist/toolbar/index.d.ts

@@ -1,16 +1,11 @@
-export type {
-	ToolbarRootProps,
-	ToolbarButtonProps,
-	ToolbarSeparatorProps,
-	ToolbarLinkProps
-} from '@dryui/primitives';
+export type { ToolbarRootProps, ToolbarButtonProps, ToolbarSeparatorProps, ToolbarLinkProps } from '@dryui/primitives';
 import ToolbarRoot from './toolbar-root.svelte';
 import ToolbarButton from './toolbar-button.svelte';
 import ToolbarSeparator from './toolbar-separator.svelte';
 import ToolbarLink from './toolbar-link.svelte';
 export declare const Toolbar: {
-	Root: typeof ToolbarRoot;
-	Button: typeof ToolbarButton;
-	Separator: typeof ToolbarSeparator;
-	Link: typeof ToolbarLink;
+    Root: typeof ToolbarRoot;
+    Button: typeof ToolbarButton;
+    Separator: typeof ToolbarSeparator;
+    Link: typeof ToolbarLink;
 };

package/dist/tooltip/index.d.ts

@@ -3,7 +3,7 @@ import TooltipRoot from './tooltip-root.svelte';
 import TooltipTrigger from './tooltip-trigger.svelte';
 import TooltipContent from './tooltip-content.svelte';
 export declare const Tooltip: {
-	Root: typeof TooltipRoot;
-	Trigger: typeof TooltipTrigger;
-	Content: typeof TooltipContent;
+    Root: typeof TooltipRoot;
+    Trigger: typeof TooltipTrigger;
+    Content: typeof TooltipContent;
 };

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.1",
+  "version": "0.3.0",
   "author": "Rob Balfre",
   "license": "MIT",
   "repository": {
@@ -216,6 +216,11 @@
       "svelte": "./dist/description-list/index.js",
       "default": "./dist/description-list/index.js"
     },
+    "./diagram": {
+      "types": "./dist/diagram/index.d.ts",
+      "svelte": "./dist/diagram/index.js",
+      "default": "./dist/diagram/index.js"
+    },
     "./dialog": {
       "types": "./dist/dialog/index.d.ts",
       "svelte": "./dist/dialog/index.js",
@@ -626,11 +631,6 @@
       "svelte": "./dist/svg/index.js",
       "default": "./dist/svg/index.js"
     },
-    "./system-map": {
-      "types": "./dist/system-map/index.d.ts",
-      "svelte": "./dist/system-map/index.js",
-      "default": "./dist/system-map/index.js"
-    },
     "./table": {
       "types": "./dist/table/index.d.ts",
       "svelte": "./dist/table/index.js",
@@ -666,11 +666,6 @@
       "svelte": "./dist/textarea/index.js",
       "default": "./dist/textarea/index.js"
     },
-    "./thumbnail": {
-      "types": "./dist/thumbnail/index.d.ts",
-      "svelte": "./dist/thumbnail/index.js",
-      "default": "./dist/thumbnail/index.js"
-    },
     "./time-input": {
       "types": "./dist/time-input/index.d.ts",
       "svelte": "./dist/time-input/index.js",
@@ -753,8 +748,11 @@
     },
     "./*/*": null,
     "./internal/*": null,
+    "./themes/aurora.css": "./dist/themes/aurora.css",
     "./themes/dark.css": "./dist/themes/dark.css",
-    "./themes/default.css": "./dist/themes/default.css"
+    "./themes/default.css": "./dist/themes/default.css",
+    "./themes/midnight.css": "./dist/themes/midnight.css",
+    "./themes/terminal.css": "./dist/themes/terminal.css"
   },
   "publishConfig": {
     "access": "public",
@@ -961,6 +959,11 @@
         "svelte": "./dist/description-list/index.js",
         "default": "./dist/description-list/index.js"
       },
+      "./diagram": {
+        "types": "./dist/diagram/index.d.ts",
+        "svelte": "./dist/diagram/index.js",
+        "default": "./dist/diagram/index.js"
+      },
       "./dialog": {
         "types": "./dist/dialog/index.d.ts",
         "svelte": "./dist/dialog/index.js",
@@ -1371,11 +1374,6 @@
         "svelte": "./dist/svg/index.js",
         "default": "./dist/svg/index.js"
       },
-      "./system-map": {
-        "types": "./dist/system-map/index.d.ts",
-        "svelte": "./dist/system-map/index.js",
-        "default": "./dist/system-map/index.js"
-      },
       "./table": {
         "types": "./dist/table/index.d.ts",
         "svelte": "./dist/table/index.js",
@@ -1411,11 +1409,6 @@
         "svelte": "./dist/textarea/index.js",
         "default": "./dist/textarea/index.js"
       },
-      "./thumbnail": {
-        "types": "./dist/thumbnail/index.d.ts",
-        "svelte": "./dist/thumbnail/index.js",
-        "default": "./dist/thumbnail/index.js"
-      },
       "./time-input": {
         "types": "./dist/time-input/index.d.ts",
         "svelte": "./dist/time-input/index.js",
@@ -1498,8 +1491,11 @@
       },
       "./*/*": null,
       "./internal/*": null,
+      "./themes/aurora.css": "./dist/themes/aurora.css",
       "./themes/dark.css": "./dist/themes/dark.css",
-      "./themes/default.css": "./dist/themes/default.css"
+      "./themes/default.css": "./dist/themes/default.css",
+      "./themes/midnight.css": "./dist/themes/midnight.css",
+      "./themes/terminal.css": "./dist/themes/terminal.css"
     }
   },
   "files": [
@@ -1510,17 +1506,16 @@
     "build": "svelte-package -i src",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "prepack": "bun ../../scripts/prepack-exports.ts",
-    "postpack": "bun ../../scripts/postpack-exports.ts",
-    "thumbnail:create": "bun scripts/create-thumbnail.ts"
+    "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^0.2.0"
+    "@dryui/primitives": "^0.3.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"
   },
   "devDependencies": {
-    "svelte": "^5.55.1",
+    "svelte": "^5.55.3",
     "@sveltejs/package": "^2.5.7",
     "svelte-check": "^4.4.6",
     "typescript": "^6.0.2"

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
 
@@ -200,6 +212,7 @@ Read these when you need deeper guidance:
 - **`rules/accessibility.md`** — Field.Root, ARIA, focus management, pre-ship checklist
 - **`rules/svelte.md`** — Runes, snippets, native browser APIs, styling rules
 - **`rules/design.md`** — Minimal code, no premature abstraction, naming conventions
+- **`rules/visual-effects-performance.md`** — Tiered budgets and implementation rules for shader, blur, glass, and pointer-reactive effects
 - **`rules/native-web-transitions.md`** — View Transition API, scroll animations, reduced-motion
 
 ---