Components

Every primitive shown with its real states. Reuse these before creating a variant; a second hand-built status chip is a defect, not a design choice.

You are hereComponents30kBranchBuildsource: sample data · src/design-system/bartonnext: reuse, do not fork

FractalShell

you are already inside it

FractalShell

Rail + main, content-neutral

The rail on the left of this page is the shell. Desktop keeps a fixed rail, tablet compacts it, mobile switches to a drawer while preserving the current node and path. Nav groups, product name, skin and header slot are props — never hardcoded copy.

Usage

<BlockIdProvider>
  <FractalShell
    productName="Mission Control"
    productMeta="internal · dark skin"
    nav={navGroups}
    skin={skin}
    onSkinChange={setSkin}
    headerRight={<AdminBlockIdToggle />}
  >
    <Outlet />
  </FractalShell>
</BlockIdProvider>

ScopeBreadcrumb + OrientationStrip

where am I

ScopeBreadcrumb

Path with Up control

You are hereIntake Forms5kExecution leafBuildsource: sample datanext: bind adapter

You are hereIntake Audit5kExecution leafGapsource: gap — no source bound

HubCard + SpokeCard

hub/spoke descent

Current node

30kVerified

Intake

Rim validation before anything enters the trunk. The hub holds the canonical read surface and the status area.

Node ID: branch.intake
Audience: internal
Gate: open
Source: sample

Inputs validate at the rim. Presentation outputs are read-only.

StatusBadge, AltitudePill, EvidenceBadge

signal only

VerifiedLiveBuildDraftBlockedWarningRepairGapVerified · sm

50kWhole tree10kSourced· packet 12 p.4Planned· Q3No source

StatPanel

provenance is required

Active nodes

Live

24+2

src: sample CTB

Source coverage

Warning

61%

src: sample coverage scan

Blocked gates

Blocked

src: sample CTB

Unsourced claims

Gap

—

src: gap — no source

DataTable

read surface, not a store

Density

Sample rows — provenance belongs in the caption, never implied
Node ID	Node	Altitude	State	Owner
leaf.0041	Intake Forms	5k	Verified	ops
leaf.0042	Intake Audit	5k	Gap	unassigned
clst.0107	Source Coverage	10k	Draft	study
clst.0108	Readiness Panel	10k	Blocked	study

No nodes match this filter

Empty is a real state. It is not an error, and it is not verified.

EmptyState, BlockedState, VerificationChecklist

honest states

No sources attached

Attach a packet, page or document. An unsourced claim stays a gap.

Readiness panel locked

Blocked

Source coverage has not been checked for this exam domain, so readiness cannot be asserted.

opens from: Source Coverage · coverage check

VerificationChecklist

Pass / fail / not checked

Active CTB matches the declared tree and ordering
Pass
Breadcrumb, Up and descent behave at every altitude
Pass
Route guards agree with visual status
Blocked leaf is reachable by direct URL in the sample app
Fail
Mobile preserves hierarchy
Not checked on a real device
Not checked

CTBMiniMap, DataFlowMap, SourceList

verified vs gap

CTB mini-map

sample tree

50kLive
- 30kVerified
- 30kDraft
- 30kRepair

Sources

Barton CTB contractSourced· ctb-contract.md
Design system referenceSourced· design-system.md
Domain skin values for KiddosNo source· not supplied
Mission Control dark skinPlanned· planned

Data-flow map

Verified
Planned
Gap / unproven

Sample placeholder data — not a source of truth

AdminBlockIdToggle

admin only

Page-block identity

data-block-id overlay

Toggle Block IDs in the header to overlay stable IDs on every independently editable block on this page. The overlay never shifts layout, never appears in client, prospect or employee views, and never appears in exports. IDs belong to the logical block, not its position — reordering or restyling must not change them.

scope: page.role.block · e.g. overview.rules