# UniboxIdlePanel

> The Unibox's empty conversation pane: a breathing glass orb with the three channels in slow orbit and a quiet "Listening for new replies" line.

## Facts

- **Product**: Max
- **Family**: Unibox
- **Global**: `window.DigitalCrew.UniboxIdlePanel`
- **Source**: `max-agent: src/features/unibox/ui/components/unibox-idle-panel.tsx`
- **Import in the app**: `import { UniboxIdlePanel } from "@/features/unibox/ui/components/unibox-idle-panel";`
- **Live preview**: /design/components/unibox-idle-panel/preview.html
- **Page**: /design/components/unibox-idle-panel

## Guidelines

**Use it for** the right-hand pane of the inbox when no conversation is selected. It steps aside the moment one opens.

**What you provide**: `className` only. Give it the pane's size; the panel centres itself and clips its glow (`overflow-hidden`).

**Anatomy**
- A `size-[34rem]` atmosphere in `bg-primary/10 blur-3xl` behind a `size-[19rem]` stage with two orbit guides (92px and 140px radius, `border-foreground/[0.06]`).
- Channel chips (`size-8`, `border-border/70 bg-background/80 shadow-sm backdrop-blur-sm`) ride the shared `orbit` keyframes: Mail in `amber-500` and WhatsApp in `emerald-500` on the inner ring (26s), LinkedIn in `sky-500` on the outer ring (40s, reversed).
- Centre: a `size-32 bg-primary/15 blur-2xl` halo under a `size-24` glass disc (`bg-background/70 shadow-xl shadow-primary/10 backdrop-blur-xl`) holding a `size-9 text-primary/80` messages icon.
- Copy: "Your unified inbox" in `text-xl font-semibold tracking-tight`, a `max-w-sm text-sm text-muted-foreground` line, then a `rounded-full` pill with a pinging `emerald-500` dot.

**Motion**: the atmosphere breathes (scale 1 to 1.12, opacity 0.5 to 0.8, 9s ease-in-out, looping), the halo pulses to 1.25 every 4.5s, and the pill text shimmers (`animate-unibox-shimmer`, 2.8s linear). With reduced motion, all of it stops and the orbiting chips are not rendered.

**Don't** use it as a loading or error state, and don't add actions to it. It exists so there is something calm to look at.

## API

```ts
export declare function UniboxIdlePanel({ className }: {
    className?: string;
}): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h(DC.UniboxIdlePanel, { className: "h-[500px] rounded-2xl border border-border/60 bg-background" });
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Unibox

- [ChannelSegments](/design/components/channel-segments.md): The Unibox channel filter: a rail of icons where one shared pill glides to the selected channel, and only that segment spells out its name.
- [ChatListItem](/design/components/chat-list-item.md): One conversation in the Unibox list: a motion row that staggers in, glides when a new reply reorders the inbox, and pops its unread badge.
- [MessageBubble](/design/components/message-bubble.md): One message in a Unibox thread: your side in the brand gradient, theirs in muted glass, each rising in from its own side of the conversation.
- [MessageComposer](/design/components/message-composer.md): The Unibox reply box: text, emoji and staged images in one rounded field, with a send button that springs awake when there is something to send.
- [ReplySuggestions](/design/components/reply-suggestions.md): The band between a Unibox thread and its composer: ask for a few replies, watch them arrive, pick one.
- [SyncProgressPanel](/design/components/sync-progress-panel.md): The dialog behind the Unibox sync button.