Planner Activity Inspector - Canvas Design System

Canonical — activity selected

Rendered when a timeline card is focused. The component carries its own accent stripe on the left border (driven by type) so the rail visually ties to the selected card.

EXERCISE · 60 min · 6–12 ppl

Abstraction Laddering

STRATEGY · FACILITATION · DIVERGENT

A structured way to move a group up (more abstract) and down (more concrete) to surface shared understanding around a problem.

Energy impact +16 NET

Cognitive +8

Social +5

Physical +0

Emotional +3

Logistics

60 min 6–12 ppl Standing Stickies, markers

Facilitator notes

Keep the ladder visible throughout. "Why" questions push up; "how" questions push down.

— PRIYA · JAN 14

When it runs

09:45 → 10:45 · right after Stakeholder mapping

Actions

Type accents — icebreaker, break, custom

The type token drives the left-border stripe, the energy-bar fill, the net-badge tint, logistics bullet color, note rule, and button hover color — all in one.

ICEBREAKER · 10 min · any group

Two truths and a lie

ICEBREAKER · ENERGIZE

Overview

A low-stakes warmup where each person shares three statements — two true, one false — and the group guesses the lie.

Energy impact +12 NET

Cognitive +3

Social +8

Physical +1

Emotional +0

Logistics

10 min any group Seated No materials

When it runs

09:00 → 09:10 · opens the workshop

Actions

BREAK · 10 min

Coffee break

BREAK · RECOVERY

Overview

A short recovery break to let the group reset between deep-work blocks.

Energy impact −2 NET

Cognitive −4

Social +2

Physical +4

Emotional −4

Logistics

10 min Any space Optional Coffee, water

When it runs

10:45 → 10:55 · between sessions 2 and 3

Actions

Minimal — identity + actions only

Every section is optional. Use this variant for custom activities or library items that haven't been annotated yet.

API Reference

Option	Type	Description
`type`	string	`exercise` (default) \| `icebreaker` \| `break` \| `custom`. Drives left-border color, energy-bar fill, net-badge tint, bullet color, note rule, and button hover.
`duration` / `groupSize`	string / string	Composed into the eyebrow: EXERCISE · 60 MIN · 6–12 PPL. Omit either to drop it from the eyebrow.
`title`	string	Activity title (required). Rendered in the display/serif font at 22px.
`tags`	array	Small tag strings joined with `·` and rendered in mono uppercase below the title.
`closable`	bool	Show the × close control in the eyebrow row (default `true`).
`overview`	string	One or two sentences in the display font. Also serves as the content of the "Overview" tab when `instructions` are provided.
`instructions`	array \| string \| null	Step-by-step facilitator instructions. Pass an array of strings (rendered as a numbered list with mono step counters) or a string (rendered as HTML — callers own the markup). When present, the Overview section becomes a two-tab panel: Overview · Instructions.
`activeTab`	string	`'overview'` (default) or `'instructions'`. Which tab renders active on first paint.
`energy`	array \| null	`['net', 'dimensions' [{label, delta, fill 0..100}]]`. The `net` badge is tinted in the type accent.
`logistics`	array	Strings rendered as a 2-col mono bulleted grid. Bullets tint with the type accent.
`notes`	array \| null	`['body', 'author', 'date', 'canAdd' bool]`. Body renders as a blockquote with a left accent rule. `canAdd` surfaces a `+ Add` affordance.
`context`	array \| null	`['time', 'description']`. Rendered as a dashed-border mono pill.
`actions`	array	Primary action row. Each item: `['label', 'icon?', 'action', 'href?']`. The grid auto-divides into equal columns.
`destructive`	array \| null	Single destructive action rendered full-width below the primary row, with red-tinted border + hover.
`id` / `class` / `attrs`	string / string / array	Standard passthrough.

Design Guidance

Do

Swap to this component from ws_planner_inspector_rail when the user selects an activity on the timeline; swap back when they deselect or click ×.
Let the type token drive every accent — left border, energy bars, logistics bullets, note rule, buttons. Don't hardcode phase colors in consumers.
Keep overview to 1–2 sentences. Deeper descriptions belong in the library detail page, not the rail.
Use the net badge as the headline number. Per-dimension deltas are supporting detail; +16 NET is the story.

Don't

Don't render both ws_planner_inspector_rail and ws_planner_activity_inspector at the same time — the right column shows one or the other based on selection state.
Don't use actions for more than 3 primary actions at 340px width; the mono labels wrap poorly in narrower columns.
Don't put destructive actions in the primary actions array. The standalone destructive slot exists because removal deserves visual separation.