@adea-ai/ui 0.60.3 → 0.61.0

package/src/components/layout/status-bar/status-bar.tsx

@@ -0,0 +1,73 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * StatusBar.
+ *
+ * The thin strip pinned to the bottom of the window. Its purpose is to hold
+ * *ambient* facts the user checks without acting: connection state, branch,
+ * counts, the current mode. Anything interactive belongs in the top bar or a
+ * pane — a status bar is read, not operated, and a control here is one the user
+ * will not find.
+ *
+ * Height comes from `--statusbar-height`, so a pane's bottom padding can
+ * reserve it without a magic number.
+ */
+export function StatusBar(props: ComponentProps<'footer'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <footer
+      data-slot="status-bar"
+      class={cn(
+        'text-muted-foreground flex h-statusbar shrink-0 items-center gap-3 border-t border-border px-3 text-2xs',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/** A single readout. `tone` carries meaning; it is not decoration. */
+export function StatusBarItem(
+  props: ComponentProps<'span'> & {
+    tone?: 'default' | 'success' | 'warning' | 'destructive'
+    /** Draw a leading state dot, e.g. for a connection. */
+    dot?: boolean
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'tone', 'dot', 'children'])
+
+  return (
+    <span
+      data-slot="status-bar-item"
+      class={cn(
+        'inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap [&_svg]:size-3 [&_svg]:shrink-0',
+        {
+          'text-muted-foreground': local.tone === undefined || local.tone === 'default',
+          'text-success': local.tone === 'success',
+          'text-warning': local.tone === 'warning',
+          'text-destructive': local.tone === 'destructive',
+        },
+        local.class
+      )}
+      {...rest}
+    >
+      {local.dot ? (
+        <span
+          aria-hidden="true"
+          class={cn('size-1.5 shrink-0 rounded-full bg-current', {
+            'animate-pulse': local.tone === 'warning',
+          })}
+        />
+      ) : null}
+      {local.children}
+    </span>
+  )
+}
+
+/** Pushes everything after it to the trailing edge. */
+export function StatusBarSpacer() {
+  return <span aria-hidden="true" class="flex-1" />
+}

package/src/components/layout/top-bar/index.ts

@@ -0,0 +1,10 @@
+export {
+  TopBar,
+  TopBarBreadcrumb,
+  TopBarPill,
+  TopBarSearch,
+  TopBarSection,
+  TopBarTitle,
+  type TopBarProps,
+  type TopBarSearchProps,
+} from './top-bar'

package/src/components/layout/top-bar/top-bar.tsx

@@ -0,0 +1,166 @@
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * TopBar.
+ *
+ * The window's title row and primary toolbar. Three tracks: a leading group, a
+ * centred search, and a trailing group. The search is a fixed function of the
+ * window width and the two side groups are equal remainders, which is what
+ * makes the search *exactly* window-centred by construction — no measurement,
+ * no observer, no absolutely-positioned overlay to keep clear of.
+ *
+ * On a frameless desktop window this row is also the drag region, so it carries
+ * `window-drag` and the controls inside it opt back out. `macos-inset` and
+ * `windows-inset` reserve the space the native window controls occupy, which is
+ * why the row can look off-centre in a frameless window and be correct: it is
+ * centred in the space the user can actually see.
+ */
+export type TopBarProps = ComponentProps<'header'> & {
+  /** Make the row draggable, for a frameless window. */
+  draggable?: boolean
+  /** Reserve space for the macOS traffic lights. */
+  macosInset?: boolean
+  /** Reserve space for the Windows caption buttons. */
+  windowsInset?: boolean
+  /** Blur the content scrolling under the bar. */
+  glass?: boolean
+}
+
+export function TopBar(props: TopBarProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'draggable',
+    'macosInset',
+    'windowsInset',
+    'glass',
+  ])
+
+  return (
+    <header
+      data-slot="top-bar"
+      class={cn(
+        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)] items-center gap-3 border-b border-border px-3',
+        local.glass && 'glass-panel',
+        local.draggable && 'window-drag',
+        local.macosInset && 'window-inset-macos',
+        local.windowsInset && 'window-inset-windows',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/** A side group. Both sides are equal remainders, which centres the search. */
+export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' | 'end' }) {
+  const [local, rest] = splitProps(props, ['class', 'align'])
+
+  return (
+    <div
+      data-slot="top-bar-section"
+      class={cn(
+        'flex min-w-0 items-center gap-2 overflow-hidden',
+        local.align === 'end' && 'justify-end',
+        local.align !== 'end' && 'justify-start',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function TopBarTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="top-bar-title"
+      class={cn('truncate text-sm font-medium', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** A breadcrumb or path readout that yields to the actions when space runs out. */
+export function TopBarBreadcrumb(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="top-bar-breadcrumb"
+      class={cn('flex min-w-0 items-center gap-1.5 text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export type TopBarSearchProps = ComponentProps<'button'> & {
+  /** The hint shown inside the field, e.g. "Search projects and files". */
+  placeholder?: string
+  /** The shortcut chip drawn at the trailing edge, e.g. "⌘K". */
+  shortcut?: string
+}
+
+/**
+ * The search affordance in the middle track.
+ *
+ * It is a button, not an input, and that is deliberate: clicking it opens the
+ * command palette, which already owns the input, the ranking and the keyboard
+ * handling. A second live input here would be a second source of truth for the
+ * same query. It is styled to read as a field because that is what it behaves
+ * like from the user's side.
+ */
+export function TopBarSearch(props: TopBarSearchProps) {
+  const [local, rest] = splitProps(props, ['class', 'placeholder', 'shortcut'])
+
+  return (
+    <button
+      type="button"
+      data-slot="top-bar-search"
+      class={cn(
+        'text-muted-foreground flex h-control-md w-full items-center gap-2 rounded-md border border-input px-3 text-sm',
+        'transition-colors ease-out outline-none',
+        'hover:bg-surface-hover hover:text-foreground',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'window-no-drag',
+        local.class
+      )}
+      {...rest}
+    >
+      <span class="truncate">{local.placeholder ?? 'Search'}</span>
+      <Show when={local.shortcut}>
+        <kbd class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex">
+          {local.shortcut}
+        </kbd>
+      </Show>
+    </button>
+  )
+}
+
+/**
+ * A labelled top-bar control — the readouts KiroCrew puts in the trailing
+ * group. Container queries on the group decide which of these survive a narrow
+ * window; a caller marks the cheap-to-drop ones and the group handles the rest.
+ */
+export function TopBarPill(props: ComponentProps<'button'> & { label: string }) {
+  const [local, rest] = splitProps(props, ['class', 'label', 'children'])
+
+  return (
+    <button
+      type="button"
+      data-slot="top-bar-pill"
+      class={cn(
+        'text-muted-foreground inline-flex h-control-sm shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 text-xs font-medium',
+        'transition-colors ease-out outline-none',
+        'hover:border-input hover:text-foreground',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'window-no-drag [&_svg]:size-3.5 [&_svg]:shrink-0',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <span>{local.label}</span>
+    </button>
+  )
+}

package/src/components/motion/index.ts

@@ -0,0 +1,2 @@
+export { Presence, type PresenceProps } from './presence'
+export { Motion } from 'solid-motionone'

package/src/components/motion/presence.tsx

@@ -0,0 +1,32 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { Presence as MotionPresence } from 'solid-motionone'
+
+/**
+ * Presence.
+ *
+ * Enter and exit animation with a guarantee the CSS approach cannot make: an exit
+ * that is **interrupted** — a menu reopened while it is still closing — returns the
+ * element to its shown state instead of finishing the close and then reopening,
+ * which is what a class-based `animate-out` does and what makes a fast user's
+ * interactions feel like the interface is lagging behind them.
+ *
+ * The design system uses CSS transitions for state changes (a hover, a press) and
+ * 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` keeps the child mounted until its exit finishes, so the `<Show>` above
+ * can stay the only condition in the tree.
+ */
+export type PresenceProps = ComponentProps<typeof MotionPresence> & {
+  children?: JSX.Element
+}
+
+export function Presence(props: PresenceProps) {
+  return <MotionPresence {...props} />
+}

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

@@ -0,0 +1,179 @@
+import type { ComponentProps } from 'solid-js'
+import { For, Show, splitProps } from 'solid-js'
+import { accentPresets, fontOptions } from '#lib/tokens'
+import { themesForAppearance } from '#lib/themes'
+import { cn } from '#lib/utils'
+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'
+
+/**
+ * AppearancePanel.
+ *
+ * The appearance page, as a component rather than as a screen each application
+ * draws for itself. Two applications that both let a user choose a theme should
+ * offer the *same* choices in the *same* arrangement — otherwise "Adea" and
+ * "Cortana" are two products that happen to share a component library, which is
+ * the opposite of what this system is for.
+ *
+ * Four axes, in the order a user thinks about them:
+ *
+ *   1. **Appearance** — light, dark, or follow the system.
+ *   2. **Themes** — one for each appearance. Both are shown at once, because the
+ *      choice is per-appearance and hiding the other half makes it feel like one
+ *      setting that keeps changing.
+ *   3. **Accent** — adea's presets, layered on whichever theme is active.
+ *   4. **Font** — the interface face.
+ *
+ * The panel reads and writes the provider's preference and keeps no state of its
+ * own, so it cannot disagree with what is applied.
+ */
+export type AppearancePanelProps = ComponentProps<'div'>
+
+const LIGHT_THEMES = themesForAppearance('light')
+const DARK_THEMES = themesForAppearance('dark')
+
+export function AppearancePanel(props: AppearancePanelProps) {
+  const [local, rest] = splitProps(props, ['class'])
+  const { selection, setSelection, resolvedAppearance } = useTheme()
+
+  return (
+    <div data-slot="appearance-panel" class={cn('flex flex-col gap-8', local.class)} {...rest}>
+      {/* --- 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>
+          <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.
+          </p>
+        </header>
+        <RadioGroup
+          value={selection().appearance}
+          onChange={(value) => setSelection({ appearance: value as 'light' | 'dark' | 'system' })}
+          aria-label="Appearance"
+        >
+          <RadioGroupItem value="light" label="Light" description="Always the light theme." />
+          <RadioGroupItem value="dark" label="Dark" description="Always the dark theme." />
+          <RadioGroupItem
+            value="system"
+            label="Match the system"
+            description={`Currently resolving to ${resolvedAppearance()}.`}
+          />
+        </RadioGroup>
+      </section>
+
+      {/* --- 2. Themes ------------------------------------------------------ */}
+      <Show when={resolvedAppearance() === 'light'}>
+        <ThemeSection
+          title="Light theme"
+          description="Shown when the appearance resolves to light."
+          themes={LIGHT_THEMES}
+          selectedId={selection().lightThemeId}
+          onThemeSelect={(theme) => setSelection({ lightThemeId: theme.id })}
+        />
+      </Show>
+      <Show when={resolvedAppearance() === 'dark'}>
+        <ThemeSection
+          title="Dark theme"
+          description="Shown when the appearance resolves to dark."
+          themes={DARK_THEMES}
+          selectedId={selection().darkThemeId}
+          onThemeSelect={(theme) => setSelection({ darkThemeId: theme.id })}
+        />
+      </Show>
+
+      {/* --- 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>
+          <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
+            none of them can make a label unreadable.
+          </p>
+        </header>
+        <div role="radiogroup" aria-label="Accent" class="flex flex-wrap gap-2">
+          <For each={accentPresets}>
+            {(preset) => (
+              <Button
+                as="button"
+                type="button"
+                variant="outline"
+                size="sm"
+                role="radio"
+                aria-checked={selection().accent === preset.id}
+                aria-label={preset.label}
+                class={cn({
+                  'border-ring ring-3 ring-primary-subtle': selection().accent === preset.id,
+                })}
+                onClick={() => setSelection({ accent: preset.id })}
+              >
+                <span
+                  aria-hidden="true"
+                  class="size-3 rounded-full border border-border"
+                  style={{
+                    'background-color':
+                      preset.id === 'theme'
+                        ? 'var(--primary)'
+                        : `var(--accent-${preset.id}, ${preset.dark})`,
+                  }}
+                />
+                {preset.label}
+              </Button>
+            )}
+          </For>
+        </div>
+      </section>
+
+      {/* --- 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>
+          <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.
+          </p>
+        </header>
+        <RadioGroup
+          value={selection().font}
+          onChange={(value) => setSelection({ font: value as string })}
+          aria-label="Typeface"
+        >
+          <For each={fontOptions}>
+            {(option) => (
+              <RadioGroupItem
+                value={option.id}
+                label={option.label}
+                description={option.description}
+              />
+            )}
+          </For>
+        </RadioGroup>
+      </section>
+    </div>
+  )
+}
+
+function ThemeSection(props: {
+  title: string
+  description: string
+  themes: ReturnType<typeof themesForAppearance>
+  selectedId: string
+  onThemeSelect: (theme: ReturnType<typeof themesForAppearance>[number]) => void
+}) {
+  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>
+        <p class="max-w-prose text-sm text-muted-foreground">{props.description}</p>
+      </header>
+      <ThemePicker
+        themes={props.themes}
+        selectedId={props.selectedId}
+        onThemeSelect={props.onThemeSelect}
+      />
+    </section>
+  )
+}

package/src/components/theme/index.ts

@@ -0,0 +1,22 @@
+export { AppearancePanel, type AppearancePanelProps } from './appearance-panel'
+export {
+  ThemePicker,
+  ThemePreview,
+  ThemeSwatch,
+  type ThemePickerProps,
+  type ThemePreviewProps,
+  type ThemeSwatchProps,
+} from './theme-picker'
+export {
+  ThemeProvider,
+  defaultThemeSelection,
+  inlineScriptLiteral,
+  resolvedDensity,
+  themeScript,
+  useTheme,
+  type ThemeContextValue,
+  type ThemeDensity,
+  type ThemeProviderProps,
+  type ThemeSelection,
+} from './theme-provider'
+export { ThemeToggle, type ThemeToggleProps } from './theme-toggle'

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

@@ -0,0 +1,174 @@
+import type { ComponentProps } from 'solid-js'
+import { For, Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import type { ThemeVariant } from '#lib/themes'
+import { Button } from '../ui/button/button'
+
+/**
+ * ThemeSwatch.
+ *
+ * The colours of a theme, as a small readable strip: the canvas, a card, the
+ * primary, an accent and the destructive fill. Enough to tell two dark themes
+ * apart at a glance and to recognise the one you want without applying it.
+ *
+ * A swatch is **read from the variant object**, not from a stylesheet, so a picker
+ * can show a theme that is not currently applied — which is the whole point of a
+ * picker. That is also why the catalogue is data rather than CSS.
+ */
+export type ThemeSwatchProps = ComponentProps<'span'> & {
+  theme: ThemeVariant
+  /** Draw the swatch at the given size. */
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const swatchSizes = {
+  sm: 'h-4 w-4',
+  md: 'h-6 w-6',
+  lg: 'h-8 w-8',
+} as const
+
+export function ThemeSwatch(props: ThemeSwatchProps) {
+  const [local, rest] = splitProps(props, ['class', 'theme', 'size'])
+  const colors = () => local.theme.colors
+
+  return (
+    <span
+      data-slot="theme-swatch"
+      aria-hidden="true"
+      class={cn(
+        'border-border inline-flex shrink-0 overflow-hidden rounded-md border',
+        local.class
+      )}
+      {...rest}
+    >
+      <For
+        each={[
+          colors().background,
+          colors().card,
+          colors().primary,
+          colors().accent,
+          colors().destructive,
+        ]}
+      >
+        {(color) => (
+          <span
+            class={cn('block', swatchSizes[local.size ?? 'md'])}
+            style={{ 'background-color': color }}
+          />
+        )}
+      </For>
+    </span>
+  )
+}
+
+/**
+ * ThemePreview.
+ *
+ * A miniature of the interface, painted in a theme's own colours: a rail, a panel,
+ * a heading, body text, a primary button and a destructive one.
+ *
+ * The point is that a colour strip cannot answer the question a user actually has —
+ * "would I want to look at this all day?" — and a real preview can. It is drawn
+ * with inline colours from the variant rather than by applying the theme, so a list
+ * of twenty previews costs one object read each instead of twenty theme swaps.
+ */
+export type ThemePreviewProps = ComponentProps<'div'> & {
+  theme: ThemeVariant
+  /** Highlight the preview as the current selection. */
+  selected?: boolean
+}
+
+export function ThemePreview(props: ThemePreviewProps) {
+  const [local, rest] = splitProps(props, ['class', 'theme', 'selected'])
+  const c = () => local.theme.colors
+
+  return (
+    <div
+      data-slot="theme-preview"
+      class={cn(
+        'w-44 overflow-hidden rounded-lg border shadow-xs',
+        local.selected ? 'border-primary ring-3 ring-primary-subtle' : 'border-border',
+        local.class
+      )}
+      style={{ 'background-color': c().background }}
+      {...rest}
+    >
+      <div class="flex h-24">
+        {/* A rail and a panel: the two surfaces a user spends the day looking at. */}
+        <div
+          class="theme-preview-edge flex w-6 flex-col items-center gap-1.5 border-e py-2"
+          style={{ 'background-color': c().sidebar, '--preview-edge': c().sidebarBorder }}
+        >
+          <span class="size-2.5 rounded-sm" style={{ 'background-color': c().primary }} />
+          <span class="size-2.5 rounded-sm" style={{ 'background-color': c().sidebarAccent }} />
+          <span class="size-2.5 rounded-sm" style={{ 'background-color': c().sidebarAccent }} />
+        </div>
+        <div class="flex flex-1 flex-col gap-1.5 p-2">
+          <div class="h-1.5 w-14 rounded-full" style={{ 'background-color': c().foreground }} />
+          <div class="h-1 w-20 rounded-full" style={{ 'background-color': c().mutedForeground }} />
+          <div class="h-1 w-16 rounded-full" style={{ 'background-color': c().mutedForeground }} />
+          <div class="mt-auto flex items-center gap-1">
+            <span class="h-3 w-9 rounded-sm" style={{ 'background-color': c().primary }} />
+            <span class="h-3 w-6 rounded-sm" style={{ 'background-color': c().destructive }} />
+            <span class="h-3 w-6 rounded-sm" style={{ 'background-color': c().secondary }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * ThemePicker.
+ *
+ * The catalogue as a selectable grid. One appearance at a time — a light picker
+ * lists light themes and a dark picker lists dark ones — because choosing a dark
+ * theme while looking at a light interface is a choice nobody can evaluate.
+ *
+ * `onSelect` rather than an internal signal: the selection belongs to the
+ * preference the provider owns, and a picker that kept its own copy could disagree
+ * with what is applied.
+ */
+export type ThemePickerProps = ComponentProps<'div'> & {
+  themes: readonly ThemeVariant[]
+  selectedId: string
+  onThemeSelect: (theme: ThemeVariant) => void
+}
+
+export function ThemePicker(props: ThemePickerProps) {
+  const [local, rest] = splitProps(props, ['class', 'themes', 'selectedId', 'onThemeSelect'])
+
+  return (
+    <div
+      data-slot="theme-picker"
+      role="radiogroup"
+      aria-label="Theme"
+      class={cn('flex flex-wrap gap-3', local.class)}
+      {...rest}
+    >
+      <For each={local.themes}>
+        {(theme) => (
+          <Button
+            as="button"
+            type="button"
+            variant="ghost"
+            size="sm"
+            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"
+            onClick={() => local.onThemeSelect(theme)}
+          >
+            <ThemePreview theme={theme} selected={local.selectedId === theme.id} />
+            <span class="flex flex-col items-center">
+              <span class="text-xs font-medium">{theme.label}</span>
+              <Show when={theme.family !== 'adea'}>
+                <span class="text-muted-foreground text-2xs">{theme.familyLabel}</span>
+              </Show>
+            </span>
+          </Button>
+        )}
+      </For>
+    </div>
+  )
+}