export let widget_browser = (b) => {
let w = attr_or(b, "width", 300)
let h = attr_or(b, "height", 200)
let url = attr_or(b, "url", "https://example.com")
let title = attr_or(b, "title", "Browser")
let surface_fill = attr_or(b, "surface_fill", "var(--color-bg)")
let border_stroke = attr_or(b, "border_stroke", "var(--color-nav-border)")
let chrome_fill = attr_or(b, "chrome_fill", "var(--color-nav-bg)")
let address_fill = attr_or(b, "address_fill", "var(--color-code-bg)")
let address_stroke = attr_or(b, "address_stroke", border_stroke)
let title_fill = attr_or(b, "title_fill", "currentColor")
let url_fill = attr_or(b, "url_fill", "currentColor")
let radius = attr_or(b, "radius", 8)
[
{ kind = "rect", x = 0, y = 0, width = w, height = h, rx = radius,
fill = surface_fill, stroke = border_stroke, stroke_width = 2 },
{ kind = "rect", x = 0, y = 0, width = w, height = 36, rx = radius,
fill = chrome_fill },
{ kind = "rect", x = 0, y = 28, width = w, height = 10, fill = chrome_fill },
{ kind = "circle", x = 10, y = 8, r = 6, fill = attr_or(b, "close_fill", "#ff5f56") },
{ kind = "circle", x = 28, y = 8, r = 6, fill = attr_or(b, "minimize_fill", "#ffbd2e") },
{ kind = "circle", x = 46, y = 8, r = 6, fill = attr_or(b, "maximize_fill", "#27c93f") },
{ kind = "rect", x = 66, y = 6, width = 140, height = 24, rx = 4,
fill = surface_fill, stroke = border_stroke, stroke_width = 1 },
{ kind = "text", x = 66, y = 6, width = 140, height = 24, content = title, font_size = 10, fill = title_fill },
{ kind = "rect", x = 8, y = 42, width = w - 16, height = 26, rx = 4,
fill = address_fill, stroke = address_stroke, stroke_width = 1 },
{ kind = "text", x = 20, y = 42, width = w - 40, height = 26,
content = url, font_size = 11, anchor = "start", fill = url_fill, opacity = 0.6 }
]
}