x
1
2
3
4
5
6
<div class="rounded-2xl border border-line-faint bg-surface p-6 shadow-md"> <div class="flex flex-wrap items-baseline gap-3"> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">gl<span class="text-xs font-normal text-ink-muted">enum</span></span> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-nav-active text-nav-active-ink whitespace-nowrap">gl<span class="text-xs font-normal text-nav-active-ink">enum</span></span> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
<%# The tag is drawn on a panel, and that is a fact about the component rather than about this preview: its fill is `surface-sunk`, which the app resolves to the *canvas* in both modes — a sunk well is the page ground showing through. On the preview shell's bare canvas it would have no fill at all, so the demo draws the sheet the grid, the reference and the form all sit on. %><div class="rounded-2xl border border-line-faint bg-surface p-6 shadow-md"> <div class="flex flex-wrap items-baseline gap-3"> <%= render ParamNameComponent.new(name: parameter.name, type: parameter.type) %> <%= render ParamNameComponent.new(name: parameter.name, type: parameter.type, current: true) %> </div></div>The parameter a page is about, in the nav-active pair — the same pair the engine tree marks the row you are on with. One per page at most.
No params configured.