@dryui/ui 1.9.0 → 2.0.1

package/dist/popover/popover-root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setPopoverCtx } from './context.svelte.js';
 
 	interface Props {
@@ -10,8 +9,9 @@
 
 	let { open = $bindable(false), children }: Props = $props();
 
-	const triggerId = generateFormId('popover-trigger');
-	const contentId = generateFormId('popover-content');
+	const uid = $props.id();
+	const triggerId = `popover-trigger-${uid}`;
+	const contentId = `popover-content-${uid}`;
 
 	setPopoverCtx({
 		get open() {

package/dist/radio-group/radio-group.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { createId } from '@dryui/primitives';
 	import { setRadioGroupCtx } from './context.svelte.js';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -25,7 +24,8 @@
 		...rest
 	}: Props = $props();
 
-	const fallbackName = createId('dryui-radio');
+	const uid = $props.id();
+	const fallbackName = `dryui-radio-${uid}`;
 	const groupName = $derived(name ?? fallbackName);
 
 	setRadioGroupCtx({

package/dist/rich-text-editor/rich-text-editor-content.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { getRichTextEditorCtx } from '@dryui/primitives/rich-text-editor';
+	import {
+		getRichTextEditorCtx,
+		setSanitizedRichTextHtml
+	} from '@dryui/primitives/rich-text-editor';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {}
 
@@ -12,17 +15,19 @@
 
 	// Register the content element with the context
 	$effect(() => {
-		if (contentEl) {
-			ctx.contentEl = contentEl;
-		}
+		if (!contentEl) return;
+		ctx.contentEl = contentEl;
+		return () => {
+			if (ctx.contentEl === contentEl) ctx.contentEl = null;
+		};
 	});
 
 	// Sync value into contenteditable (also clears hint elements on mount)
 	$effect(() => {
 		if (!contentEl) return;
-		const html = ctx.html || '';
+		const html = ctx.sanitizeHtml(ctx.html || '');
 		if (contentEl.innerHTML !== html && document.activeElement !== contentEl) {
-			contentEl.innerHTML = html;
+			setSanitizedRichTextHtml(contentEl, html);
 		}
 	});
 
@@ -96,8 +101,11 @@
 	onkeydown={handleKeydown}
 	{...rest}
 >
+	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h1>.</h1>
+	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h2>.</h2>
+	<!-- dryui-allow raw-heading: hidden seed nodes make Svelte retain scoped styles for sanitized contenteditable HTML. -->
 	<h3>.</h3>
 	<p></p>
 	<ul><li></li></ul>

package/dist/rich-text-editor/rich-text-editor-root.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { setRichTextEditorCtx } from '@dryui/primitives/rich-text-editor';
+	import {
+		sanitizeRichTextElement,
+		sanitizeRichTextHtml,
+		sanitizeRichTextUrl,
+		setRichTextEditorCtx
+	} from '@dryui/primitives/rich-text-editor';
 
 	interface Props extends HTMLAttributes<HTMLDivElement> {
+		/** HTML is sanitized before rendering and before bind:value updates are emitted. */
 		value?: string;
 		placeholder?: string;
 		readonly?: boolean;
@@ -66,7 +72,7 @@
 
 	function syncValue() {
 		if (ctx.contentEl) {
-			value = ctx.contentEl.innerHTML;
+			value = sanitizeRichTextElement(ctx.contentEl);
 		}
 	}
 
@@ -96,7 +102,7 @@
 			return currentLink;
 		},
 		get html() {
-			return value;
+			return sanitizeRichTextHtml(value);
 		},
 		get readonly() {
 			return readonlyProp;
@@ -137,13 +143,16 @@
 		},
 		insertLink(url: string) {
 			if (readonlyProp) return;
+			const safeUrl = sanitizeRichTextUrl(url);
+			if (!safeUrl) return;
+
 			const sel = window.getSelection();
 			if (!sel || sel.rangeCount === 0) return;
 
 			if (sel.isCollapsed) {
 				const a = document.createElement('a');
-				a.href = url;
-				a.textContent = url;
+				a.href = safeUrl;
+				a.textContent = safeUrl;
 				a.target = '_blank';
 				a.rel = 'noopener noreferrer';
 				const range = sel.getRangeAt(0);
@@ -153,9 +162,9 @@
 				sel.removeAllRanges();
 				sel.addRange(range);
 			} else {
-				document.execCommand('createLink', false, url);
+				document.execCommand('createLink', false, safeUrl);
 				if (ctx.contentEl) {
-					const links = ctx.contentEl.querySelectorAll('a[href="' + CSS.escape(url) + '"]');
+					const links = ctx.contentEl.querySelectorAll('a[href="' + CSS.escape(safeUrl) + '"]');
 					links.forEach((link) => {
 						link.setAttribute('target', '_blank');
 						link.setAttribute('rel', 'noopener noreferrer');
@@ -169,10 +178,11 @@
 			execCommand('unlink');
 		},
 		getContent() {
-			return ctx.contentEl?.innerHTML ?? '';
+			return sanitizeRichTextHtml(ctx.contentEl?.innerHTML ?? '');
 		},
 		updateState,
-		syncValue
+		syncValue,
+		sanitizeHtml: sanitizeRichTextHtml
 	});
 </script>
 

package/dist/rich-text-editor/rich-text-editor-root.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** HTML is sanitized before rendering and before bind:value updates are emitted. */
     value?: string;
     placeholder?: string;
     readonly?: boolean;

package/dist/rich-text-editor/rich-text-editor-toolbar-button-input.svelte

@@ -516,6 +516,7 @@
 		gap: var(--dry-space-2);
 		padding: var(--dry-space-2);
 		background: var(--dry-color-bg-overlay);
+		/* dryui-allow solid-border-on-raised: inline link editor is a small popover that needs a distinct edge. */
 		border: 1px solid var(--dry-rte-border);
 		border-radius: var(--dry-radius-md);
 		box-shadow: var(--dry-shadow-md);

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setSelectCtx } from './context.svelte.js';
 	import SelectTrigger from './select-trigger-button.svelte';
 	import SelectValue from './select-value.svelte';
@@ -35,8 +34,9 @@
 		options?.map((opt) => (typeof opt === 'string' ? { value: opt, label: opt } : opt))
 	);
 
-	const triggerId = generateFormId('select-trigger');
-	const contentId = generateFormId('select-content');
+	const uid = $props.id();
+	const triggerId = `select-trigger-${uid}`;
+	const contentId = `select-content-${uid}`;
 
 	let displayText = $state('');
 	let triggerEl = $state<HTMLElement | null>(null);

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

@@ -86,6 +86,7 @@
 	[data-part='root'] {
 		display: block;
 		padding: var(--dry-space-2);
+		/* dryui-allow solid-border-on-raised: tag editor is a form field with token chips on a raised input surface. */
 		border: 1px solid var(--dry-color-stroke-strong);
 		border-radius: var(--dry-radius-md);
 		background: var(--dry-color-bg-raised);

package/dist/timeline/timeline-title.svelte

@@ -11,16 +11,22 @@
 </script>
 
 {#if level === 1}
+	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h1 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h1>
 {:else if level === 2}
+	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h2 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h2>
 {:else if level === 3}
+	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h3 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h3>
 {:else if level === 4}
+	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h4 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h4>
 {:else if level === 5}
+	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h5 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h5>
 {:else}
+	<!-- dryui-allow raw-heading: Timeline.Title owns its semantic heading element while applying timeline-specific title styling. -->
 	<h6 data-part="title" data-level={level} class={className} {...rest}>{@render children()}</h6>
 {/if}
 

package/dist/toast/toast-root.svelte

@@ -108,6 +108,7 @@
 		}
 	}
 
+	/* dryui-allow ad-hoc-enter-keyframe: toast predates motion wrappers and keeps reduced-motion handling in this file. */
 	@keyframes slideIn {
 		from {
 			opacity: 0;

package/dist/toolbar/toolbar-root.svelte

@@ -89,6 +89,7 @@
 		gap: var(--dry-space-1);
 		padding: var(--dry-space-1);
 		background: var(--dry-color-bg-overlay);
+		/* dryui-allow solid-border-on-raised: toolbar chrome needs a visible control group boundary. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-lg);
 	}

package/dist/tooltip/tooltip-root.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { generateFormId } from '@dryui/primitives';
 	import { setTooltipCtx } from './context.svelte.js';
 
 	interface Props {
@@ -13,8 +12,9 @@
 
 	let open = $state(false);
 
-	const triggerId = generateFormId('tooltip-trigger');
-	const contentId = generateFormId('tooltip-content');
+	const uid = $props.id();
+	const triggerId = `tooltip-trigger-${uid}`;
+	const contentId = `tooltip-content-${uid}`;
 
 	let openTimeout: ReturnType<typeof setTimeout>;
 	let closeTimeout: ReturnType<typeof setTimeout>;

package/dist/video-embed/video-embed-button.svelte

@@ -101,6 +101,7 @@
 		{/if}
 	{:else}
 		{#if poster}
+			<!-- dryui-allow raw-img: VideoEmbed owns the poster media element inside the play overlay surface. -->
 			<img data-part="poster" src={poster} alt="" />
 		{/if}
 		<span class="play-btn-slot">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryui/ui",
-  "version": "1.9.0",
+  "version": "2.0.1",
   "description": "Zero-dependency styled Svelte 5 components with scoped styles and --dry-* CSS variable theming.",
   "author": "Rob Balfre",
   "license": "MIT",
@@ -817,13 +817,13 @@
     "check:publish-hygiene": "bun run check:publint && bun run check:attw"
   },
   "dependencies": {
-    "@dryui/primitives": "^1.9.0"
+    "@dryui/primitives": "^2.0.1"
   },
   "peerDependencies": {
     "svelte": "^5.55.4"
   },
   "devDependencies": {
-    "@dryui/lint": "^0.6.0",
+    "@dryui/lint": "^0.7.0",
     "svelte": "^5.55.4",
     "@sveltejs/package": "^2.5.7",
     "svelte-check": "^4.4.6",

package/skills/dryui/SKILL.md

@@ -228,7 +228,7 @@ Use these to look up APIs, discover components, plan setup, and validate code.
 
 1. `dryui info <Component>` or `dryui compose "<query>"` before writing so you confirm kind, required parts, bindables, and canonical usage. If MCP is available, `ask --scope component` and `ask --scope recipe` are the equivalent surface.
 2. Build the route or component with raw CSS grid, `Container` for constrained width, and `@container` for responsive layout.
-3. Run `check` if DryUI MCP is available after implementation to catch composition drift, layout violations, and accessibility regressions. Without MCP, rely on the `@dryui/lint` preprocessor plus the project's normal build and test commands.
+3. Run `dryui check [path]` or MCP `check` after implementation to catch composition drift, layout violations, and accessibility regressions. Use `dryui check --visual <url>` or MCP `check` with `visualUrl` when rendered pixels need review.
 4. Never guess component shape from memory. DryUI is intentionally strict, and the lookup cost is lower than rework.
 
 ### CLI (default entry point)
@@ -243,6 +243,8 @@ dryui info <component>          # Look up component API
 dryui compose "date input"      # Composition guidance
 dryui detect [path]             # Check project setup
 dryui install [path]            # Print install plan
+dryui check [path]              # Validate file, theme, directory, or workspace
+dryui check --visual <url>      # Screenshot a URL and critique rendered polish
 dryui list                      # List components
 dryui tokens --category color   # Browse design tokens
 dryui ambient                   # SessionStart context
@@ -260,6 +262,7 @@ Without a global install, prefix any command with `bunx @dryui/cli …` or `npx
 | Lookup & composition | `ask --scope component`, `ask --scope recipe`, `ask --scope list` |
 | Validation           | `check <file.svelte>`, `check <theme.css>`                        |
 | Audit                | `check`, `check <directory>`                                      |
+| Rendered UI          | `check` with `visualUrl`, or direct `check-vision`                |
 
 Categories: action, input, form, layout, navigation, overlay, display, feedback, interaction, utility
 

package/skills/dryui/rules/composition.md

@@ -457,7 +457,7 @@ DryUI is a presentation and accessibility system, not a workflow engine. For dep
 - Normalize route/session state in script before rendering DryUI inputs.
 - Reset dependent `Select.Root` values when their parent choice changes; do not rely on stale child state surviving domain changes.
 - Use raw CSS grid to lay out planner sections, and keep orchestration logic in route-level stores or derived state.
-- Run `dryui info <Component>` or `dryui compose "<pattern>"` before introducing a new field shape, then use MCP `check` if it is available after the flow is wired. Without MCP, rely on the `@dryui/lint` preprocessor plus the project's normal build and test commands.
+- Run `dryui info <Component>` or `dryui compose "<pattern>"` before introducing a new field shape, then run `dryui check [path]` or MCP `check` after the flow is wired. Use `dryui check --visual <url>` or MCP `check` with `visualUrl` when the rendered page needs visual review.
 
 ```svelte
 <script lang="ts">

package/skills/dryui/rules/theming.md

@@ -288,10 +288,10 @@ Ensure sufficient contrast between text and background.
 
 ## Validating Theme CSS
 
-Use `check <theme.css>` when DryUI MCP is available to catch theme issues. Without MCP, validate by rebuilding the app with `@dryui/lint` wired and checking the resulting diagnostics:
+Use `dryui check <theme.css>` or MCP `check <theme.css>` to catch theme issues. Without either surface, validate by rebuilding the app with `@dryui/lint` wired and checking the resulting diagnostics:
 
 ```bash
-check src/styles/global.css
+dryui check src/styles/global.css
 ```
 
 Common diagnostic codes: