@adea-ai/ui 0.128.1 → 0.128.3

package/dist/r/src/lib/themes.ts

@@ -44,7 +44,6 @@ import {
   shadcnDestructiveProjection,
   statusForeground,
   tint,
-  primaryHover,
   primarySubtleCss,
   syntaxRoles,
   themes as catalogue,
@@ -57,11 +56,14 @@ import {
   type ContrastFinding,
 } from '@adea-ai/themes'
 import { shadcnVariables } from '@adea-ai/themes/adapters/shadcn'
-import { oklchToHex, parseColor } from '@adea-ai/themes/oklch'
 import { accentOverrideVariables, resolveAccentRoles, type AccentRoles } from './accent-roles'
 import { isThemeAccentId } from './theme-accents'
+import { themeCssVariablesWith } from './theme-css'
+import { defaultDarkThemeId, defaultLightThemeId } from './theme-defaults'
 
 export { isThemeAccentId } from './theme-accents'
+export { terminalCssVariables, tokensAsHex } from './theme-css'
+export { defaultDarkThemeId, defaultLightThemeId, resolveVariant } from './theme-defaults'
 
 export type ThemeAppearance = 'light' | 'dark'
 
@@ -376,46 +378,22 @@ export function primarySubtleFor(theme: Pick<ThemeVariant, 'id' | 'appearance'>)
   return record ? primarySubtleCss(record) : primarySubtleCss(theme.appearance)
 }
 
-/** The catalogue, in catalogue order. */
-export const builtinThemes: readonly ThemeVariant[] = Object.freeze(catalogue.map(lazyVariant))
+/**
+ * The catalogue, in catalogue order.
+ *
+ * The `@__PURE__` marks let a bundler drop the whole table, and with it the catalogue,
+ * from a consumer that imports only this module's catalogue-free helpers
+ * (`tokensAsHex`, `isThemeAccentId`, `resolveVariant`…) and never reads it.
+ */
+export const builtinThemes: readonly ThemeVariant[] = /* @__PURE__ */ Object.freeze(
+  /* @__PURE__ */ catalogue.map(lazyVariant)
+)
 
 export function themeById(id: string): ThemeVariant | undefined {
   if (!hasTheme(id)) return undefined
   return builtinThemes.find((theme) => theme.id === id)
 }
 
-/**
- * The variant a stored id means, or the default of the same appearance.
- *
- * An id the registry does not hold — an imported theme that was deleted, a
- * catalogue entry that was renamed — must still paint *something of the appearance
- * being shown*. Falling back to whichever variant happens to be first in the
- * registry painted a dark palette under a light `color-scheme` for a light id, so
- * the fallback is the appearance's own default, then any variant of that
- * appearance, then the registry's first entry only when it holds nothing else.
- *
- * `registry` is the builtin catalogue plus whatever extras the host supplies; the
- * stored id is never rewritten, only resolved, so a host that keeps an unknown id
- * keeps resolving it if the theme comes back.
- *
- * The fallback order is translated from Zeron's `ThemeRegistry::resolve` (MIT,
- * Copyright (c) 2026 Wing); see NOTICE.
- */
-export function resolveVariant(
-  registry: readonly ThemeVariant[],
-  id: string,
-  appearance: ThemeAppearance
-): ThemeVariant {
-  const found = registry.find((variant) => variant.id === id)
-  if (found) return found
-  const defaultId = appearance === 'dark' ? defaultDarkThemeId : defaultLightThemeId
-  return (
-    registry.find((variant) => variant.id === defaultId) ??
-    registry.find((variant) => variant.appearance === appearance) ??
-    registry[0]!
-  )
-}
-
 /** The variants of one appearance, which is what a picker for that mode shows. */
 export function themesForAppearance(appearance: ThemeAppearance): readonly ThemeVariant[] {
   const ids = new Set(themesByAppearance(appearance).map((theme) => theme.id))
@@ -708,166 +686,27 @@ export function editorPaletteFor(
 /**
  * The roles a variant sets, as CSS custom properties.
  *
- * The one place that knows the mapping from a theme's roles to this system's variable
- * names. A provider applies this; nothing else repeats it. The `--terminal-*` and
- * `--editor-*` ramps are presentations of the catalogue's ANSI and syntax data rather
- * than separate roles, which is why they are built here and not in the catalogue.
- *
- * `options.editor` picks the `--editor-*` projection ({@link EditorRolesMode}).
- * Absent it, the result is what it has always been; the generated `theme-variants.css`
- * and the design-system artifact are built without it.
+ * The mapping itself is `themeCssVariablesWith` in `theme-css.ts`; this binds it to
+ * the catalogue, which measures a theme's `--primary-subtle` strength
+ * ({@link primarySubtleFor}) and projects its floor editor ramp
+ * ({@link editorPaletteFor}). Absent `options`, the result is what it has always
+ * been; the generated `theme-variants.css` and the design-system artifact are built
+ * without it.
  */
 export function themeCssVariables(
   theme: ThemeVariant,
   options: ThemeCssVariableOptions = {}
 ): Record<string, string> {
-  const c = theme.colors
-  const t = theme.terminal
-  const e = editorPaletteFor(theme, options.editor)
-  const derived = {
-    '--background': c.background,
-    '--foreground': c.foreground,
-    '--card': c.card,
-    '--card-foreground': c.cardForeground,
-    '--popover': c.popover,
-    '--popover-foreground': c.popoverForeground,
-    '--primary': c.primary,
-    '--primary-foreground': c.primaryForeground,
-    /*
-     * The two tokens derived from the primary, and they are here rather than left to
-     * `theme.css` because they must follow `--primary` — which this function writes
-     * for *any* theme in the catalogue, not just the two defaults `theme.css` carries.
-     *
-     * `--primary-hover` is a resolved colour, not a `color-mix()`: a uniform hover
-     * step cannot be expressed as a mix (see `primaryHover`). Left out, a theme switch
-     * would keep the previous theme's hover on the new theme's primary.
-     *
-     * `--primary-subtle` is a mix over `--primary`, so it follows an accent on its
-     * own, but its *strength* is per theme: `primarySubtleCss(record)` lowers the
-     * appearance ceiling only as far as this theme needs for body text to clear 4.5:1
-     * on the tint, over every surface, for every accent it offers. It has to be
-     * written per theme for that reason — the appearance-wide value is not legible on
-     * every palette.
-     */
-    '--primary-hover': primaryHover(c.primary, theme.appearance),
-    '--primary-subtle': primarySubtleFor(theme),
-    '--secondary': c.secondary,
-    '--secondary-foreground': c.secondaryForeground,
-    '--muted': c.muted,
-    '--muted-foreground': c.mutedForeground,
-    '--accent': c.accent,
-    '--accent-foreground': c.accentForeground,
-    '--destructive': c.destructive,
-    '--destructive-foreground': c.destructiveForeground,
-    '--destructive-subtle': c.destructiveSubtle,
-    '--destructive-action': c.destructiveAction,
-    '--destructive-action-foreground': c.destructiveActionForeground,
-    '--success': c.success,
-    '--success-foreground': c.successForeground,
-    '--success-subtle': c.successSubtle,
-    '--warning': c.warning,
-    '--warning-foreground': c.warningForeground,
-    '--warning-subtle': c.warningSubtle,
-    '--info': c.info,
-    '--info-foreground': c.infoForeground,
-    '--info-subtle': c.infoSubtle,
-    '--border': c.border,
-    '--input': c.input,
-    '--ring': c.ring,
-    '--sidebar': c.sidebar,
-    '--sidebar-foreground': c.sidebarForeground,
-    '--sidebar-accent': c.sidebarAccent,
-    '--sidebar-border': c.sidebarBorder,
-    '--sidebar-primary': c.primary,
-    '--sidebar-primary-foreground': c.primaryForeground,
-    '--sidebar-ring': c.ring,
-    '--sidebar-muted-foreground': c.sidebarMutedForeground,
-    '--surface-sunken': c.muted,
-    '--surface-hover': c.accent,
-    '--surface-active': c.border,
-    '--chrome': c.background,
-    '--terminal-background': t.background,
-    '--terminal-foreground': t.foreground,
-    '--terminal-cursor': t.cursor,
-    '--terminal-selection': t.selection,
-    '--terminal-ansi-black': t.black,
-    '--terminal-ansi-red': t.red,
-    '--terminal-ansi-green': t.green,
-    '--terminal-ansi-yellow': t.yellow,
-    '--terminal-ansi-blue': t.blue,
-    '--terminal-ansi-magenta': t.magenta,
-    '--terminal-ansi-cyan': t.cyan,
-    '--terminal-ansi-white': t.white,
-    '--terminal-ansi-bright-black': t.brightBlack,
-    '--terminal-ansi-bright-red': t.brightRed,
-    '--terminal-ansi-bright-green': t.brightGreen,
-    '--terminal-ansi-bright-yellow': t.brightYellow,
-    '--terminal-ansi-bright-blue': t.brightBlue,
-    '--terminal-ansi-bright-magenta': t.brightMagenta,
-    '--terminal-ansi-bright-cyan': t.brightCyan,
-    '--terminal-ansi-bright-white': t.brightWhite,
-    '--editor-keyword': e.keyword,
-    '--editor-string': e.string,
-    '--editor-number': e.number,
-    '--editor-comment': e.comment,
-    '--editor-function': e.function,
-    '--editor-variable': e.variable,
-    '--editor-type': e.type,
-    '--editor-tag': e.tag,
-    '--editor-attribute': e.attribute,
-    '--editor-operator': e.operator,
-    '--editor-heading': e.heading,
-    '--editor-link': e.link,
-    '--editor-diff-add': e.diffAdd,
-    '--editor-diff-delete': e.diffDelete,
-    '--editor-diff-hunk': e.diffHunk,
-    '--editor-search-match': e.searchMatch,
-    '--chart-1': theme.chart[0] ?? c.primary,
-    '--chart-2': theme.chart[1] ?? c.info,
-    '--chart-3': theme.chart[2] ?? c.success,
-    '--chart-4': theme.chart[3] ?? c.warning,
-    '--chart-5': theme.chart[4] ?? c.destructive,
-    '--chart-6': theme.chart[5] ?? c.mutedForeground,
-  }
-  return theme.tokens ? { ...derived, ...theme.tokens } : derived
-}
-
-/**
- * The `--terminal-*` properties of a variant: the palette a terminal paints.
- *
- * What a pinned terminal theme writes over the interface variant's own. Taken from
- * {@link themeCssVariables} rather than rebuilt, so the names, and a custom
- * variant's verbatim `tokens`, can never drift from what the interface variant
- * would have written for the same palette.
- */
-export function terminalCssVariables(theme: ThemeVariant): Record<string, string> {
-  return Object.fromEntries(
-    Object.entries(themeCssVariables(theme)).filter(([name]) => name.startsWith('--terminal-'))
+  return themeCssVariablesWith(
+    {
+      primarySubtle: primarySubtleFor,
+      editor: (variant, mode) => editorPaletteFor(variant, mode),
+    },
+    theme,
+    options
   )
 }
 
-/**
- * Token values with every `oklch()` colour written as `#rrggbb`.
- *
- * For a host whose stylesheet, tests or native shell speak hex: the catalogue's
- * roles are `oklch()` strings, and this is the one conversion, gamut-mapped by the
- * catalogue's own `oklchToHex`. A value that is already hex, carries alpha
- * (`rgba()`), or is not a plain colour (`color-mix()`, `var()`) is left byte for
- * byte, because converting would either lose the alpha or be a guess. Suitable as
- * `ThemeProvider`'s `transformTokens`.
- */
-export function tokensAsHex(tokens: Readonly<Record<string, string>>): Record<string, string> {
-  const converted: Record<string, string> = {}
-  for (const [name, value] of Object.entries(tokens)) {
-    const trimmed = value.trim()
-    // `parseOklch` discards alpha, so a translucent oklch() stays as written.
-    const opaque = trimmed.startsWith('oklch(') && !trimmed.includes('/')
-    const parsed = opaque ? parseColor(trimmed) : undefined
-    converted[name] = parsed ? oklchToHex(parsed) : value
-  }
-  return converted
-}
-
 /* ---------------------------------------------------------------------------
  * Validation
  *
@@ -914,8 +753,5 @@ export function validateThemeRegistry(
   return [...orphaned, ...validateCatalogue(records).map(toFinding)]
 }
 
-export const defaultLightThemeId = 'adea-light'
-export const defaultDarkThemeId = 'adea-dark'
-
 /** Re-exported so a consumer measuring a colour does not need a second import. */
 export { contrastRatio } from '@adea-ai/themes'

package/dist/r/src/lib/tokens.ts

@@ -17,7 +17,6 @@
  * token exists" a property the build enforces rather than a promise.
  */
 
-import { ACCENTS } from '@adea-ai/themes'
 export { fontOptions } from './font-catalog'
 export type { FontOption } from './font-catalog'
 
@@ -705,40 +704,7 @@ export const zIndexTokens: TokenDefinition[] = [
   },
 ]
 
-/**
- * The accent axis.
- *
- * adea's accent presets, as a selection rather than a constant. `theme` is the
- * default and means "the variant's own primary" — monochrome in adea's palette —
- * and each named preset overrides the interactive roles through the
- * `[data-accent]` blocks in `theme.css`.
- *
- * These are the same six presets `accentPresets` exports in adea's own
- * `appearance.ts`, and the values match. A consumer's appearance picker and the
- * workshop's theme toolbar read this one list, so the two cannot disagree about
- * what a preset is called or what colour it is.
- */
-export type AccentPreset = {
-  /** The `data-accent` value. `theme` is the variant's own primary. */
-  id: string
-  label: string
-  /** What the preset is for, in the gallery and in a picker. */
-  description: string
-  /** The accent as it appears in the light theme. Absent for `theme`. */
-  light?: string
-  /** The accent as it appears in the dark theme. Absent for `theme`. */
-  dark?: string
-}
-
-export const accentPresets: readonly AccentPreset[] = Object.freeze([
-  {
-    id: 'theme',
-    label: 'Theme',
-    description:
-      "The variant's own primary. Neutral in adea's palette, so the interface stays monochrome.",
-  },
-  ...ACCENTS,
-])
+export { accentPresets, type AccentPreset } from './accent-presets'
 
 /** Every token, in gallery order. */
 export const designTokens = {

package/dist/r/theming.json

@@ -28,11 +28,26 @@
       "type": "registry:ui",
       "target": "components/theming/index.ts"
     },
+    {
+      "path": "src/components/theme/lazy.ts",
+      "type": "registry:ui",
+      "target": "components/theming/lazy.ts"
+    },
+    {
+      "path": "src/components/theme/theme-catalogue-source.ts",
+      "type": "registry:ui",
+      "target": "components/theming/theme-catalogue-source.ts"
+    },
     {
       "path": "src/components/theme/theme-context.ts",
       "type": "registry:ui",
       "target": "components/theming/theme-context.ts"
     },
+    {
+      "path": "src/components/theme/theme-document-core.ts",
+      "type": "registry:ui",
+      "target": "components/theming/theme-document-core.ts"
+    },
     {
       "path": "src/components/theme/theme-document.ts",
       "type": "registry:ui",
@@ -53,6 +68,21 @@
       "type": "registry:ui",
       "target": "components/theming/theme-picker.tsx"
     },
+    {
+      "path": "src/components/theme/theme-provider-core.tsx",
+      "type": "registry:ui",
+      "target": "components/theming/theme-provider-core.tsx"
+    },
+    {
+      "path": "src/components/theme/theme-provider-lazy.tsx",
+      "type": "registry:ui",
+      "target": "components/theming/theme-provider-lazy.tsx"
+    },
+    {
+      "path": "src/components/theme/theme-provider-value.ts",
+      "type": "registry:ui",
+      "target": "components/theming/theme-provider-value.ts"
+    },
     {
       "path": "src/components/theme/theme-provider.tsx",
       "type": "registry:ui",
@@ -63,6 +93,11 @@
       "type": "registry:ui",
       "target": "components/theming/theme-script.ts"
     },
+    {
+      "path": "src/components/theme/theme-state-core.ts",
+      "type": "registry:ui",
+      "target": "components/theming/theme-state-core.ts"
+    },
     {
       "path": "src/components/theme/theme-state.ts",
       "type": "registry:ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.128.1",
+  "version": "0.128.3",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",
@@ -74,6 +74,12 @@
     "./fonts.css": "./src/styles/fonts.css",
     "./registry.json": "./registry.json",
     "./package.json": "./package.json",
+    "./components/theme/lazy": {
+      "types": "./dist/components/theme/lazy.d.ts",
+      "solid": "./src/components/theme/lazy.ts",
+      "development": "./src/components/theme/lazy.ts",
+      "import": "./dist/components/theme/lazy.js"
+    },
     "./components/layout/split-layout/model": {
       "types": "./dist/components/layout/split-layout/model.d.ts",
       "solid": "./src/components/layout/split-layout/model.ts",
@@ -109,10 +115,13 @@
     "cn:check": "bun scripts/check-cn-tables.ts",
     "registry:build": "bun run cn:build && bun scripts/build-registry.ts",
     "registry:validate": "bun run cn:check && bun scripts/validate-registry.ts",
-    "pack:check": "bun scripts/check-pack.ts",
-    "check:tree-shaking": "bun scripts/check-tree-shaking.ts",
+    "pack:check": "bun scripts/check-pack.ts && bun scripts/check-lib-exports.ts",
+    "check:lib-exports": "bun scripts/check-lib-exports.ts",
+    "check:tree-shaking": "bun scripts/check-tree-shaking.ts && bun scripts/check-theme-startup.ts",
+    "check:theme-startup": "bun scripts/check-theme-startup.ts",
     "theme:build": "bun scripts/build-default-theme.ts",
     "theme:check": "bun scripts/build-default-theme.ts --check",
+    "theme:defaults": "bun scripts/build-theme-defaults.ts",
     "design-system:build": "bun scripts/design-system/build.ts",
     "check:packed-layout": "node --test scripts/check-packed-layout-process.test.mjs && node scripts/check-packed-layout.mjs && node scripts/check-packed-layout-tree.mjs",
     "check:packed-lint": "node scripts/check-packed-lint.mjs",

package/registry.json

@@ -2527,11 +2527,26 @@
           "type": "registry:ui",
           "target": "components/theming/index.ts"
         },
+        {
+          "path": "src/components/theme/lazy.ts",
+          "type": "registry:ui",
+          "target": "components/theming/lazy.ts"
+        },
+        {
+          "path": "src/components/theme/theme-catalogue-source.ts",
+          "type": "registry:ui",
+          "target": "components/theming/theme-catalogue-source.ts"
+        },
         {
           "path": "src/components/theme/theme-context.ts",
           "type": "registry:ui",
           "target": "components/theming/theme-context.ts"
         },
+        {
+          "path": "src/components/theme/theme-document-core.ts",
+          "type": "registry:ui",
+          "target": "components/theming/theme-document-core.ts"
+        },
         {
           "path": "src/components/theme/theme-document.ts",
           "type": "registry:ui",
@@ -2552,6 +2567,21 @@
           "type": "registry:ui",
           "target": "components/theming/theme-picker.tsx"
         },
+        {
+          "path": "src/components/theme/theme-provider-core.tsx",
+          "type": "registry:ui",
+          "target": "components/theming/theme-provider-core.tsx"
+        },
+        {
+          "path": "src/components/theme/theme-provider-lazy.tsx",
+          "type": "registry:ui",
+          "target": "components/theming/theme-provider-lazy.tsx"
+        },
+        {
+          "path": "src/components/theme/theme-provider-value.ts",
+          "type": "registry:ui",
+          "target": "components/theming/theme-provider-value.ts"
+        },
         {
           "path": "src/components/theme/theme-provider.tsx",
           "type": "registry:ui",
@@ -2562,6 +2592,11 @@
           "type": "registry:ui",
           "target": "components/theming/theme-script.ts"
         },
+        {
+          "path": "src/components/theme/theme-state-core.ts",
+          "type": "registry:ui",
+          "target": "components/theming/theme-state-core.ts"
+        },
         {
           "path": "src/components/theme/theme-state.ts",
           "type": "registry:ui",
@@ -2654,6 +2689,11 @@
       ],
       "registryDependencies": [],
       "files": [
+        {
+          "path": "src/lib/accent-presets.ts",
+          "type": "registry:lib",
+          "target": "lib/accent-presets.ts"
+        },
         {
           "path": "src/lib/accent-roles.ts",
           "type": "registry:lib",
@@ -2719,6 +2759,36 @@
           "type": "registry:lib",
           "target": "lib/theme-accents.ts"
         },
+        {
+          "path": "src/lib/theme-catalogue.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-catalogue.ts"
+        },
+        {
+          "path": "src/lib/theme-css.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-css.ts"
+        },
+        {
+          "path": "src/lib/theme-defaults.generated.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-defaults.generated.ts"
+        },
+        {
+          "path": "src/lib/theme-defaults.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-defaults.ts"
+        },
+        {
+          "path": "src/lib/theme-engine-light.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-engine-light.ts"
+        },
+        {
+          "path": "src/lib/theme-engine.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-engine.ts"
+        },
         {
           "path": "src/lib/theme-surface.ts",
           "type": "registry:lib",

package/src/components/theme/lazy.ts

@@ -0,0 +1,35 @@
+/**
+ * The theme provider with the catalogue out of the start-up path.
+ *
+ * Everything here is free of the 34-theme catalogue: `import` this entry instead of
+ * `@adea-ai/ui/components/theme` in a host that paints its theme from a stylesheet.
+ * The catalogue loads, in a chunk of its own, the first time a stored or previewed
+ * theme needs it. See {@link ThemeProvider} for the rules and `docs/consumption.md`
+ * for the setup.
+ */
+export { loadThemeCatalogue } from './theme-catalogue-source'
+export { ThemeProvider } from './theme-provider-lazy'
+export {
+  createVersionedPersistence,
+  defaultThemeSelection,
+  inlineScriptLiteral,
+  localStoragePersistence,
+  resolvedDensity,
+  themeScript,
+  useOptionalTheme,
+  useTheme,
+  type EditorRolesMode,
+  type ThemeCatalogueSource,
+  type ThemeContextValue,
+  type ThemeDensity,
+  type ThemePersistence,
+  type ThemeProviderProps,
+  type ThemeScriptOptions,
+  type ThemeSelection,
+  type ThemeStorageSchema,
+  type ThemeSurface,
+  type VersionedCodec,
+  type VersionedPersistenceOptions,
+} from './theme-provider-core'
+export { ThemeToggle, type ThemeToggleProps } from './theme-toggle'
+export { ThemeModeToggle, type ThemeModeToggleProps } from './theme-mode-toggle'

package/src/components/theme/theme-catalogue-source.ts

@@ -0,0 +1,59 @@
+import { createSignal } from 'solid-js'
+import type { ThemeEngine } from '#lib/theme-engine'
+import { lightThemeEngine } from '#lib/theme-engine-light'
+import type { ThemeCatalogueSource } from './theme-provider-value'
+
+/**
+ * The full catalogue engine once something has asked for it, shared by every lazy
+ * provider and every caller of {@link loadThemeCatalogue} in the page. A provider
+ * created after the load starts with it already in hand.
+ */
+let loadedEngine: ThemeEngine | undefined
+let loading: Promise<ThemeEngine> | undefined
+
+/**
+ * Load the whole theme catalogue (about 129 KB raw, 34 KB gzipped) and resolve to the
+ * engine backed by it. Idempotent: every call shares one import, and a failed import is
+ * forgotten so the next call retries.
+ *
+ * The lazy provider calls this itself the moment a selection needs a theme beyond the
+ * default pair. Call it earlier — when a settings page mounts, or on hover of its
+ * entry — to have the picker ready by the time it opens.
+ */
+export function loadThemeCatalogue(): Promise<ThemeEngine> {
+  if (loadedEngine) return Promise.resolve(loadedEngine)
+  loading ??= import('#lib/theme-catalogue').then(
+    (module) => {
+      loadedEngine = module.catalogueThemeEngine
+      return loadedEngine
+    },
+    (error: unknown) => {
+      loading = undefined
+      throw error
+    }
+  )
+  return loading
+}
+
+/** A catalogue source for one provider: the shipped defaults until the load resolves. */
+export function createLazyCatalogue(): ThemeCatalogueSource {
+  const [full, setFull] = createSignal<ThemeEngine | undefined>(loadedEngine)
+  const [failed, setFailed] = createSignal(false)
+  const load = () =>
+    loadThemeCatalogue().then(
+      (loaded) => {
+        setFailed(false)
+        setFull(() => loaded)
+      },
+      () => {
+        // The theme the stylesheet painted stays; the next request retries.
+        setFailed(true)
+      }
+    )
+  return {
+    engine: () => full() ?? lightThemeEngine,
+    loaded: () => full() !== undefined,
+    failed,
+    load,
+  }
+}