Layout Components

Layout components control the arrangement and grouping of other components. They do not render visible content themselves — they organize space.

Box

A generic container element. Renders as a div with full style support.

Props

Prop	Type	Required	Description
style	VisionStyle	No	CSS style object (subset of CSS properties)
children	ReactNode	No	Child components

Example

import { Box, Text } from "@zaflun/lumio-sdk";

function Card() {
  return (
    <Box
      style={{
        background: "rgba(0, 0, 0, 0.7)",
        borderRadius: 8,
        padding: 16,
        position: "absolute",
        top: 20,
        right: 20,
      }}
    >
      <Text content="Score: 3 - 1" variant="heading" />
    </Box>
  );
}

---

VStack

A vertical stack layout. Children are arranged from top to bottom with optional spacing.

Props

Prop	Type	Required	Description
gap	number	No	Spacing between children in pixels (default: 8)
align	"start" | "center" | "end" | "stretch"	No	Cross-axis alignment (default: "stretch")
style	VisionStyle	No	Additional style
children	ReactNode	No	Child components

Example

import { VStack, Text, Button } from "@zaflun/lumio-sdk";

function ButtonGroup() {
  return (
    <VStack gap={12} align="stretch">
      <Button label="Yes" onClick={() => {}} />
      <Button label="No" onClick={() => {}} />
      <Button label="Maybe" onClick={() => {}} />
    </VStack>
  );
}

---

HStack

A horizontal stack layout. Children are arranged from left to right.

Props

Prop	Type	Required	Description
gap	number	No	Spacing between children in pixels (default: 8)
align	"start" | "center" | "end" | "baseline"	No	Cross-axis alignment (default: "center")
justify	"start" | "center" | "end" | "between" | "around"	No	Main-axis justification
style	VisionStyle	No	Additional style
children	ReactNode	No	Child components

Example

import { HStack, Text, Image } from "@zaflun/lumio-sdk";

function ProfileRow() {
  return (
    <HStack gap={12} align="center">
      <Image src="https://example.com/avatar.png" alt="Avatar" style={{ width: 40, height: 40, borderRadius: "50%" }} />
      <Text content="StreamerName" variant="default" />
    </HStack>
  );
}

---

CompactView

A titled section container for the editor panel. Renders a heading and a bordered card with padding. The standard layout building block for editor surfaces.

Props

Prop	Type	Required	Description
title	string	Yes	Section heading text
children	ReactNode	No	Content inside the section
style	VisionStyle	No	Additional style for the card container

Example

import { CompactView, Toggle, TextField, useExtensionStorage } from "@zaflun/lumio-sdk";

function Settings() {
  const [storage, setStorage] = useExtensionStorage();

  return (
    <CompactView title="Display settings">
      <Toggle
        label="Show overlay"
        checked={storage.visible ?? true}
        onChange={(checked) => setStorage({ ...storage, visible: checked })}
      />
      <TextField
        label="Custom message"
        value={storage.message ?? ""}
        onChange={(value) => setStorage({ ...storage, message: value })}
      />
    </CompactView>
  );
}

---

List

A vertical list of items with consistent spacing and optional action buttons per item.

Props

Prop	Type	Required	Description
items	ListItem[]	Yes	Array of list items
emptyText	string	No	Text to show when items is empty (default: "No items")
style	VisionStyle	No	Additional style

ListItem shape

interface ListItem {
  id: string;
  label: string;
  sublabel?: string;
  action?: ReactNode;  // typically a Button
}

Example

import { List, Button, useQuery, useMutation } from "@zaflun/lumio-sdk";

function RuleList() {
  const { data: rules = [] } = useQuery("getRules");
  const { mutate: deleteRule } = useMutation("deleteRule");

  return (
    <List
      emptyText="No rules yet. Add one above."
      items={rules.map((rule) => ({
        id: rule.id,
        label: rule.text,
        sublabel: rule.revealed ? "Revealed" : "Hidden",
        action: (
          <Button
            label="Delete"
            variant="destructive"
            onClick={() => deleteRule({ id: rule.id })}
          />
        ),
      }))}
    />
  );
}