[beforeContent] [children] [afterContent]

import { Element } from '@pyreon/elements'
import { h } from '@pyreon/core'

// Simplest usage -- renders a div with inline-flex
<Element>Hello world</Element>

// With a custom tag
<Element tag="button">Click me</Element>

// Block-level element
<Element block={true}>Full width</Element>

// Three-slot layout
<Element
  tag="button"
  beforeContent={<img src="/icon.svg" alt="" />}
  afterContent={<span class="badge">3</span>}
  gap={8}
>Messages</Element>

<button style="display: inline-flex; flex-direction: row; align-items: center; gap: 8px;">
  <span style="flex-shrink: 0;">
    <img src="/icon.svg" alt="" />
  </span>
  <span style="flex: 1; min-width: 0;"> Messages </span>
  <span style="flex-shrink: 0;">
    <span class="badge">3</span>
  </span>
</button>

// No slots -- renders directly without span wrappers
<Element tag="section" block={true}>Just content</Element>

// Renders: <section style="display: flex; ...">Just content</section>

// Icon + label + badge, vertically centered
<Element
  tag="button"
  beforeContent={<img src="/mail.svg" alt="" />}
  afterContent={<span class="badge">12</span>}
  gap={8}
  class="nav-item"
>Inbox</Element>

// Stacked card content
<Element
  direction="rows"
  alignX="center"
  gap={16}
  block={true}
  class="card"
>
  <img src="/photo.jpg" alt="Photo" />
  <h3>Card Title</h3>
  <p>Card description text goes here.</p>
</Element>

// Header with balanced left/center/right
<Element
  tag="header"
  beforeContent={<button>Back</button>}
  afterContent={<button>Save</button>}
  equalCols={true}
  block={true}
  class="app-header"
><h1>Page Title</h1></Element>

// String styles are appended
<Element
  style="color: red; font-weight: bold;"
  gap={8}
>Red bold text</Element>

// Object styles are merged (override computed values if keys conflict)
<Element
  style={{ color: 'blue', 'font-size': '14px' }}
  block={true}
>Blue text</Element>

function IconButton(props: { icon: string; label: string; onClick: () => void }) {
  return (
    <Element
      tag="button"
      beforeContent={<img src={props.icon} alt="" />}
      gap={8}
      onClick={props.onClick}
      class="icon-btn"
    >{props.label}</Element>
  )
}

function NavItem(props: { icon: VNodeChild; label: string; badge?: number; active?: boolean }) {
  return (
    <Element
      tag="a"
      href="#"
      beforeContent={props.icon}
      afterContent={props.badge ? <span class="badge">{String(props.badge)}</span> : undefined}
      gap={12}
      block={true}
      class={props.active ? 'nav-item active' : 'nav-item'}
    >{props.label}</Element>
  )
}

function Card(props: { title: string; description: string; image?: string; actions?: VNodeChild }) {
  return (
    <Element
      direction="rows"
      gap={16}
      block={true}
      class="card"
      style={{ padding: '16px', 'border-radius': '8px', border: '1px solid #e0e0e0' }}
    >
      {props.image ? <img src={props.image} style="width: 100%; border-radius: 4px;" /> : null}
      <h3 style="margin: 0;">{props.title}</h3>
      <p style="margin: 0; color: #666;">{props.description}</p>
      {props.actions
        ? <Element alignX="right" block={true} gap={8}>{props.actions}</Element>
        : null}
    </Element>
  )
}

<Element
  direction="rows"
  alignX="center"
  alignY="center"
  block={true}
  gap={24}
  style={{ 'min-height': '400px', 'text-align': 'center' }}
>
  <h1>Welcome</h1>
  <p>Get started by reading the documentation.</p>
  <button>Get Started</button>
</Element>

// Accessible button with loading state
<Element
  tag="button"
  role="button"
  aria-busy={isLoading() ? 'true' : 'false'}
  aria-disabled={isDisabled() ? 'true' : 'false'}
  disabled={isDisabled()}
  beforeContent={isLoading() ? <span class="spinner" /> : null}
  gap={8}
>{isLoading() ? "Loading..." : "Submit"}</Element>

// Accessible navigation
<Element
  tag="nav"
  aria-label="Main navigation"
  direction="rows"
  gap={4}
  block={true}
>{...navItems}</Element>

import { Text } from '@pyreon/elements'
import { h } from '@pyreon/core'

// Inline text (renders <span>)
<Text>Hello world</Text>

// Paragraph text (renders <p>)
<Text paragraph={true}>A paragraph of text.</Text>

// Custom heading tag
<Text tag="h1" class="title">Page Heading</Text>

// Using the label prop
<Text label="Fallback text" />

// Children take priority over label
<Text label="Ignored">This is shown instead</Text>

// children wins
<Text label="Ignored">Shown</Text>  // renders: "Shown"

// label as fallback
<Text label="Shown" />  // renders: "Shown"

// neither -- renders empty
<Text />  // renders: <span></span>

<Text tag="h2">Heading</Text>           // <h2>
<Text tag="label" paragraph={true} />   // <label> (tag overrides paragraph)
<Text paragraph={true}>Paragraph</Text>    // <p>
<Text>Inline</Text>                       // <span>

function Heading(props: { level?: 1 | 2 | 3 | 4 | 5 | 6; children: VNodeChild }) {
  return (
    <Text
      tag={`h${props.level ?? 1}`}
      class={`heading-${props.level ?? 1}`}
    >{props.children}</Text>
  )
}

function Caption(props: { children: VNodeChild }) {
  return (
    <Text
      tag="small"
      class="caption"
      style="color: #999; font-size: 12px;"
    >{props.children}</Text>
  )
}

function Label(props: { for: string; children: VNodeChild }) {
  return (
    <Text
      tag="label"
      // passes through arbitrary HTML attributes
      {...{ for: props.for }}
      class="form-label"
    >{props.children}</Text>
  )
}

function UserName(props: { user: { displayName: string } }) {
  return (
    <Text
      label={props.user.displayName}
      class="username"
      data-testid="username"
    />
  )
}

// Screen-reader only text
<Text
  class="sr-only"
  style="position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);"
>Skip to main content</Text>

// Text with ARIA role
<Text
  tag="span"
  role="status"
  aria-live="polite"
  class="status-text"
>{() => statusMessage()}</Text>

import { List } from '@pyreon/elements'
import { h } from '@pyreon/core'

const items = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' },
]

// With a wrapper element
<List
  data={items}
  tag="ul"
  class="user-list"
>{(item, { index, first, last, odd, even }) =>
  <li
    key={item.id}
    class={even ? 'bg-gray' : ''}
  >{item.name}</li>
}</List>

// Without a wrapper (renders as Fragment)
<List
  data={items}
>{(item) =>
  <div key={item.id} class="card">{item.name}</div>
}</List>

// ✓ primitive array — `valueName` allowed
<Iterator data={[1, 2, 3]}>{(n) => <li>{n}</li>}</Iterator>

// ✓ object array — `children` is the render fn (no `valueName`)
<Iterator data={[{ id: 1 }, { id: 2 }]}>{(item) => <li>{item.id}</li>}</Iterator>

// ✗ TS error — mixed shape, neither branch matches
<Iterator data={[1, { id: 1 }, null]}>{(item) => <li />}</Iterator>

// With tag -- renders <ul><li>...</li><li>...</li></ul>
<List data={items} tag="ul">{(item) =>
  <li>{item.name}</li>
}</List>

// Without tag -- renders items as a flat Fragment
<List data={items}>{(item) =>
  <div>{item.name}</div>
}</List>

<List
  data={users}
>{(user) =>
  user.active
    ? <div key={user.id}>{user.name}</div>
    : null
}</List>

<List
  data={items}
  tag="div"
  class="item-list"
>{(item, { index, first, last, even }) =>
  <div
    key={item.id}
    class={[
      'item',
      even ? 'item-even' : 'item-odd',
      first ? 'item-first' : '',
      last ? 'item-last' : '',
    ].filter(Boolean).join(' ')}
    style={!last ? 'border-bottom: 1px solid #eee;' : ''}
  >
    <span class="item-index">{`${index + 1}.`}</span>
    <span class="item-name">{item.name}</span>
  </div>
}</List>

interface Category {
  id: number
  name: string
  items: { id: number; name: string }[]
}

<List
  data={categories}
  tag="div"
  class="categories"
>{(category) =>
  <div key={category.id} class="category">
    <h3>{category.name}</h3>
    <List
      data={category.items}
      tag="ul"
    >{(item) =>
      <li key={item.id}>{item.name}</li>
    }</List>
  </div>
}</List>

interface User {
  id: number
  name: string
  email: string
  avatar: string
  role: 'admin' | 'user'
}

function UserList(props: { users: User[] }) {
  return (
    <List
      data={props.users}
      tag="div"
      class="user-list"
      role="list"
    >{(user, { last }) =>
      <Element
        key={user.id}
        role="listitem"
        beforeContent={<img
          src={user.avatar}
          alt={`${user.name}'s avatar`}
          style="width: 40px; height: 40px; border-radius: 50%;"
        />}
        afterContent={<span
          class={`role-badge role-${user.role}`}
        >{user.role}</span>}
        gap={12}
        block={true}
        style={!last ? 'border-bottom: 1px solid #eee; padding: 12px 0;' : 'padding: 12px 0;'}
      >
        <div>
          <div class="user-name">{user.name}</div>
          <div class="user-email">{user.email}</div>
        </div>
      </Element>
    }</List>
  )
}

interface NavItem {
  id: string
  label: string
  href: string
  icon?: string
  badge?: number
}

function NavMenu(props: { items: NavItem[]; activeId: string }) {
  return (
    <List
      data={props.items}
      tag="nav"
      aria-label="Main navigation"
    >{(item) =>
      <Element
        tag="a"
        key={item.id}
        href={item.href}
        beforeContent={item.icon ? <img src={item.icon} alt="" /> : undefined}
        afterContent={item.badge
          ? <span class="nav-badge">{String(item.badge)}</span>
          : undefined}
        gap={8}
        block={true}
        class={item.id === props.activeId ? 'nav-link active' : 'nav-link'}
        aria-current={item.id === props.activeId ? 'page' : undefined}
      >{item.label}</Element>
    }</List>
  )
}

interface Product {
  id: number
  name: string
  price: number
  stock: number
}

function ProductTable(props: { products: Product[] }) {
  return (
    <table class="product-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
          <th>Stock</th>
        </tr>
      </thead>
      <List
        data={props.products}
        tag="tbody"
      >{(product, { even }) =>
        <tr
          key={product.id}
          class={even ? 'row-even' : 'row-odd'}
        >
          <td>{product.name}</td>
          <td>{`$${product.price.toFixed(2)}`}</td>
          <td>{String(product.stock)}</td>
        </tr>
      }</List>
    </table>
  )
}

function ItemList(props: { items: Item[] }) {
  if (props.items.length === 0) {
    return (
      <p>No items found.</p>
      <button>Add your first item</button>
    </div>
  )
}

return (
  <List
    data={props.items}
    tag="ul"
    class="item-list"
  >{(item) =>
    <li key={item.id}>{item.name}</li>
  }</List>
)
}

import { Overlay } from '@pyreon/elements'
import { h } from '@pyreon/core'

<Overlay
trigger={({ toggle, isOpen }) =>
  <button onClick={toggle}>
    {() => isOpen() ? 'Close' : 'Open'}
  </button>
}
content={({ close }) =>
  <div class="dropdown-menu">
    <button onClick={close}>Option A</button>
    <button onClick={close}>Option B</button>
  </div>
}
/>

function DropdownMenu(props: { label: string; items: { id: string; label: string; onClick: () => void }[] }) {
return (
  <Overlay
    trigger={({ toggle, isOpen }) =>
      <Element
        tag="button"
        onClick={toggle}
        afterContent={<span>{() => isOpen() ? '\u25B2' : '\u25BC'}</span>}
        gap={8}
        class="dropdown-trigger"
        aria-expanded={() => String(isOpen())}
        aria-haspopup="true"
      >{props.label}</Element>
    }
    content={({ close }) =>
      <div
        class="dropdown-panel"
        style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); padding: 4px 0; min-width: 160px; z-index: 100;"
        role="menu"
      >
        <List
          data={props.items}
        >{(item) =>
          <button
            key={item.id}
            onClick={() => { item.onClick(); close() }}
            class="dropdown-item"
            style="display: block; width: 100%; padding: 8px 16px; border: none; background: none; text-align: left; cursor: pointer;"
            role="menuitem"
          >{item.label}</button>
        }</List>
      </div>
    }
  />
)
}

function Tooltip(props: { text: string; children: VNodeChild }) {
return (
  <Overlay
    trigger={({ open, close }) =>
      <span
        onMouseenter={open}
        onMouseleave={close}
        onFocus={open}
        onBlur={close}
        tabindex={0}
      >{props.children}</span>
    }
    content={() =>
      <div
        class="tooltip"
        style="position: absolute; background: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 1000;"
        role="tooltip"
      >{props.text}</div>
    }
  />
)
}

// Usage
<Tooltip text="Click to edit">
<button>Edit</button>
</Tooltip>

function ConfirmDialog(props: {
triggerLabel: string
message: string
onConfirm: () => void
}) {
return (
  <Overlay
    trigger={({ open }) =>
      <button
        onClick={open}
        class="btn-danger"
      >{props.triggerLabel}</button>
    }
    content={({ close }) =>
      <Portal target={document.body}>
        <div
          class="dialog-backdrop"
          style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;"
          onClick={close}
        >
          <div
            class="dialog-content"
            style="background: white; padding: 24px; border-radius: 8px; max-width: 400px;"
            onClick={(e: Event) => e.stopPropagation()}
            role="dialog"
            aria-modal="true"
          >
            <p>{props.message}</p>
            <Element gap={8} alignX="right" block={true} style="margin-top: 16px;">
              <button onClick={close}>Cancel</button>
              <button
                onClick={() => { props.onConfirm(); close() }}
                class="btn-danger"
              >Confirm</button>
            </Element>
          </div>
        </div>
      </Portal>
    }
  />
)
}

function UserPopover(props: { user: { name: string; email: string; avatar: string } }) {
return (
  <Overlay
    trigger={({ toggle }) =>
      <button
        onClick={toggle}
        class="user-avatar-btn"
      >
        <img src={props.user.avatar} alt={props.user.name} style="width: 32px; height: 32px; border-radius: 50%;" />
      </button>
    }
    content={({ close }) =>
      <div
        class="user-popover"
        style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 8px; padding: 16px; min-width: 200px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"
      >
        <Element
          beforeContent={<img
            src={props.user.avatar}
            alt=""
            style="width: 48px; height: 48px; border-radius: 50%;"
          />}
          gap={12}
          block={true}
          style="margin-bottom: 12px;"
        >
          <div>
            <Text tag="div" class="font-bold">{props.user.name}</Text>
            <Text tag="div" class="text-gray">{props.user.email}</Text>
          </div>
        </Element>
        <hr style="margin: 8px 0; border: none; border-top: 1px solid #eee;" />
        <button onClick={close} class="popover-action">View Profile</button>
        <button onClick={close} class="popover-action">Sign Out</button>
      </div>
    }
  />
)
}

// These two overlays are completely independent
<div>
<Overlay
  trigger={({ toggle }) => <button onClick={toggle}>Menu 1</button>}
  content={() => <div>Content 1</div>}
/>
<Overlay
  trigger={({ toggle }) => <button onClick={toggle}>Menu 2</button>}
  content={() => <div>Content 2</div>}
/>

import { Portal } from '@pyreon/elements'
import { h } from '@pyreon/core'

// Render into document.body (default)
<Portal>
  <div class="modal">Modal content</div>
</Portal>

// Render into a specific container
const container = document.getElementById('portal-root')!
<Portal target={container}>
  <div class="toast">Notification</div>
</Portal>

function Modal(props: { isOpen: () => boolean; onClose: () => void; title: string; children: VNodeChild }) {
  return () => props.isOpen()
    ? <Portal target={document.body}>
        <div
          class="modal-backdrop"
          style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000;"
          onClick={props.onClose}
        >
          <div
            class="modal-content"
            style="background: white; border-radius: 8px; padding: 24px; max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto;"
            onClick={(e: Event) => e.stopPropagation()}
            role="dialog"
            aria-modal="true"
            aria-label={props.title}
          >
            <Element
              block={true}
              beforeContent={<h2 style="margin: 0;">{props.title}</h2>}
              afterContent={<button
                onClick={props.onClose}
                aria-label="Close dialog"
                style="background: none; border: none; font-size: 24px; cursor: pointer;"
              >{'\u00D7'}</button>}
              style="margin-bottom: 16px;"
            />
            {props.children}
          </div>
        </div>
      </Portal>
    : null
}

interface Toast {
  id: string
  message: string
  type: 'success' | 'error' | 'info'
}

function ToastContainer(props: { toasts: Toast[]; onDismiss: (id: string) => void }) {
  return (
    <Portal target={document.body}>
      <div
        class="toast-container"
        style="position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px;"
        aria-live="polite"
      >
        <List
          data={props.toasts}
        >{(toast) =>
          <Element
            key={toast.id}
            afterContent={<button
              onClick={() => props.onDismiss(toast.id)}
              style="background: none; border: none; cursor: pointer; font-size: 16px;"
              aria-label="Dismiss notification"
            >{'\u00D7'}</button>}
            gap={12}
            block={true}
            class={`toast toast-${toast.type}`}
            style="padding: 12px 16px; border-radius: 8px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.15); min-width: 300px;"
            role="alert"
          >{toast.message}</Element>
        }</List>
      </div>
    </Portal>
  )
}

function ContextMenu(props: {
  x: number
  y: number
  items: { label: string; onClick: () => void }[]
  onClose: () => void
}) {
  return (
    <Portal target={document.body}>
      <div
        class="context-backdrop"
        style="position: fixed; inset: 0; z-index: 999;"
        onClick={props.onClose}
      />
      <div
        class="context-menu"
        style={`position: fixed; left: ${props.x}px; top: ${props.y}px; z-index: 1000; background: white; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding: 4px 0; min-width: 160px;`}
        role="menu"
      >
        <List
          data={props.items}
        >{(item) =>
          <button
            onClick={() => { item.onClick(); props.onClose() }}
            class="context-menu-item"
            style="display: block; width: 100%; padding: 8px 16px; border: none; background: none; text-align: left; cursor: pointer;"
            role="menuitem"
          >{item.label}</button>
        }</List>
      </div>
    </Portal>
  )
}

function DropdownNav(props: {
  title: string
  links: { href: string; label: string; icon?: string }[]
}) {
  return (
    <Overlay
      trigger={({ toggle, isOpen }) =>
        <Element
          tag="button"
          onClick={toggle}
          afterContent={<span
            style={() => `transform: rotate(${isOpen() ? '180deg' : '0deg'}); transition: transform 0.2s;`}
          >{'\u25BC'}</span>}
          gap={8}
          aria-expanded={() => String(isOpen())}
        >{props.title}</Element>
      }
      content={({ close }) =>
        <div class="dropdown-panel" role="menu">
          <List
            data={props.links}
          >{(link) =>
            <Element
              tag="a"
              key={link.href}
              href={link.href}
              beforeContent={link.icon ? <img src={link.icon} alt="" /> : undefined}
              gap={8}
              block={true}
              onClick={close}
              class="dropdown-link"
              role="menuitem"
            >{link.label}</Element>
          }</List>
        </div>
      }
    />
  )
}

interface SettingGroup {
  title: string
  settings: { id: string; label: string; description: string; control: VNodeChild }[]
}

function SettingsPanel(props: { groups: SettingGroup[] }) {
  return (
    <Element
      direction="rows"
      gap={32}
      block={true}
      class="settings-panel"
    >
      <List data={props.groups}>{(group) =>
        <section key={group.title}>
          <Text tag="h2" class="settings-section-title">{group.title}</Text>
          <List
            data={group.settings}
            tag="div"
            class="settings-list"
          >{(setting, { last }) =>
            <Element
              key={setting.id}
              afterContent={setting.control}
              block={true}
              style={!last ? 'padding: 16px 0; border-bottom: 1px solid #eee;' : 'padding: 16px 0;'}
            >
              <div>
                <Text tag="div" class="setting-label">{setting.label}</Text>
                <Text tag="div" class="setting-desc">{setting.description}</Text>
              </div>
            </Element>
          }</List>
        </section>
      }</List>
    </Element>
  )
}