// ══════════════════════════════════════════════════════════════════════
// KERN v2.0.0 — Common Patterns (for LLMs)
//
// Copy-paste ready patterns for generating KERN.
// Each pattern is a complete, working snippet.
// ══════════════════════════════════════════════════════════════════════

// ── PATTERN 1: Landing Page ─────────────────────────────────────────
// Dark hero with CTA buttons, feature grid, footer

page name=LandingPage {bg:#09090b}
  metadata title="Product Name" description="Product description"

  row {jc:sb,ai:center,p:16}
    text value="Brand" tag=h1 {fs:24,fw:900,c:#fff}
    row {gap:16,ai:center}
      link to=/docs
        text value="Docs" {fs:14,c:#a1a1aa}
      button text="Get Started" to=signup {bg:#f97316,c:#fff,br:8,p:12}

  col {ai:center,p:80,gap:24}
    text value="Main Headline" tag=h1 {fs:48,fw:800,c:#fff,ta:center}
    text value="Supporting description text." tag=p {fs:18,c:#a1a1aa,ta:center}
    row {gap:16}
      button text="Primary CTA" to=signup {bg:#f97316,c:#fff,br:8,p:16}
      button text="Secondary CTA" onClick=demo {bg:transparent,c:#fff,br:8,p:16,border:#3f3f46}

  grid cols=3 gap=32 {p:32}
    card {bg:#18181b,br:16,p:24,border:#27272a}
      text value="Feature 1" tag=h3 {fs:18,fw:600,c:#fff,mb:8}
      text value="Feature description." tag=p {fs:14,c:#a1a1aa}
    card {bg:#18181b,br:16,p:24,border:#27272a}
      text value="Feature 2" tag=h3 {fs:18,fw:600,c:#fff,mb:8}
      text value="Feature description." tag=p {fs:14,c:#a1a1aa}
    card {bg:#18181b,br:16,p:24,border:#27272a}
      text value="Feature 3" tag=h3 {fs:18,fw:600,c:#fff,mb:8}
      text value="Feature description." tag=p {fs:14,c:#a1a1aa}

// ── PATTERN 2: Docs Layout ──────────────────────────────────────────
// Root layout with sidebar navigation and content area

layout route="/docs" {bg:#09090b}
  metadata title="Documentation"

// ── PATTERN 3: Docs Page with Sections ──────────────────────────────
// Content page with anchored sections and code examples

page name=SyntaxPage route="/docs/syntax" {bg:#09090b}
  metadata title="Syntax Reference"

  section id=basics
    text value="Basics" tag=h2 {fs:32,fw:700,c:#fff,mb:16}
    text value="KERN uses indent-based nesting with key=value props." tag=p {fs:16,c:#a1a1aa,mb:16}
    codeblock lang=kern value="page name=Hello  text value=World tag=h1"

  section id=styles
    text value="Styles" tag=h2 {fs:32,fw:700,c:#fff,mb:16}
    text value="Style blocks use shorthand keys in curly braces." tag=p {fs:16,c:#a1a1aa,mb:16}
    codeblock lang=kern value="text value=Hello {fs:24,fw:bold,c:#fff,bg:#18181b,p:16,br:8}"

// ── PATTERN 4: Async Data Page ──────────────────────────────────────
// Server component with fetch, notFound guard, metadata

page name=ProjectPage async=true route="/projects" segment="[slug]" {bg:#09090b}
  metadata title="Project"
  generateMetadata
    handler code="const { slug } = await params; return { title: slug };"
  fetch name=project url=https://api.example.com/projects
  notFound if={{ !project }}
  col {p:32,gap:16}
    text bind=project.name tag=h1 {fs:36,fw:800,c:#fff}
    text bind=project.description tag=p {fs:16,c:#a1a1aa}

// ── PATTERN 5: Client Interactive Page ──────────────────────────────
// Client component with state and event handlers

page name=SettingsPage client=true route="/settings" {bg:#09090b}
  metadata title="Settings"
  col {p:32,gap:24}
    text value="Settings" tag=h1 {fs:36,fw:800,c:#fff}
    card {bg:#18181b,br:12,p:24,border:#27272a}
      row {jc:sb,ai:center}
        text value="Dark Mode" tag=label {fs:16,c:#fff}
        toggle bind=darkMode
      row {jc:sb,ai:center,mt:16}
        text value="Volume" tag=label {fs:16,c:#fff}
        slider bind=volume min=0 max=100

// ── PATTERN 6: API Server ───────────────────────────────────────────
// Express backend with CRUD routes

server name=API port=3000
  middleware name=cors
  middleware name=json
  middleware name=auth handler=verifyToken

  route method=get path=/api/items
    handler <<<
      const items = await db.items.findAll();
      res.json(items);
    >>>

  route method=post path=/api/items
    schema body="{name: string, category: string}"
    handler <<<
      const item = await db.items.create(req.body);
      res.status(201).json(item);
    >>>

  route method=get path=/api/items/:id
    handler <<<
      const item = await db.items.findById(req.params.id);
      if (!item) return res.status(404).json({ error: 'Not found' });
      res.json(item);
    >>>

  route method=delete path=/api/items/:id
    handler <<<
      await db.items.delete(req.params.id);
      res.status(204).send();
    >>>

// ── PATTERN 7: CLI Application ──────────────────────────────────────
// Commander.js CLI with commands, args, and flags

cli name=mytool version=1.0.0 description="My CLI tool"
  flag name=verbose alias=v type=boolean description="Verbose output"

  command name=init description="Initialize project"
    arg name=name type=string required=true description="Project name"
    flag name=template type=string default="default" description="Template name"
    handler <<<
      console.log('Initializing', name, 'with template', opts.template);
    >>>

  command name=build description="Build project"
    flag name=watch alias=w type=boolean description="Watch mode"
    handler <<<
      await buildProject({ watch: opts.watch });
    >>>

// ── PATTERN 8: State Machine ────────────────────────────────────────
// Typed state machine with transitions

machine name=AuthFlow initial=loggedOut
  transition from=loggedOut to=authenticating event=login
  transition from=authenticating to=loggedIn event=success
  transition from=authenticating to=loggedOut event=failure
  transition from=loggedIn to=loggedOut event=logout

// Generates: enum AuthFlowState, type guards, transition()

// ── PATTERN 9: Type System ──────────────────────────────────────────
// TypeScript types and interfaces

type name=User
  field name=id type=string
  field name=email type=string
  field name=name type=string
  field name=role type="admin|editor|viewer"
  field name=createdAt type=Date

interface name=UserService
  fn name=getUser params="id:string" returns=Promise<User>
  fn name=createUser params="data:Omit<User,'id'|'createdAt'>" returns=Promise<User>
  fn name=deleteUser params="id:string" returns=Promise<void>

// ── PATTERN 10: Dashboard (React Native) ────────────────────────────
// Mobile dashboard with progress bars and navigation

screen name=Dashboard {bg:#F8F9FA}
  row {p:16,jc:sb,ai:center}
    text value="Dashboard" {fs:24,fw:bold}
    image src=avatar {w:40,h:40,br:20}
  card {p:16,br:12,bg:#FFF,m:16}
    progress label=Revenue current=840 target=1000 unit=k color=#4ECDC4
    progress label=Users current=7200 target=10000 unit="" color=#FF6B6B
  tabs active=Dashboard
    tab icon=home label=Dashboard
    tab icon=chart label=Analytics
    tab icon=gear label=Settings

// ── PATTERN 11: Terminal UI ─────────────────────────────────────────
// ANSI terminal interface with scoreboard

screen name=TerminalApp
  gradient text="MY TOOL" colors=[208,214,220]
  box color=214
    text value="Tool description here" {fw:bold}
  separator width=48
  spinner message="Processing..." color=214
  scoreboard title="Results"
    metric name=Score values=["95","87","72"]
    metric name=Time values=["2.1s","3.4s","5.7s"]

// ══════════════════════════════════════════════════════════════════════
// These patterns cover the most common KERN use cases.
// Combine them freely. Every pattern compiles to production code.
// See /llm/nodes.kern for the full node reference.
// ══════════════════════════════════════════════════════════════════════