Tetris UI docs

1import { Block, TetrisProvider } from "@stack_layout/tetris-ui";
2
3export function PriorityBoard() {
4  return (
5    <TetrisProvider viewport="desktop" stretch gap={16}>
6      <Block title="Revenue"   priority={95} size="enlarge" showPriority accent="#0F766E" accentPlacement="left" />
7      <Block title="Banner"    priority={88} size="full"    showPriority accent="#0369A1" />
8      <Block title="Team feed" priority={70} size="md"      showPriority accent="#334155" />
9      <Block title="Weather"   priority={25} size="sm"      showPriority accent="none" />
10    </TetrisProvider>
11  );
12}

1// size → preferred column span (height fits content)
2size = "sm";      // 2 cols  — chip, weather, badge cluster
3size = "md";      // 3 cols  — default card
4size = "lg";      // 4 cols  — rich panel
5size = "enlarge"; // 6 cols  — hero metric / chart
6size = "full";    // 12 cols — banner across the track
7size = "auto";    // fills leftover columns (even split when several are auto)
8
9// Height bounds are optional
10<Block minHeight={160} maxHeight={320} scroll>…</Block>
11
12// Fill the row: fixed + flexible
13<Block size="sm" />
14<Block size="md" />
15<Block size="auto" /> // takes remaining cols on the track
16
17// Conceptual packer input
18const preferred = { cols: 4, rows: 1 };
19const min = { cols: 2, rows: 1 };
20const max = { cols: 6, rows: 1 };

1function resolveSize(preferred, min, max, columns) {
2  const cols = Math.min(
3    columns,
4    Math.max(min.cols, Math.min(preferred.cols, max.cols)),
5  );
6  const rows = Math.max(min.rows, Math.min(preferred.rows, max.rows));
7  return { cols, rows };
8}
9
10// Example: enlarge on mobile (4 cols)
11// preferred 6 cols → clamped to 4 cols (fits the track, respects min)

1import { Block, TetrisProvider } from "@stack_layout/tetris-ui";
2
3export function FootprintDemo() {
4  return (
5    <TetrisProvider viewport="desktop">
6      <Block title="Hero metric" priority={94} size="enlarge" accent="#0F766E" accentPlacement="left" />
7      <Block title="Side note"   priority={40} size="sm"      accent="#64748B" />
8      <Block title="Full banner" priority={80} size="full"    accent="#1D4E4A" accentPlacement="bottom" />
9    </TetrisProvider>
10  );
11}

1import { Block, ShapeFrame } from "@stack_layout/tetris-ui";
2
3// Shape as meaning on packed modules
4<Block shape="O" size="enlarge" priority={95} title="Revenue" />
5<Block shape="I" size="full"    priority={88} title="Onboarding" />
6<Block shape="L" size="md"      priority={70} title="Activity" />
7
8// Literal tetromino — stack cards on mobile, carousel on tablet
9<ShapeFrame
10  shape="T"
11  layout="silhouette"
12  layoutAt={{ mobile: "stack", tablet: "carousel" }}
13  size="md"
14  voids="invisible"
15>
16  <NavItem />
17  <NavItem />
18  <NavItem />
19  <FeaturePanel />
20</ShapeFrame>

1import { Tile, TetrisProvider } from "@stack_layout/tetris-ui";
2import "@stack_layout/tetris-ui/styles.css";
3
4<TetrisProvider viewport="desktop" gap={16} stretch>
5  <Tile title="Patients" size="auto" priority={96} glass="frosted" accent={"#0F766E"} accentPlacement="top">
6    {/* KPI + sparkline */}
7  </Tile>
8  <Tile title="Occupancy" size="auto" priority={95} glass="frosted" accent={"#0369A1"} accentPlacement="left" />
9  <Tile title="Revenue" size="auto" priority={94} glass="frosted" accent={"#7C3AED"} accentPlacement="all" />
10  <Tile title="Admissions pulse" size="enlarge" priority={88} glass="frosted" accent={"#0F766E"}>
11    {/* chart */}
12  </Tile>
13  <Tile title="Activity" size="auto" priority={87} accent={"#B45309"} accentPlacement="left">
14    {/* feed list */}
15  </Tile>
16  <Tile title="On duty" size="md" priority={80}>{/* avatars */}</Tile>
17  <Tile title="East Wing" size="auto" priority={78}>{/* image card */}</Tile>
18  <Tile title="Open tasks" size="auto" priority={76}>{/* checklist */}</Tile>
19</TetrisProvider>