@proteos/ui 0.61.0 → 0.75.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proteos/ui",
-  "version": "0.61.0",
+  "version": "0.75.0",
   "license": "FSL-1.1-Apache-2.0",
   "description": "Proteos React component library (React Aria Components + Tailwind v4).",
   "repository": {
@@ -56,7 +56,7 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.2.4",
     "thinking-orbs": "^0.3.1",
-    "@proteos/sdk": "0.61.0"
+    "@proteos/sdk": "0.75.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.13",

package/src/components/availability-calendar/availability-calendar.stories.tsx

@@ -0,0 +1,78 @@
+import { type CalendarDate, getLocalTimeZone, today } from '@internationalized/date'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { AvailabilityCalendar } from './availability-calendar'
+
+const meta: Meta<typeof AvailabilityCalendar> = {
+  title: 'Components/AvailabilityCalendar',
+  component: AvailabilityCalendar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-[480px] p-6 bg-surface border border-rule rounded-md">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof AvailabilityCalendar>
+
+const now = today(getLocalTimeZone())
+
+/** Weekdays from today on, for the next six weeks. */
+function isWeekdayAhead(date: CalendarDate): boolean {
+  const offset = date.compare(now)
+  if (offset < 0 || offset > 42) return false
+  const weekday = date.toDate(getLocalTimeZone()).getDay()
+  return weekday !== 0 && weekday !== 6
+}
+
+export const WeekdaysAvailable: Story = {
+  render: () => {
+    const [value, setValue] = useState<CalendarDate | null>(null)
+    return (
+      <AvailabilityCalendar
+        aria-label="Pick a day"
+        value={value}
+        onChange={setValue}
+        minValue={now}
+        isDateUnavailable={(date) => !isWeekdayAhead(date)}
+      />
+    )
+  },
+}
+
+export const Selected: Story = {
+  render: () => {
+    const [value, setValue] = useState<CalendarDate | null>(now.add({ days: 3 }))
+    return (
+      <AvailabilityCalendar
+        aria-label="Pick a day"
+        value={value}
+        onChange={setValue}
+        minValue={now}
+        isDateUnavailable={(date) => !isWeekdayAhead(date)}
+      />
+    )
+  },
+}
+
+export const Loading: Story = {
+  render: () => (
+    <AvailabilityCalendar aria-label="Pick a day" value={null} onChange={() => {}} isLoading />
+  ),
+}
+
+export const NothingAvailable: Story = {
+  render: () => (
+    <AvailabilityCalendar
+      aria-label="Pick a day"
+      value={null}
+      onChange={() => {}}
+      isDateUnavailable={() => true}
+    />
+  ),
+}

package/src/components/availability-calendar/availability-calendar.test.tsx

@@ -0,0 +1,89 @@
+import { CalendarDate } from '@internationalized/date'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { AvailabilityCalendar } from './availability-calendar'
+
+const OCTOBER_FIRST = new CalendarDate(2026, 10, 1)
+const AVAILABLE = new Set(['2026-10-20', '2026-10-21', '2026-10-23'])
+
+function Harness({
+  initial = null,
+  onChange,
+  isLoading = false,
+}: {
+  initial?: CalendarDate | null
+  onChange?: (date: CalendarDate) => void
+  isLoading?: boolean
+}) {
+  const [value, setValue] = useState<CalendarDate | null>(initial)
+  return (
+    <AvailabilityCalendar
+      aria-label="Pick a day"
+      value={value}
+      onChange={(next) => {
+        setValue(next)
+        onChange?.(next)
+      }}
+      defaultFocusedValue={OCTOBER_FIRST}
+      minValue={new CalendarDate(2026, 10, 15)}
+      isDateUnavailable={(date) => !AVAILABLE.has(date.toString())}
+      isLoading={isLoading}
+    />
+  )
+}
+
+describe('AvailabilityCalendar', () => {
+  it('renders a labelled grid for the focused month', () => {
+    render(<Harness />)
+    expect(screen.getByRole('grid', { name: /Pick a day/ })).toBeInTheDocument()
+    expect(screen.getByText('October')).toBeInTheDocument()
+    expect(screen.getByText('2026')).toBeInTheDocument()
+  })
+
+  it('marks days without availability as unavailable but keeps them in the grid', () => {
+    render(<Harness />)
+    const available = screen.getByRole('button', { name: /October 20/ })
+    const unavailable = screen.getByRole('button', { name: /October 22/ })
+    expect(available).not.toHaveAttribute('aria-disabled', 'true')
+    expect(unavailable).toHaveAttribute('aria-disabled', 'true')
+  })
+
+  it('selects an available day on click and reports it', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+    await user.click(screen.getByRole('button', { name: /October 23/ }))
+    expect(onChange).toHaveBeenLastCalledWith(new CalendarDate(2026, 10, 23))
+    expect(screen.getByRole('gridcell', { selected: true })).toHaveTextContent('23')
+  })
+
+  it('ignores clicks on unavailable days', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+    await user.click(screen.getByRole('button', { name: /October 22/ }))
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('refuses selection while loading and flags the grid busy', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} isLoading />)
+    expect(screen.getByRole('grid', { name: /Pick a day/ }).closest('[aria-busy]')).toHaveAttribute(
+      'aria-busy',
+      'true',
+    )
+    await user.click(screen.getByRole('button', { name: /October 20/ }))
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('moves to the next month with the nav button', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.click(screen.getByRole('button', { name: 'Next month' }))
+    expect(screen.getByText('November')).toBeInTheDocument()
+  })
+})

package/src/components/availability-calendar/availability-calendar.tsx

@@ -0,0 +1,182 @@
+import type { CalendarDate, DateValue } from '@internationalized/date'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useContext } from 'react'
+import {
+  Button as AriaButton,
+  Calendar as AriaCalendar,
+  type CalendarProps as AriaCalendarProps,
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarStateContext,
+  Heading,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Skeleton } from '../skeleton/skeleton'
+
+/* =========================================================================
+   AvailabilityCalendar — a page-level month grid that marks which days have
+   something to offer (free times, open seats, stock). Distinct from the
+   popover calendar inside DatePicker: square cells, the available days
+   carry a tint, the selected day is the one ink fill, unavailable days are
+   quiet text, today is a dot. Wraps RAC Calendar so the grid is a real
+   `grid` with roving focus, arrow / PageUp / Home keys and announced cells.
+
+   "Available" is the consumer's call through `isDateUnavailable` — the
+   component only paints the answer. Loading paints every cell as a
+   skeleton and refuses selection until the consumer knows.
+   ========================================================================= */
+
+export const availabilityCalendarStyles = tv({
+  slots: {
+    root: 'flex flex-col',
+    header: 'flex items-center justify-between mb-3.5',
+    heading: 'font-sans text-[15px] text-ink tracking-[-0.01em]',
+    headingYear: 'ml-1 text-ink-3',
+    nav: 'flex gap-1',
+    navButton: [
+      'size-7 rounded-md inline-flex items-center justify-center cursor-pointer outline-none',
+      'text-ink-3 hovered:text-ink hovered:bg-surface-3 pressed:bg-surface-4',
+      'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      'data-[disabled]:opacity-40 data-[disabled]:cursor-default data-[disabled]:hover:bg-transparent',
+    ],
+    grid: 'w-full border-separate border-spacing-1 table-fixed -m-1',
+    weekday:
+      'font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-ink-3 pb-2 text-center',
+    cell: [
+      'relative aspect-square flex items-center justify-center cursor-pointer outline-none',
+      'font-sans text-[14px] font-medium rounded-sm border border-transparent',
+      'transition-[background-color,color,border-color] duration-150',
+      // Available (the default when neither unavailable nor disabled).
+      'bg-surface-2 text-ink',
+      'data-[hovered]:bg-surface-3 data-[hovered]:border-rule-strong',
+      'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      // Selected: the one ink fill on the page.
+      'data-[selected]:bg-ink data-[selected]:text-surface data-[selected]:border-ink',
+      'data-[selected]:data-[hovered]:bg-ink data-[selected]:data-[hovered]:border-ink',
+      // Unavailable / past: quiet text, no fill, no hover.
+      'data-[unavailable]:bg-transparent data-[unavailable]:text-ink-4 data-[unavailable]:font-normal data-[unavailable]:cursor-default',
+      'data-[unavailable]:data-[hovered]:bg-transparent data-[unavailable]:data-[hovered]:border-transparent',
+      'data-[disabled]:bg-transparent data-[disabled]:text-ink-4 data-[disabled]:font-normal data-[disabled]:cursor-default',
+      'data-[disabled]:data-[hovered]:bg-transparent data-[disabled]:data-[hovered]:border-transparent',
+      // Days of the neighbouring months are blank in a month-aligned grid.
+      'data-[outside-month]:invisible',
+    ],
+    dot: 'absolute bottom-1.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-current',
+    cellSkeleton: 'absolute inset-0 rounded-sm',
+  },
+  variants: {
+    isLoading: {
+      true: { cell: 'bg-transparent cursor-default' },
+      false: {},
+    },
+  },
+  defaultVariants: { isLoading: false },
+})
+
+export type AvailabilityCalendarVariants = VariantProps<typeof availabilityCalendarStyles>
+
+export type AvailabilityCalendarProps = Omit<
+  AriaCalendarProps<CalendarDate>,
+  'children' | 'value' | 'onChange' | 'className' | 'style' | 'visibleDuration'
+> & {
+  /** The selected day; `null` = none. */
+  value: CalendarDate | null
+  onChange: (date: CalendarDate) => void
+  /** Paint every cell as a skeleton and refuse selection. */
+  isLoading?: boolean
+  /** Accessible name of the grid, e.g. "Pick a day". */
+  'aria-label': string
+  /** Weekday header style; `short` = "Sun". */
+  weekdayStyle?: 'narrow' | 'short' | 'long'
+  className?: string
+}
+
+export function AvailabilityCalendar({
+  value,
+  onChange,
+  isLoading = false,
+  className,
+  isDateUnavailable,
+  weekdayStyle = 'short',
+  ...props
+}: AvailabilityCalendarProps) {
+  const styles = availabilityCalendarStyles({ isLoading })
+  const unavailable = isLoading ? () => true : isDateUnavailable
+  return (
+    <AriaCalendar
+      {...props}
+      value={value}
+      onChange={(next) => onChange(next)}
+      {...(unavailable ? { isDateUnavailable: unavailable } : {})}
+      visibleDuration={{ months: 1 }}
+      className={cn(styles.root(), className)}
+    >
+      <header className={styles.header()}>
+        <Heading className={styles.heading()}>
+          <MonthHeading yearClassName={styles.headingYear()} />
+        </Heading>
+        <div className={styles.nav()}>
+          <AriaButton slot="previous" aria-label="Previous month" className={styles.navButton()}>
+            <ChevronLeft className="size-4" aria-hidden="true" />
+          </AriaButton>
+          <AriaButton slot="next" aria-label="Next month" className={styles.navButton()}>
+            <ChevronRight className="size-4" aria-hidden="true" />
+          </AriaButton>
+        </div>
+      </header>
+      {/* RAC filters aria-busy off the grid; the wrapper carries it. */}
+      <div aria-busy={isLoading}>
+        <CalendarGrid weekdayStyle={weekdayStyle} className={styles.grid()}>
+          <CalendarGridHeader>
+            {(day) => <CalendarHeaderCell className={styles.weekday()}>{day}</CalendarHeaderCell>}
+          </CalendarGridHeader>
+          <CalendarGridBody>
+            {(date) => (
+              <CalendarCell date={date} className={styles.cell()}>
+                {({ formattedDate, isToday, isOutsideMonth }) =>
+                  isLoading && !isOutsideMonth ? (
+                    <Skeleton className={styles.cellSkeleton()} />
+                  ) : (
+                    <>
+                      {formattedDate}
+                      {isToday && <span className={styles.dot()} aria-hidden="true" />}
+                    </>
+                  )
+                }
+              </CalendarCell>
+            )}
+          </CalendarGridBody>
+        </CalendarGrid>
+      </div>
+    </AriaCalendar>
+  )
+}
+
+/** "October 2026" as "October" + a muted year, read off the calendar state so
+ *  it follows the visible month. RAC's Heading context supplies the plain
+ *  title; our children override it, the accessible name stays on the grid. */
+function MonthHeading({ yearClassName }: { yearClassName: string }) {
+  const state = useContext(CalendarStateContext)
+  if (!state) return null
+  const start: DateValue = state.visibleRange.start
+  const date = start.toDate(state.timeZone)
+  const month = new Intl.DateTimeFormat(undefined, {
+    month: 'long',
+    timeZone: state.timeZone,
+  }).format(date)
+  const year = new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    timeZone: state.timeZone,
+  }).format(date)
+  return (
+    <>
+      <span className="font-medium">{month}</span>
+      <span className={yearClassName}>{year}</span>
+    </>
+  )
+}

package/src/components/availability-calendar/index.ts

@@ -0,0 +1,5 @@
+export type {
+  AvailabilityCalendarProps,
+  AvailabilityCalendarVariants,
+} from './availability-calendar'
+export { AvailabilityCalendar, availabilityCalendarStyles } from './availability-calendar'

package/src/components/conversation-brief-card/conversation-brief-preview.tsx

@@ -1,5 +1,5 @@
 import type { Contact, ConversationBrief } from '@proteos/sdk'
-import { Pencil, Phone } from 'lucide-react'
+import { Pencil, Phone, X } from 'lucide-react'
 import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { Button as AriaButton } from 'react-aria-components'
 
@@ -58,6 +58,16 @@ export interface ConversationBriefPreviewProps {
   onEdit?: () => void
   /** Replaces the guidance box wholesale — the host's editing surface. */
   editor?: ReactNode
+  /** A right-hand column next to the dial rows (the records the call
+   *  relates to). Owns its own scrolling. Absent ⇒ single column. */
+  aside?: ReactNode
+  /** Hides the people · channel · status line under the subject — for a
+   *  host whose surrounding chrome already says all of that (the call
+   *  window, where the dial row names the person). */
+  isMetaHidden?: boolean
+  /** Hides the subject line too — for a host whose window title IS the
+   *  subject (the call window). Implies `isMetaHidden`. */
+  isSubjectHidden?: boolean
 }
 
 export function ConversationBriefPreview({
@@ -75,8 +85,15 @@ export function ConversationBriefPreview({
   renderContent,
   onEdit,
   editor,
+  aside,
+  isMetaHidden = false,
+  isSubjectHidden = false,
 }: ConversationBriefPreviewProps) {
   const [pickedContactId, setPickedContactId] = useState('')
+  // The dial row rests as "Calling <value>"; a pencil (only when
+  // there is a choice — several people or several numbers) swaps it for
+  // the selects, which fold back once picked. Mirrors the caller-id row.
+  const [isPickingTarget, setIsPickingTarget] = useState(false)
   const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null
   const numbers = useMemo(() => contactPhoneNumbers(contact), [contact])
   const [pickedNumber, setPickedNumber] = useState('')
@@ -97,31 +114,38 @@ export function ConversationBriefPreview({
 
   return (
     <div className={cn('flex flex-col gap-3', className)}>
-      <div className="min-w-0">
-        <p className="truncate text-[14px] font-semibold text-ink">
-          {brief.subject || names || 'Prepared conversation'}
-        </p>
-        <p className="font-mono text-[10.5px] text-ink-4">
-          {[
-            brief.subject ? names : '',
-            brief.channel ? `Channel ${brief.channel}` : 'Any channel',
-            brief.type_key ? `Type ${brief.type_key}` : '',
-            brief.status === 'prepared'
-              ? 'Prepared'
-              : brief.status === 'used'
-                ? 'Call held'
-                : 'Discarded',
-          ]
-            .filter(Boolean)
-            .join(' · ')}
-        </p>
-      </div>
+      {isSubjectHidden ? null : (
+        <div className="min-w-0">
+          <p className="truncate text-[14px] font-semibold text-ink">
+            {brief.subject || names || 'Prepared conversation'}
+          </p>
+          {isMetaHidden ? null : (
+            <p className="font-mono text-[10.5px] text-ink-4">
+              {[
+                brief.subject ? names : '',
+                brief.channel ? `Channel ${brief.channel}` : 'Any channel',
+                brief.type_key ? `Type ${brief.type_key}` : '',
+                brief.status === 'prepared'
+                  ? 'Prepared'
+                  : brief.status === 'used'
+                    ? 'Call held'
+                    : 'Discarded',
+              ]
+                .filter(Boolean)
+                .join(' · ')}
+            </p>
+          )}
+        </div>
+      )}
       {editor ?? (
-        <div className="group/brief-content relative">
+        // A flex column of its own so a host that gives the box `flex-1`
+        // (the call window) gets a scrolling box that fills the remaining
+        // height; in an unconstrained host (a modal) it just wraps.
+        <div className="group/brief-content relative flex min-h-0 flex-1 flex-col">
           <div
             className={cn(
               'rounded-md border border-rule-2 bg-surface-2/60 px-3 py-2.5',
-              'text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]',
+              'min-h-0 text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]',
               renderContent ? null : 'whitespace-pre-wrap',
               contentClassName,
             )}
@@ -147,31 +171,136 @@ export function ConversationBriefPreview({
       )}
       {onCall ? (
         <div className="flex flex-col gap-2 border-t border-rule-2 pt-3">
-          {contacts.length > 1 ? (
-            <Select
-              aria-label="Who to call"
-              selectedKey={contact?.id ?? ''}
-              onSelectionChange={(key) => {
-                setPickedContactId(String(key))
-                setPickedNumber('')
-              }}
-              options={contacts.map((entry) => ({ id: entry.id, label: entry.name || entry.id }))}
-            />
-          ) : null}
-          {numbers.length > 1 ? (
-            <Select
-              aria-label="Number to call"
-              selectedKey={phoneNumber}
-              onSelectionChange={(key) => setPickedNumber(String(key))}
-              options={numbers.map((number) => ({ id: number, label: number }))}
-            />
-          ) : (
-            <p className="font-mono text-[12px] text-ink-3">
-              {phoneNumber ||
-                (contact ? 'This contact has no phone number on file.' : 'No contact to call.')}
-            </p>
-          )}
-          {controls}
+          <div
+            className={cn(
+              'grid gap-3',
+              aside ? 'grid-cols-[minmax(0,1fr)_minmax(0,1fr)]' : 'grid-cols-1',
+            )}
+          >
+            <div className="flex min-w-0 flex-col gap-2">
+              {isPickingTarget && (contacts.length > 1 || numbers.length > 1) ? (
+                <div className="flex min-w-0 flex-col gap-1">
+                  <p className="font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4">
+                    Calling
+                  </p>
+                  <div className="flex min-w-0 items-start gap-1.5">
+                    <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+                      {contacts.length > 1 ? (
+                        <Select
+                          aria-label="Who to call"
+                          size="sm"
+                          autoFocus
+                          selectedKey={contact?.id ?? ''}
+                          onSelectionChange={(key) => {
+                            setPickedContactId(String(key))
+                            setPickedNumber('')
+                            // Fold once the pick is complete: the chosen person has
+                            // at most one number, so there is nothing left to choose.
+                            const picked = contacts.find((entry) => entry.id === String(key))
+                            if (contactPhoneNumbers(picked).length <= 1) setIsPickingTarget(false)
+                          }}
+                          options={contacts.map((entry) => ({
+                            id: entry.id,
+                            label: entry.name || entry.id,
+                          }))}
+                        />
+                      ) : null}
+                      {numbers.length > 1 ? (
+                        <Select
+                          aria-label="Number to dial"
+                          size="sm"
+                          {...(contacts.length > 1 ? {} : { autoFocus: true })}
+                          selectedKey={phoneNumber}
+                          onSelectionChange={(key) => {
+                            if (key !== null) setPickedNumber(String(key))
+                            setIsPickingTarget(false)
+                          }}
+                          options={numbers.map((number) => ({ id: number, label: number }))}
+                        />
+                      ) : null}
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="Keep the current number"
+                      onPress={() => setIsPickingTarget(false)}
+                    >
+                      <X aria-hidden />
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="group/dial flex min-w-0 flex-col gap-1">
+                  <p className="font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4">
+                    Calling
+                  </p>
+                  <div className="flex min-h-9 min-w-0 items-center gap-2">
+                    {(() => {
+                      const hasChoice = contacts.length > 1 || numbers.length > 1
+                      const valueText = phoneNumber
+                        ? contacts.length > 1
+                          ? `${contact?.name || contact?.id} · ${phoneNumber}`
+                          : phoneNumber
+                        : contact
+                          ? `${contacts.length > 1 ? `${contact.name || contact.id} · ` : ''}no phone number on file`
+                          : 'No contact to call.'
+                      const valueClassName = cn(
+                        'min-w-0 truncate text-[12px] tabular-nums',
+                        phoneNumber ? 'text-ink-2' : 'text-warning',
+                      )
+                      // Same weight as a related-record row: a small muted
+                      // glyph in front, 12px text, mid-row.
+                      const icon = (
+                        <Phone
+                          className={cn(
+                            'size-3 shrink-0',
+                            phoneNumber ? 'text-ink-4' : 'text-warning',
+                          )}
+                          aria-hidden
+                        />
+                      )
+                      // With something to choose, the value itself opens the pick
+                      // (the pencil is the hint, not the only handle).
+                      return hasChoice ? (
+                        <AriaButton
+                          className={cn(
+                            'flex min-w-0 cursor-pointer items-center gap-2 rounded-sm text-left outline-none',
+                            'hover:text-ink focus-visible:shadow-[var(--shadow-focus)]',
+                          )}
+                          onPress={() => setIsPickingTarget(true)}
+                        >
+                          {icon}
+                          <span className={valueClassName} title={phoneNumber}>
+                            {valueText}
+                          </span>
+                        </AriaButton>
+                      ) : (
+                        <>
+                          {icon}
+                          <span className={valueClassName} title={phoneNumber}>
+                            {valueText}
+                          </span>
+                        </>
+                      )
+                    })()}
+                    {contacts.length > 1 || numbers.length > 1 ? (
+                      <Button
+                        variant="ghost"
+                        size="icon-sm"
+                        aria-label="Change the number to dial"
+                        className="opacity-0 transition-opacity group-hover/dial:opacity-100 focus-visible:opacity-100"
+                        onPress={() => setIsPickingTarget(true)}
+                      >
+                        <Pencil aria-hidden />
+                      </Button>
+                    ) : null}
+                  </div>
+                </div>
+              )}
+              {controls}
+            </div>
+            {aside ? <div className="min-h-0 min-w-0">{aside}</div> : null}
+          </div>
           {callDisabledReason ? (
             <p className="text-[12px] text-warning">{callDisabledReason}</p>
           ) : null}