@poodle64/ui 2026.8.7

package/dist/components/ui/alert/alert-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLHeadingElement>> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<h5
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</h5>

package/dist/components/ui/alert/alert-title.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLHeadingElement>> & {
+    children?: Snippet;
+};
+declare const AlertTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;

package/dist/components/ui/alert/alert.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const alertVariants = tv({
+		base: 'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive:
+					'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'default',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+	role="alert"
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert/alert.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", unknown, unknown, undefined>>;
+export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+    children?: Snippet;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/ui/alert/index.d.ts

@@ -0,0 +1,4 @@
+import Alert from './alert.svelte';
+import AlertTitle from './alert-title.svelte';
+import AlertDescription from './alert-description.svelte';
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/alert/index.js

@@ -0,0 +1,4 @@
+import Alert from './alert.svelte';
+import AlertTitle from './alert-title.svelte';
+import AlertDescription from './alert-description.svelte';
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '../button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'default',
+		size = 'default',
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-action', className)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import { type ButtonVariant, type ButtonSize } from '../button/index.js';
+type $$ComponentProps = AlertDialogPrimitive.ActionProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
+export default AlertDialogAction;

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize
+	} from '../button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'outline',
+		size = 'default',
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-cancel', className)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import { type ButtonVariant, type ButtonSize } from '../button/index.js';
+type $$ComponentProps = AlertDialogPrimitive.CancelProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogCancel: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogCancel = ReturnType<typeof AlertDialogCancel>;
+export default AlertDialogCancel;

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import AlertDialogPortal from './alert-dialog-portal.svelte';
+	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = 'default',
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: 'default' | 'sm';
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+
+	// Width is computed in JS and applied directly (the same approach AppDialog uses).
+	// The stacked `data-[size=…]:sm:max-w-*` Tailwind variant did not take effect here,
+	// so the dialog rendered at full `w-full` width; a plain responsive utility is
+	// reliable. `data-size` stays on the element for the footer's group-data variant.
+	const widths = { default: 'max-w-xs sm:max-w-md', sm: 'max-w-xs' } as const;
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-xl p-4 ring-1 duration-100 outline-none',
+			widths[size],
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>

package/dist/components/ui/alert-dialog/alert-dialog-content.svelte.d.ts

@@ -0,0 +1,11 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+import AlertDialogPortal from './alert-dialog-portal.svelte';
+import { type WithoutChild, type WithoutChildrenOrChild } from '../../../utils.js';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = WithoutChild<AlertDialogPrimitive.ContentProps> & {
+    size?: 'default' | 'sm';
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+};
+declare const AlertDialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

package/dist/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn(
+		'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const AlertDialogDescription: import("svelte").Component<AlertDialogPrimitive.DescriptionProps, {}, "ref">;
+type AlertDialogDescription = ReturnType<typeof AlertDialogDescription>;
+export default AlertDialogDescription;

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const AlertDialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertDialogFooter = ReturnType<typeof AlertDialogFooter>;
+export default AlertDialogFooter;

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn(
+		'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const AlertDialogHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertDialogHeader = ReturnType<typeof AlertDialogHeader>;
+export default AlertDialogHeader;

package/dist/components/ui/alert-dialog/alert-dialog-media.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn(
+		"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert-dialog/alert-dialog-media.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const AlertDialogMedia: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertDialogMedia = ReturnType<typeof AlertDialogMedia>;
+export default AlertDialogMedia;

package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn(
+		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const AlertDialogOverlay: import("svelte").Component<AlertDialogPrimitive.OverlayProps, {}, "ref">;
+type AlertDialogOverlay = ReturnType<typeof AlertDialogOverlay>;
+export default AlertDialogOverlay;

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialogPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type AlertDialogPortal = ReturnType<typeof AlertDialogPortal>;
+export default AlertDialogPortal;

package/dist/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn(
+		'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const AlertDialogTitle: import("svelte").Component<AlertDialogPrimitive.TitleProps, {}, "ref">;
+type AlertDialogTitle = ReturnType<typeof AlertDialogTitle>;
+export default AlertDialogTitle;

package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

package/dist/components/ui/alert-dialog/alert-dialog-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+declare const AlertDialogTrigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+type AlertDialogTrigger = ReturnType<typeof AlertDialogTrigger>;
+export default AlertDialogTrigger;

package/dist/components/ui/alert-dialog/alert-dialog.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />

package/dist/components/ui/alert-dialog/alert-dialog.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AlertDialog: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/components/ui/alert-dialog/index.d.ts

@@ -0,0 +1,13 @@
+import Root from './alert-dialog.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+import Media from './alert-dialog-media.svelte';
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia };

package/dist/components/ui/alert-dialog/index.js

@@ -0,0 +1,15 @@
+import Root from './alert-dialog.svelte';
+import Portal from './alert-dialog-portal.svelte';
+import Trigger from './alert-dialog-trigger.svelte';
+import Title from './alert-dialog-title.svelte';
+import Action from './alert-dialog-action.svelte';
+import Cancel from './alert-dialog-cancel.svelte';
+import Footer from './alert-dialog-footer.svelte';
+import Header from './alert-dialog-header.svelte';
+import Overlay from './alert-dialog-overlay.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
+import Media from './alert-dialog-media.svelte';
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, Media, 
+//
+Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, Media as AlertDialogMedia };

package/dist/components/ui/app-dialog/app-dialog.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Snippet, Component } from 'svelte';
+	import * as Dialog from '../dialog/index.js';
+	import X from '@lucide/svelte/icons/x';
+
+	// The one dialogue frame: a titled header with optional icon and subtitle, a
+	// scrollable body, and an optional footer action bar. Compose the body from
+	// DialogSection so every dialogue separates its information identically.
+	let {
+		open = $bindable(false),
+		onOpenChange,
+		title,
+		subtitle,
+		icon: Icon,
+		size = 'md',
+		children,
+		footer
+	}: {
+		open?: boolean;
+		/**
+		 * Fired on every open-state change, including the ones the dialogue makes
+		 * for itself — Escape, a click on the scrim, the close button — not only
+		 * the ones the caller drives.
+		 *
+		 * `bind:open` alone cannot express that. A caller that has to reset a form,
+		 * abort an in-flight request or clear a selection when its dialogue closes
+		 * has nowhere to hang that work: the binding reports the new value but
+		 * offers no moment to act on it, so the usual workaround is an `$effect`
+		 * watching the bound variable, which also fires on the open leg. In the app
+		 * that reported this, 12 of 28 dialogues close through a self-dismiss path,
+		 * so it is the majority case rather than an edge.
+		 *
+		 * The two compose: bind for state, take this for the side effect.
+		 */
+		onOpenChange?: (open: boolean) => void;
+		title: string;
+		subtitle?: string;
+		icon?: Component<{ class?: string }>;
+		/**
+		 * The dialogue's measure. Named rather than free-form for the same reason
+		 * AppShell's `content` is: a dialogue width is a design-system decision,
+		 * and a `class` escape hatch would let every app pick its own again.
+		 *
+		 * `sm`/`md`/`lg` mean exactly what they always did; `xs` and `xl` extend the
+		 * scale at its ends rather than renumbering it, so no existing call site
+		 * changes width. Below the `sm:` breakpoint every size is full-bleed
+		 * regardless — a phone has one width.
+		 */
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		children: Snippet;
+		footer?: Snippet;
+	} = $props();
+
+	const widths = {
+		/** A confirmation, or a single prompt. */
+		xs: 'sm:max-w-sm',
+		/** A short form — a handful of fields. */
+		sm: 'sm:max-w-md',
+		/** The default: a form with sections. */
+		md: 'sm:max-w-xl',
+		/** A form beside a preview, or a table. */
+		lg: 'sm:max-w-3xl',
+		/** A full editing surface that stops short of being its own route. */
+		xl: 'sm:max-w-5xl'
+	};
+</script>
+
+<Dialog.Root bind:open {onOpenChange}>
+	<Dialog.Content
+		class="border-border-strong ds-edge flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0 {widths[
+			size
+		]}"
+		showCloseButton={false}
+	>
+		<header class="border-border flex items-start gap-3 border-b px-6 py-5">
+			{#if Icon}
+				<span
+					class="bg-primary/15 text-primary mt-0.5 grid size-8 flex-none place-items-center rounded-md"
+				>
+					<Icon class="size-4" />
+				</span>
+			{/if}
+			<div class="min-w-0 flex-1">
+				<Dialog.Title class="font-display text-lg leading-tight font-semibold tracking-tight"
+					>{title}</Dialog.Title
+				>
+				{#if subtitle}
+					<Dialog.Description class="text-muted-foreground mt-0.5 text-sm"
+						>{subtitle}</Dialog.Description
+					>
+				{/if}
+			</div>
+			<Dialog.Close
+				class="text-muted-foreground hover:text-foreground -mt-1 -mr-1 grid size-8 flex-none place-items-center rounded-md transition-colors"
+			>
+				<X class="size-4" />
+				<span class="sr-only">Close</span>
+			</Dialog.Close>
+		</header>
+		<div class="min-h-0 flex-1 overflow-y-auto px-6 py-5">
+			{@render children()}
+		</div>
+		{#if footer}
+			<footer
+				class="border-border bg-card/50 flex items-center justify-end gap-3 border-t px-6 py-4"
+			>
+				{@render footer()}
+			</footer>
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>