@fuzdev/fuz_app 0.1.0

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

@@ -0,0 +1,55 @@
+/**
+ * Base reactive state class with loading/error management.
+ *
+ * Provides the common loading/error pattern shared by all state classes.
+ * Subclasses add domain-specific `$state` fields and methods that call
+ * the protected `run` helper for async operations.
+ *
+ * @example
+ * ```ts
+ * class ItemsState extends Loadable {
+ * 	items: Array<Item> = $state([]);
+ *
+ * 	async fetch(): Promise<void> {
+ * 		await this.run(async () => {
+ * 			const response = await fetch('/api/items');
+ * 			if (!response.ok) throw new Error('failed to fetch');
+ * 			this.items = await response.json();
+ * 		});
+ * 	}
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * // structured errors via map_error
+ * class FormState extends Loadable<{field: string; message: string}> {
+ * 	async submit(data: FormData): Promise<void> {
+ * 		await this.run(
+ * 			() => post_form(data),
+ * 			(e) => ({field: 'form', message: e instanceof Error ? e.message : 'unknown'}),
+ * 		);
+ * 	}
+ * }
+ * ```
+ *
+ * @module
+ */
+export declare class Loadable<TError = string> {
+    loading: boolean;
+    error: TError | null;
+    /** The raw caught value from the last failed `run()`, for programmatic inspection. */
+    error_data: unknown;
+    /**
+     * Run an async operation with loading/error handling.
+     *
+     * Sets `loading` to `true`, clears `error` and `error_data`, runs `fn`, catches errors.
+     * Pass `map_error` to produce structured errors instead of strings.
+     *
+     * @returns the result or `undefined` if the operation failed
+     */
+    protected run<T>(fn: () => Promise<T>, map_error?: (e: unknown) => TError): Promise<T | undefined>;
+    /** Reset loading and error state. Subclasses override to clear data. */
+    reset(): void;
+}
+//# sourceMappingURL=loadable.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loadable.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/loadable.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,qBAAa,QAAQ,CAAC,MAAM,GAAG,MAAM;IACpC,OAAO,UAAiB;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAgB;IAEpC,sFAAsF;IACtF,UAAU,EAAE,OAAO,CAAgB;IAEnC;;;;;;;OAOG;cACa,GAAG,CAAC,CAAC,EACpB,EAAE,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EACpB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,MAAM,GAChC,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IAiBzB,wEAAwE;IACxE,KAAK,IAAI,IAAI;CAKb"}

package/dist/ui/loadable.svelte.js

@@ -0,0 +1,75 @@
+/**
+ * Base reactive state class with loading/error management.
+ *
+ * Provides the common loading/error pattern shared by all state classes.
+ * Subclasses add domain-specific `$state` fields and methods that call
+ * the protected `run` helper for async operations.
+ *
+ * @example
+ * ```ts
+ * class ItemsState extends Loadable {
+ * 	items: Array<Item> = $state([]);
+ *
+ * 	async fetch(): Promise<void> {
+ * 		await this.run(async () => {
+ * 			const response = await fetch('/api/items');
+ * 			if (!response.ok) throw new Error('failed to fetch');
+ * 			this.items = await response.json();
+ * 		});
+ * 	}
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * // structured errors via map_error
+ * class FormState extends Loadable<{field: string; message: string}> {
+ * 	async submit(data: FormData): Promise<void> {
+ * 		await this.run(
+ * 			() => post_form(data),
+ * 			(e) => ({field: 'form', message: e instanceof Error ? e.message : 'unknown'}),
+ * 		);
+ * 	}
+ * }
+ * ```
+ *
+ * @module
+ */
+export class Loadable {
+    loading = $state(false);
+    error = $state(null);
+    /** The raw caught value from the last failed `run()`, for programmatic inspection. */
+    error_data = $state(null);
+    /**
+     * Run an async operation with loading/error handling.
+     *
+     * Sets `loading` to `true`, clears `error` and `error_data`, runs `fn`, catches errors.
+     * Pass `map_error` to produce structured errors instead of strings.
+     *
+     * @returns the result or `undefined` if the operation failed
+     */
+    async run(fn, map_error) {
+        this.loading = true;
+        this.error = null;
+        this.error_data = null;
+        try {
+            return await fn();
+        }
+        catch (e) {
+            this.error = map_error
+                ? map_error(e)
+                : (e instanceof Error ? e.message : 'Request failed');
+            this.error_data = e;
+            return undefined;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /** Reset loading and error state. Subclasses override to clear data. */
+    reset() {
+        this.loading = false;
+        this.error = null;
+        this.error_data = null;
+    }
+}

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

@@ -0,0 +1,137 @@
+/**
+ * Popover state class with trigger, content, and container attachments.
+ *
+ * `Popover` manages visibility, positioning, outside-click dismissal,
+ * and ARIA attributes. The `trigger`, `content`, and `container`
+ * attachments wire up the DOM via Svelte's `{@attach}` directive.
+ *
+ * For the common button + popover pattern, see `PopoverButton`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * 	import {Popover} from '@fuzdev/fuz_app/ui/popover.svelte.js';
+ *
+ * 	const popover = new Popover();
+ * </script>
+ *
+ * <div class="position:relative" {@attach popover.container}>
+ * 	<button type="button" {@attach popover.trigger({position: 'bottom', align: 'center'})}>
+ * 		toggle
+ * 	</button>
+ * 	{#if popover.visible}
+ * 		<div {@attach popover.content({position: 'bottom', align: 'center'})}>
+ * 			<button type="button" onclick={() => popover.hide()}>close</button>
+ * 		</div>
+ * 	{/if}
+ * </div>
+ * ```
+ *
+ * @example
+ * ```ts
+ * // programmatic control with callbacks
+ * const popover = new Popover({
+ * 	position: 'right',
+ * 	align: 'start',
+ * 	offset: '8px',
+ * 	disable_outside_click: true,
+ * 	onshow: () => console.log('opened'),
+ * 	onhide: () => console.log('closed'),
+ * });
+ *
+ * popover.show();
+ * popover.toggle();
+ * popover.hide();
+ * ```
+ *
+ * @module
+ */
+import type { Attachment } from 'svelte/attachments';
+import type { Snippet } from 'svelte';
+import type { TransitionConfig } from 'svelte/transition';
+import { type Position, type Alignment } from './position_helpers.js';
+/**
+ * Parameters for configuring the popover.
+ */
+export interface PopoverParameters {
+    /** Position of the popover relative to its trigger. */
+    position?: Position;
+    /** Alignment along the position edge. */
+    align?: Alignment;
+    /** Distance from the position. */
+    offset?: string;
+    /** Whether to disable closing when clicking outside. */
+    disable_outside_click?: boolean;
+    /** Custom class for the popover content. */
+    popover_class?: string;
+    /** Optional callback when popover is shown. */
+    onshow?: () => void;
+    /** Optional callback when popover is hidden. */
+    onhide?: () => void;
+}
+/**
+ * Parameters for the popover trigger action.
+ */
+export interface PopoverTriggerParameters extends PopoverParameters {
+    /** Content to render in the popover (as a snippet). */
+    content?: Snippet;
+}
+/**
+ * Support both Svelte transitions and custom transitions.
+ */
+export type TransitionFunction = (node: HTMLElement) => TransitionConfig | {
+    destroy?: () => void;
+};
+/**
+ * Parameters for the popover content action.
+ */
+export interface PopoverContentParameters extends PopoverParameters {
+}
+/**
+ * Class that manages state and provides actions for popovers.
+ */
+export declare class Popover {
+    #private;
+    /** Whether the popover is currently visible. */
+    visible: boolean;
+    /** Position of the popover relative to its trigger. */
+    position: Position;
+    /** Alignment along the position edge. */
+    align: Alignment;
+    /** Distance from the position. */
+    offset: string;
+    /** Whether to disable closing when clicking outside. */
+    disable_outside_click: boolean;
+    /** Custom class for the popover. */
+    popover_class: string;
+    constructor(params?: PopoverParameters);
+    /**
+     * Updates the popover configuration.
+     */
+    update(params: PopoverParameters): void;
+    /**
+     * Shows the popover.
+     */
+    show(): void;
+    /**
+     * Hides the popover.
+     */
+    hide(): void;
+    /**
+     * Toggles the popover visibility.
+     */
+    toggle(visible?: boolean): void;
+    /**
+     * Attachment for the container element.
+     */
+    container: Attachment<HTMLElement>;
+    /**
+     * Attachment factory for the trigger element that shows/hides the popover.
+     */
+    trigger: (params?: PopoverTriggerParameters) => Attachment<HTMLElement>;
+    /**
+     * Attachment factory for the popover content element.
+     */
+    content: (params?: PopoverContentParameters) => Attachment<HTMLElement>;
+}
+//# sourceMappingURL=popover.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/popover.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,oBAAoB,CAAC;AACnD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAC;AAExD,OAAO,EAAC,KAAK,QAAQ,EAAE,KAAK,SAAS,EAA2B,MAAM,uBAAuB,CAAC;AAS9F;;GAEG;AACH,MAAM,WAAW,iBAAiB;IACjC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IAClE,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,WAAW,KAAK,gBAAgB,GAAG;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAC,CAAC;AAElG;;GAEG;AAEH,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;CAElE;AAED;;GAEG;AACH,qBAAa,OAAO;;IACnB,gDAAgD;IAChD,OAAO,UAAiB;IAExB,uDAAuD;IACvD,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,yCAAyC;IACzC,KAAK,EAAE,SAAS,CAAoB;IAEpC,kCAAkC;IAClC,MAAM,SAAe;IAErB,wDAAwD;IACxD,qBAAqB,UAAiB;IAEtC,oCAAoC;IACpC,aAAa,SAAc;gBAoBf,MAAM,CAAC,EAAE,iBAAiB;IAiCtC;;OAEG;IACH,MAAM,CAAC,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAgEvC;;OAEG;IACH,IAAI,IAAI,IAAI;IAWZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAWZ;;OAEG;IACH,MAAM,CAAC,OAAO,UAAgB,GAAG,IAAI;IAQrC;;OAEG;IACH,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAQhC;IAEF;;OAEG;IACH,OAAO,GAAI,SAAS,wBAAwB,KAAG,UAAU,CAAC,WAAW,CAAC,CAsBpE;IAEF;;OAEG;IACH,OAAO,GAAI,SAAS,wBAAwB,KAAG,UAAU,CAAC,WAAW,CAAC,CA2DpE;CACF"}

package/dist/ui/popover.svelte.js

@@ -0,0 +1,288 @@
+/**
+ * Popover state class with trigger, content, and container attachments.
+ *
+ * `Popover` manages visibility, positioning, outside-click dismissal,
+ * and ARIA attributes. The `trigger`, `content`, and `container`
+ * attachments wire up the DOM via Svelte's `{@attach}` directive.
+ *
+ * For the common button + popover pattern, see `PopoverButton`.
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ * 	import {Popover} from '@fuzdev/fuz_app/ui/popover.svelte.js';
+ *
+ * 	const popover = new Popover();
+ * </script>
+ *
+ * <div class="position:relative" {@attach popover.container}>
+ * 	<button type="button" {@attach popover.trigger({position: 'bottom', align: 'center'})}>
+ * 		toggle
+ * 	</button>
+ * 	{#if popover.visible}
+ * 		<div {@attach popover.content({position: 'bottom', align: 'center'})}>
+ * 			<button type="button" onclick={() => popover.hide()}>close</button>
+ * 		</div>
+ * 	{/if}
+ * </div>
+ * ```
+ *
+ * @example
+ * ```ts
+ * // programmatic control with callbacks
+ * const popover = new Popover({
+ * 	position: 'right',
+ * 	align: 'start',
+ * 	offset: '8px',
+ * 	disable_outside_click: true,
+ * 	onshow: () => console.log('opened'),
+ * 	onhide: () => console.log('closed'),
+ * });
+ *
+ * popover.show();
+ * popover.toggle();
+ * popover.hide();
+ * ```
+ *
+ * @module
+ */
+import { on } from 'svelte/events';
+import { swallow } from '@fuzdev/fuz_util/dom.js';
+import { generate_position_styles } from './position_helpers.js';
+const create_client_id = () => Math.random().toString(36).substring(2);
+/**
+ * Class that manages state and provides actions for popovers.
+ */
+export class Popover {
+    /** Whether the popover is currently visible. */
+    visible = $state(false);
+    /** Position of the popover relative to its trigger. */
+    position = $state('bottom');
+    /** Alignment along the position edge. */
+    align = $state('center');
+    /** Distance from the position. */
+    offset = $state('0');
+    /** Whether to disable closing when clicking outside. */
+    disable_outside_click = $state(false);
+    /** Custom class for the popover. */
+    popover_class = $state('');
+    /** Reference to the trigger element. */
+    #trigger_element = null;
+    /** Reference to the content element. */
+    #content_element = null;
+    /** Reference to the container element. */
+    #container_element = null;
+    /** Onshow callback. */
+    #onshow = undefined;
+    /** Onhide callback. */
+    #onhide = undefined;
+    /** Cleanup function for document click handler. */
+    #document_click_cleanup = undefined;
+    constructor(params) {
+        if (params) {
+            this.update(params);
+        }
+    }
+    /**
+     * Sets up or removes the document click handler based on current state.
+     */
+    #manage_outside_click() {
+        // If we should have an outside click handler but don't, add one
+        if (this.visible && !this.disable_outside_click && !this.#document_click_cleanup) {
+            this.#document_click_cleanup = on(document, 'click', (event) => {
+                const target = event.target;
+                if (this.#content_element &&
+                    this.#trigger_element &&
+                    !this.#content_element.contains(target) &&
+                    !this.#trigger_element.contains(target) &&
+                    (!this.#container_element || !this.#container_element.contains(target))) {
+                    this.hide();
+                }
+            });
+        }
+        // If we shouldn't have an outside click handler but do, remove it
+        else if ((!this.visible || this.disable_outside_click) && this.#document_click_cleanup) {
+            this.#document_click_cleanup();
+            this.#document_click_cleanup = undefined;
+        }
+    }
+    /**
+     * Updates the popover configuration.
+     */
+    update(params) {
+        // Store the old class before updating
+        const old_class = this.popover_class;
+        const old_disable_outside_click = this.disable_outside_click;
+        // Update properties
+        if (params.position !== undefined)
+            this.position = params.position;
+        if (params.align !== undefined)
+            this.align = params.align;
+        if (params.offset !== undefined)
+            this.offset = params.offset;
+        if (params.popover_class !== undefined)
+            this.popover_class = params.popover_class;
+        if (params.disable_outside_click !== undefined)
+            this.disable_outside_click = params.disable_outside_click;
+        // Update classes on content element if it exists and class changed
+        if (this.#content_element &&
+            params.popover_class !== undefined &&
+            old_class !== params.popover_class) {
+            // Remove old class if it exists
+            if (old_class) {
+                this.#content_element.classList.remove(old_class);
+            }
+            // Add new class if it exists
+            if (this.popover_class) {
+                this.#content_element.classList.add(this.popover_class);
+            }
+        }
+        // Update outside click handler if disable_outside_click changed
+        if (params.disable_outside_click !== undefined &&
+            old_disable_outside_click !== this.disable_outside_click) {
+            this.#manage_outside_click();
+        }
+        if (params.onshow !== undefined)
+            this.#onshow = params.onshow;
+        if (params.onhide !== undefined)
+            this.#onhide = params.onhide;
+        // Update ARIA attributes on trigger if it exists
+        this.#update_trigger_aria_attributes();
+        // Note: We don't directly manipulate visibility with style properties
+        // to allow Svelte transitions to work properly
+    }
+    /**
+     * Updates ARIA attributes and state for accessibility.
+     */
+    #update_trigger_aria_attributes() {
+        if (this.#trigger_element) {
+            this.#trigger_element.setAttribute('aria-expanded', this.visible ? 'true' : 'false');
+            // If we have a content element, establish the relationship
+            if (this.#content_element) {
+                const content_id = this.#content_element.id || `popover-content-${create_client_id()}`;
+                this.#content_element.id = content_id;
+                this.#trigger_element.setAttribute('aria-controls', content_id);
+            }
+        }
+    }
+    /**
+     * Shows the popover.
+     */
+    show() {
+        if (this.visible)
+            return;
+        this.visible = true;
+        this.#manage_outside_click();
+        this.#update_trigger_aria_attributes();
+        if (this.#onshow)
+            this.#onshow();
+    }
+    /**
+     * Hides the popover.
+     */
+    hide() {
+        if (!this.visible)
+            return;
+        this.visible = false;
+        this.#manage_outside_click();
+        this.#update_trigger_aria_attributes();
+        if (this.#onhide)
+            this.#onhide();
+    }
+    /**
+     * Toggles the popover visibility.
+     */
+    toggle(visible = !this.visible) {
+        if (visible) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    /**
+     * Attachment for the container element.
+     */
+    container = (node) => {
+        this.#container_element = node;
+        return () => {
+            if (this.#container_element === node) {
+                this.#container_element = null;
+            }
+        };
+    };
+    /**
+     * Attachment factory for the trigger element that shows/hides the popover.
+     */
+    trigger = (params) => {
+        return (node) => {
+            this.#trigger_element = node;
+            if (params) {
+                this.update(params);
+            }
+            this.#update_trigger_aria_attributes();
+            const click_handler = on(node, 'click', (e) => {
+                swallow(e);
+                this.toggle();
+            });
+            return () => {
+                click_handler();
+                if (this.#trigger_element === node) {
+                    this.#trigger_element = null;
+                }
+            };
+        };
+    };
+    /**
+     * Attachment factory for the popover content element.
+     */
+    content = (params) => {
+        return (node) => {
+            this.#content_element = node;
+            if (params) {
+                this.update(params);
+            }
+            if (this.popover_class) {
+                node.classList.add(this.popover_class);
+            }
+            node.style.position = 'absolute';
+            node.style.zIndex = '10';
+            const update_node_position = () => {
+                const styles = generate_position_styles(this.position, this.align, this.offset);
+                const position_props = [
+                    'top',
+                    'bottom',
+                    'left',
+                    'right',
+                    'transform',
+                    'transform-origin',
+                    'width',
+                    'height',
+                ];
+                for (const prop of position_props) {
+                    node.style.removeProperty(prop);
+                }
+                for (const key in styles) {
+                    node.style.setProperty(key, styles[key]);
+                }
+            };
+            update_node_position();
+            this.#manage_outside_click();
+            if (!node.hasAttribute('role')) {
+                node.setAttribute('role', 'dialog');
+            }
+            return () => {
+                if (this.#document_click_cleanup) {
+                    this.#document_click_cleanup();
+                    this.#document_click_cleanup = undefined;
+                }
+                if (this.popover_class) {
+                    node.classList.remove(this.popover_class);
+                }
+                if (this.#content_element === node) {
+                    this.#content_element = null;
+                }
+            };
+        };
+    };
+}

package/dist/ui/position_helpers.d.ts

@@ -0,0 +1,27 @@
+/**
+ * CSS position calculation helpers for popovers and floating UI elements.
+ *
+ * @module
+ */
+/**
+ * Basic position options for UI elements (cardinal directions).
+ */
+export type CardinalPosition = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Extended position options including overlay and center.
+ */
+export type Position = CardinalPosition | 'overlay' | 'center';
+/**
+ * Alignment options for positioned elements.
+ */
+export type Alignment = 'start' | 'center' | 'end';
+/**
+ * Generates CSS positioning styles for UI elements.
+ *
+ * @param position - where to position the element ('left', 'right', etc.)
+ * @param align - alignment along the position edge ('start', 'center', 'end')
+ * @param offset - distance from the position (CSS value)
+ * @returns CSS styles as a Record
+ */
+export declare const generate_position_styles: (position?: Position, align?: Alignment, offset?: string) => Record<string, string>;
+//# sourceMappingURL=position_helpers.d.ts.map

package/dist/ui/position_helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position_helpers.d.ts","sourceRoot":"../src/lib/","sources":["../../src/lib/ui/position_helpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,QAAQ,GAAG,gBAAgB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GACpC,WAAU,QAAmB,EAC7B,QAAO,SAAoB,EAC3B,eAAY,KACV,MAAM,CAAC,MAAM,EAAE,MAAM,CAiEvB,CAAC"}

package/dist/ui/position_helpers.js

@@ -0,0 +1,81 @@
+/**
+ * CSS position calculation helpers for popovers and floating UI elements.
+ *
+ * @module
+ */
+import { UnreachableError } from '@fuzdev/fuz_util/error.js';
+/**
+ * Generates CSS positioning styles for UI elements.
+ *
+ * @param position - where to position the element ('left', 'right', etc.)
+ * @param align - alignment along the position edge ('start', 'center', 'end')
+ * @param offset - distance from the position (CSS value)
+ * @returns CSS styles as a Record
+ */
+export const generate_position_styles = (position = 'center', align = 'center', offset = '0') => {
+    const styles = {
+        position: 'absolute',
+        'z-index': '10',
+    };
+    // Check if there's an offset to apply
+    const has_offset = offset !== '0';
+    // Set transform-origin based on position for proper animation direction
+    switch (position) {
+        case 'left':
+            styles.right = has_offset ? `calc(100% + ${offset})` : '100%';
+            styles.left = 'auto';
+            styles.transform = '';
+            styles.top = align === 'center' ? '50%' : align === 'start' ? '0' : 'auto';
+            styles.bottom = align === 'end' ? '0' : 'auto';
+            styles['transform-origin'] = 'right';
+            if (align === 'center')
+                styles.transform = 'translateY(-50%)';
+            break;
+        case 'right':
+            styles.left = has_offset ? `calc(100% + ${offset})` : '100%';
+            styles.right = 'auto';
+            styles.transform = '';
+            styles.top = align === 'center' ? '50%' : align === 'start' ? '0' : 'auto';
+            styles.bottom = align === 'end' ? '0' : 'auto';
+            styles['transform-origin'] = 'left';
+            if (align === 'center')
+                styles.transform = 'translateY(-50%)';
+            break;
+        case 'top':
+            styles.bottom = has_offset ? `calc(100% + ${offset})` : '100%';
+            styles.top = 'auto';
+            styles.transform = '';
+            styles.left = align === 'center' ? '50%' : align === 'start' ? '0' : 'auto';
+            styles.right = align === 'end' ? '0' : 'auto';
+            styles['transform-origin'] = 'bottom';
+            if (align === 'center')
+                styles.transform = 'translateX(-50%)';
+            break;
+        case 'bottom':
+            styles.top = has_offset ? `calc(100% + ${offset})` : '100%';
+            styles.bottom = 'auto';
+            styles.transform = '';
+            styles.left = align === 'center' ? '50%' : align === 'start' ? '0' : 'auto';
+            styles.right = align === 'end' ? '0' : 'auto';
+            styles['transform-origin'] = 'top';
+            if (align === 'center')
+                styles.transform = 'translateX(-50%)';
+            break;
+        case 'center':
+            styles.top = '50%';
+            styles.left = '50%';
+            styles.transform = 'translate(-50%, -50%)';
+            styles['transform-origin'] = 'center';
+            break;
+        case 'overlay':
+            styles.top = '0';
+            styles.left = '0';
+            styles.width = '100%';
+            styles.height = '100%';
+            styles['transform-origin'] = 'center';
+            break;
+        default:
+            throw new UnreachableError(position);
+    }
+    return styles;
+};