@better-forge/ui 0.1.0 → 0.1.1

package/src/components/ui/Toast.tsx

@@ -1,104 +1,104 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
-import { MODAL_Z_INDEX } from '../ModalShell'
-
-export type ToastTone = 'success' | 'error' | 'info'
-
-export interface ToastOptions {
-  /** Milliseconds before it disappears on its own; 0 keeps it until dismissed. Default 4000. */
-  duration?: number | undefined
-}
-
-export interface ToastApi {
-  success: (message: ReactNode, options?: ToastOptions) => number
-  error: (message: ReactNode, options?: ToastOptions) => number
-  info: (message: ReactNode, options?: ToastOptions) => number
-  dismiss: (id: number) => void
-}
-
-interface ToastEntry { id: number; tone: ToastTone; message: ReactNode; duration: number }
-
-export const TOAST_DURATION = 4000
-
-const noop: ToastApi = { success: () => 0, error: () => 0, info: () => 0, dismiss: () => {} }
-
-// Outside a provider (isolated component tests) toasts are silently dropped instead of throwing.
-const ToastContext = createContext<ToastApi>(noop)
-
-/** `const toast = useToast(); toast.success('Saved')`. The returned object is stable across renders. */
-export function useToast(): ToastApi {
-  return useContext(ToastContext)
-}
-
-const TONE_STYLE: Record<ToastTone, { icon: string; color: string }> = {
-  success: { icon: 'check_circle', color: 'var(--m3-up)' },
-  error:   { icon: 'error',        color: 'var(--m3-down)' },
-  info:    { icon: 'info',         color: 'var(--m3-on-surface-variant)' },
-}
-
-function ToastItem({ toast, onDismiss }: { toast: ToastEntry; onDismiss: (id: number) => void }) {
-  const [paused, setPaused] = useState(false)
-  const { icon, color } = TONE_STYLE[toast.tone]
-
-  useEffect(() => {
-    if (paused || toast.duration <= 0) return
-    const timer = setTimeout(() => onDismiss(toast.id), toast.duration)
-    return () => clearTimeout(timer)
-  }, [paused, toast.duration, toast.id, onDismiss])
-
-  return (
-    <div
-      role={toast.tone === 'error' ? 'alert' : 'status'}
-      data-tone={toast.tone}
-      className="admin-toast pointer-events-auto flex items-start gap-3 rounded-xl px-4 py-3 text-sm w-full"
-      style={{ background: 'var(--m3-surface-container-lowest)', color: 'var(--m3-on-surface)', border: '1px solid var(--m3-outline-variant)', borderLeft: `4px solid ${color}`, boxShadow: '0 8px 24px rgba(0,0,0,0.14)' }}
-      onMouseEnter={() => setPaused(true)}
-      onMouseLeave={() => setPaused(false)}
-      onFocus={() => setPaused(true)}
-      onBlur={() => setPaused(false)}
-    >
-      <span className="material-symbols-outlined flex-shrink-0 mt-px" aria-hidden="true" style={{ fontSize: '18px', color }}>{icon}</span>
-      <div className="flex-1 min-w-0 break-words">{toast.message}</div>
-      <button type="button" onClick={() => onDismiss(toast.id)} aria-label="Dismiss" className="btn-icon -my-1 -mr-2 w-7 h-7">
-        <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '16px' }}>close</span>
-      </button>
-    </div>
-  )
-}
-
-/** Mount once near the root; renders the bottom-right toast stack above every modal. */
-export function ToastProvider({ children }: { children: ReactNode }) {
-  const [toasts, setToasts] = useState<ToastEntry[]>([])
-  const nextId = useRef(1)
-
-  const dismiss = useCallback((id: number) => {
-    setToasts((current) => current.filter((toast) => toast.id !== id))
-  }, [])
-
-  const api = useMemo<ToastApi>(() => {
-    const push = (tone: ToastTone) => (message: ReactNode, options?: ToastOptions) => {
-      const id = nextId.current++
-      setToasts((current) => [...current.slice(-4), { id, tone, message, duration: options?.duration ?? TOAST_DURATION }])
-      return id
-    }
-    return { success: push('success'), error: push('error'), info: push('info'), dismiss }
-  }, [dismiss])
-
-  return (
-    <ToastContext.Provider value={api}>
-      {children}
-      {createPortal(
-        <div
-          role="region"
-          aria-live="polite"
-          aria-label="Notifications"
-          className="fixed bottom-4 right-4 left-4 sm:left-auto sm:w-96 flex flex-col items-end gap-2 pointer-events-none"
-          style={{ zIndex: MODAL_Z_INDEX + 1 }}
-        >
-          {toasts.map((toast) => <ToastItem key={toast.id} toast={toast} onDismiss={dismiss} />)}
-        </div>,
-        document.body,
-      )}
-    </ToastContext.Provider>
-  )
-}
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { MODAL_Z_INDEX } from '../ModalShell'
+
+export type ToastTone = 'success' | 'error' | 'info'
+
+export interface ToastOptions {
+  /** Milliseconds before it disappears on its own; 0 keeps it until dismissed. Default 4000. */
+  duration?: number | undefined
+}
+
+export interface ToastApi {
+  success: (message: ReactNode, options?: ToastOptions) => number
+  error: (message: ReactNode, options?: ToastOptions) => number
+  info: (message: ReactNode, options?: ToastOptions) => number
+  dismiss: (id: number) => void
+}
+
+interface ToastEntry { id: number; tone: ToastTone; message: ReactNode; duration: number }
+
+export const TOAST_DURATION = 4000
+
+const noop: ToastApi = { success: () => 0, error: () => 0, info: () => 0, dismiss: () => {} }
+
+// Outside a provider (isolated component tests) toasts are silently dropped instead of throwing.
+const ToastContext = createContext<ToastApi>(noop)
+
+/** `const toast = useToast(); toast.success('Saved')`. The returned object is stable across renders. */
+export function useToast(): ToastApi {
+  return useContext(ToastContext)
+}
+
+const TONE_STYLE: Record<ToastTone, { icon: string; color: string }> = {
+  success: { icon: 'check_circle', color: 'var(--m3-up)' },
+  error:   { icon: 'error',        color: 'var(--m3-down)' },
+  info:    { icon: 'info',         color: 'var(--m3-on-surface-variant)' },
+}
+
+function ToastItem({ toast, onDismiss }: { toast: ToastEntry; onDismiss: (id: number) => void }) {
+  const [paused, setPaused] = useState(false)
+  const { icon, color } = TONE_STYLE[toast.tone]
+
+  useEffect(() => {
+    if (paused || toast.duration <= 0) return
+    const timer = setTimeout(() => onDismiss(toast.id), toast.duration)
+    return () => clearTimeout(timer)
+  }, [paused, toast.duration, toast.id, onDismiss])
+
+  return (
+    <div
+      role={toast.tone === 'error' ? 'alert' : 'status'}
+      data-tone={toast.tone}
+      className="admin-toast pointer-events-auto flex items-start gap-3 rounded-xl px-4 py-3 text-sm w-full"
+      style={{ background: 'var(--m3-surface-container-lowest)', color: 'var(--m3-on-surface)', border: '1px solid var(--m3-outline-variant)', borderLeft: `4px solid ${color}`, boxShadow: '0 8px 24px rgba(0,0,0,0.14)' }}
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+      onFocus={() => setPaused(true)}
+      onBlur={() => setPaused(false)}
+    >
+      <span className="material-symbols-outlined flex-shrink-0 mt-px" aria-hidden="true" style={{ fontSize: '18px', color }}>{icon}</span>
+      <div className="flex-1 min-w-0 break-words">{toast.message}</div>
+      <button type="button" onClick={() => onDismiss(toast.id)} aria-label="Dismiss" className="btn-icon -my-1 -mr-2 w-7 h-7">
+        <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '16px' }}>close</span>
+      </button>
+    </div>
+  )
+}
+
+/** Mount once near the root; renders the bottom-right toast stack above every modal. */
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastEntry[]>([])
+  const nextId = useRef(1)
+
+  const dismiss = useCallback((id: number) => {
+    setToasts((current) => current.filter((toast) => toast.id !== id))
+  }, [])
+
+  const api = useMemo<ToastApi>(() => {
+    const push = (tone: ToastTone) => (message: ReactNode, options?: ToastOptions) => {
+      const id = nextId.current++
+      setToasts((current) => [...current.slice(-4), { id, tone, message, duration: options?.duration ?? TOAST_DURATION }])
+      return id
+    }
+    return { success: push('success'), error: push('error'), info: push('info'), dismiss }
+  }, [dismiss])
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      {createPortal(
+        <div
+          role="region"
+          aria-live="polite"
+          aria-label="Notifications"
+          className="fixed bottom-4 right-4 left-4 sm:left-auto sm:w-96 flex flex-col items-end gap-2 pointer-events-none"
+          style={{ zIndex: MODAL_Z_INDEX + 1 }}
+        >
+          {toasts.map((toast) => <ToastItem key={toast.id} toast={toast} onDismiss={dismiss} />)}
+        </div>,
+        document.body,
+      )}
+    </ToastContext.Provider>
+  )
+}

package/src/components/ui/index.ts

@@ -1,9 +1,9 @@
-export { Alert, type AlertTone } from './Alert'
-export { Field, type FieldControlProps } from './Field'
-export { PageContainer, PageHeader } from './PageHeader'
-export { QuickStartPanel, type QuickStartOption } from './QuickStartPanel'
-export { Pagination } from './Pagination'
-export { DataTable, DataTh, MAX_COLUMN_WIDTH, MIN_COLUMN_WIDTH, ResizeHandle, useTableSort, type SortDirection, type SortValue, type TableSort } from './DataTable'
-export { EmptyState, EmptyStateLink, EmptyTableRow, ErrorState, LoadingState } from './StateViews'
-export { Switch } from './Switch'
-export { TOAST_DURATION, ToastProvider, useToast, type ToastApi, type ToastOptions, type ToastTone } from './Toast'
+export { Alert, type AlertTone } from './Alert'
+export { Field, type FieldControlProps } from './Field'
+export { PageContainer, PageHeader } from './PageHeader'
+export { QuickStartPanel, type QuickStartOption } from './QuickStartPanel'
+export { Pagination } from './Pagination'
+export { DataTable, DataTh, MAX_COLUMN_WIDTH, MIN_COLUMN_WIDTH, ResizeHandle, useTableSort, type SortDirection, type SortValue, type TableSort } from './DataTable'
+export { EmptyState, EmptyStateLink, EmptyTableRow, ErrorState, LoadingState } from './StateViews'
+export { Switch } from './Switch'
+export { TOAST_DURATION, ToastProvider, useToast, type ToastApi, type ToastOptions, type ToastTone } from './Toast'

package/src/config.ts

@@ -1,46 +1,46 @@
-export interface UiConfig {
-  /** Names what the interface keeps in the browser: keys in storage and window events start with it (`<prefix>-dark-mode`). */
-  storagePrefix: string
-  /** Where the API answers. */
-  apiBase: string
-  /** The cookie the server puts the CSRF token in; it is sent back in a header on every change. */
-  csrfCookie: string
-  /** Where the interface is served, without a trailing slash (`/admin`): the pages to sign in and to change a password are below it. */
-  basePath: string
-  /** For a user who does not belong in this interface (say, one who may only view a public page): the address to send them to instead. */
-  redirectAfterSignIn?: (user: { role: string }) => string | null
-  /** The names and pictures the application is known by. */
-  brand: { name: string; logoLight: string; logoDark: string }
-  /** Wording that names things only the application knows. */
-  texts: {
-    /** What an API token can never manage, in the sentence "It cannot manage ..." (for example `users, single sign-on, vaults or other tokens`). */
-    tokenCannotManage: string
-    /** What a token with the vault permission can attach a vault secret to (`a job or channel`). */
-    tokenVaultTargets: string
-    /** Said when a test sign-in would create an account; `{user}` is replaced by the account. */
-    ssoNewAccount: string
-    /** Added to the single sign-on settings to say who may sign in; empty adds nothing. */
-    ssoSignInHint: string
-    /** The name of the application, as the interface calls it in sentences. */
-    appName: string
-    /** What uses the secrets kept in a vault (`jobs`), in sentences like "... that jobs can use". */
-    secretConsumers: string
-    /** An example of the path of a secret in an external vault. */
-    vaultPathExample: string
-  }
-}
-
-let current: UiConfig = { storagePrefix: 'better', apiBase: '/api/v1', csrfCookie: 'better_csrf', basePath: '', brand: { name: 'Better', logoLight: '', logoDark: '' }, texts: { ssoNewAccount: 'Creates the account {user} and links this identity-provider account to it.', ssoSignInHint: '', appName: 'This application', secretConsumers: 'the application', vaultPathExample: 'app/database', tokenCannotManage: 'users, single sign-on, vaults or other tokens', tokenVaultTargets: 'an object' } }
-
-/**
- * Tells the interface what application it is part of. Call it before anything is rendered; what is read from storage
- * is read on first use, after this.
- */
-export function configureUi(options: Partial<UiConfig>): void {
-  current = { ...current, ...options }
-}
-
-export const uiConfig = (): UiConfig => current
-
-/** The name the interface uses for `name` in storage and in window events. */
-export const storageKey = (name: string): string => `${current.storagePrefix}-${name}`
+export interface UiConfig {
+  /** Names what the interface keeps in the browser: keys in storage and window events start with it (`<prefix>-dark-mode`). */
+  storagePrefix: string
+  /** Where the API answers. */
+  apiBase: string
+  /** The cookie the server puts the CSRF token in; it is sent back in a header on every change. */
+  csrfCookie: string
+  /** Where the interface is served, without a trailing slash (`/admin`): the pages to sign in and to change a password are below it. */
+  basePath: string
+  /** For a user who does not belong in this interface (say, one who may only view a public page): the address to send them to instead. */
+  redirectAfterSignIn?: (user: { role: string }) => string | null
+  /** The names and pictures the application is known by. */
+  brand: { name: string; logoLight: string; logoDark: string }
+  /** Wording that names things only the application knows. */
+  texts: {
+    /** What an API token can never manage, in the sentence "It cannot manage ..." (for example `users, single sign-on, vaults or other tokens`). */
+    tokenCannotManage: string
+    /** What a token with the vault permission can attach a vault secret to (`a job or channel`). */
+    tokenVaultTargets: string
+    /** Said when a test sign-in would create an account; `{user}` is replaced by the account. */
+    ssoNewAccount: string
+    /** Added to the single sign-on settings to say who may sign in; empty adds nothing. */
+    ssoSignInHint: string
+    /** The name of the application, as the interface calls it in sentences. */
+    appName: string
+    /** What uses the secrets kept in a vault (`jobs`), in sentences like "... that jobs can use". */
+    secretConsumers: string
+    /** An example of the path of a secret in an external vault. */
+    vaultPathExample: string
+  }
+}
+
+let current: UiConfig = { storagePrefix: 'better', apiBase: '/api/v1', csrfCookie: 'better_csrf', basePath: '', brand: { name: 'Better', logoLight: '', logoDark: '' }, texts: { ssoNewAccount: 'Creates the account {user} and links this identity-provider account to it.', ssoSignInHint: '', appName: 'This application', secretConsumers: 'the application', vaultPathExample: 'app/database', tokenCannotManage: 'users, single sign-on, vaults or other tokens', tokenVaultTargets: 'an object' } }
+
+/**
+ * Tells the interface what application it is part of. Call it before anything is rendered; what is read from storage
+ * is read on first use, after this.
+ */
+export function configureUi(options: Partial<UiConfig>): void {
+  current = { ...current, ...options }
+}
+
+export const uiConfig = (): UiConfig => current
+
+/** The name the interface uses for `name` in storage and in window events. */
+export const storageKey = (name: string): string => `${current.storagePrefix}-${name}`

package/src/hooks/useDarkMode.ts

@@ -1,38 +1,38 @@
-import { useState, useEffect } from 'react'
-import { safeLocalStorage } from '@better-forge/contracts'
-import { storageKey } from '../config'
-
-// The public status app keeps a copy of this hook with the same behaviour, since it does not use this package.
-
-export function useDarkMode(): [boolean, () => void] {
-  const [isDark, setIsDark] = useState(() => {
-    if (typeof window === 'undefined') return false
-    const stored = safeLocalStorage.get(storageKey('dark-mode'))
-    if (stored !== null) return stored === 'true'
-    return window.matchMedia('(prefers-color-scheme: dark)').matches
-  })
-
-  useEffect(() => {
-    const html = document.documentElement
-    if (isDark) {
-      html.classList.add('dark')
-    } else {
-      html.classList.remove('dark')
-    }
-    safeLocalStorage.set(storageKey('dark-mode'), String(isDark))
-    // Every mounted instance (e.g. the sidebar toggle and a page that swaps its logo) listens for this, so one toggle
-    // updates them all.
-    window.dispatchEvent(new CustomEvent(storageKey('dark-mode-change'), { detail: isDark }))
-  }, [isDark])
-
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const dark = (e as CustomEvent<boolean>).detail
-      setIsDark(dark)
-    }
-    window.addEventListener(storageKey('dark-mode-change'), handler)
-    return () => window.removeEventListener(storageKey('dark-mode-change'), handler)
-  }, [])
-
-  return [isDark, () => setIsDark((d) => !d)]
-}
+import { useState, useEffect } from 'react'
+import { safeLocalStorage } from '@better-forge/contracts'
+import { storageKey } from '../config'
+
+// The public status app keeps a copy of this hook with the same behaviour, since it does not use this package.
+
+export function useDarkMode(): [boolean, () => void] {
+  const [isDark, setIsDark] = useState(() => {
+    if (typeof window === 'undefined') return false
+    const stored = safeLocalStorage.get(storageKey('dark-mode'))
+    if (stored !== null) return stored === 'true'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  })
+
+  useEffect(() => {
+    const html = document.documentElement
+    if (isDark) {
+      html.classList.add('dark')
+    } else {
+      html.classList.remove('dark')
+    }
+    safeLocalStorage.set(storageKey('dark-mode'), String(isDark))
+    // Every mounted instance (e.g. the sidebar toggle and a page that swaps its logo) listens for this, so one toggle
+    // updates them all.
+    window.dispatchEvent(new CustomEvent(storageKey('dark-mode-change'), { detail: isDark }))
+  }, [isDark])
+
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const dark = (e as CustomEvent<boolean>).detail
+      setIsDark(dark)
+    }
+    window.addEventListener(storageKey('dark-mode-change'), handler)
+    return () => window.removeEventListener(storageKey('dark-mode-change'), handler)
+  }, [])
+
+  return [isDark, () => setIsDark((d) => !d)]
+}

package/src/hooks/useDebouncedValue.ts

@@ -1,22 +1,22 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-/**
- * Returns `value` once it has stopped changing for `delay` ms, plus a `flush` that applies it immediately
- * (e.g. on Enter) or sets an explicit value (e.g. clearing a search box).
- */
-export function useDebouncedValue<T>(value: T, delay = 300): [T, (next?: T) => void] {
-  const [debounced, setDebounced] = useState(value)
-  const latest = useRef(value)
-
-  useEffect(() => {
-    latest.current = value
-    const timer = setTimeout(() => setDebounced(value), delay)
-    return () => clearTimeout(timer)
-  }, [value, delay])
-
-  const flush = useCallback((next?: T) => {
-    setDebounced(next === undefined ? latest.current : next)
-  }, [])
-
-  return [debounced, flush]
-}
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+/**
+ * Returns `value` once it has stopped changing for `delay` ms, plus a `flush` that applies it immediately
+ * (e.g. on Enter) or sets an explicit value (e.g. clearing a search box).
+ */
+export function useDebouncedValue<T>(value: T, delay = 300): [T, (next?: T) => void] {
+  const [debounced, setDebounced] = useState(value)
+  const latest = useRef(value)
+
+  useEffect(() => {
+    latest.current = value
+    const timer = setTimeout(() => setDebounced(value), delay)
+    return () => clearTimeout(timer)
+  }, [value, delay])
+
+  const flush = useCallback((next?: T) => {
+    setDebounced(next === undefined ? latest.current : next)
+  }, [])
+
+  return [debounced, flush]
+}

package/src/index.ts

@@ -1,42 +1,42 @@
-export * from './components/ui'
-export { ConfirmModal } from './components/ConfirmModal'
-export { ConfirmIdentityModal } from './components/ConfirmIdentityModal'
-export { ErrorBoundary, isChunkLoadError } from './components/ErrorBoundary'
-export { CopyButton } from './components/CopyButton'
-export { Modal, ModalFooter, ModalHeader, ModalShell, MODAL_BACKDROP, MODAL_Z_INDEX } from './components/ModalShell'
-export { SidePanelFrame, SideTabStrip, type SidePanelLayout, type SidePanelMeta, type SideTab } from './components/SidePanel'
-export { VaultTypePicker, VAULT_TYPE_ICONS, isReferenceVault, type VaultTypeValue } from './components/VaultTypePicker'
-export { useDebouncedValue } from './hooks/useDebouncedValue'
-export { compareVersions, parseChangelog, releasesBetween, summarizeRelease, type ReleaseGroup, type ReleaseItem, type ReleaseNotes, type ReleaseSummary } from './lib/changelog'
-export { configureUi, storageKey } from './config'
-export { useDarkMode } from './hooks/useDarkMode'
-export {
-  DATE_FORMATS, TIME_FORMATS, formatClock, formatDate, formatDateTime, formatDayMonth, getDatePrefs, setDatePrefs, useDatePrefs,
-  type DateFormat, type DatePrefs, type TimeFormat,
-} from './lib/dateFormat'
-export { uiConfig, type UiConfig } from './config'
-export { navigation } from './navigation'
-export {
-  ApiError, api, clearSession, enterAfterSignIn, getCurrentUser, isAuthenticated, mustChangePassword, setSession, type AuthUser,
-} from './api/client'
-export { WhatsNew, markWhatsNewSeen, pendingWhatsNew } from './components/WhatsNew'
-export { createAdminShell, type AdminShellConfig, type ExternalLink, type NavItem, type NavSection } from './shell/AdminShell'
-export { default as BackupsPage } from './pages/Backups'
-export { default as ChangePasswordPage } from './pages/ChangePassword'
-export { default as SettingsPage } from './pages/Settings'
-export { default as SsoConfirmPage } from './pages/SsoConfirm'
-export { default as SsoTestResultPage } from './pages/SsoTestResult'
-export { ResetTwoFactorModal } from './components/ResetTwoFactorModal'
-export { SingleSignOnModal } from './components/SingleSignOnModal'
-export {
-  ssoConfirmChannel, SsoConfirmationNote, isSsoConfirmationRequired, isSsoSession, useSsoConfirmation, type SsoConfirmationState,
-} from './components/SsoConfirmation'
-export { default as ApiTokensPage } from './pages/ApiTokens'
-export { default as AuditLogPage, type AuditEntities } from './pages/AuditLog'
-export { default as UsersPage, type UserRole, type UsersPageAction, type UsersPageProps } from './pages/Users'
-export { ConnectionStringSection, CredentialSection } from './components/CredentialSection'
-export { JSON_MAPPING_FIELDS, Note, SectionDivider, toggleInSet, type SecretSummary, type VaultPickerProps, type VaultSummary } from './components/formParts'
-export { default as VaultPage } from './pages/Vault'
-export { default as LoginPage, type LoginPageProps } from './pages/Login'
-export { default as SetupPage } from './pages/Setup'
-export { RequireAuth, RequirePasswordChanged, SetupGate, createRoleGuard } from './shell/guards'
+export * from './components/ui'
+export { ConfirmModal } from './components/ConfirmModal'
+export { ConfirmIdentityModal } from './components/ConfirmIdentityModal'
+export { ErrorBoundary, isChunkLoadError } from './components/ErrorBoundary'
+export { CopyButton } from './components/CopyButton'
+export { Modal, ModalFooter, ModalHeader, ModalShell, MODAL_BACKDROP, MODAL_Z_INDEX } from './components/ModalShell'
+export { SidePanelFrame, SideTabStrip, type SidePanelLayout, type SidePanelMeta, type SideTab } from './components/SidePanel'
+export { VaultTypePicker, VAULT_TYPE_ICONS, isReferenceVault, type VaultTypeValue } from './components/VaultTypePicker'
+export { useDebouncedValue } from './hooks/useDebouncedValue'
+export { compareVersions, parseChangelog, releasesBetween, summarizeRelease, type ReleaseGroup, type ReleaseItem, type ReleaseNotes, type ReleaseSummary } from './lib/changelog'
+export { configureUi, storageKey } from './config'
+export { useDarkMode } from './hooks/useDarkMode'
+export {
+  DATE_FORMATS, TIME_FORMATS, formatClock, formatDate, formatDateTime, formatDayMonth, getDatePrefs, setDatePrefs, useDatePrefs,
+  type DateFormat, type DatePrefs, type TimeFormat,
+} from './lib/dateFormat'
+export { uiConfig, type UiConfig } from './config'
+export { navigation } from './navigation'
+export {
+  ApiError, api, clearSession, enterAfterSignIn, getCurrentUser, isAuthenticated, mustChangePassword, setSession, type AuthUser,
+} from './api/client'
+export { WhatsNew, markWhatsNewSeen, pendingWhatsNew } from './components/WhatsNew'
+export { createAdminShell, type AdminShellConfig, type ExternalLink, type NavItem, type NavSection } from './shell/AdminShell'
+export { default as BackupsPage } from './pages/Backups'
+export { default as ChangePasswordPage } from './pages/ChangePassword'
+export { default as SettingsPage } from './pages/Settings'
+export { default as SsoConfirmPage } from './pages/SsoConfirm'
+export { default as SsoTestResultPage } from './pages/SsoTestResult'
+export { ResetTwoFactorModal } from './components/ResetTwoFactorModal'
+export { SingleSignOnModal } from './components/SingleSignOnModal'
+export {
+  ssoConfirmChannel, SsoConfirmationNote, isSsoConfirmationRequired, isSsoSession, useSsoConfirmation, type SsoConfirmationState,
+} from './components/SsoConfirmation'
+export { default as ApiTokensPage } from './pages/ApiTokens'
+export { default as AuditLogPage, type AuditEntities } from './pages/AuditLog'
+export { default as UsersPage, type UserRole, type UsersPageAction, type UsersPageProps } from './pages/Users'
+export { ConnectionStringSection, CredentialSection } from './components/CredentialSection'
+export { JSON_MAPPING_FIELDS, Note, SectionDivider, toggleInSet, type SecretSummary, type VaultPickerProps, type VaultSummary } from './components/formParts'
+export { default as VaultPage } from './pages/Vault'
+export { default as LoginPage, type LoginPageProps } from './pages/Login'
+export { default as SetupPage } from './pages/Setup'
+export { RequireAuth, RequirePasswordChanged, SetupGate, createRoleGuard } from './shell/guards'