Full-stack reference application — OpenAPI-first FastAPI server paired with the spec-driven React admin client (@aetoskia/react-openapi + @aetoskia/react-auth).
-Provide the MUI theme, color-mode context and CSS variables to children.
Builds the theme from getDesignTokens(mode) + getSemanticColors(mode) +
-the component customizations, and re-creates it whenever the mode changes.
-Also sets --bg-page, --bg-card, --bg-elevated, --border-default,
---border-subtle, --text-primary, --text-secondary and --text-muted
-on a wrapper Box.
Props: children and defaultMode (see AppThemeProps).
Resolve the semantic color groups for a color mode.
-Dark mode uses fixed HSL values; light mode derives borders/text from the
-gray ramp (with alpha).
"light" or "dark".
The SemanticColors for that mode.
Build the MUI design tokens (palette, typography, shape, shadows) for a mode.
-Light and dark palettes share the ramps but override specific slots in dark
-mode. Also sets shadows[1] (the "baseShadow") per mode. The returned object
-is spread into createTheme by AppTheme.
"light" or "dark".
A MUI ThemeOptions-shaped object (palette, typography, shape,
-shadows).
Mode-aware semantic color groups attached to the MUI theme as
-theme.semantic and exposed as CSS custom properties by AppTheme.
Border colors.
-Default border (--border-default).
Subtle border (--border-subtle).
Background surface colors.
-Card background (--bg-card).
Elevated surface, e.g. popovers (--bg-elevated).
Page background (--bg-page).
Text colors.
-Muted text (--text-muted).
Primary text (--text-primary).
Secondary text (--text-secondary).
The type of import.meta.
If you need to declare that a given property exists on import.meta,
-this type may be augmented via interface merging.
Site footer for the Veterinary Clinic demo app.
-A fixed bottom AppBar (pinned above the drawer via
-zIndex.drawer + 1) with a blurred translucent background and a top
-divider, rendering the Copyright line. Rendered once by main.jsx below
-the routed content.
Top navigation bar for the Veterinary Clinic demo app.
-A fixed AppBar with blurred translucent background and bottom divider,
-showing the app title/logo and an Admin button. Rendered once by main.jsx
-above the routed content; the title navigates to / and the Admin button to
-/admin.
Landing page for the Veterinary Clinic demo app.
-Exercises the react-openapi building blocks end-to-end:
ResourceCard - a grid of every top-level resource with a live record
-count (or SSE connection status for streaming resources).LiveTable - preview of the first 5 records of the first non-streaming
-resource.ApptForm - a hand-crafted appointment form using FormFieldRenderer,
-useResource().create() and auto-loaded FK options.SseStreamView with a pet selector for a streaming
-resource.Application entry point.
-Creates the React root from #root and mounts the app: AppProvider
-(fed by specConfiguration) wraps a BrowserRouter → AppTheme →
-Header → routed content (Home at /, Admin at /admin/*) →
-Footer.
Runtime OpenAPI configuration for the Veterinary Clinic demo.
-Reads the API base URL from import.meta.env.VITE_API_BASE_URL and points
-react-openapi at ${base}/openapi.json, sets the app title, and enables
-client-side filtering for the appointments resource.
App theme provider and color-mode context.
-Wraps the MUI ThemeProvider with the design tokens (getDesignTokens),
-semantic colors (getSemanticColors) and component customizations
-(inputsCustomizations, dataDisplayCustomizations,
-feedbackCustomizations, navigationCustomizations,
-surfacesCustomizations). Exposes a light/dark ColorModeContext and
-publishes the semantic colors as CSS custom properties (--bg-page,
---bg-card, --text-primary, ...) for the app subtree.
MUI style overrides for data-display components.
-Exports dataDisplayCustomizations, a Components<Theme> map applied by
-AppTheme, covering lists, chips, table pagination and icons.
MUI style overrides for feedback components.
-Exports feedbackCustomizations, a Components<Theme> map applied by
-AppTheme, covering alerts, dialogs and linear progress.
MUI style overrides for form inputs and buttons.
-Exports inputsCustomizations, a Components<Theme> map applied by
-AppTheme, covering buttons, icon buttons, toggles, checkbox, outlined
-inputs and form labels with light/dark variants.
MUI style overrides for navigation components.
-Exports navigationCustomizations, a Components<Theme> map applied by
-AppTheme, covering menus, selects, links, drawers, pagination, tabs and
-steppers.
MUI style overrides for surface components.
-Exports surfacesCustomizations, a Components<Theme> map applied by
-AppTheme, covering accordions, paper, cards and card sections.
Semantic (mode-aware) color tokens.
-Adds a semantic slice to the MUI theme (augmenting @mui/material/styles)
-with surface/border/text colors, resolved per light/dark mode by
-getSemanticColors. AppTheme publishes these as CSS custom properties.
Base design tokens and palettes for the Veterinary Clinic theme.
-Defines the raw color ramps (brand, gray, green, orange, red), the
-light/dark design tokens (getDesignTokens), and the colorSchemes,
-typography, shape and shadows primitives. Also augments MUI's theme
-types with the ColorRange, flows and baseShadow extensions.
Color mode of the app theme.
-Color mode supported by the semantic tokens.
-ConstThe SpecConfiguration passed to AppProvider.
specUrl / baseApiUrl - derived from VITE_API_BASE_URL.title - "Veterinary Clinic".resourceConfig.appointments.filterOptions.mode - "client".getToken is intentionally left commented out; this demo has no auth.
ConstContext giving the current color mode and its setters.
-ConstComponent overrides for lists, chips, table pagination and icons.
-ConstComponent overrides for alerts, dialogs and linear progress.
-ConstComponent overrides for buttons, toggles, inputs and labels.
-ConstComponent overrides for menus, selects, links, drawers, pagination and tabs.
-ConstComponent overrides for accordions, paper and cards.
-ConstBrand blue color ramp (50-900).
-ConstExplicit light/dark colorSchemes palette definitions.
ConstNeutral gray color ramp (50-900, plus 750/850).
-ConstGreen (success) color ramp (50-900).
-ConstOrange (warning) color ramp (50-900).
-ConstRed (error) color ramp (50-900).
-ConstShadow scale (index 0 none, index 1 the template baseShadow).
ConstTypography scale (Inter) used by the theme.
-
Fixed bottom app bar showing the site copyright.
-