SYSTEM

Rail

The page’s one ink field: the logo, the menu, and in a document a map of the page.

Navigation shadcn: Sidebar

The rail beside this page is the live one. Below are slices of its field, built from the same markup.

  • Introduction
  • The pipeline, end to end
  • Converting negatives
  • Gallery

States

  • Cell at rest

    on the field

    A ring in the field’s text colour.

  • Cell hot

    hover or :focus-visible

    A --state cell that fires and wobbles; its name flies out on a rule.

  • Menu open

    aria-expanded="true"

    On the field the open control is a --state cell, breathing.

  • Current page

    aria-current="page"

    A still --state fill on the field.

Anatomy

Width 64px on index pages; 232px in document mode, collapsible to 64px
Field --ink with --chip-fg content; in the dark theme a raised dark panel, so a light bar never glares
Index the logo; the menu cell at the screen’s middle; a neuron mark at the foot, a mark and not a control
Document a back cell with its section’s name, the page’s h2s as a TOC, the collapse cell top right, the menu cell at the foot
TOC rows 1½ modules tall on --rail-hairline hairlines, half a module in from each side; a 24px node column, half a module, the label cut to one line; 55% at rest, 100% once read
Map rows at their sections’ places in the page: at most 60% of the room and three rows a section, gaps sized by each section’s height
Axon a dot wide down the node column, --rail-tissue ahead of the reader and --chip-fg behind; a node per section, 2.5 dots plus 0.5 a minute up to five
Current its node a --state cell that breathes, one slow harmonic at ~15fps
Flyouts a cell’s name prints on the paper past the field’s edge, at the end of a rule from the cell; the back cell’s prints on the field beside it

The current node’s frame rate is read from ui.ts at build time; the map’s figures are from rail-axon.ts.

Decisions

  • A map, not a list

    The TOC is a scaled map of the page. It first filled the bar from the back cell to the dock, so a short TOC spread over the whole height; a version capped to twice the list read as just a list.

  • Gaps by height

    Gaps were sized by words first, but a post’s sections often have near-equal word counts, so the map came out even. Height is what the reader feels.

  • The axon

    It replaced a progress fill rising behind a centred TOC, which read as a gauge and rose with the page rather than the sections. The axon is the writing index’s grammar, so the rail adds no new idea.

  • No loud rule

    The TOC hung from a --chip-fg rule that was the loudest line on the field. It went.

  • A neuron at the foot

    The load readout at the rail’s foot moved to the site menu’s Performance row; a neuron mark took its place.

  • Flyouts on paper

    Names pop out as flyouts in the tooltip grammar, replacing framed paper tags. Printed past the edge, the back cell’s name landed about 200px from its cell, so it prints on the field.

  • No machine cell

    The agents view is a page, reached from the site menu and the document heroes, so the rail has no cell for it.