Window

TS

import { … } from "@fungi.computer/caps/components/window";

Hero

TSX

import {
  WindowActions,
  WindowBody,
  WindowFrame,
  WindowHeader,
} from "@fungi.computer/caps/components/window";

export default function Hero() {
  return (
    <WindowFrame active className="h-48 w-80">
      <WindowHeader
        title="Foraging log"
        actions={
          <WindowActions title="Foraging log" onClose={() => undefined} />
        }
      />
      <WindowBody className="p-md text-sm">
        Three chanterelle patches logged this week.
      </WindowBody>
    </WindowFrame>
  );
}

Floating and tiled

TSX

import {
  WindowBody,
  WindowFrame,
  WindowHeader,
} from "@fungi.computer/caps/components/window";

export default function FloatingAndTiled() {
  return (
    <div className="flex flex-wrap gap-md">
      <WindowFrame active className="h-36 w-56">
        <WindowHeader title="Tiled" density="compact" />
        <WindowBody className="p-sm text-sm">Snapped to the grid.</WindowBody>
      </WindowFrame>
      <WindowFrame floating fitContent className="w-48">
        <WindowHeader title="Floating" density="compact" />
        <WindowBody className="p-sm text-sm">Drifts above the rest.</WindowBody>
      </WindowFrame>
    </div>
  );
}

Actions

TSX

import {
  WindowActions,
  WindowBody,
  WindowFrame,
  WindowHeader,
} from "@fungi.computer/caps/components/window";
import { useState } from "react";

export default function Actions() {
  const [floating, setFloating] = useState(false);
  const [note, setNote] = useState("Open");
  return (
    <WindowFrame active floating={floating} className="h-48 w-80">
      <WindowHeader
        title="Patch map"
        subtitle={note}
        actions={
          <WindowActions
            title="Patch map"
            floating={floating}
            onToggleFloating={() => {
              setFloating((value) => !value);
            }}
            onMinimize={() => {
              setNote("Minimized");
            }}
            onClose={() => {
              setNote("Closed");
            }}
          />
        }
      />
      <WindowBody className="p-md text-sm">
        Float or tile it, then minimize or close to see the subtitle change.
      </WindowBody>
    </WindowFrame>
  );
}

Props

WindowFrameProps

Prop	Type	Description
active?	boolean
floating?	boolean
fitContent?	boolean	Shrink a floating panel to its contents, up to the host's max-height.

• active?boolean
• floating?boolean
• fitContent?boolean

  Shrink a floating panel to its contents, up to the host's max-height.

WindowHeaderProps

Prop	Type	Description
title	string
subtitle?	string	Where the content is now, shown after the title and truncated first.
icon?	ReactNode
actions?	ReactNode
back?	WindowBackAction	Present only while there is somewhere to go back to.
crumbs?	readonly WindowCrumb[]	The content's path, shown in place of the title and subtitle. The last crumb is the current place; earlier ones are links, and a crumb with siblings is a switcher.
onCrumb()?	(crumbId, siblingId?) => void	Selected crumb, or the sibling chosen from a switcher crumb.
status?	readonly WindowStatus[]	Quiet facts about the view, such as "Valid" or "Saved", with beads.
primary?	readonly WindowCommand[]	The view's own commands, as buttons before the window controls.
menu?	readonly WindowCommand[]	Less common commands, behind a ⋯ menu.
onAction()?	(id) => void	A primary or menu command the person used, by its id.
popover?	HTMLElement | null	Where header menus open; the host's popover layer.
density?	"regular" | "compact"	compact is a slim bar for tiled layouts; touch targets keep 44px.
handleProps?	Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type">

• titlestring
• subtitle?string

  Where the content is now, shown after the title and truncated first.

• icon?ReactNode
• actions?ReactNode
• back?WindowBackAction

  Present only while there is somewhere to go back to.

• crumbs?readonly WindowCrumb[]

  The content's path, shown in place of the title and subtitle. The last crumb is the current place; earlier ones are links, and a crumb with siblings is a switcher.

• onCrumb()?(crumbId, siblingId?) => void

  Selected crumb, or the sibling chosen from a switcher crumb.

• status?readonly WindowStatus[]

  Quiet facts about the view, such as "Valid" or "Saved", with beads.

• primary?readonly WindowCommand[]

  The view's own commands, as buttons before the window controls.

• menu?readonly WindowCommand[]

  Less common commands, behind a ⋯ menu.

• onAction()?(id) => void

  A primary or menu command the person used, by its id.

• popover?HTMLElement | null

  Where header menus open; the host's popover layer.

• density?"regular" | "compact"

  compact is a slim bar for tiled layouts; touch targets keep 44px.

• handleProps?Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type">

Full types: API reference.