@adea-ai/ui 0.128.3 → 0.129.0

package/dist/r/theming.json

@@ -33,6 +33,11 @@
       "type": "registry:ui",
       "target": "components/theming/lazy.ts"
     },
+    {
+      "path": "src/components/theme/script.ts",
+      "type": "registry:ui",
+      "target": "components/theming/script.ts"
+    },
     {
       "path": "src/components/theme/theme-catalogue-source.ts",
       "type": "registry:ui",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.128.3",
+  "version": "0.129.0",
   "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/script": {
+      "types": "./dist/components/theme/script.d.ts",
+      "solid": "./src/components/theme/script.ts",
+      "development": "./src/components/theme/script.ts",
+      "import": "./dist/components/theme/script.js"
+    },
     "./components/theme/lazy": {
       "types": "./dist/components/theme/lazy.d.ts",
       "solid": "./src/components/theme/lazy.ts",

package/registry.json

@@ -2532,6 +2532,11 @@
           "type": "registry:ui",
           "target": "components/theming/lazy.ts"
         },
+        {
+          "path": "src/components/theme/script.ts",
+          "type": "registry:ui",
+          "target": "components/theming/script.ts"
+        },
         {
           "path": "src/components/theme/theme-catalogue-source.ts",
           "type": "registry:ui",
@@ -2789,6 +2794,11 @@
           "type": "registry:lib",
           "target": "lib/theme-engine.ts"
         },
+        {
+          "path": "src/lib/theme-records.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-records.ts"
+        },
         {
           "path": "src/lib/theme-surface.ts",
           "type": "registry:lib",

package/src/components/theme/script.ts

@@ -0,0 +1,11 @@
+/**
+ * The no-flash boot script, importable where there is no UI runtime.
+ *
+ * `themeScript` writes the document attributes before first paint. A host that
+ * renders its HTML at build time (a Vite `index.html` served by a desktop shell
+ * whose CSP allows no inline script) needs the string in Node, and the provider
+ * entries cannot be imported there: they load Solid's client runtime. This entry
+ * holds only the script and the types it takes, so it loads anywhere.
+ */
+export { inlineScriptLiteral, themeScript, type ThemeScriptOptions } from './theme-script'
+export type { ThemeStorageSchema } from './theme-persistence'

package/src/lib/accent-presets.ts

@@ -4,7 +4,8 @@ import { ACCENTS } from '@adea-ai/themes'
  * Its own module so the theme provider's start-up path (the stored-preference reader
  * and the boot script both need the preset ids) does not import the token manifest in
  * `tokens.ts`, which is 20 KB of documentation data a provider never reads.
- * `tokens.ts` re-exports both names, so every existing import keeps working.
+ * `tokens.ts` re-exports `accentPresets` and `AccentPreset`, and `themes.ts` re-exports
+ * `accents`, so every existing import keeps working.
  */
 
 /**
@@ -41,3 +42,13 @@ export const accentPresets: readonly AccentPreset[] = Object.freeze([
   },
   ...ACCENTS,
 ])
+
+/**
+ * The six brand accent presets, in the order a picker should show them: the list
+ * `accentPresets` carries after its own `theme` entry.
+ *
+ * Here and not beside the theme table in `lib/themes.ts` (which re-exports it, so
+ * `@adea-ai/ui/lib/themes` still has it) because a bundler places a module whole, and
+ * a host that wants only the list should not ship the 34-theme catalogue with it.
+ */
+export const accents = ACCENTS

package/src/lib/theme-records.ts

@@ -0,0 +1,205 @@
+/**
+ * One catalogue record, as this system's {@link ThemeVariant}.
+ *
+ * `variantFromRecord` and the lazy form the catalogue is built with live here, and not
+ * beside the 34-theme table in `lib/themes.ts`, because a bundler places a module
+ * whole: a host that imports `variantFromRecord` from the same module as the table
+ * ships the table with it. This module reads a record it is handed and imports no
+ * catalogue, so a start-up path that only turns a stored record into a variant
+ * (an imported theme, a reconstruction) stays small. `lib/themes.ts` re-exports
+ * `variantFromRecord`, so `@adea-ai/ui/lib/themes` keeps working; the lazy start-up
+ * gate (`check:theme-startup`) holds the split in place.
+ *
+ * It does import `@adea-ai/themes` for the projection helpers (`chartSeries`,
+ * `tint`, `shadcnVariables`…), none of which reads the table of themes.
+ */
+import {
+  chartSeries,
+  shadcnDestructiveProjection,
+  statusForeground,
+  syntaxRoles,
+  tint,
+  type AdeaThemeRecord,
+} from '@adea-ai/themes'
+import { shadcnVariables } from '@adea-ai/themes/adapters/shadcn'
+import type {
+  ThemeColors,
+  ThemeEditorPalette,
+  ThemeProvenance,
+  ThemeTerminalPalette,
+  ThemeVariant,
+} from './themes'
+
+/**
+ * The shadcn-vocabulary roles of one catalogue entry.
+ *
+ * The expensive half of a variant: `shadcnVariables` projects the whole palette
+ * (about 4 ms a theme), which is why {@link lazyVariantFromRecord} defers it.
+ */
+function colorsOf(theme: AdeaThemeRecord): ThemeColors {
+  const projected = shadcnVariables(theme)
+  const token = (name: string): string => {
+    const value = projected[`--${name}`]
+    if (!value) throw new Error(`${theme.id} has no shared shadcn projection for --${name}`)
+    return value
+  }
+  const destructiveAction = shadcnDestructiveProjection(theme)
+  return {
+    background: token('background'),
+    foreground: token('foreground'),
+    card: token('card'),
+    cardForeground: token('card-foreground'),
+    popover: token('popover'),
+    popoverForeground: token('popover-foreground'),
+    primary: token('primary'),
+    primaryForeground: token('primary-foreground'),
+    secondary: token('secondary'),
+    secondaryForeground: token('secondary-foreground'),
+    muted: token('muted'),
+    mutedForeground: token('muted-foreground'),
+    accent: token('accent'),
+    accentForeground: token('accent-foreground'),
+    // Preserve the UI's semantic error token. The Themes projection uses its
+    // contrast-safe solid-action fill for --destructive; UI keeps that fill in
+    // the separate destructiveAction pair below.
+    destructive: theme.colors.error,
+    destructiveForeground: statusForeground(theme, 'error'),
+    destructiveSubtle: tint(theme.colors.error, theme.colors.background),
+    destructiveAction: destructiveAction.fill,
+    destructiveActionForeground: destructiveAction.foreground,
+    success: token('success'),
+    successForeground: statusForeground(theme, 'success'),
+    successSubtle: tint(theme.colors.success, theme.colors.background),
+    warning: token('warning'),
+    warningForeground: statusForeground(theme, 'warning'),
+    warningSubtle: tint(theme.colors.warning, theme.colors.background),
+    info: token('info'),
+    infoForeground: statusForeground(theme, 'info'),
+    infoSubtle: tint(theme.colors.info, theme.colors.background),
+    border: token('border'),
+    input: token('input'),
+    ring: token('ring'),
+    sidebar: token('sidebar'),
+    sidebarForeground: token('sidebar-foreground'),
+    sidebarAccent: token('sidebar-accent'),
+    sidebarBorder: token('sidebar-border'),
+    sidebarMutedForeground: token('sidebar-muted-foreground'),
+  }
+}
+
+// The embedded terminal uses the theme's own canvas rather than a palette of its
+// own. The ANSI colours came from the palette that produced the canvas, so they
+// were chosen against it; a terminal on a different background would be the one
+// surface in the application not lit by the active theme.
+function terminalOf(theme: AdeaThemeRecord): ThemeTerminalPalette {
+  return {
+    background: theme.colors.background,
+    foreground: theme.colors.foreground,
+    cursor: theme.cursor,
+    selection: theme.selection,
+    ...theme.ansi,
+  }
+}
+
+function editorOf(theme: AdeaThemeRecord): ThemeEditorPalette {
+  const syntax = syntaxRoles(theme)
+  return {
+    keyword: syntax.keyword,
+    string: syntax.string,
+    number: syntax.number,
+    comment: syntax.comment,
+    function: syntax.function,
+    variable: syntax.variable,
+    type: syntax.type,
+    tag: syntax.tag,
+    attribute: syntax.attribute,
+    operator: syntax.operator,
+    heading: syntax.heading,
+    link: syntax.link,
+    diffAdd: syntax.diffAdd,
+    diffDelete: syntax.diffDelete,
+    diffHunk: syntax.diffHunk,
+    searchMatch: syntax.searchMatch,
+  }
+}
+
+function provenanceOf(theme: AdeaThemeRecord): ThemeProvenance {
+  return {
+    source: theme.provenance.project,
+    url: theme.provenance.url,
+    license: theme.provenance.license,
+  }
+}
+
+/**
+ * The design system's view of one catalogue record, built in full and at once.
+ *
+ * For a host that holds a record the catalogue does not — an imported theme, a
+ * reconstruction from stored data — and wants a variant it can hand to
+ * `ThemeProvider`'s `themes`. It throws for a record the shadcn projection cannot
+ * map, here and now, rather than on first paint. The catalogue itself goes through
+ * {@link lazyVariantFromRecord} instead.
+ */
+export function variantFromRecord(theme: AdeaThemeRecord): ThemeVariant {
+  return {
+    id: theme.id,
+    family: theme.family,
+    familyLabel: theme.familyLabel,
+    label: theme.label,
+    appearance: theme.appearance,
+    description: theme.description,
+    colors: colorsOf(theme),
+    terminal: terminalOf(theme),
+    editor: editorOf(theme),
+    chart: chartSeries(theme),
+    provenance: provenanceOf(theme),
+  }
+}
+
+/** Runs `build` on first call and returns that value from then on. A throw is not cached. */
+function once<T>(build: () => T): () => T {
+  let built = false
+  let value: T
+  return () => {
+    if (!built) {
+      value = build()
+      built = true
+    }
+    return value
+  }
+}
+
+const lazy = <T>(build: () => T): PropertyDescriptor => ({
+  get: once(build),
+  enumerable: true,
+})
+
+/**
+ * {@link variantFromRecord} with the four derived palettes built on first read.
+ *
+ * Evaluating this module used to project all 34 catalogue themes up front, about
+ * 155 ms before a single one was needed, on the hydration path of every consumer.
+ * A page paints one variant, and a picker's labels and appearance are plain
+ * fields, so only a variant whose `colors`, `terminal`, `editor` or `chart` is read
+ * pays for them, once. The properties stay enumerable data-shaped accessors, so
+ * spreading, `Object.entries` and JSON see the same object they always did.
+ */
+export function lazyVariantFromRecord(theme: AdeaThemeRecord): ThemeVariant {
+  return Object.defineProperties(
+    {
+      id: theme.id,
+      family: theme.family,
+      familyLabel: theme.familyLabel,
+      label: theme.label,
+      appearance: theme.appearance,
+      description: theme.description,
+      provenance: provenanceOf(theme),
+    },
+    {
+      colors: lazy(() => colorsOf(theme)),
+      terminal: lazy(() => terminalOf(theme)),
+      editor: lazy(() => editorOf(theme)),
+      chart: lazy(() => chartSeries(theme)),
+    }
+  ) as ThemeVariant
+}

package/src/lib/themes.ts

@@ -34,18 +34,12 @@
  */
 
 import {
-  ACCENTS,
   accentForeground,
-  chartSeries,
   editorRolesHex,
   getAccent,
   getTheme,
   hasTheme,
-  shadcnDestructiveProjection,
-  statusForeground,
-  tint,
   primarySubtleCss,
-  syntaxRoles,
   themes as catalogue,
   themesByAppearance,
   themeAccentPresets,
@@ -55,15 +49,17 @@ import {
   type AdeaThemeRecord,
   type ContrastFinding,
 } from '@adea-ai/themes'
-import { shadcnVariables } from '@adea-ai/themes/adapters/shadcn'
 import { accentOverrideVariables, resolveAccentRoles, type AccentRoles } from './accent-roles'
 import { isThemeAccentId } from './theme-accents'
 import { themeCssVariablesWith } from './theme-css'
 import { defaultDarkThemeId, defaultLightThemeId } from './theme-defaults'
+import { lazyVariantFromRecord } from './theme-records'
 
+export { accents } from './accent-presets'
 export { isThemeAccentId } from './theme-accents'
 export { terminalCssVariables, tokensAsHex } from './theme-css'
 export { defaultDarkThemeId, defaultLightThemeId, resolveVariant } from './theme-defaults'
+export { variantFromRecord } from './theme-records'
 
 export type ThemeAppearance = 'light' | 'dark'
 
@@ -194,180 +190,6 @@ export type ThemeVariant = {
   tokens?: Readonly<Record<string, string>>
 }
 
-/**
- * The shadcn-vocabulary roles of one catalogue entry.
- *
- * The expensive half of a variant: `shadcnVariables` projects the whole palette
- * (about 4 ms a theme), which is why {@link lazyVariant} defers it.
- */
-function colorsOf(theme: AdeaThemeRecord): ThemeColors {
-  const projected = shadcnVariables(theme)
-  const token = (name: string): string => {
-    const value = projected[`--${name}`]
-    if (!value) throw new Error(`${theme.id} has no shared shadcn projection for --${name}`)
-    return value
-  }
-  const destructiveAction = shadcnDestructiveProjection(theme)
-  return {
-    background: token('background'),
-    foreground: token('foreground'),
-    card: token('card'),
-    cardForeground: token('card-foreground'),
-    popover: token('popover'),
-    popoverForeground: token('popover-foreground'),
-    primary: token('primary'),
-    primaryForeground: token('primary-foreground'),
-    secondary: token('secondary'),
-    secondaryForeground: token('secondary-foreground'),
-    muted: token('muted'),
-    mutedForeground: token('muted-foreground'),
-    accent: token('accent'),
-    accentForeground: token('accent-foreground'),
-    // Preserve the UI's semantic error token. The Themes projection uses its
-    // contrast-safe solid-action fill for --destructive; UI keeps that fill in
-    // the separate destructiveAction pair below.
-    destructive: theme.colors.error,
-    destructiveForeground: statusForeground(theme, 'error'),
-    destructiveSubtle: tint(theme.colors.error, theme.colors.background),
-    destructiveAction: destructiveAction.fill,
-    destructiveActionForeground: destructiveAction.foreground,
-    success: token('success'),
-    successForeground: statusForeground(theme, 'success'),
-    successSubtle: tint(theme.colors.success, theme.colors.background),
-    warning: token('warning'),
-    warningForeground: statusForeground(theme, 'warning'),
-    warningSubtle: tint(theme.colors.warning, theme.colors.background),
-    info: token('info'),
-    infoForeground: statusForeground(theme, 'info'),
-    infoSubtle: tint(theme.colors.info, theme.colors.background),
-    border: token('border'),
-    input: token('input'),
-    ring: token('ring'),
-    sidebar: token('sidebar'),
-    sidebarForeground: token('sidebar-foreground'),
-    sidebarAccent: token('sidebar-accent'),
-    sidebarBorder: token('sidebar-border'),
-    sidebarMutedForeground: token('sidebar-muted-foreground'),
-  }
-}
-
-// The embedded terminal uses the theme's own canvas rather than a palette of its
-// own. The ANSI colours came from the palette that produced the canvas, so they
-// were chosen against it; a terminal on a different background would be the one
-// surface in the application not lit by the active theme.
-function terminalOf(theme: AdeaThemeRecord): ThemeTerminalPalette {
-  return {
-    background: theme.colors.background,
-    foreground: theme.colors.foreground,
-    cursor: theme.cursor,
-    selection: theme.selection,
-    ...theme.ansi,
-  }
-}
-
-function editorOf(theme: AdeaThemeRecord): ThemeEditorPalette {
-  const syntax = syntaxRoles(theme)
-  return {
-    keyword: syntax.keyword,
-    string: syntax.string,
-    number: syntax.number,
-    comment: syntax.comment,
-    function: syntax.function,
-    variable: syntax.variable,
-    type: syntax.type,
-    tag: syntax.tag,
-    attribute: syntax.attribute,
-    operator: syntax.operator,
-    heading: syntax.heading,
-    link: syntax.link,
-    diffAdd: syntax.diffAdd,
-    diffDelete: syntax.diffDelete,
-    diffHunk: syntax.diffHunk,
-    searchMatch: syntax.searchMatch,
-  }
-}
-
-function provenanceOf(theme: AdeaThemeRecord): ThemeProvenance {
-  return {
-    source: theme.provenance.project,
-    url: theme.provenance.url,
-    license: theme.provenance.license,
-  }
-}
-
-/**
- * The design system's view of one catalogue record, built in full and at once.
- *
- * For a host that holds a record the catalogue does not — an imported theme, a
- * reconstruction from stored data — and wants a variant it can hand to
- * `ThemeProvider`'s `themes`. It throws for a record the shadcn projection cannot
- * map, here and now, rather than on first paint. The catalogue itself goes through
- * {@link lazyVariant} instead.
- */
-export function variantFromRecord(theme: AdeaThemeRecord): ThemeVariant {
-  return {
-    id: theme.id,
-    family: theme.family,
-    familyLabel: theme.familyLabel,
-    label: theme.label,
-    appearance: theme.appearance,
-    description: theme.description,
-    colors: colorsOf(theme),
-    terminal: terminalOf(theme),
-    editor: editorOf(theme),
-    chart: chartSeries(theme),
-    provenance: provenanceOf(theme),
-  }
-}
-
-/** Runs `build` on first call and returns that value from then on. A throw is not cached. */
-function once<T>(build: () => T): () => T {
-  let built = false
-  let value: T
-  return () => {
-    if (!built) {
-      value = build()
-      built = true
-    }
-    return value
-  }
-}
-
-const lazy = <T>(build: () => T): PropertyDescriptor => ({
-  get: once(build),
-  enumerable: true,
-})
-
-/**
- * {@link variantFromRecord} with the four derived palettes built on first read.
- *
- * Evaluating this module used to project all 34 catalogue themes up front, about
- * 155 ms before a single one was needed, on the hydration path of every consumer.
- * A page paints one variant, and a picker's labels and appearance are plain
- * fields, so only a variant whose `colors`, `terminal`, `editor` or `chart` is read
- * pays for them, once. The properties stay enumerable data-shaped accessors, so
- * spreading, `Object.entries` and JSON see the same object they always did.
- */
-function lazyVariant(theme: AdeaThemeRecord): ThemeVariant {
-  return Object.defineProperties(
-    {
-      id: theme.id,
-      family: theme.family,
-      familyLabel: theme.familyLabel,
-      label: theme.label,
-      appearance: theme.appearance,
-      description: theme.description,
-      provenance: provenanceOf(theme),
-    },
-    {
-      colors: lazy(() => colorsOf(theme)),
-      terminal: lazy(() => terminalOf(theme)),
-      editor: lazy(() => editorOf(theme)),
-      chart: lazy(() => chartSeries(theme)),
-    }
-  ) as ThemeVariant
-}
-
 /**
  * A variant's `--primary-subtle`: the tint over `var(--primary)` at the strength its
  * catalogue record measures (`primarySubtleAlpha`). A variant that is not in the
@@ -386,7 +208,7 @@ export function primarySubtleFor(theme: Pick<ThemeVariant, 'id' | 'appearance'>)
  * (`tokensAsHex`, `isThemeAccentId`, `resolveVariant`…) and never reads it.
  */
 export const builtinThemes: readonly ThemeVariant[] = /* @__PURE__ */ Object.freeze(
-  /* @__PURE__ */ catalogue.map(lazyVariant)
+  /* @__PURE__ */ catalogue.map(lazyVariantFromRecord)
 )
 
 export function themeById(id: string): ThemeVariant | undefined {
@@ -415,9 +237,6 @@ export function themeFamilies(): { family: string; label: string; themes: ThemeV
   return [...families.values()]
 }
 
-/** The accent presets, in the order a picker should show them. */
-export const accents = ACCENTS
-
 /**
  * The canonical catalogue records, in catalogue order.
  *