@fuzdev/fuz_app 0.1.0

package/dist/ui/AppShell.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import {is_editable, swallow} from '@fuzdev/fuz_util/dom.js';
+
+	import {SidebarState, sidebar_state_context} from './sidebar_state.svelte.js';
+
+	const {
+		children,
+		sidebar,
+		sidebar_width = 180,
+		sidebar_state: sidebar_state_prop,
+		keyboard_shortcut = false,
+		show_toggle = true,
+		toggle_button,
+		...rest
+	}: SvelteHTMLElements['div'] & {
+		children: Snippet;
+		sidebar: Snippet;
+		sidebar_width?: number;
+		sidebar_state?: SidebarState;
+		keyboard_shortcut?: string | false;
+		show_toggle?: boolean;
+		toggle_button?: Snippet<[{title: string; show_sidebar: boolean; toggle: () => void}]>;
+	} = $props();
+
+	const get_sidebar_state = sidebar_state_context.set(
+		() => sidebar_state_prop ?? new SidebarState(),
+	);
+	const sidebar_state = $derived(get_sidebar_state());
+
+	const sidebar_width_px = $derived(sidebar_state.show_sidebar ? sidebar_width : 0);
+
+	const button_title = $derived(
+		(sidebar_state.show_sidebar ? 'hide sidebar' : 'show sidebar') +
+			(keyboard_shortcut ? ` [${keyboard_shortcut}]` : ''),
+	);
+</script>
+
+<svelte:window
+	onkeydowncapture={(e) => {
+		if (keyboard_shortcut && e.key === keyboard_shortcut && !is_editable(e.target)) {
+			sidebar_state.toggle_sidebar();
+			swallow(e);
+		}
+	}}
+/>
+
+<div {...rest} style:--sidebar_width="{sidebar_width_px}px">
+	<div class="content" style:padding-left="var(--sidebar_width)">
+		{@render children()}
+	</div>
+	<div class="sidebar" style:width="var(--sidebar_width)">
+		{@render sidebar()}
+	</div>
+	{#if show_toggle}
+		{#if toggle_button}
+			{@render toggle_button({
+				title: button_title,
+				show_sidebar: sidebar_state.show_sidebar,
+				toggle: () => sidebar_state.toggle_sidebar(),
+			})}
+		{:else}
+			<button
+				type="button"
+				class="position:fixed bottom:0 left:0 icon_button plain border-radius:0 border_top_right_radius_sm"
+				aria-label={button_title}
+				title={button_title}
+				onclick={() => sidebar_state.toggle_sidebar()}
+			>
+				{sidebar_state.show_sidebar ? '\u2190' : '\u2192'}
+			</button>
+		{/if}
+	{/if}
+</div>
+
+<style>
+	.sidebar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		overflow: auto;
+		scrollbar-width: thin;
+		background: var(--sidebar_bg, var(--shade_05));
+	}
+
+	.content {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+</style>

package/dist/ui/AppShell.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { SidebarState } from './sidebar_state.svelte.js';
+type $$ComponentProps = SvelteHTMLElements['div'] & {
+    children: Snippet;
+    sidebar: Snippet;
+    sidebar_width?: number;
+    sidebar_state?: SidebarState;
+    keyboard_shortcut?: string | false;
+    show_toggle?: boolean;
+    toggle_button?: Snippet<[{
+        title: string;
+        show_sidebar: boolean;
+        toggle: () => void;
+    }]>;
+};
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+type AppShell = ReturnType<typeof AppShell>;
+export default AppShell;
+//# sourceMappingURL=AppShell.svelte.d.ts.map

package/dist/ui/AppShell.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/AppShell.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAC,YAAY,EAAwB,MAAM,2BAA2B,CAAC;AAE7E,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAC,CAAC,CAAC,CAAC;CACtF,CAAC;AAiEH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ui/BootstrapForm.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import PendingButton from '@fuzdev/fuz_ui/PendingButton.svelte';
+	import {autofocus} from '@fuzdev/fuz_ui/autofocus.svelte.js';
+
+	import {Username} from '../auth/account_schema.js';
+	import {PASSWORD_LENGTH_MIN} from '../auth/password.js';
+	import {auth_state_context} from './auth_state.svelte.js';
+	import {enter_advance} from './enter_advance.js';
+
+	const auth_state = auth_state_context.get();
+
+	let token = $state('');
+	let username = $state('');
+	let password = $state('');
+	let password_confirm = $state('');
+
+	const username_valid = $derived(Username.safeParse(username).success);
+	const passwords_match = $derived(password === password_confirm);
+	const can_submit = $derived(
+		token.trim() &&
+			username.trim() &&
+			username_valid &&
+			password.length >= PASSWORD_LENGTH_MIN &&
+			passwords_match,
+	);
+
+	const handle_bootstrap = async (): Promise<void> => {
+		if (!can_submit) return;
+		await auth_state.bootstrap(token.trim(), username.trim(), password);
+	};
+</script>
+
+<form
+	class="width_atmost_md"
+	oninput={() => {
+		auth_state.verify_error = null;
+	}}
+	onsubmit={(e) => {
+		e.preventDefault();
+		void handle_bootstrap();
+	}}
+	{@attach enter_advance()}
+>
+	<label class="display:block mb_sm">
+		<span class="text_50 font_size_sm">bootstrap token</span>
+		<input
+			type="password"
+			bind:value={token}
+			placeholder="paste token"
+			disabled={auth_state.verifying}
+			{@attach autofocus()}
+		/>
+	</label>
+	<label class="display:block mb_sm">
+		<span class="text_50 font_size_sm">username</span>
+		<input
+			type="text"
+			bind:value={username}
+			placeholder="admin"
+			autocomplete="username"
+			disabled={auth_state.verifying}
+		/>
+	</label>
+	{#if username && !username_valid}
+		<p class="color_c_50 font_size_sm mt_0 mb_xs">
+			3-39 chars, starts with a letter, ends with letter/number, middle allows dash/underscore
+		</p>
+	{/if}
+	<label class="display:block mb_sm">
+		<span class="text_50 font_size_sm">password (min {PASSWORD_LENGTH_MIN} characters)</span>
+		<input
+			type="password"
+			bind:value={password}
+			placeholder="password"
+			autocomplete="new-password"
+			disabled={auth_state.verifying}
+		/>
+	</label>
+	<label class="display:block mb_sm">
+		<span class="text_50 font_size_sm">confirm password</span>
+		<input
+			type="password"
+			bind:value={password_confirm}
+			placeholder="confirm password"
+			autocomplete="new-password"
+			disabled={auth_state.verifying}
+		/>
+	</label>
+	{#if password && password_confirm && !passwords_match}
+		<p class="color_c_50 font_size_sm mt_0 mb_xs">passwords do not match</p>
+	{/if}
+	<div class="row gap_sm">
+		<PendingButton
+			pending={auth_state.verifying}
+			disabled={!can_submit}
+			onclick={handle_bootstrap}
+			class={auth_state.verify_error ? 'color_c' : ''}
+		>
+			create account
+		</PendingButton>
+	</div>
+	{#if auth_state.verify_error}
+		<p class="color_c_50 font_size_sm mt_xs mb_0">{auth_state.verify_error}</p>
+	{/if}
+</form>

package/dist/ui/BootstrapForm.svelte.d.ts

@@ -0,0 +1,4 @@
+declare const BootstrapForm: import("svelte").Component<Record<string, never>, {}, "">;
+type BootstrapForm = ReturnType<typeof BootstrapForm>;
+export default BootstrapForm;
+//# sourceMappingURL=BootstrapForm.svelte.d.ts.map

package/dist/ui/BootstrapForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BootstrapForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/BootstrapForm.svelte"],"names":[],"mappings":"AAqFA,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/ColumnLayout.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	const {
+		aside,
+		children,
+		column_width = '280px',
+		class: class_name = '',
+		...rest
+	}: SvelteHTMLElements['div'] & {
+		aside: Snippet;
+		children: Snippet;
+		column_width?: string;
+	} = $props();
+</script>
+
+<div class="column_layout {class_name}" style:--column_width={column_width} {...rest}>
+	<aside class="column_fixed unstyled">
+		{@render aside()}
+	</aside>
+	<div class="column_fluid">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.column_layout {
+		display: flex;
+		height: 100%;
+	}
+
+	.column_fixed {
+		width: var(--column_width, 280px);
+		min-width: var(--column_width, 280px);
+		height: 100%;
+		overflow: auto;
+	}
+
+	.column_fluid {
+		flex: 1;
+		height: 100%;
+		min-width: 0;
+		overflow: auto;
+	}
+</style>

package/dist/ui/ColumnLayout.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['div'] & {
+    aside: Snippet;
+    children: Snippet;
+    column_width?: string;
+};
+declare const ColumnLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColumnLayout = ReturnType<typeof ColumnLayout>;
+export default ColumnLayout;
+//# sourceMappingURL=ColumnLayout.svelte.d.ts.map

package/dist/ui/ColumnLayout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnLayout.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/ColumnLayout.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA2BH,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ui/ConfirmButton.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	/**
+	 * Confirmation popover wrapping `PopoverButton`.
+	 *
+	 * Clicking the trigger opens a popover with a confirm button.
+	 * On confirm, calls `onconfirm` and hides the popover (controlled
+	 * by `hide_on_confirm`). Defaults to `position="left"`.
+	 *
+	 * Snippets (`children`, `popover_content`, `popover_button_content`)
+	 * receive both the `Popover` instance and a `confirm` callback.
+	 *
+	 * @example
+	 * ```svelte
+	 * <ConfirmButton
+	 * 	onconfirm={() => delete_item(item.id)}
+	 * 	title="delete item"
+	 * 	disabled={deleting}
+	 * >
+	 * 	{#snippet children(_popover, _confirm)}
+	 * 		{deleting ? 'deleting…' : 'delete'}
+	 * 	{/snippet}
+	 * </ConfirmButton>
+	 * ```
+	 *
+	 * @example
+	 * ```svelte
+	 * <!-- custom confirm button content -->
+	 * <ConfirmButton onconfirm={handle_revoke} class="icon_button plain" title="revoke">
+	 * 	revoke
+	 * 	{#snippet popover_button_content()}revoke{/snippet}
+	 * </ConfirmButton>
+	 * ```
+	 *
+	 * @module
+	 */
+
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import type {ComponentProps, Snippet} from 'svelte';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
+	import Glyph from '@fuzdev/fuz_ui/Glyph.svelte';
+
+	import PopoverButton from './PopoverButton.svelte';
+	import type {Popover} from './popover.svelte.js';
+
+	const GLYPH_REMOVE = '🗙';
+
+	const {
+		onconfirm,
+		popover_button_attrs,
+		hide_on_confirm = true,
+		position = 'left',
+		popover_content: popover_content_prop,
+		popover_button_content,
+		button,
+		children,
+		...rest
+	}: OmitStrict<ComponentProps<typeof PopoverButton>, 'popover_content' | 'children'> &
+		OmitStrict<SvelteHTMLElements['button'], 'children'> & {
+			onconfirm: (popover: Popover) => void;
+			popover_button_attrs?: SvelteHTMLElements['button'] | undefined;
+			hide_on_confirm?: boolean | undefined;
+			/** Unlike on `PopoverButton` this is optional and has a `confirm` arg */
+			popover_content?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
+			/** Content for the popover button */
+			popover_button_content?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
+			/** Unlike on `PopoverButton` this has a `confirm` arg */
+			children?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
+		} = $props();
+
+	// TODO @many type union instead of this pattern?
+	$effect(() => {
+		if (popover_content_prop && popover_button_attrs) {
+			console.error(
+				'ConfirmButton has both popover_content and popover_attrs defined - popover_content takes precedence',
+			);
+		}
+		if (popover_content_prop && popover_button_content) {
+			console.error(
+				'ConfirmButton has both popover_content and popover_button_content defined - popover_content takes precedence',
+			);
+		}
+	});
+
+	const confirm = (popover: Popover): void => {
+		if (hide_on_confirm) popover.hide();
+		onconfirm(popover);
+	};
+</script>
+
+<!-- TODO the `as any` silences a type problem caused by the complex props -->
+<PopoverButton
+	{position}
+	{button}
+	{...rest as any}
+	children={button ? undefined : children_default}
+>
+	{#snippet popover_content(popover)}
+		{#if popover_content_prop}
+			{@render popover_content_prop(popover, () => confirm(popover))}
+		{:else}
+			<button
+				type="button"
+				class="color_c bg_100"
+				class:icon_button={!popover_button_content}
+				onclick={() => confirm(popover)}
+				title="confirm {rest.title || ''}"
+				{...popover_button_attrs}
+			>
+				{#if popover_button_content}
+					{@render popover_button_content(popover, () => confirm(popover))}
+				{:else}
+					<Glyph glyph={GLYPH_REMOVE} />
+				{/if}
+			</button>
+		{/if}
+	{/snippet}
+</PopoverButton>
+
+{#snippet children_default(popover: Popover)}
+	{#if children}
+		{@render children(popover, () => confirm(popover))}
+	{:else}
+		<Glyph glyph={GLYPH_REMOVE} />
+	{/if}
+{/snippet}

package/dist/ui/ConfirmButton.svelte.d.ts

@@ -0,0 +1,54 @@
+/**
+     * Confirmation popover wrapping `PopoverButton`.
+     *
+     * Clicking the trigger opens a popover with a confirm button.
+     * On confirm, calls `onconfirm` and hides the popover (controlled
+     * by `hide_on_confirm`). Defaults to `position="left"`.
+     *
+     * Snippets (`children`, `popover_content`, `popover_button_content`)
+     * receive both the `Popover` instance and a `confirm` callback.
+     *
+     * @example
+     * ```svelte
+     * <ConfirmButton
+     * 	onconfirm={() => delete_item(item.id)}
+     * 	title="delete item"
+     * 	disabled={deleting}
+     * >
+     * 	{#snippet children(_popover, _confirm)}
+     * 		{deleting ? 'deleting…' : 'delete'}
+     * 	{/snippet}
+     * </ConfirmButton>
+     * ```
+     *
+     * @example
+     * ```svelte
+     * <!-- custom confirm button content -->
+     * <ConfirmButton onconfirm={handle_revoke} class="icon_button plain" title="revoke">
+     * 	revoke
+     * 	{#snippet popover_button_content()}revoke{/snippet}
+     * </ConfirmButton>
+     * ```
+     *
+     * @module
+     */
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
+import PopoverButton from './PopoverButton.svelte';
+import type { Popover } from './popover.svelte.js';
+type $$ComponentProps = OmitStrict<ComponentProps<typeof PopoverButton>, 'popover_content' | 'children'> & OmitStrict<SvelteHTMLElements['button'], 'children'> & {
+    onconfirm: (popover: Popover) => void;
+    popover_button_attrs?: SvelteHTMLElements['button'] | undefined;
+    hide_on_confirm?: boolean | undefined;
+    /** Unlike on `PopoverButton` this is optional and has a `confirm` arg */
+    popover_content?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
+    /** Content for the popover button */
+    popover_button_content?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
+    /** Unlike on `PopoverButton` this has a `confirm` arg */
+    children?: Snippet<[popover: Popover, confirm: () => void]> | undefined;
+};
+declare const ConfirmButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConfirmButton = ReturnType<typeof ConfirmButton>;
+export default ConfirmButton;
+//# sourceMappingURL=ConfirmButton.svelte.d.ts.map

package/dist/ui/ConfirmButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/ConfirmButton.svelte"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCI;AACJ,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAC,cAAc,EAAE,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAG1D,OAAO,aAAa,MAAM,wBAAwB,CAAC;AACnD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAEhD,KAAK,gBAAgB,GAAI,UAAU,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,iBAAiB,GAAG,UAAU,CAAC,GACxG,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IACtD,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,oBAAoB,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;IAChE,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IAC/E,qCAAqC;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IACtF,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;CACxE,CAAC;AAyEJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/Datatable.svelte

@@ -0,0 +1,185 @@
+<script lang="ts" generics="T extends Record<string, any> = Record<string, any>">
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
+	import {
+		DATATABLE_COLUMN_WIDTH_DEFAULT,
+		DATATABLE_MIN_COLUMN_WIDTH,
+		type DatatableColumn,
+	} from './datatable.js';
+	import {format_value} from './ui_format.js';
+
+	const {
+		columns,
+		rows,
+		row_key = 'id' as string & keyof T, // eslint-disable-line @typescript-eslint/no-duplicate-type-constituents
+		height,
+		header,
+		cell,
+		empty,
+		...rest
+	}: SvelteHTMLElements['div'] & {
+		columns: Array<DatatableColumn<T>>;
+		rows: Array<T>;
+		row_key?: string & keyof T; // eslint-disable-line @typescript-eslint/no-duplicate-type-constituents
+		height?: string;
+		header?: Snippet<[column: DatatableColumn<T>]>;
+		cell?: Snippet<[column: DatatableColumn<T>, row: T, value: T[keyof T]]>;
+		empty?: Snippet;
+	} = $props();
+
+	// column widths — base from column defs, resize deltas layered on top
+	const resize_deltas: Record<string, number> = $state({});
+
+	const column_widths: Array<number> = $derived(
+		columns.map((c) => {
+			const base = c.width ?? DATATABLE_COLUMN_WIDTH_DEFAULT;
+			return Math.max(
+				c.min_width ?? DATATABLE_MIN_COLUMN_WIDTH,
+				base + (resize_deltas[c.key] ?? 0),
+			);
+		}),
+	);
+
+	const grid_template_columns = $derived(column_widths.map((w) => `${w}px`).join(' '));
+
+	// column resize
+	let resize_col_index: number | null = $state(null);
+	let resize_start_x = $state(0);
+	let resize_start_width = $state(0);
+
+	const handle_resize_start = (e: PointerEvent, index: number): void => {
+		e.preventDefault();
+		resize_col_index = index;
+		resize_start_x = e.clientX;
+		resize_start_width = column_widths[index]!;
+		(e.target as HTMLElement).setPointerCapture(e.pointerId);
+	};
+
+	const handle_resize_move = (e: PointerEvent): void => {
+		if (resize_col_index === null) return;
+		const column = columns[resize_col_index]!;
+		const base = column.width ?? DATATABLE_COLUMN_WIDTH_DEFAULT;
+		const desired = resize_start_width + (e.clientX - resize_start_x);
+		resize_deltas[column.key] = desired - base;
+	};
+
+	const handle_resize_end = (): void => {
+		resize_col_index = null;
+	};
+</script>
+
+<div
+	{...rest}
+	class="datatable {rest.class}"
+	style:height
+	style:grid-template-columns={grid_template_columns}
+	role="grid"
+	aria-rowcount={rows.length + 1}
+>
+	<!-- sticky header -->
+	<div class="datatable_header" role="row" aria-rowindex={1}>
+		{#each columns as column, i (column.key)}
+			<div class="datatable_header_cell" role="columnheader">
+				{#if header}
+					{@render header(column)}
+				{:else}
+					{column.label}
+				{/if}
+				<div
+					class="datatable_resize_handle"
+					role="separator"
+					onpointerdown={(e) => handle_resize_start(e, i)}
+					onpointermove={handle_resize_move}
+					onpointerup={handle_resize_end}
+				></div>
+			</div>
+		{/each}
+	</div>
+
+	{#if rows.length === 0}
+		<div class="datatable_empty">
+			{#if empty}
+				{@render empty()}
+			{:else}
+				<span class="text_50">no data</span>
+			{/if}
+		</div>
+	{:else}
+		{#each rows as row, i (row[row_key] ?? i)}
+			<div class="datatable_row" role="row" aria-rowindex={i + 2}>
+				{#each columns as column (column.key)}
+					<div class="datatable_cell" role="gridcell">
+						{#if cell}
+							{@render cell(column, row, row[column.key])}
+						{:else if column.format}
+							{column.format(row[column.key], row as any)}
+						{:else}
+							{format_value(row[column.key])}
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.datatable {
+		display: grid;
+		align-content: start;
+		overflow: auto;
+	}
+
+	.datatable_header {
+		display: grid;
+		grid-column: 1 / -1;
+		grid-template-columns: subgrid;
+		position: sticky;
+		top: 0;
+		z-index: 1;
+		background: var(--bg, Canvas);
+		border-bottom: var(--border_width, 1px) solid var(--border_color);
+	}
+
+	.datatable_header_cell {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: var(--space_xs);
+		font-weight: 600;
+	}
+
+	.datatable_resize_handle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 6px;
+		height: 100%;
+		cursor: col-resize;
+	}
+
+	.datatable_resize_handle:hover {
+		background: var(--color_a_5);
+	}
+
+	.datatable_row {
+		display: grid;
+		grid-column: 1 / -1;
+		grid-template-columns: subgrid;
+		align-items: start;
+		min-width: 0; /* override grid auto minimum to respect column widths */
+		border-bottom: var(--border_width, 1px) solid var(--border_color);
+	}
+
+	.datatable_cell {
+		padding: var(--space_xs);
+		min-width: 0; /* override grid auto minimum to respect column widths */
+		overflow-wrap: break-word;
+	}
+
+	.datatable_empty {
+		grid-column: 1 / -1;
+		padding: var(--space_lg);
+	}
+</style>