@adea-ai/ui 0.100.2 → 0.101.1

package/src/components/ui/chart/chart-options.ts

@@ -45,7 +45,30 @@ const furniture = {
  */
 export type ChartScaleShape = 'cartesian' | 'radial' | 'none'
 
-const tickFont = { size: 10 }
+/**
+ * The chart's type: the UI face from the font axis and a rung of the type scale,
+ * declared as tokens like the colours.
+ *
+ * Chart.js does not inherit the page's font — it paints in its own default
+ * family — so every text a chart draws names `--font-sans` explicitly, and the
+ * chart follows `data-font` the same way it follows `.dark`. Everything is
+ * `--text-2xs`, the rung `ChartLegend` and the frame's metadata already use, so
+ * a canvas legend and an HTML one beside it are the same size.
+ *
+ * Chart.js types `size` as a number of pixels. The token is a `rem` length, so
+ * it is written as `var(--text-2xs)` here and the component resolves it to
+ * pixels with the colours (see `resolveCssVariables` and `chart.tsx`); the cast
+ * is that declaration, not a number.
+ */
+function chartFont(weight?: number) {
+  return {
+    family: 'var(--font-sans)',
+    size: 'var(--text-2xs)' as unknown as number,
+    ...(weight === undefined ? {} : { weight }),
+  }
+}
+
+const tickFont = chartFont()
 
 function scalesFor(shape: ChartScaleShape): ChartOptions['scales'] {
   if (shape === 'cartesian') {
@@ -140,7 +163,7 @@ export function chartOptions(
             boxHeight: 8,
             usePointStyle: true,
             pointStyle: 'circle',
-            font: { size: 11 },
+            font: chartFont(),
           },
         },
         tooltip: {
@@ -155,8 +178,9 @@ export function chartOptions(
           boxWidth: 8,
           boxHeight: 8,
           usePointStyle: true,
-          titleFont: { size: 11, weight: 600 },
-          bodyFont: { size: 11 },
+          titleFont: chartFont(600),
+          bodyFont: chartFont(),
+          footerFont: chartFont(),
         },
       },
       scales: scalesFor(shape),
@@ -169,17 +193,21 @@ const cssVariable = /^\s*var\(\s*(--[\w-]+)\s*(?:,\s*(.*?))?\s*\)\s*$/
 
 /**
  * Replace every `var(--token)` string in `value` — options, datasets, nested
- * arrays — with what `read` returns for the token. A token `read` cannot
+ * arrays — with what `read` returns for the token, which may be a number (a
+ * length token read as pixels). A token `read` cannot
  * resolve falls back to the `var()`'s own fallback, then to the string as
  * written. Functions and class instances pass through untouched, so scriptable
  * options and gradients keep working.
  */
-export function resolveCssVariables<T>(value: T, read: (name: string) => string | undefined): T {
+export function resolveCssVariables<T>(
+  value: T,
+  read: (name: string) => string | number | undefined
+): T {
   if (typeof value === 'string') {
     const match = cssVariable.exec(value)
     if (!match) return value
     const resolved = read(match[1]!)
-    if (resolved) return resolved as T
+    if (resolved !== undefined && resolved !== '') return resolved as T
     return (match[2] ? resolveCssVariables(match[2], read) : value) as T
   }
   if (Array.isArray(value)) {

package/src/components/ui/chart/chart.tsx

@@ -15,7 +15,7 @@ import {
   RadialLinearScale,
   Tooltip as ChartTooltip,
 } from 'chart.js'
-import type { ChartOptions, ChartType } from 'chart.js'
+import type { ChartOptions, ChartType, Plugin } from 'chart.js'
 import { cn } from '#lib/utils'
 import {
   chartOptions,
@@ -62,7 +62,9 @@ import {
  * A canvas cannot read a custom property, so the options and datasets carry
  * `var(--token)` strings and each chart resolves them against its own element
  * when it renders, and again whenever the root's attributes change — the
- * `.dark` class, `data-accent`, an inline override. See `createThemeResolver`.
+ * `.dark` class, `data-accent`, `data-font`, an inline override. The type is
+ * resolved the same way: `--font-sans` for the family and a type-scale rung for
+ * the size, so a chart follows the font axis too. See `createThemeResolver`.
  */
 
 /**
@@ -119,6 +121,23 @@ function toCanvasColor(value: string): string {
   return `rgba(${r}, ${g}, ${b}, ${Math.round(((a ?? 255) / 255) * 1000) / 1000})`
 }
 
+const length = /^(-?\d*\.?\d+)(px|rem)$/
+
+/**
+ * A token's computed value as a canvas option: a colour as an sRGB colour, a
+ * `px`/`rem` length (a type-scale rung) as the number of pixels Chart.js wants,
+ * and anything else — a font stack — as written.
+ */
+function toCanvasValue(raw: string): string | number {
+  const match = length.exec(raw)
+  if (match) {
+    const value = Number(match[1])
+    if (match[2] === 'px') return value
+    return value * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16)
+  }
+  return toCanvasColor(raw)
+}
+
 /**
  * Resolves `var(--token)` strings against a chart's element, and re-resolves
  * them when the theme changes.
@@ -127,16 +146,25 @@ function toCanvasColor(value: string): string {
  * inline tokens takes those. The observer watches every attribute on `<html>`,
  * because that is where both applications switch appearance, accent and theme
  * (`.dark`, `data-accent`, `data-theme`, inline variables); a theme axis added
- * later is covered without touching this. It is released with the chart.
+ * later is covered without touching this. It also re-resolves when a web font
+ * finishes loading: a canvas draws text once, so a chart rendered before the
+ * face selected by `data-font` arrived would otherwise keep the fallback face
+ * until something else redrew it. Both are released with the chart.
  */
 function createThemeResolver() {
   let element: HTMLElement | undefined
   const [revision, invalidate] = createSignal(undefined, { equals: false })
+  const onFontsLoaded = () => invalidate()
 
   onMount(() => {
     const observer = new MutationObserver(() => invalidate())
     observer.observe(document.documentElement, { attributes: true })
-    onCleanup(() => observer.disconnect())
+    const fonts = typeof document.fonts === 'undefined' ? undefined : document.fonts
+    fonts?.addEventListener('loadingdone', onFontsLoaded)
+    onCleanup(() => {
+      observer.disconnect()
+      fonts?.removeEventListener('loadingdone', onFontsLoaded)
+    })
   })
 
   return {
@@ -147,11 +175,11 @@ function createThemeResolver() {
       revision()
       if (!element || typeof getComputedStyle === 'undefined') return value
       const style = getComputedStyle(element)
-      const resolved = new Map<string, string | undefined>()
+      const resolved = new Map<string, string | number | undefined>()
       return resolveCssVariables(value, (name) => {
         if (!resolved.has(name)) {
           const raw = style.getPropertyValue(name).trim()
-          resolved.set(name, raw ? toCanvasColor(raw) : undefined)
+          resolved.set(name, raw ? toCanvasValue(raw) : undefined)
         }
         return resolved.get(name)
       })
@@ -343,13 +371,36 @@ export function RadarChart(props: SeriesChartProps) {
 }
 
 /**
- * A polar area chart: radial bars, for a composition.
+ * Puts the themed radial scale back on a chart `solid-chartjs` has just created.
  *
- * Its scale is left to Chart.js's polar-area defaults (`'none'` rather than
- * `'radial'`): `solid-chartjs` deletes `options.scales.r` for every chart type
- * but radar when it first creates the chart, so radial styling here would apply
- * only after the first theme change — a chart that restyles itself on a toggle.
+ * `solid-chartjs` deletes `options.scales.r` for every chart type but radar when
+ * it first creates a chart. Today that delete lands on a throwaway copy — Solid
+ * compiles `options={…}` to a getter, so its next read rebuilds the object with
+ * `r` intact — but that is an accident of how the prop is passed: a memoised or
+ * static options object would lose the scale, and the polar area would fall back
+ * to Chart.js's defaults (grey ticks on a translucent white box, which is a white
+ * box on a dark card). Restoring it from this component's own options makes the
+ * themed scale independent of both. Later option updates (every theme change)
+ * pass `r` through untouched; only creation drops it.
+ *
+ * `afterInit` runs inside Chart.js's constructor, after the options are read and
+ * before the first update builds the scales and draws, so the themed scale is in
+ * place for the first frame — no default-styled frame, and no extra update. The
+ * plugin is per instance, passed through the chart's `plugins` prop, so nothing
+ * is registered globally.
  */
+function restoreRadialScale(options: () => ChartOptions): Plugin {
+  return {
+    id: 'adea-radial-scale',
+    afterInit(chart) {
+      const scale = options().scales?.['r']
+      if (!scale) return
+      chart.options.scales = { ...chart.options.scales, r: scale }
+    },
+  }
+}
+
+/** A polar area chart: radial bars, for a composition. */
 export function PolarAreaChart(props: {
   labels: readonly string[]
   data: readonly number[]
@@ -357,9 +408,11 @@ export function PolarAreaChart(props: {
   class?: string
 }) {
   const theme = createThemeResolver()
+  const options = () => theme.resolve(chartOptions(props.options, 'radial'))
   return (
     <div ref={theme.ref} class={cn('h-64', props.class)}>
       <PolarArea
+        plugins={[restoreRadialScale(options)]}
         data={theme.resolve({
           labels: [...props.labels],
           datasets: [
@@ -371,7 +424,7 @@ export function PolarAreaChart(props: {
             },
           ],
         })}
-        options={theme.resolve(chartOptions(props.options, 'none'))}
+        options={options()}
       />
     </div>
   )

package/src/components/ui/dialog/dialog.tsx

@@ -9,6 +9,7 @@ import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
 import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '#lib/overlay'
 import { cn } from '#lib/utils'
+import { headingVariants } from '../typography'
 
 type FocusCycle = {
   content: HTMLElement
@@ -327,7 +328,7 @@ export function DialogTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <KobalteDialog.Title
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/src/components/ui/drawer/drawer.tsx

@@ -2,6 +2,7 @@ import DrawerPrimitive from '@corvu/drawer'
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * Drawer.
@@ -96,7 +97,7 @@ export function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>)
   const [local, rest] = splitProps(props, ['class'])
   return (
     <DrawerPrimitive.Label
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/src/components/ui/field/field.tsx

@@ -4,6 +4,7 @@ import { createUniqueId, Show, splitProps } from 'solid-js'
 import { Label } from '../label/label'
 import { createFormFieldContext, FormFieldContext } from '#lib/form-field'
 import { cn } from '#lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * Field.
@@ -199,9 +200,7 @@ export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legen
     <legend
       class={cn(
         'mb-1',
-        local.variant === 'label'
-          ? 'text-sm font-medium'
-          : 'text-base font-semibold tracking-tight',
+        local.variant === 'label' ? 'text-sm font-medium' : headingVariants({ size: 'card' }),
         local.class
       )}
       {...rest}

package/src/components/ui/navigation-menu/navigation-menu.tsx

@@ -2,7 +2,14 @@ import { splitProps, type ComponentProps, type JSX } from 'solid-js'
 import * as KobalteNavigationMenu from '@kobalte/core/navigation-menu'
 import { ChevronDown } from 'lucide-solid'
 import { cn } from '#lib/utils'
-import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '#lib/overlay'
+import {
+  menuContentPadding,
+  menuItem,
+  menuLabel,
+  menuSeparator,
+  overlayMotion,
+  overlaySurface,
+} from '#lib/overlay'
 
 /**
  * NavigationMenu.
@@ -123,7 +130,11 @@ export function NavigationMenuContent(props: ComponentProps<typeof KobalteNaviga
         class={cn(
           // Absolute so the viewport sizes to the active panel's measured box and
           // animates between panels, rather than stacking them.
-          'absolute top-0 left-0 grid w-max gap-1 p-2 outline-none',
+          'absolute top-0 left-0 grid w-max gap-1 outline-none',
+          // The viewport is the surface and carries no padding of its own (its
+          // measured size is the panel's), so the panel supplies the inset every
+          // menu surface shares — the one the separator's bleed is cut for.
+          menuContentPadding,
           // The motion is the panel's, not the viewport's. Kobalte keeps an
           // outgoing panel mounted until the viewport's own animation ends; a
           // viewport that carries an entrance animation never fires that again
@@ -193,7 +204,11 @@ export function NavigationMenuItem(props: NavigationMenuItemProps) {
     <KobalteNavigationMenu.Item
       class={cn(
         menuItem,
-        'grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5',
+        // The description sits under the label, in the label's column. Without
+        // an icon there is no leading column, and a two-column grid would set
+        // the description beside the label instead of beneath it.
+        local.icon ? 'grid grid-cols-[auto_1fr]' : 'grid grid-cols-1',
+        'items-center gap-x-2 gap-y-0.5',
         local.description && 'grid-rows-[auto_auto] py-2',
         local.class
       )}
@@ -202,7 +217,13 @@ export function NavigationMenuItem(props: NavigationMenuItemProps) {
       {local.icon}
       <span class="font-medium">{local.children}</span>
       {local.description && (
-        <span class="col-start-2 text-xs text-muted-foreground">{local.description}</span>
+        <span
+          class={cn('text-xs text-muted-foreground', {
+            'col-start-2': !!local.icon,
+          })}
+        >
+          {local.description}
+        </span>
       )}
     </KobalteNavigationMenu.Item>
   )
@@ -212,12 +233,7 @@ export function NavigationMenuSeparator(
   props: ComponentProps<typeof KobalteNavigationMenu.Separator>
 ) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteNavigationMenu.Separator
-      class={cn('-mx-1 my-1 h-px bg-border', local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteNavigationMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />
 }
 
 /** A non-interactive caption above a group of items. */
@@ -225,16 +241,7 @@ export function NavigationMenuGroupLabel(
   props: ComponentProps<typeof KobalteNavigationMenu.GroupLabel>
 ) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteNavigationMenu.GroupLabel
-      class={cn(
-        menuContentPadding,
-        'text-2xs font-semibold text-muted-foreground uppercase',
-        local.class
-      )}
-      {...rest}
-    />
-  )
+  return <KobalteNavigationMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />
 }
 
 export function NavigationMenuGroup(props: ComponentProps<typeof KobalteNavigationMenu.Group>) {

package/src/components/ui/sheet/sheet.tsx

@@ -10,6 +10,7 @@ import { Show, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '#lib/variants'
 import { cn } from '#lib/utils'
 import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
+import { headingVariants } from '../typography'
 
 /**
  * Sheet.
@@ -152,7 +153,10 @@ export function SheetFooter(props: ComponentProps<'div'>) {
 export function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
-    <KobalteDialog.Title class={cn('text-sm leading-none font-semibold', local.class)} {...rest} />
+    <KobalteDialog.Title
+      class={cn(headingVariants({ size: 'subsection', leading: 'none' }), local.class)}
+      {...rest}
+    />
   )
 }
 

package/src/components/ui/tabs/tabs.tsx

@@ -13,6 +13,7 @@ import { cn } from '#lib/utils'
 
 type TabsIdContextValue = {
   id: Accessor<string>
+  orientation: Accessor<'horizontal' | 'vertical'>
   triggerIds: Accessor<ReadonlyMap<string, string>>
   registerTriggerId: (value: string, id: string) => void
   unregisterTriggerId: (value: string, id: string) => void
@@ -43,6 +44,7 @@ export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
   const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())
   const tabs: TabsIdContextValue = {
     id,
+    orientation: () => rest.orientation ?? 'horizontal',
     triggerIds,
     registerTriggerId: (value, triggerId) => {
       setTriggerIds((current) => new Map(current).set(value, triggerId))
@@ -103,6 +105,19 @@ export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {
   appearance?: 'underline' | 'segmented'
 }
 
+/**
+ * The underline appearance marks the selected trigger on the edge it shares
+ * with the list's axis. A horizontal row reads left to right along a baseline,
+ * so the mark is a bottom bar sitting on the list's rule. A vertical list stacks
+ * its triggers, and a bottom bar there underlines one row of a column — it reads
+ * as a divider, not a selection — so the mark moves to the inline-start edge,
+ * the leading bar a side navigation uses, and the label aligns to that edge.
+ *
+ * The orientation is read from the root rather than from a `data-orientation`
+ * selector so the vertical classes are unprefixed: a composite that replaces the
+ * mark (SettingsNavigation's filled row passes `border-0`) then overrides it
+ * through the ordinary class merge instead of fighting a variant-scoped border.
+ */
 export function TabsTrigger(props: TabsTriggerProps) {
   const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])
   const tabs = useTabsId()
@@ -128,7 +143,9 @@ export function TabsTrigger(props: TabsTriggerProps) {
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
         local.appearance === 'segmented'
           ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'
-          : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',
+          : tabs.orientation() === 'vertical'
+            ? 'h-control-md justify-start rounded-none border-s-2 border-transparent ps-3 pe-2 data-[selected]:border-primary'
+            : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',
         local.class
       )}
       {...rest}

package/src/components/ui/toast/toast.tsx

@@ -180,6 +180,10 @@ export type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {
 }
 
 /**
+ * `class` lands on the region too: the props describe the region, and the
+ * region is the element a caller lays out (an inset clear of a status bar, a
+ * narrower stack). The list inside it is an implementation detail.
+ *
  * The corner is set on the region, not the list. The region is the `fixed`
  * element: an inset on the list inside it positions nothing, and the region falls
  * back to wherever it happens to sit in the document flow.
@@ -217,16 +221,13 @@ export function Toaster(props: ToasterProps) {
        */
       class={cn(
         'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',
-        toasterPosition[local.position ?? 'bottom-right']
+        toasterPosition[local.position ?? 'bottom-right'],
+        local.class
       )}
       {...rest}
     >
       <KobalteToast.List
-        class={cn(
-          'flex flex-col gap-2',
-          toasterAlignment[local.position ?? 'bottom-right'],
-          local.class
-        )}
+        class={cn('flex flex-col gap-2', toasterAlignment[local.position ?? 'bottom-right'])}
       />
     </KobalteToast.Region>
   )

package/src/components/ui/typography/index.ts

@@ -0,0 +1,9 @@
+export {
+  Heading,
+  headingElement,
+  headingVariants,
+  Text,
+  textElement,
+  textVariants,
+} from './typography'
+export type { HeadingProps, TextProps } from './typography'