Add fonts, autotable, autotable examples

go/cmd/examples/go-wasm-web/app/kit.go

@@ -38,12 +38,17 @@ func KitPage(d Deps) func() *VNode {
 	acc := NewSignal(0)
 	notify := NewSignal(true)
 	span := NewSignal("week")
-	modalOpen := NewSignal(false)
-	menuOpen := NewSignal(false)
 	name := NewSignal("")
 	email := NewSignal("")
 	plan := NewSignal("pro")
 
+	// Floating components are CONTROLLERS: they own refs, timers and open state, so
+	// they are built once here — never inside the render closure below, which would
+	// rebuild them (and lose their state) on every frame.
+	modal := ui.NewModal(ui.ModalOptions{Size: ui.ModalMedium})
+	menu := ui.NewMenu(ui.MenuOptions{Placement: ui.PlacementBottomStart})
+	tip := ui.NewHoverTooltip(ui.PlacementTop, "")
+
 	return func() *VNode {
 		return Div(Attr("class", "space-y-8"),
 			Div(
@@ -148,39 +153,45 @@ func KitPage(d Deps) func() *VNode {
 				),
 			),
 
-			kitSection("Overlays (interactive)",
+			kitSection("Overlays (measured, portaled)",
 				row("flex flex-wrap items-center gap-4",
-					// Modal, toggled by a signal.
-					ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Text: "Open modal", OnClick: func() { modalOpen.Set(true) }}),
-					// Menu, toggled by a signal.
-					ui.Menu("relative inline-block",
-						ui.MenuTrigger(func() { menuOpen.Set(!menuOpen.Get()) }, "",
-							ui.Button(ui.ButtonProps{Color: ui.ButtonWhite, Text: "Menu ▾"})),
-						ui.MenuContent(menuOpen.Get(), ui.MenuPlacementBottomStart, "",
-							ui.MenuItem(ui.MenuItemProps{Icon: "check", OnClick: func() { menuOpen.Set(false) }}, Text("Profile")),
-							ui.MenuItem(ui.MenuItemProps{OnClick: func() { menuOpen.Set(false) }}, Text("Settings")),
-							ui.MenuDivider(""),
-							ui.MenuItem(ui.MenuItemProps{OnClick: func() { menuOpen.Set(false) }}, Text("Sign out")),
-						),
+					ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Text: "Open modal", OnClick: modal.Open}),
+
+					// The menu measures itself against the viewport: drag the window
+					// narrow, or scroll it to the bottom, and it flips/shifts to stay on
+					// screen. Items close the menu themselves — no callback plumbing.
+					menu.TriggerFunc(ui.MenuTriggerProps{Tag: "div"}, func(open bool) *VNode {
+						caret := " ▾"
+						if open {
+							caret = " ▴"
+						}
+						return ui.Button(ui.ButtonProps{Color: ui.ButtonWhite, Text: "Menu" + caret})
+					}),
+					menu.Content("",
+						menu.Item(ui.MenuItemProps{Icon: "check"}, Text("Profile")),
+						menu.Item(ui.MenuItemProps{}, Text("Settings")),
+						ui.MenuDivider(""),
+						menu.Item(ui.MenuItemProps{}, Text("Sign out")),
 					),
-					// Tooltip (pure CSS hover).
-					ui.HoverTooltip(Span(Text("A CSS-only tooltip")), "top", "",
-						ui.Button(ui.ButtonProps{Color: ui.ButtonNeutral, Outline: true, Text: "Hover me"})),
+
+					// The tooltip's arrow tracks the trigger even when the panel gets
+					// shifted away from it near a viewport edge.
+					tip.Render(Span(Text("A measured tooltip — try it near the window edge")),
+						ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Text: "Hover me"})),
 				),
-				ui.Modal(ui.ModalProps{
-					IsOpen:  modalOpen.Get(),
-					OnClose: func() { modalOpen.Set(false) },
-					Size:    ui.ModalMedium,
-					Header:  H3(Attr("class", "text-lg font-semibold text-text-heading"), Text("Example modal")),
+				modal.Render(ui.ModalProps{
+					Header: H3(Attr("class", "text-lg font-semibold text-text-heading"), Text("Example modal")),
 				},
-					P(Attr("class", "text-neutral-600"), Text("This modal is toggled by a signal; the backdrop and close button round-trip through OnClose.")),
+					P(Attr("class", "text-neutral-600"),
+						Text("Portaled to document.body, so it is not clipped by any ancestor. Escape closes "+
+							"the topmost modal; the backdrop click closes too.")),
 				),
 			),
 
-			ui.Alert(ui.AlertGray, "About this page",
-				Text("Floating/positioned components (menus, tooltips, modals, dropdowns) are ported as "+
-					"structure + Tailwind + signal/event wiring — the neutral runtime has no floating-ui, "+
-					"portals, or element measurement, so positioning is approximated with static classes.")),
+			ui.Alert(ui.AlertGreen, "About this page",
+				Text("Menus, tooltips, modals and dropdowns are now really measured: they are portaled to "+
+					"document.body, positioned from getBoundingClientRect against the viewport, and they "+
+					"flip and shift to stay on screen. Resize the window or scroll while one is open.")),
 		)
 	}
 }