@joewinke/jatui 0.22.0 → 0.23.0

package/dist/components/table/columnResize.d.ts

@@ -0,0 +1,38 @@
+export interface ColumnResizeOptions {
+    /** When true, the resize handle is not added and nothing happens. Default: false */
+    disabled?: boolean;
+    /** Minimum column width in pixels. Default: 40 */
+    minWidth?: number;
+    /** Called on mousedown — use this to show the guide line (e.g. set resizeGuideX state) */
+    onResizeStart?: (initialX: number) => void;
+    /** Called on every mousemove with the new width */
+    onResize: (width: number) => void;
+    /** Called on mouseup with the final width — use this to save settings and hide the guide */
+    onResizeEnd?: (width: number) => void;
+    /**
+     * Return the container element that holds the `.resize-guide` element.
+     * If provided, the guide line position is updated on each mousemove via direct DOM manipulation,
+     * avoiding reactive overhead.
+     */
+    getGuideContainer?: () => HTMLElement | null;
+}
+/**
+ * Svelte action that attaches a column-resize handle to a `<th>` (or any element).
+ *
+ * Usage:
+ * ```svelte
+ * <th use:columnResize={{
+ *   minWidth: col.minWidth,
+ *   onResize: (w) => { columnWidths[col.id] = w; },
+ *   onResizeEnd: (w) => { saveColumnSettings(); },
+ *   getGuideContainer: () => tableContainerEl,
+ * }}>
+ * ```
+ *
+ * The action appends a 4px-wide resize handle div at the right edge of the host element.
+ * Dragging it fires `onResize` continuously and `onResizeEnd` on mouse-up.
+ */
+export declare function columnResize(node: HTMLElement, options: ColumnResizeOptions): {
+    update(opts: ColumnResizeOptions): void;
+    destroy(): void;
+};

package/dist/components/table/columnResize.js

@@ -0,0 +1,117 @@
+/**
+ * Svelte action that attaches a column-resize handle to a `<th>` (or any element).
+ *
+ * Usage:
+ * ```svelte
+ * <th use:columnResize={{
+ *   minWidth: col.minWidth,
+ *   onResize: (w) => { columnWidths[col.id] = w; },
+ *   onResizeEnd: (w) => { saveColumnSettings(); },
+ *   getGuideContainer: () => tableContainerEl,
+ * }}>
+ * ```
+ *
+ * The action appends a 4px-wide resize handle div at the right edge of the host element.
+ * Dragging it fires `onResize` continuously and `onResizeEnd` on mouse-up.
+ */
+export function columnResize(node, options) {
+    let opts = options;
+    // If disabled, return a no-op handle
+    if (opts.disabled) {
+        return {
+            update(newOptions) { opts = newOptions; },
+            destroy() { },
+        };
+    }
+    // Build the resize handle element
+    const handle = document.createElement('div');
+    handle.className = 'col-resize-handle';
+    handle.style.cssText = [
+        'position: absolute',
+        'right: 0',
+        'top: 0',
+        'bottom: 0',
+        'width: 5px',
+        'cursor: col-resize',
+        'z-index: 2',
+    ].join(';');
+    // Make the host element position-relative if it isn't already
+    const hostPosition = getComputedStyle(node).position;
+    if (hostPosition === 'static') {
+        node.style.position = 'relative';
+    }
+    node.appendChild(handle);
+    // Resize tracking state
+    let startX = 0;
+    let startWidth = 0;
+    let currentWidth = 0;
+    let resizing = false;
+    function updateGuide(clientX) {
+        const container = opts.getGuideContainer?.();
+        if (!container)
+            return;
+        const guide = container.querySelector('.resize-guide');
+        if (!guide)
+            return;
+        const rect = container.getBoundingClientRect();
+        guide.style.left = `${clientX - rect.left + container.scrollLeft}px`;
+    }
+    function onMouseMove(e) {
+        const minWidth = opts.minWidth ?? 40;
+        const diff = e.clientX - startX;
+        const newWidth = Math.max(minWidth, startWidth + diff);
+        currentWidth = newWidth;
+        opts.onResize(newWidth);
+        updateGuide(e.clientX);
+    }
+    function onMouseUp() {
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+        // Call onResizeEnd — the parent is responsible for clearing the guide line
+        // (typically by setting resizeGuideX = null in its onResizeEnd handler)
+        opts.onResizeEnd?.(currentWidth);
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+        // Suppress the click event that fires after mouseup on the host <th>,
+        // which would otherwise trigger a column sort.
+        resizing = true;
+        requestAnimationFrame(() => { resizing = false; });
+    }
+    function onMouseDown(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        startX = e.clientX;
+        startWidth = node.offsetWidth;
+        currentWidth = startWidth;
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+        opts.onResizeStart?.(e.clientX);
+        updateGuide(e.clientX);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    }
+    // Suppress click events on the host element that fire right after a resize ends.
+    // Without this, mouseup after dragging the resize handle triggers the host's onclick (e.g. sort).
+    function onHostClick(e) {
+        if (resizing) {
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }
+    }
+    handle.addEventListener('mousedown', onMouseDown);
+    node.addEventListener('click', onHostClick, true);
+    return {
+        update(newOptions) {
+            opts = newOptions;
+        },
+        destroy() {
+            handle.removeEventListener('mousedown', onMouseDown);
+            node.removeEventListener('click', onHostClick, true);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            if (handle.parentNode === node) {
+                node.removeChild(handle);
+            }
+        },
+    };
+}

package/dist/components/table/index.d.ts

@@ -1,3 +1,5 @@
 export { default as DataTable } from './DataTable.svelte';
 export { flexRender } from './flexRender';
+export { columnResize } from './columnResize';
+export type { ColumnResizeOptions } from './columnResize';
 export type { DataTableProps, SelectionEvent, ColumnDef, Row } from './types';

package/dist/components/table/index.js

@@ -1,3 +1,4 @@
 // Subpath entry: @joewinke/jatui/table — requires peer @tanstack/table-core.
 export { default as DataTable } from './DataTable.svelte';
 export { flexRender } from './flexRender';
+export { columnResize } from './columnResize';

package/dist/components/variant/VariantMatrixPicker.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	/**
+	 * VariantMatrixPicker Component
+	 *
+	 * Category/option chip grid for building a combinatorial variant matrix
+	 * (jatui-m4uz3.8, ported from vid-gen's FrameVariantGenerator selection UI,
+	 * lines 72–197 / 500–620, with the hardcoded presets stripped).
+	 *
+	 * Every category renders as a tab with its options as toggleable chips.
+	 * Each category carries an `additive`/`multiplicative` badge:
+	 *  - multiplicative: each selection multiplies the total combination count
+	 *    (cartesian product across multiplicative categories);
+	 *  - additive: selections stack flat onto every combination.
+	 * A live combination count renders in the footer via `countCombinations`.
+	 *
+	 * The algebra lives in `./variantCombinations.ts` (pure, unit-tested);
+	 * the host passes `categories` and reads/binds `selected`.
+	 */
+	import {
+		countCombinations,
+		variantCategoryMode,
+		type VariantCategory,
+		type VariantSelection,
+		type VariantSelectionMode
+	} from './variantCombinations';
+
+	interface Props {
+		/** Category/option matrix — caller-supplied, no presets inside the component. */
+		categories: VariantCategory[];
+		/** categoryId → selected option ids. Bind to drive the matrix externally. */
+		selected: VariantSelection;
+		/** Force every category to one mode (`null` respects each category's own). */
+		forceMode?: VariantSelectionMode | null;
+		/** Show the live combination count footer (default true). */
+		showCount?: boolean;
+		/** Optional label for the count footer (default "combinations"). */
+		countLabel?: string;
+		/** Fired after every selection change with the new selection. */
+		onChange?: (selected: VariantSelection) => void;
+		/** Additional CSS class for the container. */
+		class?: string;
+	}
+
+	let {
+		categories,
+		selected = $bindable({}),
+		forceMode = null,
+		showCount = true,
+		countLabel = 'combinations',
+		onChange,
+		class: className = ''
+	}: Props = $props();
+
+	let activeTab = $state('');
+
+	// Follow the category list if it changes identity.
+	$effect(() => {
+		if (!categories.some((c) => c.id === activeTab)) {
+			activeTab = categories[0]?.id ?? '';
+		}
+	});
+
+	const combinationCount = $derived(countCombinations(categories, selected, forceMode));
+	const selectedCount = (categoryId: string) => selected[categoryId]?.length ?? 0;
+	const activeCategory = $derived(categories.find((c) => c.id === activeTab));
+
+	function toggleOption(categoryId: string, optionId: string) {
+		const current = selected[categoryId] ?? [];
+		const next = current.includes(optionId)
+			? current.filter((id) => id !== optionId)
+			: [...current, optionId];
+		selected = { ...selected, [categoryId]: next };
+		onChange?.(selected);
+	}
+
+	function selectAll(categoryId: string) {
+		const category = categories.find((c) => c.id === categoryId);
+		if (!category) return;
+		selected = { ...selected, [categoryId]: category.options.map((o) => o.id) };
+		onChange?.(selected);
+	}
+
+	function clearCategory(categoryId: string) {
+		selected = { ...selected, [categoryId]: [] };
+		onChange?.(selected);
+	}
+
+	function clearAll() {
+		const next: VariantSelection = {};
+		for (const c of categories) next[c.id] = [];
+		selected = next;
+		onChange?.(next);
+	}
+</script>
+
+<div class="{className}">
+	<!-- Category tabs: icon, label, live selection count -->
+	<div role="tablist" aria-label="Variant categories" class="flex flex-wrap gap-1 mb-3">
+		{#each categories as category (category.id)}
+			{@const count = selectedCount(category.id)}
+			<button
+				role="tab"
+				aria-selected={activeTab === category.id}
+				class="btn btn-sm gap-2 {activeTab === category.id ? 'btn-primary' : 'btn-ghost'}"
+				onclick={() => (activeTab = category.id)}
+			>
+				{#if category.icon}<span class="text-base">{category.icon}</span>{/if}
+				<span>{category.label}</span>
+				{#if count > 0}<span class="badge badge-sm">{count}</span>{/if}
+			</button>
+		{/each}
+	</div>
+
+	{#if activeCategory}
+		{@const count = selectedCount(activeCategory.id)}
+		{@const isAdditive = variantCategoryMode(activeCategory, forceMode) === 'additive'}
+		<div class="card bg-base-200 shadow-sm">
+			<div class="card-body p-4">
+				<!-- Category header: mode badge + bulk actions -->
+				<div class="flex items-center justify-between gap-2 mb-3">
+					<div class="flex items-center gap-2">
+						{#if activeCategory.icon}<span class="text-xl">{activeCategory.icon}</span>{/if}
+						<h3 class="font-bold">{activeCategory.label}</h3>
+						<span
+							class="badge badge-sm {isAdditive ? 'badge-success' : 'badge-info'}"
+							title={isAdditive
+								? 'Additive — selections stack onto every combination'
+								: 'Multiplicative — each selection multiplies the combination count'}
+						>
+							{isAdditive ? '➕ Additive' : '✖️ Multiplicative'}
+						</span>
+						{#if count > 0}<span class="badge badge-sm badge-primary">{count}</span>{/if}
+					</div>
+					<div class="flex items-center gap-1">
+						<button
+							class="btn btn-xs"
+							onclick={() => selectAll(activeCategory.id)}
+							disabled={activeCategory.options.length === 0}
+						>
+							Select all
+						</button>
+						{#if count > 0}
+							<button class="btn btn-xs btn-ghost" onclick={() => clearCategory(activeCategory.id)}>
+								Clear
+							</button>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Option chip grid -->
+				<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+					{#each activeCategory.options as option (option.id)}
+						{@const isSelected = selected[activeCategory.id]?.includes(option.id)}
+						<button
+							class="btn btn-sm normal-case justify-start gap-1 {isSelected
+								? 'btn-info'
+								: 'btn-outline'}"
+							aria-pressed={isSelected}
+							onclick={() => toggleOption(activeCategory.id, option.id)}
+						>
+							{isSelected ? '✓' : '➕'}
+							<span class="truncate">{option.label}</span>
+						</button>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	<!-- Footer: live combination count -->
+	{#if showCount}
+		<div class="flex items-center justify-between mt-3 text-sm">
+			<span class="text-base-content/60">
+				<strong class="text-base-content">{combinationCount}</strong>
+				{countLabel}
+				{#if combinationCount === 0}<span class="text-base-content/40"> — select an option to start</span>{/if}
+			</span>
+			<button class="btn btn-xs btn-ghost" onclick={clearAll}>Clear all</button>
+		</div>
+	{/if}
+</div>

package/dist/components/variant/VariantMatrixPicker.svelte.d.ts

@@ -0,0 +1,37 @@
+/**
+     * VariantMatrixPicker Component
+     *
+     * Category/option chip grid for building a combinatorial variant matrix
+     * (jatui-m4uz3.8, ported from vid-gen's FrameVariantGenerator selection UI,
+     * lines 72–197 / 500–620, with the hardcoded presets stripped).
+     *
+     * Every category renders as a tab with its options as toggleable chips.
+     * Each category carries an `additive`/`multiplicative` badge:
+     *  - multiplicative: each selection multiplies the total combination count
+     *    (cartesian product across multiplicative categories);
+     *  - additive: selections stack flat onto every combination.
+     * A live combination count renders in the footer via `countCombinations`.
+     *
+     * The algebra lives in `./variantCombinations.ts` (pure, unit-tested);
+     * the host passes `categories` and reads/binds `selected`.
+     */
+import { type VariantCategory, type VariantSelection, type VariantSelectionMode } from './variantCombinations';
+interface Props {
+    /** Category/option matrix — caller-supplied, no presets inside the component. */
+    categories: VariantCategory[];
+    /** categoryId → selected option ids. Bind to drive the matrix externally. */
+    selected: VariantSelection;
+    /** Force every category to one mode (`null` respects each category's own). */
+    forceMode?: VariantSelectionMode | null;
+    /** Show the live combination count footer (default true). */
+    showCount?: boolean;
+    /** Optional label for the count footer (default "combinations"). */
+    countLabel?: string;
+    /** Fired after every selection change with the new selection. */
+    onChange?: (selected: VariantSelection) => void;
+    /** Additional CSS class for the container. */
+    class?: string;
+}
+declare const VariantMatrixPicker: import("svelte").Component<Props, {}, "selected">;
+type VariantMatrixPicker = ReturnType<typeof VariantMatrixPicker>;
+export default VariantMatrixPicker;

package/dist/components/variant/variantCombinations.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Pure combination algebra behind `VariantMatrixPicker` (jatui-m4uz3.8).
+ *
+ * Ported from vid-gen's `variantPresets.js` (generateCombinations + friends),
+ * with the hardcoded apparel/background/lighting preset map stripped out:
+ * every category and option is caller-supplied, so the algebra works for any
+ * combinatorial domain (image variants, A/B matrices, test permutations…).
+ *
+ * Two category modes drive the math:
+ *  - `multiplicative`: each selected option pairs with every selection in the
+ *    other multiplicative categories → cartesian product, one new variant
+ *    per pick.
+ *  - `additive`: all selected options stack flat into every combination —
+ *    they ride along instead of multiplying.
+ *
+ * No DOM, no runes — kept separate so the math is unit-testable under plain
+ * node:test (mirrors the `batch/` module split from jatui-m4uz3.7).
+ */
+export type VariantSelectionMode = 'multiplicative' | 'additive';
+export interface VariantOption {
+    id: string;
+    label: string;
+    /** Optional host payload — vid-gen used image-edit prompts; joined with ', ' into `VariantCombination.prompt`. */
+    prompt?: string;
+}
+export interface VariantCategory {
+    id: string;
+    label: string;
+    /** Emoji or short glyph shown on the category tab. */
+    icon?: string;
+    /** Defaults to `multiplicative`. */
+    mode?: VariantSelectionMode;
+    options: VariantOption[];
+}
+/** categoryId → selected option ids (mirror of vid-gen's selectedModifiers). */
+export type VariantSelection = Record<string, string[]>;
+export interface VariantCombination {
+    /** Flat list of every option id in the combination (multiplicative picks + stacked additive picks). */
+    modifierIds: string[];
+    /** All `prompt`s joined with ', ' — empty string when no option carries a prompt. */
+    prompt: string;
+    /** Resolved option objects, in category order. */
+    options: VariantOption[];
+}
+export interface GenerateCombinationsOptions {
+    /** Override every category's mode. `null` (default) respects each category's own mode. */
+    forceMode?: VariantSelectionMode | null;
+}
+/** Resolve a category's effective mode: forceMode wins, then the category's own, then multiplicative. */
+export declare function variantCategoryMode(category: VariantCategory, forceMode?: VariantSelectionMode | null): VariantSelectionMode;
+/** Look up an option by category + id across a caller-supplied category list. */
+export declare function findVariantOption(categories: VariantCategory[], categoryId: string, optionId: string): VariantOption | undefined;
+/**
+ * Number of combinations `generateCombinations` would produce — the live count
+ * the picker footer renders. Multiplicative categories multiply; a selection
+ * with only additive categories counts as exactly 1 stacked combination.
+ */
+export declare function countCombinations(categories: VariantCategory[], selected: VariantSelection, forceMode?: VariantSelectionMode | null): number;
+/**
+ * Generate all combinations from the current selection.
+ *
+ * Mirrors vid-gen's `generateCombinations(selectedModifiers, options)`:
+ *  - categories with nothing selected are skipped entirely (all-empty → []);
+ *  - multiplicative categories contribute one option per combination via
+ *    cartesian product; additive selections stack flat onto every combination;
+ *  - with no multiplicative selections at all, a single additive-only
+ *    combination is produced.
+ */
+export declare function generateCombinations(categories: VariantCategory[], selected: VariantSelection, options?: GenerateCombinationsOptions): VariantCombination[];
+/**
+ * Build a variant filename from an original filename and modifier ids
+ * (vid-gen's `generateVariantFilename`, generic — no preset knowledge):
+ * `photo.png` + ['a', 'b'] → `photo_a_b.png`, ids sorted for consistency.
+ */
+export declare function generateVariantFilename(originalFilename: string, modifierIds: string[]): string;

package/dist/components/variant/variantCombinations.js

@@ -0,0 +1,100 @@
+/**
+ * Pure combination algebra behind `VariantMatrixPicker` (jatui-m4uz3.8).
+ *
+ * Ported from vid-gen's `variantPresets.js` (generateCombinations + friends),
+ * with the hardcoded apparel/background/lighting preset map stripped out:
+ * every category and option is caller-supplied, so the algebra works for any
+ * combinatorial domain (image variants, A/B matrices, test permutations…).
+ *
+ * Two category modes drive the math:
+ *  - `multiplicative`: each selected option pairs with every selection in the
+ *    other multiplicative categories → cartesian product, one new variant
+ *    per pick.
+ *  - `additive`: all selected options stack flat into every combination —
+ *    they ride along instead of multiplying.
+ *
+ * No DOM, no runes — kept separate so the math is unit-testable under plain
+ * node:test (mirrors the `batch/` module split from jatui-m4uz3.7).
+ */
+/** Resolve a category's effective mode: forceMode wins, then the category's own, then multiplicative. */
+export function variantCategoryMode(category, forceMode = null) {
+    return forceMode ?? category.mode ?? 'multiplicative';
+}
+/** Look up an option by category + id across a caller-supplied category list. */
+export function findVariantOption(categories, categoryId, optionId) {
+    return categories.find((c) => c.id === categoryId)?.options.find((o) => o.id === optionId);
+}
+/**
+ * Number of combinations `generateCombinations` would produce — the live count
+ * the picker footer renders. Multiplicative categories multiply; a selection
+ * with only additive categories counts as exactly 1 stacked combination.
+ */
+export function countCombinations(categories, selected, forceMode = null) {
+    const active = categories.filter((c) => (selected[c.id]?.length ?? 0) > 0);
+    if (active.length === 0)
+        return 0;
+    let count = 1;
+    let multiplicativeSeen = false;
+    for (const category of active) {
+        const n = selected[category.id].length;
+        if (variantCategoryMode(category, forceMode) === 'multiplicative') {
+            multiplicativeSeen = true;
+            count *= n;
+        }
+    }
+    // Only-additive selections produce a single stacked combination, not zero.
+    return multiplicativeSeen ? count : 1;
+}
+/** Cartesian product of arrays (vid-gen's helper, verbatim semantics). */
+function cartesian(...arrays) {
+    return arrays.reduce((acc, array) => acc.flatMap((x) => array.map((y) => [...x, y])), [[]]);
+}
+/**
+ * Generate all combinations from the current selection.
+ *
+ * Mirrors vid-gen's `generateCombinations(selectedModifiers, options)`:
+ *  - categories with nothing selected are skipped entirely (all-empty → []);
+ *  - multiplicative categories contribute one option per combination via
+ *    cartesian product; additive selections stack flat onto every combination;
+ *  - with no multiplicative selections at all, a single additive-only
+ *    combination is produced.
+ */
+export function generateCombinations(categories, selected, options = {}) {
+    const { forceMode = null } = options;
+    const active = categories.filter((c) => (selected[c.id]?.length ?? 0) > 0);
+    if (active.length === 0)
+        return [];
+    const multiplicativeArrays = active
+        .filter((c) => variantCategoryMode(c, forceMode) === 'multiplicative')
+        .map((c) => selected[c.id].map((optionId) => ({ categoryId: c.id, optionId })));
+    const additivePicks = active
+        .filter((c) => variantCategoryMode(c, forceMode) === 'additive')
+        .flatMap((c) => selected[c.id].map((optionId) => ({ categoryId: c.id, optionId })));
+    const multiplicativeCombos = cartesian(...multiplicativeArrays);
+    const combos = multiplicativeArrays.length
+        ? multiplicativeCombos.map((combo) => [...combo, ...additivePicks])
+        : [additivePicks];
+    return combos.map((combo) => {
+        const resolved = combo
+            .map(({ categoryId, optionId }) => findVariantOption(categories, categoryId, optionId))
+            .filter((o) => o !== undefined);
+        return {
+            modifierIds: combo.map(({ optionId }) => optionId),
+            prompt: resolved
+                .map((o) => o.prompt)
+                .filter((p) => p !== undefined)
+                .join(', '),
+            options: resolved
+        };
+    });
+}
+/**
+ * Build a variant filename from an original filename and modifier ids
+ * (vid-gen's `generateVariantFilename`, generic — no preset knowledge):
+ * `photo.png` + ['a', 'b'] → `photo_a_b.png`, ids sorted for consistency.
+ */
+export function generateVariantFilename(originalFilename, modifierIds) {
+    const stem = originalFilename.replace(/\.[^/.]+$/, '');
+    const suffix = [...modifierIds].sort().join('_');
+    return suffix ? `${stem}_${suffix}.png` : `${stem}.png`;
+}

package/dist/index.d.ts

@@ -56,6 +56,10 @@ 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 InfiniteGrid } from './components/InfiniteGrid.svelte';
+export { default as InfiniteSearchGrid } from './components/InfiniteSearchGrid.svelte';
+export { createInfiniteLoader } from './components/infiniteGridLoader';
+export type { InfinitePage, InfiniteLoadContext, InfiniteLoadFn, InfiniteLoader, InfiniteLoaderState, InfiniteStatus } from './components/infiniteGridLoader';
 export { default as Button } from './components/Button.svelte';
 export { default as Badge } from './components/Badge.svelte';
 export { default as Card } from './components/Card.svelte';
@@ -78,6 +82,8 @@ export { default as LazyImage } from './components/LazyImage.svelte';
 export { default as ResizablePanel } from './components/ResizablePanel.svelte';
 export { default as VoicePlayer } from './components/VoicePlayer.svelte';
 export { default as SpeechForm } from './components/SpeechForm.svelte';
+export { default as AudioRecorder } from './components/AudioRecorder.svelte';
+export type { AudioRecordingResult } from './components/AudioRecorder.svelte';
 export { default as ThemeSelector } from './components/ThemeSelector.svelte';
 export { default as Sparkline } from './components/Sparkline.svelte';
 export { default as BurndownChart } from './components/BurndownChart.svelte';
@@ -93,6 +99,8 @@ export type { FileDropzoneFile } from './components/FileDropzone.svelte';
 export { default as VariablePicker } from './components/VariablePicker.svelte';
 export type { TemplateVar, TemplateVarGroup } from './types/templateVars';
 export { default as EmojiPicker } from './components/EmojiPicker.svelte';
+export { default as IconSelector } from './components/IconSelector.svelte';
+export type { IconSelectorOption, IconComponentProps } from './components/IconSelector.svelte';
 export { EMOJI_DATA, ALL_EMOJIS, searchEmojis } from './data/emojis';
 export type { EmojiEntry, EmojiGroup } from './data/emojis';
 export { default as LinkShortener } from './components/LinkShortener.svelte';
@@ -166,6 +174,8 @@ export type { MarkupTool, Point, MarkupShape, ArrowShape, RectangleShape, Ellips
 export type { Annotation, AnnotationProfile, AnnotationThread, AnnotationCallbacks, } from './types/annotation';
 export { default as KeyboardShortcutsOverlay } from './components/KeyboardShortcutsOverlay.svelte';
 export type { KeyboardShortcut, SectionEntry as KeyboardShortcutSectionEntry, ShortcutSection as KeyboardShortcutSection, } from './components/KeyboardShortcutsOverlay.svelte';
+export { createShortcutRegistry, getShortcutRegistry, formatShortcut, parseCombo as parseShortcutCombo, isTypingTarget, detectPlatform as detectShortcutPlatform, SIDEBAR_TOGGLE_KEY, } from './utils/keyboardShortcutRegistry';
+export type { ShortcutRegistry, ShortcutDefinition, ShortcutModifier, ShortcutPlatform, PushContextOptions as ShortcutContextOptions, RegistrySection as ShortcutRegistrySection, ToSectionsOptions as ShortcutSectionsOptions, ShortcutRegistryOptions, ShortcutEventTarget, } from './utils/keyboardShortcutRegistry';
 export { default as MapView } from './components/MapView.svelte';
 export { default as LocationMap } from './components/LocationMap.svelte';
 export { default as GPSTracker } from './components/GPSTracker.svelte';
@@ -177,6 +187,10 @@ export { staggerEntrance } from './actions/staggerEntrance';
 export type { StaggerEntranceOptions } from './actions/staggerEntrance';
 export { attention } from './actions/attention';
 export type { AttentionEffect, AttentionOptions } from './actions/attention';
+export { reveal, REVEAL_HIDDEN_CLASS, REVEAL_BASE_CLASS } from './actions/reveal';
+export type { RevealOptions, RevealVariant } from './actions/reveal';
+export { default as ThumbnailGrid } from './components/ThumbnailGrid.svelte';
+export type { ThumbnailItem } from './components/ThumbnailGrid.svelte';
 export { floating, makeVirtualAnchor } from './actions/floating';
 export type { FloatingOptions, Placement } from './actions/floating';
 export { glide } from './transitions/glide';
@@ -227,3 +241,17 @@ export { default as Slider } from './components/basic/Slider.svelte';
 export { default as Pagination } from './components/basic/Pagination.svelte';
 export { MAX_UNDO_DEPTH, createHistory, pushState, beginChange, endChange, untracked, undo, redo, clearHistory } from './history';
 export type { History } from './history';
+export { default as BatchJobTable } from './components/batch/BatchJobTable.svelte';
+export type { JobContext, RowControls, BatchControls, BatchPhase } from './components/batch/BatchJobTable.svelte';
+export { default as QuotaMeter } from './components/batch/QuotaMeter.svelte';
+export { toJobRows, nextJobsToStart, isProcessLimitReached, moveJob, summarizeJobs, formatElapsed } from './components/batch/batchQueue';
+export type { JobRow, JobStatus, BatchSummary, DispatchLimits } from './components/batch/batchQueue';
+export { rollingAverage, estimateRemainingMs } from './components/batch/elapsedEstimate';
+export type { EtaInput } from './components/batch/elapsedEstimate';
+export { useElapsedEstimate } from './components/batch/useElapsedEstimate';
+export type { ElapsedEstimate } from './components/batch/useElapsedEstimate';
+export { pollOperation, PollTimeoutError } from './components/batch/pollOperation';
+export type { PollStep, PollContext, PollOptions } from './components/batch/pollOperation';
+export { default as VariantMatrixPicker } from './components/variant/VariantMatrixPicker.svelte';
+export { countCombinations, generateCombinations, generateVariantFilename, findVariantOption, variantCategoryMode } from './components/variant/variantCombinations';
+export type { VariantCategory, VariantOption, VariantSelection, VariantSelectionMode, VariantCombination } from './components/variant/variantCombinations';