feat: Ribbon, an Office-style command ribbon

README.md

@@ -97,7 +97,7 @@ every native target Go ships.
 | Structure    | `Card`, `HeaderBar`, `ActionRow`, `Breadcrumbs`, `Steps`, `Avatar`, `Rating`, `Stat`, `Kbd`, `ChatBubble`, `Diff`, `Pagination`, `DropZone` |
 | Navigation   | `Menu` + `MenuItem.Shortcut`, `MenuBar` + `Alt+letter`, `ContextMenu`, `Popover`, `CommandPalette`, `Dialog`, `MessageDialog`, `Wizard` |
 | Window       | `Window`, `WindowDecoration`, `DecoButton` (client-side decorations) |
-| Bars         | `Toolbar`, `PagingToolbar`, `Statusbar`, 10 stock `DrawIcon*` helpers |
+| Bars         | `Toolbar`, `PagingToolbar`, `Statusbar`, `Ribbon` (Office-style tabs of groups of large/small buttons, toggles, split buttons, drop-downs and a gallery; scales down by group priority, collapses, keytips, tooltips with shortcuts; every control is an `Action`, state is `mvvm.Observable`), 10 stock `DrawIcon*` helpers |
 | Composite    | `FileChooser`, `ColorChooser`, `ColorPicker`, `FontChooser`, `Calendar`, `DatePicker`, `DateRangePicker`, `TimePicker`, `MarkdownView`, `MarkdownEditor` |
 | Data suite   | `Table` (cell edit, frozen columns, group rows, aggregates, row-expanders), `TreeTable`, `PropertyGrid`, `Kanban` (drag cards), `Gantt` (drag/resize bars), `Agenda`/`AgendaCalendar` event calendar (week/month/quarter/year, colour-coded calendars, sidebar, inline editor) |
 | Charts       | `LineChart`, `BarChart`, `PieChart`, `AreaChart`, `ScatterChart`, `RadarChart`, `Gauge`, `Sparkline` |

action_command.go

@@ -0,0 +1,24 @@
+// Copyright (c) 2026 the go-widgets/toolkit authors. All rights reserved.
+// Use of this source code is governed by a BSD-3-Clause license that can be
+// found in the LICENSE file at the root of this repository.
+
+package toolkit
+
+import "github.com/go-widgets/mvvm"
+
+// NewCommandAction builds an [Action] that is a view-model [mvvm.Command]: the
+// Action runs the command, and its Enabled state follows the command's CanExecute
+// — read now, and again each time the command raises CanExecuteChanged — so a
+// ribbon button, a menu entry and a palette row all grey out together as the
+// state the command's predicate reads changes. A view model owns the Command; the
+// toolkit only reflects it.
+//
+// Visibility is not a command's business, but it is observable too: share the
+// view model's own Observable by assigning it to the returned Action's Visible
+// field, and every surface hides the control with it.
+func NewCommandAction(id, label string, cmd *mvvm.Command) *Action {
+	a := NewAction(id, label, cmd.Execute)
+	a.SetEnabled(cmd.CanExecute())
+	cmd.SubscribeCanExecuteChanged(func() { a.SetEnabled(cmd.CanExecute()) })
+	return a
+}

mvvm_gate_test.go

@@ -301,30 +301,36 @@ var mvvmMigratedWidgets = map[string]map[string]bool{
 	// sub-widgets, CloseOnScrim is a capability flag and PanelW/PanelH are layout
 	// metrics (all config); OnClose is a func hook (auto-allowed). Any reactive
 	// state (the search text) lives on Panel.Input's own Text() observable.
-	"ModalWindow":      {"Scrim": true, "Panel": true, "CloseOnScrim": true, "PanelW": true, "PanelH": true},
-	"HeaderBar":        {"End": true, "Start": true, "Subtitle": true, "Title": true},
-	"IconButton":       {"Flat": true, "Glyph": true, "Icon": true},
-	"Image":            {"Alt": true, "H": true, "Pixels": true, "Scale": true, "W": true},
-	"IsoIconPalette":   {"DefaultGroupName": true, "Title": true},
-	"Kbd":              {"Keys": true},
-	"HBox":             {"Align": true, "Pack": true, "Spacing": true},
-	"VBox":             {"Align": true, "Pack": true, "Spacing": true},
-	"Grid":             {"ColWidths": true, "RowHeights": true, "Spacing": true},
-	"LinkCard":         {"Domain": true, "Favicon": true, "Meta": true, "Title": true},
-	"MarkdownEditor":   {"Preview": true, "Source": true},
-	"MarkdownView":     {"Source": true},
-	"MediaCard":        {"Meta": true, "Thumbnail": true, "Title": true},
-	"PostCard":         {"MaxTitleLines": true, "Meta": true, "MetaFont": true, "Pill": true, "PillColor": true, "PillFont": true, "PillInk": true, "Subtitle": true, "SubtitleFont": true, "ThumbH": true, "ThumbPlaceholder": true, "ThumbW": true, "Thumbnail": true, "Title": true, "TitleFont": true},
-	"PullToRefresh":    {"Child": true, "Style": true, "Threshold": true},
-	"SegmentedBar":     {"Orientation": true, "Segments": true},
-	"SplitButton":      {"Arrow": true, "Label": true},
-	"Statusbar":        {"SegmentMinW": true, "Segments": true, "Left": true, "Center": true, "Right": true},
-	"StatusIcon":       {"Badge": true, "IH": true, "IW": true, "Icon": true, "Ink": true, "Pixels": true, "Tooltip": true},
-	"StatusArea":       {"Background": true, "Gap": true, "IconSize": true, "Icons": true},
-	"SwipeActions":     {"ActionWidth": true, "Content": true, "DestructiveDen": true, "DestructiveFull": true, "DestructiveNum": true, "Leading": true, "Projection": true, "Trailing": true},
-	"TerminalView":     {"CellH": true, "CellW": true, "Cells": true, "Cols": true, "DefaultBG": true, "DefaultFG": true, "Rows": true},
-	"Timeline":         {"Events": true, "Horizontal": true},
-	"Toolbar":          {"ButtonH": true, "ButtonW": true, "Items": true, "Orientation": true},
+	"ModalWindow":    {"Scrim": true, "Panel": true, "CloseOnScrim": true, "PanelW": true, "PanelH": true},
+	"HeaderBar":      {"End": true, "Start": true, "Subtitle": true, "Title": true},
+	"IconButton":     {"Flat": true, "Glyph": true, "Icon": true},
+	"Image":          {"Alt": true, "H": true, "Pixels": true, "Scale": true, "W": true},
+	"IsoIconPalette": {"DefaultGroupName": true, "Title": true},
+	"Kbd":            {"Keys": true},
+	"HBox":           {"Align": true, "Pack": true, "Spacing": true},
+	"VBox":           {"Align": true, "Pack": true, "Spacing": true},
+	"Grid":           {"ColWidths": true, "RowHeights": true, "Spacing": true},
+	"LinkCard":       {"Domain": true, "Favicon": true, "Meta": true, "Title": true},
+	"MarkdownEditor": {"Preview": true, "Source": true},
+	"MarkdownView":   {"Source": true},
+	"MediaCard":      {"Meta": true, "Thumbnail": true, "Title": true},
+	"PostCard":       {"MaxTitleLines": true, "Meta": true, "MetaFont": true, "Pill": true, "PillColor": true, "PillFont": true, "PillInk": true, "Subtitle": true, "SubtitleFont": true, "ThumbH": true, "ThumbPlaceholder": true, "ThumbW": true, "Thumbnail": true, "Title": true, "TitleFont": true},
+	"PullToRefresh":  {"Child": true, "Style": true, "Threshold": true},
+	"SegmentedBar":   {"Orientation": true, "Segments": true},
+	"SplitButton":    {"Arrow": true, "Label": true},
+	"Statusbar":      {"SegmentMinW": true, "Segments": true, "Left": true, "Center": true, "Right": true},
+	"StatusIcon":     {"Badge": true, "IH": true, "IW": true, "Icon": true, "Ink": true, "Pixels": true, "Tooltip": true},
+	"StatusArea":     {"Background": true, "Gap": true, "IconSize": true, "Icons": true},
+	"SwipeActions":   {"ActionWidth": true, "Content": true, "DestructiveDen": true, "DestructiveFull": true, "DestructiveNum": true, "Leading": true, "Projection": true, "Trailing": true},
+	"TerminalView":   {"CellH": true, "CellW": true, "Cells": true, "Cols": true, "DefaultBG": true, "DefaultFG": true, "Rows": true},
+	"Timeline":       {"Events": true, "Horizontal": true},
+	"Toolbar":        {"ButtonH": true, "ButtonW": true, "Items": true, "Orientation": true},
+	// Ribbon: Tabs (the structure of tabs, groups and controls), Keymap and
+	// TooltipDelayMs are set-once config. Its reactive state is on the ActiveTab()
+	// and Collapsed() Observables; a toggle's Checked and a drop-down's Selected
+	// are Observables on their (config) RibbonControl; the hover, the focus, the
+	// open popup and the keytips are internal interaction state.
+	"Ribbon":           {"Tabs": true, "Keymap": true, "TooltipDelayMs": true},
 	"Wallpaper":        {"Bottom": true, "IH": true, "IW": true, "Interactive": true, "Mode": true, "Pixels": true, "Top": true},
 	"Window":           {"Body": true, "Closable": true, "Maximizable": true, "Minimizable": true, "Resizable": true, "Title": true},
 	"WindowDecoration": {"Border": true, "BorderColor": true, "Buttons": true, "Grip": true, "GripColor": true, "Hairline": true, "Shadow": true, "ShowGrip": true, "Title": true, "TitleCenter": true, "TitleColor": true, "TitleInk": true, "Titlebar": true},