Tray

Questions

Should variance use the population or the sample formula?

Describe a change, @ to add files

import { useState } from "react";
import {
  Button, Icon, IconButton, Tray, TrayBody, TrayFooter, TrayHeader, TrayOption,
  TrayTitle,
} from "@arcadia/ui";

function Question() {
  const [picked, setPicked] = useState("a");
  const options = [
    { id: "a", label: "Population (divide by N)", description: "Recommended" },
    { id: "b", label: "Sample (divide by N−1)" },
  ];
  return (
    <Tray aria-label="Questions" role="group">
      <TrayHeader>
        <TrayTitle>Questions</TrayTitle>
        <IconButton icon="minus" label="Minimise" size="xs" tone="muted" />
      </TrayHeader>
      <TrayBody layout="text">
        <span {...sx("cmp-strong", cmp.strong)}>
          Should variance use the population or the sample formula?
        </span>
      </TrayBody>
      <TrayBody role="radiogroup" aria-label="Answer">
        {options.map((o, i) => (
          <TrayOption
            key={o.id}
            badge={String.fromCharCode(65 + i)}
            label={o.label}
            description={o.description}
            selected={picked === o.id}
            onClick={() => setPicked(o.id)}
          />
        ))}
        <TrayOption
          badge={<Icon name="pencil" />}
          label="Other"
          selected={picked === "c"}
          onClick={() => setPicked("c")}
        />
      </TrayBody>
      <TrayFooter start="1 of 2">
        <Button size="sm" shape="pill">Skip</Button>
        <Button size="sm" shape="pill" variant="primary" hint="⏎">Next</Button>
      </TrayFooter>
    </Tray>
  );
}

TSX

import { Tray, TrayBody, TrayHeader, TrayTitle } from "@arcadia/ui";

<Tray aria-label="Queued messages">
  <TrayHeader><TrayTitle>1 queued</TrayTitle></TrayHeader>
  <TrayBody layout="text">Also: lerp should not clamp t.</TrayBody>
</Tray>

Docked to the composer for questions, approvals, queued messages and the +, / and @ pickers. It sits on --bg-elevated with radius 20 and continuous corners (16 round), a soft shadow and the float edge drawn inside; it slides 4px from the composer and never zooms. Give it a name (aria-label, or aria-labelledby on its title) and a role that fits. TrayTitle takes the props of the <span> it renders.

Tray, Dialog or Confirm Dialog? A Tray asks during work and leaves the page usable. Use a Dialog for a task with its own controls, and a Confirm Dialog only to stop something that can't be undone.

A tray that asks something docks to a hailing composer: the horizon holds its light while the product waits on you, and the warm answer button reads as part of that light.

Examples

Multiple choice

kind="multiple" options are checkboxes; the footer's start slot holds a count or a pager.

Which checks should run?

Describe a change, @ to add files

import { useState } from "react";
import {
  Button, Tray, TrayBody, TrayFooter, TrayHeader, TrayOption, TrayTitle,
} from "@arcadia/ui";

function Checks() {
  const [on, setOn] = useState(new Set(["lint"]));
  const toggle = (k: string) => setOn((s) => {
    const n = new Set(s);
    if (n.has(k)) n.delete(k); else n.add(k);
    return n;
  });
  return (
    <Tray aria-label="Checks to run" motion="static">
      <TrayHeader><TrayTitle>Which checks should run?</TrayTitle></TrayHeader>
      <TrayBody role="group" aria-label="Checks">
        <TrayOption
          kind="multiple"
          label="Lint"
          selected={on.has("lint")}
          onClick={() => toggle("lint")}
        />
        <TrayOption
          kind="multiple"
          label="Typecheck"
          selected={on.has("types")}
          onClick={() => toggle("types")}
        />
        <TrayOption
          kind="multiple"
          label="Unit tests"
          description="Slow"
          selected={on.has("tests")}
          onClick={() => toggle("tests")}
        />
        <TrayOption kind="multiple" label="Deploy" description="Needs a clean tree" disabled />
      </TrayBody>
      <TrayFooter divided start={`${on.size} selected`}>
        <Button size="sm" shape="pill" variant="primary" hint="⌘⏎">
          Submit
        </Button>
      </TrayFooter>
    </Tray>
  );
}

A confirmation

A neutral question about the page itself, in a tray instead of a dialog, so the work behind it stays in view. It asks nothing of the agent's turn, so the horizon stays dark.

Discard 3 unsaved changes?

The edits to settings.css and two other files are lost.

Describe a change, @ to add files

import {
  Button, Tray, TrayBody, TrayFooter, TrayHeader, TrayTitle,
} from "@arcadia/ui";

<Tray aria-label="Unsaved changes" role="alertdialog" motion="static">
  <TrayHeader><TrayTitle>Discard 3 unsaved changes?</TrayTitle></TrayHeader>
  <TrayBody layout="text">
    <span {...sx("cmp-detail", cmp.detail)}>
      The edits to settings.css and two other files are lost.
    </span>
  </TrayBody>
  <TrayFooter>
    <Button size="sm" shape="pill">Keep editing</Button>
    <Button size="sm" shape="pill" variant="danger">Discard</Button>
  </TrayFooter>
</Tray>

Picker

The + menu: ListRows in a tray below the composer. Pickers are static, so they open instantly.

Describe a change, @ to add files

import { Icon, ListRow, Separator, Tray, TrayBody } from "@arcadia/ui";

<Tray placement="below" motion="static" aria-label="Commands and modes">
  <TrayBody>
    <ListRow
      leading="agent"
      label="Agent"
      description="Edit and run commands"
      emphasis
      highlighted
      meta={<Icon name="check" size="sm" />}
    />
    <ListRow
      leading="plan"
      label="Plan"
      description="Write a plan before changing anything"
      emphasis
    />
    <ListRow
      leading="ask"
      label="Ask"
      description="Answer questions without making edits"
      emphasis
    />
    <Separator inset />
    <ListRow leading="at" label="Mention a file" emphasis />
    <ListRow
      leading="compact"
      label="Compact context"
      description="Unavailable while running"
      emphasis
      disabled
    />
  </TrayBody>
</Tray>

Enter and exit

Pass open to let the tray keep itself mounted for its exit fade. Only event-driven trays animate.

A 150ms slide in, a 100ms fade out

Reduced motion keeps the fades and drops the 4px travel.

import { useState } from "react";
import { Button, Tray, TrayBody, TrayHeader, TrayTitle } from "@arcadia/ui";

function Replay() {
  const [open, setOpen] = useState(true);
  return (
    <div {...sx("cmp-stream", cmp.stream)}>
      <div>
        <Button size="sm" variant="outline" onClick={() => setOpen(!open)}>
          {open ? "Close" : "Open"} tray
        </Button>
      </div>
      <Tray open={open} aria-label="Queued">
        <TrayHeader><TrayTitle>A 150ms slide in, a 100ms fade out</TrayTitle></TrayHeader>
        <TrayBody layout="text">
          Reduced motion keeps the fades and drops the 4px travel.
        </TrayBody>
      </Tray>
    </div>
  );
}

rootStyle takes where the tray sits and the knobs below, each a token of its kind.

Takes	Default	Sets
`Paint`	`var(--bg-elevated)`	Surface fill.
`Ref<Radius>`	`var(--radius-frame-tray)`	Corner radius.
`Ref<Space>`	`var(--space-1-5)`	Inset around a body of rows (6px). Their corners follow this inset.
`Ref<Measure>`	`min(420px`	Tallest height (420, at most half the viewport); the body scrolls.
`Ref<Space> \| Derived`	`calc(var(--tray-pad) + ${space["--space-1"]`	Inline padding of the header, the footer's start and a text body: the rows' first ink (the pad plus a row's text side, 12), so a heading sits on the text it labels (R3).

--tray-pad sets the row inset. Both TrayOption and ListRow corners follow the tray radius minus that inset.

Usage

Examples

Multiple choice

A confirmation

Picker

Enter and exit

Customising

Accessibility

API reference

TrayHeaderNo own props

TrayBody2 props

TrayFooter2 props

TrayOption6 props