@joewinke/jatui 0.2.33 → 0.3.1

package/dist/components/DirtyFormHost.svelte.d.ts

@@ -0,0 +1,65 @@
+/**
+     * DirtyFormHost — declarative wrapper around createDirtyGuard.
+     *
+     * Renders your form body plus (optionally) a floating "Unsaved changes"
+     * pill + Cancel button. Composable API: pass `baseline`, `current`, and
+     * `onCancel` via props; the host wires beforeunload + (optional) SvelteKit
+     * beforeNavigate. Consumers who want a bespoke pill/Cancel treatment
+     * should skip this component and call `createDirtyGuard` directly.
+     *
+     * Usage:
+     *   // in a Svelte component:
+     *   //   import { beforeNavigate } from '$app/navigation';
+     *
+     *   <DirtyFormHost {baseline} current={draft} onCancel={() => draft = { ...baseline }} {beforeNavigate}>
+     *     {#snippet children({ dirty, cancel })}
+     *       <form>...form body...</form>
+     *     {/snippet}
+     *   </DirtyFormHost>
+     */
+import { type BeforeNavigateFn } from '../utils/dirtyGuard';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /** Saved (baseline) form value. */
+        baseline: T;
+        /** Current (draft) form value. */
+        current: T;
+        /** Snap back to baseline. */
+        onCancel?: () => void;
+        /** SvelteKit `beforeNavigate` — pass through from `$app/navigation`. */
+        beforeNavigate?: BeforeNavigateFn;
+        /** Discard-prompt string. Default "Discard unsaved changes?" */
+        discardPrompt?: string;
+        /** Custom equality. Default JSON.stringify. */
+        equals?: (a: T, b: T) => boolean;
+        /** Hide the default pill + Cancel chrome and let the snippet render its own. */
+        hideChrome?: boolean;
+        /** Form body. Receives the guard controller as its first arg. */
+        children: Snippet<[{
+            dirty: boolean;
+            cancel: () => void;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DirtyFormHost: $$IsomorphicComponent;
+type DirtyFormHost<T> = InstanceType<typeof DirtyFormHost<T>>;
+export default DirtyFormHost;

package/dist/components/MediaLightbox.svelte

@@ -0,0 +1,340 @@
+<script lang="ts">
+	/**
+	 * MediaLightbox — full-screen media preview.
+	 *
+	 * Standard z-9040 backdrop, keyboard nav (Esc to close, ArrowLeft/Right
+	 * to page through an array), zoom controls, download action. Replaces the
+	 * hand-rolled `fixed inset-0 z-[9040]` lightboxes in the codebase.
+	 *
+	 * For annotated / markup-overlaid image previews, use `ImageLightbox`
+	 * (which composes AnnotationLayer + MarkupOverlay). This primitive is
+	 * for the general "just show it big" case.
+	 *
+	 * Usage — single item:
+	 *   <MediaLightbox
+	 *     src="https://cdn/photo.jpg"
+	 *     filename="photo.jpg"
+	 *     onClose={() => open = false}
+	 *   />
+	 *
+	 * Usage — carousel:
+	 *   <MediaLightbox items={[
+	 *     { src, filename, kind: 'image' },
+	 *     { src: videoSrc, filename: 'clip.mp4', kind: 'video' },
+	 *   ]} initialIndex={0} onClose={close} />
+	 */
+
+	import { fade } from 'svelte/transition';
+
+	export type MediaItem = {
+		src: string;
+		filename?: string;
+		kind?: 'image' | 'video';
+		downloadUrl?: string;
+	};
+
+	interface Props {
+		/** Single-item shorthand — either provide `src`+`filename`+`kind`, or `items`+`initialIndex`. */
+		src?: string;
+		filename?: string;
+		kind?: 'image' | 'video';
+		downloadUrl?: string;
+		/** Array of items for carousel navigation. Overrides `src` when provided. */
+		items?: MediaItem[];
+		/** Start index into `items`. Default 0. */
+		initialIndex?: number;
+		/** Called when the user closes via Escape, backdrop click, or ×. */
+		onClose?: () => void;
+		/** Stacking context. Default 9040 (matches the app's existing overlay tier). */
+		zIndex?: number;
+	}
+
+	let {
+		src,
+		filename,
+		kind = 'image',
+		downloadUrl,
+		items,
+		initialIndex = 0,
+		onClose,
+		zIndex = 9040,
+	}: Props = $props();
+
+	// Normalize into an items array; single-item form is index 0.
+	const list = $derived<MediaItem[]>(
+		items && items.length > 0
+			? items
+			: src
+				? [{ src, filename, kind, downloadUrl }]
+				: [],
+	);
+
+	let index = $state(0);
+	let zoom = $state(1);
+
+	// Snap index to a valid position when items/initialIndex are set.
+	$effect(() => {
+		const max = (items?.length ?? 1) - 1;
+		index = Math.max(0, Math.min(initialIndex, max));
+	});
+
+	const current = $derived<MediaItem | null>(list[index] ?? null);
+	const isVideo = $derived(current?.kind === 'video');
+	const canPage = $derived(list.length > 1);
+
+	function next() {
+		if (!canPage) return;
+		index = (index + 1) % list.length;
+		zoom = 1;
+	}
+	function prev() {
+		if (!canPage) return;
+		index = (index - 1 + list.length) % list.length;
+		zoom = 1;
+	}
+	function close() {
+		onClose?.();
+	}
+	function zoomIn() {
+		zoom = Math.min(4, zoom + 0.25);
+	}
+	function zoomOut() {
+		zoom = Math.max(0.25, zoom - 0.25);
+	}
+	function resetZoom() {
+		zoom = 1;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			close();
+		} else if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			next();
+		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			prev();
+		} else if (e.key === '+' || e.key === '=') {
+			e.preventDefault();
+			zoomIn();
+		} else if (e.key === '-' || e.key === '_') {
+			e.preventDefault();
+			zoomOut();
+		} else if (e.key === '0') {
+			e.preventDefault();
+			resetZoom();
+		}
+	}
+
+	$effect(() => {
+		if (typeof window === 'undefined') return;
+		window.addEventListener('keydown', handleKeydown);
+		return () => window.removeEventListener('keydown', handleKeydown);
+	});
+</script>
+
+{#if current}
+	<div
+		class="mlb-scrim"
+		style="z-index: {zIndex};"
+		transition:fade={{ duration: 120 }}
+		role="dialog"
+		aria-modal="true"
+		aria-label={current.filename ?? 'Media preview'}
+	>
+		<!-- Backdrop click closes. Real button underlay so it's keyboard-safe. -->
+		<button
+			type="button"
+			class="mlb-backdrop"
+			aria-label="Close preview"
+			onclick={close}
+		></button>
+
+		<!-- Header chrome -->
+		<div class="mlb-header">
+			<span class="mlb-title" title={current.filename ?? ''}>
+				{current.filename ?? 'Preview'}
+				{#if canPage}
+					<span class="mlb-count">{index + 1} / {list.length}</span>
+				{/if}
+			</span>
+			<div class="mlb-actions">
+				{#if !isVideo}
+					<button type="button" class="mlb-btn" onclick={zoomOut} aria-label="Zoom out">−</button>
+					<button type="button" class="mlb-btn" onclick={resetZoom} aria-label="Reset zoom">
+						{Math.round(zoom * 100)}%
+					</button>
+					<button type="button" class="mlb-btn" onclick={zoomIn} aria-label="Zoom in">+</button>
+				{/if}
+				<a
+					class="mlb-btn"
+					href={current.downloadUrl ?? current.src}
+					download={current.filename ?? ''}
+					aria-label="Download"
+				>
+					Download
+				</a>
+				<button type="button" class="mlb-btn mlb-close" onclick={close} aria-label="Close">
+					×
+				</button>
+			</div>
+		</div>
+
+		<!-- Prev/next chrome -->
+		{#if canPage}
+			<button type="button" class="mlb-nav mlb-nav-prev" onclick={prev} aria-label="Previous">
+				‹
+			</button>
+			<button type="button" class="mlb-nav mlb-nav-next" onclick={next} aria-label="Next">
+				›
+			</button>
+		{/if}
+
+		<!-- Media -->
+		<div class="mlb-stage">
+			{#if isVideo}
+				<!-- svelte-ignore a11y_media_has_caption -->
+				<video
+					src={current.src}
+					controls
+					autoplay
+					class="mlb-video"
+				></video>
+			{:else}
+				<img
+					src={current.src}
+					alt={current.filename ?? 'Preview'}
+					class="mlb-image"
+					style="transform: scale({zoom});"
+				/>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.mlb-scrim {
+		position: fixed;
+		inset: 0;
+		background: oklch(0 0 0 / 0.86);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.mlb-backdrop {
+		position: absolute;
+		inset: 0;
+		background: transparent;
+		border: none;
+		cursor: zoom-out;
+	}
+	.mlb-header {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		padding: 0.625rem 1rem;
+		background: linear-gradient(to bottom, oklch(0 0 0 / 0.55), transparent);
+		color: var(--color-base-100, #fff);
+		pointer-events: none;
+		z-index: 2;
+	}
+	.mlb-header > * {
+		pointer-events: auto;
+	}
+	.mlb-title {
+		font-size: 0.875rem;
+		font-weight: 500;
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.mlb-count {
+		font-size: 0.75rem;
+		color: oklch(0.85 0 0 / 0.8);
+		font-variant-numeric: tabular-nums;
+	}
+	.mlb-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+	.mlb-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		min-width: 2rem;
+		height: 2rem;
+		padding: 0 0.625rem;
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: oklch(0.95 0 0);
+		background: oklch(1 0 0 / 0.1);
+		border: 1px solid oklch(1 0 0 / 0.15);
+		border-radius: 0.375rem;
+		cursor: pointer;
+		text-decoration: none;
+		transition: background 0.15s;
+	}
+	.mlb-btn:hover {
+		background: oklch(1 0 0 / 0.2);
+	}
+	.mlb-close {
+		font-size: 1.25rem;
+		line-height: 1;
+	}
+	.mlb-nav {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 3rem;
+		height: 3rem;
+		background: oklch(1 0 0 / 0.1);
+		color: oklch(0.95 0 0);
+		font-size: 2rem;
+		line-height: 1;
+		border: 1px solid oklch(1 0 0 / 0.15);
+		border-radius: 999px;
+		cursor: pointer;
+		z-index: 2;
+		transition: background 0.15s;
+	}
+	.mlb-nav:hover {
+		background: oklch(1 0 0 / 0.2);
+	}
+	.mlb-nav-prev {
+		left: 1rem;
+	}
+	.mlb-nav-next {
+		right: 1rem;
+	}
+	.mlb-stage {
+		position: relative;
+		z-index: 1;
+		max-width: 92vw;
+		max-height: 88vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	.mlb-image {
+		max-width: 92vw;
+		max-height: 88vh;
+		object-fit: contain;
+		transition: transform 0.15s;
+		transform-origin: center center;
+	}
+	.mlb-video {
+		max-width: 92vw;
+		max-height: 88vh;
+	}
+</style>

package/dist/components/MediaLightbox.svelte.d.ts

@@ -0,0 +1,24 @@
+export type MediaItem = {
+    src: string;
+    filename?: string;
+    kind?: 'image' | 'video';
+    downloadUrl?: string;
+};
+interface Props {
+    /** Single-item shorthand — either provide `src`+`filename`+`kind`, or `items`+`initialIndex`. */
+    src?: string;
+    filename?: string;
+    kind?: 'image' | 'video';
+    downloadUrl?: string;
+    /** Array of items for carousel navigation. Overrides `src` when provided. */
+    items?: MediaItem[];
+    /** Start index into `items`. Default 0. */
+    initialIndex?: number;
+    /** Called when the user closes via Escape, backdrop click, or ×. */
+    onClose?: () => void;
+    /** Stacking context. Default 9040 (matches the app's existing overlay tier). */
+    zIndex?: number;
+}
+declare const MediaLightbox: import("svelte").Component<Props, {}, "">;
+type MediaLightbox = ReturnType<typeof MediaLightbox>;
+export default MediaLightbox;

package/dist/components/Modal.svelte

@@ -23,7 +23,13 @@
 		contentClass?: string;
 		ariaLabel?: string;
 		dismissible?: boolean;
-		zIndex?: number;
+		/**
+		 * Stacking z-index. Accepts a numeric literal (`9040`) or any CSS
+		 * `z-index` string, including CSS custom properties
+		 * (`"var(--z-lightbox)"`). Strings are used as-is; numbers are
+		 * coerced to strings. Default `1000`.
+		 */
+		zIndex?: string | number;
 		/**
 		 * When true (default), keydown events fired inside the modal are stopped
 		 * from propagating to window — preventing page-level list/keyboard
@@ -183,7 +189,7 @@
 	<dialog
 		bind:this={modalElement}
 		class={modalClass}
-		style="z-index: {zIndex}"
+		style="z-index: {typeof zIndex === 'number' ? String(zIndex) : zIndex}"
 		aria-modal="true"
 		aria-label={ariaLabel || title}
 		open

package/dist/components/Modal.svelte.d.ts

@@ -11,7 +11,13 @@ interface Props {
     contentClass?: string;
     ariaLabel?: string;
     dismissible?: boolean;
-    zIndex?: number;
+    /**
+     * Stacking z-index. Accepts a numeric literal (`9040`) or any CSS
+     * `z-index` string, including CSS custom properties
+     * (`"var(--z-lightbox)"`). Strings are used as-is; numbers are
+     * coerced to strings. Default `1000`.
+     */
+    zIndex?: string | number;
     /**
      * When true (default), keydown events fired inside the modal are stopped
      * from propagating to window — preventing page-level list/keyboard

package/dist/components/Tooltip.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	/**
+	 * Tooltip — component wrapper around the shared `use:tooltip` action.
+	 *
+	 * Prefer `use:tooltip` directly on any element you already control. This
+	 * component form is convenient when you want to wrap an existing chunk
+	 * of markup (a chip, a badge, an icon) without editing its element to
+	 * add an attribute — e.g. inside a template that isn't easily touched.
+	 * Both surfaces share the same warm/cool window and a11y wiring under
+	 * the hood.
+	 *
+	 * Replaces the `<span class="tooltip" tabindex="0" data-tip="...">` hack:
+	 * that pattern makes non-interactive spans "keyboard reachable" without
+	 * ever routing to anything (a keyboard user tabs to a dead stop). This
+	 * wrapper propagates the tip onto whatever's inside — if the child is
+	 * already focusable (button/link/input), keyboard users get the tooltip
+	 * on focus; if not, only pointer users do, which is the correct default.
+	 *
+	 * Usage:
+	 *   <Tooltip content="Reset to defaults">
+	 *     <button type="button" onclick={reset}>Reset</button>
+	 *   </Tooltip>
+	 */
+
+	import { tooltip } from '../actions/tooltip';
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		/** Tooltip content (plain text). */
+		content: string;
+		/** Preferred placement. Default 'top'. */
+		placement?: 'top' | 'bottom' | 'left' | 'right';
+		/** ms to wait before showing (default 400; 0 = instant). */
+		delayMs?: number;
+		/** Force-disable — the wrapper renders its children with no tooltip attached. */
+		disabled?: boolean;
+		/** Wrapper element display. Default 'inline-flex' — matches the anchor's baseline behaviour. */
+		display?: 'inline' | 'inline-flex' | 'inline-block' | 'block' | 'contents';
+		children: Snippet;
+	}
+
+	let {
+		content,
+		placement = 'top',
+		delayMs = 400,
+		disabled = false,
+		display = 'inline-flex',
+		children,
+	}: Props = $props();
+</script>
+
+{#if disabled}
+	<span class="jatui-tooltip-wrap" style="display: {display};">{@render children()}</span>
+{:else}
+	<span
+		class="jatui-tooltip-wrap"
+		style="display: {display};"
+		use:tooltip={{ text: content, placement, delayMs }}
+	>
+		{@render children()}
+	</span>
+{/if}
+
+<style>
+	.jatui-tooltip-wrap {
+		align-items: center;
+	}
+</style>

package/dist/components/Tooltip.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Tooltip content (plain text). */
+    content: string;
+    /** Preferred placement. Default 'top'. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /** ms to wait before showing (default 400; 0 = instant). */
+    delayMs?: number;
+    /** Force-disable — the wrapper renders its children with no tooltip attached. */
+    disabled?: boolean;
+    /** Wrapper element display. Default 'inline-flex' — matches the anchor's baseline behaviour. */
+    display?: 'inline' | 'inline-flex' | 'inline-block' | 'block' | 'contents';
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<Props, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/index.d.ts

@@ -37,7 +37,15 @@ export { default as DateRangePicker } from './components/DateRangePicker.svelte'
 export { default as SortDropdown } from './components/SortDropdown.svelte';
 export { default as InlineEdit } from './components/InlineEdit.svelte';
 export { default as FloatingActionBar } from './components/FloatingActionBar.svelte';
+export { default as BulkActionBar } from './components/BulkActionBar.svelte';
+export type { BulkAction } from './components/BulkActionBar.svelte';
 export { default as HunkDiffView } from './components/HunkDiffView.svelte';
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as DirtyFormHost } from './components/DirtyFormHost.svelte';
+export { createDirtyGuard } from './utils/dirtyGuard';
+export type { DirtyGuard, DirtyGuardOptions, BeforeNavigateFn } from './utils/dirtyGuard';
+export { default as MediaLightbox } from './components/MediaLightbox.svelte';
+export type { MediaItem } from './components/MediaLightbox.svelte';
 export { default as Button } from './components/Button.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Card } from './components/Card.svelte';
@@ -90,7 +98,7 @@ export type { ShortenedLink } from './components/LinkShortener.svelte';
 export type { SearchDropdownOption, SearchDropdownGroup } from './components/SearchDropdown.svelte';
 export type { ChipSuggestion, SuggestionGroup, ChipInfo } from './components/ChipInput.svelte';
 export type { SortOption } from './components/SortDropdown.svelte';
-export type { ContextMenuItem } from './components/ContextMenu.svelte';
+export type { ContextMenuItem, ActionItem as ContextMenuActionItem, DividerItem as ContextMenuDividerItem, SubmitConfig as ContextMenuSubmitConfig } from './components/ContextMenu.types.js';
 export type { DisplaySegment } from './components/InlineEdit.svelte';
 export type { ActionButton, ActionDropdown, DropdownItem } from './components/FloatingActionBar.svelte';
 export type { SelectOption } from './components/SelectInput.svelte';

package/dist/index.js

@@ -41,7 +41,13 @@ export { default as DateRangePicker } from './components/DateRangePicker.svelte'
 export { default as SortDropdown } from './components/SortDropdown.svelte';
 export { default as InlineEdit } from './components/InlineEdit.svelte';
 export { default as FloatingActionBar } from './components/FloatingActionBar.svelte';
+export { default as BulkActionBar } from './components/BulkActionBar.svelte';
 export { default as HunkDiffView } from './components/HunkDiffView.svelte';
+// Primitives — accessibility + form-editor scaffolding
+export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as DirtyFormHost } from './components/DirtyFormHost.svelte';
+export { createDirtyGuard } from './utils/dirtyGuard';
+export { default as MediaLightbox } from './components/MediaLightbox.svelte';
 // Components — from Flush
 export { default as Button } from './components/Button.svelte';
 export { default as Badge } from './components/Badge.svelte';

package/dist/stores/confirmDialog.d.ts

@@ -1,10 +1,17 @@
 /**
  * Global promise-based confirm dialog.
- * Usage: const ok = await showConfirm({ title: '...', body: '...' })
+ * Usage:
+ *   const ok = await showConfirm({ title: '...', body: '...' })          // string body
+ *   const ok = await showConfirm({ title, body: warningSnippet })         // rich snippet body
+ *
+ * `body` accepts either a plain string (backwards-compatible) or a Svelte
+ * `Snippet` for rich content — conditional warnings, formatted amounts, etc.
  */
+import type { Snippet } from 'svelte';
 export type ConfirmOptions = {
     title: string;
-    body?: string;
+    /** Plain-text body OR a Snippet for rich content. */
+    body?: string | Snippet;
     confirmLabel?: string;
     cancelLabel?: string;
     danger?: boolean;

package/dist/styles/rail.css

@@ -61,3 +61,16 @@
     animation: none;
   }
 }
+
+/* ─── text-2xs — 11px micro-caption utility ─────────────────────────────
+   Standardizes the ~13+ ad-hoc text-[10px] / text-[0.7rem] micro-captions
+   scattered across JST routes (timestamps, hint text, footnote captions).
+   Between Tailwind's `text-xs` (0.75rem / 12px) and browser-min legibility.
+   Slight positive letter-spacing (0.01em) keeps it readable at 11px.
+   ─────────────────────────────────────────────────────────────────────── */
+
+.text-2xs {
+  font-size: 0.6875rem;      /* 11px */
+  line-height: 1rem;          /* 16px */
+  letter-spacing: 0.01em;
+}

package/dist/utils/dirtyGuard.d.ts

@@ -0,0 +1,49 @@
+/**
+ * createDirtyGuard — form dirty-state manager for a Svelte 5 editor.
+ *
+ * Wraps the four-move F12 pattern: dirty detection (baseline vs current),
+ * `beforeunload` guard while dirty, `beforeNavigate` guard for internal
+ * SvelteKit navigation, and a `cancel()` that snaps the draft back to
+ * baseline. UI (pill + Cancel button) is left to the caller so it can match
+ * the surrounding surface.
+ *
+ * SvelteKit's `beforeNavigate` is only wired when the caller passes it in via
+ * `beforeNavigate`. This keeps jatui a plain Svelte package with no
+ * SvelteKit peer-dep.
+ *
+ * Usage:
+ *   import { beforeNavigate } from '$app/navigation';
+ *   const guard = createDirtyGuard({
+ *     baseline: () => initial,
+ *     current:  () => draft,
+ *     onCancel: () => { draft = { ...initial } },
+ *     beforeNavigate,
+ *   });
+ *   // In markup:
+ *   {#if guard.dirty}<span class="pill">Unsaved changes</span>{/if}
+ */
+export type BeforeNavigateFn = (handler: (nav: {
+    type: string;
+    cancel: () => void;
+}) => void) => void;
+export interface DirtyGuardOptions<T> {
+    /** Returns the baseline (saved) form value. */
+    baseline: () => T;
+    /** Returns the current (draft) form value. */
+    current: () => T;
+    /** Called when the user clicks Cancel or confirms a discard. Snap draft to baseline. */
+    onCancel?: () => void;
+    /** Custom equality — default is JSON.stringify comparison. */
+    equals?: (a: T, b: T) => boolean;
+    /** SvelteKit `beforeNavigate` — pass through from `$app/navigation` when available. */
+    beforeNavigate?: BeforeNavigateFn;
+    /** Prompt string for the internal-nav confirm. Default "Discard unsaved changes?" */
+    discardPrompt?: string;
+}
+export interface DirtyGuard {
+    /** True whenever current !== baseline (reactive). */
+    readonly dirty: boolean;
+    /** Snap the draft back to baseline (calls the caller's onCancel). */
+    cancel: () => void;
+}
+export declare function createDirtyGuard<T>(opts: DirtyGuardOptions<T>): DirtyGuard;