Canvas Design System
Main Site Tokens

Planner Inspector Rail

The right-column inspector sidebar inside the Workshop Planner. Three opinionated sections stacked vertically with dividers: Energy (wraps ws_energy_arc_card), Coach suggests, and Facilitators. Each section is optional — pass null or omit it.

Canonical

Matches the planner inspector mockup. Note the energy section title ("Energy arc / 8 of 4h used · 0m over") sits outside the card — the rail auto-sets showHeader => false on the wrapped energy-arc-card and auto-defaults the score-badge variant to note.

<?= ws_planner_inspector_rail([
    'energy' => [
        'title' => 'Energy arc',
        'meta'  => '8 of 4h used · 0m over',
        'card'  => [                              // passed to ws_energy_arc_card
            'score'      => 82,
            'scoreBadge' => ['text' => 'Strong shape', 'type' => 'success'],
            'chartData'  => [ … ],
            'timeLabels' => ['9:00', '10:15', '11:10', '12:00'],
            'metrics'    => [ … 4 items … ],
        ],
    ],
    'coach' => [
        'title' => 'Coach suggests',
        'meta'  => '3 notes',
        'items' => [
            ['icon' => 'schedule', 'pre' => 'TIMING',
             'line' => 'Five Whys runs long <em>45 min</em>…',
             'meta' => 'Based on 142 prior runs', 'action' => 'apply'],
            // …
        ],
    ],
    'facilitators' => [
        'title'    => 'Facilitators',
        'meta'     => '3 collaborating',
        'avatars'  => [['initials' => 'PS', 'bg' => '…'], …],
        'presence' => ['name' => 'Priya Sundararajan', 'status' => 'editing · 2 others viewing'],
    ],
]) ?>

Minimal — energy only

Use when the rail only needs to surface the energy arc (no coach suggestions or presence). Omitting the other sections hides them entirely.

API Reference

OptionTypeDescription
energy array | null ['title','meta','card']. card is forwarded to ws_energy_arc_card. The rail auto-sets showHeader => false and defaults the score-badge variant to 'note' (the small mono tag style).
coach array | null ['title','meta','items']. Each item: ['icon','pre','line','meta','action','href?']. line may include inline <em> markup — the em is rendered in the phase color. Icon defaults are looked up by pre: TIMING→schedule, ENERGY→monitoring, CLOSE→chat_bubble.
facilitators array | null ['title','meta','avatars','presence']. avatars: array of ['initials','bg'] (bg accepts any CSS background, incl. gradients). presence: ['name','status'].
id / class / attrsstring / string / arrayStandard passthrough.

Design Guidance

Do

  • Use this as the right column inside the Workshop Planner. Expect 320–360px viewport width.
  • Keep the section title's meta to ≤ 35 chars so it fits on one line without wrap.
  • Let the phase token drive accents (score, chart line, suggestion icons, <em> inside lines). Switching to the coach phase: style="--wpir-phase: #7C4DFF;" via attrs.
  • Use the note score-badge variant in the rail context (auto-applied) so the badge sits next to the score without dominating.

Don't

  • Don't replace the energy slot with a custom card — reuse ws_energy_arc_card so the two apps stay aligned.
  • Don't let the coach line grow past ~2 short sentences. Longer insights belong in a detail overlay, not the rail.
  • Don't use real avatars as <img> inside the avatar stack — the initials pattern is intentional for density at this small size.