Rookery - #idea-row

Argument	Type	Description
`when`	content \| none	The date cell, already formatted. none draws an em dash.
`iso`	str \| none	A machine-readable date, which wraps `when` in a `<time>` element carrying it.
`soft`	bool	Whether this date answers a different question than the list asked — a booked event standing in for a deadline. Dropped silently on a row with no date, which makes no such claim.
`when-class`, `when-attrs`	str \| array, dictionary	Extra classes and attributes on the date cell, for a consumer that bands a deadline by how close it is. Core defines none of these names and styles none of them.
`title`	content	The row’s title.
`href`	str \| none	Where the title links. none renders it as a span instead.
`badges`	array	The chip strip at the end of the row. A `(text: .., tag: ..)` dictionary draws the ordinary chip, wearing the same `.idea-tag-<tag>` class a pill and an outline row do, so a themed tag colors itself; anything else is placed verbatim and the caller owns its markup. An empty strip is omitted rather than drawn empty, since a childless span still takes a grid track.
`cells`	array	Extra content cells between the title and the badges — a host institution, a path — for what a reader scans down a column for rather than reads inside the title.
`tags`	array	Tag names, which become `.idea-tag-<tag>` classes and a `data-rookery-tags` attribute on the `<li>`.
`extra`, `attrs`	array, dictionary	Extra classes and attributes on the `<li>`, merged under the classes this function computes so a caller cannot drop the row’s own. This is what lets `@rookery/search`’s panels hang their `data-panel-*` attributes off a row without re-emitting its markup.

[idea:class-reference]HTML class reference

You can also style more granularly with your own CSS using the classes below. A trailing * below stands for a family whose members are named in the description.

Class	What it is
`.idea-box`	An idea’s own block where it was written, carrying the left rule and the padding every rookery block nested inside it measures from.
`.idea-head`, `.idea-tab`	The heading group, and the short top rule the name straddles at the card’s corner.
`.idea`, `.idea-title`	The idea’s heading element—which carries the anchor an `@idea:etal` fragment resolves to—and the title text inside it.
`.idea-label`, `.idea-date`	The `[idea:etal]` permalink and the date beside it, in a heading, a window summary or prose, wherever either is shown.
`.idea-tag`, `.idea-tag-<tag>`	A tag pill in the hat, and one extra class per tag the idea carries. The second reaches every surface that names the tag—the idea’s heading, its box, its outline row, its pill, and a search result’s chip, which JavaScript builds in the browser—so a single rule of your own styles a tag everywhere it shows up.
`.idea-ref`	An `@idea:other` reference in prose. See referencing ideas.
`.idea-window`	A transclusion, wearing the same rule and indent as `.idea-box`; the second class `.idea-window-plain` opts a bare `#idea-body` out of that box.
`.idea-window-*`	The fold: `-details` the `<details>`, `-summary` the row you click, `-title` the name in that row, `-body` what folds away under it. The date beside the title is `.idea-date`, the same class it wears in a heading.
`.idea-window-more*`	The second fold a `limit:` makes inside the body: `.idea-window-more` its `<details>`, `-more-summary` the shown blocks you click to see the rest, and `.idea-window-ellipsis` the `…` at the end of them.
`.idea-outline*`	A page’s outline: `.idea-outline` the list at each level of nesting, `-title` its “Contents” label, `-row` one row per idea.
`.idea-footnote*`	An idea’s own footnotes, carried on every surface it appears on: `.idea-footnotes` the block, `-title` its label, `.idea-footnote-list` and `.idea-footnote` its entries.
`.idea-fn-*`	`-ref` the superscript mark in prose, `-backlink` the way back up to it from the entry.
`.idea-references`, `.idea-page-refs`	The bibliography an idea’s citations draw from, and the page’s own for citations written outside any idea.
`.idea-footer*`	On an idea page: `.idea-footer` the ruled-off apparatus under the note, `-title` the label on each of its sections.
`.idea-context`, `.idea-backlinks`	That footer’s two sections: where the note was written, and the notes pointing at it.
`.idea-page-list`, `.idea-page-row`	A list of pages in either section, and one row in it—a page cannot fold, so it wears a window’s shape without being one.
`.idea-row*`	One row of an `#idea-row` list: `.idea-row` the `<li>`, `-when` its date cell, `-title` the title, `-cell` each extra cell, `-badges` the chip strip at the end. `@rookery/search` and `@rookery/timeline` draw the same row, so a rule of yours here reaches all three.
`.idea-index-count`	The “n ideas” line on the minted index page.
`.idea-dup-warning`	The build-time notice shown when two ideas claim the same name.

Every one of those elements also carries a data-rookery attribute naming the same thing without the prefix—.idea-box is [data-rookery="box"], .idea-window-summary is [data-rookery="window-summary"]—and it is the attribute, not the class, that rookery’s own stylesheet selects on. The two say the same thing, so write whichever reads better in your CSS; the attribute is there because css-prefix moves the classes and nothing should have to follow them to find an element. .idea-window-plain is the one that does not repeat itself: a plain window is [data-rookery="window"] wearing data-rookery-plain besides.

Anything that names a tag—a card, a window, a pill, an outline row, an index row, a badge—carries one more, data-rookery-tags, listing those tag names, minus any made invisible by invisible-tags.

[idea:css-reference]CSS variable reference

You can override any value from the theme reference as a CSS variable, as well as other aspects of a rookery’s appearance.

Property	Default	What it sets
`--idea-tag-size`	`--idea-label-size`	A tag pill’s font size. Follows the name’s size unless you separate them.
`--idea-tag-radius`	`999px`	A pill’s corner radius.
`--idea-tag-color`, `--idea-tag-bg`	`--idea-name-color`, `rgba(128, 128, 128, .18)`	An untagged-by-`tags-color` pill’s text and background. Setting `tags-color` writes these per tag for you.
`--idea-tag-line`	`--idea-border-color`	The tick an outline row draws off the outline’s rule, where the row’s idea carries a tag.
`--idea-external-color`	`--idea-name-color`	The underline an outbound link takes on hover, in a references block or an idea page’s footer—so a link that leaves your rookery reads differently from one that stays in it.
`--idea-heading-margin-top`	`0.75em`	The space above an idea’s heading. Set this in your own stylesheet to return the heading to your site’s own vertical scale.
`--idea-row-pad-block`	`0.45rem`	An `#idea-row` row’s vertical padding. Published on purpose, and it inherits, so a cell that paints a background can stretch past it rather than reading as a chip sitting in the row.
`--idea-row-gutter`	`7.5em`	The width of a row grid’s first column.
`--idea-muted-color`	`gray`	The color of a de-emphasized row cell, and of a row date marked `soft:`.
`--idea-row-rule-color`	unset	The color of a row’s vertical rule. Read and never set by this package’s own stylesheet, precisely so a layered stylesheet can point it somewhere—a sibling package can run an urgency band down that bar.

[idea:idea-row-body-reference]#idea-row-body

The same row, without the <li> around it. It takes every #idea-row argument except the three that describe that wrapper — tags, extra and attrs — and is for a caller that owns the list item itself.

#import "@rookery/core:0.1.0": idea, ideas, idea-row-body

#idea(
  "etal",
  title: [Et al.],
  tags: (note: none),
  created: datetime(year: 2026, month: 8, day: 20),
)[Attribution flattens a crowd into one name.]

#context html.elem("ul", ideas(tagged: "note").map(e => html.elem(
  // the `<li>` is the caller's, with its own classes and attributes
  "li",
  attrs: (class: "my-row", data-my-kind: "note"),
  idea-row-body(
    when: e.created.display("[day] [month repr:short]"),
    iso: e.created.display("[year]-[month]-[day]"),
    title: e.label,
    href: e.href,
  ),
)).join())

The split is forced rather than tidy: @rookery/search ships two widgets that want this shape and disagree about who owns the <li>. Its filter panel builds its own list and uses #idea-row as the item; its general panel wraps whatever it is handed in an item of its own, which with #idea-row would nest one <li> inside another.