@adea-ai/ui 0.130.4 → 0.131.1

package/dist/lib/theme-records.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-records.js","names":[],"sources":["../../src/lib/theme-records.ts"],"sourcesContent":["/**\n * One catalogue record, as this system's {@link ThemeVariant}.\n *\n * `variantFromRecord` and the lazy form the catalogue is built with live here, and not\n * beside the 34-theme table in `lib/themes.ts`, because a bundler places a module\n * whole: a host that imports `variantFromRecord` from the same module as the table\n * ships the table with it. This module reads a record it is handed and imports no\n * catalogue, so a start-up path that only turns a stored record into a variant\n * (an imported theme, a reconstruction) stays small. `lib/themes.ts` re-exports\n * `variantFromRecord`, so `@adea-ai/ui/lib/themes` keeps working; the lazy start-up\n * gate (`check:theme-startup`) holds the split in place.\n *\n * It does import `@adea-ai/themes` for the projection helpers (`chartSeries`,\n * `tint`, `shadcnVariables`…), none of which reads the table of themes.\n */\nimport {\n  chartSeries,\n  shadcnDestructiveProjection,\n  statusForeground,\n  syntaxRoles,\n  tint,\n  type AdeaThemeRecord,\n} from '@adea-ai/themes'\nimport { shadcnVariables } from '@adea-ai/themes/adapters/shadcn'\nimport type {\n  ThemeColors,\n  ThemeEditorPalette,\n  ThemeProvenance,\n  ThemeTerminalPalette,\n  ThemeVariant,\n} from './themes'\n\n/**\n * The shadcn-vocabulary roles of one catalogue entry.\n *\n * The expensive half of a variant: `shadcnVariables` projects the whole palette\n * (about 4 ms a theme), which is why {@link lazyVariantFromRecord} defers it.\n */\nfunction colorsOf(theme: AdeaThemeRecord): ThemeColors {\n  const projected = shadcnVariables(theme)\n  const token = (name: string): string => {\n    const value = projected[`--${name}`]\n    if (!value) throw new Error(`${theme.id} has no shared shadcn projection for --${name}`)\n    return value\n  }\n  const destructiveAction = shadcnDestructiveProjection(theme)\n  return {\n    background: token('background'),\n    foreground: token('foreground'),\n    card: token('card'),\n    cardForeground: token('card-foreground'),\n    popover: token('popover'),\n    popoverForeground: token('popover-foreground'),\n    primary: token('primary'),\n    primaryForeground: token('primary-foreground'),\n    secondary: token('secondary'),\n    secondaryForeground: token('secondary-foreground'),\n    muted: token('muted'),\n    mutedForeground: token('muted-foreground'),\n    accent: token('accent'),\n    accentForeground: token('accent-foreground'),\n    // Preserve the UI's semantic error token. The Themes projection uses its\n    // contrast-safe solid-action fill for --destructive; UI keeps that fill in\n    // the separate destructiveAction pair below.\n    destructive: theme.colors.error,\n    destructiveForeground: statusForeground(theme, 'error'),\n    destructiveSubtle: tint(theme.colors.error, theme.colors.background),\n    destructiveAction: destructiveAction.fill,\n    destructiveActionForeground: destructiveAction.foreground,\n    success: token('success'),\n    successForeground: statusForeground(theme, 'success'),\n    successSubtle: tint(theme.colors.success, theme.colors.background),\n    warning: token('warning'),\n    warningForeground: statusForeground(theme, 'warning'),\n    warningSubtle: tint(theme.colors.warning, theme.colors.background),\n    info: token('info'),\n    infoForeground: statusForeground(theme, 'info'),\n    infoSubtle: tint(theme.colors.info, theme.colors.background),\n    border: token('border'),\n    input: token('input'),\n    ring: token('ring'),\n    sidebar: token('sidebar'),\n    sidebarForeground: token('sidebar-foreground'),\n    sidebarAccent: token('sidebar-accent'),\n    sidebarBorder: token('sidebar-border'),\n    sidebarMutedForeground: token('sidebar-muted-foreground'),\n  }\n}\n\n// The embedded terminal uses the theme's own canvas rather than a palette of its\n// own. The ANSI colours came from the palette that produced the canvas, so they\n// were chosen against it; a terminal on a different background would be the one\n// surface in the application not lit by the active theme.\nfunction terminalOf(theme: AdeaThemeRecord): ThemeTerminalPalette {\n  return {\n    background: theme.colors.background,\n    foreground: theme.colors.foreground,\n    cursor: theme.cursor,\n    selection: theme.selection,\n    ...theme.ansi,\n  }\n}\n\nfunction editorOf(theme: AdeaThemeRecord): ThemeEditorPalette {\n  const syntax = syntaxRoles(theme)\n  return {\n    keyword: syntax.keyword,\n    string: syntax.string,\n    number: syntax.number,\n    comment: syntax.comment,\n    function: syntax.function,\n    variable: syntax.variable,\n    type: syntax.type,\n    tag: syntax.tag,\n    attribute: syntax.attribute,\n    operator: syntax.operator,\n    heading: syntax.heading,\n    link: syntax.link,\n    diffAdd: syntax.diffAdd,\n    diffDelete: syntax.diffDelete,\n    diffHunk: syntax.diffHunk,\n    searchMatch: syntax.searchMatch,\n  }\n}\n\nfunction provenanceOf(theme: AdeaThemeRecord): ThemeProvenance {\n  return {\n    source: theme.provenance.project,\n    url: theme.provenance.url,\n    license: theme.provenance.license,\n  }\n}\n\n/**\n * The design system's view of one catalogue record, built in full and at once.\n *\n * For a host that holds a record the catalogue does not — an imported theme, a\n * reconstruction from stored data — and wants a variant it can hand to\n * `ThemeProvider`'s `themes`. It throws for a record the shadcn projection cannot\n * map, here and now, rather than on first paint. The catalogue itself goes through\n * {@link lazyVariantFromRecord} instead.\n */\nexport function variantFromRecord(theme: AdeaThemeRecord): ThemeVariant {\n  return {\n    id: theme.id,\n    family: theme.family,\n    familyLabel: theme.familyLabel,\n    label: theme.label,\n    appearance: theme.appearance,\n    description: theme.description,\n    colors: colorsOf(theme),\n    terminal: terminalOf(theme),\n    editor: editorOf(theme),\n    chart: chartSeries(theme),\n    provenance: provenanceOf(theme),\n  }\n}\n\n/** Runs `build` on first call and returns that value from then on. A throw is not cached. */\nfunction once<T>(build: () => T): () => T {\n  let built = false\n  let value: T\n  return () => {\n    if (!built) {\n      value = build()\n      built = true\n    }\n    return value\n  }\n}\n\nconst lazy = <T>(build: () => T): PropertyDescriptor => ({\n  get: once(build),\n  enumerable: true,\n})\n\n/**\n * {@link variantFromRecord} with the four derived palettes built on first read.\n *\n * Evaluating this module used to project all 34 catalogue themes up front, about\n * 155 ms before a single one was needed, on the hydration path of every consumer.\n * A page paints one variant, and a picker's labels and appearance are plain\n * fields, so only a variant whose `colors`, `terminal`, `editor` or `chart` is read\n * pays for them, once. The properties stay enumerable data-shaped accessors, so\n * spreading, `Object.entries` and JSON see the same object they always did.\n */\nexport function lazyVariantFromRecord(theme: AdeaThemeRecord): ThemeVariant {\n  return Object.defineProperties(\n    {\n      id: theme.id,\n      family: theme.family,\n      familyLabel: theme.familyLabel,\n      label: theme.label,\n      appearance: theme.appearance,\n      description: theme.description,\n      provenance: provenanceOf(theme),\n    },\n    {\n      colors: lazy(() => colorsOf(theme)),\n      terminal: lazy(() => terminalOf(theme)),\n      editor: lazy(() => editorOf(theme)),\n      chart: lazy(() => chartSeries(theme)),\n    }\n  ) as ThemeVariant\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAS,SAAS,OAAqC;CACrD,MAAM,YAAY,gBAAgB,KAAK;CACvC,MAAM,SAAS,SAAyB;EACtC,MAAM,QAAQ,UAAU,KAAK;EAC7B,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,GAAG,MAAM,GAAG,yCAAyC,MAAM;EACvF,OAAO;CACT;CACA,MAAM,oBAAoB,4BAA4B,KAAK;CAC3D,OAAO;EACL,YAAY,MAAM,YAAY;EAC9B,YAAY,MAAM,YAAY;EAC9B,MAAM,MAAM,MAAM;EAClB,gBAAgB,MAAM,iBAAiB;EACvC,SAAS,MAAM,SAAS;EACxB,mBAAmB,MAAM,oBAAoB;EAC7C,SAAS,MAAM,SAAS;EACxB,mBAAmB,MAAM,oBAAoB;EAC7C,WAAW,MAAM,WAAW;EAC5B,qBAAqB,MAAM,sBAAsB;EACjD,OAAO,MAAM,OAAO;EACpB,iBAAiB,MAAM,kBAAkB;EACzC,QAAQ,MAAM,QAAQ;EACtB,kBAAkB,MAAM,mBAAmB;EAI3C,aAAa,MAAM,OAAO;EAC1B,uBAAuB,iBAAiB,OAAO,OAAO;EACtD,mBAAmB,KAAK,MAAM,OAAO,OAAO,MAAM,OAAO,UAAU;EACnE,mBAAmB,kBAAkB;EACrC,6BAA6B,kBAAkB;EAC/C,SAAS,MAAM,SAAS;EACxB,mBAAmB,iBAAiB,OAAO,SAAS;EACpD,eAAe,KAAK,MAAM,OAAO,SAAS,MAAM,OAAO,UAAU;EACjE,SAAS,MAAM,SAAS;EACxB,mBAAmB,iBAAiB,OAAO,SAAS;EACpD,eAAe,KAAK,MAAM,OAAO,SAAS,MAAM,OAAO,UAAU;EACjE,MAAM,MAAM,MAAM;EAClB,gBAAgB,iBAAiB,OAAO,MAAM;EAC9C,YAAY,KAAK,MAAM,OAAO,MAAM,MAAM,OAAO,UAAU;EAC3D,QAAQ,MAAM,QAAQ;EACtB,OAAO,MAAM,OAAO;EACpB,MAAM,MAAM,MAAM;EAClB,SAAS,MAAM,SAAS;EACxB,mBAAmB,MAAM,oBAAoB;EAC7C,eAAe,MAAM,gBAAgB;EACrC,eAAe,MAAM,gBAAgB;EACrC,wBAAwB,MAAM,0BAA0B;CAC1D;AACF;AAMA,SAAS,WAAW,OAA8C;CAChE,OAAO;EACL,YAAY,MAAM,OAAO;EACzB,YAAY,MAAM,OAAO;EACzB,QAAQ,MAAM;EACd,WAAW,MAAM;EACjB,GAAG,MAAM;CACX;AACF;AAEA,SAAS,SAAS,OAA4C;CAC5D,MAAM,SAAS,YAAY,KAAK;CAChC,OAAO;EACL,SAAS,OAAO;EAChB,QAAQ,OAAO;EACf,QAAQ,OAAO;EACf,SAAS,OAAO;EAChB,UAAU,OAAO;EACjB,UAAU,OAAO;EACjB,MAAM,OAAO;EACb,KAAK,OAAO;EACZ,WAAW,OAAO;EAClB,UAAU,OAAO;EACjB,SAAS,OAAO;EAChB,MAAM,OAAO;EACb,SAAS,OAAO;EAChB,YAAY,OAAO;EACnB,UAAU,OAAO;EACjB,aAAa,OAAO;CACtB;AACF;AAEA,SAAS,aAAa,OAAyC;CAC7D,OAAO;EACL,QAAQ,MAAM,WAAW;EACzB,KAAK,MAAM,WAAW;EACtB,SAAS,MAAM,WAAW;CAC5B;AACF;;;;;;;;;;AAWA,SAAgB,kBAAkB,OAAsC;CACtE,OAAO;EACL,IAAI,MAAM;EACV,QAAQ,MAAM;EACd,aAAa,MAAM;EACnB,OAAO,MAAM;EACb,YAAY,MAAM;EAClB,aAAa,MAAM;EACnB,QAAQ,SAAS,KAAK;EACtB,UAAU,WAAW,KAAK;EAC1B,QAAQ,SAAS,KAAK;EACtB,OAAO,YAAY,KAAK;EACxB,YAAY,aAAa,KAAK;CAChC;AACF;;AAGA,SAAS,KAAQ,OAAyB;CACxC,IAAI,QAAQ;CACZ,IAAI;CACJ,aAAa;EACX,IAAI,CAAC,OAAO;GACV,QAAQ,MAAM;GACd,QAAQ;EACV;EACA,OAAO;CACT;AACF;AAEA,IAAM,QAAW,WAAwC;CACvD,KAAK,KAAK,KAAK;CACf,YAAY;AACd;;;;;;;;;;;AAYA,SAAgB,sBAAsB,OAAsC;CAC1E,OAAO,OAAO,iBACZ;EACE,IAAI,MAAM;EACV,QAAQ,MAAM;EACd,aAAa,MAAM;EACnB,OAAO,MAAM;EACb,YAAY,MAAM;EAClB,aAAa,MAAM;EACnB,YAAY,aAAa,KAAK;CAChC,GACA;EACE,QAAQ,WAAW,SAAS,KAAK,CAAC;EAClC,UAAU,WAAW,WAAW,KAAK,CAAC;EACtC,QAAQ,WAAW,SAAS,KAAK,CAAC;EAClC,OAAO,WAAW,YAAY,KAAK,CAAC;CACtC,CACF;AACF"}
+{"version":3,"file":"theme-records.js","names":[],"sources":["../../src/lib/theme-records.ts"],"sourcesContent":["/**\n * One catalogue record, as this system's {@link ThemeVariant}.\n *\n * `variantFromRecord` and the lazy form the catalogue is built with live here, and not\n * beside the 34-theme table in `lib/themes.ts`, because a bundler places a module\n * whole: a host that imports `variantFromRecord` from the same module as the table\n * ships the table with it. This module reads a record it is handed and imports no\n * catalogue, so a start-up path that only turns a stored record into a variant\n * (an imported theme, a reconstruction) stays small. `lib/themes.ts` re-exports\n * `variantFromRecord`, so `@adea-ai/ui/lib/themes` keeps working; the lazy start-up\n * gate (`check:theme-startup`) holds the split in place.\n *\n * It does import `@adea-ai/themes` for the projection helpers (`chartSeries`,\n * `tint`, `shadcnVariables`…), none of which reads the table of themes.\n */\nimport {\n  chartSeries,\n  shadcnDestructiveProjection,\n  statusForeground,\n  syntaxRoles,\n  tint,\n  type AdeaThemeRecord,\n} from '@adea-ai/themes'\nimport { shadcnVariables } from '@adea-ai/themes/adapters/shadcn'\nimport type {\n  ThemeColors,\n  ThemeEditorPalette,\n  ThemeProvenance,\n  ThemeTerminalPalette,\n  ThemeVariant,\n} from './themes'\n\n/** The catalogue's canonical theme shapes, for a host that holds records and no catalogue. */\nexport type { AdeaTheme, AdeaThemeRecord } from '@adea-ai/themes'\n\n/**\n * The shadcn-vocabulary roles of one catalogue entry.\n *\n * The expensive half of a variant: `shadcnVariables` projects the whole palette\n * (about 4 ms a theme), which is why {@link lazyVariantFromRecord} defers it.\n */\nfunction colorsOf(theme: AdeaThemeRecord): ThemeColors {\n  const projected = shadcnVariables(theme)\n  const token = (name: string): string => {\n    const value = projected[`--${name}`]\n    if (!value) throw new Error(`${theme.id} has no shared shadcn projection for --${name}`)\n    return value\n  }\n  const destructiveAction = shadcnDestructiveProjection(theme)\n  return {\n    background: token('background'),\n    foreground: token('foreground'),\n    card: token('card'),\n    cardForeground: token('card-foreground'),\n    popover: token('popover'),\n    popoverForeground: token('popover-foreground'),\n    primary: token('primary'),\n    primaryForeground: token('primary-foreground'),\n    secondary: token('secondary'),\n    secondaryForeground: token('secondary-foreground'),\n    muted: token('muted'),\n    mutedForeground: token('muted-foreground'),\n    accent: token('accent'),\n    accentForeground: token('accent-foreground'),\n    // Preserve the UI's semantic error token. The Themes projection uses its\n    // contrast-safe solid-action fill for --destructive; UI keeps that fill in\n    // the separate destructiveAction pair below.\n    destructive: theme.colors.error,\n    destructiveForeground: statusForeground(theme, 'error'),\n    destructiveSubtle: tint(theme.colors.error, theme.colors.background),\n    destructiveAction: destructiveAction.fill,\n    destructiveActionForeground: destructiveAction.foreground,\n    success: token('success'),\n    successForeground: statusForeground(theme, 'success'),\n    successSubtle: tint(theme.colors.success, theme.colors.background),\n    warning: token('warning'),\n    warningForeground: statusForeground(theme, 'warning'),\n    warningSubtle: tint(theme.colors.warning, theme.colors.background),\n    info: token('info'),\n    infoForeground: statusForeground(theme, 'info'),\n    infoSubtle: tint(theme.colors.info, theme.colors.background),\n    border: token('border'),\n    input: token('input'),\n    ring: token('ring'),\n    sidebar: token('sidebar'),\n    sidebarForeground: token('sidebar-foreground'),\n    sidebarAccent: token('sidebar-accent'),\n    sidebarBorder: token('sidebar-border'),\n    sidebarMutedForeground: token('sidebar-muted-foreground'),\n  }\n}\n\n// The embedded terminal uses the theme's own canvas rather than a palette of its\n// own. The ANSI colours came from the palette that produced the canvas, so they\n// were chosen against it; a terminal on a different background would be the one\n// surface in the application not lit by the active theme.\nfunction terminalOf(theme: AdeaThemeRecord): ThemeTerminalPalette {\n  return {\n    background: theme.colors.background,\n    foreground: theme.colors.foreground,\n    cursor: theme.cursor,\n    selection: theme.selection,\n    ...theme.ansi,\n  }\n}\n\nfunction editorOf(theme: AdeaThemeRecord): ThemeEditorPalette {\n  const syntax = syntaxRoles(theme)\n  return {\n    keyword: syntax.keyword,\n    string: syntax.string,\n    number: syntax.number,\n    comment: syntax.comment,\n    function: syntax.function,\n    variable: syntax.variable,\n    type: syntax.type,\n    tag: syntax.tag,\n    attribute: syntax.attribute,\n    operator: syntax.operator,\n    heading: syntax.heading,\n    link: syntax.link,\n    diffAdd: syntax.diffAdd,\n    diffDelete: syntax.diffDelete,\n    diffHunk: syntax.diffHunk,\n    searchMatch: syntax.searchMatch,\n  }\n}\n\nfunction provenanceOf(theme: AdeaThemeRecord): ThemeProvenance {\n  return {\n    source: theme.provenance.project,\n    url: theme.provenance.url,\n    license: theme.provenance.license,\n  }\n}\n\n/**\n * The design system's view of one catalogue record, built in full and at once.\n *\n * For a host that holds a record the catalogue does not — an imported theme, a\n * reconstruction from stored data — and wants a variant it can hand to\n * `ThemeProvider`'s `themes`. It throws for a record the shadcn projection cannot\n * map, here and now, rather than on first paint. The catalogue itself goes through\n * {@link lazyVariantFromRecord} instead.\n */\nexport function variantFromRecord(theme: AdeaThemeRecord): ThemeVariant {\n  return {\n    id: theme.id,\n    family: theme.family,\n    familyLabel: theme.familyLabel,\n    label: theme.label,\n    appearance: theme.appearance,\n    description: theme.description,\n    colors: colorsOf(theme),\n    terminal: terminalOf(theme),\n    editor: editorOf(theme),\n    chart: chartSeries(theme),\n    provenance: provenanceOf(theme),\n  }\n}\n\n/** Runs `build` on first call and returns that value from then on. A throw is not cached. */\nfunction once<T>(build: () => T): () => T {\n  let built = false\n  let value: T\n  return () => {\n    if (!built) {\n      value = build()\n      built = true\n    }\n    return value\n  }\n}\n\nconst lazy = <T>(build: () => T): PropertyDescriptor => ({\n  get: once(build),\n  enumerable: true,\n})\n\n/**\n * {@link variantFromRecord} with the four derived palettes built on first read.\n *\n * Evaluating this module used to project all 34 catalogue themes up front, about\n * 155 ms before a single one was needed, on the hydration path of every consumer.\n * A page paints one variant, and a picker's labels and appearance are plain\n * fields, so only a variant whose `colors`, `terminal`, `editor` or `chart` is read\n * pays for them, once. The properties stay enumerable data-shaped accessors, so\n * spreading, `Object.entries` and JSON see the same object they always did.\n */\nexport function lazyVariantFromRecord(theme: AdeaThemeRecord): ThemeVariant {\n  return Object.defineProperties(\n    {\n      id: theme.id,\n      family: theme.family,\n      familyLabel: theme.familyLabel,\n      label: theme.label,\n      appearance: theme.appearance,\n      description: theme.description,\n      provenance: provenanceOf(theme),\n    },\n    {\n      colors: lazy(() => colorsOf(theme)),\n      terminal: lazy(() => terminalOf(theme)),\n      editor: lazy(() => editorOf(theme)),\n      chart: lazy(() => chartSeries(theme)),\n    }\n  ) as ThemeVariant\n}\n"],"mappings":"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"}

package/dist/r/lib.json

@@ -110,6 +110,11 @@
       "type": "registry:lib",
       "target": "lib/theme-engine.ts"
     },
+    {
+      "path": "src/lib/theme-projection.ts",
+      "type": "registry:lib",
+      "target": "lib/theme-projection.ts"
+    },
     {
       "path": "src/lib/theme-records.ts",
       "type": "registry:lib",

package/dist/r/registry.json

@@ -2794,6 +2794,11 @@
           "type": "registry:lib",
           "target": "lib/theme-engine.ts"
         },
+        {
+          "path": "src/lib/theme-projection.ts",
+          "type": "registry:lib",
+          "target": "lib/theme-projection.ts"
+        },
         {
           "path": "src/lib/theme-records.ts",
           "type": "registry:lib",

package/dist/r/src/components/composites/appearance-editor/accent-swatch-groups.tsx

@@ -23,6 +23,7 @@
  */
 import { RadioGroup as Radio } from '@kobalte/core/radio-group'
 import { For, Show } from 'solid-js'
+import { cn } from '../../../lib/utils'
 
 type AccentOption = Readonly<{
   id: string
@@ -50,6 +51,13 @@ type AccentSwatchGroupsProps = {
    * colour reads as a duplicate choice.
    */
   showThemeDefault?: boolean
+  /**
+   * `grid` — the default — wraps at four to a line. `row` keeps every swatch on
+   * one line at a smaller size, the columns sharing the width equally, so a
+   * narrow panel does not wrap them; each colour is then the fill of an SVG
+   * circle, which is where a host that asserts on swatch colours reads it.
+   */
+  layout?: 'grid' | 'row'
 }
 
 /**
@@ -62,11 +70,20 @@ type AccentSwatchGroupsProps = {
  */
 export function AccentSwatchGroups(props: AccentSwatchGroupsProps) {
   const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')
+  const row = () => props.layout === 'row'
 
   return (
-    <div class="grid grid-cols-4 gap-2" data-accent-grid>
+    <div
+      class={row() ? 'grid auto-cols-fr grid-flow-col' : 'grid grid-cols-4 gap-2'}
+      data-accent-grid
+    >
       <Show when={props.showThemeDefault ?? true}>
-        <AccentSwatch id="theme" label="Theme default" color={props.themeDefaultColor} />
+        <AccentSwatch
+          id="theme"
+          label="Theme default"
+          color={props.themeDefaultColor}
+          row={row()}
+        />
       </Show>
       <For each={presets()}>
         {(option) => (
@@ -74,6 +91,7 @@ export function AccentSwatchGroups(props: AccentSwatchGroupsProps) {
             id={option.id}
             label={option.label}
             color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
+            row={row()}
           />
         )}
       </For>
@@ -81,20 +99,36 @@ export function AccentSwatchGroups(props: AccentSwatchGroupsProps) {
   )
 }
 
-function AccentSwatch(props: { id: string; label: string; color: string }) {
+function AccentSwatch(props: { id: string; label: string; color: string; row: boolean }) {
   return (
     <Radio.Item
       value={props.id}
       data-accent-option={props.id}
-      class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
+      class={cn('rounded-full focus-within:ring-3 focus-within:ring-ring/50', {
+        'flex justify-center': props.row,
+      })}
     >
       <Radio.ItemInput />
-      <Radio.ItemLabel class="block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-        <span
-          class="block size-full rounded-full"
-          aria-hidden="true"
-          style={{ 'background-color': props.color }}
-        />
+      <Radio.ItemLabel
+        class={cn(
+          'block cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',
+          props.row ? 'size-6' : 'size-7'
+        )}
+      >
+        <Show
+          when={props.row}
+          fallback={
+            <span
+              class="block size-full rounded-full"
+              aria-hidden="true"
+              style={{ 'background-color': props.color }}
+            />
+          }
+        >
+          <svg class="size-full" viewBox="0 0 16 16" aria-hidden="true">
+            <circle cx="8" cy="8" r="8" fill={props.color} />
+          </svg>
+        </Show>
         <span class="sr-only">{props.label}</span>
       </Radio.ItemLabel>
     </Radio.Item>

package/dist/r/src/components/composites/appearance-editor/appearance-choices.tsx

@@ -24,8 +24,11 @@
 // Pinned mode-card, accent-swatch, and glass-chip composition. Kobalte replaces
 // the app port's manual roving focus; it does not replace the donor hierarchy.
 import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import { Monitor, Moon, Sun } from 'lucide-solid'
 import { For, Show } from 'solid-js'
 import { isThemeAccentId } from '../../../lib/theme-accents'
+import { Button } from '../../ui/button/button'
+import { Input } from '../../ui/input/input'
 import { AccentSwatchGroups } from './accent-swatch-groups'
 import type { AppearanceEditorProps } from './appearance-types'
 import { ThemeMiniature, ThemeMiniatureSplit } from './theme-preview'
@@ -40,6 +43,8 @@ const SURFACES = [
   { value: 'frosted', label: 'Frosted' },
   { value: 'opaque', label: 'Opaque' },
 ] as const
+const MODE_ICONS = { system: Monitor, light: Sun, dark: Moon } as const
+
 export function ModeChoices(props: AppearanceEditorProps) {
   return (
     <Radio
@@ -54,30 +59,40 @@ export function ModeChoices(props: AppearanceEditorProps) {
       class="grid grid-cols-1 gap-3 px-4 py-4 sm:grid-cols-3"
     >
       <For each={MODES}>
-        {(option) => (
-          <Radio.Item
-            value={option.value}
-            data-mode={option.value}
-            class="min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50"
-          >
-            <Radio.ItemInput />
-            <Radio.ItemLabel class="flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
-              <span class="block h-20 w-full">
-                <Show
-                  when={option.value === 'system'}
-                  fallback={
-                    <ThemeMiniature
-                      theme={option.value === 'light' ? props.lightTheme : props.darkTheme}
-                    />
-                  }
-                >
-                  <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />
+        {(option) => {
+          const Icon = MODE_ICONS[option.value]
+          return (
+            <Radio.Item
+              value={option.value}
+              data-mode={option.value}
+              class="min-w-0 rounded-lg focus-within:ring-3 focus-within:ring-ring/50"
+            >
+              <Radio.ItemInput />
+              <Radio.ItemLabel class="flex cursor-pointer flex-col gap-2 rounded-lg border p-2 text-center text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
+                <span class="block h-20 w-full">
+                  <Show
+                    when={option.value === 'system'}
+                    fallback={
+                      <ThemeMiniature
+                        theme={option.value === 'light' ? props.lightTheme : props.darkTheme}
+                      />
+                    }
+                  >
+                    <ThemeMiniatureSplit light={props.lightTheme} dark={props.darkTheme} />
+                  </Show>
+                </span>
+                {/* The glyph names the axis beside the miniature, so the cards read
+                  like ThemeModeToggle without losing the previews. */}
+                <Show when={props.showModeIcons} fallback={<span>{option.label}</span>}>
+                  <span class="flex items-center justify-center gap-1.5">
+                    <Icon aria-hidden="true" class="size-3.5" />
+                    {option.label}
+                  </span>
                 </Show>
-              </span>
-              <span>{option.label}</span>
-            </Radio.ItemLabel>
-          </Radio.Item>
-        )}
+              </Radio.ItemLabel>
+            </Radio.Item>
+          )
+        }}
       </For>
     </Radio>
   )
@@ -106,75 +121,138 @@ export function AccentChoices(props: AppearanceEditorProps) {
     props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
   const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)
   const showThemeDefault = () => props.showThemeDefaultAccent ?? true
+  const entryStyle = () => props.accentEntryStyle ?? 'swatches'
+  const themeDefaultColor = () =>
+    resolvedAppearance() === 'light'
+      ? props.lightTheme.colors.accent
+      : props.darkTheme.colors.accent
   // The named-chip style feeds the same resolved preset list to both entries:
   // "Theme default" leads only when the host has not folded it into a preset.
   const labelEntries = () => {
     const presets = props.accentOptions.filter((option) => option.id !== 'theme')
     return showThemeDefault() ? [{ id: 'theme', label: 'Theme default' }, ...presets] : presets
   }
+  // The `row` style's Custom entry is a button that opens the native colour
+  // selector, so the draft only changes once a colour is chosen there. The
+  // input stays in the tree for the selector to anchor to and for the value a
+  // saved hex restores.
+  let colorPicker: HTMLInputElement | undefined
+  const openCustomColor = () => {
+    if (!colorPicker || props.saving) return
+    if (typeof colorPicker.showPicker === 'function') colorPicker.showPicker()
+    else colorPicker.click()
+  }
   return (
-    <Radio
-      value={accentSelection()}
-      disabled={props.saving}
-      orientation="horizontal"
-      aria-label="Accent"
-      class="flex flex-col items-start gap-3"
-      onChange={(accent) =>
-        props.onChange({
-          accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
-        })
-      }
-    >
-      <Show
-        when={(props.accentEntryStyle ?? 'swatches') === 'labels'}
-        fallback={
-          <>
-            <AccentSwatchGroups
-              accentOptions={props.accentOptions}
-              resolvedAppearance={resolvedAppearance()}
-              showThemeDefault={showThemeDefault()}
-              themeDefaultColor={
-                resolvedAppearance() === 'light'
-                  ? props.lightTheme.colors.accent
-                  : props.darkTheme.colors.accent
-              }
-            />
-            <div class="flex flex-col gap-1">
-              <Show when={props.showCustomAccentCaption ?? true}>
-                <span class="text-xs font-medium text-muted-foreground">Custom</span>
-              </Show>
-              <Radio.Item value="custom">
+    <Show
+      when={entryStyle() === 'row'}
+      fallback={
+        <Radio
+          value={accentSelection()}
+          disabled={props.saving}
+          orientation="horizontal"
+          aria-label="Accent"
+          class="flex flex-col items-start gap-3"
+          onChange={(accent) =>
+            props.onChange({
+              accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
+            })
+          }
+        >
+          <Show
+            when={entryStyle() === 'labels'}
+            fallback={
+              <>
+                <AccentSwatchGroups
+                  accentOptions={props.accentOptions}
+                  resolvedAppearance={resolvedAppearance()}
+                  showThemeDefault={showThemeDefault()}
+                  themeDefaultColor={themeDefaultColor()}
+                />
+                <div class="flex flex-col gap-1">
+                  <Show when={props.showCustomAccentCaption ?? true}>
+                    <span class="text-xs font-medium text-muted-foreground">Custom</span>
+                  </Show>
+                  <Radio.Item value="custom">
+                    <Radio.ItemInput />
+                    <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+                      Custom
+                    </Radio.ItemLabel>
+                  </Radio.Item>
+                </div>
+              </>
+            }
+          >
+            {/* The named-chip style: one grid, every choice a labelled control,
+                including the custom colour — nothing to caption from above. */}
+            <div class="grid grid-cols-2 gap-2 sm:grid-cols-3" data-accent-grid>
+              <For each={labelEntries()}>
+                {(option) => (
+                  <Radio.Item value={option.id} class="min-w-0" data-accent-option={option.id}>
+                    <Radio.ItemInput />
+                    <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+                      {option.label}
+                    </Radio.ItemLabel>
+                  </Radio.Item>
+                )}
+              </For>
+              <Radio.Item value="custom" class="min-w-0">
                 <Radio.ItemInput />
                 <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
                   Custom
                 </Radio.ItemLabel>
               </Radio.Item>
             </div>
-          </>
-        }
-      >
-        {/* The named-chip style: one grid, every choice a labelled control,
-            including the custom colour — nothing to caption from above. */}
-        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3" data-accent-grid>
-          <For each={labelEntries()}>
-            {(option) => (
-              <Radio.Item value={option.id} class="min-w-0" data-accent-option={option.id}>
-                <Radio.ItemInput />
-                <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-                  {option.label}
-                </Radio.ItemLabel>
-              </Radio.Item>
-            )}
-          </For>
-          <Radio.Item value="custom" class="min-w-0">
-            <Radio.ItemInput />
-            <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-              Custom
-            </Radio.ItemLabel>
-          </Radio.Item>
-        </div>
-      </Show>
-    </Radio>
+          </Show>
+        </Radio>
+      }
+    >
+      <div class="flex w-full min-w-0 items-center gap-2" data-accent-choices>
+        <Radio
+          value={accentSelection()}
+          disabled={props.saving}
+          orientation="horizontal"
+          aria-label="Accent"
+          class="min-w-0 flex-1"
+          onChange={(accent) => props.onChange({ accent })}
+        >
+          <AccentSwatchGroups
+            accentOptions={props.accentOptions}
+            resolvedAppearance={resolvedAppearance()}
+            showThemeDefault={showThemeDefault()}
+            themeDefaultColor={themeDefaultColor()}
+            layout="row"
+          />
+        </Radio>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={props.saving}
+          aria-pressed={isCustomAccent(props)}
+          onClick={openCustomColor}
+        >
+          Custom
+        </Button>
+        <Input
+          ref={(element) => {
+            colorPicker = element
+          }}
+          type="color"
+          // `w-px` beats the Input's own `w-full`: an absolutely positioned
+          // full-width input sized the sheet's scroll width.
+          class="sr-only w-px"
+          tabIndex={-1}
+          aria-label="Custom accent color"
+          value={
+            /^#[0-9a-f]{6}$/i.test(props.draft.accent)
+              ? props.draft.accent
+              : (props.customAccentValue ?? '#000000')
+          }
+          disabled={props.saving}
+          onChange={(event) => props.onChange({ accent: event.currentTarget.value })}
+        />
+      </div>
+    </Show>
   )
 }
 
@@ -199,7 +277,7 @@ export function GlassChoices(props: AppearanceEditorProps) {
             class="rounded-md focus-within:ring-3 focus-within:ring-ring/50"
           >
             <Radio.ItemInput />
-            <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
+            <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50">
               {option.label}
             </Radio.ItemLabel>
           </Radio.Item>

package/dist/r/src/components/composites/appearance-editor/appearance-editor.tsx

@@ -278,12 +278,17 @@ export function AppearancePopover(props: AppearancePopoverProps) {
     <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>
       {/* The trigger is an icon-only action, so it explains itself through the
           shared ActionButton's tooltip (keyboard focus included) rather than a
-          bare aria-label. */}
+          bare aria-label. `toolbar` also holds the pressed rung while Kobalte
+          marks the trigger `data-expanded`, and repeats the glyph in the
+          tooltip like the other toolbar actions. */}
       <SheetTrigger
         as={ActionButton}
-        variant="ghost"
+        variant={props.triggerVariant === 'toolbar' ? 'toolbar' : 'ghost'}
         size="icon-sm"
         tooltip="Open appearance settings"
+        tooltipIcon={
+          props.triggerVariant === 'toolbar' ? <Palette aria-hidden="true" /> : undefined
+        }
         aria-label="Appearance settings"
       >
         <Palette />

package/dist/r/src/components/composites/appearance-editor/appearance-types.ts

@@ -67,10 +67,16 @@ export type AppearanceEditorProps = {
   fontSettingsPlacement?: 'inline' | 'end'
   /**
    * How the accent row renders its choices. `swatches` — the default — paints
-   * each choice as a colour circle. `labels` renders every choice as a named
-   * chip, for hosts whose accent contract is textual rather than chromatic.
+   * each choice as a colour circle in a wrapping grid, with Custom as one more
+   * chip. `labels` renders every choice as a named chip, for hosts whose accent
+   * contract is textual rather than chromatic. `row` draws the circles in ONE
+   * equally spaced line, which holds at a narrow panel width where the grid
+   * would wrap, and turns Custom into a button that opens the native colour
+   * selector: choosing a colour there is the only thing that changes the draft,
+   * so dismissing the selector leaves the accent as it was. The caption flag
+   * has no effect on `row`, which has nothing to caption.
    */
-  accentEntryStyle?: 'swatches' | 'labels'
+  accentEntryStyle?: 'swatches' | 'labels' | 'row'
   /**
    * Whether the accent row leads with a "Theme default" swatch. Default on.
    * Hosts whose default accent already is one of the catalogue presets pass
@@ -83,10 +89,23 @@ export type AppearanceEditorProps = {
    * caption reads as a second "Custom" label on the control.
    */
   showCustomAccentCaption?: boolean
+  /**
+   * Whether each mode card names its axis with a sun, moon or monitor glyph
+   * beside the label, as `ThemeModeToggle` does. Default off.
+   */
+  showModeIcons?: boolean
 }
 
 export type AppearancePopoverProps = AppearanceEditorProps & {
   open: boolean
   onOpen: () => void
   onDismiss: () => void
+  /**
+   * The trigger's treatment. `ghost` — the default — is a quiet icon action.
+   * `toolbar` is the variant for a control that opens a surface: it holds the
+   * pressed rung while the sheet is open, so the one control that owns the
+   * visible sheet never reads like its idle neighbours, and its tooltip repeats
+   * the palette glyph the other toolbar actions carry.
+   */
+  triggerVariant?: 'ghost' | 'toolbar'
 }

package/dist/r/src/components/ui/accordion/accordion.tsx

@@ -37,7 +37,11 @@ export function AccordionTrigger(props: ComponentProps<typeof KobalteAccordion.T
     <KobalteAccordion.Header class="flex">
       <KobalteAccordion.Trigger
         class={cn(
-          'flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
+          // `group/accordion` is what the chevron's `group-data-[expanded]/accordion`
+          // reads. Kobalte puts `data-expanded` on this trigger, not on the item, so
+          // the trigger is the group; without the class the rotation selector has no
+          // ancestor to match and the chevron never turns.
+          'group/accordion flex flex-1 items-center justify-between gap-2 py-3 text-left text-sm font-medium',
           'transition-colors ease-out outline-none',
           'hover:text-foreground',
           'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',

package/dist/r/src/components/ui/radio-group/radio-group.tsx

@@ -63,7 +63,9 @@ export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item>
    * `card` draws the option as a bordered, selectable card — for a choice
    * whose options need a sentence each (a source type, a sync budget), where a
    * bare radio row reads as a form field rather than a decision. The whole card
-   * is the hit target, and the selected card takes the primary edge.
+   * is the hit target, and the selected card takes the primary edge. The radio,
+   * `media` and text centre on one axis; the default variant keeps the radio on
+   * the first line of its label.
    */
   variant?: 'default' | 'card'
   /** A leading icon or `EntityIcon` between the radio and the text, for `card`. */
@@ -100,8 +102,14 @@ export function RadioGroupItem(props: RadioGroupItemProps) {
       data-variant={card() ? 'card' : undefined}
       title={local.title}
       class={cn(
-        'group/radio flex items-start gap-2.5',
+        'group/radio flex gap-2.5',
         {
+          'items-start': !card(),
+          // A card centres its radio, media and text on one axis. Top alignment
+          // is right for a bare row, where the radio sits on the label's first
+          // line, but in a card the media is taller than that line, so a
+          // top-aligned radio floats above the icon and the label beside it.
+          'items-center': card(),
           'relative rounded-lg border border-border bg-card px-3 py-2.5 transition-[color,box-shadow,border-color,background-color] ease-out hover:bg-surface-hover data-[checked]:border-primary data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-card':
             card(),
           'has-[input:focus-visible]:border-ring has-[input:focus-visible]:ring-3 has-[input:focus-visible]:ring-primary-subtle':

package/dist/r/src/lib/accent-presets.ts

@@ -8,6 +8,14 @@ import { ACCENTS } from '@adea-ai/themes'
  * `accents`, so every existing import keeps working.
  */
 
+/**
+ * A preset by id (`blue`), or `undefined` for `theme`, a theme-carried accent or an
+ * unknown id. The catalogue's own lookup, re-exported rather than copied so a host's
+ * stored-preference reader resolves an id exactly as the catalogue does without
+ * importing `lib/themes`.
+ */
+export { getAccent } from '@adea-ai/themes'
+
 /**
  * The accent axis.
  *

package/dist/r/src/lib/theme-projection.ts

@@ -0,0 +1,52 @@
+/**
+ * What a host needs to turn a canonical theme record into the values it stores.
+ *
+ * Adea imports user themes: a file is validated, repaired toward the readable floor,
+ * and projected onto the hex values the host persists. That projection is the
+ * catalogue's own (`shadcnVariables`, the xterm adapter, the editor roles), so it is
+ * re-exported here and the host depends on this package alone for it — the pin
+ * between this package and `@adea-ai/themes` cannot drift from the host's.
+ *
+ * Its own module, with no catalogue data and no definition of its own beyond the two
+ * default records, so that:
+ *
+ * - a host's start-up path never reaches it (it is for an importer loaded on demand);
+ * - `lib/themes.ts`, which holds the 34-theme table, is not the place a host has to
+ *   import from to get a record-shaped helper.
+ */
+import adeaDark from '@adea-ai/themes/themes/adea-dark'
+import adeaLight from '@adea-ai/themes/themes/adea-light'
+import {
+  themeAccentPresets,
+  type AccentPreset,
+  type AdeaTheme,
+  type AdeaThemeRecord,
+} from '@adea-ai/themes'
+
+export { editorRolesHex, syntaxRolesHex } from '@adea-ai/themes'
+export { oklchToHex, parseColor as parseOklchColor } from '@adea-ai/themes/oklch'
+export { shadcnDestructiveProjection, shadcnVariables } from '@adea-ai/themes/adapters/shadcn'
+export { toXtermTheme } from '@adea-ai/themes/adapters/xterm'
+
+/**
+ * The default theme of an appearance as a canonical record: the roles an imported
+ * theme falls back to for anything its file does not carry.
+ *
+ * `defaultVariantFor` is the same theme as a runtime variant; a record keeps the
+ * catalogue's own roles (`surfaceActive`, `textSubtle`, the ANSI ramp) that a variant
+ * folds together.
+ */
+export function defaultThemeRecord(appearance: 'light' | 'dark'): AdeaThemeRecord {
+  return appearance === 'dark' ? adeaDark : adeaLight
+}
+
+/**
+ * The accents a light/dark pair of records carries itself, beside the presets.
+ *
+ * For a host whose pair is not in the catalogue — an imported theme — where
+ * `themeAccentsFor` (which looks the pair up by id) cannot answer. A slot is offered
+ * only when both themes clear the catalogue's accent floors.
+ */
+export function themeAccentsForRecords(light: AdeaTheme, dark: AdeaTheme): readonly AccentPreset[] {
+  return themeAccentPresets(light, dark)
+}