Skip to content
Caps0.4.0
API reference

components/technonomicon

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/technonomicon";

Exports

Section titled “Exports”
Kind Export Description
type alias PlateProps Props accepted by Plate.
type alias StagePlateProps Props accepted by StagePlate.
type alias CompactPlateProps Props accepted by CompactPlate.
type alias MarginNoteProps Props accepted by MarginNote.
type alias CalloutKind Supported editorial callout kinds.
type alias CalloutProps Props accepted by Callout.
type alias GrowthStage Supported lifecycle stages.
type alias GrowthBadgeProps Props accepted by GrowthBadge.
type alias IssueMastheadProps Props accepted by IssueMasthead.
type alias MastheadSize A newspaper nameplate: the front page’s large head or a running head.
type alias MastheadProps Props accepted by Masthead.
type alias SectionLink One section of a publication.
type alias SectionBarProps Props accepted by SectionBar.
type alias FolioProps Props accepted by Folio.
type alias SpreadLayout Supported editorial spread arrangements.
type alias SpreadProps Props accepted by Spread.
type alias CardStat One supplied card measurement and its provenance. null means not measured.
type alias CigaretteCardFinish Print finish: the rarer full-art card lets the drawing run under the text.
type alias CigaretteCardProps Props accepted by CigaretteCard.
type alias AlbumSlot One numbered album position, optionally occupied by a card.
type alias CardAlbumProps Props accepted by CardAlbum.
function Plate() A labelled graphite illustration plate.
function StagePlate() A plate whose illustration is a live pixel-art stage rather than an image. Its drawing reads --specimen-ink, --specimen-paper and --specimen-accent, which follow the theme.
function CompactPlate() A compact plate for editorial teasers.
function MarginNote() An inline note styled for the page margin.
function Callout() A labelled editorial aside.
function GrowthBadge() An outlined Badge in the selected growth-stage color.
function IssueMasthead() The title, number, date, and dek for an Issue.
function Masthead() A print masthead. Ears flank the nameplate on wide pages and sit under it on phones; the edition line runs between a thin and a heavy rule.
function SectionBar() A newspaper section bar: small capitals between hairline rules, the current section printed in reverse. It scrolls sideways on narrow pages instead of wrapping. Name it with aria-label.
function Folio() A running foot: the page’s folio line between rules.
function Spread() A responsive editorial region with an explicit layout.
function CigaretteCard() A two-sided collector card: a framed front with an inset drawing, a stat plate and a flavor line, and a ruled measurement ledger on the back. Both faces live inside one native pressed button, so the reverse stays in the DOM; the visible face names the button. Hydrated hosts flip through React state. Static hosts load the Caps enhance/cigarette-card module, which ignores clicks this component already handled. With href the card is a preview instead: a link to the card’s own page that shows only its face.
function CardAlbum() A numbered checklist of supplied cards and ruled spaces for missing ones.

PlatePropstype alias

Section titled “PlateProps”
Signature
type PlateProps = object & HTMLAttributes<HTMLElement>;

Props accepted by Plate.

Type Declaration

Section titled “Type Declaration”
Name Type
caption ReactNode
image ReactNode
label string

StagePlatePropstype alias

Section titled “StagePlateProps”
Signature
type StagePlateProps = object & HTMLAttributes<HTMLElement>;

Props accepted by StagePlate.

Type Declaration

Section titled “Type Declaration”
Name Type Description
caption ReactNode -
children ReactNode The live drawing: an element with the caps-stage-plate-viewport class.
hint? ReactNode How to handle the drawing, shown under the caption.
hintId? string Id for the hint, so the drawing can name it with aria-describedby.
label string -
specimenKey? ReactNode A numbered key to what the drawing shows.

CompactPlatePropstype alias

Section titled “CompactPlateProps”
Signature
type CompactPlateProps = Omit<PlateProps, "className">;

Props accepted by CompactPlate.

MarginNotePropstype alias

Section titled “MarginNoteProps”
Signature
type MarginNoteProps = object & HTMLAttributes<HTMLSpanElement>;

Props accepted by MarginNote.

Type Declaration

Section titled “Type Declaration”
Name Type
children ReactNode

CalloutKindtype alias

Section titled “CalloutKind”
Signature
type CalloutKind = "lesson" | "status" | "plan" | "warning";

Supported editorial callout kinds.

CalloutPropstype alias

Section titled “CalloutProps”
Signature
type CalloutProps = object & HTMLAttributes<HTMLElement>;

Props accepted by Callout.

Type Declaration

Section titled “Type Declaration”
Name Type
kind CalloutKind
title? ReactNode
children ReactNode

GrowthStagetype alias

Section titled “GrowthStage”
Signature
type GrowthStage = "spore" | "mycelium" | "fruiting";

Supported lifecycle stages.

GrowthBadgePropstype alias

Section titled “GrowthBadgeProps”
Signature
type GrowthBadgeProps = object & HTMLAttributes<HTMLSpanElement>;

Props accepted by GrowthBadge.

Type Declaration

Section titled “Type Declaration”
Name Type
stage GrowthStage

IssueMastheadPropstype alias

Section titled “IssueMastheadProps”
Signature
type IssueMastheadProps = object & HTMLAttributes<HTMLElement>;

Props accepted by IssueMasthead.

Type Declaration

Section titled “Type Declaration”
Name Type Description
date string -
dek ReactNode -
number string -
publication string The publication the Issue belongs to, printed in the kicker.
title string -

MastheadSizetype alias

Section titled “MastheadSize”
Signature
type MastheadSize = "front" | "running";

A newspaper nameplate: the front page’s large head or a running head.

MastheadPropstype alias

Section titled “MastheadProps”
Signature
type MastheadProps = object & HTMLAttributes<HTMLElement>;

Props accepted by Masthead.

Type Declaration

Section titled “Type Declaration”
Name Type Description
wordmark string The publication name, set large in the nameplate face.
href string Where the nameplate links, normally the front page.
mark? ReactNode A small printed mark beside the wordmark, such as a logo drawing.
tagline? ReactNode One line under the wordmark in the publication’s voice.
edition? readonly ReactNode[] The ruled edition line: date, issue, editor and similar items.
startEar? ReactNode The left ear box beside the nameplate, such as a weather note.
endEar? ReactNode The right ear box beside the nameplate, such as the editor’s portrait.
sections? ReactNode The section bar under the edition line, normally a SectionBar.
size? MastheadSize -
Section titled “SectionLink”
Signature
type SectionLink = object;

One section of a publication.

Properties

Section titled “Properties”

href

Section titled “href”
Signature
href: string;

label

Section titled “label”
Signature
label: string;

marker?

Section titled “marker?”
Signature
optional marker?: string;

Printed before the label, such as a section letter.

current?

Section titled “current?”
Signature
optional current?: boolean;

shortcut?

Section titled “shortcut?”
Signature
optional shortcut?: string;

A keyboard shortcut announced through aria-keyshortcuts.

SectionBarPropstype alias

Section titled “SectionBarProps”
Signature
type SectionBarProps = object & HTMLAttributes<HTMLElement>;

Props accepted by SectionBar.

Type Declaration

Section titled “Type Declaration”
Name Type Description
sections readonly SectionLink[] -
tools? ReactNode Controls set at the end of the bar, such as theme and help buttons.

FolioPropstype alias

Section titled “FolioProps”
Signature
type FolioProps = object & HTMLAttributes<HTMLElement>;

Props accepted by Folio.

Type Declaration

Section titled “Type Declaration”
Name Type Description
items readonly ReactNode[] Running items, such as the publication, page number and date.

SpreadLayouttype alias

Section titled “SpreadLayout”
Signature
type SpreadLayout = "lead" | "columns" | "grid";

Supported editorial spread arrangements.

SpreadPropstype alias

Section titled “SpreadProps”
Signature
type SpreadProps = object & HTMLAttributes<HTMLElement>;

Props accepted by Spread.

Type Declaration

Section titled “Type Declaration”
Name Type
layout SpreadLayout
children ReactNode

CardStattype alias

Section titled “CardStat”
Signature
type CardStat = object;

One supplied card measurement and its provenance. null means not measured.

Properties

Section titled “Properties”

key

Section titled “key”
Signature
key: string;

label

Section titled “label”
Signature
label: string;

value

Section titled “value”
Signature
value: string | number | null;

unit?

Section titled “unit?”
Signature
optional unit?: string;

source

Section titled “source”
Signature
source: string;

asOf

Section titled “asOf”
Signature
asOf: string;

CigaretteCardFinishtype alias

Section titled “CigaretteCardFinish”
Signature
type CigaretteCardFinish = "standard" | "full-art";

Print finish: the rarer full-art card lets the drawing run under the text.

CigaretteCardPropstype alias

Section titled “CigaretteCardProps”
Signature
type CigaretteCardProps = object;

Props accepted by CigaretteCard.

Properties

Section titled “Properties”

number

Section titled “number”
Signature
number: number;

seriesNumeral

Section titled “seriesNumeral”
Signature
seriesNumeral: string;

The series numeral printed on both faces and in the series mark, such as “I”.

series

Section titled “series”
Signature
series: string;

title

Section titled “title”
Signature
title: string;

typeLine?

Section titled “typeLine?”
Signature
optional typeLine?: string;

The type line beside the title, such as “Machine of the Burrow”.

image

Section titled “image”
Signature
image: ReactNode;

stats

Section titled “stats”
Signature
stats: readonly CardStat[];

note

Section titled “note”
Signature
note: string;

finish?

Section titled “finish?”
Signature
optional finish?: CigaretteCardFinish;

setMark?

Section titled “setMark?”
Signature
optional setMark?: ReactNode;

A small set symbol printed in the collector line.

defaultFlipped?

Section titled “defaultFlipped?”
Signature
optional defaultFlipped?: boolean;

href?

Section titled “href?”
Signature
optional href?: string;

Makes the card a preview: a link to the card’s own page showing its face, instead of a pressed button that turns over in place.

size?

Section titled “size?”
Signature
optional size?: "standard" | "large";

“large” prints the card bigger, for its own page.

className?

Section titled “className?”
Signature
optional className?: string;

style?

Section titled “style?”
Signature
optional style?: CSSProperties;

Inline style on the card, such as a shared view-transition name.

AlbumSlottype alias

Section titled “AlbumSlot”
Signature
type AlbumSlot = object;

One numbered album position, optionally occupied by a card.

Properties

Section titled “Properties”

number

Section titled “number”
Signature
number: number;

card?

Section titled “card?”
Signature
optional card?: CigaretteCardProps;

CardAlbumPropstype alias

Section titled “CardAlbumProps”
Signature
type CardAlbumProps = object & HTMLAttributes<HTMLElement>;

Props accepted by CardAlbum.

Type Declaration

Section titled “Type Declaration”
Name Type
title string
slots readonly AlbumSlot[]

Plate()function

Section titled “Plate()”
Signature
function Plate(__namedParameters): Element;

A labelled graphite illustration plate.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters PlateProps

Returns

Section titled “Returns”

Element

StagePlate()function

Section titled “StagePlate()”
Signature
function StagePlate(__namedParameters): Element;

A plate whose illustration is a live pixel-art stage rather than an image. Its drawing reads --specimen-ink, --specimen-paper and --specimen-accent, which follow the theme.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters StagePlateProps

Returns

Section titled “Returns”

Element

CompactPlate()function

Section titled “CompactPlate()”
Signature
function CompactPlate(props): Element;

A compact plate for editorial teasers.

Parameters

Section titled “Parameters”
Parameter Type
props CompactPlateProps

Returns

Section titled “Returns”

Element

MarginNote()function

Section titled “MarginNote()”
Signature
function MarginNote(__namedParameters): Element;

An inline note styled for the page margin.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters MarginNoteProps

Returns

Section titled “Returns”

Element

Callout()function

Section titled “Callout()”
Signature
function Callout(__namedParameters): Element;

A labelled editorial aside.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters CalloutProps

Returns

Section titled “Returns”

Element

GrowthBadge()function

Section titled “GrowthBadge()”
Signature
function GrowthBadge(__namedParameters): Element;

An outlined Badge in the selected growth-stage color.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters GrowthBadgeProps

Returns

Section titled “Returns”

Element

IssueMasthead()function

Section titled “IssueMasthead()”
Signature
function IssueMasthead(__namedParameters): Element;

The title, number, date, and dek for an Issue.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters IssueMastheadProps

Returns

Section titled “Returns”

Element

Masthead()function

Section titled “Masthead()”
Signature
function Masthead(__namedParameters): Element;

A print masthead. Ears flank the nameplate on wide pages and sit under it on phones; the edition line runs between a thin and a heavy rule.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters MastheadProps

Returns

Section titled “Returns”

Element

SectionBar()function

Section titled “SectionBar()”
Signature
function SectionBar(__namedParameters): Element;

A newspaper section bar: small capitals between hairline rules, the current section printed in reverse. It scrolls sideways on narrow pages instead of wrapping. Name it with aria-label.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters SectionBarProps

Returns

Section titled “Returns”

Element

Folio()function

Section titled “Folio()”
Signature
function Folio(__namedParameters): Element;

A running foot: the page’s folio line between rules.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters FolioProps

Returns

Section titled “Returns”

Element

Spread()function

Section titled “Spread()”
Signature
function Spread(__namedParameters): Element;

A responsive editorial region with an explicit layout.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters SpreadProps

Returns

Section titled “Returns”

Element

CigaretteCard()function

Section titled “CigaretteCard()”
Signature
function CigaretteCard(__namedParameters): Element;

A two-sided collector card: a framed front with an inset drawing, a stat plate and a flavor line, and a ruled measurement ledger on the back. Both faces live inside one native pressed button, so the reverse stays in the DOM; the visible face names the button. Hydrated hosts flip through React state. Static hosts load the Caps enhance/cigarette-card module, which ignores clicks this component already handled. With href the card is a preview instead: a link to the card’s own page that shows only its face.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters CigaretteCardProps

Returns

Section titled “Returns”

Element

CardAlbum()function

Section titled “CardAlbum()”
Signature
function CardAlbum(__namedParameters): Element;

A numbered checklist of supplied cards and ruled spaces for missing ones.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters CardAlbumProps

Returns

Section titled “Returns”

Element