@adea-ai/ui 0.100.0 → 0.101.0

package/registry.json

@@ -61,6 +61,7 @@
         "@kobalte/core@^0.13.14"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -270,6 +271,7 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -533,6 +535,7 @@
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -579,6 +582,7 @@
         "@corvu/drawer@^0.2.4"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -683,6 +687,7 @@
       "registryDependencies": [
         "@adea-ai/ui/input",
         "@adea-ai/ui/label",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1174,6 +1179,7 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/dialog",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1496,6 +1502,30 @@
         }
       ]
     },
+    {
+      "name": "typography",
+      "type": "registry:ui",
+      "title": "Typography",
+      "description": "",
+      "dependencies": [
+        "@kobalte/core@^0.13.14"
+      ],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/ui/typography/index.ts",
+          "type": "registry:ui",
+          "target": "components/ui/typography/index.ts"
+        },
+        {
+          "path": "src/components/ui/typography/typography.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/typography/typography.tsx"
+        }
+      ]
+    },
     {
       "name": "app-shell",
       "type": "registry:ui",
@@ -1582,6 +1612,7 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1825,6 +1856,7 @@
       "registryDependencies": [
         "@adea-ai/ui/button",
         "@adea-ai/ui/dropdown-menu",
+        "@adea-ai/ui/side-rail",
         "@adea-ai/ui/tooltip",
         "lib"
       ],
@@ -1975,6 +2007,7 @@
         "@adea-ai/ui/alert",
         "@adea-ai/ui/card",
         "@adea-ai/ui/kbd",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -2053,6 +2086,7 @@
       "registryDependencies": [
         "@adea-ai/ui/sidebar-nav",
         "@adea-ai/ui/tabs",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -2087,6 +2121,7 @@
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -2145,6 +2180,7 @@
         "@adea-ai/ui/button",
         "@adea-ai/ui/dialog",
         "@adea-ai/ui/progress",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -2320,6 +2356,7 @@
         "@adea-ai/ui/radio-group",
         "@adea-ai/ui/toggle-group",
         "@adea-ai/ui/tooltip",
+        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [

package/src/components/composites/about-dialog/about-dialog.tsx

@@ -94,6 +94,7 @@ export function AboutDialog(props: AboutDialogProps) {
   return (
     <Dialog open={props.open} onOpenChange={props.onOpenChange}>
       <DialogContent
+        class="w-96"
         onKeyDown={(event: KeyboardEvent) => {
           // Tooltip help on the identity actions cannot trap Escape in this popup.
           if (event.key === 'Escape' && !event.defaultPrevented) {
@@ -114,8 +115,8 @@ export function AboutDialog(props: AboutDialogProps) {
         }}
         onCloseAutoFocus={focus.onCloseAutoFocus}
       >
-        <div class="flex flex-col items-center gap-3 px-6 py-8 text-center">
-          <img src={props.appIcon} alt="" class="size-16" aria-hidden="true" />
+        <div class="flex flex-col items-center gap-2 text-center">
+          <img src={props.appIcon} alt="" class="size-14" aria-hidden="true" />
           <DialogTitle>{props.appName}</DialogTitle>
           {/* Body text on the dialog's themed surface: primary ink measures
               below AA against the lighter dialog backgrounds across schemes,

package/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/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/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/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/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/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/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/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/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}
     />
   )