Wireframes

Wireframe widgets mock up a UI — windows, device frames (browser / phone / tablet), panels, inputs, controls — as diagram shapes. Each wf_* block extends SvgBlock, so it lives inside a diagram: place it with x / y (or anchors), connect widgets with edges, and mix them with any other shape. Container widgets nest other widgets, so you compose a window of panels of rows of controls. They're static SVG mockups, not interactive.

diagram {
  width = 300
  height = 200
  wf_window "Account settings" {
    wf_panel {
      title = "Profile"
      wf_input "Display name" {
        value = "Wil Taylor"
      }
      wf_input "Email" {
        value = "ai@wiltaylor.dev"
      }
    }
    wf_row {
      wf_button "Cancel"
      wf_button "Save" {
        icon = "lucide.check"
      }
    }
  }
}

§ 1Placing and connecting widgets

Because widgets are diagram shapes, place them by x / y and draw edges between them by id — just like connecting any two shapes. A widget is sized by its content, so you only position the top-left corner. Under an auto-layout diagram (layout = :layered / :force), omit x / y and let the solver flow them.

diagram {
  width = 360
  height = 170
  wf_button "Open settings" {
    id = launch
    x = 20.0
    y = 65.0
  }
  wf_window "Settings" {
    id = win
    x = 180.0
    y = 20.0
    wf_checkbox "Dark mode" {
      checked = true
    }
    wf_button "Close"
  }
  launch -> win
}

§ 2Containers

Every container takes @children(Widget) — drop any other widget inside, nested arbitrarily. The Rust renderer measures and lays the children out internally (their x / y are ignored; only the root widget's placement positions the whole group). Device frames have a realistic fixed default size; everything else is sized to its content.

§ 2.1wf_window

The outer desktop chrome: a titlebar (traffic-light controls, hidden by controls = false) over a body that hosts other widgets, stacked vertically.

diagram {
  width = 300
  height = 110
  wf_window "Settings" {
    wf_label "The window body stacks its children vertically."
  }
}

Child blocks

§ 2.2wf_browser

A web-browser frame: a toolbar with traffic-light dots and an address bar (the inline label is the URL) over a content area. Drop a wf_window or any controls inside to mock up a web app.

diagram {
  width = 480
  height = 260
  wf_browser "app.example.com/dashboard" {
    wf_panel {
      title = "Welcome back"
      wf_input "Search…"
      wf_row {
        wf_button "Open"
        wf_button "New" {
          icon = "lucide.check"
        }
      }
    }
  }
}

Child blocks

§ 2.3wf_phone

A phone shell — a bezel around a screen with a status bar (the inline label is an optional caption) and a home-indicator pill. Set orientation = :landscape to rotate it; the default is :portrait.

diagram {
  width = 320
  height = 480
  wf_phone "9:41" {
    wf_panel {
      title = "Account"
      wf_input "Email" {
        value = "ada@example.com"
      }
      wf_toggle "Notifications" {
        on = true
      }
    }
    wf_button "Sign in" {
      icon = "lucide.check"
    }
  }
}

Child blocks

§ 2.4wf_tablet

A tablet shell — the same chrome as wf_phone on a larger, squarer frame. Shown here in landscape:

diagram {
  width = 460
  height = 320
  wf_tablet {
    orientation = :landscape
    wf_row {
      wf_panel {
        title = "Library"
        wf_label "Recent"
        wf_label "Favourites"
      }
      wf_panel {
        title = "Reader"
        wf_label "Select an item to read."
      }
    }
  }
}

Child blocks

§ 2.5wf_panel

A bordered group with an optional title caption — box a set of related controls.

diagram {
  width = 220
  height = 120
  wf_panel {
    title = "Network"
    wf_toggle "Wi-Fi" {
      on = true
    }
    wf_toggle "Bluetooth"
  }
}

Child blocks

§ 2.6wf_row

Lay children out horizontally (a panel / window body stacks vertically by default).

diagram {
  width = 320
  height = 50
  wf_row {
    wf_button "Back"
    wf_button "Next"
    wf_button "Finish" {
      icon = "lucide.check"
    }
  }
}

Child blocks

§ 2.7wf_column

Stack children vertically — the default flow, useful for an explicit column inside a wf_row or wf_grid.

diagram {
  width = 220
  height = 80
  wf_column {
    wf_label "Name"
    wf_input "Full name"
  }
}

Child blocks

§ 2.8wf_grid

A grid of equal-width columns; columns sets the count and children flow across the rows.

diagram {
  width = 280
  height = 120
  wf_grid {
    columns = 3
    wf_button "1"
    wf_button "2"
    wf_button "3"
    wf_button "4"
    wf_button "5"
    wf_button "6"
  }
}

Child blocks

§ 3Node graphs

A wf_node_graph mocks up a node editor — a shader graph, a blueprint, a dataflow pipeline. Each wf_node is a titled box with labelled inputs down its left edge and outputs down its right; a wf_link wires "node.port" → "node.port". Nodes auto-lay-out left-to-right from the link graph (set direction = :top_to_bottom to flow downward, or give a node an explicit x / y to pin it).

diagram {
  width = 560
  height = 240
  wf_node_graph {
    wf_node "Texture" {
      id = tex
      outputs = ["RGB", "Alpha"]
    }
    wf_node "Fresnel" {
      id = fres
      outputs = ["Factor"]
    }
    wf_node "Multiply" {
      id = mul
      inputs = ["A", "B"]
      outputs = ["Result"]
    }
    wf_node "Output" {
      id = out
      inputs = ["Color"]
    }
    wf_link "tex.RGB" {
      to = "mul.A"
    }
    wf_link "fres.Factor" {
      to = "mul.B"
    }
    wf_link "mul.Result" {
      to = "out.Color"
    }
  }
}

Child blocks

A titled node box with named inputs (left edge) and outputs (right edge) ports.

Within a wf_node_graph, wires one node's port to another ("node.port" → "node.port"; a bare "node" targets its first port).

§ 4Controls

The leaf controls — text, buttons, fields, and toggles — drop into any container (or directly into a diagram).

§ 4.1wf_label

A plain text label.

diagram {
  width = 220
  height = 30
  wf_label "Just some label text."
}

§ 4.2wf_button

A button caption, with an optional leading icon (any pack.name); disabled = true greys it out.

diagram {
  width = 320
  height = 50
  wf_row {
    wf_button "Save" {
      icon = "lucide.check"
    }
    wf_button "Cancel"
    wf_button "Delete" {
      disabled = true
    }
  }
}

§ 4.3wf_input

A text field. With no value the @inline placeholder shows greyed; a value fills it with solid text.

diagram {
  width = 240
  height = 90
  wf_column {
    wf_input "Search projects…"
    wf_input "Name" {
      value = "Ada Lovelace"
    }
  }
}

§ 4.4wf_dropdown

A select field showing the currently-chosen option label with a chevron.

diagram {
  width = 200
  height = 44
  wf_dropdown "Release build"
}

§ 4.5wf_checkbox

An on/off checkbox; checked = true fills the box with a tick.

diagram {
  width = 240
  height = 70
  wf_column {
    wf_checkbox "Enable telemetry" {
      checked = true
    }
    wf_checkbox "Join the beta"
  }
}

§ 4.6wf_radio

A radio button — like a checkbox but round; mark the active one with selected = true in a group you lay out yourself.

diagram {
  width = 160
  height = 70
  wf_column {
    wf_radio "Dark" {
      selected = true
    }
    wf_radio "Light"
  }
}

§ 4.7wf_toggle

A sliding on/off switch with an optional trailing label; on = true slides the knob across.

diagram {
  width = 220
  height = 70
  wf_column {
    wf_toggle "Notifications" {
      on = true
    }
    wf_toggle "Do not disturb"
  }
}

§ 5Common fields

Every widget extends a shared Widget interface — its diagram placement geometry (x / y / anchors / connect_points) plus per-element theming hints:

§ 6Custom widgets

Wireframe widgets are user-extensible diagram shapes. Declare a @block("name") type … extends Widget with a lower that returns list<SvgFundamental>, and it plugs into the diagram render path like any custom shape — placed directly in a diagram by its own x / y and connectable by edges. (The built-in containers only lay out the built-in widgets, so a custom widget renders as a standalone shape, not nested inside a wf_window.)

Here's a coloured status wf_badge. The lower reads its x / y and emits a filled box with a centred label — exactly how the built-in process shape lowers — and a fill field recolours an individual instance:

diagram {
  width = 320
  height = 40
  wf_badge "passing" {
    x = 12.0
    y = 7.0
  }
  wf_badge "failing" {
    x = 130.0
    y = 7.0
    fill = "#c62828"
  }
}

// Extends Widget → a diagram shape. The lower returns SVG fundamentals
// positioned at the widget's own x/y (like the built-in `process`), and a
// `fill` field recolours a single instance.
@block("wf_badge")
type WfBadge extends Widget {
  @inline(0) text: utf8
  fill = "#2e7d32"
  id: identifier?  class: list<utf8>?  disabled: bool?
  x = 0.0  y = 0.0  width = 96.0  height = 26.0
  anchor_left: f64?  anchor_right: f64?  anchor_top: f64?  anchor_bottom: f64?
  connect_points: list<AnchorSide>?
  theme: symbol?  accent: symbol?  mode: symbol?
  lower = fn(b: WfBadge) -> list<SvgFundamental> {
    [ SvgFundamental::Rect {
        x: b.x, y: b.y, width: b.width, height: b.height,
        fill: b.fill, class: b.class,
      },
      SvgFundamental::Label {
        content: b.text,
        x: b.x + b.width / 2.0,
        y: b.y + b.height / 2.0 + 4.0,
        fit_width: b.width, fit_height: b.height,
        fill: "#ffffff",
      } ]
  }
}

diagram { width = 320  height = 40
  wf_badge "passing" { x = 12.0  y = 7.0 }
  wf_badge "failing" { x = 130.0 y = 7.0  fill = "#c62828" }
}