export let widget_navbar = (b) => {
let w = attr_or(b, "width", 300)
let h = attr_or(b, "height", 44)
let items_str = attr_or(b, "items", "Home,Search,Profile")
let active = attr_or(b, "active_index", 0)
let items = split(",", items_str)
let n = len(items)
let item_w = w / n
let bg_fill = attr_or(b, "background_fill", "var(--color-nav-bg)")
let border_stroke = attr_or(b, "border_stroke", "var(--color-nav-border)")
let active_fill = attr_or(b, "active_fill", "var(--color-link)")
let label_fill = attr_or(b, "label_fill", "currentColor")
let active_indicator_fill = attr_or(b, "active_indicator_fill", active_fill)
let bg = [{ kind = "rect", x = 0, y = 0, width = w, height = h,
fill = bg_fill, stroke = border_stroke, stroke_width = 1 }]
let entries = map(range(0, n), (i) => {
kind = "text",
x = i * item_w,
y = 0,
width = item_w,
height = h,
content = trim(items[i]),
font_size = 11,
fill = i == active ? active_fill : label_fill
})
let active_underline = active >= 0 ? [{ kind = "rect", x = active * item_w, y = 0,
width = item_w, height = 3, fill = active_indicator_fill }] : []
concat(concat(bg, active_underline), entries)
}
// ----- Flowchart shapes -----