From 13a1d462a5bbfe9d5b76997a61cb166fd39d38fc Mon Sep 17 00:00:00 2001
From: cswamy <101974014+cswamy@users.noreply.github.com>
Date: Wed, 7 Feb 2024 13:04:53 +0000
Subject: [PATCH 01/27] Fix for #148: open links in new tab (#157)

---
 demo/components_list.py            | 4 ++++
 src/npm-fastui/src/events.ts       | 6 +++++-
 src/npm-fastui/src/models.d.ts     | 1 +
 src/python-fastui/fastui/events.py | 1 +
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/demo/components_list.py b/demo/components_list.py
index 6e3622c1..b329c1b9 100644
--- a/demo/components_list.py
+++ b/demo/components_list.py
@@ -78,6 +78,10 @@ class Delivery(BaseModel):
                             components=[c.Text(text='Pydantic (External link)')],
                             on_click=GoToEvent(url='https://pydantic.dev'),
                         ),
+                        c.Link(
+                            components=[c.Text(text='FastUI repo (New tab)')],
+                            on_click=GoToEvent(url='https://github.com/pydantic/FastUI', target='_blank'),
+                        ),
                     ],
                 ),
             ],
diff --git a/src/npm-fastui/src/events.ts b/src/npm-fastui/src/events.ts
index 45e3de90..45300aac 100644
--- a/src/npm-fastui/src/events.ts
+++ b/src/npm-fastui/src/events.ts
@@ -35,7 +35,11 @@ export function useFireEvent(): { fireEvent: (event?: AnyEvent) => void } {
       }
       case 'go-to':
         if (event.url) {
-          location.goto(event.url)
+          if (event.target) {
+            window.open(event.url, event.target)
+          } else {
+            location.goto(event.url)
+          }
         }
         if (event.query) {
           location.setQuery(event.query)
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index a083f8b7..ff5ee388 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -141,6 +141,7 @@ export interface GoToEvent {
   query?: {
     [k: string]: string | number
   }
+  target?: '_blank'
   type: 'go-to'
 }
 export interface BackEvent {
diff --git a/src/python-fastui/fastui/events.py b/src/python-fastui/fastui/events.py
index f4a91c33..c572ef87 100644
--- a/src/python-fastui/fastui/events.py
+++ b/src/python-fastui/fastui/events.py
@@ -18,6 +18,7 @@ class GoToEvent(BaseModel):
     # can be a path or a full URL
     url: Union[str, None] = None
     query: Union[Dict[str, Union[str, float, None]], None] = None
+    target: Union[Literal['_blank'], None] = None
     type: Literal['go-to'] = 'go-to'
 
 

From 99dc253661e7e806dc13683419969f55e4f4a7bb Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Wed, 7 Feb 2024 13:07:27 +0000
Subject: [PATCH 02/27] Error improvements (#137)

---
 src/npm-fastui-bootstrap/src/index.tsx        |  6 +++
 src/npm-fastui-prebuilt/src/main.scss         | 11 ++++-
 src/npm-fastui-prebuilt/vite.config.ts        | 15 ++++++-
 src/npm-fastui/src/components/Custom.tsx      |  5 +--
 src/npm-fastui/src/components/error.tsx       | 24 +++++++++++
 src/npm-fastui/src/components/index.tsx       | 10 +++--
 src/npm-fastui/src/hooks/error.tsx            | 43 +++++++++++--------
 src/npm-fastui/src/index.tsx                  | 16 +++----
 src/npm-fastui/src/models.d.ts                |  9 ++++
 src/npm-fastui/src/tools.ts                   |  7 ++-
 .../fastui/components/__init__.py             | 19 ++++++++
 11 files changed, 126 insertions(+), 39 deletions(-)
 create mode 100644 src/npm-fastui/src/components/error.tsx

diff --git a/src/npm-fastui-bootstrap/src/index.tsx b/src/npm-fastui-bootstrap/src/index.tsx
index cf355c90..91f5fb27 100644
--- a/src/npm-fastui-bootstrap/src/index.tsx
+++ b/src/npm-fastui-bootstrap/src/index.tsx
@@ -137,5 +137,11 @@ export const classNameGenerator: ClassNameGenerator = ({
       }
     case 'Code':
       return 'rounded'
+    case 'Error':
+      if (props.statusCode === 502) {
+        return 'm-3 text-muted'
+      } else {
+        return 'alert alert-danger m-3'
+      }
   }
 }
diff --git a/src/npm-fastui-prebuilt/src/main.scss b/src/npm-fastui-prebuilt/src/main.scss
index 1a1e07fc..037ae1ac 100644
--- a/src/npm-fastui-prebuilt/src/main.scss
+++ b/src/npm-fastui-prebuilt/src/main.scss
@@ -3,7 +3,9 @@ $link-color: #0d6efd; // bootstrap primary
 
 @import 'bootstrap/scss/bootstrap';
 
-html, body, #root {
+html,
+body,
+#root {
   height: 100%;
 }
 
@@ -33,7 +35,12 @@ body {
   backdrop-filter: blur(8px);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   scroll-margin-top: 60px;
 }
 
diff --git a/src/npm-fastui-prebuilt/vite.config.ts b/src/npm-fastui-prebuilt/vite.config.ts
index c73c49a1..ee73325c 100644
--- a/src/npm-fastui-prebuilt/vite.config.ts
+++ b/src/npm-fastui-prebuilt/vite.config.ts
@@ -1,14 +1,25 @@
 import path from 'path'
 
 import react from '@vitejs/plugin-react-swc'
-import { defineConfig } from 'vite'
+import { defineConfig, HttpProxy } from 'vite'
 
 export default () => {
   const serverConfig = {
     host: true,
     port: 3000,
     proxy: {
-      '/api': 'http://localhost:8000',
+      '/api': {
+        target: 'http://localhost:8000',
+        configure: (proxy: HttpProxy.Server) => {
+          proxy.on('error', (err, _, res) => {
+            const { code } = err as any
+            if (code === 'ECONNREFUSED') {
+              res.writeHead(502, { 'content-type': 'text/plain' })
+              res.end('vite-proxy: Proxy connection refused')
+            }
+          })
+        },
+      },
     },
   }
 
diff --git a/src/npm-fastui/src/components/Custom.tsx b/src/npm-fastui/src/components/Custom.tsx
index 8ef1fb5f..f875fbaf 100644
--- a/src/npm-fastui/src/components/Custom.tsx
+++ b/src/npm-fastui/src/components/Custom.tsx
@@ -1,14 +1,13 @@
-import { FC, useContext } from 'react'
+import { FC } from 'react'
 
 import type { Custom } from '../models'
 
-import { ErrorContext } from '../hooks/error'
+import { DisplayError } from '../hooks/error'
 
 import { JsonComp } from './Json'
 
 export const CustomComp: FC<Custom> = (props) => {
   const { data, subType, library } = props
-  const { DisplayError } = useContext(ErrorContext)
 
   const description = [`The custom component "${subType}"`]
   if (library) {
diff --git a/src/npm-fastui/src/components/error.tsx b/src/npm-fastui/src/components/error.tsx
new file mode 100644
index 00000000..f078255c
--- /dev/null
+++ b/src/npm-fastui/src/components/error.tsx
@@ -0,0 +1,24 @@
+import { FC } from 'react'
+
+import type { Error } from '../models'
+
+import { useClassName } from '../hooks/className'
+
+export const ErrorComp: FC<Error> = (props) => {
+  const { title, description, statusCode, children } = props
+  return (
+    <>
+      <div className={useClassName(props)} role="alert">
+        {statusCode === 502 ? (
+          <>Backend server down.</>
+        ) : (
+          <>
+            <h4>{title}</h4>
+            {description}
+          </>
+        )}
+      </div>
+      {children}
+    </>
+  )
+}
diff --git a/src/npm-fastui/src/components/index.tsx b/src/npm-fastui/src/components/index.tsx
index bfccec08..7419b3ae 100644
--- a/src/npm-fastui/src/components/index.tsx
+++ b/src/npm-fastui/src/components/index.tsx
@@ -1,8 +1,8 @@
-import { useContext, FC } from 'react'
+import { FC } from 'react'
 
 import type { FastProps, Display, Text, ServerLoad, PageTitle, FireEvent } from '../models'
 
-import { ErrorContext } from '../hooks/error'
+import { DisplayError } from '../hooks/error'
 import { useCustomRender } from '../hooks/config'
 import { unreachable } from '../tools'
 
@@ -37,6 +37,7 @@ import { ImageComp } from './image'
 import { IframeComp } from './Iframe'
 import { VideoComp } from './video'
 import { FireEventComp } from './FireEvent'
+import { ErrorComp } from './error'
 import { CustomComp } from './Custom'
 
 // TODO some better way to export components
@@ -70,6 +71,7 @@ export {
   IframeComp,
   VideoComp,
   FireEventComp,
+  ErrorComp,
   CustomComp,
   LinkRender,
 }
@@ -85,8 +87,6 @@ export const AnyCompList: FC<{ propsList: FastProps[] }> = ({ propsList }) => (
 )
 
 export const AnyComp: FC<FastProps> = (props) => {
-  const { DisplayError } = useContext(ErrorContext)
-
   const CustomRenderComp = useCustomRender(props)
   if (CustomRenderComp) {
     return <CustomRenderComp />
@@ -155,6 +155,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <VideoComp {...props} />
       case 'FireEvent':
         return <FireEventComp {...props} />
+      case 'Error':
+        return <ErrorComp {...props} />
       case 'Custom':
         return <CustomComp {...props} />
       default:
diff --git a/src/npm-fastui/src/hooks/error.tsx b/src/npm-fastui/src/hooks/error.tsx
index 94a36256..aaa84f76 100644
--- a/src/npm-fastui/src/hooks/error.tsx
+++ b/src/npm-fastui/src/hooks/error.tsx
@@ -1,40 +1,49 @@
 import { createContext, FC, ReactNode, useCallback, useContext, useState } from 'react'
 
+import type { Error as ErrorProps } from '../models'
+
+import { ErrorComp } from '../components'
+
+import { useCustomRender } from './config'
+
 interface ErrorDetails {
   title: string
   description: string
+  statusCode?: number
 }
 
 interface ErrorDisplayProps extends ErrorDetails {
   children?: ReactNode
 }
 
-export type ErrorDisplayType = FC<ErrorDisplayProps>
-
 interface ErrorContextType {
   error: ErrorDetails | null
   setError: (error: ErrorDetails | null) => void
-  DisplayError: ErrorDisplayType
 }
 
-const DefaultErrorDisplay: ErrorDisplayType = ({ title, description, children }) => (
-  <>
-    <div className="alert alert-danger m-3" role="alert">
-      <h4>{title}</h4>
-      {description}
-    </div>
-    {children}
-  </>
-)
+export const DisplayError: FC<ErrorDisplayProps> = ({ title, description, statusCode, children }) => {
+  const props: ErrorProps = {
+    title,
+    description,
+    statusCode,
+    children,
+    type: 'Error',
+  }
+  const CustomRenderComp = useCustomRender(props)
+  if (CustomRenderComp) {
+    return <CustomRenderComp />
+  } else {
+    return <ErrorComp {...props} />
+  }
+}
 
 export const ErrorContext = createContext<ErrorContextType>({
   error: null,
   setError: () => null,
-  DisplayError: DefaultErrorDisplay,
 })
 
 const MaybeError: FC<{ children: ReactNode }> = ({ children }) => {
-  const { error, DisplayError } = useContext(ErrorContext)
+  const { error } = useContext(ErrorContext)
   if (error) {
     return <DisplayError {...error}>{children}</DisplayError>
   } else {
@@ -43,11 +52,10 @@ const MaybeError: FC<{ children: ReactNode }> = ({ children }) => {
 }
 
 interface Props {
-  DisplayError?: ErrorDisplayType
   children: ReactNode
 }
 
-export const ErrorContextProvider: FC<Props> = ({ DisplayError, children }) => {
+export const ErrorContextProvider: FC<Props> = ({ children }) => {
   const [error, setErrorState] = useState<ErrorDetails | null>(null)
 
   const setError = useCallback(
@@ -59,10 +67,9 @@ export const ErrorContextProvider: FC<Props> = ({ DisplayError, children }) => {
     },
     [setErrorState],
   )
-  const contextValue: ErrorContextType = { error, setError, DisplayError: DisplayError ?? DefaultErrorDisplay }
 
   return (
-    <ErrorContext.Provider value={contextValue}>
+    <ErrorContext.Provider value={{ error, setError }}>
       <MaybeError>{children}</MaybeError>
     </ErrorContext.Provider>
   )
diff --git a/src/npm-fastui/src/index.tsx b/src/npm-fastui/src/index.tsx
index 921854b5..005736c5 100644
--- a/src/npm-fastui/src/index.tsx
+++ b/src/npm-fastui/src/index.tsx
@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react'
 
-import type { ErrorDisplayType } from './hooks/error'
 import type { FastProps } from './models'
 
 import { LocationProvider } from './hooks/locationContext'
@@ -26,7 +25,6 @@ export interface FastUIProps {
   Spinner?: FC
   NotFound?: FC<{ url: string }>
   Transition?: FC<{ children: ReactNode; transitioning: boolean }>
-  DisplayError?: ErrorDisplayType
   classNameGenerator?: ClassNameGenerator
   customRender?: CustomRender
   // defaults to `process.env.NODE_ENV === 'development'
@@ -34,17 +32,17 @@ export interface FastUIProps {
 }
 
 export function FastUI(props: FastUIProps) {
-  const { classNameGenerator, DisplayError, devMode, ...rest } = props
+  const { classNameGenerator, devMode, ...rest } = props
   return (
-    <ErrorContextProvider DisplayError={DisplayError}>
-      <LocationProvider>
-        <ClassNameContext.Provider value={classNameGenerator ?? null}>
+    <ClassNameContext.Provider value={classNameGenerator ?? null}>
+      <ErrorContextProvider>
+        <LocationProvider>
           <ConfigContext.Provider value={rest}>
             <DevReload enabled={devMode} />
             <FastUIController />
           </ConfigContext.Provider>
-        </ClassNameContext.Provider>
-      </LocationProvider>
-    </ErrorContextProvider>
+        </LocationProvider>
+      </ErrorContextProvider>
+    </ClassNameContext.Provider>
   )
 }
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index ff5ee388..cf27c35c 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -25,6 +25,7 @@ export type FastProps =
   | Iframe
   | Video
   | FireEvent
+  | Error
   | Custom
   | Table
   | Pagination
@@ -243,6 +244,14 @@ export interface FireEvent {
   message?: string
   type: 'FireEvent'
 }
+export interface Error {
+  title: string
+  description: string
+  statusCode?: number
+  className?: ClassName
+  type: 'Error'
+  children?: ReactNode
+}
 export interface Custom {
   data: JsonData
   subType: string
diff --git a/src/npm-fastui/src/tools.ts b/src/npm-fastui/src/tools.ts
index 9a9b56b9..dd698f2f 100644
--- a/src/npm-fastui/src/tools.ts
+++ b/src/npm-fastui/src/tools.ts
@@ -12,7 +12,12 @@ export function useRequest(): (args: RequestArgs) => Promise<[number, any]> {
       try {
         return await request(args)
       } catch (e) {
-        setError({ title: 'Request Error', description: (e as any)?.message })
+        const title = 'Request Error'
+        if (e instanceof RequestError) {
+          setError({ title, description: e.message, statusCode: e.status })
+        } else {
+          setError({ title, description: (e as any)?.message })
+        }
         throw e
       }
     },
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index 863b2eca..d628a63e 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -47,6 +47,7 @@
     'Image',
     'Iframe',
     'FireEvent',
+    'Error',
     'Custom',
     'Table',
     'Pagination',
@@ -271,6 +272,23 @@ class FireEvent(_p.BaseModel, extra='forbid'):
     type: _t.Literal['FireEvent'] = 'FireEvent'
 
 
+class Error(_p.BaseModel, extra='forbid'):
+    title: str
+    description: str
+    status_code: _t.Union[int, None] = _p.Field(None, serialization_alias='statusCode')
+    class_name: _class_name.ClassNameField = None
+    type: _t.Literal['Error'] = 'Error'
+
+    @classmethod
+    def __get_pydantic_json_schema__(
+        cls, core_schema: _core_schema.CoreSchema, handler: _p.GetJsonSchemaHandler
+    ) -> _t.Any:
+        # add `children` to the schema so it can be used in the client
+        json_schema = handler(core_schema)
+        json_schema['properties']['children'] = {'tsType': 'ReactNode'}
+        return json_schema
+
+
 class Custom(_p.BaseModel, extra='forbid'):
     data: _types.JsonData
     sub_type: str = _p.Field(serialization_alias='subType')
@@ -301,6 +319,7 @@ class Custom(_p.BaseModel, extra='forbid'):
         Iframe,
         Video,
         FireEvent,
+        Error,
         Custom,
         Table,
         Pagination,

From 4037679efdc9566819cab390bb99ad7402c72c34 Mon Sep 17 00:00:00 2001
From: Dominik Vogt <44237223+Dejiah@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:25:08 +0100
Subject: [PATCH 03/27] Added textarea as form field (#139)

---
 demo/forms.py                                |  3 +-
 src/npm-fastui-bootstrap/src/index.tsx       |  2 ++
 src/npm-fastui/src/components/FormField.tsx  | 28 ++++++++++++++++
 src/npm-fastui/src/components/index.tsx      |  3 ++
 src/npm-fastui/src/models.d.ts               | 34 ++++++++++++++++++--
 src/python-fastui/fastui/components/forms.py | 12 ++++++-
 src/python-fastui/fastui/forms.py            |  7 +++-
 src/python-fastui/fastui/json_schema.py      | 23 ++++++++++++-
 src/python-fastui/tests/test_forms.py        | 25 +++++++++++++-
 9 files changed, 130 insertions(+), 7 deletions(-)

diff --git a/demo/forms.py b/demo/forms.py
index c94a60db..f0f7c7ef 100644
--- a/demo/forms.py
+++ b/demo/forms.py
@@ -9,7 +9,7 @@
 from fastui import AnyComponent, FastUI
 from fastui import components as c
 from fastui.events import GoToEvent, PageEvent
-from fastui.forms import FormFile, SelectSearchResponse, fastui_form
+from fastui.forms import FormFile, SelectSearchResponse, Textarea, fastui_form
 from httpx import AsyncClient
 from pydantic import BaseModel, EmailStr, Field, SecretStr, field_validator
 from pydantic_core import PydanticCustomError
@@ -143,6 +143,7 @@ class BigModel(BaseModel):
     name: str | None = Field(
         None, description='This field is not required, it must start with a capital letter if provided'
     )
+    info: Annotated[str | None, Textarea(rows=5)] = Field(None, description='Optional free text information about you.')
     profile_pic: Annotated[UploadFile, FormFile(accept='image/*', max_size=16_000)] = Field(
         description='Upload a profile picture, must not be more than 16kb'
     )
diff --git a/src/npm-fastui-bootstrap/src/index.tsx b/src/npm-fastui-bootstrap/src/index.tsx
index 91f5fb27..b4dfe0c1 100644
--- a/src/npm-fastui-bootstrap/src/index.tsx
+++ b/src/npm-fastui-bootstrap/src/index.tsx
@@ -66,11 +66,13 @@ export const classNameGenerator: ClassNameGenerator = ({
         }
       }
     case 'FormFieldInput':
+    case 'FormFieldTextarea':
     case 'FormFieldBoolean':
     case 'FormFieldSelect':
     case 'FormFieldSelectSearch':
     case 'FormFieldFile':
       switch (subElement) {
+        case 'textarea':
         case 'input':
           return {
             'form-control': type !== 'FormFieldBoolean',
diff --git a/src/npm-fastui/src/components/FormField.tsx b/src/npm-fastui/src/components/FormField.tsx
index 31eeca50..ea6375db 100644
--- a/src/npm-fastui/src/components/FormField.tsx
+++ b/src/npm-fastui/src/components/FormField.tsx
@@ -4,6 +4,7 @@ import Select, { StylesConfig } from 'react-select'
 
 import type {
   FormFieldInput,
+  FormFieldTextarea,
   FormFieldBoolean,
   FormFieldFile,
   FormFieldSelect,
@@ -44,6 +45,32 @@ export const FormFieldInputComp: FC<FormFieldInputProps> = (props) => {
   )
 }
 
+interface FormFieldTextareaProps extends FormFieldTextarea {
+  onChange?: PrivateOnChange
+}
+
+export const FormFieldTextareaComp: FC<FormFieldTextareaProps> = (props) => {
+  const { name, placeholder, required, locked, rows, cols } = props
+  return (
+    <div className={useClassName(props)}>
+      <Label {...props} />
+      <textarea
+        className={useClassName(props, { el: 'textarea' })}
+        defaultValue={props.initial}
+        id={inputId(props)}
+        rows={rows}
+        cols={cols}
+        name={name}
+        required={required}
+        disabled={locked}
+        placeholder={placeholder}
+        aria-describedby={descId(props)}
+      />
+      <ErrorDescription {...props} />
+    </div>
+  )
+}
+
 interface FormFieldBooleanProps extends FormFieldBoolean {
   onChange?: PrivateOnChange
 }
@@ -284,6 +311,7 @@ const Label: FC<FormFieldProps> = (props) => {
 
 export type FormFieldProps =
   | FormFieldInputProps
+  | FormFieldTextareaProps
   | FormFieldBooleanProps
   | FormFieldFileProps
   | FormFieldSelectProps
diff --git a/src/npm-fastui/src/components/index.tsx b/src/npm-fastui/src/components/index.tsx
index 7419b3ae..1cd84748 100644
--- a/src/npm-fastui/src/components/index.tsx
+++ b/src/npm-fastui/src/components/index.tsx
@@ -16,6 +16,7 @@ import { CodeComp } from './Code'
 import { FormComp } from './form'
 import {
   FormFieldInputComp,
+  FormFieldTextareaComp,
   FormFieldBooleanComp,
   FormFieldSelectComp,
   FormFieldSelectSearchComp,
@@ -125,6 +126,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <FormComp {...props} />
       case 'FormFieldInput':
         return <FormFieldInputComp {...props} />
+      case 'FormFieldTextarea':
+        return <FormFieldTextareaComp {...props} />
       case 'FormFieldBoolean':
         return <FormFieldBooleanComp {...props} />
       case 'FormFieldFile':
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index cf27c35c..7509b12f 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -33,6 +33,7 @@ export type FastProps =
   | Details
   | Form
   | FormFieldInput
+  | FormFieldTextarea
   | FormFieldBoolean
   | FormFieldFile
   | FormFieldSelect
@@ -314,7 +315,14 @@ export interface Form {
   submitTrigger?: PageEvent
   footer?: FastProps[]
   className?: ClassName
-  formFields: (FormFieldInput | FormFieldBoolean | FormFieldFile | FormFieldSelect | FormFieldSelectSearch)[]
+  formFields: (
+    | FormFieldInput
+    | FormFieldTextarea
+    | FormFieldBoolean
+    | FormFieldFile
+    | FormFieldSelect
+    | FormFieldSelectSearch
+  )[]
   type: 'Form'
 }
 export interface FormFieldInput {
@@ -331,6 +339,21 @@ export interface FormFieldInput {
   placeholder?: string
   type: 'FormFieldInput'
 }
+export interface FormFieldTextarea {
+  name: string
+  title: string[] | string
+  required?: boolean
+  error?: string
+  locked?: boolean
+  description?: string
+  displayMode?: 'default' | 'inline'
+  className?: ClassName
+  rows?: number
+  cols?: number
+  initial?: string
+  placeholder?: string
+  type: 'FormFieldTextarea'
+}
 export interface FormFieldBoolean {
   name: string
   title: string[] | string
@@ -409,5 +432,12 @@ export interface ModelForm {
   footer?: FastProps[]
   className?: ClassName
   type: 'ModelForm'
-  formFields: (FormFieldInput | FormFieldBoolean | FormFieldFile | FormFieldSelect | FormFieldSelectSearch)[]
+  formFields: (
+    | FormFieldInput
+    | FormFieldTextarea
+    | FormFieldBoolean
+    | FormFieldFile
+    | FormFieldSelect
+    | FormFieldSelectSearch
+  )[]
 }
diff --git a/src/python-fastui/fastui/components/forms.py b/src/python-fastui/fastui/components/forms.py
index 52310cdf..ee140aac 100644
--- a/src/python-fastui/fastui/components/forms.py
+++ b/src/python-fastui/fastui/components/forms.py
@@ -34,6 +34,14 @@ class FormFieldInput(BaseFormField):
     type: _t.Literal['FormFieldInput'] = 'FormFieldInput'
 
 
+class FormFieldTextarea(BaseFormField):
+    rows: _t.Union[int, None] = None
+    cols: _t.Union[int, None] = None
+    initial: _t.Union[str, None] = None
+    placeholder: _t.Union[str, None] = None
+    type: _t.Literal['FormFieldTextarea'] = 'FormFieldTextarea'
+
+
 class FormFieldBoolean(BaseFormField):
     initial: _t.Union[bool, None] = None
     mode: _t.Literal['checkbox', 'switch'] = 'checkbox'
@@ -65,7 +73,9 @@ class FormFieldSelectSearch(BaseFormField):
     type: _t.Literal['FormFieldSelectSearch'] = 'FormFieldSelectSearch'
 
 
-FormField = _t.Union[FormFieldInput, FormFieldBoolean, FormFieldFile, FormFieldSelect, FormFieldSelectSearch]
+FormField = _t.Union[
+    FormFieldInput, FormFieldTextarea, FormFieldBoolean, FormFieldFile, FormFieldSelect, FormFieldSelectSearch
+]
 
 
 class BaseForm(pydantic.BaseModel, ABC, defer_build=True, extra='forbid'):
diff --git a/src/python-fastui/fastui/forms.py b/src/python-fastui/fastui/forms.py
index caa97da1..759bf7c5 100644
--- a/src/python-fastui/fastui/forms.py
+++ b/src/python-fastui/fastui/forms.py
@@ -19,7 +19,7 @@
 if _t.TYPE_CHECKING:
     from . import json_schema
 
-__all__ = 'FastUIForm', 'fastui_form', 'FormFile', 'SelectSearchResponse', 'SelectOption'
+__all__ = 'FastUIForm', 'fastui_form', 'FormFile', 'Textarea', 'SelectSearchResponse', 'SelectOption'
 
 FormModel = _t.TypeVar('FormModel', bound=pydantic.BaseModel)
 
@@ -226,3 +226,8 @@ def name_to_loc(name: str) -> 'json_schema.SchemeLocation':
             else:
                 loc.append(part)
         return loc
+
+
+# Use uppercase for consistency with pydantic.Field, which is also a function
+def Textarea(rows: _t.Union[int, None] = None, cols: _t.Union[int, None] = None) -> _t.Any:  # N802
+    return pydantic.Field(json_schema_extra={'format': 'textarea', 'rows': rows, 'cols': cols})
diff --git a/src/python-fastui/fastui/json_schema.py b/src/python-fastui/fastui/json_schema.py
index 6bd68754..eb209e6f 100644
--- a/src/python-fastui/fastui/json_schema.py
+++ b/src/python-fastui/fastui/json_schema.py
@@ -12,6 +12,7 @@
     FormFieldInput,
     FormFieldSelect,
     FormFieldSelectSearch,
+    FormFieldTextarea,
     InputHtmlType,
 )
 
@@ -30,7 +31,7 @@ def model_json_schema_to_fields(model: _t.Type[BaseModel]) -> _t.List[FormField]
 
 
 JsonSchemaInput: _ta.TypeAlias = (
-    'JsonSchemaString | JsonSchemaStringEnum | JsonSchemaFile | JsonSchemaInt | JsonSchemaNumber'
+    'JsonSchemaString | JsonSchemaStringEnum | JsonSchemaFile | JsonSchemaTextarea | JsonSchemaInt | JsonSchemaNumber'
 )
 JsonSchemaField: _ta.TypeAlias = 'JsonSchemaInput | JsonSchemaBool'
 JsonSchemaConcrete: _ta.TypeAlias = 'JsonSchemaField | JsonSchemaArray | JsonSchemaObject'
@@ -69,6 +70,15 @@ class JsonSchemaFile(JsonSchemaBase, total=False):
     accept: str
 
 
+class JsonSchemaTextarea(JsonSchemaBase, total=False):
+    type: _ta.Required[_t.Literal['string']]
+    format: _ta.Required[_t.Literal['textarea']]
+    rows: int
+    cols: int
+    default: str
+    placeholder: str
+
+
 class JsonSchemaBool(JsonSchemaBase, total=False):
     type: _ta.Required[_t.Literal['boolean']]
     default: bool
@@ -236,6 +246,17 @@ def special_string_field(
                 accept=schema.get('accept'),
                 description=schema.get('description'),
             )
+        elif schema.get('format') == 'textarea':
+            return FormFieldTextarea(
+                name=name,
+                title=title,
+                required=required,
+                rows=schema.get('rows'),
+                cols=schema.get('cols'),
+                placeholder=schema.get('placeholder'),
+                initial=schema.get('initial'),
+                description=schema.get('description'),
+            )
         elif enum := schema.get('enum'):
             enum_labels = schema.get('enum_labels', {})
             return FormFieldSelect(
diff --git a/src/python-fastui/tests/test_forms.py b/src/python-fastui/tests/test_forms.py
index f818f8bc..b0919fad 100644
--- a/src/python-fastui/tests/test_forms.py
+++ b/src/python-fastui/tests/test_forms.py
@@ -5,7 +5,7 @@
 import pytest
 from fastapi import HTTPException
 from fastui import components
-from fastui.forms import FormFile, fastui_form
+from fastui.forms import FormFile, Textarea, fastui_form
 from pydantic import BaseModel
 from starlette.datastructures import FormData, Headers, UploadFile
 from typing_extensions import Annotated
@@ -446,3 +446,26 @@ class TupleOptional(BaseModel):
     m = components.ModelForm(model=TupleOptional, submit_url='/foo/')
     with pytest.raises(NotImplementedError, match='Tuples with optional fields are not yet supported'):
         m.model_dump(by_alias=True, exclude_none=True)
+
+
+class FormTextarea(BaseModel):
+    text: Annotated[str, Textarea()]
+
+
+def test_form_textarea_form_fields():
+    m = components.ModelForm(model=FormTextarea, submit_url='/foobar/')
+
+    assert m.model_dump(by_alias=True, exclude_none=True) == {
+        'submitUrl': '/foobar/',
+        'method': 'POST',
+        'type': 'ModelForm',
+        'formFields': [
+            {
+                'name': 'text',
+                'title': ['Text'],
+                'required': True,
+                'locked': False,
+                'type': 'FormFieldTextarea',
+            }
+        ],
+    }

From 58304329c4cded55aaa43ff6404055bead4d7253 Mon Sep 17 00:00:00 2001
From: Espen Albert <EspenAlbert@users.noreply.github.com>
Date: Thu, 8 Feb 2024 18:13:40 +0700
Subject: [PATCH 04/27] fix: support finding initial value from a list of
 values (#161)

---
 src/npm-fastui/src/components/FormField.tsx  | 13 ++++++++++++-
 src/npm-fastui/src/models.d.ts               |  2 +-
 src/python-fastui/fastui/components/forms.py |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/npm-fastui/src/components/FormField.tsx b/src/npm-fastui/src/components/FormField.tsx
index ea6375db..0e67959b 100644
--- a/src/npm-fastui/src/components/FormField.tsx
+++ b/src/npm-fastui/src/components/FormField.tsx
@@ -174,6 +174,12 @@ export const FormFieldSelectReactComp: FC<FormFieldSelectProps> = (props) => {
 
   const className = useClassName(props)
   const classNameSelectReact = useClassName(props, { el: 'select-react' })
+  let value
+  if (Array.isArray(initial)) {
+    value = findDefaultArray(options, initial)
+  } else {
+    value = findDefault(options, initial)
+  }
 
   const reactSelectOnChanged = () => {
     // TODO this is a hack to wait for the input to be updated, can we do better?
@@ -191,7 +197,7 @@ export const FormFieldSelectReactComp: FC<FormFieldSelectProps> = (props) => {
         className={classNameSelectReact}
         isMulti={multiple ?? false}
         isClearable
-        defaultValue={findDefault(options, initial)}
+        defaultValue={value}
         name={name}
         required={required}
         isDisabled={locked}
@@ -220,6 +226,11 @@ const SelectOptionComp: FC<{ option: SelectOption | SelectGroup }> = ({ option }
   }
 }
 
+function findDefaultArray(options: SelectOptions, value: string[]): SelectOption[] {
+  const foundValues = value.map((v) => findDefault(options, v))
+  return foundValues.filter((v) => v) as SelectOption[]
+}
+
 function findDefault(options: SelectOptions, value?: string): SelectOption | undefined {
   for (const option of options) {
     if ('options' in option) {
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 7509b12f..1e370f1a 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -391,7 +391,7 @@ export interface FormFieldSelect {
   className?: ClassName
   options: SelectOptions
   multiple?: boolean
-  initial?: string
+  initial?: string[] | string
   vanilla?: boolean
   placeholder?: string
   type: 'FormFieldSelect'
diff --git a/src/python-fastui/fastui/components/forms.py b/src/python-fastui/fastui/components/forms.py
index ee140aac..539fb6b5 100644
--- a/src/python-fastui/fastui/components/forms.py
+++ b/src/python-fastui/fastui/components/forms.py
@@ -57,7 +57,7 @@ class FormFieldFile(BaseFormField):
 class FormFieldSelect(BaseFormField):
     options: forms.SelectOptions
     multiple: _t.Union[bool, None] = None
-    initial: _t.Union[str, None] = None
+    initial: _t.Union[_t.List[str], str, None] = None
     vanilla: _t.Union[bool, None] = None
     placeholder: _t.Union[str, None] = None
     type: _t.Literal['FormFieldSelect'] = 'FormFieldSelect'

From c3cacbb0361b688183522aa5e1d4856bcccfdc15 Mon Sep 17 00:00:00 2001
From: sergue1 <serguei.strigo@gmail.com>
Date: Thu, 8 Feb 2024 12:46:05 +0100
Subject: [PATCH 05/27] Add named styles to buttons (#108)

Co-authored-by: Samuel Colvin <s@muelcolvin.com>
---
 demo/components_list.py                         | 2 ++
 src/npm-fastui-bootstrap/src/index.tsx          | 7 ++++++-
 src/npm-fastui-prebuilt/src/main.scss           | 1 +
 src/npm-fastui/src/models.d.ts                  | 2 ++
 src/python-fastui/fastui/class_name.py          | 5 ++++-
 src/python-fastui/fastui/components/__init__.py | 1 +
 6 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/demo/components_list.py b/demo/components_list.py
index b329c1b9..25c9ecf9 100644
--- a/demo/components_list.py
+++ b/demo/components_list.py
@@ -92,6 +92,8 @@ class Delivery(BaseModel):
                 c.Heading(text='Button and Modal', level=2),
                 c.Paragraph(text='The button below will open a modal with static content.'),
                 c.Button(text='Show Static Modal', on_click=PageEvent(name='static-modal')),
+                c.Button(text='Secondary Button', named_style='secondary', class_name='+ ms-2'),
+                c.Button(text='Warning Button', named_style='warning', class_name='+ ms-2'),
                 c.Modal(
                     title='Static Modal',
                     body=[c.Paragraph(text='This is some static content that was set when the modal was defined.')],
diff --git a/src/npm-fastui-bootstrap/src/index.tsx b/src/npm-fastui-bootstrap/src/index.tsx
index b4dfe0c1..b2fef51f 100644
--- a/src/npm-fastui-bootstrap/src/index.tsx
+++ b/src/npm-fastui-bootstrap/src/index.tsx
@@ -31,7 +31,12 @@ export const classNameGenerator: ClassNameGenerator = ({
     case 'Page':
       return 'container mt-80 mb-3 page'
     case 'Button':
-      return 'btn btn-primary'
+      return {
+        btn: true,
+        'btn-primary': !props.namedStyle || props.namedStyle === 'primary',
+        'btn-secondary': props.namedStyle === 'secondary',
+        'btn-warning': props.namedStyle === 'warning',
+      }
     case 'Table':
       switch (subElement) {
         case 'no-data-message':
diff --git a/src/npm-fastui-prebuilt/src/main.scss b/src/npm-fastui-prebuilt/src/main.scss
index 037ae1ac..07cbace6 100644
--- a/src/npm-fastui-prebuilt/src/main.scss
+++ b/src/npm-fastui-prebuilt/src/main.scss
@@ -1,4 +1,5 @@
 $primary: black;
+$secondary: #666;
 $link-color: #0d6efd; // bootstrap primary
 
 @import 'bootstrap/scss/bootstrap';
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 1e370f1a..461118fe 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -55,6 +55,7 @@ export type JsonData =
       [k: string]: JsonData
     }
 export type AnyEvent = PageEvent | GoToEvent | BackEvent | AuthEvent
+export type NamedStyle = 'primary' | 'secondary' | 'warning'
 export type DisplayMode =
   | 'auto'
   | 'plain'
@@ -125,6 +126,7 @@ export interface Button {
   text: string
   onClick?: AnyEvent
   htmlType?: 'button' | 'reset' | 'submit'
+  namedStyle?: NamedStyle
   className?: ClassName
   type: 'Button'
 }
diff --git a/src/python-fastui/fastui/class_name.py b/src/python-fastui/fastui/class_name.py
index d37e58b4..7dbedc0d 100644
--- a/src/python-fastui/fastui/class_name.py
+++ b/src/python-fastui/fastui/class_name.py
@@ -1,8 +1,11 @@
 # could be renamed to something general if there's more to add
-from typing import Dict, List, Union
+from typing import Dict, List, Literal, Union
 
 from pydantic import Field
 from typing_extensions import Annotated, TypeAliasType
 
 ClassName = TypeAliasType('ClassName', Union[str, List['ClassName'], Dict[str, Union[bool, None]], None])
 ClassNameField = Annotated[ClassName, Field(serialization_alias='className')]
+
+NamedStyle = TypeAliasType('NamedStyle', Union[Literal['primary', 'secondary', 'warning'], None])
+NamedStyleField = Annotated[NamedStyle, Field(serialization_alias='namedStyle')]
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index d628a63e..2969a05f 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -153,6 +153,7 @@ class Button(_p.BaseModel, extra='forbid'):
     html_type: _t.Union[_t.Literal['button', 'reset', 'submit'], None] = _p.Field(
         default=None, serialization_alias='htmlType'
     )
+    named_style: _class_name.NamedStyleField = None
     class_name: _class_name.ClassNameField = None
     type: _t.Literal['Button'] = 'Button'
 

From bb4fb360b7c2ccbae290bcd6a89d33813f6f59bb Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 9 Feb 2024 13:30:18 +0000
Subject: [PATCH 06/27] updating dependencies (#175)

---
 .github/workflows/ci.yml                     |  4 +++-
 src/python-fastui/requirements/pyproject.txt | 20 ++++++++--------
 src/python-fastui/requirements/test.txt      | 24 ++++++++++----------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 325d8e55..db691e08 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -59,9 +59,11 @@ jobs:
 
       - run: pip install -r src/python-fastui/requirements/test.txt
       - run: pip install -r src/python-fastui/requirements/pyproject.txt
-      - run: pip install src/python-fastui
+      - run: pip install -e src/python-fastui
 
       - run: coverage run -m pytest src
+      # display coverage and fail if it's below 80%, which shouldn't happen
+      - run: coverage report --fail-under=80
 
       # test demo on 3.11 and 3.12, these tests are intentionally omitted from coverage
       - if: matrix.python-version == '3.11' || matrix.python-version == '3.12'
diff --git a/src/python-fastui/requirements/pyproject.txt b/src/python-fastui/requirements/pyproject.txt
index 3df57e4c..71255820 100644
--- a/src/python-fastui/requirements/pyproject.txt
+++ b/src/python-fastui/requirements/pyproject.txt
@@ -6,34 +6,32 @@
 #
 annotated-types==0.6.0
     # via pydantic
-anyio==3.7.1
-    # via
-    #   fastapi
-    #   starlette
-dnspython==2.4.2
+anyio==4.2.0
+    # via starlette
+dnspython==2.5.0
     # via email-validator
 email-validator==2.1.0.post1
     # via pydantic
-fastapi==0.104.1
+fastapi==0.109.2
     # via fastui (src/python-fastui/pyproject.toml)
 idna==3.6
     # via
     #   anyio
     #   email-validator
-pydantic==2.5.2
+pydantic==2.6.1
     # via
     #   fastapi
     #   fastui (src/python-fastui/pyproject.toml)
     #   pydantic
-pydantic-core==2.14.5
+pydantic-core==2.16.2
     # via pydantic
-python-multipart==0.0.6
+python-multipart==0.0.7
     # via fastui (src/python-fastui/pyproject.toml)
 sniffio==1.3.0
     # via anyio
-starlette==0.27.0
+starlette==0.36.3
     # via fastapi
-typing-extensions==4.8.0
+typing-extensions==4.9.0
     # via
     #   fastapi
     #   pydantic
diff --git a/src/python-fastui/requirements/test.txt b/src/python-fastui/requirements/test.txt
index 92c8692c..12d55713 100644
--- a/src/python-fastui/requirements/test.txt
+++ b/src/python-fastui/requirements/test.txt
@@ -4,21 +4,21 @@
 #
 #    pip-compile --constraint=src/python-fastui/requirements/lint.txt --constraint=src/python-fastui/requirements/pyproject.txt --output-file=src/python-fastui/requirements/test.txt --strip-extras src/python-fastui/requirements/test.in
 #
-aiohttp==3.9.1
+aiohttp==3.9.3
     # via libsql-client
 aiosignal==1.3.1
     # via aiohttp
-anyio==3.7.1
+anyio==4.2.0
     # via
     #   -c src/python-fastui/requirements/pyproject.txt
     #   httpx
-attrs==23.1.0
+attrs==23.2.0
     # via aiohttp
-certifi==2023.11.17
+certifi==2024.2.2
     # via
     #   httpcore
     #   httpx
-coverage==7.3.2
+coverage==7.4.1
     # via -r src/python-fastui/requirements/test.in
 dirty-equals==0.7.1.post0
     # via -r src/python-fastui/requirements/test.in
@@ -30,7 +30,7 @@ h11==0.14.0
     # via httpcore
 httpcore==1.0.2
     # via httpx
-httpx==0.25.2
+httpx==0.26.0
     # via -r src/python-fastui/requirements/test.in
 idna==3.6
     # via
@@ -46,26 +46,26 @@ markdown-it-py==3.0.0
     # via rich
 mdurl==0.1.2
     # via markdown-it-py
-multidict==6.0.4
+multidict==6.0.5
     # via
     #   aiohttp
     #   yarl
 packaging==23.2
     # via pytest
-pluggy==1.3.0
+pluggy==1.4.0
     # via pytest
 pygments==2.17.2
     # via rich
-pytest==7.4.3
+pytest==7.4.4
     # via
     #   -r src/python-fastui/requirements/test.in
     #   pytest-asyncio
     #   pytest-pretty
-pytest-asyncio==0.23.2
+pytest-asyncio==0.23.4
     # via -r src/python-fastui/requirements/test.in
 pytest-pretty==1.2.0
     # via -r src/python-fastui/requirements/test.in
-pytz==2023.3.post1
+pytz==2024.1
     # via dirty-equals
 rich==13.7.0
     # via pytest-pretty
@@ -74,7 +74,7 @@ sniffio==1.3.0
     #   -c src/python-fastui/requirements/pyproject.txt
     #   anyio
     #   httpx
-typing-extensions==4.8.0
+typing-extensions==4.9.0
     # via
     #   -c src/python-fastui/requirements/pyproject.txt
     #   libsql-client

From 9c2ce0ffa7c0cea798147c86d3a6ae7dc2c8e541 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 9 Feb 2024 17:58:48 +0000
Subject: [PATCH 07/27] allow `APIRootUrl`, `APIPathMode` and `APIPathStrip` to
 be set in prebuilt (#176)

---
 src/npm-fastui-prebuilt/src/App.tsx           |  8 ++++++-
 src/npm-fastui/src/components/ServerLoad.tsx  | 11 +++++----
 src/npm-fastui/src/dev.tsx                    |  6 ++---
 src/npm-fastui/src/hooks/config.ts            |  2 +-
 src/npm-fastui/src/index.tsx                  |  6 +++--
 src/python-fastui/fastui/__init__.py          | 21 +++++++++++++++-
 src/python-fastui/tests/test_prebuilt_html.py | 24 +++++++++++++++++++
 7 files changed, 66 insertions(+), 12 deletions(-)
 create mode 100644 src/python-fastui/tests/test_prebuilt_html.py

diff --git a/src/npm-fastui-prebuilt/src/App.tsx b/src/npm-fastui-prebuilt/src/App.tsx
index 398cfb5c..7fb00135 100644
--- a/src/npm-fastui-prebuilt/src/App.tsx
+++ b/src/npm-fastui-prebuilt/src/App.tsx
@@ -5,7 +5,9 @@ import { FC, ReactNode } from 'react'
 export default function App() {
   return (
     <FastUI
-      rootUrl="/api"
+      APIRootUrl={getMetaContent('fastui:APIRootUrl') || '/api'}
+      APIPathMode={getMetaContent('fastui:APIPathMode') as undefined | 'append' | 'query'}
+      APIPathStrip={getMetaContent('fastui:APIPathStrip')}
       classNameGenerator={bootstrap.classNameGenerator}
       customRender={customRender}
       NotFound={NotFound}
@@ -15,6 +17,10 @@ export default function App() {
   )
 }
 
+function getMetaContent(name: string): string | undefined {
+  return document.querySelector(`meta[name="${name}"]`)?.getAttribute('content') || undefined
+}
+
 const NotFound = ({ url }: { url: string }) => (
   <div className="container mt-5 text-center">
     <h1>Page not found</h1>
diff --git a/src/npm-fastui/src/components/ServerLoad.tsx b/src/npm-fastui/src/components/ServerLoad.tsx
index 81ca1a04..062c821b 100644
--- a/src/npm-fastui/src/components/ServerLoad.tsx
+++ b/src/npm-fastui/src/components/ServerLoad.tsx
@@ -123,14 +123,17 @@ const Render: FC<{ propsList: FastProps[] | null; notFoundUrl?: string; transiti
 }
 
 function useServerUrl(path: string): string {
-  const { rootUrl, pathSendMode } = useContext(ConfigContext)
+  const { APIRootUrl, APIPathMode, APIPathStrip } = useContext(ConfigContext)
+  if (APIPathStrip && path.startsWith(APIPathStrip)) {
+    path = path.slice(APIPathStrip.length)
+  }
   const applyContext = useEventContext()
   const requestPath = applyContext(path)
 
-  if (pathSendMode === 'query') {
-    return `${rootUrl}?path=${encodeURIComponent(requestPath)}`
+  if (APIPathMode === 'query') {
+    return `${APIRootUrl}?path=${encodeURIComponent(requestPath)}`
   } else {
-    return rootUrl + requestPath
+    return APIRootUrl + requestPath
   }
 }
 
diff --git a/src/npm-fastui/src/dev.tsx b/src/npm-fastui/src/dev.tsx
index 20f2a007..1cf73d17 100644
--- a/src/npm-fastui/src/dev.tsx
+++ b/src/npm-fastui/src/dev.tsx
@@ -21,7 +21,7 @@ export const DevReload: FC<{ enabled?: boolean }> = ({ enabled }) => {
 
 const DevReloadActive = () => {
   const { setError } = useContext(ErrorContext)
-  const { rootUrl } = useContext(ConfigContext)
+  const { APIRootUrl } = useContext(ConfigContext)
 
   useEffect(() => {
     let listening = true
@@ -36,7 +36,7 @@ const DevReloadActive = () => {
         if (!listening || failCount >= 5) {
           return count
         }
-        const response = await fetch(rootUrl + '/__dev__/reload')
+        const response = await fetch(APIRootUrl + '/__dev__/reload')
         count++
         console.debug(`dev reload connected ${count}...`)
         // if the response is okay, and we previously failed, clear error
@@ -78,6 +78,6 @@ const DevReloadActive = () => {
         devConnected = false
       }
     }
-  }, [setError, rootUrl])
+  }, [setError, APIRootUrl])
   return <></>
 }
diff --git a/src/npm-fastui/src/hooks/config.ts b/src/npm-fastui/src/hooks/config.ts
index ef3eeaed..dba0ce5b 100644
--- a/src/npm-fastui/src/hooks/config.ts
+++ b/src/npm-fastui/src/hooks/config.ts
@@ -5,7 +5,7 @@ import type { FastProps } from '../models'
 
 type Config = Omit<FastUIProps, 'DisplayError' | 'classNameGenerator' | 'devMode'>
 
-export const ConfigContext = createContext<Config>({ rootUrl: '' })
+export const ConfigContext = createContext<Config>({ APIRootUrl: '' })
 
 export const useCustomRender = (props: FastProps): FC | void => {
   const { customRender } = useContext(ConfigContext)
diff --git a/src/npm-fastui/src/index.tsx b/src/npm-fastui/src/index.tsx
index 005736c5..6bb8db40 100644
--- a/src/npm-fastui/src/index.tsx
+++ b/src/npm-fastui/src/index.tsx
@@ -19,9 +19,11 @@ export { EventContextProvider } from './hooks/eventContext'
 export type CustomRender = (props: FastProps) => FC | void
 
 export interface FastUIProps {
-  rootUrl: string
+  APIRootUrl: string
   // defaults to 'append'
-  pathSendMode?: 'append' | 'query'
+  APIPathMode?: 'append' | 'query'
+  // start of the path to remove from the URL before making a request to the API
+  APIPathStrip?: string
   Spinner?: FC
   NotFound?: FC<{ url: string }>
   Transition?: FC<{ children: ReactNode; transitioning: boolean }>
diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index 2f1e6299..8ace8814 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -27,16 +27,34 @@ def coerce_to_list(cls, v):
 _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'
 
 
-def prebuilt_html(title: str = ''):
+def prebuilt_html(
+    *,
+    title: str = '',
+    api_root_url: _t.Union[str, None] = None,
+    api_path_mode: _t.Union[_t.Literal['append', 'query'], None] = None,
+    api_path_strip: _t.Union[str, None] = None,
+) -> str:
     """
     Returns a simple HTML page which includes the FastUI react frontend, loaded from https://www.jsdelivr.com/.
 
     Arguments:
         title: page title
+        api_root_url: the root URL of the API backend, which will be used to get data, default is '/api'.
+        api_path_mode: whether to append the page path to the root API request URL, or use it as a query parameter,
+            default is 'append'.
+        api_path_strip: string to remove from the start of the page path before making the API request.
 
     Returns:
         HTML string which can be returned by an endpoint to serve the FastUI frontend.
     """
+    meta_extra = []
+    if api_root_url is not None:
+        meta_extra.append(f'<meta name="fastui:APIRootUrl" content="{api_root_url}" />')
+    if api_path_mode is not None:
+        meta_extra.append(f'<meta name="fastui:APIPathMode" content="{api_path_mode}" />')
+    if api_path_strip is not None:
+        meta_extra.append(f'<meta name="fastui:APIPathStrip" content="{api_path_strip}" />')
+    meta_extra_str = '\n    '.join(meta_extra)
     # language=HTML
     return f"""\
 <!doctype html>
@@ -47,6 +65,7 @@ def prebuilt_html(title: str = ''):
     <title>{title}</title>
     <script type="module" crossorigin src="{_PREBUILT_CDN_URL}/index.js"></script>
     <link rel="stylesheet" crossorigin href="{_PREBUILT_CDN_URL}/index.css">
+    {meta_extra_str}
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/python-fastui/tests/test_prebuilt_html.py b/src/python-fastui/tests/test_prebuilt_html.py
new file mode 100644
index 00000000..80314b38
--- /dev/null
+++ b/src/python-fastui/tests/test_prebuilt_html.py
@@ -0,0 +1,24 @@
+from fastui import prebuilt_html
+
+
+def test_prebuilt_html():
+    html = prebuilt_html()
+    assert html.startswith('<!doctype html>')
+    assert 'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt' in html
+    assert '<title></title>' in html
+    assert '<meta name="fastui:APIRootUrl"' not in html
+    assert '<meta name="fastui:APIPathMode"' not in html
+    assert '<meta name="fastui:APIPathStrip"' not in html
+
+
+def test_prebuilt_html_meta_tags():
+    html = prebuilt_html(
+        title='Test Title',
+        api_root_url='/admin/api',
+        api_path_mode='query',
+        api_path_strip='/admin',
+    )
+    assert '<title>Test Title</title>' in html
+    assert '<meta name="fastui:APIRootUrl" content="/admin/api" />' in html
+    assert '<meta name="fastui:APIPathMode" content="query" />' in html
+    assert '<meta name="fastui:APIPathStrip" content="/admin" />' in html

From 8be1d9ea28894d3f4d0f5a4e95908f802bcb7125 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 9 Feb 2024 18:08:39 +0000
Subject: [PATCH 08/27] Bump vite from 5.0.7 to 5.0.12 (#179)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json                    | 74 ++++------------------------
 src/npm-fastui-prebuilt/package.json |  2 +-
 2 files changed, 10 insertions(+), 66 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 3b287145..b2c5918a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6702,14 +6702,13 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.0.tgz",
-      "integrity": "sha512-ESJVM59mdyGpsiNAeHQOR/0fqNoOyWPYesFto8FFZugfmhdHx8Fzd8sF3Q/xkVhZsyOxHfdM7ieiVAorI9RjFw==",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
+      "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.19.3",
-        "postcss": "^8.4.31",
+        "postcss": "^8.4.32",
         "rollup": "^4.2.0"
       },
       "bin": {
@@ -6950,7 +6949,7 @@
     },
     "src/npm-fastui": {
       "name": "@pydantic/fastui",
-      "version": "0.0.14",
+      "version": "0.0.15",
       "license": "MIT",
       "dependencies": {
         "react": "^18.2.0",
@@ -6966,7 +6965,7 @@
     },
     "src/npm-fastui-bootstrap": {
       "name": "@pydantic/fastui-bootstrap",
-      "version": "0.0.14",
+      "version": "0.0.15",
       "license": "MIT",
       "dependencies": {
         "bootstrap": "^5.3.2",
@@ -6976,71 +6975,16 @@
         "sass": "^1.69.5"
       },
       "peerDependencies": {
-        "@pydantic/fastui": "0.0.14"
+        "@pydantic/fastui": "0.0.15"
       }
     },
     "src/npm-fastui-prebuilt": {
       "name": "@pydantic/fastui-prebuilt",
-      "version": "0.0.14",
+      "version": "0.0.15",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-react-swc": "^3.3.2",
-        "vite": "^5.0.7"
-      }
-    },
-    "src/npm-fastui-prebuilt/node_modules/vite": {
-      "version": "5.0.7",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.7.tgz",
-      "integrity": "sha512-B4T4rJCDPihrQo2B+h1MbeGL/k/GMAHzhQ8S0LjQ142s6/+l3hHTT095ORvsshj4QCkoWu3Xtmob5mazvakaOw==",
-      "dev": true,
-      "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.32",
-        "rollup": "^4.2.0"
-      },
-      "bin": {
-        "vite": "bin/vite.js"
-      },
-      "engines": {
-        "node": "^18.0.0 || >=20.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/vitejs/vite?sponsor=1"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.3"
-      },
-      "peerDependencies": {
-        "@types/node": "^18.0.0 || >=20.0.0",
-        "less": "*",
-        "lightningcss": "^1.21.0",
-        "sass": "*",
-        "stylus": "*",
-        "sugarss": "*",
-        "terser": "^5.4.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/node": {
-          "optional": true
-        },
-        "less": {
-          "optional": true
-        },
-        "lightningcss": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        },
-        "stylus": {
-          "optional": true
-        },
-        "sugarss": {
-          "optional": true
-        },
-        "terser": {
-          "optional": true
-        }
+        "vite": "^5.0.12"
       }
     }
   }
diff --git a/src/npm-fastui-prebuilt/package.json b/src/npm-fastui-prebuilt/package.json
index f404b454..bd5342b6 100644
--- a/src/npm-fastui-prebuilt/package.json
+++ b/src/npm-fastui-prebuilt/package.json
@@ -23,6 +23,6 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "vite": "^5.0.7"
+    "vite": "^5.0.12"
   }
 }

From 7013dab4067aeed855b77519ce8366810292325c Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Fri, 9 Feb 2024 18:11:38 +0000
Subject: [PATCH 09/27] GitHub auth provider (#174)

---
 demo/__init__.py                             |   4 +-
 demo/auth.py                                 | 139 +++++++--
 demo/auth_user.py                            |  38 +++
 demo/db.py                                   |  73 -----
 demo/main.py                                 |   4 +
 demo/shared.py                               |   2 +-
 demo/tests.py                                |  25 +-
 pyproject.toml                               |  12 +
 src/npm-fastui-bootstrap/package.json        |   4 +-
 src/npm-fastui-bootstrap/src/index.tsx       |   2 +-
 src/npm-fastui-prebuilt/package.json         |   2 +-
 src/npm-fastui-prebuilt/src/main.scss        |   6 +
 src/npm-fastui/package.json                  |   2 +-
 src/npm-fastui/src/components/FireEvent.tsx  |  13 +-
 src/npm-fastui/src/components/FormField.tsx  |   3 +-
 src/npm-fastui/src/components/ServerLoad.tsx |  10 +-
 src/npm-fastui/src/models.d.ts               |   1 +
 src/python-fastui/fastui/__init__.py         |   2 +-
 src/python-fastui/fastui/auth/__init__.py    |   3 +
 src/python-fastui/fastui/auth/github.py      | 284 +++++++++++++++++++
 src/python-fastui/fastui/components/forms.py |   1 +
 src/python-fastui/fastui/json_schema.py      |   1 +
 src/python-fastui/requirements/render.txt    |   2 +-
 src/python-fastui/requirements/test.in       |   3 +-
 src/python-fastui/requirements/test.txt      |  25 +-
 src/python-fastui/tests/test_auth_github.py  | 235 +++++++++++++++
 26 files changed, 738 insertions(+), 158 deletions(-)
 create mode 100644 demo/auth_user.py
 delete mode 100644 demo/db.py
 create mode 100644 src/python-fastui/fastui/auth/__init__.py
 create mode 100644 src/python-fastui/fastui/auth/github.py
 create mode 100644 src/python-fastui/tests/test_auth_github.py

diff --git a/demo/__init__.py b/demo/__init__.py
index 616139d2..b93b1828 100644
--- a/demo/__init__.py
+++ b/demo/__init__.py
@@ -6,12 +6,12 @@
 from fastapi import FastAPI
 from fastapi.responses import HTMLResponse, PlainTextResponse
 from fastui import prebuilt_html
+from fastui.auth import AuthError
 from fastui.dev import dev_fastapi_app
 from httpx import AsyncClient
 
 from .auth import router as auth_router
 from .components_list import router as components_router
-from .db import create_db
 from .forms import router as forms_router
 from .main import router as main_router
 from .sse import router as sse_router
@@ -20,7 +20,6 @@
 
 @asynccontextmanager
 async def lifespan(app_: FastAPI):
-    await create_db()
     async with AsyncClient() as client:
         app_.state.httpx_client = client
         yield
@@ -33,6 +32,7 @@ async def lifespan(app_: FastAPI):
 else:
     app = FastAPI(lifespan=lifespan)
 
+app.exception_handler(AuthError)(AuthError.fastapi_handle)
 app.include_router(components_router, prefix='/api/components')
 app.include_router(sse_router, prefix='/api/components')
 app.include_router(table_router, prefix='/api/table')
diff --git a/demo/auth.py b/demo/auth.py
index b9ba8da5..cd41a656 100644
--- a/demo/auth.py
+++ b/demo/auth.py
@@ -1,49 +1,111 @@
 from __future__ import annotations as _annotations
 
-from typing import Annotated
+import asyncio
+import json
+import os
+from dataclasses import asdict
+from typing import Annotated, Literal, TypeAlias
 
-from fastapi import APIRouter, Depends, Header
+from fastapi import APIRouter, Depends, Request
 from fastui import AnyComponent, FastUI
 from fastui import components as c
+from fastui.auth import GitHubAuthProvider
 from fastui.events import AuthEvent, GoToEvent, PageEvent
 from fastui.forms import fastui_form
+from httpx import AsyncClient
 from pydantic import BaseModel, EmailStr, Field, SecretStr
 
-from . import db
+from .auth_user import User
 from .shared import demo_page
 
 router = APIRouter()
 
 
-async def get_user(authorization: Annotated[str, Header()] = '') -> db.User | None:
-    try:
-        token = authorization.split(' ', 1)[1]
-    except IndexError:
-        return None
-    else:
-        return await db.get_user(token)
+# this will give an error when making requests to GitHub, but at least the app will run
+GITHUB_CLIENT_SECRET = SecretStr(os.getenv('GITHUB_CLIENT_SECRET', 'dummy-secret'))
+
+
+async def get_github_auth(request: Request) -> GitHubAuthProvider:
+    client: AsyncClient = request.app.state.httpx_client
+    return GitHubAuthProvider(
+        httpx_client=client,
+        github_client_id='9eddf87b27f71f52194a',
+        github_client_secret=GITHUB_CLIENT_SECRET,
+        scopes=['user:email'],
+    )
 
 
-@router.get('/login', response_model=FastUI, response_model_exclude_none=True)
-def auth_login(user: Annotated[str | None, Depends(get_user)]) -> list[AnyComponent]:
+LoginKind: TypeAlias = Literal['password', 'github']
+
+
+@router.get('/login/{kind}', response_model=FastUI, response_model_exclude_none=True)
+async def auth_login(
+    kind: LoginKind,
+    user: Annotated[User | None, Depends(User.from_request)],
+    github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)],
+) -> list[AnyComponent]:
     if user is None:
         return demo_page(
-            c.Paragraph(
-                text=(
-                    'This is a very simple demo of authentication, '
-                    'here you can "login" with any email address and password.'
-                )
+            c.LinkList(
+                links=[
+                    c.Link(
+                        components=[c.Text(text='Password Login')],
+                        on_click=PageEvent(name='tab', push_path='/auth/login/password', context={'kind': 'password'}),
+                        active='/auth/login/password',
+                    ),
+                    c.Link(
+                        components=[c.Text(text='GitHub Login')],
+                        on_click=PageEvent(name='tab', push_path='/auth/login/github', context={'kind': 'github'}),
+                        active='/auth/login/github',
+                    ),
+                ],
+                mode='tabs',
+                class_name='+ mb-4',
+            ),
+            c.ServerLoad(
+                path='/auth/login/content/{kind}',
+                load_trigger=PageEvent(name='tab'),
+                components=await auth_login_content(kind, github_auth),
             ),
-            c.Heading(text='Login'),
-            c.ModelForm(model=LoginForm, submit_url='/api/auth/login'),
             title='Authentication',
         )
     else:
         return [c.FireEvent(event=GoToEvent(url='/auth/profile'))]
 
 
+@router.get('/login/content/{kind}', response_model=FastUI, response_model_exclude_none=True)
+async def auth_login_content(
+    kind: LoginKind, github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)]
+) -> list[AnyComponent]:
+    match kind:
+        case 'password':
+            return [
+                c.Heading(text='Password Login', level=3),
+                c.Paragraph(
+                    text=(
+                        'This is a very simple demo of password authentication, '
+                        'here you can "login" with any email address and password.'
+                    )
+                ),
+                c.Paragraph(text='(Passwords are not saved and email stored in the browser via a JWT)'),
+                c.ModelForm(model=LoginForm, submit_url='/api/auth/login'),
+            ]
+        case 'github':
+            auth_url = await github_auth.authorization_url()
+            return [
+                c.Heading(text='GitHub Login', level=3),
+                c.Paragraph(text='Demo of GitHub authentication.'),
+                c.Paragraph(text='(Credentials are stored in the browser via a JWT)'),
+                c.Button(text='Login with GitHub', on_click=GoToEvent(url=auth_url)),
+            ]
+        case _:
+            raise ValueError(f'Invalid kind {kind!r}')
+
+
 class LoginForm(BaseModel):
-    email: EmailStr = Field(title='Email Address', description='Enter whatever value you like')
+    email: EmailStr = Field(
+        title='Email Address', description='Enter whatever value you like', json_schema_extra={'autocomplete': 'email'}
+    )
     password: SecretStr = Field(
         title='Password',
         description='Enter whatever value you like, password is not checked',
@@ -53,19 +115,21 @@ class LoginForm(BaseModel):
 
 @router.post('/login', response_model=FastUI, response_model_exclude_none=True)
 async def login_form_post(form: Annotated[LoginForm, fastui_form(LoginForm)]) -> list[AnyComponent]:
-    token = await db.create_user(form.email)
+    user = User(email=form.email, extra={})
+    token = user.encode_token()
     return [c.FireEvent(event=AuthEvent(token=token, url='/auth/profile'))]
 
 
 @router.get('/profile', response_model=FastUI, response_model_exclude_none=True)
-async def profile(user: Annotated[db.User | None, Depends(get_user)]) -> list[AnyComponent]:
+async def profile(user: Annotated[User | None, Depends(User.from_request)]) -> list[AnyComponent]:
     if user is None:
         return [c.FireEvent(event=GoToEvent(url='/auth/login'))]
     else:
-        active_count = await db.count_users()
         return demo_page(
-            c.Paragraph(text=f'You are logged in as "{user.email}", {active_count} active users right now.'),
+            c.Paragraph(text=f'You are logged in as "{user.email}".'),
             c.Button(text='Logout', on_click=PageEvent(name='submit-form')),
+            c.Heading(text='User Data:', level=3),
+            c.Code(language='json', text=json.dumps(asdict(user), indent=2)),
             c.Form(
                 submit_url='/api/auth/logout',
                 form_fields=[c.FormFieldInput(name='test', title='', initial='data', html_type='hidden')],
@@ -77,7 +141,26 @@ async def profile(user: Annotated[db.User | None, Depends(get_user)]) -> list[An
 
 
 @router.post('/logout', response_model=FastUI, response_model_exclude_none=True)
-async def logout_form_post(user: Annotated[db.User | None, Depends(get_user)]) -> list[AnyComponent]:
-    if user is not None:
-        await db.delete_user(user)
-    return [c.FireEvent(event=AuthEvent(token=False, url='/auth/login'))]
+async def logout_form_post() -> list[AnyComponent]:
+    return [c.FireEvent(event=AuthEvent(token=False, url='/auth/login/password'))]
+
+
+@router.get('/login/github/redirect', response_model=FastUI, response_model_exclude_none=True)
+async def github_redirect(
+    code: str,
+    state: str | None,
+    github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)],
+) -> list[AnyComponent]:
+    exchange = await github_auth.exchange_code(code, state)
+    user_info, emails = await asyncio.gather(
+        github_auth.get_github_user(exchange), github_auth.get_github_user_emails(exchange)
+    )
+    user = User(
+        email=next((e.email for e in emails if e.primary and e.verified), None),
+        extra={
+            'github_user_info': user_info.model_dump(),
+            'github_emails': [e.model_dump() for e in emails],
+        },
+    )
+    token = user.encode_token()
+    return [c.FireEvent(event=AuthEvent(token=token, url='/auth/profile'))]
diff --git a/demo/auth_user.py b/demo/auth_user.py
new file mode 100644
index 00000000..e837d7f9
--- /dev/null
+++ b/demo/auth_user.py
@@ -0,0 +1,38 @@
+import json
+from dataclasses import asdict, dataclass
+from datetime import datetime
+from typing import Annotated, Any, Self
+
+import jwt
+from fastapi import Header, HTTPException
+
+JWT_SECRET = 'secret'
+
+
+@dataclass
+class User:
+    email: str | None
+    extra: dict[str, Any]
+
+    def encode_token(self) -> str:
+        return jwt.encode(asdict(self), JWT_SECRET, algorithm='HS256', json_encoder=CustomJsonEncoder)
+
+    @classmethod
+    async def from_request(cls, authorization: Annotated[str, Header()] = '') -> Self | None:
+        try:
+            token = authorization.split(' ', 1)[1]
+        except IndexError:
+            return None
+
+        try:
+            return cls(**jwt.decode(token, JWT_SECRET, algorithms=['HS256']))
+        except jwt.DecodeError:
+            raise HTTPException(status_code=401, detail='Invalid token')
+
+
+class CustomJsonEncoder(json.JSONEncoder):
+    def default(self, obj: Any) -> Any:
+        if isinstance(obj, datetime):
+            return obj.isoformat()
+        else:
+            return super().default(obj)
diff --git a/demo/db.py b/demo/db.py
deleted file mode 100644
index c3932518..00000000
--- a/demo/db.py
+++ /dev/null
@@ -1,73 +0,0 @@
-import os
-import secrets
-from contextlib import asynccontextmanager
-from dataclasses import dataclass
-from datetime import datetime
-
-import libsql_client
-
-
-@dataclass
-class User:
-    token: str
-    email: str
-    last_active: datetime
-
-
-async def get_user(token: str) -> User | None:
-    async with _connect() as conn:
-        rs = await conn.execute('select * from users where token = ?', (token,))
-        if rs.rows:
-            await conn.execute('update users set last_active = current_timestamp where token = ?', (token,))
-            return User(*rs.rows[0])
-
-
-async def create_user(email: str) -> str:
-    async with _connect() as conn:
-        await _delete_old_users(conn)
-        token = secrets.token_hex()
-        await conn.execute('insert into users (token, email) values (?, ?)', (token, email))
-        return token
-
-
-async def delete_user(user: User) -> None:
-    async with _connect() as conn:
-        await conn.execute('delete from users where token = ?', (user.token,))
-
-
-async def count_users() -> int:
-    async with _connect() as conn:
-        await _delete_old_users(conn)
-        rs = await conn.execute('select count(*) from users')
-        return rs.rows[0][0]
-
-
-async def create_db() -> None:
-    async with _connect() as conn:
-        rs = await conn.execute("select 1 from sqlite_master where type='table' and name='users'")
-        if not rs.rows:
-            await conn.execute(SCHEMA)
-
-
-SCHEMA = """
-create table if not exists users (
-    token varchar(255) primary key,
-    email varchar(255) not null unique,
-    last_active timestamp not null default current_timestamp
-);
-"""
-
-
-async def _delete_old_users(conn: libsql_client.Client) -> None:
-    await conn.execute('delete from users where last_active < datetime(current_timestamp, "-1 hour")')
-
-
-@asynccontextmanager
-async def _connect() -> libsql_client.Client:
-    auth_token = os.getenv('SQLITE_AUTH_TOKEN')
-    if auth_token:
-        url = 'libsql://fastui-samuelcolvin.turso.io'
-    else:
-        url = 'file:users.db'
-    async with libsql_client.create_client(url, auth_token=auth_token) as conn:
-        yield conn
diff --git a/demo/main.py b/demo/main.py
index 1671b10d..cdba7e22 100644
--- a/demo/main.py
+++ b/demo/main.py
@@ -37,6 +37,10 @@ def api_index() -> list[AnyComponent]:
 * `Table` — See [cities table](/table/cities) and [users table](/table/users)
 * `Pagination` — See the bottom of the [cities table](/table/cities)
 * `ModelForm` — See [forms](/forms/login)
+
+Authentication is supported via:
+* token based authentication — see [here](/auth/login/password) for an example of password authentication
+* GitHub OAuth — see [here](/auth/login/github) for an example of GitHub OAuth login
 """
     return demo_page(c.Markdown(text=markdown))
 
diff --git a/demo/shared.py b/demo/shared.py
index 7b7263c7..8f3f12f1 100644
--- a/demo/shared.py
+++ b/demo/shared.py
@@ -24,7 +24,7 @@ def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyCo
                 ),
                 c.Link(
                     components=[c.Text(text='Auth')],
-                    on_click=GoToEvent(url='/auth/login'),
+                    on_click=GoToEvent(url='/auth/login/password'),
                     active='startswith:/auth',
                 ),
                 c.Link(
diff --git a/demo/tests.py b/demo/tests.py
index a6c02161..0677a332 100644
--- a/demo/tests.py
+++ b/demo/tests.py
@@ -6,17 +6,21 @@
 
 from . import app
 
-client = TestClient(app)
 
+@pytest.fixture
+def client():
+    with TestClient(app) as test_client:
+        yield test_client
 
-def test_index():
+
+def test_index(client: TestClient):
     r = client.get('/')
     assert r.status_code == 200, r.text
     assert r.text.startswith('<!doctype html>\n')
     assert r.headers.get('content-type') == 'text/html; charset=utf-8'
 
 
-def test_api_root():
+def test_api_root(client: TestClient):
     r = client.get('/api/')
     assert r.status_code == 200
     data = r.json()
@@ -52,16 +56,17 @@ def get_menu_links():
     """
     This is pretty cursory, we just go through the menu and load each page.
     """
-    r = client.get('/api/')
-    assert r.status_code == 200
-    data = r.json()
-    for link in data[1]['links']:
-        url = link['onClick']['url']
-        yield pytest.param(f'/api{url}', id=url)
+    with TestClient(app) as client:
+        r = client.get('/api/')
+        assert r.status_code == 200
+        data = r.json()
+        for link in data[1]['links']:
+            url = link['onClick']['url']
+            yield pytest.param(f'/api{url}', id=url)
 
 
 @pytest.mark.parametrize('url', get_menu_links())
-def test_menu_links(url: str):
+def test_menu_links(client: TestClient, url: str):
     r = client.get(url)
     assert r.status_code == 200
     data = r.json()
diff --git a/pyproject.toml b/pyproject.toml
index cae01196..d4518502 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -26,3 +26,15 @@ omit = [
     "src/python-fastui/fastui/__main__.py",
     "src/python-fastui/fastui/generate_typescript.py",
 ]
+
+[tool.coverage.report]
+precision = 2
+exclude_lines = [
+    'pragma: no cover',
+    'raise NotImplementedError',
+    'if TYPE_CHECKING:',
+    'if typing.TYPE_CHECKING:',
+    '@overload',
+    '@typing.overload',
+    '\(Protocol\):$',
+]
diff --git a/src/npm-fastui-bootstrap/package.json b/src/npm-fastui-bootstrap/package.json
index f48496e0..817b42f5 100644
--- a/src/npm-fastui-bootstrap/package.json
+++ b/src/npm-fastui-bootstrap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-bootstrap",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Boostrap renderer for FastUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,6 @@
     "sass": "^1.69.5"
   },
   "peerDependencies": {
-    "@pydantic/fastui": "0.0.15"
+    "@pydantic/fastui": "0.0.16"
   }
 }
diff --git a/src/npm-fastui-bootstrap/src/index.tsx b/src/npm-fastui-bootstrap/src/index.tsx
index b2fef51f..b394a3c5 100644
--- a/src/npm-fastui-bootstrap/src/index.tsx
+++ b/src/npm-fastui-bootstrap/src/index.tsx
@@ -148,7 +148,7 @@ export const classNameGenerator: ClassNameGenerator = ({
       if (props.statusCode === 502) {
         return 'm-3 text-muted'
       } else {
-        return 'alert alert-danger m-3'
+        return 'error-alert alert alert-danger m-3'
       }
   }
 }
diff --git a/src/npm-fastui-prebuilt/package.json b/src/npm-fastui-prebuilt/package.json
index bd5342b6..00ef82f5 100644
--- a/src/npm-fastui-prebuilt/package.json
+++ b/src/npm-fastui-prebuilt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-prebuilt",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Pre-built files for FastUI",
   "main": "dist/index.html",
   "type": "module",
diff --git a/src/npm-fastui-prebuilt/src/main.scss b/src/npm-fastui-prebuilt/src/main.scss
index 07cbace6..b099f9c8 100644
--- a/src/npm-fastui-prebuilt/src/main.scss
+++ b/src/npm-fastui-prebuilt/src/main.scss
@@ -116,3 +116,9 @@ h6 {
     box-shadow: 0 2.5em 0 0;
   }
 }
+
+// make sure alerts aren't hidden behind the navbar
+.error-alert {
+  position: relative;
+  top: 60px;
+}
diff --git a/src/npm-fastui/package.json b/src/npm-fastui/package.json
index bfafd41d..9979788c 100644
--- a/src/npm-fastui/package.json
+++ b/src/npm-fastui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Build better UIs faster.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/npm-fastui/src/components/FireEvent.tsx b/src/npm-fastui/src/components/FireEvent.tsx
index 5949c122..7b4aa23c 100644
--- a/src/npm-fastui/src/components/FireEvent.tsx
+++ b/src/npm-fastui/src/components/FireEvent.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC, useEffect } from 'react'
 
 import type { FireEvent } from '../models'
 
@@ -6,15 +6,12 @@ import { useFireEvent } from '../events'
 
 export const FireEventComp: FC<FireEvent> = ({ event, message }) => {
   const { fireEvent } = useFireEvent()
-  const fireEventRef = useRef(fireEvent)
 
   useEffect(() => {
-    fireEventRef.current = fireEvent
-  }, [fireEvent])
-
-  useEffect(() => {
-    fireEventRef.current(event)
-  }, [event, fireEventRef])
+    // debounce the event so changes to fireEvent (from location changes) don't trigger the event many times
+    const clear = setTimeout(() => fireEvent(event), 50)
+    return () => clearTimeout(clear)
+  }, [fireEvent, event])
 
   return <>{message}</>
 }
diff --git a/src/npm-fastui/src/components/FormField.tsx b/src/npm-fastui/src/components/FormField.tsx
index 0e67959b..1676eb1d 100644
--- a/src/npm-fastui/src/components/FormField.tsx
+++ b/src/npm-fastui/src/components/FormField.tsx
@@ -24,7 +24,7 @@ interface FormFieldInputProps extends FormFieldInput {
 }
 
 export const FormFieldInputComp: FC<FormFieldInputProps> = (props) => {
-  const { name, placeholder, required, htmlType, locked } = props
+  const { name, placeholder, required, htmlType, locked, autocomplete } = props
 
   return (
     <div className={useClassName(props)}>
@@ -38,6 +38,7 @@ export const FormFieldInputComp: FC<FormFieldInputProps> = (props) => {
         required={required}
         disabled={locked}
         placeholder={placeholder}
+        autoComplete={autocomplete}
         aria-describedby={descId(props)}
       />
       <ErrorDescription {...props} />
diff --git a/src/npm-fastui/src/components/ServerLoad.tsx b/src/npm-fastui/src/components/ServerLoad.tsx
index 062c821b..d8730502 100644
--- a/src/npm-fastui/src/components/ServerLoad.tsx
+++ b/src/npm-fastui/src/components/ServerLoad.tsx
@@ -52,8 +52,12 @@ export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path
 
   useEffect(() => {
     setTransitioning(true)
-    const promise = request({ url, expectedStatus: [200, 404] })
-    promise.then(([status, data]) => {
+    let componentUnloaded = false
+    request({ url, expectedStatus: [200, 404] }).then(([status, data]) => {
+      if (componentUnloaded) {
+        setTransitioning(false)
+        return
+      }
       if (status === 200) {
         setComponentProps(data as FastProps[])
         // if there's a fragment, scroll to that ID once the page is loaded
@@ -73,7 +77,7 @@ export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path
     })
 
     return () => {
-      promise.then(() => null)
+      componentUnloaded = true
     }
   }, [url, path, request, devReload])
 
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 461118fe..a7a97bdf 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -339,6 +339,7 @@ export interface FormFieldInput {
   htmlType?: 'text' | 'date' | 'datetime-local' | 'time' | 'email' | 'url' | 'number' | 'password' | 'hidden'
   initial?: string | number
   placeholder?: string
+  autocomplete?: string
   type: 'FormFieldInput'
 }
 export interface FormFieldTextarea {
diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index 8ace8814..44069064 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -23,7 +23,7 @@ def coerce_to_list(cls, v):
             return [v]
 
 
-_PREBUILT_VERSION = '0.0.15'
+_PREBUILT_VERSION = '0.0.16'
 _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'
 
 
diff --git a/src/python-fastui/fastui/auth/__init__.py b/src/python-fastui/fastui/auth/__init__.py
new file mode 100644
index 00000000..23f60222
--- /dev/null
+++ b/src/python-fastui/fastui/auth/__init__.py
@@ -0,0 +1,3 @@
+from .github import AuthError, GitHubAuthProvider
+
+__all__ = 'GitHubAuthProvider', 'AuthError'
diff --git a/src/python-fastui/fastui/auth/github.py b/src/python-fastui/fastui/auth/github.py
new file mode 100644
index 00000000..d53ba69f
--- /dev/null
+++ b/src/python-fastui/fastui/auth/github.py
@@ -0,0 +1,284 @@
+from contextlib import asynccontextmanager
+from dataclasses import dataclass
+from datetime import datetime, timedelta
+from typing import TYPE_CHECKING, AsyncIterator, Dict, List, Tuple, Union, cast
+from urllib.parse import urlencode
+
+from pydantic import BaseModel, SecretStr, TypeAdapter, field_validator
+
+if TYPE_CHECKING:
+    import httpx
+    from fastapi import Request
+    from fastapi.responses import JSONResponse
+
+
+@dataclass
+class GitHubExchangeError:
+    error: str
+    error_description: Union[str, None] = None
+
+
+@dataclass
+class GitHubExchange:
+    access_token: str
+    token_type: str
+    scope: List[str]
+
+    @field_validator('scope', mode='before')
+    def check_scope(cls, v: str) -> List[str]:
+        return [s for s in v.split(',') if s]
+
+
+github_exchange_type = TypeAdapter(Union[GitHubExchange, GitHubExchangeError])
+
+
+class GithubUser(BaseModel):
+    login: str
+    name: Union[str, None]
+    email: Union[str, None]
+    avatar_url: str
+    created_at: datetime
+    updated_at: datetime
+    public_repos: int
+    public_gists: int
+    followers: int
+    following: int
+    company: Union[str, None]
+    blog: Union[str, None]
+    location: Union[str, None]
+    hireable: Union[bool, None]
+    bio: Union[str, None]
+    twitter_username: Union[str, None] = None
+
+
+class GitHubEmail(BaseModel):
+    email: str
+    primary: bool
+    verified: bool
+    visibility: Union[str, None]
+
+
+github_emails_ta = TypeAdapter(List[GitHubEmail])
+
+
+class GitHubAuthProvider:
+    """
+    For details see https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps.
+    """
+
+    def __init__(
+        self,
+        httpx_client: 'httpx.AsyncClient',
+        github_client_id: str,
+        github_client_secret: SecretStr,
+        *,
+        redirect_uri: Union[str, None] = None,
+        scopes: Union[List[str], None] = None,
+        state_provider: Union['StateProvider', bool] = True,
+        exchange_cache_age: Union[timedelta, None] = timedelta(seconds=30),
+    ):
+        """
+        Arguments:
+            httpx_client: An instance of `httpx.AsyncClient` to use for making requests to GitHub.
+            github_client_id: The client ID of the GitHub OAuth app.
+            github_client_secret: The client secret of the GitHub OAuth app.
+            redirect_uri: The URL in your app where users will be sent after authorization, if custom
+            scopes: See https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/scopes-for-oauth-apps#available-scopes
+            state_provider: If `True`, use a `StateProvider` to generate and validate state parameters for the OAuth
+                flow, you can also provide an instance directly.
+            exchange_cache_age: If not `None`,
+                responses from the access token exchange are cached for the given duration.
+        """
+        self._httpx_client = httpx_client
+        self._github_client_id = github_client_id
+        self._github_client_secret = github_client_secret
+        self._redirect_uri = redirect_uri
+        self._scopes = scopes
+        if state_provider is True:
+            self._state_provider = StateProvider(github_client_secret)
+        elif state_provider is False:
+            self._state_provider = None
+        else:
+            self._state_provider = state_provider
+        # cache exchange responses, see `exchange_code` for details
+        self._exchange_cache_age = exchange_cache_age
+
+    @classmethod
+    @asynccontextmanager
+    async def create(
+        cls,
+        client_id: str,
+        client_secret: SecretStr,
+        *,
+        redirect_uri: Union[str, None] = None,
+        state_provider: Union['StateProvider', bool] = True,
+        exchange_cache_age: Union[timedelta, None] = timedelta(seconds=10),
+    ) -> AsyncIterator['GitHubAuthProvider']:
+        """
+        Async context manager to create a GitHubAuth instance with a new `httpx.AsyncClient`.
+        """
+        import httpx
+
+        async with httpx.AsyncClient() as client:
+            yield cls(
+                client,
+                client_id,
+                client_secret,
+                redirect_uri=redirect_uri,
+                state_provider=state_provider,
+                exchange_cache_age=exchange_cache_age,
+            )
+
+    async def authorization_url(self) -> str:
+        """
+        See https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/authorizing-oauth-apps#1-request-a-users-github-identity
+        """
+        params = {'client_id': self._github_client_id}
+        if self._redirect_uri:
+            params['redirect_uri'] = self._redirect_uri
+        if self._scopes:
+            params['scope'] = ' '.join(self._scopes)
+        if self._state_provider:
+            params['state'] = await self._state_provider.new_state()
+        return f'https://github.com/login/oauth/authorize?{urlencode(params)}'
+
+    async def exchange_code(self, code: str, state: Union[str, None] = None) -> GitHubExchange:
+        """
+        Exchange a code for an access token.
+
+        If `self._exchange_cache_age` is not `None` (the default), responses are cached for the given duration to
+        work around issues with React often sending the same request multiple times in development mode.
+        """
+        if self._exchange_cache_age:
+            cache_key = f'{code}:{state}'
+            if exchange := EXCHANGE_CACHE.get(cache_key, self._exchange_cache_age):
+                return exchange
+            else:
+                exchange = await self._exchange_code(code, state)
+                EXCHANGE_CACHE.set(cache_key, exchange)
+                return exchange
+        else:
+            return await self._exchange_code(code, state)
+
+    async def _exchange_code(self, code: str, state: Union[str, None] = None) -> GitHubExchange:
+        if self._state_provider:
+            if state is None:
+                raise AuthError('Missing GitHub auth state', code='missing_state')
+            elif not await self._state_provider.check_state(state):
+                raise AuthError('Invalid GitHub auth state', code='invalid_state')
+
+        params = {
+            'client_id': self._github_client_id,
+            'client_secret': self._github_client_secret.get_secret_value(),
+            'code': code,
+        }
+        if self._redirect_uri:
+            params['redirect_uri'] = self._redirect_uri
+
+        r = await self._httpx_client.post(
+            'https://github.com/login/oauth/access_token',
+            params=params,
+            headers={'Accept': 'application/json'},
+        )
+        r.raise_for_status()
+        exchange_response = github_exchange_type.validate_json(r.content)
+        if isinstance(exchange_response, GitHubExchangeError):
+            if exchange_response.error == 'bad_verification_code':
+                raise AuthError('Invalid GitHub verification code', code=exchange_response.error)
+            else:
+                raise RuntimeError(f'Unexpected response from GitHub access token exchange: {r.text}')
+        else:
+            return cast(GitHubExchange, exchange_response)
+
+    async def get_github_user(self, exchange: GitHubExchange) -> GithubUser:
+        """
+        See https://docs.github.com/en/rest/users/users#get-the-authenticated-user
+        """
+        headers = self._auth_headers(exchange)
+        user_response = await self._httpx_client.get('https://api.github.com/user', headers=headers)
+        user_response.raise_for_status()
+        return GithubUser.model_validate_json(user_response.content)
+
+    async def get_github_user_emails(self, exchange: GitHubExchange) -> List[GitHubEmail]:
+        """
+        See https://docs.github.com/en/rest/users/emails
+        """
+        headers = self._auth_headers(exchange)
+        emails_response = await self._httpx_client.get('https://api.github.com/user/emails', headers=headers)
+        emails_response.raise_for_status()
+        return github_emails_ta.validate_json(emails_response.content)
+
+    @staticmethod
+    def _auth_headers(exchange: GitHubExchange) -> Dict[str, str]:
+        return {
+            'Authorization': f'Bearer {exchange.access_token}',
+            'Accept': 'application/vnd.github+json',
+        }
+
+
+class ExchangeCache:
+    def __init__(self):
+        self._cache: Dict[str, Tuple[datetime, GitHubExchange]] = {}
+
+    def get(self, key: str, max_age: timedelta) -> Union[GitHubExchange, None]:
+        self._purge(max_age)
+        if v := self._cache.get(key):
+            return v[1]
+
+    def set(self, key: str, value: GitHubExchange) -> None:
+        self._cache[key] = (datetime.now(), value)
+
+    def _purge(self, max_age: timedelta) -> None:
+        """
+        Remove old items from the exchange cache
+        """
+        min_timestamp = datetime.now() - max_age
+        to_remove = [k for k, (ts, _) in self._cache.items() if ts < min_timestamp]
+        for k in to_remove:
+            del self._cache[k]
+
+
+# exchange cache is a singleton so instantiating a new GitHubAuthProvider reuse the same cache
+EXCHANGE_CACHE = ExchangeCache()
+
+
+class AuthError(RuntimeError):
+    # TODO if we add other providers, this should be shared
+
+    def __init__(self, message: str, *, code: str):
+        super().__init__(message)
+        self.code = code
+
+    @staticmethod
+    def fastapi_handle(_request: 'Request', e: 'AuthError') -> 'JSONResponse':
+        from fastapi.responses import JSONResponse
+
+        return JSONResponse({'detail': str(e)}, status_code=400)
+
+
+class StateProvider:
+    """
+    This is a simple state provider for the GitHub OAuth flow which uses a JWT to create an unguessable state.
+    """
+
+    # TODO if we add other providers, this could be shared
+
+    def __init__(self, secret: SecretStr, max_age: timedelta = timedelta(minutes=5)):
+        self._secret = secret
+        self._max_age = max_age
+
+    async def new_state(self) -> str:
+        import jwt
+
+        data = {'created_at': datetime.now().isoformat()}
+        return jwt.encode(data, self._secret.get_secret_value(), algorithm='HS256')
+
+    async def check_state(self, state: str) -> bool:
+        import jwt
+
+        try:
+            d = jwt.decode(state, self._secret.get_secret_value(), algorithms=['HS256'])
+        except jwt.DecodeError:
+            return False
+        else:
+            return datetime.fromisoformat(d['created_at']) > datetime.now() - self._max_age
diff --git a/src/python-fastui/fastui/components/forms.py b/src/python-fastui/fastui/components/forms.py
index 539fb6b5..042c27d9 100644
--- a/src/python-fastui/fastui/components/forms.py
+++ b/src/python-fastui/fastui/components/forms.py
@@ -31,6 +31,7 @@ class FormFieldInput(BaseFormField):
     html_type: InputHtmlType = pydantic.Field(default='text', serialization_alias='htmlType')
     initial: _t.Union[str, float, None] = None
     placeholder: _t.Union[str, None] = None
+    autocomplete: _t.Union[str, None] = None
     type: _t.Literal['FormFieldInput'] = 'FormFieldInput'
 
 
diff --git a/src/python-fastui/fastui/json_schema.py b/src/python-fastui/fastui/json_schema.py
index eb209e6f..e0ee88da 100644
--- a/src/python-fastui/fastui/json_schema.py
+++ b/src/python-fastui/fastui/json_schema.py
@@ -195,6 +195,7 @@ def json_schema_field_to_field(
             html_type=input_html_type(schema),
             required=required,
             initial=schema.get('default'),
+            autocomplete=schema.get('autocomplete'),
             description=schema.get('description'),
         )
 
diff --git a/src/python-fastui/requirements/render.txt b/src/python-fastui/requirements/render.txt
index 683fa919..3d1fa143 100644
--- a/src/python-fastui/requirements/render.txt
+++ b/src/python-fastui/requirements/render.txt
@@ -3,4 +3,4 @@
 src/python-fastui
 uvicorn[standard]
 httpx
-libsql-client
+PyJWT
diff --git a/src/python-fastui/requirements/test.in b/src/python-fastui/requirements/test.in
index ba6ee03c..5928ebed 100644
--- a/src/python-fastui/requirements/test.in
+++ b/src/python-fastui/requirements/test.in
@@ -4,5 +4,4 @@ pytest-pretty
 dirty-equals
 pytest-asyncio
 httpx
-# libsql-client is used by demo
-libsql-client
+PyJWT
diff --git a/src/python-fastui/requirements/test.txt b/src/python-fastui/requirements/test.txt
index 12d55713..2d8e26df 100644
--- a/src/python-fastui/requirements/test.txt
+++ b/src/python-fastui/requirements/test.txt
@@ -4,16 +4,10 @@
 #
 #    pip-compile --constraint=src/python-fastui/requirements/lint.txt --constraint=src/python-fastui/requirements/pyproject.txt --output-file=src/python-fastui/requirements/test.txt --strip-extras src/python-fastui/requirements/test.in
 #
-aiohttp==3.9.3
-    # via libsql-client
-aiosignal==1.3.1
-    # via aiohttp
 anyio==4.2.0
     # via
     #   -c src/python-fastui/requirements/pyproject.txt
     #   httpx
-attrs==23.2.0
-    # via aiohttp
 certifi==2024.2.2
     # via
     #   httpcore
@@ -22,10 +16,6 @@ coverage==7.4.1
     # via -r src/python-fastui/requirements/test.in
 dirty-equals==0.7.1.post0
     # via -r src/python-fastui/requirements/test.in
-frozenlist==1.4.1
-    # via
-    #   aiohttp
-    #   aiosignal
 h11==0.14.0
     # via httpcore
 httpcore==1.0.2
@@ -37,25 +27,20 @@ idna==3.6
     #   -c src/python-fastui/requirements/pyproject.txt
     #   anyio
     #   httpx
-    #   yarl
 iniconfig==2.0.0
     # via pytest
-libsql-client==0.3.0
-    # via -r src/python-fastui/requirements/test.in
 markdown-it-py==3.0.0
     # via rich
 mdurl==0.1.2
     # via markdown-it-py
-multidict==6.0.5
-    # via
-    #   aiohttp
-    #   yarl
 packaging==23.2
     # via pytest
 pluggy==1.4.0
     # via pytest
 pygments==2.17.2
     # via rich
+pyjwt==2.8.0
+    # via -r src/python-fastui/requirements/test.in
 pytest==7.4.4
     # via
     #   -r src/python-fastui/requirements/test.in
@@ -74,9 +59,3 @@ sniffio==1.3.0
     #   -c src/python-fastui/requirements/pyproject.txt
     #   anyio
     #   httpx
-typing-extensions==4.9.0
-    # via
-    #   -c src/python-fastui/requirements/pyproject.txt
-    #   libsql-client
-yarl==1.9.4
-    # via aiohttp
diff --git a/src/python-fastui/tests/test_auth_github.py b/src/python-fastui/tests/test_auth_github.py
new file mode 100644
index 00000000..1723eed0
--- /dev/null
+++ b/src/python-fastui/tests/test_auth_github.py
@@ -0,0 +1,235 @@
+from typing import List, Optional
+
+import httpx
+import pytest
+from fastapi import FastAPI
+from fastui.auth import AuthError, GitHubAuthProvider
+from fastui.auth.github import GitHubEmail
+from pydantic import SecretStr
+
+
+@pytest.fixture
+def github_requests() -> List[str]:
+    return []
+
+
+@pytest.fixture
+def fake_github_app(github_requests: List[str]) -> FastAPI:
+    app = FastAPI()
+
+    @app.post('/login/oauth/access_token')
+    async def access_token(code: str, client_id: str, client_secret: str, redirect_uri: Optional[str] = None):
+        r = f'/login/oauth/access_token code={code}'
+        if redirect_uri:
+            r += f' redirect_uri={redirect_uri}'
+        github_requests.append(r)
+        assert client_id == '1234'
+        assert client_secret == 'secret'
+        if code == 'good_user':
+            return {'access_token': 'good_token_user', 'token_type': 'bearer', 'scope': 'user'}
+        elif code == 'good':
+            return {'access_token': 'good_token', 'token_type': 'bearer', 'scope': ''}
+        elif code == 'bad_expected':
+            return {'error': 'bad_verification_code'}
+        else:
+            return {'error': 'bad_code'}
+
+    @app.get('/user')
+    async def user():
+        github_requests.append('/user')
+        return {
+            'login': 'test_user',
+            'name': 'Test User',
+            'email': 'test@example.com',
+            'avatar_url': 'https://example.com/avatar.png',
+            'created_at': '2022-01-01T00:00:00Z',
+            'updated_at': '2022-01-01T00:00:00Z',
+            'public_repos': 0,
+            'public_gists': 0,
+            'followers': 0,
+            'following': 0,
+            'company': None,
+            'blog': None,
+            'location': None,
+            'hireable': None,
+            'bio': None,
+        }
+
+    @app.get('/user/emails')
+    async def user_emails():
+        github_requests.append('/user/emails')
+        return [
+            {'email': 'foo@example.com', 'primary': False, 'verified': True, 'visibility': None},
+            {'email': 'bar@example.com', 'primary': True, 'verified': True, 'visibility': 'public'},
+        ]
+
+    return app
+
+
+@pytest.fixture
+async def httpx_client(fake_github_app: FastAPI):
+    async with httpx.AsyncClient(app=fake_github_app) as client:
+        yield client
+
+
+@pytest.fixture
+async def github_auth_provider(fake_github_app: FastAPI, httpx_client: httpx.AsyncClient):
+    return GitHubAuthProvider(
+        httpx_client=httpx_client,
+        github_client_id='1234',
+        github_client_secret=SecretStr('secret'),
+        state_provider=False,
+        exchange_cache_age=None,
+    )
+
+
+async def test_get_auth_url(github_auth_provider: GitHubAuthProvider):
+    url = await github_auth_provider.authorization_url()
+    # no state here
+    assert url == 'https://github.com/login/oauth/authorize?client_id=1234'
+
+
+async def test_exchange_ok(github_auth_provider: GitHubAuthProvider, github_requests: List[str]):
+    assert github_requests == []
+    exchange = await github_auth_provider.exchange_code('good')
+    assert exchange.access_token == 'good_token'
+    assert exchange.token_type == 'bearer'
+    assert exchange.scope == []
+    assert github_requests == ['/login/oauth/access_token code=good']
+
+
+async def test_exchange_ok_user(github_auth_provider: GitHubAuthProvider):
+    exchange = await github_auth_provider.exchange_code('good_user')
+    assert exchange.access_token == 'good_token_user'
+    assert exchange.token_type == 'bearer'
+    assert exchange.scope == ['user']
+
+
+async def test_exchange_bad_expected(github_auth_provider: GitHubAuthProvider):
+    with pytest.raises(AuthError, match='^Invalid GitHub verification code') as exc_info:
+        await github_auth_provider.exchange_code('bad_expected')
+
+    # request argument is ignored
+    r = AuthError.fastapi_handle(object(), exc_info.value)
+    assert r.status_code == 400
+
+
+async def test_exchange_bad_unexpected(github_auth_provider: GitHubAuthProvider):
+    with pytest.raises(RuntimeError, match='^Unexpected response from GitHub access token exchange'):
+        await github_auth_provider.exchange_code('unknown')
+
+
+@pytest.fixture
+async def github_auth_provider_state(fake_github_app: FastAPI, httpx_client: httpx.AsyncClient):
+    return GitHubAuthProvider(
+        httpx_client=httpx_client,
+        github_client_id='1234',
+        github_client_secret=SecretStr('secret'),
+        state_provider=True,
+    )
+
+
+async def test_exchange_no_state(github_auth_provider_state: GitHubAuthProvider):
+    with pytest.raises(AuthError, match='^Missing GitHub auth state'):
+        await github_auth_provider_state.exchange_code('good')
+
+
+async def test_exchange_bad_state(github_auth_provider_state: GitHubAuthProvider):
+    with pytest.raises(AuthError, match='^Invalid GitHub auth state'):
+        await github_auth_provider_state.exchange_code('good', 'bad_state')
+
+
+async def test_exchange_good_state(github_auth_provider_state: GitHubAuthProvider):
+    url = await github_auth_provider_state.authorization_url()
+    assert url.startswith('https://github.com/login/oauth/authorize?client_id=1234&state=')
+    state = url.rsplit('=', 1)[-1]
+
+    exchange = await github_auth_provider_state.exchange_code('good', state)
+    assert exchange.access_token == 'good_token'
+
+
+async def test_exchange_bad_state_file_exists(github_auth_provider_state: GitHubAuthProvider):
+    url = await github_auth_provider_state.authorization_url()
+    assert url.startswith('https://github.com/login/oauth/authorize?client_id=1234&state=')
+
+    with pytest.raises(AuthError, match='^Invalid GitHub auth state'):
+        await github_auth_provider_state.exchange_code('good', 'bad_state')
+
+
+async def test_exchange_ok_repeat(github_auth_provider: GitHubAuthProvider, github_requests: List[str]):
+    assert github_requests == []
+    exchange = await github_auth_provider.exchange_code('good')
+    assert exchange.access_token == 'good_token'
+    assert exchange.token_type == 'bearer'
+    assert exchange.scope == []
+    assert github_requests == ['/login/oauth/access_token code=good']
+
+    exchange = await github_auth_provider.exchange_code('good')
+    assert exchange.access_token == 'good_token'
+
+    assert github_requests == ['/login/oauth/access_token code=good', '/login/oauth/access_token code=good']
+
+
+async def test_exchange_ok_repeat_cached(
+    fake_github_app: FastAPI, httpx_client: httpx.AsyncClient, github_requests: List[str]
+):
+    github_auth_provider = GitHubAuthProvider(
+        httpx_client=httpx_client,
+        github_client_id='1234',
+        github_client_secret=SecretStr('secret'),
+        state_provider=False,
+    )
+    assert github_requests == []
+    await github_auth_provider.exchange_code('good')
+    assert github_requests == ['/login/oauth/access_token code=good']
+    await github_auth_provider.exchange_code('good')
+    assert github_requests == ['/login/oauth/access_token code=good']  # no repeat request to github
+    await github_auth_provider.exchange_code('good_user')
+    assert github_requests == ['/login/oauth/access_token code=good', '/login/oauth/access_token code=good_user']
+
+
+async def test_exchange_redirect_url(
+    fake_github_app: FastAPI, httpx_client: httpx.AsyncClient, github_requests: List[str]
+):
+    github_auth_provider = GitHubAuthProvider(
+        httpx_client=httpx_client,
+        github_client_id='1234',
+        github_client_secret=SecretStr('secret'),
+        redirect_uri='/callback',
+        state_provider=False,
+        exchange_cache_age=None,
+    )
+    url = await github_auth_provider.authorization_url()
+    assert url == 'https://github.com/login/oauth/authorize?client_id=1234&redirect_uri=%2Fcallback'
+    exchange = await github_auth_provider.exchange_code('good')
+    assert exchange.access_token == 'good_token'
+    assert github_requests == ['/login/oauth/access_token code=good redirect_uri=/callback']
+
+
+async def test_get_github_user(github_auth_provider: GitHubAuthProvider, github_requests: List[str]):
+    assert github_requests == []
+    exchange = await github_auth_provider.exchange_code('good')
+    assert github_requests == ['/login/oauth/access_token code=good']
+    user = await github_auth_provider.get_github_user(exchange)
+    assert user.login == 'test_user'
+    assert user.name == 'Test User'
+    assert user.email == 'test@example.com'
+
+    assert github_requests == ['/login/oauth/access_token code=good', '/user']
+
+
+async def test_get_github_user_emails(github_auth_provider: GitHubAuthProvider, github_requests: List[str]):
+    assert github_requests == []
+    exchange = await github_auth_provider.exchange_code('good')
+    assert github_requests == ['/login/oauth/access_token code=good']
+    emails = await github_auth_provider.get_github_user_emails(exchange)
+    assert emails == [
+        GitHubEmail(email='foo@example.com', primary=False, verified=True, visibility=None),
+        GitHubEmail(email='bar@example.com', primary=True, verified=True, visibility='public'),
+    ]
+    assert github_requests == ['/login/oauth/access_token code=good', '/user/emails']
+
+
+async def test_create():
+    async with GitHubAuthProvider.create('foo', SecretStr('bar')) as provider:
+        assert isinstance(provider._httpx_client, httpx.AsyncClient)

From 4431809fcb8c480c3f55f8e2f7a9eb7e4303a1ef Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Sat, 10 Feb 2024 20:29:49 +0000
Subject: [PATCH 10/27] Add 345 response support and exception to allow auth
 redirecting (#180)

---
 bump_npm.py                                  |  57 +++++++++
 demo/__init__.py                             |   4 +-
 demo/auth.py                                 | 117 ++++++++++---------
 demo/auth_user.py                            |  25 +++-
 src/npm-fastui-bootstrap/package.json        |   4 +-
 src/npm-fastui-prebuilt/package.json         |   2 +-
 src/npm-fastui/package.json                  |   2 +-
 src/npm-fastui/src/components/ServerLoad.tsx |  39 +++----
 src/npm-fastui/src/events.ts                 |   4 +-
 src/npm-fastui/src/tools.ts                  |   2 +-
 src/python-fastui/fastui/__init__.py         |   2 +-
 src/python-fastui/fastui/auth/__init__.py    |  13 ++-
 src/python-fastui/fastui/auth/github.py      |  53 ++++-----
 src/python-fastui/fastui/auth/shared.py      |  58 +++++++++
 src/python-fastui/tests/test_auth_github.py  |  49 ++++++--
 src/python-fastui/tests/test_auth_shared.py  |  39 +++++++
 16 files changed, 340 insertions(+), 130 deletions(-)
 create mode 100644 bump_npm.py
 create mode 100644 src/python-fastui/fastui/auth/shared.py
 create mode 100644 src/python-fastui/tests/test_auth_shared.py

diff --git a/bump_npm.py b/bump_npm.py
new file mode 100644
index 00000000..22e424b1
--- /dev/null
+++ b/bump_npm.py
@@ -0,0 +1,57 @@
+from __future__ import annotations
+
+import json
+import re
+from pathlib import Path
+
+
+def replace_package_json(package_json: Path, new_version: str, deps: bool = False) -> tuple[Path, str]:
+    content = package_json.read_text()
+    content, r_count = re.subn(r'"version": *".*?"', f'"version": "{new_version}"', content, count=1)
+    assert r_count == 1 , f'Failed to update version in {package_json}, expect replacement count 1, got {r_count}'
+    if deps:
+        content, r_count = re.subn(r'"(@pydantic/.+?)": *".*?"', fr'"\1": "{new_version}"', content)
+        assert r_count == 1, f'Failed to update version in {package_json}, expect replacement count 1, got {r_count}'
+
+    return package_json, content
+
+
+def main():
+    this_dir = Path(__file__).parent
+    fastui_package_json = this_dir / 'src/npm-fastui/package.json'
+    with fastui_package_json.open() as f:
+        old_version = json.load(f)['version']
+
+    rest, patch_version = old_version.rsplit('.', 1)
+    new_version = f'{rest}.{int(patch_version) + 1}'
+    bootstrap_package_json = this_dir / 'src/npm-fastui-bootstrap/package.json'
+    prebuilt_package_json = this_dir / 'src/npm-fastui-prebuilt/package.json'
+    to_update: list[tuple[Path, str]] = [
+        replace_package_json(fastui_package_json, new_version),
+        replace_package_json(bootstrap_package_json, new_version, deps=True),
+        replace_package_json(prebuilt_package_json, new_version),
+    ]
+
+    python_init = this_dir / 'src/python-fastui/fastui/__init__.py'
+    python_content = python_init.read_text()
+    python_content, r_count = re.subn(r"(_PREBUILT_VERSION = )'.+'", fr"\1'{new_version}'", python_content)
+    assert r_count == 1, f'Failed to update version in {python_init}, expect replacement count 1, got {r_count}'
+    to_update.append((python_init, python_content))
+
+    # logic is finished, no update all files
+    print(f'Updating files:')
+    for package_json, content in to_update:
+        print(f'  {package_json.relative_to(this_dir)}')
+        package_json.write_text(content)
+
+    print(f"""
+Bumped from `{old_version}` to `{new_version}` in {len(to_update)} files.
+
+To publish the new version, run:
+
+> npm --workspaces publish
+""")
+
+
+if __name__ == '__main__':
+    main()
diff --git a/demo/__init__.py b/demo/__init__.py
index b93b1828..3f58bf24 100644
--- a/demo/__init__.py
+++ b/demo/__init__.py
@@ -6,7 +6,7 @@
 from fastapi import FastAPI
 from fastapi.responses import HTMLResponse, PlainTextResponse
 from fastui import prebuilt_html
-from fastui.auth import AuthError
+from fastui.auth import fastapi_auth_exception_handling
 from fastui.dev import dev_fastapi_app
 from httpx import AsyncClient
 
@@ -32,7 +32,7 @@ async def lifespan(app_: FastAPI):
 else:
     app = FastAPI(lifespan=lifespan)
 
-app.exception_handler(AuthError)(AuthError.fastapi_handle)
+fastapi_auth_exception_handling(app)
 app.include_router(components_router, prefix='/api/components')
 app.include_router(sse_router, prefix='/api/components')
 app.include_router(table_router, prefix='/api/table')
diff --git a/demo/auth.py b/demo/auth.py
index cd41a656..bae81311 100644
--- a/demo/auth.py
+++ b/demo/auth.py
@@ -9,7 +9,7 @@
 from fastapi import APIRouter, Depends, Request
 from fastui import AnyComponent, FastUI
 from fastui import components as c
-from fastui.auth import GitHubAuthProvider
+from fastui.auth import AuthRedirect, GitHubAuthProvider
 from fastui.events import AuthEvent, GoToEvent, PageEvent
 from fastui.forms import fastui_form
 from httpx import AsyncClient
@@ -20,17 +20,20 @@
 
 router = APIRouter()
 
-
+GITHUB_CLIENT_ID = os.getenv('GITHUB_CLIENT_ID', '0d0315f9c2e055d032e2')
 # this will give an error when making requests to GitHub, but at least the app will run
 GITHUB_CLIENT_SECRET = SecretStr(os.getenv('GITHUB_CLIENT_SECRET', 'dummy-secret'))
+# use 'http://localhost:3000/auth/login/github/redirect' in development
+GITHUB_REDIRECT = os.getenv('GITHUB_REDIRECT')
 
 
 async def get_github_auth(request: Request) -> GitHubAuthProvider:
     client: AsyncClient = request.app.state.httpx_client
     return GitHubAuthProvider(
         httpx_client=client,
-        github_client_id='9eddf87b27f71f52194a',
+        github_client_id=GITHUB_CLIENT_ID,
         github_client_secret=GITHUB_CLIENT_SECRET,
+        redirect_uri=GITHUB_REDIRECT,
         scopes=['user:email'],
     )
 
@@ -39,44 +42,42 @@ async def get_github_auth(request: Request) -> GitHubAuthProvider:
 
 
 @router.get('/login/{kind}', response_model=FastUI, response_model_exclude_none=True)
-async def auth_login(
+def auth_login(
     kind: LoginKind,
-    user: Annotated[User | None, Depends(User.from_request)],
-    github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)],
+    user: Annotated[User | None, Depends(User.from_request_opt)],
 ) -> list[AnyComponent]:
-    if user is None:
-        return demo_page(
-            c.LinkList(
-                links=[
-                    c.Link(
-                        components=[c.Text(text='Password Login')],
-                        on_click=PageEvent(name='tab', push_path='/auth/login/password', context={'kind': 'password'}),
-                        active='/auth/login/password',
-                    ),
-                    c.Link(
-                        components=[c.Text(text='GitHub Login')],
-                        on_click=PageEvent(name='tab', push_path='/auth/login/github', context={'kind': 'github'}),
-                        active='/auth/login/github',
-                    ),
-                ],
-                mode='tabs',
-                class_name='+ mb-4',
-            ),
-            c.ServerLoad(
-                path='/auth/login/content/{kind}',
-                load_trigger=PageEvent(name='tab'),
-                components=await auth_login_content(kind, github_auth),
-            ),
-            title='Authentication',
-        )
-    else:
-        return [c.FireEvent(event=GoToEvent(url='/auth/profile'))]
+    if user is not None:
+        # already logged in
+        raise AuthRedirect('/auth/profile')
+
+    return demo_page(
+        c.LinkList(
+            links=[
+                c.Link(
+                    components=[c.Text(text='Password Login')],
+                    on_click=PageEvent(name='tab', push_path='/auth/login/password', context={'kind': 'password'}),
+                    active='/auth/login/password',
+                ),
+                c.Link(
+                    components=[c.Text(text='GitHub Login')],
+                    on_click=PageEvent(name='tab', push_path='/auth/login/github', context={'kind': 'github'}),
+                    active='/auth/login/github',
+                ),
+            ],
+            mode='tabs',
+            class_name='+ mb-4',
+        ),
+        c.ServerLoad(
+            path='/auth/login/content/{kind}',
+            load_trigger=PageEvent(name='tab'),
+            components=auth_login_content(kind),
+        ),
+        title='Authentication',
+    )
 
 
 @router.get('/login/content/{kind}', response_model=FastUI, response_model_exclude_none=True)
-async def auth_login_content(
-    kind: LoginKind, github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)]
-) -> list[AnyComponent]:
+def auth_login_content(kind: LoginKind) -> list[AnyComponent]:
     match kind:
         case 'password':
             return [
@@ -87,16 +88,15 @@ async def auth_login_content(
                         'here you can "login" with any email address and password.'
                     )
                 ),
-                c.Paragraph(text='(Passwords are not saved and email stored in the browser via a JWT)'),
+                c.Paragraph(text='(Passwords are not saved and is email stored in the browser via a JWT only)'),
                 c.ModelForm(model=LoginForm, submit_url='/api/auth/login'),
             ]
         case 'github':
-            auth_url = await github_auth.authorization_url()
             return [
                 c.Heading(text='GitHub Login', level=3),
                 c.Paragraph(text='Demo of GitHub authentication.'),
-                c.Paragraph(text='(Credentials are stored in the browser via a JWT)'),
-                c.Button(text='Login with GitHub', on_click=GoToEvent(url=auth_url)),
+                c.Paragraph(text='(Credentials are stored in the browser via a JWT only)'),
+                c.Button(text='Login with GitHub', on_click=GoToEvent(url='/auth/login/github/gen')),
             ]
         case _:
             raise ValueError(f'Invalid kind {kind!r}')
@@ -121,23 +121,20 @@ async def login_form_post(form: Annotated[LoginForm, fastui_form(LoginForm)]) ->
 
 
 @router.get('/profile', response_model=FastUI, response_model_exclude_none=True)
-async def profile(user: Annotated[User | None, Depends(User.from_request)]) -> list[AnyComponent]:
-    if user is None:
-        return [c.FireEvent(event=GoToEvent(url='/auth/login'))]
-    else:
-        return demo_page(
-            c.Paragraph(text=f'You are logged in as "{user.email}".'),
-            c.Button(text='Logout', on_click=PageEvent(name='submit-form')),
-            c.Heading(text='User Data:', level=3),
-            c.Code(language='json', text=json.dumps(asdict(user), indent=2)),
-            c.Form(
-                submit_url='/api/auth/logout',
-                form_fields=[c.FormFieldInput(name='test', title='', initial='data', html_type='hidden')],
-                footer=[],
-                submit_trigger=PageEvent(name='submit-form'),
-            ),
-            title='Authentication',
-        )
+async def profile(user: Annotated[User, Depends(User.from_request)]) -> list[AnyComponent]:
+    return demo_page(
+        c.Paragraph(text=f'You are logged in as "{user.email}".'),
+        c.Button(text='Logout', on_click=PageEvent(name='submit-form')),
+        c.Heading(text='User Data:', level=3),
+        c.Code(language='json', text=json.dumps(asdict(user), indent=2)),
+        c.Form(
+            submit_url='/api/auth/logout',
+            form_fields=[c.FormFieldInput(name='test', title='', initial='data', html_type='hidden')],
+            footer=[],
+            submit_trigger=PageEvent(name='submit-form'),
+        ),
+        title='Authentication',
+    )
 
 
 @router.post('/logout', response_model=FastUI, response_model_exclude_none=True)
@@ -145,6 +142,12 @@ async def logout_form_post() -> list[AnyComponent]:
     return [c.FireEvent(event=AuthEvent(token=False, url='/auth/login/password'))]
 
 
+@router.get('/login/github/gen', response_model=FastUI, response_model_exclude_none=True)
+async def auth_github_gen(github_auth: Annotated[GitHubAuthProvider, Depends(get_github_auth)]) -> list[AnyComponent]:
+    auth_url = await github_auth.authorization_url()
+    return [c.FireEvent(event=GoToEvent(url=auth_url))]
+
+
 @router.get('/login/github/redirect', response_model=FastUI, response_model_exclude_none=True)
 async def github_redirect(
     code: str,
diff --git a/demo/auth_user.py b/demo/auth_user.py
index e837d7f9..0faf3fb0 100644
--- a/demo/auth_user.py
+++ b/demo/auth_user.py
@@ -1,10 +1,11 @@
 import json
 from dataclasses import asdict, dataclass
-from datetime import datetime
+from datetime import datetime, timedelta
 from typing import Annotated, Any, Self
 
 import jwt
 from fastapi import Header, HTTPException
+from fastui.auth import AuthRedirect
 
 JWT_SECRET = 'secret'
 
@@ -15,19 +16,35 @@ class User:
     extra: dict[str, Any]
 
     def encode_token(self) -> str:
-        return jwt.encode(asdict(self), JWT_SECRET, algorithm='HS256', json_encoder=CustomJsonEncoder)
+        payload = asdict(self)
+        payload['exp'] = datetime.now() + timedelta(hours=1)
+        return jwt.encode(payload, JWT_SECRET, algorithm='HS256', json_encoder=CustomJsonEncoder)
 
     @classmethod
-    async def from_request(cls, authorization: Annotated[str, Header()] = '') -> Self | None:
+    def from_request(cls, authorization: Annotated[str, Header()] = '') -> Self:
+        user = cls.from_request_opt(authorization)
+        if user is None:
+            raise AuthRedirect('/auth/login/password')
+        else:
+            return user
+
+    @classmethod
+    def from_request_opt(cls, authorization: Annotated[str, Header()] = '') -> Self | None:
         try:
             token = authorization.split(' ', 1)[1]
         except IndexError:
             return None
 
         try:
-            return cls(**jwt.decode(token, JWT_SECRET, algorithms=['HS256']))
+            payload = jwt.decode(token, JWT_SECRET, algorithms=['HS256'])
+        except jwt.ExpiredSignatureError:
+            return None
         except jwt.DecodeError:
             raise HTTPException(status_code=401, detail='Invalid token')
+        else:
+            # existing token might not have 'exp' field
+            payload.pop('exp', None)
+            return cls(**payload)
 
 
 class CustomJsonEncoder(json.JSONEncoder):
diff --git a/src/npm-fastui-bootstrap/package.json b/src/npm-fastui-bootstrap/package.json
index 817b42f5..15a34586 100644
--- a/src/npm-fastui-bootstrap/package.json
+++ b/src/npm-fastui-bootstrap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-bootstrap",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "Boostrap renderer for FastUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,6 @@
     "sass": "^1.69.5"
   },
   "peerDependencies": {
-    "@pydantic/fastui": "0.0.16"
+    "@pydantic/fastui": "0.0.19"
   }
 }
diff --git a/src/npm-fastui-prebuilt/package.json b/src/npm-fastui-prebuilt/package.json
index 00ef82f5..5d8adea9 100644
--- a/src/npm-fastui-prebuilt/package.json
+++ b/src/npm-fastui-prebuilt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-prebuilt",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "Pre-built files for FastUI",
   "main": "dist/index.html",
   "type": "module",
diff --git a/src/npm-fastui/package.json b/src/npm-fastui/package.json
index 9979788c..e2252f5d 100644
--- a/src/npm-fastui/package.json
+++ b/src/npm-fastui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui",
-  "version": "0.0.16",
+  "version": "0.0.19",
   "description": "Build better UIs faster.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/npm-fastui/src/components/ServerLoad.tsx b/src/npm-fastui/src/components/ServerLoad.tsx
index d8730502..defda042 100644
--- a/src/npm-fastui/src/components/ServerLoad.tsx
+++ b/src/npm-fastui/src/components/ServerLoad.tsx
@@ -52,32 +52,31 @@ export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path
 
   useEffect(() => {
     setTransitioning(true)
-    let componentUnloaded = false
-    request({ url, expectedStatus: [200, 404] }).then(([status, data]) => {
-      if (componentUnloaded) {
-        setTransitioning(false)
-        return
-      }
-      if (status === 200) {
-        setComponentProps(data as FastProps[])
-        // if there's a fragment, scroll to that ID once the page is loaded
-        const fragment = getFragment(path)
-        if (fragment) {
-          setTimeout(() => {
-            const element = document.getElementById(fragment)
-            if (element) {
-              element.scrollIntoView()
-            }
-          }, 50)
+    let componentLoaded = true
+    request({ url, expectedStatus: [200, 345, 404] }).then(([status, data]) => {
+      if (componentLoaded) {
+        // 345 is treat the same as 200 - the server is expected to return valid FastUI components
+        if (status === 200 || status === 345) {
+          setComponentProps(data as FastProps[])
+          // if there's a fragment, scroll to that ID once the page is loaded
+          const fragment = getFragment(path)
+          if (fragment) {
+            setTimeout(() => {
+              const element = document.getElementById(fragment)
+              if (element) {
+                element.scrollIntoView()
+              }
+            }, 50)
+          }
+        } else {
+          setNotFoundUrl(url)
         }
-      } else {
-        setNotFoundUrl(url)
       }
       setTransitioning(false)
     })
 
     return () => {
-      componentUnloaded = true
+      componentLoaded = false
     }
   }, [url, path, request, devReload])
 
diff --git a/src/npm-fastui/src/events.ts b/src/npm-fastui/src/events.ts
index 45300aac..55d9d90c 100644
--- a/src/npm-fastui/src/events.ts
+++ b/src/npm-fastui/src/events.ts
@@ -47,9 +47,9 @@ export function useFireEvent(): { fireEvent: (event?: AnyEvent) => void } {
         break
       case 'auth':
         if (event.token) {
-          sessionStorage.setItem(AUTH_TOKEN_KEY, event.token)
+          localStorage.setItem(AUTH_TOKEN_KEY, event.token)
         } else {
-          sessionStorage.removeItem(AUTH_TOKEN_KEY)
+          localStorage.removeItem(AUTH_TOKEN_KEY)
         }
         if (event.url) {
           location.goto(event.url)
diff --git a/src/npm-fastui/src/tools.ts b/src/npm-fastui/src/tools.ts
index dd698f2f..18b55535 100644
--- a/src/npm-fastui/src/tools.ts
+++ b/src/npm-fastui/src/tools.ts
@@ -101,7 +101,7 @@ async function request({
     init.headers.set('Content-Type', contentType)
   }
 
-  const authToken = sessionStorage.getItem(AUTH_TOKEN_KEY)
+  const authToken = localStorage.getItem(AUTH_TOKEN_KEY)
   if (authToken) {
     // we use a custom auth-schema as well-known values like `Basic` and `Bearer` are not correct here
     init.headers.set('Authorization', `Token ${authToken}`)
diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index 44069064..eef5ddea 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -23,7 +23,7 @@ def coerce_to_list(cls, v):
             return [v]
 
 
-_PREBUILT_VERSION = '0.0.16'
+_PREBUILT_VERSION = '0.0.19'
 _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'
 
 
diff --git a/src/python-fastui/fastui/auth/__init__.py b/src/python-fastui/fastui/auth/__init__.py
index 23f60222..89377824 100644
--- a/src/python-fastui/fastui/auth/__init__.py
+++ b/src/python-fastui/fastui/auth/__init__.py
@@ -1,3 +1,12 @@
-from .github import AuthError, GitHubAuthProvider
+from .github import GitHubAuthProvider, GitHubEmail, GitHubExchange, GithubUser
+from .shared import AuthError, AuthRedirect, fastapi_auth_exception_handling
 
-__all__ = 'GitHubAuthProvider', 'AuthError'
+__all__ = (
+    'GitHubAuthProvider',
+    'GitHubExchange',
+    'GithubUser',
+    'GitHubEmail',
+    'AuthError',
+    'AuthRedirect',
+    'fastapi_auth_exception_handling',
+)
diff --git a/src/python-fastui/fastui/auth/github.py b/src/python-fastui/fastui/auth/github.py
index d53ba69f..e32d41dd 100644
--- a/src/python-fastui/fastui/auth/github.py
+++ b/src/python-fastui/fastui/auth/github.py
@@ -1,15 +1,18 @@
 from contextlib import asynccontextmanager
 from dataclasses import dataclass
-from datetime import datetime, timedelta
+from datetime import datetime, timedelta, timezone
 from typing import TYPE_CHECKING, AsyncIterator, Dict, List, Tuple, Union, cast
 from urllib.parse import urlencode
 
 from pydantic import BaseModel, SecretStr, TypeAdapter, field_validator
 
+from .shared import AuthError
+
 if TYPE_CHECKING:
     import httpx
-    from fastapi import Request
-    from fastapi.responses import JSONResponse
+
+
+__all__ = 'GitHubAuthProvider', 'GitHubExchange', 'GithubUser', 'GitHubEmail'
 
 
 @dataclass
@@ -218,50 +221,42 @@ def _auth_headers(exchange: GitHubExchange) -> Dict[str, str]:
 
 class ExchangeCache:
     def __init__(self):
-        self._cache: Dict[str, Tuple[datetime, GitHubExchange]] = {}
+        self._data: Dict[str, Tuple[datetime, GitHubExchange]] = {}
 
     def get(self, key: str, max_age: timedelta) -> Union[GitHubExchange, None]:
         self._purge(max_age)
-        if v := self._cache.get(key):
+        if v := self._data.get(key):
             return v[1]
 
     def set(self, key: str, value: GitHubExchange) -> None:
-        self._cache[key] = (datetime.now(), value)
+        self._data[key] = (datetime.now(), value)
 
     def _purge(self, max_age: timedelta) -> None:
         """
         Remove old items from the exchange cache
         """
         min_timestamp = datetime.now() - max_age
-        to_remove = [k for k, (ts, _) in self._cache.items() if ts < min_timestamp]
+        to_remove = [k for k, (ts, _) in self._data.items() if ts < min_timestamp]
         for k in to_remove:
-            del self._cache[k]
-
-
-# exchange cache is a singleton so instantiating a new GitHubAuthProvider reuse the same cache
-EXCHANGE_CACHE = ExchangeCache()
+            del self._data[k]
 
+    def __len__(self) -> int:
+        return len(self._data)
 
-class AuthError(RuntimeError):
-    # TODO if we add other providers, this should be shared
+    def clear(self) -> None:
+        self._data.clear()
 
-    def __init__(self, message: str, *, code: str):
-        super().__init__(message)
-        self.code = code
 
-    @staticmethod
-    def fastapi_handle(_request: 'Request', e: 'AuthError') -> 'JSONResponse':
-        from fastapi.responses import JSONResponse
-
-        return JSONResponse({'detail': str(e)}, status_code=400)
+# exchange cache is a singleton so instantiating a new GitHubAuthProvider reuse the same cache
+EXCHANGE_CACHE = ExchangeCache()
 
 
 class StateProvider:
     """
-    This is a simple state provider for the GitHub OAuth flow which uses a JWT to create an unguessable state.
-    """
+    This is a simple state provider for the GitHub OAuth flow which uses a JWT to create an unguessable "state" string.
 
-    # TODO if we add other providers, this could be shared
+    Requires `PyJWT` to be installed.
+    """
 
     def __init__(self, secret: SecretStr, max_age: timedelta = timedelta(minutes=5)):
         self._secret = secret
@@ -270,15 +265,15 @@ def __init__(self, secret: SecretStr, max_age: timedelta = timedelta(minutes=5))
     async def new_state(self) -> str:
         import jwt
 
-        data = {'created_at': datetime.now().isoformat()}
+        data = {'exp': datetime.now(tz=timezone.utc) + self._max_age}
         return jwt.encode(data, self._secret.get_secret_value(), algorithm='HS256')
 
     async def check_state(self, state: str) -> bool:
         import jwt
 
         try:
-            d = jwt.decode(state, self._secret.get_secret_value(), algorithms=['HS256'])
-        except jwt.DecodeError:
+            jwt.decode(state, self._secret.get_secret_value(), algorithms=['HS256'])
+        except (jwt.DecodeError, jwt.ExpiredSignatureError):
             return False
         else:
-            return datetime.fromisoformat(d['created_at']) > datetime.now() - self._max_age
+            return True
diff --git a/src/python-fastui/fastui/auth/shared.py b/src/python-fastui/fastui/auth/shared.py
new file mode 100644
index 00000000..37abedc5
--- /dev/null
+++ b/src/python-fastui/fastui/auth/shared.py
@@ -0,0 +1,58 @@
+import json
+from abc import ABC, abstractmethod
+from typing import TYPE_CHECKING, List, Tuple, Union
+
+from .. import AnyComponent, FastUI, events
+from .. import components as c
+
+if TYPE_CHECKING:
+    from fastapi import FastAPI
+
+__all__ = 'AuthError', 'AuthRedirect', 'fastapi_auth_exception_handling'
+
+
+class AuthException(ABC, Exception):
+    """
+    Base exception for all auth-related errors.
+    """
+
+    @abstractmethod
+    def response_data(self) -> Tuple[int, str]:
+        raise NotImplementedError
+
+
+class AuthError(AuthException):
+    def __init__(self, message: str, *, code: str):
+        super().__init__(message)
+        self.code = code
+
+    def response_data(self) -> Tuple[int, str]:
+        return 401, json.dumps({'detail': str(self)})
+
+
+class AuthRedirect(AuthException):
+    """
+    Special exception which should cause a 345 HTTP response with a body containing
+    FastUI components to redirect the user to a new page.
+    """
+
+    def __init__(self, path: str, message: Union[str, None] = None):
+        super().__init__(f'Auth redirect to `{path}`' + (f': {message}' if message else ''))
+        self.path = path
+        self.message = message
+
+    def response_data(self) -> Tuple[int, str]:
+        components: List[AnyComponent] = [c.FireEvent(event=events.GoToEvent(url=self.path), message=self.message)]
+        return 345, FastUI(root=components).model_dump_json(exclude_none=True)
+
+
+def fastapi_auth_exception_handling(app: 'FastAPI') -> None:
+    """
+    Register an exception handler for any `AuthException` in a FastAPI app.
+    """
+    from fastapi import Request, Response
+
+    @app.exception_handler(AuthException)
+    def auth_exception_handler(_request: Request, e: AuthException) -> Response:
+        status_code, body = e.response_data()
+        return Response(body, media_type='application/json', status_code=status_code)
diff --git a/src/python-fastui/tests/test_auth_github.py b/src/python-fastui/tests/test_auth_github.py
index 1723eed0..c34f8f1e 100644
--- a/src/python-fastui/tests/test_auth_github.py
+++ b/src/python-fastui/tests/test_auth_github.py
@@ -1,10 +1,11 @@
+from datetime import datetime
 from typing import List, Optional
 
 import httpx
 import pytest
 from fastapi import FastAPI
-from fastui.auth import AuthError, GitHubAuthProvider
-from fastui.auth.github import GitHubEmail
+from fastui.auth import AuthError, GitHubAuthProvider, GitHubEmail
+from fastui.auth.github import EXCHANGE_CACHE
 from pydantic import SecretStr
 
 
@@ -73,7 +74,7 @@ async def httpx_client(fake_github_app: FastAPI):
 
 
 @pytest.fixture
-async def github_auth_provider(fake_github_app: FastAPI, httpx_client: httpx.AsyncClient):
+async def github_auth_provider(httpx_client: httpx.AsyncClient):
     return GitHubAuthProvider(
         httpx_client=httpx_client,
         github_client_id='1234',
@@ -89,6 +90,20 @@ async def test_get_auth_url(github_auth_provider: GitHubAuthProvider):
     assert url == 'https://github.com/login/oauth/authorize?client_id=1234'
 
 
+async def test_get_auth_url_scopes(httpx_client: httpx.AsyncClient):
+    provider = GitHubAuthProvider(
+        httpx_client=httpx_client,
+        github_client_id='1234',
+        github_client_secret=SecretStr('secret'),
+        scopes=['user:email', 'read:org'],
+        state_provider=False,
+        exchange_cache_age=None,
+    )
+    url = await provider.authorization_url()
+    # insert_assert(url)
+    assert url == 'https://github.com/login/oauth/authorize?client_id=1234&scope=user%3Aemail+read%3Aorg'
+
+
 async def test_exchange_ok(github_auth_provider: GitHubAuthProvider, github_requests: List[str]):
     assert github_requests == []
     exchange = await github_auth_provider.exchange_code('good')
@@ -106,13 +121,9 @@ async def test_exchange_ok_user(github_auth_provider: GitHubAuthProvider):
 
 
 async def test_exchange_bad_expected(github_auth_provider: GitHubAuthProvider):
-    with pytest.raises(AuthError, match='^Invalid GitHub verification code') as exc_info:
+    with pytest.raises(AuthError, match='^Invalid GitHub verification code'):
         await github_auth_provider.exchange_code('bad_expected')
 
-    # request argument is ignored
-    r = AuthError.fastapi_handle(object(), exc_info.value)
-    assert r.status_code == 400
-
 
 async def test_exchange_bad_unexpected(github_auth_provider: GitHubAuthProvider):
     with pytest.raises(RuntimeError, match='^Unexpected response from GitHub access token exchange'):
@@ -179,8 +190,11 @@ async def test_exchange_ok_repeat_cached(
         github_client_secret=SecretStr('secret'),
         state_provider=False,
     )
+    EXCHANGE_CACHE.clear()
+    assert len(EXCHANGE_CACHE) == 0
     assert github_requests == []
     await github_auth_provider.exchange_code('good')
+    assert len(EXCHANGE_CACHE) == 1
     assert github_requests == ['/login/oauth/access_token code=good']
     await github_auth_provider.exchange_code('good')
     assert github_requests == ['/login/oauth/access_token code=good']  # no repeat request to github
@@ -188,6 +202,25 @@ async def test_exchange_ok_repeat_cached(
     assert github_requests == ['/login/oauth/access_token code=good', '/login/oauth/access_token code=good_user']
 
 
+async def test_exchange_cached_purge(fake_github_app: FastAPI, httpx_client: httpx.AsyncClient):
+    github_auth_provider = GitHubAuthProvider(
+        httpx_client=httpx_client,
+        github_client_id='1234',
+        github_client_secret=SecretStr('secret'),
+        state_provider=False,
+    )
+    EXCHANGE_CACHE.clear()
+    await github_auth_provider.exchange_code('good')
+    assert len(EXCHANGE_CACHE) == 1
+
+    # manually add an old entry
+    EXCHANGE_CACHE._data['old'] = (datetime(2020, 1, 1), 'old_token')
+    assert len(EXCHANGE_CACHE) == 2
+
+    await github_auth_provider.exchange_code('good')
+    assert len(EXCHANGE_CACHE) == 1
+
+
 async def test_exchange_redirect_url(
     fake_github_app: FastAPI, httpx_client: httpx.AsyncClient, github_requests: List[str]
 ):
diff --git a/src/python-fastui/tests/test_auth_shared.py b/src/python-fastui/tests/test_auth_shared.py
new file mode 100644
index 00000000..c9c956b1
--- /dev/null
+++ b/src/python-fastui/tests/test_auth_shared.py
@@ -0,0 +1,39 @@
+import pytest
+from fastapi import FastAPI
+from fastui.auth import AuthError, AuthRedirect, fastapi_auth_exception_handling
+from starlette.testclient import TestClient
+
+
+@pytest.fixture(name='app')
+def app_fixture() -> FastAPI:
+    app = FastAPI()
+    fastapi_auth_exception_handling(app)
+
+    @app.post('/do-redirect/')
+    async def do_redirect():
+        raise AuthRedirect('/new-path')
+
+    @app.post('/do-error/')
+    async def do_error():
+        raise AuthError('error message', code='error-code')
+
+    return app
+
+
+@pytest.fixture
+def client(app: FastAPI):
+    with TestClient(app) as test_client:
+        yield test_client
+
+
+def test_auth_redirect(client: TestClient):
+    r = client.post('/do-redirect/')
+    assert r.status_code == 345
+    # insert_assert(r.json())
+    assert r.json() == [{'event': {'url': '/new-path', 'type': 'go-to'}, 'type': 'FireEvent'}]
+
+
+def test_auth_error(client: TestClient):
+    r = client.post('/do-error/')
+    assert r.status_code == 401
+    assert r.json() == {'detail': 'error message'}

From 10a0a66de6bfa776d477fcbab8f57cbb1332e16f Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Sun, 11 Feb 2024 16:16:43 +0000
Subject: [PATCH 11/27] Add `end_links` to `Navbar` (#181)

---
 bump_npm.py                                     |  1 +
 demo/shared.py                                  |  2 +-
 demo/tests.py                                   |  5 +++--
 src/npm-fastui-bootstrap/package.json           |  4 ++--
 src/npm-fastui-bootstrap/src/navbar.tsx         | 15 +++++++++++++--
 src/npm-fastui-prebuilt/package.json            |  2 +-
 src/npm-fastui/package.json                     |  2 +-
 src/npm-fastui/src/components/navbar.tsx        | 11 +++++++++--
 src/npm-fastui/src/models.d.ts                  |  3 ++-
 src/python-fastui/fastui/__init__.py            |  2 +-
 src/python-fastui/fastui/components/__init__.py |  5 +++--
 11 files changed, 37 insertions(+), 15 deletions(-)
 mode change 100644 => 100755 bump_npm.py

diff --git a/bump_npm.py b/bump_npm.py
old mode 100644
new mode 100755
index 22e424b1..9f8c8a85
--- a/bump_npm.py
+++ b/bump_npm.py
@@ -1,3 +1,4 @@
+#!/usr/bin/env python
 from __future__ import annotations
 
 import json
diff --git a/demo/shared.py b/demo/shared.py
index 8f3f12f1..70b44de4 100644
--- a/demo/shared.py
+++ b/demo/shared.py
@@ -11,7 +11,7 @@ def demo_page(*components: AnyComponent, title: str | None = None) -> list[AnyCo
         c.Navbar(
             title='FastUI Demo',
             title_event=GoToEvent(url='/'),
-            links=[
+            start_links=[
                 c.Link(
                     components=[c.Text(text='Components')],
                     on_click=GoToEvent(url='/components'),
diff --git a/demo/tests.py b/demo/tests.py
index 0677a332..cda30982 100644
--- a/demo/tests.py
+++ b/demo/tests.py
@@ -32,7 +32,8 @@ def test_api_root(client: TestClient):
         {
             'title': 'FastUI Demo',
             'titleEvent': {'url': '/', 'type': 'go-to'},
-            'links': IsList(length=4),
+            'startLinks': IsList(length=4),
+            'endLinks': [],
             'type': 'Navbar',
         },
         {
@@ -60,7 +61,7 @@ def get_menu_links():
         r = client.get('/api/')
         assert r.status_code == 200
         data = r.json()
-        for link in data[1]['links']:
+        for link in data[1]['startLinks']:
             url = link['onClick']['url']
             yield pytest.param(f'/api{url}', id=url)
 
diff --git a/src/npm-fastui-bootstrap/package.json b/src/npm-fastui-bootstrap/package.json
index 15a34586..a5138bbe 100644
--- a/src/npm-fastui-bootstrap/package.json
+++ b/src/npm-fastui-bootstrap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-bootstrap",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Boostrap renderer for FastUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,6 @@
     "sass": "^1.69.5"
   },
   "peerDependencies": {
-    "@pydantic/fastui": "0.0.19"
+    "@pydantic/fastui": "0.0.20"
   }
 }
diff --git a/src/npm-fastui-bootstrap/src/navbar.tsx b/src/npm-fastui-bootstrap/src/navbar.tsx
index 4e84faf6..3f5adec8 100644
--- a/src/npm-fastui-bootstrap/src/navbar.tsx
+++ b/src/npm-fastui-bootstrap/src/navbar.tsx
@@ -3,7 +3,11 @@ import { components, useClassName, models } from 'fastui'
 import BootstrapNavbar from 'react-bootstrap/Navbar'
 
 export const Navbar: FC<models.Navbar> = (props) => {
-  const links = props.links.map((link) => {
+  const startLinks = props.startLinks.map((link) => {
+    link.mode = link.mode || 'navbar'
+    return link
+  })
+  const endLinks = props.endLinks.map((link) => {
     link.mode = link.mode || 'navbar'
     return link
   })
@@ -14,7 +18,14 @@ export const Navbar: FC<models.Navbar> = (props) => {
         <BootstrapNavbar.Toggle aria-controls="navbar-collapse" />
         <BootstrapNavbar.Collapse id="navbar-collapse">
           <ul className="navbar-nav me-auto">
-            {links.map((link, i) => (
+            {startLinks.map((link, i) => (
+              <li key={i} className="nav-item">
+                <components.LinkComp {...link} />
+              </li>
+            ))}
+          </ul>
+          <ul className="navbar-nav ms-auto">
+            {endLinks.map((link, i) => (
               <li key={i} className="nav-item">
                 <components.LinkComp {...link} />
               </li>
diff --git a/src/npm-fastui-prebuilt/package.json b/src/npm-fastui-prebuilt/package.json
index 5d8adea9..cc7b32cc 100644
--- a/src/npm-fastui-prebuilt/package.json
+++ b/src/npm-fastui-prebuilt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-prebuilt",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Pre-built files for FastUI",
   "main": "dist/index.html",
   "type": "module",
diff --git a/src/npm-fastui/package.json b/src/npm-fastui/package.json
index e2252f5d..e6aa84a7 100644
--- a/src/npm-fastui/package.json
+++ b/src/npm-fastui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Build better UIs faster.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/npm-fastui/src/components/navbar.tsx b/src/npm-fastui/src/components/navbar.tsx
index 8d6c81a3..6e735fe8 100644
--- a/src/npm-fastui/src/components/navbar.tsx
+++ b/src/npm-fastui/src/components/navbar.tsx
@@ -5,7 +5,11 @@ import { useClassName } from '../hooks/className'
 import { LinkComp, LinkRender } from './link'
 
 export const NavbarComp = (props: Navbar) => {
-  const links = props.links.map((link) => {
+  const startLinks = props.startLinks.map((link) => {
+    link.mode = link.mode || 'navbar'
+    return link
+  })
+  const endLinks = props.endLinks.map((link) => {
     link.mode = link.mode || 'navbar'
     return link
   })
@@ -13,7 +17,10 @@ export const NavbarComp = (props: Navbar) => {
     <nav className={useClassName(props)}>
       <div className={useClassName(props, { el: 'contents' })}>
         <NavbarTitle {...props} />
-        {links.map((link, i) => (
+        {startLinks.map((link, i) => (
+          <LinkComp key={i} {...link} />
+        ))}
+        {endLinks.map((link, i) => (
           <LinkComp key={i} {...link} />
         ))}
       </div>
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index a7a97bdf..f7eb10bd 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -174,7 +174,8 @@ export interface LinkList {
 export interface Navbar {
   title?: string
   titleEvent?: PageEvent | GoToEvent | BackEvent | AuthEvent
-  links: Link[]
+  startLinks: Link[]
+  endLinks: Link[]
   className?: ClassName
   type: 'Navbar'
 }
diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index eef5ddea..8e1e8417 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -23,7 +23,7 @@ def coerce_to_list(cls, v):
             return [v]
 
 
-_PREBUILT_VERSION = '0.0.19'
+_PREBUILT_VERSION = '0.0.20'
 _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'
 
 
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index 2969a05f..b43128d6 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -178,7 +178,8 @@ class LinkList(_p.BaseModel, extra='forbid'):
 class Navbar(_p.BaseModel, extra='forbid'):
     title: _t.Union[str, None] = None
     title_event: _t.Union[events.AnyEvent, None] = _p.Field(default=None, serialization_alias='titleEvent')
-    links: _t.List[Link] = _p.Field(default=[])
+    start_links: _t.List[Link] = _p.Field(default=[], serialization_alias='startLinks')
+    end_links: _t.List[Link] = _p.Field(default=[], serialization_alias='endLinks')
     class_name: _class_name.ClassNameField = None
     type: _t.Literal['Navbar'] = 'Navbar'
 
@@ -188,7 +189,7 @@ def __get_pydantic_json_schema__(
     ) -> _t.Any:
         # until https://github.com/pydantic/pydantic/issues/8413 is fixed
         json_schema = handler(core_schema)
-        json_schema.setdefault('required', []).append('links')
+        json_schema.setdefault('required', []).extend(['startLinks', 'endLinks'])
         return json_schema
 
 

From f26041ede622f1c098a8705744e562d8d364e749 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 12 Feb 2024 11:51:16 +0000
Subject: [PATCH 12/27] make spinner a component (#182)

---
 demo/components_list.py                        | 13 +++++++++++++
 src/npm-fastui-bootstrap/src/index.tsx         |  8 ++++++++
 src/npm-fastui-prebuilt/src/App.tsx            |  7 -------
 src/npm-fastui-prebuilt/src/main.scss          | 15 +++++++--------
 src/npm-fastui/src/Defaults.tsx                |  2 --
 src/npm-fastui/src/components/ServerLoad.tsx   |  9 +++++----
 src/npm-fastui/src/components/index.tsx        |  4 ++++
 src/npm-fastui/src/components/spinner.tsx      | 18 ++++++++++++++++++
 src/npm-fastui/src/index.tsx                   |  1 -
 src/npm-fastui/src/models.d.ts                 |  6 ++++++
 .../fastui/components/__init__.py              | 11 ++++++++++-
 11 files changed, 71 insertions(+), 23 deletions(-)
 create mode 100644 src/npm-fastui/src/components/spinner.tsx

diff --git a/demo/components_list.py b/demo/components_list.py
index 25c9ecf9..a7ab8951 100644
--- a/demo/components_list.py
+++ b/demo/components_list.py
@@ -192,6 +192,19 @@ class Delivery(BaseModel):
             ],
             class_name='border-top mt-3 pt-1',
         ),
+        c.Div(
+            components=[
+                c.Heading(text='Spinner', level=2),
+                c.Paragraph(
+                    text=(
+                        'A component displayed while waiting for content to load, '
+                        'this is also used automatically while loading server content.'
+                    )
+                ),
+                c.Spinner(text='Content incoming...'),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         c.Div(
             components=[
                 c.Heading(text='Video', level=2),
diff --git a/src/npm-fastui-bootstrap/src/index.tsx b/src/npm-fastui-bootstrap/src/index.tsx
index b394a3c5..05567799 100644
--- a/src/npm-fastui-bootstrap/src/index.tsx
+++ b/src/npm-fastui-bootstrap/src/index.tsx
@@ -150,5 +150,13 @@ export const classNameGenerator: ClassNameGenerator = ({
       } else {
         return 'error-alert alert alert-danger m-3'
       }
+    case 'Spinner':
+      if (subElement === 'text') {
+        return 'd-flex justify-content-center mb-2'
+      } else if (subElement === 'animation') {
+        return 'd-flex justify-content-center'
+      } else {
+        return 'my-4'
+      }
   }
 }
diff --git a/src/npm-fastui-prebuilt/src/App.tsx b/src/npm-fastui-prebuilt/src/App.tsx
index 7fb00135..c43cfdd4 100644
--- a/src/npm-fastui-prebuilt/src/App.tsx
+++ b/src/npm-fastui-prebuilt/src/App.tsx
@@ -11,7 +11,6 @@ export default function App() {
       classNameGenerator={bootstrap.classNameGenerator}
       customRender={customRender}
       NotFound={NotFound}
-      Spinner={Spinner}
       Transition={Transition}
     />
   )
@@ -30,12 +29,6 @@ const NotFound = ({ url }: { url: string }) => (
   </div>
 )
 
-const Spinner = () => (
-  <div className="container d-flex justify-content-center my-3" role="status">
-    <div className="spinner" />
-  </div>
-)
-
 const Transition: FC<{ children: ReactNode; transitioning: boolean }> = ({ children, transitioning }) => (
   <>
     <div className={renderClassName({ 'transition-overlay': true, transitioning })} />
diff --git a/src/npm-fastui-prebuilt/src/main.scss b/src/npm-fastui-prebuilt/src/main.scss
index b099f9c8..a4d5c8cf 100644
--- a/src/npm-fastui-prebuilt/src/main.scss
+++ b/src/npm-fastui-prebuilt/src/main.scss
@@ -74,17 +74,17 @@ h6 {
 }
 
 // custom spinner from https://cssloaders.github.io/
-
-.spinner,
-.spinner:before,
-.spinner:after {
+.fastui-spinner-animation,
+.fastui-spinner-animation:before,
+.fastui-spinner-animation:after {
   border-radius: 50%;
   width: 2.5em;
   height: 2.5em;
   animation-fill-mode: both;
-  animation: dots 1.8s infinite ease-in-out;
+  animation: spinner-dots 1.8s infinite ease-in-out;
 }
-.spinner {
+.fastui-spinner-animation {
+  top: -2.5em;
   color: var(--bs-dark);
   font-size: 7px;
   position: relative;
@@ -105,8 +105,7 @@ h6 {
     left: 3.5em;
   }
 }
-
-@keyframes dots {
+@keyframes spinner-dots {
   0%,
   80%,
   100% {
diff --git a/src/npm-fastui/src/Defaults.tsx b/src/npm-fastui/src/Defaults.tsx
index 3b636da5..a8469a61 100644
--- a/src/npm-fastui/src/Defaults.tsx
+++ b/src/npm-fastui/src/Defaults.tsx
@@ -1,7 +1,5 @@
 import { FC, ReactNode } from 'react'
 
-export const DefaultSpinner: FC = () => <div>loading...</div>
-
 export const DefaultNotFound: FC<{ url: string }> = ({ url }) => <div>Page not found: {url}</div>
 
 // default here does nothing
diff --git a/src/npm-fastui/src/components/ServerLoad.tsx b/src/npm-fastui/src/components/ServerLoad.tsx
index defda042..0199cb3d 100644
--- a/src/npm-fastui/src/components/ServerLoad.tsx
+++ b/src/npm-fastui/src/components/ServerLoad.tsx
@@ -4,7 +4,7 @@ import type { ServerLoad, PageEvent, FastProps } from '../models'
 
 import { ErrorContext } from '../hooks/error'
 import { useRequest, useSSE } from '../tools'
-import { DefaultSpinner, DefaultNotFound, DefaultTransition } from '../Defaults'
+import { DefaultNotFound, DefaultTransition } from '../Defaults'
 import { ConfigContext } from '../hooks/config'
 import { usePageEventListen } from '../events'
 import { EventContextProvider, useEventContext } from '../hooks/eventContext'
@@ -12,6 +12,8 @@ import { LocationContext } from '../hooks/locationContext'
 
 import { AnyCompList } from './index'
 
+import { SpinnerComp } from './spinner'
+
 export const ServerLoadComp: FC<ServerLoad> = ({ path, components, loadTrigger, sse }) => {
   if (components) {
     return <ServerLoadDefer path={path} components={components} loadTrigger={loadTrigger} sse={sse} />
@@ -103,8 +105,7 @@ const Render: FC<{ propsList: FastProps[] | null; notFoundUrl?: string; transiti
   transitioning,
 }) => {
   const { error } = useContext(ErrorContext)
-  const { Spinner, NotFound, Transition } = useContext(ConfigContext)
-  const SpinnerComp = Spinner ?? DefaultSpinner
+  const { NotFound, Transition } = useContext(ConfigContext)
   const NotFoundComp = NotFound ?? DefaultNotFound
   const TransitionComp = Transition ?? DefaultTransition
 
@@ -114,7 +115,7 @@ const Render: FC<{ propsList: FastProps[] | null; notFoundUrl?: string; transiti
     if (error) {
       return <></>
     } else {
-      return <SpinnerComp />
+      return <SpinnerComp type="Spinner" />
     }
   } else {
     return (
diff --git a/src/npm-fastui/src/components/index.tsx b/src/npm-fastui/src/components/index.tsx
index 1cd84748..d0398a75 100644
--- a/src/npm-fastui/src/components/index.tsx
+++ b/src/npm-fastui/src/components/index.tsx
@@ -39,6 +39,7 @@ import { IframeComp } from './Iframe'
 import { VideoComp } from './video'
 import { FireEventComp } from './FireEvent'
 import { ErrorComp } from './error'
+import { SpinnerComp } from './spinner'
 import { CustomComp } from './Custom'
 
 // TODO some better way to export components
@@ -73,6 +74,7 @@ export {
   VideoComp,
   FireEventComp,
   ErrorComp,
+  SpinnerComp,
   CustomComp,
   LinkRender,
 }
@@ -160,6 +162,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <FireEventComp {...props} />
       case 'Error':
         return <ErrorComp {...props} />
+      case 'Spinner':
+        return <SpinnerComp {...props} />
       case 'Custom':
         return <CustomComp {...props} />
       default:
diff --git a/src/npm-fastui/src/components/spinner.tsx b/src/npm-fastui/src/components/spinner.tsx
new file mode 100644
index 00000000..687a6b71
--- /dev/null
+++ b/src/npm-fastui/src/components/spinner.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+import type { Spinner } from '../models'
+
+import { useClassName } from '../hooks/className'
+
+export const SpinnerComp: FC<Spinner> = (props) => {
+  const { text } = props
+
+  return (
+    <div className={useClassName(props)}>
+      <div className={useClassName(props, { el: 'text' })}>{text}</div>
+      <div className={useClassName(props, { el: 'animation' })}>
+        <div className="fastui-spinner-animation">loading...</div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/npm-fastui/src/index.tsx b/src/npm-fastui/src/index.tsx
index 6bb8db40..9eed89b7 100644
--- a/src/npm-fastui/src/index.tsx
+++ b/src/npm-fastui/src/index.tsx
@@ -24,7 +24,6 @@ export interface FastUIProps {
   APIPathMode?: 'append' | 'query'
   // start of the path to remove from the URL before making a request to the API
   APIPathStrip?: string
-  Spinner?: FC
   NotFound?: FC<{ url: string }>
   Transition?: FC<{ children: ReactNode; transitioning: boolean }>
   classNameGenerator?: ClassNameGenerator
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index f7eb10bd..4cac44fb 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -26,6 +26,7 @@ export type FastProps =
   | Video
   | FireEvent
   | Error
+  | Spinner
   | Custom
   | Table
   | Pagination
@@ -256,6 +257,11 @@ export interface Error {
   type: 'Error'
   children?: ReactNode
 }
+export interface Spinner {
+  text?: string
+  className?: ClassName
+  type: 'Spinner'
+}
 export interface Custom {
   data: JsonData
   subType: string
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index b43128d6..fb728e6f 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -28,7 +28,7 @@
 from .tables import Pagination, Table
 
 __all__ = (
-    # first we include everything from `AnyComponent`
+    # first we include all components from this file
     'Text',
     'Paragraph',
     'PageTitle',
@@ -48,7 +48,9 @@
     'Iframe',
     'FireEvent',
     'Error',
+    'Spinner',
     'Custom',
+    # then we include components from other files
     'Table',
     'Pagination',
     'Display',
@@ -291,6 +293,12 @@ def __get_pydantic_json_schema__(
         return json_schema
 
 
+class Spinner(_p.BaseModel, extra='forbid'):
+    text: _t.Union[str, None] = None
+    class_name: _class_name.ClassNameField = None
+    type: _t.Literal['Spinner'] = 'Spinner'
+
+
 class Custom(_p.BaseModel, extra='forbid'):
     data: _types.JsonData
     sub_type: str = _p.Field(serialization_alias='subType')
@@ -322,6 +330,7 @@ class Custom(_p.BaseModel, extra='forbid'):
         Video,
         FireEvent,
         Error,
+        Spinner,
         Custom,
         Table,
         Pagination,

From dc860f71600c6d7b841053839ed88bc5660fffbe Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 12 Feb 2024 13:31:03 +0000
Subject: [PATCH 13/27] Modal prompt (#183)

---
 demo/components_list.py                      | 62 ++++++++++++++++++++
 demo/forms.py                                |  6 +-
 src/npm-fastui-bootstrap/package.json        |  4 +-
 src/npm-fastui-bootstrap/src/index.tsx       |  4 +-
 src/npm-fastui-prebuilt/package.json         |  2 +-
 src/npm-fastui-prebuilt/src/main.scss        |  6 +-
 src/npm-fastui/package.json                  |  2 +-
 src/npm-fastui/src/components/form.tsx       | 27 +++++----
 src/npm-fastui/src/events.ts                 |  5 +-
 src/npm-fastui/src/models.d.ts               |  6 +-
 src/python-fastui/fastui/__init__.py         |  2 +-
 src/python-fastui/fastui/components/forms.py |  3 +-
 12 files changed, 104 insertions(+), 25 deletions(-)

diff --git a/demo/components_list.py b/demo/components_list.py
index a7ab8951..e7ecd0c5 100644
--- a/demo/components_list.py
+++ b/demo/components_list.py
@@ -126,6 +126,56 @@ class Delivery(BaseModel):
             ],
             class_name='border-top mt-3 pt-1',
         ),
+        c.Div(
+            components=[
+                c.Heading(text='Modal Form / Confirm prompt', level=2),
+                c.Markdown(text='The button below will open a modal with a form.'),
+                c.Button(text='Show Modal Form', on_click=PageEvent(name='modal-form')),
+                c.Modal(
+                    title='Modal Form',
+                    body=[
+                        c.Paragraph(text='Form inside a modal!'),
+                        c.Form(
+                            form_fields=[
+                                c.FormFieldInput(name='foobar', title='Foobar', required=True),
+                            ],
+                            submit_url='/api/components/modal-form',
+                            footer=[],
+                            submit_trigger=PageEvent(name='modal-form-submit'),
+                        ),
+                    ],
+                    footer=[
+                        c.Button(
+                            text='Cancel', named_style='secondary', on_click=PageEvent(name='modal-form', clear=True)
+                        ),
+                        c.Button(text='Submit', on_click=PageEvent(name='modal-form-submit')),
+                    ],
+                    open_trigger=PageEvent(name='modal-form'),
+                ),
+                c.Button(text='Show Modal Prompt', on_click=PageEvent(name='modal-prompt'), class_name='+ ms-2'),
+                c.Modal(
+                    title='Form Prompt',
+                    body=[
+                        c.Paragraph(text='Are you sure you want to do whatever?'),
+                        c.Form(
+                            form_fields=[],
+                            submit_url='/api/components/modal-prompt',
+                            loading=[c.Spinner(text='Okay, good luck...')],
+                            footer=[],
+                            submit_trigger=PageEvent(name='modal-form-submit'),
+                        ),
+                    ],
+                    footer=[
+                        c.Button(
+                            text='Cancel', named_style='secondary', on_click=PageEvent(name='modal-prompt', clear=True)
+                        ),
+                        c.Button(text='Submit', on_click=PageEvent(name='modal-form-submit')),
+                    ],
+                    open_trigger=PageEvent(name='modal-prompt'),
+                ),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         c.Div(
             components=[
                 c.Heading(text='Server Load', level=2),
@@ -240,3 +290,15 @@ class Delivery(BaseModel):
 async def modal_view() -> list[AnyComponent]:
     await asyncio.sleep(0.5)
     return [c.Paragraph(text='This is some dynamic content. Open devtools to see me being fetched from the server.')]
+
+
+@router.post('/modal-form', response_model=FastUI, response_model_exclude_none=True)
+async def modal_form_submit() -> list[AnyComponent]:
+    await asyncio.sleep(0.5)
+    return [c.FireEvent(event=PageEvent(name='modal-form', clear=True))]
+
+
+@router.post('/modal-prompt', response_model=FastUI, response_model_exclude_none=True)
+async def modal_prompt_submit() -> list[AnyComponent]:
+    await asyncio.sleep(0.5)
+    return [c.FireEvent(event=PageEvent(name='modal-prompt', clear=True))]
diff --git a/demo/forms.py b/demo/forms.py
index f0f7c7ef..886ae77e 100644
--- a/demo/forms.py
+++ b/demo/forms.py
@@ -85,19 +85,19 @@ def form_content(kind: FormKind):
             return [
                 c.Heading(text='Login Form', level=2),
                 c.Paragraph(text='Simple login form with email and password.'),
-                c.ModelForm(model=LoginForm, submit_url='/api/forms/login'),
+                c.ModelForm(model=LoginForm, display_mode='page', submit_url='/api/forms/login'),
             ]
         case 'select':
             return [
                 c.Heading(text='Select Form', level=2),
                 c.Paragraph(text='Form showing different ways of doing select.'),
-                c.ModelForm(model=SelectForm, submit_url='/api/forms/select'),
+                c.ModelForm(model=SelectForm, display_mode='page', submit_url='/api/forms/select'),
             ]
         case 'big':
             return [
                 c.Heading(text='Large Form', level=2),
                 c.Paragraph(text='Form with a lot of fields.'),
-                c.ModelForm(model=BigModel, submit_url='/api/forms/big'),
+                c.ModelForm(model=BigModel, display_mode='page', submit_url='/api/forms/big'),
             ]
         case _:
             raise ValueError(f'Invalid kind {kind!r}')
diff --git a/src/npm-fastui-bootstrap/package.json b/src/npm-fastui-bootstrap/package.json
index a5138bbe..1ceeb51a 100644
--- a/src/npm-fastui-bootstrap/package.json
+++ b/src/npm-fastui-bootstrap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-bootstrap",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Boostrap renderer for FastUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,6 @@
     "sass": "^1.69.5"
   },
   "peerDependencies": {
-    "@pydantic/fastui": "0.0.20"
+    "@pydantic/fastui": "0.0.21"
   }
 }
diff --git a/src/npm-fastui-bootstrap/src/index.tsx b/src/npm-fastui-bootstrap/src/index.tsx
index 05567799..2a9f01e5 100644
--- a/src/npm-fastui-bootstrap/src/index.tsx
+++ b/src/npm-fastui-bootstrap/src/index.tsx
@@ -62,13 +62,15 @@ export const classNameGenerator: ClassNameGenerator = ({
           default:
             return 'row row-cols-lg-4 align-items-center justify-content-end'
         }
-      } else {
+      } else if (props.displayMode === 'page') {
         switch (subElement) {
           case 'form-container':
             return 'row justify-content-center'
           default:
             return 'col-md-4'
         }
+      } else {
+        break
       }
     case 'FormFieldInput':
     case 'FormFieldTextarea':
diff --git a/src/npm-fastui-prebuilt/package.json b/src/npm-fastui-prebuilt/package.json
index cc7b32cc..ad808315 100644
--- a/src/npm-fastui-prebuilt/package.json
+++ b/src/npm-fastui-prebuilt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-prebuilt",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Pre-built files for FastUI",
   "main": "dist/index.html",
   "type": "module",
diff --git a/src/npm-fastui-prebuilt/src/main.scss b/src/npm-fastui-prebuilt/src/main.scss
index a4d5c8cf..98e27566 100644
--- a/src/npm-fastui-prebuilt/src/main.scss
+++ b/src/npm-fastui-prebuilt/src/main.scss
@@ -1,5 +1,5 @@
 $primary: black;
-$secondary: #666;
+$secondary: white;
 $link-color: #0d6efd; // bootstrap primary
 
 @import 'bootstrap/scss/bootstrap';
@@ -121,3 +121,7 @@ h6 {
   position: relative;
   top: 60px;
 }
+
+.btn-secondary {
+  --bs-btn-border-color: #dee2e6;
+}
diff --git a/src/npm-fastui/package.json b/src/npm-fastui/package.json
index e6aa84a7..4991cc65 100644
--- a/src/npm-fastui/package.json
+++ b/src/npm-fastui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "Build better UIs faster.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/npm-fastui/src/components/form.tsx b/src/npm-fastui/src/components/form.tsx
index 3ed1f586..62ae44eb 100644
--- a/src/npm-fastui/src/components/form.tsx
+++ b/src/npm-fastui/src/components/form.tsx
@@ -14,7 +14,17 @@ import { FormFieldProps } from './FormField'
 
 export const FormComp: FC<Form | ModelForm> = (props) => {
   const formRef = useRef<HTMLFormElement>(null)
-  const { formFields, initial, submitUrl, method, footer, displayMode, submitOnChange, submitTrigger } = props
+  const {
+    formFields,
+    initial,
+    submitUrl,
+    method,
+    footer,
+    displayMode,
+    submitOnChange,
+    submitTrigger,
+    loading: loadingComponents,
+  } = props
 
   // mostly equivalent to `<input disabled`
   const [locked, setLocked] = useState(false)
@@ -84,20 +94,14 @@ export const FormComp: FC<Form | ModelForm> = (props) => {
   }
 
   const onChange = useCallback(() => {
-    if (submitOnChange && formRef.current) {
-      const formData = new FormData(formRef.current)
-      submit(formData)
-    }
-  }, [submitOnChange, submit])
+    submitOnChange && formRef.current && formRef.current.requestSubmit()
+  }, [submitOnChange])
 
   const { fireId } = usePageEventListen(submitTrigger)
 
   useEffect(() => {
-    if (fireId && formRef.current) {
-      const formData = new FormData(formRef.current)
-      submit(formData)
-    }
-  }, [fireId, submit])
+    fireId && formRef.current && formRef.current.requestSubmit()
+  }, [fireId])
 
   const fieldProps: FormFieldProps[] = formFields.map((formField) => {
     const f = {
@@ -127,6 +131,7 @@ export const FormComp: FC<Form | ModelForm> = (props) => {
     return (
       <div className={containerClassName}>
         <form ref={formRef} className={formClassName} onSubmit={onSubmit}>
+          {locked && loadingComponents && <AnyCompList propsList={loadingComponents} />}
           <AnyCompList propsList={fieldProps} />
           {error ? <div>Error: {error}</div> : null}
           <Footer footer={footer} />
diff --git a/src/npm-fastui/src/events.ts b/src/npm-fastui/src/events.ts
index 55d9d90c..334b0955 100644
--- a/src/npm-fastui/src/events.ts
+++ b/src/npm-fastui/src/events.ts
@@ -116,6 +116,9 @@ export function usePageEventListen(event?: PageEvent, initialContext: ContextTyp
   return {
     eventContext,
     fireId,
-    clear: useCallback(() => setEventContext(null), []),
+    clear: useCallback(() => {
+      setEventContext(null)
+      setFireId(null)
+    }, []),
   }
 }
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 4cac44fb..1f85fd49 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -319,9 +319,10 @@ export interface Form {
     [k: string]: JsonData
   }
   method?: 'POST' | 'GOTO' | 'GET'
-  displayMode?: 'default' | 'inline'
+  displayMode?: 'default' | 'page' | 'inline'
   submitOnChange?: boolean
   submitTrigger?: PageEvent
+  loading?: FastProps[]
   footer?: FastProps[]
   className?: ClassName
   formFields: (
@@ -436,9 +437,10 @@ export interface ModelForm {
     [k: string]: JsonData
   }
   method?: 'POST' | 'GOTO' | 'GET'
-  displayMode?: 'default' | 'inline'
+  displayMode?: 'default' | 'page' | 'inline'
   submitOnChange?: boolean
   submitTrigger?: PageEvent
+  loading?: FastProps[]
   footer?: FastProps[]
   className?: ClassName
   type: 'ModelForm'
diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index 8e1e8417..1025faa4 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -23,7 +23,7 @@ def coerce_to_list(cls, v):
             return [v]
 
 
-_PREBUILT_VERSION = '0.0.20'
+_PREBUILT_VERSION = '0.0.21'
 _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'
 
 
diff --git a/src/python-fastui/fastui/components/forms.py b/src/python-fastui/fastui/components/forms.py
index 042c27d9..6f0b92a1 100644
--- a/src/python-fastui/fastui/components/forms.py
+++ b/src/python-fastui/fastui/components/forms.py
@@ -83,11 +83,12 @@ class BaseForm(pydantic.BaseModel, ABC, defer_build=True, extra='forbid'):
     submit_url: str = pydantic.Field(serialization_alias='submitUrl')
     initial: _t.Union[_t.Dict[str, _types.JsonData], None] = None
     method: _t.Literal['POST', 'GOTO', 'GET'] = 'POST'
-    display_mode: _t.Union[_t.Literal['default', 'inline'], None] = pydantic.Field(
+    display_mode: _t.Union[_t.Literal['default', 'page', 'inline'], None] = pydantic.Field(
         default=None, serialization_alias='displayMode'
     )
     submit_on_change: _t.Union[bool, None] = pydantic.Field(default=None, serialization_alias='submitOnChange')
     submit_trigger: _t.Union[events.PageEvent, None] = pydantic.Field(default=None, serialization_alias='submitTrigger')
+    loading: '_t.Union[_t.List[AnyComponent], None]' = None
     footer: '_t.Union[_t.List[AnyComponent], None]' = None
     class_name: _class_name.ClassNameField = None
 

From d3a8e6c58574f09e18153f94864781faf4e2dfd6 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Mon, 12 Feb 2024 13:33:37 +0000
Subject: [PATCH 14/27] uprev and correct license

---
 LICENSE                              | 2 +-
 src/npm-fastui-bootstrap/LICENSE     | 2 +-
 src/npm-fastui-prebuilt/LICENSE      | 2 +-
 src/npm-fastui/LICENSE               | 2 +-
 src/python-fastui/LICENSE            | 2 +-
 src/python-fastui/fastui/__init__.py | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/LICENSE b/LICENSE
index 286f4f19..e93c72cf 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 to present Samuel Colvin
+Copyright (c) 2023 to present Pydantic Services inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/src/npm-fastui-bootstrap/LICENSE b/src/npm-fastui-bootstrap/LICENSE
index 286f4f19..e93c72cf 100644
--- a/src/npm-fastui-bootstrap/LICENSE
+++ b/src/npm-fastui-bootstrap/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 to present Samuel Colvin
+Copyright (c) 2023 to present Pydantic Services inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/src/npm-fastui-prebuilt/LICENSE b/src/npm-fastui-prebuilt/LICENSE
index 286f4f19..e93c72cf 100644
--- a/src/npm-fastui-prebuilt/LICENSE
+++ b/src/npm-fastui-prebuilt/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 to present Samuel Colvin
+Copyright (c) 2023 to present Pydantic Services inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/src/npm-fastui/LICENSE b/src/npm-fastui/LICENSE
index 286f4f19..e93c72cf 100644
--- a/src/npm-fastui/LICENSE
+++ b/src/npm-fastui/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 to present Samuel Colvin
+Copyright (c) 2023 to present Pydantic Services inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/src/python-fastui/LICENSE b/src/python-fastui/LICENSE
index 286f4f19..e93c72cf 100644
--- a/src/python-fastui/LICENSE
+++ b/src/python-fastui/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 to present Samuel Colvin
+Copyright (c) 2023 to present Pydantic Services inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index 1025faa4..0cf159f1 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -4,7 +4,7 @@
 
 from .components import AnyComponent
 
-__version__ = '0.4.0'
+__version__ = '0.5.0'
 __all__ = 'AnyComponent', 'FastUI', 'prebuilt_html'
 
 

From fe5005e9e25ede26e389fad4a9bf62a1c72ebee8 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Tue, 13 Feb 2024 22:39:36 +0000
Subject: [PATCH 15/27] Add `PageEvent.next_event` (#192)

---
 demo/auth.py                       | 2 +-
 src/npm-fastui/src/events.ts       | 6 +++++-
 src/npm-fastui/src/models.d.ts     | 1 +
 src/python-fastui/fastui/events.py | 1 +
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/demo/auth.py b/demo/auth.py
index bae81311..065d222b 100644
--- a/demo/auth.py
+++ b/demo/auth.py
@@ -89,7 +89,7 @@ def auth_login_content(kind: LoginKind) -> list[AnyComponent]:
                     )
                 ),
                 c.Paragraph(text='(Passwords are not saved and is email stored in the browser via a JWT only)'),
-                c.ModelForm(model=LoginForm, submit_url='/api/auth/login'),
+                c.ModelForm(model=LoginForm, submit_url='/api/auth/login', display_mode='page'),
             ]
         case 'github':
             return [
diff --git a/src/npm-fastui/src/events.ts b/src/npm-fastui/src/events.ts
index 334b0955..386ea521 100644
--- a/src/npm-fastui/src/events.ts
+++ b/src/npm-fastui/src/events.ts
@@ -31,6 +31,9 @@ export function useFireEvent(): { fireEvent: (event?: AnyEvent) => void } {
         }
         const detail: PageEventDetail = { clear: event.clear || false, context: event.context }
         document.dispatchEvent(new CustomEvent(pageEventType(event), { detail }))
+        if (event.nextEvent) {
+          fireEventImpl(event.nextEvent)
+        }
         break
       }
       case 'go-to':
@@ -61,6 +64,8 @@ export function useFireEvent(): { fireEvent: (event?: AnyEvent) => void } {
     }
   }
 
+  // fireEventImpl is recursive, but it doens't make sense for fireEvent to have fireEventImpl as a dep
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const fireEvent = useCallback(fireEventImpl, [location])
 
   return { fireEvent }
@@ -97,7 +102,6 @@ export function usePageEventListen(event?: PageEvent, initialContext: ContextTyp
     }
 
     const onEvent = (e: Event) => {
-      console.log('event:', e)
       const event = e as CustomEvent<PageEventDetail>
       const { context, clear } = event.detail
       if (clear) {
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 1f85fd49..7b4d5f12 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -136,6 +136,7 @@ export interface PageEvent {
   pushPath?: string
   context?: ContextType
   clear?: boolean
+  nextEvent?: PageEvent | GoToEvent | BackEvent | AuthEvent
   type: 'page'
 }
 export interface ContextType {
diff --git a/src/python-fastui/fastui/events.py b/src/python-fastui/fastui/events.py
index c572ef87..1c5c491d 100644
--- a/src/python-fastui/fastui/events.py
+++ b/src/python-fastui/fastui/events.py
@@ -11,6 +11,7 @@ class PageEvent(BaseModel):
     push_path: Union[str, None] = Field(default=None, serialization_alias='pushPath')
     context: Union[ContextType, None] = None
     clear: Union[bool, None] = None
+    next_event: 'Union[AnyEvent, None]' = Field(default=None, serialization_alias='nextEvent')
     type: Literal['page'] = 'page'
 
 

From 0b99a61aa7df282040ee8382593569e7f4afb265 Mon Sep 17 00:00:00 2001
From: tim-habitat <86600518+tim-habitat@users.noreply.github.com>
Date: Tue, 13 Feb 2024 22:41:40 +0000
Subject: [PATCH 16/27] Iframe srcdoc and sandbox (#191)

---
 src/npm-fastui/src/components/Iframe.tsx        |  4 ++--
 src/npm-fastui/src/models.d.ts                  |  2 ++
 src/python-fastui/fastui/components/__init__.py |  2 ++
 src/python-fastui/tests/test_components.py      | 11 +++++++++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/npm-fastui/src/components/Iframe.tsx b/src/npm-fastui/src/components/Iframe.tsx
index 818d8160..ab7a5ce5 100644
--- a/src/npm-fastui/src/components/Iframe.tsx
+++ b/src/npm-fastui/src/components/Iframe.tsx
@@ -3,6 +3,6 @@ import { FC } from 'react'
 import type { Iframe } from '../models'
 
 export const IframeComp: FC<Iframe> = (props) => {
-  const { src, width, height, title } = props
-  return <iframe src={src} width={width} height={height} title={title} />
+  const { src, width, height, title, sandbox, srcdoc } = props
+  return <iframe src={src} width={width} height={height} title={title} sandbox={sandbox} srcDoc={srcdoc} />
 }
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 7b4d5f12..1f6b8580 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -231,6 +231,8 @@ export interface Iframe {
   width?: string | number
   height?: string | number
   className?: ClassName
+  srcdoc?: string
+  sandbox?: string
   type: 'Iframe'
 }
 export interface Video {
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index fb728e6f..566f865a 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -254,6 +254,8 @@ class Iframe(_p.BaseModel, extra='forbid'):
     width: _t.Union[str, int, None] = None
     height: _t.Union[str, int, None] = None
     class_name: _class_name.ClassNameField = None
+    srcdoc: _t.Union[str, None] = None
+    sandbox: _t.Union[str, None] = None
     type: _t.Literal['Iframe'] = 'Iframe'
 
 
diff --git a/src/python-fastui/tests/test_components.py b/src/python-fastui/tests/test_components.py
index d18ad40e..6d3c3d17 100644
--- a/src/python-fastui/tests/test_components.py
+++ b/src/python-fastui/tests/test_components.py
@@ -5,6 +5,7 @@
 that's just testing pydantic!
 """
 from fastui import FastUI, components
+from pydantic_core import Url
 
 
 def test_div_text():
@@ -50,3 +51,13 @@ def test_root_model_single():
             'type': 'Text',
         }
     ]
+
+
+def test_iframe():
+    iframe = components.Iframe(src='https://www.example.com', srcdoc='<p>hello world</p>', sandbox='allow-scripts')
+    assert iframe.model_dump(by_alias=True, exclude_none=True) == {
+        'src': Url('https://www.example.com'),
+        'type': 'Iframe',
+        'srcdoc': '<p>hello world</p>',
+        'sandbox': 'allow-scripts',
+    }

From 9eff25a31a43f0f2717fe5788d5478e7a48b9c2c Mon Sep 17 00:00:00 2001
From: tim-habitat <86600518+tim-habitat@users.noreply.github.com>
Date: Wed, 14 Feb 2024 09:47:22 +0000
Subject: [PATCH 17/27] add `autocomplete` to `textarea` and `select` (#190)

---
 src/npm-fastui/src/components/FormField.tsx  | 6 ++++--
 src/npm-fastui/src/models.d.ts               | 2 ++
 src/python-fastui/fastui/components/forms.py | 2 ++
 src/python-fastui/fastui/json_schema.py      | 2 ++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/npm-fastui/src/components/FormField.tsx b/src/npm-fastui/src/components/FormField.tsx
index 1676eb1d..d1b30c78 100644
--- a/src/npm-fastui/src/components/FormField.tsx
+++ b/src/npm-fastui/src/components/FormField.tsx
@@ -51,7 +51,7 @@ interface FormFieldTextareaProps extends FormFieldTextarea {
 }
 
 export const FormFieldTextareaComp: FC<FormFieldTextareaProps> = (props) => {
-  const { name, placeholder, required, locked, rows, cols } = props
+  const { name, placeholder, required, locked, rows, cols, autocomplete } = props
   return (
     <div className={useClassName(props)}>
       <Label {...props} />
@@ -66,6 +66,7 @@ export const FormFieldTextareaComp: FC<FormFieldTextareaProps> = (props) => {
         disabled={locked}
         placeholder={placeholder}
         aria-describedby={descId(props)}
+        autoComplete={autocomplete}
       />
       <ErrorDescription {...props} />
     </div>
@@ -141,7 +142,7 @@ export const FormFieldSelectComp: FC<FormFieldSelectProps> = (props) => {
 }
 
 export const FormFieldSelectVanillaComp: FC<FormFieldSelectProps> = (props) => {
-  const { name, required, locked, options, multiple, initial, placeholder, onChange } = props
+  const { name, required, locked, options, multiple, initial, placeholder, onChange, autocomplete } = props
 
   const className = useClassName(props)
   const classNameSelect = useClassName(props, { el: 'select' })
@@ -159,6 +160,7 @@ export const FormFieldSelectVanillaComp: FC<FormFieldSelectProps> = (props) => {
         aria-describedby={descId(props)}
         placeholder={placeholder}
         onChange={() => onChange && onChange()}
+        autoComplete={autocomplete}
       >
         {multiple ? null : <option></option>}
         {options.map((option, i) => (
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 1f6b8580..3850b6d0 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -366,6 +366,7 @@ export interface FormFieldTextarea {
   cols?: number
   initial?: string
   placeholder?: string
+  autocomplete?: string
   type: 'FormFieldTextarea'
 }
 export interface FormFieldBoolean {
@@ -408,6 +409,7 @@ export interface FormFieldSelect {
   initial?: string[] | string
   vanilla?: boolean
   placeholder?: string
+  autocomplete?: string
   type: 'FormFieldSelect'
 }
 export interface SelectOption {
diff --git a/src/python-fastui/fastui/components/forms.py b/src/python-fastui/fastui/components/forms.py
index 6f0b92a1..a18a9c4c 100644
--- a/src/python-fastui/fastui/components/forms.py
+++ b/src/python-fastui/fastui/components/forms.py
@@ -40,6 +40,7 @@ class FormFieldTextarea(BaseFormField):
     cols: _t.Union[int, None] = None
     initial: _t.Union[str, None] = None
     placeholder: _t.Union[str, None] = None
+    autocomplete: _t.Union[str, None] = None
     type: _t.Literal['FormFieldTextarea'] = 'FormFieldTextarea'
 
 
@@ -61,6 +62,7 @@ class FormFieldSelect(BaseFormField):
     initial: _t.Union[_t.List[str], str, None] = None
     vanilla: _t.Union[bool, None] = None
     placeholder: _t.Union[str, None] = None
+    autocomplete: _t.Union[str, None] = None
     type: _t.Literal['FormFieldSelect'] = 'FormFieldSelect'
 
 
diff --git a/src/python-fastui/fastui/json_schema.py b/src/python-fastui/fastui/json_schema.py
index e0ee88da..49492796 100644
--- a/src/python-fastui/fastui/json_schema.py
+++ b/src/python-fastui/fastui/json_schema.py
@@ -257,6 +257,7 @@ def special_string_field(
                 placeholder=schema.get('placeholder'),
                 initial=schema.get('initial'),
                 description=schema.get('description'),
+                autocomplete=schema.get('autocomplete'),
             )
         elif enum := schema.get('enum'):
             enum_labels = schema.get('enum_labels', {})
@@ -269,6 +270,7 @@ def special_string_field(
                 options=[SelectOption(value=v, label=enum_labels.get(v) or as_title(v)) for v in enum],
                 initial=schema.get('default'),
                 description=schema.get('description'),
+                autocomplete=schema.get('autocomplete'),
             )
         elif search_url := schema.get('search_url'):
             return FormFieldSelectSearch(

From 345ab9f8143d7ec609d1ba15ce2e31fd89b7e8bf Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Wed, 14 Feb 2024 09:50:00 +0000
Subject: [PATCH 18/27] SSE using `@microsoft/fetch-event-source` so we can
 post and control more (#193)

---
 demo/sse.py                                   |   9 +-
 package-lock.json                             |  14 +-
 src/npm-fastui/package.json                   |   1 +
 src/npm-fastui/src/components/ServerLoad.tsx  |  62 +++++--
 src/npm-fastui/src/models.d.ts                |   2 +
 src/npm-fastui/src/tools.ts                   | 170 ++++++++++++------
 .../fastui/components/__init__.py             |   2 +
 7 files changed, 176 insertions(+), 84 deletions(-)

diff --git a/demo/sse.py b/demo/sse.py
index 068952c4..bcdb34b2 100644
--- a/demo/sse.py
+++ b/demo/sse.py
@@ -13,18 +13,11 @@
 async def canned_ai_response_generator() -> AsyncIterable[str]:
     prompt = '**User:** What is SSE? Please include a javascript code example.\n\n**AI:** '
     output = ''
-    msg = ''
     for time, text in chain([(0.5, prompt)], CANNED_RESPONSE):
         await asyncio.sleep(time)
         output += text
         m = FastUI(root=[c.Markdown(text=output)])
-        msg = f'data: {m.model_dump_json(by_alias=True, exclude_none=True)}\n\n'
-        yield msg
-
-    # avoid the browser reconnecting
-    while True:
-        yield msg
-        await asyncio.sleep(10)
+        yield f'data: {m.model_dump_json(by_alias=True, exclude_none=True)}\n\n'
 
 
 @router.get('/sse')
diff --git a/package-lock.json b/package-lock.json
index b2c5918a..1c67808a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -829,6 +829,11 @@
       "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
       "dev": true
     },
+    "node_modules/@microsoft/fetch-event-source": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@microsoft/fetch-event-source/-/fetch-event-source-2.0.1.tgz",
+      "integrity": "sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -6949,9 +6954,10 @@
     },
     "src/npm-fastui": {
       "name": "@pydantic/fastui",
-      "version": "0.0.15",
+      "version": "0.0.21",
       "license": "MIT",
       "dependencies": {
+        "@microsoft/fetch-event-source": "^2.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-markdown": "^9.0.1",
@@ -6965,7 +6971,7 @@
     },
     "src/npm-fastui-bootstrap": {
       "name": "@pydantic/fastui-bootstrap",
-      "version": "0.0.15",
+      "version": "0.0.21",
       "license": "MIT",
       "dependencies": {
         "bootstrap": "^5.3.2",
@@ -6975,12 +6981,12 @@
         "sass": "^1.69.5"
       },
       "peerDependencies": {
-        "@pydantic/fastui": "0.0.15"
+        "@pydantic/fastui": "0.0.21"
       }
     },
     "src/npm-fastui-prebuilt": {
       "name": "@pydantic/fastui-prebuilt",
-      "version": "0.0.15",
+      "version": "0.0.21",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-react-swc": "^3.3.2",
diff --git a/src/npm-fastui/package.json b/src/npm-fastui/package.json
index 4991cc65..7d04a70b 100644
--- a/src/npm-fastui/package.json
+++ b/src/npm-fastui/package.json
@@ -21,6 +21,7 @@
     "typewatch": "tsc --noEmit --watch"
   },
   "dependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",
diff --git a/src/npm-fastui/src/components/ServerLoad.tsx b/src/npm-fastui/src/components/ServerLoad.tsx
index 0199cb3d..aa81d06f 100644
--- a/src/npm-fastui/src/components/ServerLoad.tsx
+++ b/src/npm-fastui/src/components/ServerLoad.tsx
@@ -3,7 +3,7 @@ import { FC, useCallback, useContext, useEffect, useState } from 'react'
 import type { ServerLoad, PageEvent, FastProps } from '../models'
 
 import { ErrorContext } from '../hooks/error'
-import { useRequest, useSSE } from '../tools'
+import { useRequest, useSSE, Method } from '../tools'
 import { DefaultNotFound, DefaultTransition } from '../Defaults'
 import { ConfigContext } from '../hooks/config'
 import { usePageEventListen } from '../events'
@@ -14,28 +14,46 @@ import { AnyCompList } from './index'
 
 import { SpinnerComp } from './spinner'
 
-export const ServerLoadComp: FC<ServerLoad> = ({ path, components, loadTrigger, sse }) => {
+export const ServerLoadComp: FC<ServerLoad> = (props) => {
+  const { path, components, loadTrigger, sse, method, sseRetry } = props
   if (components) {
-    return <ServerLoadDefer path={path} components={components} loadTrigger={loadTrigger} sse={sse} />
+    return (
+      <ServerLoadDefer
+        path={path}
+        components={components}
+        loadTrigger={loadTrigger}
+        sse={sse}
+        method={method}
+        sseRetry={sseRetry}
+      />
+    )
   } else if (sse) {
-    return <ServerLoadSSE path={path} />
+    return <ServerLoadSSE path={path} method={method} sseRetry={sseRetry} />
   } else {
     return <ServerLoadFetch path={path} />
   }
 }
 
-const ServerLoadDefer: FC<{ path: string; components: FastProps[]; loadTrigger?: PageEvent; sse?: boolean }> = ({
-  components,
-  path,
-  loadTrigger,
-  sse,
-}) => {
+interface DeferProps {
+  path: string
+  components: FastProps[]
+  loadTrigger?: PageEvent
+  sse?: boolean
+  method?: Method
+  sseRetry?: number
+}
+
+const ServerLoadDefer: FC<DeferProps> = ({ components, path, loadTrigger, sse, method, sseRetry }) => {
   const { eventContext } = usePageEventListen(loadTrigger)
 
   if (eventContext) {
     return (
       <EventContextProvider context={eventContext}>
-        {sse ? <ServerLoadSSE path={path} /> : <ServerLoadFetch path={path} />}
+        {sse ? (
+          <ServerLoadSSE path={path} method={method} sseRetry={sseRetry} />
+        ) : (
+          <ServerLoadFetch path={path} method={method} />
+        )}
       </EventContextProvider>
     )
   } else {
@@ -43,7 +61,13 @@ const ServerLoadDefer: FC<{ path: string; components: FastProps[]; loadTrigger?:
   }
 }
 
-export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path, devReload }) => {
+interface FetchProps {
+  path: string
+  devReload?: number
+  method?: Method
+}
+
+export const ServerLoadFetch: FC<FetchProps> = ({ path, devReload, method }) => {
   const [transitioning, setTransitioning] = useState<boolean>(false)
   const [componentProps, setComponentProps] = useState<FastProps[] | null>(null)
   const [notFoundUrl, setNotFoundUrl] = useState<string | undefined>(undefined)
@@ -55,7 +79,7 @@ export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path
   useEffect(() => {
     setTransitioning(true)
     let componentLoaded = true
-    request({ url, expectedStatus: [200, 345, 404] }).then(([status, data]) => {
+    request({ url, method, expectedStatus: [200, 345, 404] }).then(([status, data]) => {
       if (componentLoaded) {
         // 345 is treat the same as 200 - the server is expected to return valid FastUI components
         if (status === 200 || status === 345) {
@@ -80,7 +104,7 @@ export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path
     return () => {
       componentLoaded = false
     }
-  }, [url, path, request, devReload])
+  }, [url, path, request, devReload, method])
 
   useEffect(() => {
     setNotFoundUrl(undefined)
@@ -89,12 +113,18 @@ export const ServerLoadFetch: FC<{ path: string; devReload?: number }> = ({ path
   return <Render propsList={componentProps} notFoundUrl={notFoundUrl} transitioning={transitioning} />
 }
 
-export const ServerLoadSSE: FC<{ path: string }> = ({ path }) => {
+interface SSEProps {
+  path: string
+  method?: Method
+  sseRetry?: number
+}
+
+export const ServerLoadSSE: FC<SSEProps> = ({ path, method, sseRetry }) => {
   const [componentProps, setComponentProps] = useState<FastProps[] | null>(null)
 
   const url = useServerUrl(path)
   const onMessage = useCallback((data: any) => setComponentProps(data as FastProps[]), [])
-  useSSE(url, onMessage)
+  useSSE(url, onMessage, method, sseRetry)
 
   return <Render propsList={componentProps} transitioning={false} />
 }
diff --git a/src/npm-fastui/src/models.d.ts b/src/npm-fastui/src/models.d.ts
index 3850b6d0..a0ca91cd 100644
--- a/src/npm-fastui/src/models.d.ts
+++ b/src/npm-fastui/src/models.d.ts
@@ -204,6 +204,8 @@ export interface ServerLoad {
   loadTrigger?: PageEvent
   components?: FastProps[]
   sse?: boolean
+  sseRetry?: number
+  method?: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE'
   type: 'ServerLoad'
 }
 export interface Image {
diff --git a/src/npm-fastui/src/tools.ts b/src/npm-fastui/src/tools.ts
index 18b55535..028fc4ce 100644
--- a/src/npm-fastui/src/tools.ts
+++ b/src/npm-fastui/src/tools.ts
@@ -1,8 +1,10 @@
 import { useCallback, useContext, useEffect } from 'react'
+import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source'
 
 import { ErrorContext } from './hooks/error'
 
 export const AUTH_TOKEN_KEY = 'fastui-auth-token'
+export type Method = 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE'
 
 export function useRequest(): (args: RequestArgs) => Promise<[number, any]> {
   const { setError } = useContext(ErrorContext)
@@ -25,32 +27,9 @@ export function useRequest(): (args: RequestArgs) => Promise<[number, any]> {
   )
 }
 
-export function useSSE(url: string, onMessage: (data: any) => void): void {
-  useEffect(() => {
-    const source = new EventSource(url)
-    source.onmessage = (e) => {
-      const data = JSON.parse(e.data)
-      onMessage(data)
-    }
-    source.onerror = (e) => {
-      // we don't raise an error her as this can happen when the server is restarted
-      console.debug('SSE error', e)
-    }
-    const cleanup = () => {
-      source.onerror = null
-      source.close()
-    }
-    window.addEventListener('beforeunload', cleanup)
-    return () => {
-      window.removeEventListener('beforeunload', cleanup)
-      cleanup()
-    }
-  }, [url, onMessage])
-}
-
 export interface RequestArgs {
   url: string
-  method?: 'GET' | 'POST' | 'PUT' | 'DELETE'
+  method?: Method
   // defaults to 200
   expectedStatus?: number[]
   query?: Record<string, string> | URLSearchParams
@@ -59,16 +38,6 @@ export interface RequestArgs {
   headers?: Record<string, string> | Headers
 }
 
-class RequestError extends Error {
-  status: number
-
-  constructor(message: string, status: number) {
-    super(message)
-    this.status = status
-    this.name = 'RequestError'
-  }
-}
-
 async function request({
   url,
   method,
@@ -101,10 +70,9 @@ async function request({
     init.headers.set('Content-Type', contentType)
   }
 
-  const authToken = localStorage.getItem(AUTH_TOKEN_KEY)
-  if (authToken) {
-    // we use a custom auth-schema as well-known values like `Basic` and `Bearer` are not correct here
-    init.headers.set('Authorization', `Token ${authToken}`)
+  const authHeader = getAuthHeader()
+  if (authHeader) {
+    init.headers.set(authHeader.key, authHeader.value)
   }
 
   if (method) {
@@ -118,24 +86,7 @@ async function request({
     throw new RequestError('fetch failed', 0)
   }
 
-  const { status } = response
-  if (!responseOk(response, expectedStatus)) {
-    let detail: null | string = null
-    const content = await response.text()
-    try {
-      const jsonData = JSON.parse(content)
-      console.warn(`${url} -> ${status} JSON:`, jsonData)
-      if (typeof jsonData.detail === 'string') {
-        detail = jsonData.detail
-      }
-    } catch (e) {
-      console.warn(`${url} -> ${status} content:`, content)
-      detail = content
-    }
-    const msg = `${detail || response.statusText} (${status})`
-    throw new RequestError(msg, status)
-  }
-
+  const status = await checkResponse(url, response, expectedStatus)
   let data
   try {
     data = await response.json()
@@ -147,6 +98,84 @@ async function request({
   return [status, data]
 }
 
+export function useSSE(url: string, onMessage: (data: any) => void, method?: Method, retry?: number): void {
+  const { setError } = useContext(ErrorContext)
+
+  useEffect(() => {
+    let stop = false
+    const headers: Record<string, string> = {}
+    const authHeader = getAuthHeader()
+    if (authHeader) {
+      headers[authHeader.key] = authHeader.value
+    }
+    fetchEventSource(url, {
+      method,
+      headers,
+      onopen: async function (response) {
+        const status = await checkResponse(url, response, [200])
+        const ct = response.headers.get('content-type')
+        if (!ct || !ct.startsWith(EventStreamContentType)) {
+          console.warn(`${url} -> ${status} content-type "${ct}" != "${EventStreamContentType}"`)
+          throw new RequestError('Response not valid event stream', status)
+        }
+        console.debug(`${url} -> ${status} event stream`)
+        // ok
+      },
+      onmessage(e) {
+        if (stop) {
+          throw new SSEStopError()
+        }
+        const data = JSON.parse(e.data)
+        onMessage(data)
+      },
+      onclose() {
+        if (typeof retry === 'number') {
+          throw new SSERetryError()
+        } else {
+          throw new SSEStopError()
+        }
+      },
+      onerror(e) {
+        if (e instanceof SSERetryError) {
+          console.debug('SSE retrying')
+          return retry
+        } else {
+          throw e
+        }
+      },
+    }).catch((e) => {
+      if (e instanceof SSEStopError) {
+        // do nothing, this is fine
+        return
+      }
+      const title = 'Request Error'
+      if (e instanceof RequestError) {
+        setError({ title, description: e.message, statusCode: e.status })
+      } else {
+        setError({ title, description: (e as any)?.message })
+      }
+      throw e
+    })
+
+    return () => {
+      stop = true
+    }
+  }, [setError, url, onMessage, method, retry])
+}
+
+class SSERetryError extends Error {}
+class SSEStopError extends Error {}
+
+class RequestError extends Error {
+  status: number
+
+  constructor(message: string, status: number) {
+    super(message)
+    this.status = status
+    this.name = 'RequestError'
+  }
+}
+
 function responseOk(response: Response, expectedStatus?: number[]) {
   if (expectedStatus) {
     return expectedStatus.includes(response.status)
@@ -186,3 +215,32 @@ export const slugify = (s: string): string =>
     .replace(/--+/g, '-') // Replace multiple - with single -
     .replace(/^-+/, '') // Trim - from start of text
     .replace(/-+$/, '') // Trim - from end of text
+
+function getAuthHeader(): { key: string; value: string } | undefined {
+  const authToken = localStorage.getItem(AUTH_TOKEN_KEY)
+  if (authToken) {
+    // we use a custom auth-schema as well-known values like `Basic` and `Bearer` are not correct here
+    return { key: 'Authorization', value: `Token ${authToken}` }
+  }
+}
+
+async function checkResponse(url: string, response: Response, expectedStatus: number[] | undefined): Promise<number> {
+  const { status } = response
+  if (!responseOk(response, expectedStatus)) {
+    let detail: null | string = null
+    const content = await response.text()
+    try {
+      const jsonData = JSON.parse(content)
+      console.warn(`${url} -> ${status} JSON:`, jsonData)
+      if (typeof jsonData.detail === 'string') {
+        detail = jsonData.detail
+      }
+    } catch (e) {
+      console.warn(`${url} -> ${status} content:`, content)
+      detail = content
+    }
+    const msg = `${detail || response.statusText} (${status})`
+    throw new RequestError(msg, status)
+  }
+  return status
+}
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index 566f865a..0fb06e1d 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -221,6 +221,8 @@ class ServerLoad(_p.BaseModel, extra='forbid'):
     load_trigger: _t.Union[events.PageEvent, None] = _p.Field(default=None, serialization_alias='loadTrigger')
     components: '_t.Union[_t.List[AnyComponent], None]' = None
     sse: _t.Union[bool, None] = None
+    sse_retry: _t.Union[int, None] = _p.Field(None, serialization_alias='sseRetry')
+    method: _t.Union[_t.Literal['GET', 'POST', 'PATCH', 'PUT', 'DELETE'], None] = None
     type: _t.Literal['ServerLoad'] = 'ServerLoad'
 
 

From 1cebdff0d6bb3abdefdcf1a2f46f6c84bef1d723 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Wed, 14 Feb 2024 09:51:44 +0000
Subject: [PATCH 19/27] bump npm packages

---
 src/npm-fastui-bootstrap/package.json | 4 ++--
 src/npm-fastui-prebuilt/package.json  | 2 +-
 src/npm-fastui/package.json           | 2 +-
 src/python-fastui/fastui/__init__.py  | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/npm-fastui-bootstrap/package.json b/src/npm-fastui-bootstrap/package.json
index 1ceeb51a..a2bfffcb 100644
--- a/src/npm-fastui-bootstrap/package.json
+++ b/src/npm-fastui-bootstrap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-bootstrap",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Boostrap renderer for FastUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -29,6 +29,6 @@
     "sass": "^1.69.5"
   },
   "peerDependencies": {
-    "@pydantic/fastui": "0.0.21"
+    "@pydantic/fastui": "0.0.22"
   }
 }
diff --git a/src/npm-fastui-prebuilt/package.json b/src/npm-fastui-prebuilt/package.json
index ad808315..fbb58e1c 100644
--- a/src/npm-fastui-prebuilt/package.json
+++ b/src/npm-fastui-prebuilt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui-prebuilt",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Pre-built files for FastUI",
   "main": "dist/index.html",
   "type": "module",
diff --git a/src/npm-fastui/package.json b/src/npm-fastui/package.json
index 7d04a70b..24766831 100644
--- a/src/npm-fastui/package.json
+++ b/src/npm-fastui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pydantic/fastui",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Build better UIs faster.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index 0cf159f1..3d792933 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -23,7 +23,7 @@ def coerce_to_list(cls, v):
             return [v]
 
 
-_PREBUILT_VERSION = '0.0.21'
+_PREBUILT_VERSION = '0.0.22'
 _PREBUILT_CDN_URL = f'https://cdn.jsdelivr.net/npm/@pydantic/fastui-prebuilt@{_PREBUILT_VERSION}/dist/assets'
 
 

From 5406f5f78b0acaa1b6c9c95139d500ad77a47c03 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Wed, 14 Feb 2024 09:56:12 +0000
Subject: [PATCH 20/27] bump python package

---
 src/python-fastui/fastui/__init__.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index 3d792933..e8b4ba51 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -4,7 +4,7 @@
 
 from .components import AnyComponent
 
-__version__ = '0.5.0'
+__version__ = '0.5.1'
 __all__ = 'AnyComponent', 'FastUI', 'prebuilt_html'
 
 

From 398147e9e1bb256c7c8d7cbc21026dcf4d993d26 Mon Sep 17 00:00:00 2001
From: Samuel Colvin <s@muelcolvin.com>
Date: Wed, 14 Feb 2024 11:31:23 +0000
Subject: [PATCH 21/27] fix typing typo

---
 src/python-fastui/fastui/__init__.py            | 2 +-
 src/python-fastui/fastui/components/__init__.py | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/python-fastui/fastui/__init__.py b/src/python-fastui/fastui/__init__.py
index e8b4ba51..f8c983d8 100644
--- a/src/python-fastui/fastui/__init__.py
+++ b/src/python-fastui/fastui/__init__.py
@@ -4,7 +4,7 @@
 
 from .components import AnyComponent
 
-__version__ = '0.5.1'
+__version__ = '0.5.2'
 __all__ = 'AnyComponent', 'FastUI', 'prebuilt_html'
 
 
diff --git a/src/python-fastui/fastui/components/__init__.py b/src/python-fastui/fastui/components/__init__.py
index 0fb06e1d..f2d3f423 100644
--- a/src/python-fastui/fastui/components/__init__.py
+++ b/src/python-fastui/fastui/components/__init__.py
@@ -221,7 +221,7 @@ class ServerLoad(_p.BaseModel, extra='forbid'):
     load_trigger: _t.Union[events.PageEvent, None] = _p.Field(default=None, serialization_alias='loadTrigger')
     components: '_t.Union[_t.List[AnyComponent], None]' = None
     sse: _t.Union[bool, None] = None
-    sse_retry: _t.Union[int, None] = _p.Field(None, serialization_alias='sseRetry')
+    sse_retry: _t.Union[int, None] = _p.Field(default=None, serialization_alias='sseRetry')
     method: _t.Union[_t.Literal['GET', 'POST', 'PATCH', 'PUT', 'DELETE'], None] = None
     type: _t.Literal['ServerLoad'] = 'ServerLoad'
 

From 4605e6d0158926ae06642ecde2d31e66ef908c1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Mart=C3=AD=20Gamboa?= <pablo@cointracker.com>
Date: Wed, 21 Feb 2024 09:38:06 +0100
Subject: [PATCH 22/27] Update README.md (#196)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 666f1b26..5923b746 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ Building an application this way has a number of significant advantages:
 - You only need to write code in one place to build a new feature — add a new view, change the behavior of an existing view or alter the URL structure
 - Deploying the front and backend can be completely decoupled, provided the frontend knows how to render all the components the backend is going to ask it to use, you're good to go
 - You should be able to reuse a rich set of opensource components, they should end up being better tested and more reliable than anything you could build yourself, this is possible because the components need no context about how they're going to be used (note: since FastUI is brand new, this isn't true yet, hopefully we get there)
-- We can use Pydantic, TypeScript and JSON Schema to provide guarantees that the two sides are communicating with an agreed schema (note: this is not complete yet, see [#18](https://github.com/pydantic/FastUI/issues/18))
+- We can use Pydantic, TypeScript and JSON Schema to provide guarantees that the two sides are communicating with an agreed schema
 
 In the abstract, FastUI is like the opposite of GraphQL but with the same goal — GraphQL lets frontend developers extend an application without any new backend development; FastUI lets backend developers extend an application without any new frontend development.
 

From c88ec127a010b3b65746fa03c1cde1286892b666 Mon Sep 17 00:00:00 2001
From: Christian Clauss <cclauss@me.com>
Date: Mon, 26 Feb 2024 11:04:06 +0100
Subject: [PATCH 23/27] Fix typos discovered by codespell (#213)

---
 src/npm-fastui-bootstrap/package.json | 2 +-
 src/npm-fastui/src/events.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/npm-fastui-bootstrap/package.json b/src/npm-fastui-bootstrap/package.json
index a2bfffcb..9827558e 100644
--- a/src/npm-fastui-bootstrap/package.json
+++ b/src/npm-fastui-bootstrap/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@pydantic/fastui-bootstrap",
   "version": "0.0.22",
-  "description": "Boostrap renderer for FastUI",
+  "description": "Bootstrap renderer for FastUI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "author": "Samuel Colvin",
diff --git a/src/npm-fastui/src/events.ts b/src/npm-fastui/src/events.ts
index 386ea521..b1289725 100644
--- a/src/npm-fastui/src/events.ts
+++ b/src/npm-fastui/src/events.ts
@@ -64,7 +64,7 @@ export function useFireEvent(): { fireEvent: (event?: AnyEvent) => void } {
     }
   }
 
-  // fireEventImpl is recursive, but it doens't make sense for fireEvent to have fireEventImpl as a dep
+  // fireEventImpl is recursive, but it doesn't make sense for fireEvent to have fireEventImpl as a dep
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const fireEvent = useCallback(fireEventImpl, [location])
 

From 16abe6afc43ffaa7051bfd79e25cc9174b21f55f Mon Sep 17 00:00:00 2001
From: Christian Clauss <cclauss@me.com>
Date: Mon, 26 Feb 2024 12:13:54 +0100
Subject: [PATCH 24/27] Keep GitHub Actions up to date with GitHub's Dependabot
 (#212)

Co-authored-by: Hasan Ramezani <hasan.r67@gmail.com>
---
 .github/dependabot.yml | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 .github/dependabot.yml

diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..0b84a243
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,13 @@
+# Keep GitHub Actions up to date with GitHub's Dependabot...
+# https://docs.github.com/en/code-security/dependabot/working-with-dependabot/keeping-your-actions-up-to-date-with-dependabot
+# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#package-ecosystem
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    groups:
+      github-actions:
+        patterns:
+          - "*"  # Group all Actions updates into a single larger pull request
+    schedule:
+      interval: monthly

From fce7be8bb6badd26386758dc83e0e1d63520ac4f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 26 Feb 2024 12:44:07 +0100
Subject: [PATCH 25/27] Bump the github-actions group with 5 updates (#217)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 .github/workflows/ci.yml | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index db691e08..d52f1711 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -14,13 +14,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-python@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: '3.11'
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
 
@@ -29,7 +29,7 @@ jobs:
 
       - run: npm install
 
-      - uses: pre-commit/action@v3.0.0
+      - uses: pre-commit/action@v3.0.1
         with:
           extra_args: --all-files
         env:
@@ -50,10 +50,10 @@ jobs:
       OS: ${{ matrix.os }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: set up python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
 
@@ -71,7 +71,7 @@ jobs:
 
       - run: coverage xml
 
-      - uses: codecov/codecov-action@v3
+      - uses: codecov/codecov-action@v4
         with:
           file: ./coverage.xml
           env_vars: PYTHON,OS
@@ -80,9 +80,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
 
@@ -112,9 +112,9 @@ jobs:
       id-token: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: actions/setup-python@v4
+      - uses: actions/setup-python@v5
         with:
           python-version: '3.11'
 

From e1203d6b95af18163531ae79b8700fda0c5d37f6 Mon Sep 17 00:00:00 2001
From: tim-habitat <86600518+tim-habitat@users.noreply.github.com>
Date: Mon, 26 Feb 2024 18:20:33 +0000
Subject: [PATCH 26/27] fix page goto for page 1 (#195)

---
 src/npm-fastui-bootstrap/src/pagination.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/npm-fastui-bootstrap/src/pagination.tsx b/src/npm-fastui-bootstrap/src/pagination.tsx
index ed32fe68..fa9e11bb 100644
--- a/src/npm-fastui-bootstrap/src/pagination.tsx
+++ b/src/npm-fastui-bootstrap/src/pagination.tsx
@@ -82,12 +82,7 @@ const PaginationLink: FC<Link> = ({ Display, ariaLabel, locked, active, page })
     )
   }
   const className = renderClassName({ 'page-link': true, disabled: locked && !active, active } as models.ClassName)
-  let onClick: models.GoToEvent
-  if (page === 1) {
-    onClick = { type: 'go-to', query: {} }
-  } else {
-    onClick = { type: 'go-to', query: { page } }
-  }
+  const onClick: models.GoToEvent = { type: 'go-to', query: { page } }
   return (
     <li className="page-item">
       <components.LinkRender onClick={onClick} className={className} locked={locked || active} ariaLabel={ariaLabel}>

From 196414360b69b3dab7012576f852229831307883 Mon Sep 17 00:00:00 2001
From: Hasan Ramezani <hasan.r67@gmail.com>
Date: Tue, 27 Feb 2024 20:33:42 +0100
Subject: [PATCH 27/27] Fix importing of typing.Self (#220)

---
 demo/auth_user.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/demo/auth_user.py b/demo/auth_user.py
index 0faf3fb0..c711cc95 100644
--- a/demo/auth_user.py
+++ b/demo/auth_user.py
@@ -1,11 +1,12 @@
 import json
 from dataclasses import asdict, dataclass
 from datetime import datetime, timedelta
-from typing import Annotated, Any, Self
+from typing import Annotated, Any
 
 import jwt
 from fastapi import Header, HTTPException
 from fastui.auth import AuthRedirect
+from typing_extensions import Self
 
 JWT_SECRET = 'secret'