ui

37 modules

• ui/account_sessions_state.svelte.ts

  Reactive state for managing auth sessions on a settings page.

• ui/AccountSessions.svelte

• ui/admin_accounts_state.svelte.ts

  Reactive state for admin account management.

• ui/admin_invites_state.svelte.ts

  Reactive state for admin invite management.

• ui/admin_sessions_state.svelte.ts

  Reactive state for admin session overview.

• ui/AdminAccounts.svelte

• ui/AdminAuditLog.svelte

• ui/AdminInvites.svelte

• ui/AdminOverview.svelte

• ui/AdminPermitHistory.svelte

• ui/AdminSessions.svelte

• ui/AdminSettings.svelte

• ui/AdminSurface.svelte

• ui/app_settings_state.svelte.ts

  Reactive state for admin app settings management.

• ui/AppShell.svelte

• ui/audit_log_state.svelte.ts

  Reactive state for the audit log viewer.

  Supports both fetch-based pagination and realtime SSE streaming. SSE events are prepended to the list; use fetch() for initial load and filters.

• ui/auth_state.svelte.ts

  Reactive state for cookie-based authentication.

  SPA auth pattern: prerendered static HTML served by Hono, no SvelteKit server for SSR sessions. On load, fetches GET /api/account/status which returns the current account (200) or 401 with optional bootstrap_available. Login sends username + password once, then a signed httpOnly cookie handles all subsequent requests.

  @example

  <script lang="ts"> import {AuthState, auth_state_context} from '@fuzdev/fuz_app/ui/auth_state.svelte.js'; const auth = new AuthState(); auth_state_context.set(auth); auth.check_session(); </script> {#if auth.verifying} <p>checking session…</p> {:else if auth.needs_bootstrap} <BootstrapForm /> {:else if !auth.verified} <LoginForm /> {:else} <p>logged in as {auth.account?.username}</p> <button onclick={() => auth.logout()}>logout</button> {/if}

• ui/BootstrapForm.svelte

• ui/ColumnLayout.svelte

• ui/ConfirmButton.svelte

  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

  <ConfirmButton onconfirm={() => delete_item(item.id)} title="delete item" disabled={deleting} > {#snippet children(_popover, _confirm)} {deleting ? 'deleting…' : 'delete'} {/snippet} </ConfirmButton>

  @example

  <!-- custom confirm button content --> <ConfirmButton onconfirm={handle_revoke} class="icon_button plain" title="revoke"> revoke {#snippet popover_button_content()}revoke{/snippet} </ConfirmButton>

• ui/Datatable.svelte

• ui/datatable.ts

  Types and constants for the Datatable component.

• ui/enter_advance.ts

  Svelte action that makes Enter advance to the next focusable form element (inputs and buttons), or activate the element if it's already the last one.

  @example

  <form {@attach enter_advance()}>

• ui/loadable.svelte.ts

  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

  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

  // 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'}), ); } }

• ui/LoginForm.svelte

• ui/LogoutButton.svelte

• ui/MenuLink.svelte

• ui/OpenSignupToggle.svelte

• ui/popover.svelte.ts

  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

  <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

  // 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();

• ui/PopoverButton.svelte

  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

  <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

  <!-- 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

• ui/position_helpers.ts

  CSS position calculation helpers for popovers and floating UI elements.

• ui/sidebar_state.svelte.ts

• ui/SignupForm.svelte

• ui/SurfaceExplorer.svelte

• ui/table_state.svelte.ts

  Reactive state for database table pagination and data fetching.

  Extends Loadable to manage paginated table data with column metadata, row deletion, and derived pagination controls.

  @example

  const table = new TableState(); await table.fetch('accounts', 0, 50); // pagination if (table.has_next) table.go_next(); await table.fetch(table.table_name, table.offset, table.limit); // deletion const deleted = await table.delete_row(table.rows[0]);

  @example

  <script lang="ts"> import {TableState} from '@fuzdev/fuz_app/ui/table_state.svelte.js'; const table = new TableState(); table.fetch('accounts'); </script> {#if table.loading} <p>loading…</p> {:else if table.error} <p>{table.error}</p> {:else} <p>showing {table.showing_start}–{table.showing_end} of {table.total}</p> {/if}

• ui/ui_fetch.ts

  Authenticated fetch helper for cookie-based session auth.

  Wraps the standard fetch with credentials: 'include' so cookies are sent with every request. Use for all API calls in apps that rely on @fuzdev/fuz_app session middleware.

• ui/ui_format.ts

  Formatting utilities for UI display.

  Value formatting, relative timestamps, uptime display, absolute timestamp formatting, and audit metadata formatting.