@adea-ai/ui 0.99.0 → 0.99.2

package/dist/r/src/styles/theme.css

@@ -16,9 +16,10 @@
  *     lightness step reads as the same step in every hue and a re-hue does not
  *     need its ramp re-derived by eye.
  *   - **`@adea-ai/themes` supplies the values.** The two default themes are composed
- *     there from upstream palettes — Aardvark Ink's canvas and greyscale for Adea
- *     Dark, Nord Light's for Adea Light, and GitHub's hues for both — and normalized
- *     against measured contrast floors. The colour declarations in sections 1 and 2
+ *     there from upstream palettes — GitHub Dark Default's canvas and greyscale,
+ *     re-greyed to violet, for Adea Dark; GitHub Light Default's white canvas for Adea
+ *     Light; and GitHub's dark hues for both — and normalized against measured
+ *     contrast floors. The colour declarations in sections 1 and 2
  *     are *generated* from that catalogue (`bun run theme:build`) rather than written
  *     here; everything else in this file is this system's own.
  *
@@ -41,11 +42,11 @@
  * ========================================================================== */
 
 /* ---------------------------------------------------------------------------
- * 1. Colour — light theme (the default)
+ * 1. Colour — light theme (the `:root` fallback; Storybook opens dark)
  *
- * Contrast: body text 8.6:1 on the canvas and 7.7:1 on a card, `--muted-foreground`
- * 5.5:1 on the canvas and 5.0:1 on a card, `--primary-foreground` on `--primary`
- * 5.9:1. Measured rather than estimated; `tests/tokens.test.ts` asserts each pairing.
+ * Contrast: body text 15.8:1 on the canvas and 14.3:1 on a card, `--muted-foreground`
+ * 6.2:1 on the canvas and 5.6:1 on a card and the sidebar, `--primary-foreground` on
+ * `--primary` 6.1:1. Measured rather than estimated; `tests/tokens.test.ts` asserts each pairing.
  * ------------------------------------------------------------------------- */
 :root {
   /* @generated theme:root — run `bun run theme:build` after changing the catalogue */
@@ -176,13 +177,15 @@
 /* ---------------------------------------------------------------------------
  * 2. Colour — dark theme
  *
- * adea's dark theme is a *soft* neutral rather than a near-black: the canvas is a
- * light grey and the primary is near-white. That is the product's existing look,
- * and it is deliberately not the near-black blue-tinted dark of the donor this
- * system's structure came from.
+ * A near-black violet-grey canvas — GitHub Dark Default's greyscale with its chroma
+ * halved and its hue turned from blue to violet — and a bright violet primary that
+ * carries a near-black label. The tint is what pairs it with the light theme's
+ * violet; it is deliberately not the blue-tinted dark of the donor this system's
+ * structure came from.
  *
- * Contrast: body text 14.9:1, `--muted-foreground` 6.1:1 on the canvas and 4.9:1
- * on a card, `--primary-foreground` on `--primary` 10.4:1.
+ * Contrast: body text 16.0:1 on the canvas and 14.9:1 on a card,
+ * `--muted-foreground` 7.0:1 on the canvas and 6.5:1 on a card and the sidebar,
+ * `--primary-foreground` on `--primary` 7.5:1.
  * ------------------------------------------------------------------------- */
 .dark {
   /* @generated theme:dark — run `bun run theme:build` after changing the catalogue */
@@ -304,7 +307,7 @@
 /* ---------------------------------------------------------------------------
  * 3. The accent axis
  *
- * adea's six accents, as a selection rather than a constant. `data-accent` sits on
+ * adea's six accent presets, as a selection rather than a constant. `data-accent` sits on
  * the same element as `dark` — in both applications that is `<html>` — and each
  * block overrides the roles an accent owns: the interactive primary, its label,
  * its hover rung, its tint and the focus ring.
@@ -319,7 +322,7 @@
  *      for exactly this reason: a bright violet in dark mode carries a black
  *      label, and the same accent's deep light-mode form carries a white one.
  *
- * `theme` (the default) is the monochrome primary above and needs no block.
+ * `theme` (the default) is the theme's own primary above and needs no block.
  * ------------------------------------------------------------------------- */
 
 /* @generated accents — run `bun run theme:build` after changing the catalogue */
@@ -490,23 +493,6 @@
   --ui-word-spacing: -2.5px;
 }
 
-/* The default, and it has to be declared *above* the blocks above.
- *
- * `:root` and `[data-font='…']` have the same specificity, so the later one wins
- * outright. With the default written after them — which is where it naturally
- * belongs, next to the stacks it references — every `[data-font]` block was
- * dead: all five typefaces resolved to Space Grotesk while the toolbar reported a
- * different selection.
- *
- * The references resolve fine from here even though `--font-family-*` is declared
- * further down, because a custom property is resolved where it is used rather than
- * where it is declared. The ordering that matters is between two declarations of
- * the *same* property, and there is only one of those below.
- *
- * `tests/appearance-axes.test.ts` asserts this order, because "the block is above
- * the default" is invisible to review and to every behavioural test.
- */
-
 /* ---------------------------------------------------------------------------
  * 4. Non-colour scales
  *
@@ -596,12 +582,6 @@
   --row-height-md: 2rem;
   --row-height-lg: 2.25rem;
 
-  /* Space Grotesk is the default because it is the face the visual language was
-     drawn against: the donor this system's structure comes from sets it, and its
-     slightly narrow, geometric forms are part of the look. The *selection* that
-     picks between it and the other four is the `:root` block above, which has to
-     precede every `[data-font]` block for the reason given there. */
-
   /* Shell geometry. One place to change how wide a rail or sidebar is, so the two
      consumer apps cannot disagree. 56px keeps the icon column to its content:
      20px glyphs centred in a 36px row need less chrome than the 74px the donor's
@@ -621,9 +601,9 @@
   --tooltip-max-width: min(16rem, calc(100vw - 1.5rem));
 
   /* Shadows. Two parts on purpose: a tinted spread that reads as elevation, plus a
-     hairline that keeps an edge visible when the surface behind a panel is the
-     same colour as the panel — which is the light theme, where `--card` and
-     `--background` are both white. */
+     hairline that keeps an edge visible when the surface behind a panel is
+     nearly the same colour as the panel — which is the light theme, where `--card`
+     is one faint step off a white `--background`. */
   --shadow-2xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
   --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.06);
   --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 0 0 1px oklch(0 0 0 / 0.04);
@@ -631,8 +611,8 @@
   --shadow-lg: 0 12px 28px oklch(0 0 0 / 0.12);
   --shadow-xl: 0 20px 44px oklch(0 0 0 / 0.16);
 
-  /* Motion. Two durations cover the system: `fast` for a state change the user is
-     already watching, `normal` for an entrance. The easing is KiroCrew's entrance
+  /* Motion. Three durations cover the system: `fast` for a state change the user is
+     already watching, `normal` for an entrance, `slow` for a layout settle. The easing is KiroCrew's entrance
      curve — a fast start and a long settle, which reads as decisive rather than
      floaty. */
   --duration-fast: 120ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.99.0",
+  "version": "0.99.2",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -325,6 +325,11 @@
         "lib"
       ],
       "files": [
+        {
+          "path": "src/components/ui/chart/chart-options.ts",
+          "type": "registry:ui",
+          "target": "components/ui/chart/chart-options.ts"
+        },
         {
           "path": "src/components/ui/chart/chart.tsx",
           "type": "registry:ui",

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

@@ -83,6 +83,11 @@ export function ModeChoices(props: AppearanceEditorProps) {
 }
 
 export function AccentChoices(props: AppearanceEditorProps) {
+  // The resolved appearance decides which side of a preset pair — and which
+  // theme accent — the swatches paint, so the row previews each choice as the
+  // user will see it.
+  const resolvedAppearance = () =>
+    props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
   const custom = () =>
     props.draft.accent !== 'theme' &&
     !props.accentOptions.some((option) => option.id === props.draft.accent)
@@ -93,9 +98,9 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      // Two chips in a column beside a 3x2 swatch grid: one line of six
-      // swatches plus chips overflows the settings sidebar's control column,
-      // and the column keeps both rows of the pair balanced (2 x 28px + gap).
+      // One chip (custom) beside a capped swatch grid: a chip-per-state column
+      // beside a full-width swatch line overflowed the settings sidebar's
+      // control column, so the pair stays a narrow chip plus a wrapped grid.
       class="flex items-center gap-3"
       onChange={(accent) =>
         props.onChange({
@@ -103,21 +108,29 @@ export function AccentChoices(props: AppearanceEditorProps) {
         })
       }
     >
-      <div class="flex flex-col gap-2">
-        <Radio.Item value="theme">
+      <div class="grid grid-cols-4 gap-2">
+        {/* The theme's own accent is the first swatch. Picking it is the same
+            act the old dedicated "Theme default" chip performed, without a
+            second control for the state the row starts in. */}
+        <Radio.Item
+          value="theme"
+          class="rounded-full 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 whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
-            Theme default
+          <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':
+                  resolvedAppearance() === 'light'
+                    ? props.lightTheme.colors.accent
+                    : props.darkTheme.colors.accent,
+              }}
+            />
+            <span class="sr-only">Theme default</span>
           </Radio.ItemLabel>
         </Radio.Item>
-        <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>
-      <div class="grid grid-cols-3 gap-2">
         <For each={props.accentOptions}>
           {(option) => (
             <Radio.Item
@@ -131,11 +144,7 @@ export function AccentChoices(props: AppearanceEditorProps) {
                   aria-hidden="true"
                   style={{
                     'background-color':
-                      (props.draft.mode === 'system'
-                        ? props.resolvedAppearance
-                        : props.draft.mode) === 'light'
-                        ? option.light
-                        : option.dark,
+                      resolvedAppearance() === 'light' ? option.light : option.dark,
                   }}
                 />
                 <span class="sr-only">{option.label}</span>
@@ -144,6 +153,12 @@ export function AccentChoices(props: AppearanceEditorProps) {
           )}
         </For>
       </div>
+      <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>
     </Radio>
   )
 }

package/src/components/composites/appearance-editor/appearance-rows.tsx

@@ -210,10 +210,14 @@ function ThemeSelectMenu(props: {
         </DropdownMenuTrigger>
         <DropdownMenuContent
           portalMount={portalMount()}
-          // Sized to content (at least the trigger width, never wider than the
+          // A fixed height with its own scroll: an adaptive cap measured the
+          // host panel instead, and opening a long theme list scrolled the
+          // sidebar to reveal the menu. The content scrolls internally at the
+          // cap, so the panel around the trigger never moves. Width still
+          // follows content (at least the trigger width, never wider than the
           // popper allows) so long theme names render in full with padding for
           // the selection indicator instead of truncating at the anchor width.
-          class="max-h-(--kb-popper-content-available-height) w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto"
+          class="max-h-80 w-max min-w-(--kb-popper-anchor-width) max-w-(--kb-popper-content-available-width) overflow-x-hidden overflow-y-auto"
           onInteractOutside={(event) => {
             if (event.detail.originalEvent.type !== 'pointerdown') return
             const parentDialog = portalMount()?.closest<HTMLElement>('[role="dialog"]')

package/src/components/layout/orbit-layout/orbit-layout.tsx

@@ -60,7 +60,11 @@ export function OrbitLayout(props: OrbitLayoutProps) {
 export type OrbitItemProps = Omit<ComponentProps<'div'>, 'style'> & {
   /** JSX style props are owned by this geometry primitive. */
   style?: never
-  /** Zero-based position in the rendered sequence. */
+  /**
+   * Zero-based position in the rendered sequence. Index 0 sits at three o'clock
+   * (the positive x axis) and the sequence runs clockwise, because the y axis
+   * points down the screen: with four items, 0 is east, 1 south, 2 west, 3 north.
+   */
   index: number
   /** Number of items sharing this orbit. */
   count: number

package/src/components/layout/side-rail/side-rail.tsx

@@ -205,7 +205,10 @@ export type SideRailItemProps<T extends ValidComponent = 'a'> = PolymorphicProps
      * being deleted.
      */
     label: string
-    /** A count or a dot, rendered over the icon's corner. */
+    /**
+     * A count or a dot. Expanded, it trails the label at the row's end; collapsed,
+     * it moves onto the icon's corner, so the rail never loses it.
+     */
     badge?: JSX.Element
     /** An indicator pinned to the trailing edge in the expanded form. */
     trailing?: JSX.Element
@@ -258,6 +261,7 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
         data-active={local.active ? '' : undefined}
         class={cn(
           sideRailItemClass,
+          'relative',
           local.active ? sideRailItemStateClass.active : sideRailItemStateClass.idle,
           local.class
         )}
@@ -267,24 +271,33 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
         onBlur={hideTip}
         {...(rest as Record<string, unknown>)}
       >
-        <Show when={local.badge}>
-          <span class="relative flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
-            {local.children}
-            <span class="absolute -top-1 -end-1 flex items-center justify-center">
-              {local.badge}
-            </span>
-          </span>
-        </Show>
-        <Show when={!local.badge}>
-          <span class="flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
-            {local.children}
-          </span>
-        </Show>
+        <span class="flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
+          {local.children}
+        </span>
 
-        <span class="min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only">
+        <span class="min-w-0 flex-1 truncate text-start group-data-[collapsed=true]/rail:sr-only">
           {local.label}
         </span>
 
+        {/*
+         * One element, two placements, because the badge is caller content and a DOM
+         * node cannot be in two places. Expanded, it is a trailing count in the row's
+         * flow, after the label — over the icon it would cover the glyph the row is
+         * recognised by. Collapsed, there is no label to trail, so it leaves the flow
+         * and pins to the icon's top-end corner: anchored to the row's centre (where
+         * the centred icon sits) and pushed out by 14px, the icon's half-width plus
+         * the 4px overhang, so a wider count grows back over the icon rather than past
+         * the rail's edge.
+         */}
+        <Show when={local.badge}>
+          <span
+            data-slot="side-rail-badge"
+            class="flex shrink-0 items-center justify-center group-data-[collapsed=true]/rail:absolute group-data-[collapsed=true]/rail:end-1/2 group-data-[collapsed=true]/rail:top-1/2 group-data-[collapsed=true]/rail:-me-3.5 group-data-[collapsed=true]/rail:-mt-3.5"
+          >
+            {local.badge}
+          </span>
+        </Show>
+
         <Show when={local.shortcut && local.trailing === undefined}>
           <span
             aria-hidden="true"
@@ -380,7 +393,7 @@ export function SideRailButton(
         <span class="flex size-5 shrink-0 items-center justify-center [&_svg]:size-5">
           {local.children}
         </span>
-        <span class="min-w-0 flex-1 truncate group-data-[collapsed=true]/rail:sr-only">
+        <span class="min-w-0 flex-1 truncate text-start group-data-[collapsed=true]/rail:sr-only">
           {local.label}
         </span>
         <Show when={local.shortcut}>

package/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -182,7 +182,7 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
           })}
         />
       </Show>
-      <span class="min-w-0 flex-1 truncate">{local.label}</span>
+      <span class="min-w-0 flex-1 truncate text-start">{local.label}</span>
       <Show when={local.count !== undefined}>
         <span class="shrink-0 tabular-nums text-muted-foreground">{local.count}</span>
       </Show>
@@ -290,7 +290,7 @@ export function SidebarNavLabel(props: ComponentProps<'span'>) {
   return (
     <span
       data-slot="sidebar-nav-label"
-      class={cn('min-w-0 flex-1 truncate', local.class)}
+      class={cn('min-w-0 flex-1 truncate text-start', local.class)}
       {...rest}
     />
   )

package/src/components/motion/presence.tsx

@@ -14,14 +14,24 @@ import { Presence as MotionPresence } from 'solid-motionone'
  * this for mounting and unmounting, which is the split that keeps the common case
  * free of a runtime while making the rare case correct.
  *
- *   <Show when={open()}>
- *     <Presence initial={{ opacity: 0, scale: 0.96 }} exit={{ opacity: 0, scale: 0.96 }}>
- *       <div>…</div>
- *     </Presence>
- *   </Show>
+ *   <Presence exitBeforeEnter>
+ *     <Show when={open()}>
+ *       <Motion.div
+ *         initial={{ opacity: 0, scale: 0.96 }}
+ *         animate={{ opacity: 1, scale: 1 }}
+ *         exit={{ opacity: 0, scale: 0.96 }}
+ *       >
+ *         …
+ *       </Motion.div>
+ *     </Show>
+ *   </Presence>
  *
- * `Presence` keeps the child mounted until its exit finishes, so the `<Show>` above
- * can stay the only condition in the tree.
+ * `Presence` goes *outside* the condition: it has to outlive the `<Show>`'s child
+ * to keep that child mounted until its exit finishes. It takes only two booleans —
+ * `initial={false}` skips the enter animation on first render, `exitBeforeEnter`
+ * holds a replacement back until the outgoing element has left. The animation
+ * itself lives on the `Motion.*` element, which must be the direct child of the
+ * condition for its `exit` to run.
  */
 export type PresenceProps = ComponentProps<typeof MotionPresence> & {
   children?: JSX.Element

package/src/components/theme/theme-picker.tsx

@@ -159,7 +159,11 @@ export function ThemePicker(props: ThemePickerProps) {
             role="radio"
             aria-checked={local.selectedId === theme.id}
             aria-label={`${theme.familyLabel} ${theme.label}`}
-            class="h-auto flex-col gap-1.5 p-0 hover:bg-transparent"
+            // `justify-start`: the options in a wrapped row stretch to its tallest
+            // member, and an option whose label has a second line (the family)
+            // is that member. Centred, every shorter option's preview dropped below
+            // its neighbours'; pinned to the top, the previews share one line.
+            class="h-auto flex-col justify-start gap-1.5 p-0 hover:bg-transparent"
             onClick={() => local.onThemeSelect(theme)}
           >
             <ThemePreview theme={theme} selected={local.selectedId === theme.id} />

package/src/components/theme/theme-provider.tsx

@@ -121,11 +121,23 @@ export function useTheme(): ThemeContextValue {
   return value
 }
 
+/**
+ * The preference store, or nothing.
+ *
+ * Only ever called inside a `try`: where storage is blocked — a sandboxed iframe, a
+ * privacy mode, a denied site-data permission — merely *reading* the `localStorage`
+ * global throws ("Access is denied", `SecurityError`), so even the `typeof` guard
+ * has to sit inside the `try` rather than in front of it. Without a store the
+ * preference lives only in the provider's signal for the session.
+ */
+function preferenceStore(): Storage | undefined {
+  return typeof localStorage === 'undefined' ? undefined : localStorage
+}
+
 /** The stored preference, validated against the catalogue. */
 function readSelection(storageKey: string): ThemeSelection {
-  if (typeof localStorage === 'undefined') return defaultThemeSelection
   try {
-    const raw = localStorage.getItem(storageKey)
+    const raw = preferenceStore()?.getItem(storageKey)
     if (!raw) return defaultThemeSelection
     const parsed = JSON.parse(raw) as Partial<ThemeSelection>
     return {
@@ -268,13 +280,11 @@ export function ThemeProvider(props: ThemeProviderProps) {
     setSelection(patch) {
       const next = { ...selection(), ...patch }
       setSelectionState(next)
-      if (typeof localStorage !== 'undefined') {
-        try {
-          localStorage.setItem(storageKey(), JSON.stringify(next))
-        } catch {
-          // A full or unavailable store must not break the switch: the preference
-          // simply does not survive the reload.
-        }
+      try {
+        preferenceStore()?.setItem(storageKey(), JSON.stringify(next))
+      } catch {
+        // A full, blocked or unavailable store must not break the switch: the
+        // preference simply does not survive the reload.
       }
     },
   }

package/src/components/ui/aspect-ratio/aspect-ratio.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 
@@ -22,13 +22,24 @@ export type AspectRatioProps = ComponentProps<'div'> & {
   ratio?: number
 }
 
+/**
+ * The caller's style with the ratio laid over it. A spread `style` replaces the
+ * element's rather than merging, so passing any style used to drop the ratio and
+ * collapse the box to zero height. `ratio` is the API for the ratio, so it wins.
+ */
+function withRatio(style: AspectRatioProps['style'], ratio: number): JSX.CSSProperties | string {
+  const value = String(ratio)
+  if (typeof style === 'string') return `${style};aspect-ratio:${value}`
+  return { ...style, 'aspect-ratio': value }
+}
+
 export function AspectRatio(props: AspectRatioProps) {
-  const [local, rest] = splitProps(props, ['class', 'ratio', 'children'])
+  const [local, rest] = splitProps(props, ['class', 'ratio', 'style', 'children'])
 
   return (
     <div
       data-slot="aspect-ratio"
-      style={{ 'aspect-ratio': String(local.ratio ?? 16 / 9) }}
+      style={withRatio(local.style, local.ratio ?? 16 / 9)}
       class={cn('relative w-full [&>*]:absolute [&>*]:inset-0 [&>*]:size-full', local.class)}
       {...rest}
     >

package/src/components/ui/calendar/calendar.tsx

@@ -171,7 +171,12 @@ function CalendarGrid(props: {
                               // Styled from data states, so a day can be a range
                               // end and today at once without a prop per pair.
                               'data-selected:bg-primary data-selected:text-primary-foreground',
-                              'data-in-range:bg-primary-subtle',
+                              // corvu marks every day of a range selected, so the
+                              // span between the ends steps back to the subtle
+                              // fill and the ends take the solid one again.
+                              'data-in-range:bg-primary-subtle data-in-range:text-foreground',
+                              'data-range-start:bg-primary data-range-start:text-primary-foreground',
+                              'data-range-end:bg-primary data-range-end:text-primary-foreground',
                               'data-range-start:rounded-r-none data-range-end:rounded-l-none',
                               'data-today:ring-1 data-today:ring-ring',
                               'data-disabled:text-muted-foreground data-disabled:line-through',

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

@@ -6,8 +6,8 @@ import { cn } from '#lib/utils'
  * Card.
  *
  * A surface that sits on the canvas. Every card carries its own edge — a
- * border — because in the light theme `--card` and `--background` are both
- * white, and a borderless card there is invisible. Making the border
+ * border — because in the light theme `--card` is one faint step off a white
+ * `--background`, and a borderless card there all but disappears. Making the border
  * structural rather than optional is what stops one app's cards from reading
  * as floating panels and another's as nothing at all.
  *