@dryui/ui 1.8.0 → 2.0.0

package/dist/glow/glow.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Glow',
+    description: 'Soft glow effect wrapper with configurable color, intensity, and animation',
+    category: 'visual',
+    tags: ['glow', 'light', 'shadow', 'neon', 'effect', 'animation']
+};

package/dist/god-rays/god-rays.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/god-rays/god-rays.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'GodRays',
+    description: 'Volumetric radial light rays surface with configurable origin, spread, and intensity',
+    category: 'visual',
+    tags: ['rays', 'light', 'volumetric', 'hero', 'effect']
+};

package/dist/gradient-mesh/gradient-mesh.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/gradient-mesh/gradient-mesh.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'GradientMesh',
+    description: 'Animated multi-color gradient mesh background with optional interactivity',
+    category: 'visual',
+    tags: ['gradient', 'mesh', 'background', 'animation', 'interactive', 'color']
+};

package/dist/halftone/halftone.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/halftone/halftone.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Halftone',
+    description: 'SVG halftone dot pattern overlay with configurable size, angle, and color',
+    category: 'visual',
+    tags: ['halftone', 'dots', 'pattern', 'texture', 'print', 'overlay']
+};

package/dist/heading/heading.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/heading/heading.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Heading',
+    description: 'Standalone semantic heading export for starter-kit typography',
+    category: 'display',
+    tags: ['text', 'heading', 'title', 'typography']
+};

package/dist/heading/heading.svelte

@@ -27,26 +27,32 @@
 </script>
 
 {#if level === 1}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h1 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h1>
 {:else if level === 2}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h2 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h2>
 {:else if level === 3}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h3 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h3>
 {:else if level === 4}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h4 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h4>
 {:else if level === 5}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h5 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h5>
 {:else}
+	<!-- dryui-allow raw-heading: Heading is the canonical component that renders semantic h1-h6 output. -->
 	<h6 class={className} {...variantAttrs({ level, variant, measure })} {...rest}>
 		{@render children()}
 	</h6>
@@ -64,7 +70,6 @@
 		font-family: var(--dry-font-sans);
 		font-weight: 700;
 		line-height: var(--dry-type-heading-2-leading, 2.5rem);
-		letter-spacing: -0.03em;
 		text-wrap: balance;
 	}
 
@@ -102,7 +107,6 @@
 		font-family: var(--dry-font-display, var(--dry-font-sans));
 		font-size: var(--dry-type-display-size, var(--dry-text-4xl-size, 2.25rem));
 		line-height: var(--dry-type-display-leading, 4rem);
-		letter-spacing: -0.04em;
 	}
 
 	/* ── Measure (max-inline-size) ─────────────────────────────────────────────

package/dist/hotkey/hotkey.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/hotkey/hotkey.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Hotkey',
+    description: 'Keyboard shortcut handler with modifier support',
+    category: 'utility',
+    tags: ['keyboard', 'shortcut', 'hotkey', 'keybinding']
+};

package/dist/hover-card/hover-card.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/hover-card/hover-card.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'HoverCard',
+    description: 'Card popup on hover with delay-based open/close',
+    category: 'overlay',
+    tags: ['hover', 'card', 'preview', 'popup']
+};

package/dist/icon/icon.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/icon/icon.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Icon',
+    description: 'Sized and colored SVG icon wrapper with accessibility label',
+    category: 'display',
+    tags: ['icon', 'svg', 'size', 'color', 'accessible']
+};

package/dist/icon/icon.svelte

@@ -22,6 +22,7 @@
 </script>
 
 <span
+	data-dry-icon=""
 	role={label ? 'img' : 'presentation'}
 	aria-label={label}
 	aria-hidden={label ? undefined : true}

package/dist/icon-swap/icon-swap.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/icon-swap/icon-swap.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'IconSwap',
+    description: 'Keyed icon crossfade with scale and blur, driven by --dry-icon-swap-* tokens',
+    category: 'display',
+    tags: ['icon', 'swap', 'crossfade', 'animation', 'motion']
+};

package/dist/icon-swap/icon-swap.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	interface Props {
+		icon: Snippet | Component | unknown;
+		size?: 'sm' | 'md' | 'lg';
+		label?: string;
+	}
+
+	let { icon, size = 'md', label }: Props = $props();
+</script>
+
+{#key icon}
+	{@const IconComponent = icon as Component}
+	{@const iconAsSnippet = icon as Snippet}
+	<span class="dry-icon-swap" data-size={size} aria-label={label}>
+		{#if typeof icon === 'function' && (icon as Snippet).length === 0}
+			{@render iconAsSnippet()}
+		{:else}
+			<IconComponent />
+		{/if}
+	</span>
+{/key}
+
+<style>
+	.dry-icon-swap {
+		display: inline-grid;
+		place-items: center;
+		line-height: 0;
+		animation: icon-swap-in var(--dry-icon-swap-duration, 120ms)
+			var(--dry-icon-swap-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
+	}
+
+	@keyframes icon-swap-in {
+		from {
+			opacity: 0;
+			transform: scale(var(--dry-icon-swap-scale-out, 0.85));
+			filter: blur(var(--dry-icon-swap-blur-out, 2px));
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.dry-icon-swap {
+			animation: none;
+		}
+	}
+</style>

package/dist/icon-swap/icon-swap.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    icon: Snippet | Component | unknown;
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+}
+declare const IconSwap: Component<Props, {}, "">;
+type IconSwap = ReturnType<typeof IconSwap>;
+export default IconSwap;

package/dist/icon-swap/index.d.ts

@@ -0,0 +1 @@
+export { default as IconSwap } from './icon-swap.svelte';

package/dist/icon-swap/index.js

@@ -0,0 +1 @@
+export { default as IconSwap } from './icon-swap.svelte';

package/dist/image/image.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/image/image.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Image',
+    description: 'Image with loading states and fallback support',
+    category: 'display',
+    tags: ['image', 'lazy', 'loading', 'fallback']
+};

package/dist/image/image.svelte

@@ -37,8 +37,10 @@
 {#if status === 'error' && fallbackSnippet}
 	{@render fallbackSnippet()}
 {:else if status === 'error' && fallback}
+	<!-- dryui-allow raw-img: Image is the canonical component that renders the underlying img element. -->
 	<img class={className} src={fallback} {alt} data-state="fallback" {...rest} />
 {:else}
+	<!-- dryui-allow raw-img: Image is the canonical component that renders the underlying img element. -->
 	<img
 		class={className}
 		{src}
@@ -69,7 +71,8 @@
 
 	img[data-state='loaded'],
 	img[data-state='fallback'] {
-		box-shadow: inset 0 0 0 1px var(--dry-image-edge);
+		outline: 1px solid var(--dry-image-edge);
+		outline-offset: -1px;
 	}
 
 	img[data-state='fallback'] {

package/dist/image-comparison/image-comparison.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/image-comparison/image-comparison.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'ImageComparison',
+    description: 'Before/after image comparison slider',
+    category: 'display',
+    tags: ['image', 'compare', 'slider', 'before-after']
+};

package/dist/index.d.ts

@@ -298,3 +298,10 @@ export { TokenScope } from './themes/token-scope.js';
 export type { TokenScopeProps } from './themes/token-scope.js';
 export { Diagram } from './diagram/index.js';
 export type { DiagramConfig, DiagramNode, DiagramEdge, DiagramCluster, DiagramAnnotation, DiagramSwimlane, DiagramRegion, DiagramColor, DiagramDirection } from './diagram/index.js';
+export { IconSwap } from './icon-swap/index.js';
+export { Numeric } from './numeric/index.js';
+export { Enter } from './enter/index.js';
+export { Exit } from './exit/index.js';
+export { Stagger } from './stagger/index.js';
+export { enter, leave } from './motion/index.js';
+export type { EnterOptions, LeaveOptions } from './motion/index.js';

package/dist/index.js

@@ -153,3 +153,10 @@ export { StarRating } from './star-rating/index.js';
 export { Tag } from './tag/index.js';
 export { TokenScope } from './themes/token-scope.js';
 export { Diagram } from './diagram/index.js';
+// Visual Polish — motion, numeric, icon-swap
+export { IconSwap } from './icon-swap/index.js';
+export { Numeric } from './numeric/index.js';
+export { Enter } from './enter/index.js';
+export { Exit } from './exit/index.js';
+export { Stagger } from './stagger/index.js';
+export { enter, leave } from './motion/index.js';

package/dist/infinite-scroll/infinite-scroll.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/infinite-scroll/infinite-scroll.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'InfiniteScroll',
+    description: 'Loads more content when user scrolls near bottom',
+    category: 'display',
+    tags: ['infinite', 'scroll', 'load', 'pagination', 'lazy']
+};

package/dist/input/input.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/input/input.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Input',
+    description: 'Text input with size variants',
+    category: 'input',
+    tags: ['form', 'text', 'input', 'field']
+};

package/dist/input-group/input-group.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/input-group/input-group.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'InputGroup',
+    description: 'Compound input wrapper that combines prefixes, suffixes, separators, select slots, and actions',
+    category: 'input',
+    tags: ['input', 'field', 'affix', 'addon', 'control']
+};

package/dist/internal/date-family-controller.svelte.d.ts

@@ -18,6 +18,7 @@ export declare function createDateViewController({ initialDate, locale }: DateVi
 interface PickerPopoverControllerConfig {
     triggerIdPrefix: string;
     contentIdPrefix: string;
+    uid: string;
     open: () => boolean;
     setOpen: (open: boolean) => void;
     disabled: () => boolean;
@@ -33,7 +34,7 @@ export interface PickerPopoverController {
     close: () => void;
     toggle: () => void;
 }
-export declare function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, open, setOpen, disabled, onShow, onClose }: PickerPopoverControllerConfig): {
+export declare function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, uid, open, setOpen, disabled, onShow, onClose }: PickerPopoverControllerConfig): {
     readonly triggerId: string;
     readonly contentId: string;
     readonly triggerEl: HTMLElement | null;

package/dist/internal/date-family-controller.svelte.js

@@ -1,4 +1,4 @@
-import { generateFormId, getWeekStartDay } from '@dryui/primitives';
+import { getWeekStartDay } from '@dryui/primitives';
 import { SvelteDate } from 'svelte/reactivity';
 export function createDateViewController({ initialDate = null, locale }) {
     const seedDate = initialDate ? new SvelteDate(initialDate.getTime()) : new SvelteDate();
@@ -56,9 +56,9 @@ export function createDateViewController({ initialDate = null, locale }) {
         }
     };
 }
-export function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, open, setOpen, disabled, onShow, onClose }) {
-    const triggerId = generateFormId(triggerIdPrefix);
-    const contentId = generateFormId(contentIdPrefix);
+export function createPickerPopoverController({ triggerIdPrefix, contentIdPrefix, uid, open, setOpen, disabled, onShow, onClose }) {
+    const triggerId = `${triggerIdPrefix}-${uid}`;
+    const contentId = `${contentIdPrefix}-${uid}`;
     let triggerEl = $state(null);
     return {
         get triggerId() {

package/dist/internal/menu-item.svelte

@@ -52,10 +52,7 @@
 		align-items: center;
 		gap: var(--dry-space-2);
 		padding: var(--dry-menu-item-padding, var(--dry-space-2_5) var(--dry-space-2));
-		border-radius: var(
-			--dry-menu-item-radius,
-			min(var(--dry-control-radius, var(--dry-radius-sm)), var(--dry-space-4))
-		);
+		border-radius: var(--dry-menu-item-radius, var(--dry-radius-nested-popover));
 		font-size: var(--dry-type-small-size, var(--dry-text-sm-size));
 		cursor: pointer;
 		user-select: none;

package/dist/internal/menu-root-state.svelte.d.ts

@@ -16,6 +16,7 @@ export interface PositionedMenuRootState extends MenuRootState {
 }
 interface CreateMenuRootStateOptions {
     idBase: string;
+    uid: string;
     getOpen: () => boolean;
     setOpen: (value: boolean) => void;
 }

package/dist/internal/menu-root-state.svelte.js

@@ -1,7 +1,6 @@
-import { generateFormId } from '@dryui/primitives';
 function createBaseMenuRootState(options) {
-    const triggerId = generateFormId(`${options.idBase}-trigger`);
-    const contentId = generateFormId(`${options.idBase}-content`);
+    const triggerId = `${options.idBase}-trigger-${options.uid}`;
+    const contentId = `${options.idBase}-content-${options.uid}`;
     return {
         triggerId,
         contentId,

package/dist/internal/modal-content.svelte

@@ -86,6 +86,7 @@
 </dialog>
 
 <style>
+	/* dialog: outer: var(--dry-radius-dialog); children inside the padded region use var(--dry-radius-nested-dialog). */
 	[data-modal-content] {
 		position: fixed;
 		inset: 0;
@@ -128,7 +129,7 @@
 		--dry-radius-nested: max(
 			var(--dry-radius-sm),
 			calc(
-				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl))) -
+				var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-dialog))) -
 					var(--dry-dialog-padding)
 			)
 		);
@@ -137,7 +138,7 @@
 		container-type: inline-size;
 		justify-self: stretch;
 		border: 1px solid var(--dry-dialog-border);
-		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-2xl)));
+		border-radius: var(--dry-dialog-radius, var(--dry-overlay-radius, var(--dry-radius-dialog)));
 		background: var(--dry-dialog-bg, var(--dry-overlay-bg, var(--dry-color-bg-overlay)));
 		color: var(--dry-color-text-strong);
 		box-shadow: var(--dry-dialog-shadow, var(--dry-overlay-shadow, var(--dry-shadow-overlay)));
@@ -318,6 +319,7 @@
 
 	[data-modal-content][data-variant='drawer'][data-side='top'] [data-modal-panel] {
 		--_drawer-rest-transform: translateY(0);
+		/* dryui-allow symmetric-exit-animation: this is the off-canvas enter position for a top drawer, not the exit animation. */
 		--_drawer-enter-transform: translateY(-100%);
 		grid-row: 1;
 		height: var(--dry-drawer-size);
@@ -326,6 +328,7 @@
 
 	[data-modal-content][data-variant='drawer'][data-side='bottom'] [data-modal-panel] {
 		--_drawer-rest-transform: translateY(0);
+		/* dryui-allow symmetric-exit-animation: this is the off-canvas enter position for a bottom drawer, not the exit animation. */
 		--_drawer-enter-transform: translateY(100%);
 		grid-row: 2;
 		height: var(--dry-drawer-size);

package/dist/internal/picker-popover-content.svelte

@@ -82,6 +82,7 @@
 		margin: 0;
 		display: inline-grid;
 		padding: var(--dry-space-3);
+		/* dryui-allow solid-border-on-raised: date picker popovers need a clear calendar boundary. */
 		border: 1px solid var(--dry-color-stroke-weak);
 		border-radius: var(--dry-radius-lg);
 		background: var(--dry-color-bg-overlay);

package/dist/kbd/kbd.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/kbd/kbd.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Kbd',
+    description: 'Keyboard shortcut display element',
+    category: 'display',
+    tags: ['keyboard', 'shortcut', 'key', 'kbd']
+};

package/dist/label/label.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/label/label.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Label',
+    description: 'Form label with size variants',
+    category: 'form',
+    tags: ['form', 'label', 'text', 'accessibility']
+};

package/dist/link/link.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/link/link.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'Link',
+    description: 'Styled anchor with external and disabled states',
+    category: 'navigation',
+    tags: ['link', 'anchor', 'href', 'external']
+};

package/dist/link-preview/link-preview-root.svelte

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

package/dist/link-preview/link-preview.meta.d.ts

@@ -0,0 +1,8 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+declare const _default: {
+    name: string;
+    description: string;
+    category: string;
+    tags: string[];
+};
+export default _default;

package/dist/link-preview/link-preview.meta.js

@@ -0,0 +1,7 @@
+/** DryUI agent metadata. Consumed by @dryui/mcp/load-component-meta. */
+export default {
+    name: 'LinkPreview',
+    description: 'Link preview popup on hover',
+    category: 'overlay',
+    tags: ['link', 'preview', 'hover', 'popup', 'popover', 'card']
+};