Canvas Design System
Main Site Tokens

Planner Library Rail

The left-column sidebar inside the Workshop Planner. Three stacked regions — search, category nav, and one or more item sections. Every activity card inside the rail is rendered via ws_planner_card with size=sm, so the card language stays consistent with the timeline canvas.

Canonical

Matches the planner mockup: search input with ⌘K hint, a categories list with colored dots and counts, and grouped sections of draggable activity cards.

<?= ws_planner_library_rail([
    'search' => [
        'placeholder' => 'Search 2,418 exercises…',
        'kbd'         => '⌘K',
        'name'        => 'q',
    ],
    'categories' => [
        'title' => 'Library',
        'count' => '2,418',
        'items' => [
            ['label' => 'Strategy', 'color' => '#0284C7', 'count' => 284, 'active' => true],
            // …
        ],
    ],
    'sections' => [
        [
            'title' => 'Strategy · drag to add',
            'meta'  => 'top 5',
            'items' => [
                ['title' => 'Lightning Decision Jam', 'type' => 'exercise',
                 'duration' => '45m', 'meta' => '6-12 ppl'],
                // …
            ],
        ],
        // …
    ],
]) ?>

Minimal — no categories

Search + one or more item sections. Use when the rail is scoped to a single category and category nav is unnecessary.

API Reference

OptionTypeDescription
search array | null ['placeholder','kbd','name','value']. Pass null to hide the search entirely.
categories array | null ['title','count','items'] where each item is ['label','color','count?','active?','href?','id?']. If no href is set the row renders as a <button>.
sections array Array of ['title','meta?','items']. Each item is forwarded to ws_planner_card with size=sm and draggable=true, so all card options are valid here (title, type, duration, meta, state, href, id, class, attrs).
id / class / attrsstring / string / arrayStandard passthrough.

Design Guidance

Do

  • Use this as the left column inside the Workshop Planner (/planner/). Expect a viewport width of 260–320px.
  • Always pass activity items through the items array — they render via ws_planner_card SM, which keeps hover, drag, and swap affordances consistent with the timeline.
  • Set the active category via active => true; the rail applies the phase color and swaps the dot to white.
  • Use the meta sub-property on items for group size or short labels (<= ~14 chars) — the mono font handles truncation cleanly.

Don't

  • Don't render raw HTML items alongside ws_planner_card — the rail is a layout shell, not a styling hook. Use the card component so future changes propagate everywhere.
  • Don't stuff a free-form sidebar into this component. If your column needs custom regions beyond search + categories + item sections, compose your own <aside> and reuse ws_planner_card directly.