@delightstack/components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brian Schwabauer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,136 @@
+# @delightstack/components
+
+A polished, opinionated [Svelte 5](https://svelte.dev) component library focused on delightful
+user experiences — 50+ accessible, themeable components built on runes, with motion and
+micro-interactions designed in from the start.
+
+**Docs:** [docs.thedelight.co](https://docs.thedelight.co) ·
+**Live demo:** [docs.thedelight.co/demo](https://docs.thedelight.co/demo/)
+
+## Installation
+
+```bash
+pnpm add @delightstack/components @delightstack/styles
+```
+
+Import the design tokens once at the root of your app (e.g. `src/routes/+layout.svelte`):
+
+```ts
+import '@delightstack/styles';
+```
+
+Requires Svelte `^5.36.0`. Works with SvelteKit and standalone Vite + Svelte projects.
+
+## Usage
+
+All components are available from a single import — unused ones are tree-shaken:
+
+```svelte
+<script>
+	import { Button, Input, BottomSheet } from '@delightstack/components';
+
+	let name = $state('');
+	let open = $state(false);
+
+	async function save() {
+		await fetch('/api/user', { method: 'POST', body: JSON.stringify({ name }) });
+	}
+</script>
+
+<Input label="Name" bind:value={name} />
+<!-- Promise-returning callbacks show a loading state automatically -->
+<Button onclick={save}>Save</Button>
+<Button outline onclick={() => (open = true)}>Filters</Button>
+
+<BottomSheet bind:open snap_points={[0.5, 0.92]}>
+	<p>Slide me around.</p>
+</BottomSheet>
+```
+
+### Conventions
+
+- **Props are snake_case, callbacks are camelCase** — `snap_points`, `full_width` vs `onclick`,
+  `onchange`. The visual distinction between data and behavior is intentional.
+- **Callback props, not dispatched events.** Callbacks that return a Promise put the component
+  into a loading state until they settle.
+- **Two-way binding** with `bind:value`, plus component-specific bindables like `bind:open`,
+  `bind:snap`, and `bind:page`.
+- **Svelte 5 snippets** for named content areas (`{#snippet header()}…{/snippet}`).
+
+## Components
+
+| Category       | Components                                                                                                                                                              |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Actions**    | Button, ButtonGroup, Modal, Alert, Popover, ContextMenu, Portal, CommandPalette, ThemeToggle                                                                              |
+| **Display**    | Accordion, Avatar, AvatarGroup, Calendar, Chart, Code, Comparison, Counter, Expand, List, ListItem, QR, SplitPane, Stat, Table, Timeline, Tree, Typewriter                |
+| **Feedback**   | Callout, Confetti, Progress, Toaster (`toast()`)                                                                                                                          |
+| **Form**       | Checkbox, Fieldset, FileUpload, Form, Input, Radio, RadioGroup, Range, Rating, Select, Toggle                                                                             |
+| **Media**      | Carousel, Gallery, Image, Panorama, PDF, Video                                                                                                                            |
+| **Navigation** | BottomSheet, Breadcrumbs, Pagination, Steps, Tabs                                                                                                                         |
+
+Every component has a docs page with live examples and full Props / Events / CSS Variables /
+Accessibility tables: [docs.thedelight.co/components/overview](https://docs.thedelight.co/components/overview/).
+
+## Theming
+
+Components read every color, size, and motion value from CSS custom properties shipped by
+[`@delightstack/styles`](https://www.npmjs.com/package/@delightstack/styles), with light and dark
+values built in. Re-theme by overriding the brand seed or any individual token:
+
+```css
+:root {
+	/* Re-derives the whole palette from one brand color */
+	--color-primary: #2563eb;
+
+	/* …or override individual semantic tokens outright */
+	--color-action: light-dark(#2563eb, #3b82f6);
+	--radius-md: 0.5rem;
+}
+```
+
+See the [Theming](https://docs.thedelight.co/guides/theming/) and
+[Design Tokens](https://docs.thedelight.co/guides/design-tokens/) guides.
+
+## Optional peer dependencies
+
+A few media components dynamically import heavier libraries — install them only if you use the
+component, and import these two from their dedicated subpaths:
+
+| Component  | Peer dependency | Import from                          |
+| ---------- | --------------- | ------------------------------------ |
+| `Panorama` | `three`         | `@delightstack/components/panorama`  |
+| `PDF`      | `pdfjs-dist`    | `@delightstack/components/pdf`       |
+| `Video`    | `hls.js` (only for HLS sources) | `@delightstack/components` |
+
+In Vite dev, add the ones you use to `optimizeDeps.include` so they are not stubbed as absent
+optional dependencies.
+
+## TypeScript
+
+Types are included — no `@types/*` packages needed. Data-structure types ship from the main
+entry point:
+
+```ts
+import type { SelectOption, TableColumn, TreeNode, CalendarEvent } from '@delightstack/components';
+```
+
+The package also ships its full `.svelte` sources in `dist/`, so editors (and AI agents) get
+JSDoc descriptions for every prop.
+
+## AI coding agents
+
+Set up Claude Code, Cursor, Codex, and friends to use this library correctly in one command from
+your project root:
+
+```bash
+pnpm exec delightstack-agents
+```
+
+This installs a ready-made skill (`.claude/skills/delightstack/SKILL.md`) and points your
+`AGENTS.md` at it. Docs are also published as plain markdown — append `.md` to any docs page URL,
+or start from [docs.thedelight.co/llms.txt](https://docs.thedelight.co/llms.txt). See the
+[AI Agents guide](https://docs.thedelight.co/guides/ai-agents/).
+
+## License
+
+MIT

package/SKILL.md

@@ -0,0 +1,149 @@
+---
+name: delightstack
+description: Use DelightStack (@delightstack/components) when building UI in this project — a Svelte 5 component library with 50+ accessible, themeable components. Consult this skill when adding, styling, or wiring up any UI component, form, dialog, media viewer, or navigation element.
+---
+
+# DelightStack components
+
+DelightStack is this project's component library: 50+ Svelte 5 components built on
+runes, with theming via CSS design tokens. Prefer a DelightStack component over
+hand-rolling UI or adding another UI dependency.
+
+## Setup (skip if already installed)
+
+```bash
+pnpm add @delightstack/components @delightstack/styles
+```
+
+Import the design tokens once at the app root (e.g. the root `+layout.svelte`):
+
+```ts
+import '@delightstack/styles';
+```
+
+## Core conventions
+
+- **Single import point:** `import { Button, Input, Modal } from '@delightstack/components';`
+  Unused components are tree-shaken; there is no need for sub-path imports — with two
+  exceptions: `PDF` imports from `@delightstack/components/pdf` and `Panorama` from
+  `@delightstack/components/panorama` (they have heavy optional peer deps).
+- **Props are snake_case, callbacks are camelCase:** `snap_points`, `max_width`,
+  `morph_percent` vs `onclick`, `onchange`, `onsubmit`. This is intentional — do not
+  "fix" it.
+- **Callback props, not dispatched events.** When a callback returns a Promise, the
+  component automatically shows a loading state (e.g. `<Button onclick={save}>` spins
+  until `save()` resolves).
+- **Two-way binding** with `bind:value` on form components, plus component-specific
+  bindables like `bind:open` (Modal, BottomSheet), `bind:snap`, `bind:page`.
+- **Entity-backed forms:** when the data lives in a `Database.table()` (from
+  `@delightstack/database`), pass the entity to the Form and spread its field props —
+  `<Form entity={person}><Input {...person.form.field.email} /></Form>`. No
+  `bind:value`, no schema, no submit handler: values flow through the form context
+  (a field with a `name` and no `value`/`checked` prop is context-driven), each
+  field validates via its spread `parse`, and submit normalizes the draft then calls
+  `entity.save()` (`onsaved` fires on success; submit Buttons auto-disable while
+  saving). Works for create (`db.entity('person')`, no id) and edit. Boolean fields
+  spread onto `Checkbox` or `Toggle`, enum fields onto `Select` (the spread includes
+  ready-made `options`). Optional non-defaulted booleans are tri-state: unanswered
+  (`null`) displays as indeterminate — Checkbox resolves to checked on click (native
+  behavior) while Toggle gets a three-stop track the user can cycle back to the
+  middle; defaulted booleans display (and save) their default when unanswered. Standalone (no Form), `Input`/`Select` run `parse` on blur/close and
+  show the message below the field. Full guide:
+  https://docs.thedelight.co/guides/forms.md
+- **Svelte 5 snippets** (`{#snippet header()}…{/snippet}`), not slots, for named
+  content areas.
+- **Theming:** components read CSS custom properties from `@delightstack/styles`.
+  Re-theme by overriding `--color-primary` (re-derives the palette) or individual
+  tokens (`--color-action`, `--radius-md`, …) in your own CSS. Dark mode is built in
+  via `light-dark()` token values — never hardcode colors next to components.
+- **Optional peer deps:** `three` (Panorama) and `pdfjs-dist` (PDF) must be installed
+  by the consuming app. They are dynamically imported; in Vite dev, add them to
+  `optimizeDeps.include` so they are not stubbed as absent.
+- **TypeScript:** prop and data types ship with the package —
+  `import type { SelectOption, TableColumn, TreeNode, … } from '@delightstack/components';`
+
+## Looking up a component's full API
+
+Every docs page is available as plain markdown. Fetch
+`https://docs.thedelight.co/<docs path>` from the index below — each page includes
+usage examples plus complete Props / Events / CSS Variables / Accessibility tables.
+Also available: `https://docs.thedelight.co/llms.txt` (index) and `/llms-full.txt`
+(all docs in one file). When in doubt about a prop name or type, check the docs page,
+or read the component source shipped in `node_modules/@delightstack/components/dist/`
+— the `.svelte` files there carry full JSDoc on every prop, and the `.d.ts` files
+have the exact types. Do not guess prop names.
+
+## Component index
+
+### Actions
+- `Button` — Polished button with ripple, promise-aware loading, dropdown menus, confirmation flows (docs: /components/actions/button.md)
+- `ButtonGroup` — Groups related buttons with shared borders and context-driven prop inheritance (docs: /components/actions/button-group.md)
+- `Modal` — Dialog overlay with animations, focus trapping, backdrop blur, crossfade transitions (docs: /components/actions/modal.md)
+- `Alert` — Confirmation dialog built on Modal; programmatic yes/no `alert()` API (docs: /components/actions/alert.md)
+- `Popover` — Floating container with Floating UI positioning, trigger modes, hover-safe diagonal movement (docs: /components/actions/popover.md)
+- `ContextMenu` — Right-click menu via `{@attach contextMenu()}` attachment (docs: /components/actions/context-menu.md)
+- `Portal` — Renders children elsewhere in the DOM, escaping overflow and stacking contexts (docs: /components/actions/portal.md)
+- `CommandPalette` — Keyboard command interface with fuzzy search, recents, categories (docs: /components/actions/command-palette.md)
+- `ThemeToggle` — Light/dark/auto theme switcher with animated sun-moon morph (docs: /components/actions/theme-toggle.md)
+
+### Display
+- `Accordion` / `AccordionItem` — Stacked collapsible sections; default/`filled`/`outline` variants, optional `separated` mode where the open item splits the surface into rounded pieces (docs: /components/display/accordion.md)
+- `Avatar` — Profile image with initials fallback, status indicators, deterministic colors (docs: /components/display/avatar.md)
+- `AvatarGroup` — Stacked overlapping avatars with overflow indicator (docs: /components/display/avatar-group.md)
+- `Calendar` — Date display/selection with single, range, and multiple modes (docs: /components/display/calendar.md)
+- `Chart` — Data visualization: line, area, bar, horizontal bar, pie, donut (docs: /components/display/chart.md)
+- `Code` — Syntax-highlighted code block with line numbers, copy, diff display (docs: /components/display/code.md)
+- `Comparison` — Before/after image slider using CSS clip-path reveal (docs: /components/display/comparison.md)
+- `Counter` — Animated count-up/down number with scroll-into-view trigger (docs: /components/display/counter.md)
+- `Expand` — Animated expand/collapse container (docs: /components/display/expand.md)
+- `List` / `ListItem` — Selection-aware list; items act as buttons, radios, checkboxes, submenus (docs: /components/display/list.md, /components/display/list-item.md)
+- `QR` — QR code generator rendering crisp SVGs with colors, logo overlay, download (docs: /components/display/qr.md)
+- `SplitPane` — Resizable two-pane split with drag, keyboard, snap, collapse (docs: /components/display/split-pane.md)
+- `Stat` — Key metric display with labels, icons, change indicators (docs: /components/display/stat.md)
+- `Table` — Data table: sorting, pagination, selection, inline editing, CSV/JSON export (docs: /components/display/table.md)
+- `Timeline` / `TimelineItem` — Chronological events, vertical/horizontal, scroll-reveal (docs: /components/display/timeline.md)
+- `Tree` — Hierarchical data with expand/collapse, checkboxes, drag-and-drop, lazy loading, search (docs: /components/display/tree.md)
+- `Typewriter` — Character-by-character typing animation with text cycling (docs: /components/display/typewriter.md)
+
+### Feedback
+- `Callout` — Highlighted information block; inline callouts or full-width banners (docs: /components/feedback/callout.md)
+- `Confetti` — Canvas confetti celebration; programmatic `confetti()` or declarative component (docs: /components/feedback/confetti.md)
+- `Progress` — Unified loading indicator: circular spinners, linear bars, overlays (docs: /components/feedback/progress.md)
+- `Toaster` — Toast container; notifications created programmatically via `toast()` (docs: /components/feedback/toast.md)
+
+### Form
+- `Checkbox` — Styled checkbox with animated checkmark and indeterminate state (docs: /components/form/checkbox.md)
+- `Fieldset` — Semantic form-field grouping with optional border, grid layout, collapsible sections (docs: /components/form/fieldset.md)
+- `FileUpload` — Drag-and-drop file upload with previews; dropzone, compact, avatar variants (docs: /components/form/file-upload.md)
+- `Form` — Form container with Standard Schema validation, field-level validators, promise-aware submit, error auto-focus (docs: /components/form/form.md)
+- `Input` — 13 input types with floating labels, autocomplete, chips, masking, password strength, `parse` validation (docs: /components/form/input.md)
+- `Radio` / `RadioGroup` — Styled radio buttons, standalone or grouped (docs: /components/form/radio.md)
+- `Range` — Slider with two-thumb range mode, tick marks, value tooltips (docs: /components/form/range.md)
+- `Rating` — Star rating input with half-star precision, custom icons, read-only mode (docs: /components/form/rating.md)
+- `Select` — Dropdown with search, multi-select chips, groups, async loading, virtual scrolling (docs: /components/form/select.md)
+- `Toggle` — On/off switch with slide animation, three-state mode, `parse` validation (docs: /components/form/toggle.md)
+
+### Media
+- `Gallery` — Media gallery with seven display modes plus headless lightbox (docs: /components/media/gallery.md)
+- `Carousel` — Low-level media viewport behind Gallery: swipe, pinch-zoom, mixed media (docs: /components/media/carousel.md)
+- `Image` — Optimized image with lazy loading, blur-up placeholder, skeleton shimmer (docs: /components/media/image.md)
+- `Panorama` — Three.js 360° viewer; import from `@delightstack/components/panorama` (docs: /components/media/panorama.md)
+- `PDF` — Full PDF viewer; import from `@delightstack/components/pdf` (docs: /components/media/pdf.md)
+- `Video` — Custom video player with HLS quality switching, captions, PiP (docs: /components/media/video.md)
+
+### Navigation
+- `BottomSheet` — Mobile slide-up panel with snap points, spring gestures, pull-to-dismiss (docs: /components/navigation/bottom-sheet.md)
+- `Breadcrumbs` — Navigation trail with auto home icon and SSR-safe collapsing (docs: /components/navigation/breadcrumbs.md)
+- `Pagination` — Page navigation with ellipsis algorithm and page size selector (docs: /components/navigation/pagination.md)
+- `Steps` / `Step` — Multi-step progress indicator with animated wizard mode, error states, and horizontal overflow paging (docs: /components/navigation/steps.md)
+- `Tabs` — Data-driven tabbed navigation (`tabs={[{ label, badge, disabled, content }]}` + `bind:tab` index); spring sliding indicator; underline / pills / boxed (segmented) variants; vertical orientation; ripple feedback; fade/slide content transitions (docs: /components/navigation/tabs.md)
+
+## Beyond components
+
+DelightStack also ships a Cloudflare-native backend stack (`@delightstack/auth`,
+`database`, `websocket`, `presence`, `ai`, `stripe`, `images`, `rate-limiter`). Overview:
+https://docs.thedelight.co/stack/overview.md
+
+`@delightstack/presence` adds real-time presence (live cursors, online roster, cursor
+chat, reactions, field presence) on a swappable transport/identity. Docs:
+https://docs.thedelight.co/packages/presence.md

package/bin/agents.js

@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+/**
+ * `delightstack-agents` — sets up AI coding agents to use DelightStack well.
+ *
+ * - Installs the DelightStack skill at .claude/skills/delightstack/SKILL.md
+ *   (picked up automatically by Claude Code)
+ * - Appends a short pointer section to AGENTS.md (read by most coding agents;
+ *   created if missing) referencing the skill and the markdown docs
+ *
+ * Run from your project root: `pnpm exec delightstack-agents`
+ * Pass `--print` to write the skill to stdout instead of touching any files.
+ */
+import {
+	copyFileSync,
+	existsSync,
+	mkdirSync,
+	readFileSync,
+	appendFileSync,
+} from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const skillSource = join(dirname(fileURLToPath(import.meta.url)), '..', 'SKILL.md');
+
+if (process.argv.includes('--print')) {
+	process.stdout.write(readFileSync(skillSource, 'utf-8'));
+	process.exit(0);
+}
+
+const root = process.cwd();
+if (!existsSync(join(root, 'package.json'))) {
+	console.error('No package.json found — run this from your project root.');
+	process.exit(1);
+}
+
+// 1. Install the skill for Claude Code (and any agent that reads .claude/skills)
+const skillDir = join(root, '.claude', 'skills', 'delightstack');
+mkdirSync(skillDir, { recursive: true });
+copyFileSync(skillSource, join(skillDir, 'SKILL.md'));
+console.log('✓ Installed .claude/skills/delightstack/SKILL.md');
+
+// 2. Point AGENTS.md at the skill (idempotent via marker comment)
+const MARKER = '<!-- delightstack-agents -->';
+const SECTION = `\n${MARKER}\n## UI components: DelightStack\n\nThis project uses DelightStack (\`@delightstack/components\`) for UI. Before building\nor changing UI, read \`.claude/skills/delightstack/SKILL.md\` (also at\n\`node_modules/@delightstack/components/SKILL.md\`) — it has the component index and\nconventions. Full docs as markdown: https://docs.thedelight.co/llms.txt (append \`.md\`\nto any docs page URL).\n`;
+
+const agentsFile = join(root, 'AGENTS.md');
+const existing = existsSync(agentsFile) ? readFileSync(agentsFile, 'utf-8') : '';
+if (existing.includes(MARKER)) {
+	console.log('✓ AGENTS.md already references DelightStack — left unchanged');
+} else {
+	appendFileSync(
+		agentsFile,
+		(existing && !existing.endsWith('\n') ? '\n' : '') + SECTION,
+	);
+	console.log(
+		`✓ ${existing ? 'Updated' : 'Created'} AGENTS.md with a DelightStack section`,
+	);
+}
+
+console.log('\nAgents in this project now know how to use DelightStack.');
+console.log(
+	'Tip: if you use CLAUDE.md instead of AGENTS.md, move the appended section there.',
+);

package/dist/actions/Alert.svelte

@@ -0,0 +1,202 @@
+<script lang="ts" module>
+	import type { Component } from 'svelte';
+
+	export interface AlertOptions {
+		/** The title text shown at the top of the dialog */
+		title?: string;
+		/** The main message text of the dialog */
+		message: string;
+		/** Label for the cancel button */
+		cancel_text?: string;
+		/** Label for the confirm button */
+		continue_text?: string;
+		/** Whether the confirm action is destructive (styles the confirm button as an error/danger action) */
+		destructive?: boolean;
+		/** Icon component shown alongside the message */
+		icon?: Component<Record<string, never>>;
+	}
+
+	/**
+	 * Programmatic API: creates an Alert dialog imperatively and returns a Promise
+	 * resolving to `true` (confirmed) or `false` (cancelled).
+	 */
+	export async function alert(options: AlertOptions): Promise<boolean> {
+		const { mount, unmount } = await import('svelte');
+		const mod = await import('./Alert.svelte');
+		const AlertComponent = mod.default;
+
+		return new Promise((resolve) => {
+			let container = document.querySelector('.portals');
+			if (!container) {
+				container = document.createElement('div');
+				container.classList.add('portals');
+				document.body.appendChild(container);
+			}
+			const wrapper = document.createElement('div');
+			container.appendChild(wrapper);
+
+			let instance: Record<string, unknown>;
+
+			const props = $state({
+				open: false,
+				title: options.title || 'Confirm',
+				message: options.message,
+				cancel_text: options.cancel_text || 'Cancel',
+				continue_text: options.continue_text || 'Continue',
+				destructive: options.destructive || false,
+				icon: options.icon,
+				oncancel: () => cleanup(false),
+				oncontinue: () => cleanup(true),
+			});
+
+			function cleanup(result: boolean) {
+				resolve(result);
+				try {
+					unmount(instance);
+				} catch {
+					// already unmounted
+				}
+				wrapper.remove();
+			}
+
+			instance = mount(AlertComponent, {
+				target: wrapper,
+				props,
+			});
+
+			// Flip open on next frame so the Modal sees the false→true transition and animates in
+			requestAnimationFrame(() => {
+				props.open = true;
+			});
+		});
+	}
+</script>
+
+<script lang="ts">
+	import Modal from './Modal.svelte';
+	import Button from './Button.svelte';
+
+	const propId = $props.id();
+	let {
+		/** Controls visibility */
+		open = $bindable(false) as boolean,
+
+		/** Alert title */
+		title = 'Confirm',
+
+		/** Alert message / question */
+		message = '',
+
+		/** Cancel button label */
+		cancel_text = 'Cancel',
+
+		/** Confirm button label */
+		continue_text = 'Continue',
+
+		/** Style confirm button with error color */
+		destructive = false,
+
+		/** Optional icon displayed above the title */
+		icon: Icon = undefined as Component<Record<string, never>> | undefined,
+
+		/** Element ID */
+		id = propId,
+
+		/** Additional CSS classes */
+		class: class_name = '',
+
+		/** Called when Cancel is clicked */
+		oncancel = undefined as (() => void) | undefined,
+
+		/** Called when Confirm is clicked; promise-aware */
+		oncontinue = undefined as (() => void | Promise<void>) | undefined,
+	} = $props();
+
+	function handleCancel() {
+		open = false;
+		oncancel?.();
+	}
+
+	function handleBackdropClick() {
+		handleCancel();
+	}
+
+	function handleClose() {
+		handleCancel();
+		return true;
+	}
+</script>
+
+<Modal
+	bind:open
+	title=""
+	closable
+	disable_close_icon
+	width="400px"
+	max_width="calc(100vw - 2rem)"
+	onclose={handleClose}
+	onbackdropclick={handleBackdropClick}
+	{id}
+	class="alert-modal {class_name}">
+	<div class="alert">
+		{#if Icon}
+			<div class="icon" class:destructive>
+				<Icon />
+			</div>
+		{/if}
+		{#if title}
+			<h3>{title}</h3>
+		{/if}
+		{#if message}
+			<p>{message}</p>
+		{/if}
+		<div class="actions">
+			<Button error={destructive} full_width onclick={oncontinue}>
+				{continue_text}
+			</Button>
+			<Button translucent full_width onclick={handleCancel}>
+				{cancel_text}
+			</Button>
+		</div>
+	</div>
+</Modal>
+
+<style>
+	.alert {
+		text-align: center;
+		padding: 0.5rem 0;
+	}
+
+	.icon {
+		display: flex;
+		justify-content: center;
+		margin-bottom: 0.75rem;
+		color: var(--color-text-muted);
+		font-size: 2rem;
+
+		&.destructive {
+			color: var(--color-error);
+		}
+	}
+
+	h3 {
+		font-size: var(--text-lg, 1.125rem);
+		font-weight: var(--font-weight-semibold, 600);
+		color: var(--color-text);
+		margin: 0 0 0.5rem;
+	}
+
+	p {
+		font-size: var(--text-base, 1rem);
+		color: var(--color-text-muted);
+		line-height: var(--leading-relaxed, 1.75);
+		margin: 0;
+	}
+
+	.actions {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding-top: 1.5rem;
+	}
+</style>

package/dist/actions/Alert.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Component } from 'svelte';
+export interface AlertOptions {
+    /** The title text shown at the top of the dialog */
+    title?: string;
+    /** The main message text of the dialog */
+    message: string;
+    /** Label for the cancel button */
+    cancel_text?: string;
+    /** Label for the confirm button */
+    continue_text?: string;
+    /** Whether the confirm action is destructive (styles the confirm button as an error/danger action) */
+    destructive?: boolean;
+    /** Icon component shown alongside the message */
+    icon?: Component<Record<string, never>>;
+}
+/**
+ * Programmatic API: creates an Alert dialog imperatively and returns a Promise
+ * resolving to `true` (confirmed) or `false` (cancelled).
+ */
+export declare function alert(options: AlertOptions): Promise<boolean>;
+declare const Alert: Component<{
+    open?: boolean;
+    title?: string;
+    message?: string;
+    cancel_text?: string;
+    continue_text?: string;
+    destructive?: boolean;
+    icon?: Component<Record<string, never>> | undefined;
+    id?: string;
+    class?: string;
+    oncancel?: (() => void) | undefined;
+    oncontinue?: (() => void | Promise<void>) | undefined;
+}, {}, "open">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;
+//# sourceMappingURL=Alert.svelte.d.ts.map

package/dist/actions/Alert.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../src/actions/Alert.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAExC,MAAM,WAAW,YAAY;IAC5B,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAsB,KAAK,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,CAiDnE;AA2FF,QAAA,MAAM,KAAK;WAjFqE,OAAO;YAAU,MAAM;cAAY,MAAM;kBAAgB,MAAM;oBAAkB,MAAM;kBAAgB,OAAO;WAAS,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG,SAAS;;YAA8B,MAAM;eAAa,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS;iBAAe,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS;cAiFhU,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}