CTB Patterns

CTB means Christmas Tree Backbone: trunk to branch to leaf, left to right. The current node is the hub, its direct children are spokes, and descending a spoke makes it the next hub. The same pattern repeats at every altitude.

You are hereCTB Patterns30kBranchVerifiedsource: sample tree · sample-data.tsnext: bind a real CTB

Live descent (sample tree)

hub / spoke / up

Current node

50kLive

Operations Trunk (sample)

Sample trunk used to demonstrate hub/spoke descent.

Node ID: trunk.ops
Parent: — (trunk)
Route: /ctb-patterns
Audience: internal

Hub holds the canonical read surface plus a status/error area. Inputs validate at the rim.

CTB mini-map

sample tree

50kLive
- 30kVerified
- 30kDraft
- 30kRepair

Rules

Descent contract

Clicking a spoke descends exactly one tier.
Breadcrumb and Up climb the path; every prior node is navigable.
Locked and completed nodes both stay visible.
A spoke without a declared route renders as a named placeholder — Gap not a link.
Route guards and visual status must agree.

Blocked destinations

never hide the reason

Readiness Panel

Blocked

Locked because the declared gate has not opened. The node stays visible so the user can see what exists and why it is unavailable.

opens from: Source Coverage · coverage check

Unnamed destination

Blocked

A destination referenced by the tree but never declared. It renders as a gap rather than a fabricated link.

opens from: gap — no declared setpoint

CTB as structured data

not a second menu

The CTB is configuration, not a diagram and not a hardcoded menu. The same active tree drives navigation, routes, accordions and supported page sections. Project records populate nodes; they never rewrite the tree. Activation must be blocked for missing parents, duplicate IDs or routes, cycles, unsupported routes or sections, and broken gate dependencies.

Node shape (src/design-system/barton/types.ts)

interface CTBNode {
  id: string;              // stable, never recycled
  parentId: string | null; // null = trunk
  name: string;
  description?: string;
  altitude: "50k" | "30k" | "10k" | "5k";
  state: BartonState;      // real state, never defaulted to verified
  route?: string;          // omit => named placeholder
  audience?: string;
  blockedReason?: string;  // shown in UI when locked
}