// Vertical stack
Column(
  Text("Item 1"),
  Text("Item 2"),
  Text("Item 3")
).gap(10)

// Horizontal row
Row(
  Text("Left"),
  Text("Center"), 
  Text("Right")
).justifyContent("space-between")

// Centered content
Column(content)
  .justifyContent("center")
  .alignItems("center")
  .minHeight(400)

// Flexible card
Column(content)
  .flex(1)
  .minWidth(250)
  .maxWidth(400)
  .padding(20)

// Auto-sizing image
Photo("image.jpg")
  .maxWidth("100%")
  .preserveAspectRatio(true)
  .scaleType("contain")

// Heading
Text("Main Title").size(32).weight("bold").color("black")

// Subheading  
Text("Subtitle").size(20).weight("600").color("gray")

// Body text
Text("Body content").size(16).lineHeight(1.5).color("black")

// Caption
Text("Small text").size(12).color("gray")

Text(
  "Welcome to ",
  Span("Sone").color("blue").weight("bold"),
  " - the layout engine for JavaScript!"
).size(16).align("center")

Column(content)
  .padding(25)
  .bg("white")
  .rounded(12)
  .shadow("0 4px 12px rgba(0,0,0,0.1)")
  .borderWidth(1)
  .borderColor("#e5e7eb")

Text("Click Me")
  .size(16)
  .weight("600")
  .color("white")
  .padding(12, 24)
  .bg("linear-gradient(135deg, #667eea, #764ba2)")
  .rounded(8)
  .shadow("0 2px 4px rgba(102, 126, 234, 0.3)")

Column(content)
  .bg("linear-gradient(135deg, #667eea 0%, #764ba2 100%)")
  .color("white")
  .padding(40)

Row(
  Photo("logo.png").size(40),
  Text("Company Name").size(24).weight("bold")
)
.alignItems("center")
.gap(15)
.padding(20)

Column(
  Photo("avatar.jpg").size(80).rounded(40),
  Text("John Doe").size(20).weight("bold"),
  Text("Developer").size(14).color("gray")
)
.alignItems("center")
.padding(25)
.bg("white")
.rounded(15)
.shadow("0 4px 8px rgba(0,0,0,0.1)")

Table(
  TableRow(
    TableCell(Text("Name").weight("bold")),
    TableCell(Text("Value").weight("bold"))
  ).bg("#f5f5f5"),
  
  TableRow(
    TableCell(Text("Item 1")),
    TableCell(Text("$100"))
  )
)
.borderWidth(1)
.borderColor("#ddd")

import { sone, Column, Text } from "sone";

const document = Column(
  Text("Hello World").size(24)
).padding(40).bg("white");

// Export as image
const jpegBuffer = await sone(document).jpg();
const pngBuffer = await sone(document).png();

// Save to file
import fs from "node:fs/promises";
await fs.writeFile("output.jpg", jpegBuffer);

const invoice = Column(
  Text("INVOICE").size(32).weight("bold"),
  // ... invoice content
).padding(40).bg("white");

const pdfBuffer = await sone(invoice).pdf();
await fs.writeFile("invoice.pdf", pdfBuffer);

import { Font } from "sone";

// Load font
await Font.load("CustomFont", "./fonts/custom.ttf");

// Use font
Text("Styled text")
  .font("CustomFont", "Arial", "sans-serif")
  .size(18)

if (!Font.has("CustomFont")) {
  await Font.load("CustomFont", "./fonts/custom.ttf");
}

// Solid colors
.color("black")
.color("#333333")
.color("rgb(255, 0, 0)")
.color("hsl(200, 50%, 50%)")

// Gradients
.bg("linear-gradient(45deg, red, blue)")
.bg("linear-gradient(to right, #667eea, #764ba2)")

// Transparency
.color("rgba(0, 0, 0, 0.5)")
.opacity(0.8)

// Add tags for debugging
Column(content)
  .tag("main-container")
  .padding(20)

// Enable debug mode
const result = await sone(document, {
  debug: {
    layout: true,
    text: true
  }
}).canvas();