Bus UI Shell Components

Frames for whole pages and whole modules.

Use shell components when a page needs stable chrome around a module view. These helpers export through pkg/ui, shell slots are typed gx.Node trees, and HTML is produced by explicit render-boundary helpers.

Public APIs

Component	Use it for	Public API	Current path
AppShell	Full document chrome with title, head assets, nav, main, and footer slots.	`AppShellProps`	`pkg/ui`
PageShell	In-document header, main, and footer structure.	`PageShellProps`	`pkg/ui`
SidebarShell	Left-rail layouts with a nav rail and main content.	`SidebarShellProps`	`pkg/ui`
SidebarNav	Collapsible app navigation rails with active item support.	`SidebarNavProps`	`pkg/ui`
SplitLayout	Two-pane or workspace split layouts with typed pane slots and resize state.	`SplitLayoutProps`	`pkg/ui`
ShellActionPanel	Bounded shell panels with a title, body, actions, and footer.	`ShellActionPanelProps`	`pkg/ui`

Example

Choose the page-shell helper when a module already owns the browser document and only needs a predictable page frame inside it. The page shell composes header, main, and footer node trees before render; the node-first name remains the validation boundary.

Go API

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

node, err := ui.PageShell(ui.PageShellProps{
  HeaderNodes: []gx.Node{
    gx.Element("h1", nil, gx.Text("Accounting")),
  },
  MainNodes: []gx.Node{
    gx.Element("section", nil, gx.Text("Module overview")),
  },
  FooterNodes: []gx.Node{
    gx.Element("small", nil, gx.Text("Synced now")),
  },
})

html, err := gx.RenderHTML(node)

In .gx source, wrap the page-shell helper before using it from markup and surface any helper error as text.

In .gx source, shell examples are nested page structure: navigation, main content, and supporting regions.

.gx source

package shellui

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

type ShellPreviewProps struct {
  Title string
}

func ShellPreview(props ShellPreviewProps) gx.Node {
  return <section class="shell-preview">
  <nav aria-label="Shell sections"><a href="page-shell/index.html"><Text value={"Page shell"}></Text></a></nav>
  <main><h2><Text value={props.Title}></Text></h2></main>
</section>
}

var shell = <ShellPreview title={"Accounting workspace"}></ShellPreview>