@fuzdev/fuz_app 0.1.0

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import { type DatatableColumn } from './datatable.js';
+declare function $$render<T extends Record<string, any> = Record<string, any>>(): {
+    props: import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+        columns: Array<DatatableColumn<T>>;
+        rows: Array<T>;
+        row_key?: string & keyof T;
+        height?: string;
+        header?: Snippet<[column: DatatableColumn<T>]>;
+        cell?: Snippet<[column: DatatableColumn<T>, row: T, value: T[keyof T]]>;
+        empty?: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, any> = Record<string, any>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, any> = Record<string, any>>(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 extends Record<string, any> = Record<string, any>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Datatable: $$IsomorphicComponent;
+type Datatable<T extends Record<string, any> = Record<string, any>> = InstanceType<typeof Datatable<T>>;
+export default Datatable;
+//# sourceMappingURL=Datatable.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Datatable.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/Datatable.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,EAGL,KAAK,eAAe,EACpB,MAAM,gBAAgB,CAAC;AAEzB,iBAAS,QAAQ,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;;iBAO1D,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;cAC5B,KAAK,CAAC,CAAC,CAAC;kBACJ,MAAM,GAAG,MAAM,CAAC;iBACjB,MAAM;iBACN,OAAO,CAAC,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;eACvC,OAAO,CAAC,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBAC/D,OAAO;;;;;;EAoGwG;AACzH,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACvE,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC9a,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7K,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1G,eAAe,SAAS,CAAC"}

package/dist/ui/LoginForm.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import {goto} from '$app/navigation';
+	import {resolve} from '$app/paths';
+	import PendingButton from '@fuzdev/fuz_ui/PendingButton.svelte';
+	import {autofocus} from '@fuzdev/fuz_ui/autofocus.svelte.js';
+
+	import {auth_state_context} from './auth_state.svelte.js';
+	import {enter_advance} from './enter_advance.js';
+
+	const {
+		username_label = 'username or email',
+		redirect_on_login = resolve('/account' as any),
+	}: {
+		username_label?: string;
+		redirect_on_login?: string;
+	} = $props();
+
+	const auth_state = auth_state_context.get();
+
+	let username = $state('');
+	let password = $state('');
+
+	const handle_login = async (): Promise<void> => {
+		const u = username.trim();
+		const p = password;
+		if (u && p) {
+			const success = await auth_state.login(u, p);
+			if (success) {
+				username = '';
+				password = '';
+				await goto(redirect_on_login);
+			}
+		}
+	};
+</script>
+
+<form
+	class="width_atmost_md"
+	oninput={() => {
+		auth_state.verify_error = null;
+	}}
+	onsubmit={(e) => {
+		e.preventDefault();
+		void handle_login();
+	}}
+	{@attach enter_advance()}
+>
+	<label class="display:block mb_sm">
+		<span class="text_50 font_size_sm">{username_label}</span>
+		<input
+			type="text"
+			bind:value={username}
+			placeholder={username_label}
+			autocomplete="username"
+			disabled={auth_state.verifying}
+			{@attach autofocus()}
+		/>
+	</label>
+	<label class="display:block mb_sm">
+		<span class="text_50 font_size_sm">password</span>
+		<input
+			type="password"
+			bind:value={password}
+			placeholder="password"
+			autocomplete="current-password"
+			disabled={auth_state.verifying}
+		/>
+	</label>
+	<div class="row gap_sm">
+		<PendingButton
+			pending={auth_state.verifying}
+			disabled={!username.trim() || !password}
+			onclick={handle_login}
+			class={auth_state.verify_error ? 'color_c' : ''}
+		>
+			log in
+		</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/LoginForm.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    username_label?: string;
+    redirect_on_login?: string;
+};
+declare const LoginForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoginForm = ReturnType<typeof LoginForm>;
+export default LoginForm;
+//# sourceMappingURL=LoginForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/LoginForm.svelte"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AA4DH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ui/LogoutButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type {ComponentProps, Snippet} from 'svelte';
+	import PendingButton from '@fuzdev/fuz_ui/PendingButton.svelte';
+
+	import {auth_state_context} from './auth_state.svelte.js';
+
+	const {
+		onclick,
+		children,
+		...rest
+	}: Omit<ComponentProps<typeof PendingButton>, 'pending' | 'onclick' | 'children'> & {
+		onclick?: ComponentProps<typeof PendingButton>['onclick'];
+		children?: Snippet;
+	} = $props();
+
+	const auth_state = auth_state_context.get();
+
+	let pending = $state(false);
+</script>
+
+<PendingButton
+	{...rest}
+	{pending}
+	onclick={async (e) => {
+		onclick?.(e);
+		if (e.defaultPrevented) return;
+		pending = true;
+		try {
+			await auth_state.logout();
+		} finally {
+			pending = false;
+		}
+	}}
+>
+	{#if children}{@render children()}{:else}log out{/if}
+</PendingButton>

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

@@ -0,0 +1,10 @@
+import type { ComponentProps, Snippet } from 'svelte';
+import PendingButton from '@fuzdev/fuz_ui/PendingButton.svelte';
+type $$ComponentProps = Omit<ComponentProps<typeof PendingButton>, 'pending' | 'onclick' | 'children'> & {
+    onclick?: ComponentProps<typeof PendingButton>['onclick'];
+    children?: Snippet;
+};
+declare const LogoutButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type LogoutButton = ReturnType<typeof LogoutButton>;
+export default LogoutButton;
+//# sourceMappingURL=LogoutButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoutButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/LogoutButton.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,cAAc,EAAE,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpD,OAAO,aAAa,MAAM,qCAAqC,CAAC;AAI/D,KAAK,gBAAgB,GAAI,IAAI,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,GAAG;IACzG,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAiCH,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ui/MenuLink.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import {page} from '$app/state';
+	import {resolve} from '$app/paths';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
+
+	const {
+		path,
+		highlighted,
+		children,
+		...rest
+	}: OmitStrict<SvelteHTMLElements['a'], 'href' | 'children'> & {
+		path: string;
+		highlighted?: boolean;
+		children?: Snippet;
+	} = $props();
+
+	const href = $derived(resolve(path as any));
+	const selected = $derived(href === page.url.pathname);
+	const is_highlighted = $derived(
+		highlighted ?? (page.url.pathname.startsWith(href + '/') && !selected),
+	);
+</script>
+
+<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+<a {href} class:selected class:highlighted={is_highlighted} {...rest}>
+	{@render children?.()}
+</a>
+
+<style>
+	.highlighted {
+		background-color: var(--fg_10);
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['a'], 'href' | 'children'> & {
+    path: string;
+    highlighted?: boolean;
+    children?: Snippet;
+};
+declare const MenuLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuLink = ReturnType<typeof MenuLink>;
+export default MenuLink;
+//# sourceMappingURL=MenuLink.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/MenuLink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAEzD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IACnF,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA+BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ui/OpenSignupToggle.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import {AppSettingsState} from './app_settings_state.svelte.js';
+
+	const app_settings = new AppSettingsState();
+
+	void app_settings.fetch();
+</script>
+
+<div class="open_signup_toggle">
+	{#if app_settings.loading}
+		<p class="text_50">loading settings...</p>
+	{:else if app_settings.settings}
+		<label class="row">
+			<input
+				type="checkbox"
+				class="mr_lg"
+				checked={app_settings.settings.open_signup}
+				disabled={app_settings.updating}
+				onchange={() => app_settings.update_open_signup(!app_settings.settings!.open_signup)}
+			/>
+			<div>
+				<div>open signup</div>
+				<div class="text_60 font_size_sm">
+					{#if app_settings.settings.open_signup}
+						anyone can create an account without an invite
+					{:else}
+						account creation requires an invite
+					{/if}
+				</div>
+			</div>
+		</label>
+	{/if}
+	{#if app_settings.error}
+		<p class="color_c_50">{app_settings.error}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const OpenSignupToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OpenSignupToggle = InstanceType<typeof OpenSignupToggle>;
+export default OpenSignupToggle;
+//# sourceMappingURL=OpenSignupToggle.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OpenSignupToggle.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/OpenSignupToggle.svelte"],"names":[],"mappings":"AAkCA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,gBAAgB;;kBAA+E,CAAC;AACpF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/ui/PopoverButton.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	/**
+	 * Button + popover composition for the common toggle-on-click pattern.
+	 *
+	 * Wraps a `Popover` instance with a `<button>`, a positioned content area,
+	 * and scale transitions. Spreads extra props onto the button element.
+	 * Pass `popover_content` for the popover body, and either `children` for
+	 * simple button content or `button` for a fully custom trigger —
+	 * both receive the `Popover` instance.
+	 *
+	 * @example
+	 * ```svelte
+	 * <PopoverButton position="bottom" align="center">
+	 * 	{#snippet popover_content(popover)}
+	 * 		<div class="box p_md">
+	 * 			<button type="button" onclick={() => popover.hide()}>close</button>
+	 * 		</div>
+	 * 	{/snippet}
+	 * 	open menu
+	 * </PopoverButton>
+	 * ```
+	 *
+	 * @example
+	 * ```svelte
+	 * <!-- custom trigger via the `button` snippet -->
+	 * <PopoverButton position="right" align="start" disable_outside_click>
+	 * 	{#snippet popover_content(popover)}
+	 * 		<form onsubmit={() => popover.hide()}>
+	 * 			<input name="search" />
+	 * 			<button type="submit">go</button>
+	 * 		</form>
+	 * 	{/snippet}
+	 * 	{#snippet button(popover)}
+	 * 		<button type="button" class="icon_button" {@attach popover.trigger()}>
+	 * 			search
+	 * 		</button>
+	 * 	{/snippet}
+	 * </PopoverButton>
+	 * ```
+	 *
+	 * @see `ConfirmButton` for a higher-level wrapper with confirmation semantics
+	 *
+	 * @module
+	 */
+
+	import type {SvelteHTMLElements} from 'svelte/elements';
+	import type {Snippet} from 'svelte';
+	import {scale} from 'svelte/transition';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
+
+	import {Popover} from './popover.svelte.js';
+	import type {Position, Alignment} from './position_helpers.js';
+
+	const {
+		position = 'bottom',
+		align = 'center',
+		disable_outside_click = false,
+		popover_class,
+		popover_attrs,
+		popover_content,
+		popover_container_attrs,
+		button,
+		children,
+		...rest
+	}: OmitStrict<SvelteHTMLElements['button'], 'children'> & {
+		position?: Position | undefined;
+		align?: Alignment | undefined;
+		disable_outside_click?: boolean | undefined;
+		popover_class?: string | undefined;
+		popover_attrs?: SvelteHTMLElements['div'] | undefined;
+		popover_content: Snippet<[popover: Popover]>;
+		popover_container_attrs?: SvelteHTMLElements['div'] | undefined;
+		button?: Snippet<[popover: Popover]> | undefined;
+		children?: Snippet<[popover: Popover]> | undefined;
+	} = $props();
+
+	// TODO @many type union instead of this pattern?
+	$effect(() => {
+		if (children && button) {
+			console.error('PopoverButton has both children and button defined - button takes precedence');
+		}
+		if (!children && !button) {
+			console.error('PopoverButton requires either children or a button snippet prop');
+		}
+	});
+
+	// Create a popover instance
+	const popover = new Popover();
+
+	// TODO refactor, try to remove
+	// This hides the popover when the button is disabled
+	$effect.pre(() => {
+		if (rest.disabled) {
+			popover.hide();
+		}
+	});
+</script>
+
+<!-- TODO these flex values fix some layout cases so that the container is laid out like the button, but this is a partial solution -->
+<div
+	{...popover_container_attrs}
+	class="position:relative {popover_container_attrs?.class}"
+	{@attach popover.container}
+>
+	{#if button}
+		{@render button(popover)}
+	{:else}
+		<button
+			type="button"
+			{@attach popover.trigger({
+				position,
+				align,
+				disable_outside_click,
+			})}
+			{...rest}
+		>
+			{@render children?.(popover)}
+		</button>
+	{/if}
+
+	{#if popover.visible}
+		<div
+			{@attach popover.content({
+				position,
+				align,
+				disable_outside_click,
+				popover_class,
+			})}
+			in:scale={{duration: 80}}
+			out:scale={{duration: 200}}
+			{...popover_attrs}
+		>
+			{@render popover_content(popover)}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,63 @@
+/**
+     * Button + popover composition for the common toggle-on-click pattern.
+     *
+     * Wraps a `Popover` instance with a `<button>`, a positioned content area,
+     * and scale transitions. Spreads extra props onto the button element.
+     * Pass `popover_content` for the popover body, and either `children` for
+     * simple button content or `button` for a fully custom trigger —
+     * both receive the `Popover` instance.
+     *
+     * @example
+     * ```svelte
+     * <PopoverButton position="bottom" align="center">
+     * 	{#snippet popover_content(popover)}
+     * 		<div class="box p_md">
+     * 			<button type="button" onclick={() => popover.hide()}>close</button>
+     * 		</div>
+     * 	{/snippet}
+     * 	open menu
+     * </PopoverButton>
+     * ```
+     *
+     * @example
+     * ```svelte
+     * <!-- custom trigger via the `button` snippet -->
+     * <PopoverButton position="right" align="start" disable_outside_click>
+     * 	{#snippet popover_content(popover)}
+     * 		<form onsubmit={() => popover.hide()}>
+     * 			<input name="search" />
+     * 			<button type="submit">go</button>
+     * 		</form>
+     * 	{/snippet}
+     * 	{#snippet button(popover)}
+     * 		<button type="button" class="icon_button" {@attach popover.trigger()}>
+     * 			search
+     * 		</button>
+     * 	{/snippet}
+     * </PopoverButton>
+     * ```
+     *
+     * @see `ConfirmButton` for a higher-level wrapper with confirmation semantics
+     *
+     * @module
+     */
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
+import { Popover } from './popover.svelte.js';
+import type { Position, Alignment } from './position_helpers.js';
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['button'], 'children'> & {
+    position?: Position | undefined;
+    align?: Alignment | undefined;
+    disable_outside_click?: boolean | undefined;
+    popover_class?: string | undefined;
+    popover_attrs?: SvelteHTMLElements['div'] | undefined;
+    popover_content: Snippet<[popover: Popover]>;
+    popover_container_attrs?: SvelteHTMLElements['div'] | undefined;
+    button?: Snippet<[popover: Popover]> | undefined;
+    children?: Snippet<[popover: Popover]> | undefined;
+};
+declare const PopoverButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type PopoverButton = ReturnType<typeof PopoverButton>;
+export default PopoverButton;
+//# sourceMappingURL=PopoverButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/PopoverButton.svelte"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA0CI;AACJ,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACxD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAE1D,OAAO,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAC5C,OAAO,KAAK,EAAC,QAAQ,EAAE,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAE9D,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,aAAa,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACtD,eAAe,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAC7C,uBAAuB,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;CACnD,CAAC;AA2EH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/SignupForm.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import {goto} from '$app/navigation';
+	import {resolve} from '$app/paths';
+	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 {
+		redirect_on_signup = resolve('/account' as any),
+	}: {
+		redirect_on_signup?: string;
+	} = $props();
+
+	const auth_state = auth_state_context.get();
+
+	let username = $state('');
+	let email = $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(
+		username.trim() &&
+			username_valid &&
+			password.length >= PASSWORD_LENGTH_MIN &&
+			passwords_match &&
+			!auth_state.verifying,
+	);
+
+	const handle_signup = async (): Promise<void> => {
+		if (!can_submit) return;
+		const success = await auth_state.signup(username.trim(), password, email.trim() || undefined);
+		if (success) {
+			await goto(redirect_on_signup);
+		}
+	};
+</script>
+
+<form
+	class="width_atmost_md"
+	oninput={() => {
+		auth_state.verify_error = null;
+	}}
+	onsubmit={(e) => {
+		e.preventDefault();
+		void handle_signup();
+	}}
+	{@attach enter_advance()}
+>
+	<label class="display:block mb_sm">
+		<span class="text_50 font_size_sm">username</span>
+		<input
+			type="text"
+			bind:value={username}
+			placeholder="username"
+			autocomplete="username"
+			disabled={auth_state.verifying}
+			{@attach autofocus()}
+		/>
+	</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">email (optional)</span>
+		<input
+			type="email"
+			bind:value={email}
+			placeholder="email"
+			autocomplete="email"
+			disabled={auth_state.verifying}
+		/>
+	</label>
+	<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_signup}
+			class={auth_state.verify_error ? 'color_c' : ''}
+		>
+			sign up
+		</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/SignupForm.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    redirect_on_signup?: string;
+};
+declare const SignupForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignupForm = ReturnType<typeof SignupForm>;
+export default SignupForm;
+//# sourceMappingURL=SignupForm.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignupForm.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/SignupForm.svelte"],"names":[],"mappings":"AAaC,KAAK,gBAAgB,GAAI;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAoFH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}