Organism, and it contains another
Z5, the pane
The detail pane, and its resting state is the fleet. 48 instances across 48 screens. That is the decision the whole product’s navigation hangs on.
CLAUDE.md keeps the fleet out of the menu because it is what this pane shows when it is not showing a case, so it costs zero taps. And it binds a rule on this layer in as many words: the empty state of this pane must read as “this is the fleet”, not as “this is empty”. If it ever renders an empty, that decision has failed.
What fills it is a pattern, not a variant. The case pane, 38 uses, and the fleet, 10, have no zone in common past the head. Making the fleet a variant of the case pane would have written it as a pane with no body, which is to say as an empty case, and the requirement above would have failed in the architecture rather than in the pixels. Both are patterns and they arrive at stage 09.
Anatomy
A scaled scene, not a diagram. This is the one zone in the product with a width token, so it can stand at its own size rather than be drawn: both panes below are at the real --pane-w, which is 320px at 1440 and 380px above 1560: the pane narrows before the list does, with the real type and the real spacing. The fiction is the height, 420px against a viewport. The two are shown together because that is the argument: past the head they share no zone at all.
dark, shipped
At this width the pane at rest is not rendered at all, and the box that held it has been stood down rather than filled in. Node 3.1 settles it: selecting at 360 opens the standalone case, so there is no pane for the fleet to rest in.
the fleet at rest on the left, a case on the right. Same zone, no shared body
a case, and it is the whole page. The pane at rest is not rendered at this width
light, the pair
At this width the pane at rest is not rendered at all, and the box that held it has been stood down rather than filled in. Node 3.1 settles it: selecting at 360 opens the standalone case, so there is no pane for the fleet to rest in.
the fleet at rest on the left, a case on the right. Same zone, no shared body
a case, and it is the whole page. The pane at rest is not rendered at this width
.z5flex:0 0 --pane-w, a flex column on--bg-surfacewith its own scroll. a clamp since stage 10: 360px from the declared minimum to about 1500, then growing to 544: the pane is the one zone in the product that does not negotiate its widthpane-headthe only zone the two compositions share. Sticky, and it names what the pane is showingpane-body, pane-footthe case pane, 38. The argument and the ruling, and the foot is where the analyst decidesfrow, fleet-morethe fleet, 10. Tenant, what Clerk may do alone, and the record behind that grant. No body and no foot, which is why it is a second pattern and not a variant.is-standalone .nar68ch, and it is the one place in the product with a measure. Prose in a sheet is read as a document rather than scanned, and every other surface here is scanned
Behaviour at width
The pane is where the extra width goes. --pane-w is clamp(22.5rem, 24vw, 34rem): 360px from 1280 to about 1500, then 461 at 1920 and 544 at 2560, where it stops, past which a pane is a second page. It was 380px dropping to 320 below 1560 until stage 10 (Width), and the floor is what keeps the declared minimum rendering exactly as it did. Below 1280 the pane releases its own scroll, or the sticky foot pins to a box that never moves, and the standalone sheet drops its side borders because a border is paint. Whether the pane is rendered at all belongs to its filling, and it is written in patterns/fleet.css and patterns/case-pane.css rather than here.
Variants
Two axes, both about the route rather than about anything on the screen, and one empty axis that is a prohibition.
| Axis | Value | Uses | The rule |
|---|---|---|---|
| ground | base | – | --bg-surface, the raised plane. The pane is a thing on the console rather than part of it |
.is-paper | 21 | the page ground instead. A case being ruled on stops being an object beside the list and becomes the thing you are reading | |
| route | base | – | a pane inside the split, at --pane-w |
.is-standalone | 3 | its own address: a permalink, and a phone at 03:00. It stops being fixed width and grows to --width-sheet with a rule down both sides. Node 3.1 settles that selecting at 360 opens this rendering rather than a pane covering the list, so at that width the pane is simply not rendered and the case becomes the whole page. Two routes, one rendering, which is what node 4.2 has always been | |
| content | no values | – | Prohibited, and it is the most consequential empty cell in the system. The case pane and the fleet are patterns, produced at stage 09. Writing the fleet as a variant would have written it as a pane with no body, which is an empty case, and the rule this zone exists to keep would have failed in the architecture |
The two axes are not independent, and that is measured rather than assumed: all 3 standalone renderings in colour also carry is-paper. A case with its own address is always the thing you are reading.
When to use it
As the right half of the split, on every authenticated screen that has one. It shows a case when a case is selected and the fleet when nothing is. There is no third thing it shows, and adding one would cost the fleet its zero taps.
Where she meets it. Constantly, and mostly without looking at it. That is the point of the resting state: the fleet is on the screen while she works the queue, so design principle 4 holds by itself. Tenant context is never more than a glance away, and the glance is to the right rather than to a menu.
Rule and anti-rule
Do
Nothing selected, so the pane shows the fleet. It reads as an answer to a question she did not have to ask.
Narrow the window past 900 and both cells above empty themselves, because a pane at rest is a desk instrument and the product does not render one at 360. That is the same rule seen from the other side: at that width a case does not open in a pane, it opens as its own page.
Limits
Rules of composition and context, which no anti-rule can carry: nothing else is the right component to take, and what is wrong is the count or the neighbour. Counted on the grey corpus at stage 09, and every one of them is a function in design/kit/checks/rules.mjs. Full table with sources on Architecture.
- R10. The fleet has no route and no navigation item. A route would make the differentiator a place you go.
- R3. No overlay covers the detail pane. Design principle 5: no overlay hides the evidence the analyst is deciding on.
- R7. The detail pane never renders an
empty. Its resting state is the fleet, andCLAUDE.mdsays a pane that reads as empty has failed the decision rather than the layout.
States
It has none, and it is not interactive. The rows inside the fleet and the buttons inside the foot carry theirs.
dark, shipped
light, the pair
Put the pointer on the tenant row: the hover belongs to frow and not to the zone. Narrow the window past 900 and the pane at rest disappears entirely, which is node 3.1 rather than a bug.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--bg-surface | fill | the raised plane, and the base ground of the pane | ||
--bg-page | fill | .is-paper, 21 uses. The case you are reading rather than an object beside the list | ||
--line-edge | line | both sides of the standalone sheet, through --rule-edge |