@dryui/ui 1.4.0 → 1.5.0

package/dist/app-frame/app-frame.svelte

@@ -34,21 +34,15 @@
 
 <style>
 	[data-app-frame] {
-		--dry-app-frame-bg: var(--dry-color-bg-base);
-		--dry-app-frame-chrome-bg: var(--dry-color-bg-raised);
-		--dry-app-frame-border: var(--dry-color-stroke-weak);
-		--dry-app-frame-radius: var(--dry-radius-xl);
-		--dry-app-frame-dot-size: 0.75rem;
-		--dry-app-frame-dot-close: #ff5f56;
-		--dry-app-frame-dot-min: #ffbd2e;
-		--dry-app-frame-dot-max: #27c93f;
-
 		display: grid;
 		grid-template-rows: auto minmax(0, 1fr);
-		border: 1px solid var(--dry-app-frame-border);
-		border-radius: var(--dry-app-frame-radius);
-		background: var(--dry-app-frame-bg);
+		border: 1px solid var(--dry-app-frame-border, var(--dry-color-stroke-weak));
+		border-radius: var(--dry-app-frame-radius, var(--dry-radius-xl));
+		background: var(--dry-app-frame-bg, var(--dry-color-bg-base));
 		overflow: clip;
+		transition:
+			background-color var(--dry-app-frame-transition, 0s) ease,
+			border-color var(--dry-app-frame-transition, 0s) ease;
 	}
 
 	[data-part='chrome'] {
@@ -57,8 +51,11 @@
 		grid-template-rows: auto;
 		align-items: center;
 		padding: var(--dry-app-frame-chrome-padding, var(--dry-space-3) var(--dry-space-4));
-		border-block-end: 1px solid var(--dry-app-frame-border);
-		background: var(--dry-app-frame-chrome-bg);
+		border-block-end: 1px solid var(--dry-app-frame-border, var(--dry-color-stroke-weak));
+		background: var(--dry-app-frame-chrome-bg, var(--dry-color-bg-raised));
+		transition:
+			background-color var(--dry-app-frame-transition, 0s) ease,
+			border-color var(--dry-app-frame-transition, 0s) ease;
 	}
 
 	[data-part='chrome'] > * {
@@ -77,22 +74,23 @@
 
 	[data-part='dot'] {
 		display: block;
-		block-size: var(--dry-app-frame-dot-size);
+		block-size: var(--dry-app-frame-dot-size, 0.75rem);
 		aspect-ratio: 1;
 		border-radius: var(--dry-radius-full);
 		background: var(--dry-color-stroke-weak);
+		transition: background-color var(--dry-app-frame-transition, 0s) ease;
 	}
 
 	[data-part='dot'][data-tone='close'] {
-		background: var(--dry-app-frame-dot-close);
+		background: var(--dry-app-frame-dot-close, #ff5f56);
 	}
 
 	[data-part='dot'][data-tone='min'] {
-		background: var(--dry-app-frame-dot-min);
+		background: var(--dry-app-frame-dot-min, #ffbd2e);
 	}
 
 	[data-part='dot'][data-tone='max'] {
-		background: var(--dry-app-frame-dot-max);
+		background: var(--dry-app-frame-dot-max, #27c93f);
 	}
 
 	[data-part='title'] {
@@ -122,4 +120,12 @@
 		padding: var(--dry-app-frame-content-padding, 0);
 		min-block-size: 0;
 	}
+
+	@media (prefers-reduced-motion: reduce) {
+		[data-app-frame],
+		[data-part='chrome'],
+		[data-part='dot'] {
+			transition: none;
+		}
+	}
 </style>

package/dist/combobox/combobox-content.svelte

@@ -25,6 +25,7 @@
 	}: Props = $props();
 
 	const ctx = getComboboxCtx();
+	const getTriggerEl = () => ctx.triggerEl ?? ctx.inputEl;
 
 	let el = $state<HTMLDivElement | null>(null);
 
@@ -39,7 +40,7 @@
 	}
 
 	const popover = createAnchoredPopover({
-		triggerEl: () => ctx.inputEl,
+		triggerEl: getTriggerEl,
 		contentEl: () => el ?? null,
 		open: () => ctx.open,
 		placement: () => placement,
@@ -51,7 +52,7 @@
 		escapeKey: false,
 		onDismiss: () => ctx.close(),
 		contentEl: () => el ?? null,
-		triggerEl: () => ctx.inputEl
+		triggerEl: getTriggerEl
 	});
 </script>
 
@@ -87,7 +88,10 @@
 		margin: 0;
 
 		display: grid;
-		grid-template-columns: minmax(max(12rem, anchor-size(inline)), max-content);
+		grid-template-columns: minmax(
+			max(var(--dry-combobox-content-min-inline-size, 12rem), anchor-size(inline)),
+			max-content
+		);
 		background: var(--dry-color-bg-overlay);
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-md);

package/dist/combobox/combobox-input-root.svelte

@@ -26,6 +26,7 @@
 	let inputValue = $state('');
 	let activeIndex = $state(-1);
 	let inputEl = $state<HTMLInputElement | null>(null);
+	let triggerEl = $state<HTMLElement | null>(null);
 
 	setComboboxCtx({
 		get open() {
@@ -54,6 +55,12 @@
 		set inputEl(element: HTMLInputElement | null) {
 			inputEl = element;
 		},
+		get triggerEl() {
+			return triggerEl;
+		},
+		set triggerEl(element: HTMLElement | null) {
+			triggerEl = element;
+		},
 		show() {
 			if (!disabled) open = true;
 		},
@@ -93,6 +100,7 @@
 	[data-combobox-wrapper] {
 		container-type: inline-size;
 		display: grid;
+		grid-template-columns: minmax(0, 1fr);
 		position: relative;
 	}
 </style>

package/dist/combobox/combobox-input.svelte

@@ -1,23 +1,42 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import { getComboboxCtx } from './context.svelte.js';
 
 	interface Props extends Omit<HTMLInputAttributes, 'size'> {
 		placeholder?: string;
 		size?: 'sm' | 'md' | 'lg';
+		leading?: Snippet;
+		trailing?: Snippet;
 	}
 
 	let {
 		class: className,
+		style,
 		size = 'md',
 		placeholder = '',
+		leading,
+		trailing,
+		disabled = false,
 		oninput,
 		onkeydown,
 		onfocus,
+		'aria-invalid': ariaInvalid,
+		'data-invalid': dataInvalid,
 		...rest
 	}: Props = $props();
 
 	const ctx = getComboboxCtx();
+	const hasLeading = $derived(Boolean(leading));
+	const hasTrailing = $derived(Boolean(trailing));
+	const isDisabled = $derived(Boolean(ctx.disabled || disabled));
+	const isInvalid = $derived(
+		isTruthyInvalidValue(ariaInvalid) || isTruthyInvalidValue(dataInvalid)
+	);
+
+	function isTruthyInvalidValue(value: unknown): boolean {
+		return value != null && value !== false && value !== 'false';
+	}
 
 	function attachInput(node: HTMLInputElement) {
 		ctx.inputEl = node;
@@ -28,6 +47,15 @@
 		};
 	}
 
+	function attachTrigger(node: HTMLElement) {
+		ctx.triggerEl = node;
+		return () => {
+			if (ctx.triggerEl === node) {
+				ctx.triggerEl = null;
+			}
+		};
+	}
+
 	function getOptionItems(contentEl: HTMLElement | null): HTMLElement[] {
 		if (!contentEl) return [];
 		return Array.from(
@@ -42,7 +70,7 @@
 	function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
 		const val = e.currentTarget.value;
 		ctx.setInputValue(val);
-		ctx.setActiveIndex(-1);
+		if (ctx.activeIndex !== -1) ctx.setActiveIndex(-1);
 		if (!ctx.open) ctx.show();
 		if (oninput) (oninput as (e: Event & { currentTarget: HTMLInputElement }) => void)(e);
 	}
@@ -53,8 +81,8 @@
 	}
 
 	function handleKeydown(e: KeyboardEvent & { currentTarget: HTMLInputElement }) {
-		const contentEl = getContentEl();
-		const items = getOptionItems(contentEl);
+		let cachedItems: HTMLElement[] | undefined;
+		const items = () => (cachedItems ??= getOptionItems(getContentEl()));
 
 		switch (e.key) {
 			case 'ArrowDown': {
@@ -63,7 +91,7 @@
 					ctx.show();
 					ctx.setActiveIndex(0);
 				} else {
-					const next = ctx.activeIndex < items.length - 1 ? ctx.activeIndex + 1 : 0;
+					const next = ctx.activeIndex < items().length - 1 ? ctx.activeIndex + 1 : 0;
 					ctx.setActiveIndex(next);
 				}
 				break;
@@ -72,17 +100,17 @@
 				e.preventDefault();
 				if (!ctx.open) {
 					ctx.show();
-					ctx.setActiveIndex(items.length - 1);
+					ctx.setActiveIndex(items().length - 1);
 				} else {
-					const prev = ctx.activeIndex > 0 ? ctx.activeIndex - 1 : items.length - 1;
+					const prev = ctx.activeIndex > 0 ? ctx.activeIndex - 1 : items().length - 1;
 					ctx.setActiveIndex(prev);
 				}
 				break;
 			}
 			case 'Enter': {
 				e.preventDefault();
-				if (ctx.open && ctx.activeIndex >= 0 && items[ctx.activeIndex]) {
-					items[ctx.activeIndex]!.click();
+				if (ctx.open && ctx.activeIndex >= 0) {
+					items()[ctx.activeIndex]?.click();
 				}
 				break;
 			}
@@ -93,21 +121,25 @@
 				break;
 			}
 			case 'Home': {
-				if (!ctx.open || items.length === 0) break;
+				if (!ctx.open || items().length === 0) break;
 				e.preventDefault();
 				ctx.setActiveIndex(0);
 				break;
 			}
 			case 'End': {
-				if (!ctx.open || items.length === 0) break;
+				if (!ctx.open) break;
+				const list = items();
+				if (list.length === 0) break;
 				e.preventDefault();
-				ctx.setActiveIndex(items.length - 1);
+				ctx.setActiveIndex(list.length - 1);
 				break;
 			}
 			case 'Tab': {
 				if (ctx.open) {
-					if (ctx.activeIndex >= 0 && items[ctx.activeIndex]) {
-						items[ctx.activeIndex]!.click();
+					if (ctx.activeIndex >= 0) {
+						const item = items()[ctx.activeIndex];
+						if (item) item.click();
+						else ctx.close();
 					} else {
 						ctx.close();
 					}
@@ -121,63 +153,106 @@
 	}
 </script>
 
-<input
-	{@attach attachInput}
-	id={ctx.inputId}
-	type="text"
-	role="combobox"
-	aria-expanded={ctx.open}
-	aria-autocomplete="list"
-	aria-controls={ctx.contentId}
-	aria-activedescendant={ctx.activeIndex >= 0
-		? `${ctx.contentId}-item-${ctx.activeIndex}`
-		: undefined}
+<label
+	{@attach attachTrigger}
 	data-combobox-input
 	data-size={size}
 	data-state={ctx.open ? 'open' : 'closed'}
-	disabled={ctx.disabled || undefined}
-	data-disabled={ctx.disabled || undefined}
-	value={ctx.inputValue}
-	{placeholder}
-	autocomplete="off"
+	data-disabled={isDisabled || undefined}
+	data-invalid={isInvalid || undefined}
+	data-has-leading={hasLeading || undefined}
+	data-has-trailing={hasTrailing || undefined}
 	class={className}
-	oninput={handleInput}
-	onkeydown={handleKeydown}
-	onfocus={handleFocus}
-	{...rest}
-/>
+	{style}
+>
+	{#if leading}
+		<span data-part="leading" aria-hidden="true">{@render leading()}</span>
+	{/if}
+
+	<input
+		{@attach attachInput}
+		id={ctx.inputId}
+		type="text"
+		role="combobox"
+		aria-expanded={ctx.open}
+		aria-autocomplete="list"
+		aria-controls={ctx.contentId}
+		aria-activedescendant={ctx.activeIndex >= 0
+			? `${ctx.contentId}-item-${ctx.activeIndex}`
+			: undefined}
+		aria-invalid={ariaInvalid}
+		data-invalid={dataInvalid}
+		disabled={isDisabled || undefined}
+		data-disabled={isDisabled || undefined}
+		value={ctx.inputValue}
+		{placeholder}
+		autocomplete="off"
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+		onfocus={handleFocus}
+		{...rest}
+	/>
+
+	{#if trailing}
+		<span data-part="trailing" aria-hidden="true">{@render trailing()}</span>
+	{/if}
+</label>
 
 <style>
 	[data-combobox-input] {
-		--dry-combobox-bg: var(--dry-form-control-bg);
-		--dry-combobox-border: var(--dry-form-control-border);
-		--dry-combobox-color: var(--dry-form-control-color);
-		--dry-combobox-padding-x: var(--dry-form-control-padding-inline);
-		--dry-combobox-padding-y: var(--dry-form-control-padding-block);
-		--dry-combobox-font-size: var(--dry-form-control-font-size);
+		--_dry-combobox-bg: var(--dry-combobox-bg, var(--dry-form-control-bg));
+		--_dry-combobox-border: var(--dry-combobox-border, var(--dry-form-control-border));
+		--_dry-combobox-color: var(--dry-combobox-color, var(--dry-form-control-color));
+		--_dry-combobox-padding-x: var(
+			--dry-combobox-padding-x,
+			var(--dry-form-control-padding-inline)
+		);
+		--_dry-combobox-padding-y: var(--dry-combobox-padding-y, var(--dry-form-control-padding-block));
+		--_dry-combobox-font-size: var(--dry-combobox-font-size, var(--dry-form-control-font-size));
+		--_dry-combobox-affix-gap: var(--dry-combobox-affix-gap, var(--dry-space-2));
+		--_dry-combobox-affix-min-inline-size: var(--dry-combobox-affix-min-inline-size, 1.5rem);
 
 		display: grid;
-		padding: var(--dry-combobox-padding-y) var(--dry-combobox-padding-x);
-		font-size: var(--dry-combobox-font-size);
+		align-items: center;
+		grid-template-columns: minmax(0, 1fr);
+		padding-block: var(--_dry-combobox-padding-y);
+		padding-inline: var(--_dry-combobox-padding-x);
+		font-size: var(--_dry-combobox-font-size);
 		line-height: var(--dry-type-small-leading);
 		font-family: var(--dry-font-sans);
-		color: var(--dry-combobox-color);
-		background: var(--dry-combobox-bg);
-		border: 1px solid var(--dry-combobox-border);
+		color: var(--_dry-combobox-color);
+		background: var(--_dry-combobox-bg);
+		border: 1px solid var(--_dry-combobox-border);
 		border-radius: var(--dry-combobox-radius, var(--dry-form-control-radius));
 		box-sizing: border-box;
-		appearance: none;
+		column-gap: var(--_dry-combobox-affix-gap);
+		cursor: text;
 		transition:
 			border-color var(--dry-duration-fast) var(--dry-ease-default),
 			box-shadow var(--dry-duration-fast) var(--dry-ease-default);
 	}
 
+	[data-combobox-input][data-has-leading] {
+		grid-template-columns:
+			minmax(var(--_dry-combobox-affix-min-inline-size), max-content)
+			minmax(0, 1fr);
+	}
+
+	[data-combobox-input][data-has-trailing] {
+		grid-template-columns: minmax(0, 1fr) max-content;
+	}
+
+	[data-combobox-input][data-has-leading][data-has-trailing] {
+		grid-template-columns:
+			minmax(var(--_dry-combobox-affix-min-inline-size), max-content)
+			minmax(0, 1fr) max-content;
+	}
+
 	[data-combobox-input]:hover:not([data-disabled]) {
 		border-color: var(--dry-form-control-border-hover);
 	}
 
-	[data-combobox-input]:focus-visible,
-	[data-combobox-input]:focus {
+	[data-combobox-input]:focus-within {
 		outline: var(--dry-focus-ring);
 		outline-offset: -1px;
 		border-color: var(--dry-color-stroke-focus);
@@ -190,7 +265,6 @@
 		cursor: not-allowed;
 	}
 
-	[data-combobox-input][aria-invalid='true'],
 	[data-combobox-input][data-invalid] {
 		--dry-combobox-bg: color-mix(
 			in srgb,
@@ -200,17 +274,47 @@
 		--dry-combobox-border: var(--dry-color-stroke-error);
 	}
 
-	[data-combobox-input][aria-invalid='true']:hover:not([data-disabled]),
 	[data-combobox-input][data-invalid]:hover:not([data-disabled]) {
 		border-color: var(--dry-color-stroke-error-strong);
 	}
 
-	[data-combobox-input][aria-invalid='true']:focus-visible,
-	[data-combobox-input][data-invalid]:focus-visible {
+	[data-combobox-input][data-invalid]:focus-within {
 		outline-color: var(--dry-color-fill-error);
 		border-color: var(--dry-color-stroke-error);
 	}
 
+	[data-combobox-input] input {
+		appearance: none;
+		background: transparent;
+		border: 0;
+		box-sizing: border-box;
+		color: inherit;
+		font: inherit;
+		line-height: inherit;
+		margin: 0;
+		outline: none;
+		overflow: hidden;
+		padding: 0;
+	}
+
+	[data-combobox-input] input::placeholder {
+		color: var(--dry-form-control-color-placeholder);
+	}
+
+	[data-combobox-input] input:focus,
+	[data-combobox-input] input:focus-visible {
+		outline: none;
+	}
+
+	[data-combobox-input] [data-part='leading'],
+	[data-combobox-input] [data-part='trailing'] {
+		color: var(--dry-color-text-weak);
+		display: grid;
+		align-items: center;
+		justify-items: center;
+		line-height: 1;
+	}
+
 	/* Size variants */
 	[data-combobox-input][data-size='sm'] {
 		--dry-combobox-padding-x: var(--dry-space-2);

package/dist/combobox/combobox-input.svelte.d.ts

@@ -1,7 +1,10 @@
+import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends Omit<HTMLInputAttributes, 'size'> {
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
+    leading?: Snippet;
+    trailing?: Snippet;
 }
 declare const ComboboxInput: import("svelte").Component<Props, {}, "">;
 type ComboboxInput = ReturnType<typeof ComboboxInput>;

package/dist/combobox/combobox-item.svelte

@@ -27,6 +27,7 @@
 
 	const isSelected = $derived(ctx.value === value);
 	const isHighlighted = $derived(ctx.activeIndex === index);
+	const hasIcon = $derived(Boolean(icon));
 
 	function handleClick(e: MouseEvent & { currentTarget: HTMLDivElement }) {
 		if (disabled) return;
@@ -64,6 +65,7 @@
 	data-state={isSelected ? 'selected' : 'unselected'}
 	data-highlighted={isHighlighted || undefined}
 	data-disabled={disabled || undefined}
+	data-has-icon={hasIcon || undefined}
 	data-value={value}
 	class={className}
 	onclick={handleClick}
@@ -82,10 +84,10 @@
 			var(--dry-control-radius, var(--dry-radius-sm)),
 			var(--dry-space-4)
 		);
+		--_dry-combobox-item-icon-size: var(--dry-combobox-item-icon-size, 1.5rem);
 
 		display: grid;
-		grid-auto-flow: column;
-		grid-auto-columns: max-content;
+		grid-template-columns: minmax(0, 1fr);
 		align-items: center;
 		padding: var(--dry-space-2) var(--dry-space-3);
 		border-radius: var(--dry-combobox-item-radius);
@@ -97,6 +99,11 @@
 		min-height: var(--dry-space-10);
 	}
 
+	[data-combobox-item][data-has-icon] {
+		column-gap: var(--dry-space-2);
+		grid-template-columns: minmax(var(--_dry-combobox-item-icon-size), max-content) minmax(0, 1fr);
+	}
+
 	[data-combobox-item]:hover:not([data-disabled]),
 	[data-combobox-item][data-highlighted] {
 		background: var(--dry-color-fill);
@@ -121,8 +128,9 @@
 	}
 
 	[data-combobox-item] [data-part='icon'] {
-		display: inline-grid;
+		display: grid;
 		align-items: center;
-		margin-right: var(--dry-space-2);
+		justify-content: center;
+		line-height: 1;
 	}
 </style>

package/dist/combobox/context.svelte.d.ts

@@ -8,6 +8,7 @@ export interface ComboboxContext {
     readonly inputId: string;
     readonly contentId: string;
     inputEl: HTMLInputElement | null;
+    triggerEl: HTMLElement | null;
     show: () => void;
     close: () => void;
     toggle: () => void;

package/dist/combobox/index.d.ts

@@ -4,6 +4,8 @@ import type { ComboboxInputProps as PrimitiveComboboxInputProps } from '@dryui/p
 export type { ComboboxRootProps, ComboboxContentProps, ComboboxItemProps, ComboboxEmptyProps } from '@dryui/primitives';
 export interface ComboboxInputProps extends Omit<PrimitiveComboboxInputProps, 'size'> {
     size?: 'sm' | 'md' | 'lg';
+    leading?: Snippet;
+    trailing?: Snippet;
 }
 export interface ComboboxGroupProps extends HTMLAttributes<HTMLDivElement> {
     label: string;

package/dist/diagram/diagram.svelte

@@ -22,7 +22,7 @@
 
 <div data-diagram-container data-fit={fit}>
 	<svg
-		width={fit === 'native' ? vbW : undefined}
+		width={fit === 'native' ? vbW : '100%'}
 		height={fit === 'native' ? vbH : undefined}
 		viewBox="0 0 {vbW} {vbH}"
 		preserveAspectRatio="xMidYMin meet"

package/dist/index.d.ts

@@ -248,8 +248,6 @@ export { VideoEmbed } from './video-embed/index.js';
 export type { VideoEmbedProps } from './video-embed/index.js';
 export { PhoneInput } from './phone-input/index.js';
 export type { PhoneInputProps } from './phone-input/index.js';
-export { CountrySelect } from './country-select/index.js';
-export type { CountrySelectProps } from './country-select/index.js';
 export { DateTimeInput } from './date-time-input/index.js';
 export type { DateTimeInputProps } from './date-time-input/index.js';
 export { NotificationCenter } from './notification-center/index.js';

package/dist/index.js

@@ -127,7 +127,6 @@ export { Sparkline } from './sparkline/index.js';
 export { FlipCard } from './flip-card/index.js';
 export { VideoEmbed } from './video-embed/index.js';
 export { PhoneInput } from './phone-input/index.js';
-export { CountrySelect } from './country-select/index.js';
 export { DateTimeInput } from './date-time-input/index.js';
 export { NotificationCenter } from './notification-center/index.js';
 export { MegaMenu } from './mega-menu/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -195,11 +195,6 @@
       "svelte": "./dist/context-menu/index.js",
       "default": "./dist/context-menu/index.js"
     },
-    "./country-select": {
-      "types": "./dist/country-select/index.d.ts",
-      "svelte": "./dist/country-select/index.js",
-      "default": "./dist/country-select/index.js"
-    },
     "./data-grid": {
       "types": "./dist/data-grid/index.d.ts",
       "svelte": "./dist/data-grid/index.js",
@@ -784,7 +779,7 @@
     "postpack": "bun ../../scripts/postpack-exports.ts"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.4.0"
+    "@dryui/primitives": "^1.5.0"
   },
   "peerDependencies": {
     "svelte": "^5.55.1"

package/skills/dryui/SKILL.md

@@ -116,6 +116,18 @@ The test: every `<Input>`, `<Select.Root>`, `<Textarea>` is inside a `Field.Root
 
 The test: search your markup for raw `<input`, `<select>`, `<dialog>`, `<button>`, `<hr>`, `<table>` — each should be a DryUI component instead.
 
+## 7. Ask the Svelte MCP for Svelte Questions
+
+**DryUI owns components. `@sveltejs/mcp` owns the framework.**
+
+For Svelte 5 runes (`$state`, `$derived`, `$effect`, `$props`), snippets, SvelteKit load fns, `+page.server.ts` shape, form actions, and anything Svelte-syntax adjacent: call the official `svelte-autofixer` and `get-documentation` tools from `@sveltejs/mcp` before guessing from memory.
+
+- `dryui setup --install` registers `@sveltejs/mcp` by default; pass `--no-svelte-mcp` to skip.
+- If it's not registered, the fallback is the remote endpoint `https://mcp.svelte.dev/mcp` or a one-liner like `claude mcp add -t stdio -s user svelte -- npx -y @sveltejs/mcp`.
+- Scope split: DryUI `ask`/`check` cover component APIs, theming, composition, and validation. Svelte MCP covers the runtime, compiler, and framework idioms.
+
+The test: before writing non-trivial Svelte 5 or SvelteKit code, did you either (a) call `svelte-autofixer` / `get-documentation`, or (b) confirm the pattern is already covered by a DryUI recipe via `ask --scope recipe`?
+
 ## Quick Start
 
 **1. Install the CLI** so every subsequent command is short and fast:
@@ -149,6 +161,8 @@ This works for greenfield (empty directory), brownfield (existing non-SvelteKit
 - OpenCode: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .opencode/skills/dryui` + add the `dryui` and `dryui-feedback` local MCP servers in `opencode.json` (OpenCode also loads `.agents/skills/dryui` and reads `AGENTS.md`)
 - Copilot/Cursor/Windsurf: `npx degit rob-balfre/dryui/packages/ui/skills/dryui .agents/skills/dryui` + add MCP config (see https://dryui.dev/tools)
 
+**5. Register the Svelte MCP companion.** `dryui setup --install` does this automatically for Copilot, Cursor, OpenCode, Windsurf, and Zed. For Claude Code run `claude mcp add -t stdio -s user svelte -- npx -y @sveltejs/mcp`; for Codex add `[mcp_servers.svelte] command = "npx", args = ["-y", "@sveltejs/mcp"]` to `~/.codex/config.toml`. See rule 7 above.
+
 ### Manual setup
 
 1. `bun add @dryui/ui`

package/dist/country-select/country-select-button-input.svelte

@@ -1,173 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { CountrySelect as PrimitiveCountrySelect } from '@dryui/primitives';
-
-	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
-		value?: string;
-		regions?: string[];
-		showDialCode?: boolean;
-		disabled?: boolean;
-		placeholder?: string;
-		name?: string;
-		onchange?: (code: string) => void;
-		children?: Snippet;
-	}
-
-	let {
-		value = $bindable(''),
-		regions,
-		showDialCode = false,
-		disabled = false,
-		placeholder = 'Select country',
-		name: formName,
-		onchange,
-		class: className,
-		...rest
-	}: Props = $props();
-</script>
-
-<span data-country-select-wrapper class={className}>
-	<PrimitiveCountrySelect
-		bind:value
-		{regions}
-		{showDialCode}
-		{disabled}
-		{placeholder}
-		name={formName}
-		{onchange}
-		{...rest}
-	/>
-</span>
-
-<style>
-	[data-country-select-wrapper] {
-		display: contents;
-	}
-
-	[data-country-select-wrapper] [data-part='country-select'] {
-		display: inline-grid;
-		grid-template-columns: minmax(14rem, max-content);
-	}
-
-	[data-country-select-wrapper] [data-part='control'] {
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto;
-		align-items: center;
-		gap: var(--dry-space-2, 0.5rem);
-		min-height: 2.75rem;
-		padding-inline: var(--dry-space-3, 0.75rem);
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: var(--dry-radius-md);
-		background: var(--dry-color-bg-raised);
-		box-shadow: var(--dry-shadow-xs);
-		transition:
-			border-color 140ms ease,
-			box-shadow 140ms ease,
-			background-color 140ms ease;
-	}
-
-	[data-country-select-wrapper] [data-part='control'][data-state='open'] {
-		border-color: color-mix(
-			in srgb,
-			var(--dry-color-brand-primary) 52%,
-			var(--dry-color-stroke-weak)
-		);
-		box-shadow: 0 0 0 3px color-mix(in srgb, var(--dry-color-brand-primary) 18%, transparent);
-	}
-
-	[data-country-select-wrapper] [data-part='control'][data-disabled] {
-		opacity: 0.6;
-	}
-
-	[data-country-select-wrapper] [data-part='flag'] {
-		font-size: 1rem;
-		line-height: 1;
-	}
-
-	[data-country-select-wrapper] [data-part='input'] {
-		border: none;
-		outline: none;
-		padding: 0;
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-body-size, var(--dry-text-md-size));
-		line-height: var(--dry-type-body-leading, var(--dry-text-md-leading));
-	}
-
-	[data-country-select-wrapper] [data-part='input']::placeholder {
-		color: var(--dry-color-text-weak);
-	}
-
-	[data-country-select-wrapper] [data-part='dial-code'] {
-		color: var(--dry-color-text-weak);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-	}
-
-	[data-country-select-wrapper] [data-part='dropdown'] {
-		display: grid;
-		grid-template-columns: minmax(max(14rem, anchor-size(inline)), max-content);
-		gap: var(--dry-space-1, 0.25rem);
-		max-height: 18rem;
-		padding: var(--dry-space-1, 0.25rem);
-		border: 1px solid var(--dry-color-stroke-weak);
-		border-radius: calc(var(--dry-radius-md) + 0.125rem);
-		background: var(--dry-color-bg-raised);
-		box-shadow: var(--dry-shadow-lg);
-		inset: unset;
-		margin: 0;
-	}
-
-	[data-country-select-wrapper] [data-part='option'] {
-		display: grid;
-		grid-template-columns: auto minmax(0, 1fr) auto;
-		align-items: center;
-		gap: var(--dry-space-2, 0.5rem);
-		justify-self: stretch;
-		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		border: none;
-		border-radius: calc(var(--dry-radius-sm) + 0.0625rem);
-		background: transparent;
-		color: var(--dry-color-text-strong);
-		font-family: var(--dry-font-sans);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-		line-height: var(--dry-type-small-leading, var(--dry-text-sm-leading));
-		text-align: left;
-		cursor: pointer;
-	}
-
-	[data-country-select-wrapper] [data-part='option']::before {
-		content: attr(data-flag);
-		font-size: 1rem;
-		line-height: 1;
-	}
-
-	[data-country-select-wrapper] [data-part='option'][data-dial-code]::after {
-		content: attr(data-dial-code);
-		color: var(--dry-color-text-weak);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-	}
-
-	[data-country-select-wrapper] [data-part='option'][data-highlighted],
-	[data-country-select-wrapper] [data-part='option']:hover {
-		background: color-mix(in srgb, var(--dry-color-brand-primary) 12%, var(--dry-color-bg-raised));
-	}
-
-	[data-country-select-wrapper] [data-part='option'][data-state='selected'] {
-		background: color-mix(in srgb, var(--dry-color-brand-primary) 18%, var(--dry-color-bg-raised));
-		color: var(--dry-color-text-strong);
-	}
-
-	[data-country-select-wrapper] [data-part='country-name'] {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	[data-country-select-wrapper] [data-part='empty'] {
-		padding: var(--dry-space-2, 0.5rem) var(--dry-space-3, 0.75rem);
-		color: var(--dry-color-text-weak);
-		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
-	}
-</style>

package/dist/country-select/country-select-button-input.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'> {
-    value?: string;
-    regions?: string[];
-    showDialCode?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    name?: string;
-    onchange?: (code: string) => void;
-    children?: Snippet;
-}
-declare const CountrySelectButtonInput: import("svelte").Component<Props, {}, "value">;
-type CountrySelectButtonInput = ReturnType<typeof CountrySelectButtonInput>;
-export default CountrySelectButtonInput;

package/dist/country-select/index.d.ts

@@ -1,2 +0,0 @@
-export type { CountrySelectProps } from '@dryui/primitives';
-export { default as CountrySelect } from './country-select-button-input.svelte';

package/dist/country-select/index.js

@@ -1 +0,0 @@
-export { default as CountrySelect } from './country-select-button-input.svelte';