Skip to content
Caps0.4.0
API reference

components/surface

Import

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

Exports

Section titled “Exports”
Kind Export Description
type alias SurfaceProps Native surface attributes with independent rim, depth and placement choices.
type alias DisplayProps A recessed display with a separate gasket and screen face.
type alias ScreenHeaderProps Props accepted by ScreenHeader.
type alias ScreenCellProps Props accepted by ScreenCell.
constant Surface A themeable frame around a surface. No padding or interaction ownership.
constant Screen Display face using theme surfaces while preserving the inherited text font.
constant Display Theme-owned recessed screen with a gasket and optional compact fill geometry.
constant ScreenHeader A screen’s title bar, printed on the glass above a hairline.
constant ScreenCells An instrument’s cells: a grid of hairline-ruled cells that reflows to one column when narrow. Put ScreenCells straight inside a Screen or Display.
constant ScreenCell One instrument cell: a legend, an optional corner readout and its content.

SurfacePropstype alias

Section titled “SurfaceProps”
Signature
type SurfaceProps = HTMLAttributes<HTMLDivElement> & object;

Native surface attributes with independent rim, depth and placement choices.

Type Declaration

Section titled “Type Declaration”
Name Type Description
size? "sm" | "md" | "lg" Rim scale, independent of the content’s dimensions.
depth? "shallow" | "deep" -
placement? "standalone" | "embedded" Embedded surfaces borrow their parent’s casing; omit the exterior surround.

DisplayPropstype alias

Section titled “DisplayProps”
Signature
type DisplayProps = SurfaceProps & object;

A recessed display with a separate gasket and screen face.

Type Declaration

Section titled “Type Declaration”
Name Type Description
fit? "content" | "fill" Fill a flex region rather than sizing to its content.
density? "normal" | "compact" Reduce the gasket footprint for compact displays.

ScreenHeaderPropstype alias

Section titled “ScreenHeaderProps”
Signature
type ScreenHeaderProps = object &
  Omit<HTMLAttributes<HTMLElement>, "title" | "children">;

Props accepted by ScreenHeader.

Type Declaration

Section titled “Type Declaration”
Name Type Description
icon? ReactNode A decorative Sigil or App icon before the title.
title ReactNode -
status? ReactNode A Status or short readout opposite the title.

ScreenCellPropstype alias

Section titled “ScreenCellProps”
Signature
type ScreenCellProps = object & HTMLAttributes<HTMLDivElement>;

Props accepted by ScreenCell.

Type Declaration

Section titled “Type Declaration”
Name Type Description
appearance? "default" | "compact" Compact rows put their subject icon and legend before the controls.
icon? ReactNode A leading subject icon.
legend? ReactNode The cell’s tiny mono legend, such as “Processes”.
readout? ReactNode A short value readout in the cell’s corner, such as “2/4 ON”.
wide? boolean Span the full row instead of one column.

Surfaceconstant

Section titled “Surface”
Signature
const Surface: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & object & RefAttributes<HTMLDivElement>
>;

A themeable frame around a surface. No padding or interaction ownership.

Screenconstant

Section titled “Screen”
Signature
const Screen: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

Display face using theme surfaces while preserving the inherited text font.

Displayconstant

Section titled “Display”
Signature
const Display: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> &
    object &
    object &
    RefAttributes<HTMLDivElement>
>;

Theme-owned recessed screen with a gasket and optional compact fill geometry.

ScreenHeaderconstant

Section titled “ScreenHeader”
Signature
const ScreenHeader: ForwardRefExoticComponent<
  object &
    Omit<HTMLAttributes<HTMLElement>, "title" | "children"> &
    RefAttributes<HTMLElement>
>;

A screen’s title bar, printed on the glass above a hairline.

ScreenCellsconstant

Section titled “ScreenCells”
Signature
const ScreenCells: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & object & RefAttributes<HTMLDivElement>
>;

An instrument’s cells: a grid of hairline-ruled cells that reflows to one column when narrow. Put ScreenCells straight inside a Screen or Display.

ScreenCellconstant

Section titled “ScreenCell”
Signature
const ScreenCell: ForwardRefExoticComponent<
  object & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

One instrument cell: a legend, an optional corner readout and its content.