@joewinke/jatui 0.2.32 → 0.3.0

package/CLAUDE.md

@@ -65,14 +65,18 @@ Then import:
 | `Sparkline` | Inline mini chart | `data: number[]`, `width`, `height`, `color` |
 | `LazyImage` | Image with lazy loading + placeholder | `src`, `alt`, `placeholder` |
 | `HunkDiffView` | Side-by-side diff with line numbers, red/green backgrounds, strikethrough on removed lines, inline word-level highlights via the `diff` lib. Used for reviewing YAML/text changes per hunk. | `oldText: string \| null`, `newText: string \| null`, `unified?: boolean` |
-| `ContextMenu` | Floating right-click (or programmatic) action menu, positioned via `use:floating` at a cursor point. Real `<button>`s, per-item `icon`/`variant`/`disabled`, dividers, click-outside + Escape dismiss, arrow-key/Home/End roving nav (focus starts on the first item). | `open` (bindable), `x`, `y`, `items: ContextMenuItem[]`, `header?`, `zIndex?`, `onClose?` |
+| `ContextMenu` | Floating right-click (or programmatic) action menu, positioned via `use:floating` at a cursor point. Real `<button>`s, per-item `icon`/`variant`/`disabled`, dividers, click-outside + Escape dismiss, arrow-key/Home/End roving nav (focus starts on the first item). Items may declare `submit: SubmitConfig` to POST to a SvelteKit form action instead of (or in addition to) `onSelect` — a hidden `<form>` is built, requestSubmit()ed, then removed, so `use:enhance` fires exactly like a regular form submission. | `open` (bindable), `x`, `y`, `items: ContextMenuItem[]`, `header?`, `zIndex?`, `onClose?` |
 | `ContextMenuTrigger` | Wraps content with the standard right-click + "⋯" touch affordance, backed by `ContextMenu`. Use instead of hand-rolling `oncontextmenu` + a kebab button per row/card. | `items: ContextMenuItem[]`, `children` (snippet), `header?`, `triggerLabel?`, `hideButton?`, `zIndex?`, `class?` |
+| `Tooltip` | Component-shaped wrapper around the shared `use:tooltip` action — for cases where you can't easily add an attribute to the target element (wrap a chip / badge / icon in the tooltip instead). Warm/cool window + `aria-describedby` are shared with the action. Prefer `use:tooltip` directly when you own the element. | `content: string`, `placement?`, `delayMs?`, `disabled?`, `display?`, `children` (snippet) |
+| `DirtyFormHost` | Composable form dirty-state manager — renders your form body plus a floating "Unsaved changes" pill + Cancel button; wires `beforeunload` and (optional) SvelteKit `beforeNavigate`. Callers who want bespoke pill/Cancel chrome use `createDirtyGuard()` directly and skip the component. Extracted from the F12 pattern in `/admin/roles/[id]`. | `baseline: T`, `current: T`, `onCancel?`, `beforeNavigate?`, `discardPrompt?`, `equals?`, `hideChrome?`, `children` (snippet with `{dirty, cancel}`) |
+| `BulkActionBar` | Floating action bar that appears when a `listNav` selection is non-empty. Simpler API than `FloatingActionBar` (takes a `Set`, `Array`, or plain number for `selection`, and a flat `actions[]` with `{label, onSelect, destructive?}`) — reach for `FloatingActionBar` directly when you need dropdown groups. | `selection: Set \| Array \| number`, `actions: BulkAction[]`, `onClear?`, `loading?`, `countLabel?` |
 
 ### Media
 
 | Component | Purpose | Key Props |
 |-----------|---------|-----------|
 | `MediaWorkbench` | Full-featured image editor modal — upload, AI generate, AI edit, background removal, annotation canvas. **Preferred over `SmartImageEditor` for new image fields.** Two-column modal: preview left, 4 action tabs right (Generate, Edit, Remove BG, Annotate). Save uploads blob to `uploadEndpoint` or emits `onComplete`. Requires proxy endpoints from jst-23w1l.2. | `value` (bindable `string \| null`), `uploadEndpoint?` (default `/api/media`), `onComplete?`, `accept?` |
+| `MediaLightbox` | Full-screen media preview — z-9040 backdrop, arrow-key paging when given an array, `+/-/0` zoom, download action, Escape/backdrop close. **Use this for the general "just show it big" case** — replaces hand-rolled `fixed inset-0 z-[9040]` modals. For annotated / markup-overlaid image previews, use `ImageLightbox` instead. | `src?`, `filename?`, `kind?: 'image' \| 'video'`, `downloadUrl?`, `items?: MediaItem[]`, `initialIndex?`, `onClose?`, `zIndex?` |
 | `VideoPlayer` | **The default video surface — reach for this over a bare `<video controls>`.** One timeline band carrying a waveform-envelope scrubber, chapter flags (top edge), bookmark diamonds (bottom edge), diarized speaker colouring and scroll-to-zoom, plus an optional transcript pane (click to seek, active line auto-scroll, solo/skip per speaker) and talk-time legend. **Every intelligence prop is optional** — a bare mp4 still gets the scrubber, hover-time card, wheel volume and keyboard map, and each pane lights up as its data arrives (nothing shifts layout when diarization lands late). Wheel means volume over the video (shift = seek) and zoom over the band. | `src`, `chapters?`, `speakers?`, `transcript?`, `bookmarks?`, `waveform?`, `talkTime?`, `startAt?`, `poster?`, `captionsSrc?`, `transcriptPosition?` (`'below' \| 'side'`), `onTimeUpdate?`, `onAddBookmark?`, `onBookmarkContext?` |
 
 **`VideoPlayer` vs `TranscriptPlayer`:** VideoPlayer is the generalization — it does everything TranscriptPlayer does plus the timeline band, and its props are structurally compatible with TranscriptPlayer's (`TranscriptSegment[]`, `TranscriptChapter[]`, `TranscriptBookmark[]`, `TranscriptSpeakerTalkTime[]` all pass straight through). `TranscriptPlayer` stays exported and unchanged for the existing meeting-recordings viewer; use `VideoPlayer` for anything new.
@@ -212,6 +216,25 @@ import { loadGoogleMapsAPI, isGoogleMapsLoaded } from 'jatui'
 await loadGoogleMapsAPI({ apiKey, libraries: ['marker', 'geometry'] })
 ```
 
+## Global confirm dialog
+
+```typescript
+import { showConfirm } from "jatui"
+// String body (backwards-compatible):
+if (await showConfirm({ title: "Delete?", body: "This cannot be undone." })) { ... }
+
+// Snippet body — for rich content (conditional warnings, formatted amounts):
+{#snippet warnBody()}
+  <p>You're deleting <strong>{count}</strong> items totalling <strong>{fmt(amount)}</strong>.</p>
+  {#if hasPendingWork}<p class="text-warning mt-2">3 items still processing.</p>{/if}
+{/snippet}
+if (await showConfirm({ title: "Delete?", body: warnBody, danger: true })) { ... }
+```
+
+## Typography utility
+
+`text-2xs` — 11px / 16px line-height / +0.01em tracking. Ships in `styles/rail.css` (already imported by JST). Standardizes the ~13 sites of `text-[10px]` / `text-[0.7rem]` micro-captions across JST routes (timestamps, hint text, footnotes). Sits between Tailwind's `text-xs` (12px) and browser-min legibility.
+
 ## Utilities
 
 ```typescript

package/dist/components/BulkActionBar.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	/**
+	 * BulkActionBar — floating action bar for listNav selections.
+	 *
+	 * Simpler API than `FloatingActionBar`: takes a `Set` or `Array` of
+	 * selected ids and a flat `actions[]`. Renders nothing when the
+	 * selection is empty; auto-fades in when there is at least one item.
+	 * Under the hood a thin wrapper over `FloatingActionBar` — reach for
+	 * `FloatingActionBar` directly when you need dropdown groups.
+	 *
+	 * Usage:
+	 *
+	 *     const nav = listNav({ selectable: true });
+	 *
+	 *     <ul use:nav>...</ul>
+	 *
+	 *     <BulkActionBar
+	 *       selection={nav.selection}
+	 *       actions={[
+	 *         { label: 'Assign',  onSelect: () => assignBulk(nav.selection) },
+	 *         { label: 'Delete',  onSelect: () => deleteBulk(nav.selection), destructive: true },
+	 *       ]}
+	 *       onClear={() => nav.clearSelection()}
+	 *     />
+	 */
+
+	import FloatingActionBar from './FloatingActionBar.svelte';
+	import type { ActionButton } from './FloatingActionBar.svelte';
+
+	export interface BulkAction {
+		label: string;
+		/** Optional SVG path string for a 24×24 icon. */
+		icon?: string;
+		/** Called when the action is clicked. */
+		onSelect: () => void;
+		/** Renders in the danger variant. Default false. */
+		destructive?: boolean;
+		/** Semantic variant override — takes precedence over `destructive`. */
+		variant?: ActionButton['variant'];
+		/** Unique key (defaults to label). */
+		id?: string;
+	}
+
+	interface Props {
+		/** Current selection — Set, Array, or a plain number. Bar hides when empty/zero. */
+		selection: Set<unknown> | unknown[] | number;
+		/** Actions to render. */
+		actions: BulkAction[];
+		/** Called when the user clicks the built-in Clear button. */
+		onClear?: () => void;
+		/** Loading state — disables all actions and shows a spinner. */
+		loading?: boolean;
+		/** Label for the count. Default "selected". */
+		countLabel?: string;
+	}
+
+	let { selection, actions, onClear, loading = false, countLabel = 'selected' }: Props = $props();
+
+	const count = $derived(
+		typeof selection === 'number'
+			? selection
+			: Array.isArray(selection)
+				? selection.length
+				: selection.size,
+	);
+
+	const mapped = $derived<ActionButton[]>(
+		actions.map((a) => ({
+			id: a.id ?? a.label,
+			label: a.label,
+			icon: a.icon,
+			variant: a.variant ?? (a.destructive ? 'danger' : 'default'),
+			onclick: a.onSelect,
+		})),
+	);
+</script>
+
+<FloatingActionBar {count} actions={mapped} {loading} {onClear} {countLabel} />

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

@@ -0,0 +1,29 @@
+import type { ActionButton } from './FloatingActionBar.svelte';
+export interface BulkAction {
+    label: string;
+    /** Optional SVG path string for a 24×24 icon. */
+    icon?: string;
+    /** Called when the action is clicked. */
+    onSelect: () => void;
+    /** Renders in the danger variant. Default false. */
+    destructive?: boolean;
+    /** Semantic variant override — takes precedence over `destructive`. */
+    variant?: ActionButton['variant'];
+    /** Unique key (defaults to label). */
+    id?: string;
+}
+interface Props {
+    /** Current selection — Set, Array, or a plain number. Bar hides when empty/zero. */
+    selection: Set<unknown> | unknown[] | number;
+    /** Actions to render. */
+    actions: BulkAction[];
+    /** Called when the user clicks the built-in Clear button. */
+    onClear?: () => void;
+    /** Loading state — disables all actions and shows a spinner. */
+    loading?: boolean;
+    /** Label for the count. Default "selected". */
+    countLabel?: string;
+}
+declare const BulkActionBar: import("svelte").Component<Props, {}, "">;
+type BulkActionBar = ReturnType<typeof BulkActionBar>;
+export default BulkActionBar;

package/dist/components/ConfirmDialog.svelte

@@ -104,7 +104,11 @@
 				<div class="cd-title-group">
 					<h3 class="cd-title">{opts.title}</h3>
 					{#if opts.body}
-						<p class="cd-body">{opts.body}</p>
+						{#if typeof opts.body === 'string'}
+							<p class="cd-body">{opts.body}</p>
+						{:else}
+							<div class="cd-body">{@render opts.body()}</div>
+						{/if}
 					{/if}
 				</div>
 			</div>

package/dist/components/ContextMenu.svelte

@@ -36,11 +36,32 @@
 
 	import { floating, makeVirtualAnchor } from '../actions/floating.js';
 
+	/**
+	 * `submit` — post to a SvelteKit form action when the item is clicked.
+	 * Renders a hidden `<form method="POST">` with the action + body, then
+	 * `requestSubmit()`s it. Use this when the row action should ride the
+	 * standard `use:enhance` pipeline (toasts, invalidation, redirects) with
+	 * no extra plumbing per row.
+	 */
+	export type SubmitConfig = {
+		/** SvelteKit action, e.g. "?/delete". Default: current URL. */
+		action?: string;
+		/** HTTP method. Default 'POST'. */
+		method?: 'POST' | 'GET';
+		/** Form fields to send as hidden inputs. */
+		body?: Record<string, string | number | boolean>;
+		/** Enctype. Default 'application/x-www-form-urlencoded'. */
+		enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data';
+	};
+
 	type ActionItem = {
 		label: string;
 		/** Optional leading icon — a single emoji/glyph, rendered before the label. */
 		icon?: string;
-		onSelect: () => void;
+		/** Called when the item is clicked. Optional when `submit` is provided. */
+		onSelect?: () => void;
+		/** If set, clicking the item submits a form built from this config. */
+		submit?: SubmitConfig;
 		variant?: 'default' | 'danger';
 		disabled?: boolean;
 	};
@@ -85,10 +106,36 @@
 
 	function handleSelect(item: ActionItem) {
 		if (item.disabled) return;
-		item.onSelect();
+		if (item.submit) {
+			submitAction(item.submit);
+		}
+		item.onSelect?.();
 		close();
 	}
 
+	function submitAction(cfg: SubmitConfig) {
+		if (typeof document === 'undefined') return;
+		const form = document.createElement('form');
+		form.method = cfg.method ?? 'POST';
+		if (cfg.action) form.action = cfg.action;
+		form.enctype = cfg.enctype ?? 'application/x-www-form-urlencoded';
+		form.style.display = 'none';
+		if (cfg.body) {
+			for (const [k, v] of Object.entries(cfg.body)) {
+				const input = document.createElement('input');
+				input.type = 'hidden';
+				input.name = k;
+				input.value = String(v);
+				form.appendChild(input);
+			}
+		}
+		document.body.appendChild(form);
+		form.requestSubmit();
+		// Leave form in DOM briefly so use:enhance handlers can attach; a
+		// microtask cleanup is enough because submission is synchronous.
+		queueMicrotask(() => form.remove());
+	}
+
 	// Virtual anchor tracks the cursor position; rebuilt whenever x or y change.
 	let anchor = $derived(makeVirtualAnchor(x, y));
 

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

@@ -1,8 +1,28 @@
+/**
+ * `submit` — post to a SvelteKit form action when the item is clicked.
+ * Renders a hidden `<form method="POST">` with the action + body, then
+ * `requestSubmit()`s it. Use this when the row action should ride the
+ * standard `use:enhance` pipeline (toasts, invalidation, redirects) with
+ * no extra plumbing per row.
+ */
+export type SubmitConfig = {
+    /** SvelteKit action, e.g. "?/delete". Default: current URL. */
+    action?: string;
+    /** HTTP method. Default 'POST'. */
+    method?: 'POST' | 'GET';
+    /** Form fields to send as hidden inputs. */
+    body?: Record<string, string | number | boolean>;
+    /** Enctype. Default 'application/x-www-form-urlencoded'. */
+    enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data';
+};
 type ActionItem = {
     label: string;
     /** Optional leading icon — a single emoji/glyph, rendered before the label. */
     icon?: string;
-    onSelect: () => void;
+    /** Called when the item is clicked. Optional when `submit` is provided. */
+    onSelect?: () => void;
+    /** If set, clicking the item submits a form built from this config. */
+    submit?: SubmitConfig;
     variant?: 'default' | 'danger';
     disabled?: boolean;
 };

package/dist/components/DirtyFormHost.svelte

@@ -0,0 +1,110 @@
+<script lang="ts" generics="T">
+	/**
+	 * 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 { createDirtyGuard, type BeforeNavigateFn } from '../utils/dirtyGuard';
+	import type { Snippet } from 'svelte';
+
+	interface 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 }]>;
+	}
+
+	let {
+		baseline,
+		current,
+		onCancel,
+		beforeNavigate,
+		discardPrompt,
+		equals,
+		hideChrome = false,
+		children,
+	}: Props = $props();
+
+	const guard = createDirtyGuard<T>({
+		baseline: () => baseline,
+		current: () => current,
+		onCancel,
+		equals,
+		beforeNavigate,
+		discardPrompt,
+	});
+</script>
+
+{@render children({ get dirty() { return guard.dirty; }, cancel: guard.cancel })}
+
+{#if !hideChrome && guard.dirty}
+	<div class="jatui-dirty-chrome" role="status" aria-live="polite">
+		<span class="jatui-dirty-pill">Unsaved changes</span>
+		<button type="button" class="jatui-dirty-cancel" onclick={guard.cancel}>
+			Cancel
+		</button>
+	</div>
+{/if}
+
+<style>
+	.jatui-dirty-chrome {
+		position: fixed;
+		bottom: 1rem;
+		right: 1rem;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+		background: color-mix(in oklch, var(--color-base-100) 96%, transparent);
+		border: 1px solid var(--color-warning);
+		border-radius: 999px;
+		box-shadow: 0 8px 24px oklch(0 0 0 / 0.28);
+		z-index: 60;
+		font-size: 0.8125rem;
+	}
+	.jatui-dirty-pill {
+		color: var(--color-warning);
+		font-weight: 600;
+	}
+	.jatui-dirty-cancel {
+		padding: 0.1875rem 0.5625rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		background: transparent;
+		border: 1px solid var(--color-base-300);
+		border-radius: 999px;
+		color: var(--color-base-content);
+		cursor: pointer;
+		transition: background 0.15s;
+	}
+	.jatui-dirty-cancel:hover {
+		background: var(--color-base-200);
+	}
+</style>

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/KeyboardShortcutsOverlay.svelte

@@ -263,6 +263,12 @@
 		padding: 0.4rem 0.25rem;
 	}
 
+	/* Unstyled otherwise, this inherits the host page's text color instead of
+	   one legible against the panel's own hardcoded dark background. */
+	.kso-description {
+		color: oklch(0.85 0.02 250);
+	}
+
 	.kso-section-title {
 		font-size: 0.7rem;
 		text-transform: uppercase;

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/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, SubmitConfig as ContextMenuSubmitConfig } from './components/ContextMenu.svelte';
 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;

package/dist/utils/dirtyGuard.js

@@ -0,0 +1,61 @@
+/* dirtyGuard.svelte.js generated by Svelte v5.53.11 */
+import * as $ from 'svelte/internal/client';
+import { untrack } from 'svelte';
+
+function defaultEquals(a, b) {
+	try {
+		return JSON.stringify(a) === JSON.stringify(b);
+	} catch {
+		return a === b;
+	}
+}
+
+export function createDirtyGuard(opts) {
+	const eq = opts.equals ?? defaultEquals;
+	const dirty = $.derived(() => !eq(opts.baseline(), opts.current()));
+
+	// beforeunload — arm only while dirty (browser-native prompt).
+	$.user_effect(() => {
+		if (!$.get(dirty)) return;
+		if (typeof window === 'undefined') return;
+
+		function handler(e) {
+			e.preventDefault();
+			e.returnValue = '';
+		}
+
+		window.addEventListener('beforeunload', handler);
+
+		return () => window.removeEventListener('beforeunload', handler);
+	});
+
+	// SvelteKit internal navigation — client-side back/next/link nav does not
+	// fire beforeunload. Only wire when the caller passed beforeNavigate in.
+	if (opts.beforeNavigate) {
+		opts.beforeNavigate((nav) => {
+			if (!untrack(() => $.get(dirty))) return;
+
+			// 'leave' is browser tab-close / reload — already handled above.
+			if (nav.type === 'leave') return;
+
+			if (typeof window === 'undefined') return;
+
+			const prompt = opts.discardPrompt ?? 'Discard unsaved changes?';
+
+			if (!window.confirm(prompt)) {
+				nav.cancel();
+			}
+		});
+	}
+
+	function cancel() {
+		opts.onCancel?.();
+	}
+
+	return {
+		get dirty() {
+			return $.get(dirty);
+		},
+		cancel
+	};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.32",
+  "version": "0.3.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",