@adea-ai/ui 0.100.2 → 0.101.1

package/dist/r/src/components/composites/account-menu/account-menu.tsx

@@ -13,6 +13,7 @@ import type { ComponentProps, JSX } from 'solid-js'
 import { For, Show, createSignal, onCleanup, splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
 import { Button, type ButtonProps } from '../../ui/button/button'
+import { SideRailButton } from '../../layout/side-rail/side-rail'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -70,6 +71,13 @@ export type AccountMenuProps = {
   hideArrow?: boolean
   /** The trigger size. Icon-only menus default to the standard icon size. */
   size?: ButtonProps['size']
+  /**
+   * Render the trigger as a `SideRailButton` row instead of a bare icon
+   * button: same geometry, hover treatment, and flush collapsed-rail tip as
+   * every other entry in the surrounding rail. The component's own tooltip
+   * is skipped — the rail row owns its help.
+   */
+  railTrigger?: boolean
   /** The entries above the separator. */
   items: readonly AccountMenuItem[]
   /** Which platform this is rendered on, for items that declare one. */
@@ -104,6 +112,7 @@ export function AccountMenu(props: AccountMenuProps) {
     'gutter',
     'hideArrow',
     'size',
+    'railTrigger',
     'items',
     'platform',
     'authenticated',
@@ -133,83 +142,113 @@ export function AccountMenu(props: AccountMenuProps) {
   const visible = () =>
     local.items.filter((item) => !item.platform || item.platform === (local.platform ?? 'desktop'))
 
-  return (
-    <Tooltip open={tooltipOpen()} onOpenChange={(open) => setTooltipOpen(open && !menuOpen())}>
-      <DropdownMenu
-        modal={false}
-        placement={local.placement ?? 'top-start'}
-        gutter={local.gutter}
-        onOpenChange={(open) => {
-          setMenuOpen(open)
-          if (open) setTooltipOpen(false)
-        }}
+  // Built by reference at each return, not once up front: Solid fixes a node's
+  // owner chain when the JSX expression runs, and an eagerly created tree would
+  // never see the Tooltip provider below — Kobalte's TooltipTrigger then throws
+  // `useTooltipContext must be used within a Tooltip component`.
+  const menu = () => (
+    <DropdownMenu
+      modal={false}
+      placement={local.placement ?? 'top-start'}
+      gutter={local.gutter}
+      onOpenChange={(open) => {
+        setMenuOpen(open)
+        if (open) setTooltipOpen(false)
+      }}
+    >
+      <Show
+        when={local.railTrigger}
+        fallback={
+          <TooltipTrigger
+            as={AccountMenuButton}
+            ref={(element: HTMLButtonElement) => (trigger = element)}
+            variant="ghost"
+            size={local.size ?? 'icon-md'}
+            class={cn('text-muted-foreground', local.class)}
+            aria-label={local.label ?? 'Account and settings'}
+            onFocus={() => local.onIntent?.()}
+            onPointerEnter={() => local.onIntent?.()}
+            {...rest}
+          >
+            <UserRound aria-hidden="true" />
+          </TooltipTrigger>
+        }
       >
-        <TooltipTrigger
-          as={AccountMenuButton}
+        {/* Rail parity: the trigger is a SideRailButton row — the same
+            geometry and flush collapsed-rail tip as every other rail entry —
+            so the composite's own tooltip stays out of the way. */}
+        <DropdownMenuTrigger
+          as={SideRailButton}
           ref={(element: HTMLButtonElement) => (trigger = element)}
-          variant="ghost"
-          size={local.size ?? 'icon-md'}
-          class={cn('text-muted-foreground', local.class)}
-          aria-label={local.label ?? 'Account and settings'}
+          label={local.label ?? 'Account and settings'}
+          class={local.class}
           onFocus={() => local.onIntent?.()}
           onPointerEnter={() => local.onIntent?.()}
           {...rest}
         >
           <UserRound aria-hidden="true" />
-        </TooltipTrigger>
-        <DropdownMenuContent
-          hideArrow={local.hideArrow}
-          class="min-w-56 max-h-(--kb-popper-available-height) overflow-x-hidden overflow-y-auto"
-          onCloseAutoFocus={(event) => {
-            const selection = pendingAfterClose
-            pendingAfterClose = undefined
-            if (!selection) return
+        </DropdownMenuTrigger>
+      </Show>
+      <DropdownMenuContent
+        hideArrow={local.hideArrow}
+        class="min-w-56 max-h-(--kb-popper-available-height) overflow-x-hidden overflow-y-auto"
+        onCloseAutoFocus={(event) => {
+          const selection = pendingAfterClose
+          pendingAfterClose = undefined
+          if (!selection) return
 
-            event.preventDefault()
-            scheduledAfterClose = selection
-            queueMicrotask(() => {
-              if (scheduledAfterClose !== selection) return
-              scheduledAfterClose = undefined
-              selection.callback(trigger)
-            })
-          }}
-        >
-          <DropdownMenuGroup>
-            <For each={visible()}>
-              {(item) => (
-                <DropdownMenuItem
-                  disabled={item.disabled}
-                  onSelect={() => {
-                    pendingAfterClose = item.onSelectAfterClose
-                      ? { callback: item.onSelectAfterClose }
-                      : undefined
-                    item.onSelect?.()
-                  }}
-                  shortcut={item.shortcut}
-                  keyshortcuts={item.keyshortcuts}
-                >
-                  {item.icon ?? renderFallbackIcon(item.id)}
-                  <span>{item.label}</span>
-                </DropdownMenuItem>
-              )}
-            </For>
-          </DropdownMenuGroup>
-          <Show when={local.showSession !== false}>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
+          event.preventDefault()
+          scheduledAfterClose = selection
+          queueMicrotask(() => {
+            if (scheduledAfterClose !== selection) return
+            scheduledAfterClose = undefined
+            selection.callback(trigger)
+          })
+        }}
+      >
+        <DropdownMenuGroup>
+          <For each={visible()}>
+            {(item) => (
               <DropdownMenuItem
-                disabled={local.busy}
-                onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
+                disabled={item.disabled}
+                onSelect={() => {
+                  pendingAfterClose = item.onSelectAfterClose
+                    ? { callback: item.onSelectAfterClose }
+                    : undefined
+                  item.onSelect?.()
+                }}
+                shortcut={item.shortcut}
+                keyshortcuts={item.keyshortcuts}
               >
-                <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
-                  <LogOut aria-hidden="true" />
-                </Show>
-                <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
+                {item.icon ?? renderFallbackIcon(item.id)}
+                <span>{item.label}</span>
               </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </Show>
-        </DropdownMenuContent>
-      </DropdownMenu>
+            )}
+          </For>
+        </DropdownMenuGroup>
+        <Show when={local.showSession !== false}>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              disabled={local.busy}
+              onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
+            >
+              <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
+                <LogOut aria-hidden="true" />
+              </Show>
+              <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </Show>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+
+  if (local.railTrigger) return menu()
+
+  return (
+    <Tooltip open={tooltipOpen()} onOpenChange={(open) => setTooltipOpen(open && !menuOpen())}>
+      {menu()}
       {/* Both overlays own a Popper context; the tooltip must stay outside the menu root. */}
       <TooltipContent placement="top">{local.label ?? 'Account and settings'}</TooltipContent>
     </Tooltip>

package/dist/r/src/components/composites/help-center/help-center.tsx

@@ -5,6 +5,7 @@ import { ActionButton } from '../action-button'
 import { Alert, AlertDescription } from '../../ui/alert'
 import { Card, CardContent, CardHeader } from '../../ui/card'
 import { Kbd, KbdGroup } from '../../ui/kbd'
+import { Heading } from '../../ui/typography'
 
 export type HelpShortcut = { label: string; keys: readonly string[] }
 export type HelpLink = { label: string; description?: string; url: string }
@@ -37,7 +38,7 @@ export function HelpCenter(props: HelpCenterProps) {
     <div class={cn('flex min-w-0 flex-col gap-5', props.class)}>
       <Show when={props.showHeader !== false}>
         <div class="flex flex-col gap-2">
-          <h1 class="text-xl font-semibold tracking-tight">Help Center</h1>
+          <Heading size="page">Help Center</Heading>
           <p class="text-sm text-muted-foreground">
             Keyboard shortcuts and resources for {props.appName}.
           </p>

package/dist/r/src/components/composites/settings/settings.tsx

@@ -2,6 +2,7 @@ import type { ComponentProps, JSX } from 'solid-js'
 import { createUniqueId, Show, splitProps } from 'solid-js'
 import { createFormFieldContext, FormFieldContext } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
+import { Heading } from '../../ui/typography'
 
 /**
  * SettingsSection and SettingsRow.
@@ -43,7 +44,9 @@ export function SettingsSection(
     >
       <div class="flex items-start justify-between gap-4">
         <div class="flex min-w-0 flex-col gap-0.5">
-          <h2 class="text-base font-semibold tracking-tight">{local.title}</h2>
+          <Heading as="h2" size="card">
+            {local.title}
+          </Heading>
           <Show when={local.description}>
             <p class="max-w-prose text-sm text-muted-foreground text-pretty">{local.description}</p>
           </Show>

package/dist/r/src/components/composites/stat/stat.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { Dynamic } from 'solid-js/web'
 import { cn } from '../../../lib/utils'
+import { Heading, Text } from '../../ui/typography'
 
 /**
  * Stat.
@@ -53,9 +54,13 @@ export function Stat(props: StatProps) {
     >
       <div class="text-muted-foreground truncate text-xs font-medium">{local.label}</div>
       <div class="flex items-baseline gap-1">
-        <span class="text-xl font-semibold tabular-nums tracking-tight">{local.value}</span>
+        <Heading as="span" size="page" numeric>
+          {local.value}
+        </Heading>
         <Show when={local.unit}>
-          <span class="text-muted-foreground text-xs">{local.unit}</span>
+          <Text variant="caption" tone="muted">
+            {local.unit}
+          </Text>
         </Show>
       </div>
       <Show when={local.delta}>

package/dist/r/src/components/composites/update-dialog/update-dialog.tsx

@@ -33,6 +33,7 @@ import {
 } from '../../ui/dialog'
 import { createDialogFocusRestoration } from '../../ui/dialog/dialog'
 import { Progress } from '../../ui/progress'
+import { Heading } from '../../ui/typography'
 import { cn } from '../../../lib/utils'
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from '../../../lib/version-notes'
 
@@ -590,9 +591,9 @@ export function UpdateDialog(props: UpdateDialogProps) {
                 <p class="text-2xs font-semibold tracking-widest text-muted-foreground uppercase">
                   Installed version
                 </p>
-                <p class="text-xl font-semibold tracking-tight text-foreground">
+                <Heading as="p" size="page" tone="foreground">
                   v{state()?.currentVersion || local.fallbackVersion || '0.1.0'}
-                </p>
+                </Heading>
                 <p class="text-sm text-muted-foreground">
                   <Show
                     when={isCurrent()}
@@ -618,19 +619,30 @@ export function UpdateDialog(props: UpdateDialogProps) {
                   </Show>
                 </p>
               </div>
-              <ActionButton
-                type="button"
-                variant="outline"
-                size="sm"
-                tooltip="Check the release channel for the latest signed app version."
-                disabled={!desktop() || working()}
-                onClick={() => void check()}
-              >
-                <Show when={working()} fallback={<RefreshCw aria-hidden="true" />}>
-                  <LoaderCircle class="animate-spin" aria-hidden="true" />
+              <div class="flex flex-col items-end gap-2">
+                <ActionButton
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  tooltip="Check the release channel for the latest signed app version."
+                  disabled={!desktop() || working()}
+                  onClick={() => void check()}
+                >
+                  <Show when={working()} fallback={<RefreshCw aria-hidden="true" />}>
+                    <LoaderCircle class="animate-spin" aria-hidden="true" />
+                  </Show>
+                  {checkFailed() ? 'Retry update check' : 'Check latest version'}
+                </ActionButton>
+                {/* The up-to-date confirmation reads as the button's outcome,
+                    so it sits directly beneath it rather than floating as a
+                    full-width row between sections. */}
+                <Show when={isCurrent()}>
+                  <p class="text-foreground flex items-center gap-2 text-sm" role="status">
+                    <Check class="size-4 text-success" aria-hidden="true" />
+                    {appName()} is up to date.
+                  </p>
                 </Show>
-                {checkFailed() ? 'Retry update check' : 'Check latest version'}
-              </ActionButton>
+              </div>
             </div>
           </section>
 
@@ -729,13 +741,6 @@ export function UpdateDialog(props: UpdateDialogProps) {
             </section>
           </Show>
 
-          <Show when={isCurrent()}>
-            <p class="text-foreground flex items-center gap-2 text-sm" role="status">
-              <Check class="size-4 text-success" aria-hidden="true" />
-              {appName()} is up to date.
-            </p>
-          </Show>
-
           <Show when={state()?.phase === 'installed'}>
             <p class="text-foreground flex items-center gap-2 text-sm" role="status">
               <Check class="size-4 text-success" aria-hidden="true" />
@@ -780,9 +785,16 @@ export function UpdateDialog(props: UpdateDialogProps) {
 
           <Show when={changelog()}>
             <div class="flex flex-col gap-2">
-              <h2 id="update-changelog" class="text-sm font-semibold text-foreground">
-                Installed changelog
-              </h2>
+              <div class="flex items-center gap-2">
+                <h2 id="update-changelog" class="text-sm font-semibold text-foreground">
+                  Installed changelog
+                </h2>
+                {/* The version pill identifies which build's history this is —
+                    the same treatment the available-update heading carries. */}
+                <Badge variant="subtle" size="sm">
+                  v{state()?.currentVersion || local.fallbackVersion || '0.1.0'}
+                </Badge>
+              </div>
               <p class="text-xs text-muted-foreground">
                 All versions and updates included with this installation.
               </p>

package/dist/r/src/components/layout/page/page.tsx

@@ -1,6 +1,7 @@
 import type { ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
+import { Heading, headingVariants } from '../../ui/typography'
 
 /**
  * PageHeader.
@@ -44,7 +45,7 @@ export function PageHeaderTitle(props: ComponentProps<'h1'>) {
   return (
     <h1
       data-slot="page-header-title"
-      class={cn('text-xl font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'page' }), local.class)}
       {...rest}
     />
   )
@@ -92,7 +93,7 @@ export function PageSection(
       <Show when={local.title}>
         <div class="flex items-baseline justify-between gap-3">
           <div class="flex min-w-0 flex-col gap-0.5">
-            <h2 class="text-base font-semibold tracking-tight">{local.title}</h2>
+            <Heading size="section">{local.title}</Heading>
             <Show when={local.description}>
               <p class="max-w-prose text-sm text-muted-foreground text-pretty">
                 {local.description}

package/dist/r/src/components/theme/appearance-panel.tsx

@@ -7,6 +7,7 @@ import { Button } from '../ui/button/button'
 import { RadioGroup, RadioGroupItem } from '../ui/radio-group/radio-group'
 import { ThemePicker } from './theme-picker'
 import { useTheme } from './theme-provider'
+import { Heading } from '../ui/typography'
 
 /**
  * AppearancePanel.
@@ -43,7 +44,9 @@ export function AppearancePanel(props: AppearancePanelProps) {
       {/* --- 1. Appearance ------------------------------------------------- */}
       <section class="flex flex-col gap-3">
         <header class="flex flex-col gap-0.5">
-          <h2 class="text-base font-semibold tracking-tight">Appearance</h2>
+          <Heading as="h2" size="card">
+            Appearance
+          </Heading>
           <p class="max-w-prose text-sm text-muted-foreground">
             Follow the system, or pin one. The theme below is chosen per appearance, so switching at
             sunset does not make you choose again.
@@ -87,7 +90,9 @@ export function AppearancePanel(props: AppearancePanelProps) {
       {/* --- 3. Accent ------------------------------------------------------ */}
       <section class="flex flex-col gap-3">
         <header class="flex flex-col gap-0.5">
-          <h2 class="text-base font-semibold tracking-tight">Accent</h2>
+          <Heading as="h2" size="card">
+            Accent
+          </Heading>
           <p class="max-w-prose text-sm text-muted-foreground">
             Colours the interactive roles — the primary button, the focus ring, a selected row — on
             top of the theme above. Every preset is measured against the surface it lands on, so
@@ -130,7 +135,9 @@ export function AppearancePanel(props: AppearancePanelProps) {
       {/* --- 4. Font -------------------------------------------------------- */}
       <section class="flex flex-col gap-3">
         <header class="flex flex-col gap-0.5">
-          <h2 class="text-base font-semibold tracking-tight">Typeface</h2>
+          <Heading as="h2" size="card">
+            Typeface
+          </Heading>
           <p class="max-w-prose text-sm text-muted-foreground">
             The interface face. Every option is self-hosted, so nothing is fetched at runtime and
             the choice survives going offline.
@@ -166,7 +173,9 @@ function ThemeSection(props: {
   return (
     <section class="flex flex-col gap-3">
       <header class="flex flex-col gap-0.5">
-        <h2 class="text-base font-semibold tracking-tight">{props.title}</h2>
+        <Heading as="h2" size="card">
+          {props.title}
+        </Heading>
         <p class="max-w-prose text-sm text-muted-foreground">{props.description}</p>
       </header>
       <ThemePicker

package/dist/r/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -7,6 +7,7 @@ import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
 import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * AlertDialog.
@@ -117,7 +118,7 @@ export function AlertDialogTitle(props: ComponentProps<typeof KobalteAlertDialog
   const [local, rest] = splitProps(props, ['class'])
   return (
     <KobalteAlertDialog.Title
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

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

@@ -1,6 +1,7 @@
 import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * Card.
@@ -41,7 +42,7 @@ export function CardTitle(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-title"
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/dist/r/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)) {