Bus UI Surface Components

Bounded content blocks for dashboards and detail views.

Use surface components when the screen needs a clear container around content, metrics, or compact summaries. These validated helpers are already available through the public pkg/ui facade and compose typed gx.Node trees before render.

Validated APIs

Component	Use it for	Public API	Current path
Panel	Generic titled work surfaces with optional actions and footers.	`Panel` / `PanelProps`	`pkg/ui`
SurfaceCard	Compact grouped content cards with validated body slots.	`SurfaceCard` / `SurfaceCardProps`	`pkg/ui`
MetricCard	Headline numbers with semantic status accents and detail text.	`MetricCard` / `MetricCardProps`	`pkg/ui`

Example

The node-first helper is useful when the module wants the surface contract verified before render and still wants to compose with typed Go nodes.

Go API

import (
  gx "github.com/busdk/bus-gx/pkg/gx"
  ui "github.com/busdk/bus-ui/pkg/ui"
)

node := ui.Panel(ui.PanelProps{
  Title: "Monthly close",
  BodyNodes: []gx.Node{
    gx.Element("p", nil, gx.Text("3 statements ready")),
  },
})

html, err := gx.RenderHTML(node)

In .gx source, direct node-returning helpers work well behind a small package-scope wrapper.

In .gx source, surfaces are composed as cards, panels, and metric regions in the markup tree.

.gx source

package surfaceui

import gx "github.com/busdk/bus-gx/pkg/gx"

type SurfaceOverviewProps struct {
  Title string
}

func SurfaceOverview(props SurfaceOverviewProps) gx.Node {
  return <section class="surface-overview">
  <article class="surface-card"><h2><Text value={props.Title}></Text></h2></article>
</section>
}

var surfaces = <SurfaceOverview title={"Evidence summary"}></SurfaceOverview>