From e6d99cdfd206bde867c3fbd00f3fbf9d5a50d4a9 Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Mon, 26 Jan 2026 18:01:23 -0800
Subject: [PATCH] add ScrollBox convenience helper

---
 src/lib/ScrollBox.svelte | 28 ++++++++++++++++++++++++++++
 src/lib/index.ts         |  3 ++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/ScrollBox.svelte

diff --git a/src/lib/ScrollBox.svelte b/src/lib/ScrollBox.svelte
new file mode 100644
index 0000000..719bf37
--- /dev/null
+++ b/src/lib/ScrollBox.svelte
@@ -0,0 +1,28 @@
+<!-- @component
+ScrollBox provides a small convenience wrapper for creating a scrollable container.
+This component expects to be used as a direct child of a flex container that typically
+has a constrained height. It applies the necessary CSS styles to ensure that its content
+can scroll properly and that the container expands to the maximum available space within
+the parent flexbox. Typically, a parent might have these Tailwind classes applied:
+`flex h-full`
+
+More complex layouts that should not expand to fill all available space should use
+a custom container with `overflow-auto` and an intentionally constrained height.
+-->
+
+<script lang="ts">
+	import type { ClassValue } from 'svelte/elements';
+
+	interface Props {
+		/** Applies ui-layout-px padding to the scrollable content area (default: false) */
+		padded?: boolean;
+		class?: ClassValue;
+		children?: import('svelte').Snippet;
+	}
+
+	let { padded = false, class: classValue, children }: Props = $props();
+</script>
+
+<div class={['min-h-0 min-w-0 flex-1 overflow-auto', padded && 'p-layout', classValue]}>
+	{@render children?.()}
+</div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 66adb29..39c866e 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -6,7 +6,7 @@ export { default as CenterBox } from './CenterBox.svelte';
 export { default as Checkbox, type CheckboxState } from './Checkbox.svelte';
 export { default as Combobox, type ComboboxOption } from './Combobox.svelte';
 export { default as DateInput } from './DateInput.svelte';
-export { default as Dialog, type DialogAPI, type DialogControlOpts } from './Dialog.svelte';
+export { default as Dialog, type DialogAPI, type DialogControls } from './Dialog.svelte';
 export {
 	default as DurationInput,
 	formatDuration,
@@ -23,6 +23,7 @@ export { default as Link, rewriteHref } from './Link.svelte';
 export { default as PhoneInput } from './PhoneInput.svelte';
 export { default as PinInput } from './PinInput.svelte';
 export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as ScrollBox } from './ScrollBox.svelte';
 export { default as Spinner } from './Spinner.svelte';
 export { default as StateMachine, type StateMachinePage } from './StateMachine.svelte';
 export { default as StyledRawInput } from './StyledRawInput.svelte';