@gjsify/adwaita-web 0.64.13 → 0.64.15-next.287

package/src/elements/adw-application-window.ts

@@ -9,9 +9,9 @@
 // is on, and no menubar at all when it is off.
 //
 // A BROWSER HAS NO GtkApplication, so the model is handed to the window instead of to
-// an application that does not exist here. `menu-model` is the same portable menu value
-// ADR 0042 gave `<gtk-menu-button>` and `<adw-split-button>` (a JSON array), and it is
-// read through the same core parser, so one menu is written once. A menubar is a row of
+// an application that does not exist here. `menu-model` is the same real `Gio.MenuModel`
+// ADR 0128 gave `<gtk-menu-button>` and `<adw-split-button>`, taken through the same
+// {@link MenuSlot} door, so one menu is written once. A menubar is a row of
 // MENU LINKS, which is what `Adw.Application`'s menubar is documented to be, so a
 // section is inlined and a bare item becomes a plain button — `flattenMenu` is the
 // walk that decides both.
@@ -20,8 +20,9 @@
 //   show-menubar (boolean — Gtk.ApplicationWindow:show-menubar; the bar is drawn only
 //     while this is set AND the model has something in it, exactly as GTK draws no bar
 //     for an application that installed none)
-//   menu-model   (the portable menu model, JSON — the stand-in for the model a
-//     GtkApplication would own; the same value `<gtk-menu-button menu-model>` takes)
+//   menu-model   (the menu's JSON, parsed into the model this window owns — the
+//     stand-in for the model a GtkApplication would own; `<gtk-menu-button menu-model>`'s
+//     own spelling, and a mutation of a held model redraws the bar)
 //
 // Extends <gtk-application-window>, as Adw.ApplicationWindow extends Gtk.ApplicationWindow,
 // so the Gtk.Window state members come with it. The content property, the size request, the
@@ -33,22 +34,17 @@
 // Copyright (c) 2021-2023 Alice Mikhaylenko / Purism SPC (libadwaita). LGPLv2.1+
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
-import {
-    flattenMenu,
-    normalizeMenuModel,
-    parseMenuModel,
-    type AdwMenuInput,
-    type AdwMenuModel,
-} from '@gjsify/adwaita-core';
+import { buildMenu, flattenMenu, type AdwMenuModel } from '@gjsify/adwaita-core';
 
 import type { AdwBreakpoint } from '@gjsify/adwaita-core';
 import type { AdwSlot } from '../slotted-children.js';
 import { AdwWindowFeatures } from './adw-window-features.js';
+import { MenuSlot } from './menu-slot.js';
 import { GtkApplicationWindow } from './gtk-application-window.js';
 
 export class AdwApplicationWindow extends GtkApplicationWindow {
     private readonly _features = new AdwWindowFeatures(this);
-    private _model: AdwMenuModel = [];
+    private readonly _slot = new MenuSlot(() => this._renderMenubar());
     private _menubarEl: HTMLDivElement | null = null;
 
     // The base's list BY NAME, not `super.observedAttributes`: `AdwPasswordEntryRow`
@@ -110,12 +106,12 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
     }
 
     /** The menubar's model — what a GtkApplication would own here. */
-    get menuModel(): AdwMenuModel {
-        return this._model;
+    get menuModel(): AdwMenuModel | null {
+        return this._slot.model;
     }
 
-    set menuModel(value: AdwMenuInput) {
-        this._model = normalizeMenuModel(value);
+    set menuModel(value: AdwMenuModel | string | null) {
+        this._slot.write(value);
         this._renderMenubar();
     }
 
@@ -145,7 +141,7 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
         // The attribute is the declarative form and it wins when it changes — the same
         // precedence `<gtk-menu-button>` gives `menu-model`, through the same parser.
         if (name === 'menu-model') {
-            this._model = parseMenuModel(this.getAttribute('menu-model'));
+            this._slot.writeMarkup(this.getAttribute('menu-model'));
             this._renderMenubar();
         }
     }
@@ -197,16 +193,16 @@ export class AdwApplicationWindow extends GtkApplicationWindow {
         bar.replaceChildren();
         // GTK draws no menubar for an application that installed none, so neither does
         // this: both the flag and a model with rows in it are required.
-        bar.hidden = !this.showMenubar || this._model.length === 0;
+        bar.hidden = !this.showMenubar || this._slot.isEmpty;
 
-        for (const row of flattenMenu(this._model)) {
+        for (const row of flattenMenu(this._slot.tree)) {
             const node = row.node;
             if (node.kind === 'submenu') {
                 // A link is a menu the user OPENS — a button with that menu on it,
                 // which is the whole of what a Gtk.PopoverMenuBar row is.
                 const button = document.createElement('gtk-menu-button');
                 button.setAttribute('menu-title', node.label);
-                (button as unknown as { menuModel: AdwMenuInput }).menuModel = node.items;
+                (button as unknown as { menuModel: AdwMenuModel | null }).menuModel = buildMenu(node.items);
                 bar.appendChild(button);
                 continue;
             }

package/src/elements/adw-split-button.ts

@@ -37,13 +37,8 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import {
-    ADW_MENU_SURFACE_WEB,
     SplitButtonState,
-    assertMenuRenderable,
     isSplitButtonDirection,
-    menuRefusals,
-    normalizeMenuModel,
-    parseMenuModel,
     resolveDropdownTooltip,
     splitButtonArrowIcon,
     splitButtonPopupDirection,
@@ -52,13 +47,13 @@ import {
 import type {
     AdwArrowIcon,
     AdwMenuActions,
-    AdwMenuInput,
     AdwMenuModel,
     SplitButtonChange,
     SplitButtonDirection,
 } from '@gjsify/adwaita-core';
 import { activateElementMenuItem, menuActionsOfElement } from '../application.js';
 
+import { MenuSlot } from './menu-slot.js';
 import { PopoverMenuView } from './popover-menu.js';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it is
@@ -121,6 +116,15 @@ const POPOVER_POSITIONS = {
 
 export class AdwSplitButton extends WidgetElement {
     private readonly _state = new SplitButtonState();
+    /**
+     * The model's door, tree snapshot and `items-changed` subscription (ADR 0128). The
+     * STATE still owns the menu as a property — `dropdownEnabled` is derived from it and
+     * the notify order is libadwaita's — so every write here goes through the slot FIRST
+     * (which is what refuses it and snapshots it) and is then handed to the state.
+     */
+    private readonly _slot = new MenuSlot(() => {
+        if (this._initialized) this._render();
+    });
     private _actionEl!: HTMLButtonElement;
     private _dropdownEl!: HTMLButtonElement;
     private _arrowEl!: GtkImage;
@@ -180,60 +184,29 @@ export class AdwSplitButton extends WidgetElement {
         this.removeAttribute('label');
     }
 
-    /** The menu, normalised (ADR 0042). Empty when the dropdown has none. */
-    get menuModel(): AdwMenuModel {
-        return this._state.menuModel ?? [];
-    }
-
     /**
-     * Set the menu from anything the portable model accepts — a bare `string[]`, item
-     * descriptors, sections, submenus.
+     * The menu the dropdown pops up, by identity, or `null` when it has none (ADR 0128).
      *
-     * The REFUSAL is here rather than at render time: a `custom` item names an
-     * application widget this surface cannot host, and discovering that as a blank row
-     * three interactions later is what {@link assertMenuRenderable} exists to prevent.
+     * `null` is the ONLY spelling of "no menu" now: an empty model is a menu, so an empty
+     * one leaves the dropdown enabled exactly as it does in GTK, where a non-null model
+     * still builds a popover (measured, `MENU_MODEL_DOOR_VECTORS`).
      */
-    set menuModel(value: AdwMenuInput) {
-        // Refused BEFORE it is stored, so a throw leaves the widget showing the menu it
-        // had rather than one it cannot draw.
-        this._state.setMenuModel(this._acceptMenu(value));
-        if (this._initialized) this._render();
+    get menuModel(): AdwMenuModel | null {
+        return this._state.menuModel;
     }
 
     /**
-     * Normalise, REFUSE, store — the one door every menu comes through.
-     *
-     * The property setter is not the only way a menu arrives: an attribute is, and the
-     * first cut refused only the setter, so a `custom` item written in markup drew
-     * exactly the row `assertMenuRenderable` exists to prevent — one that reads like a
-     * command and does nothing.
-     *
-     * THE TWO DOORS REFUSE DIFFERENTLY, and the difference is which side can hear it.
-     * A property assignment is a CALL, so it throws and the caller can catch. An
-     * attribute is MARKUP, parsed by the browser: a throw from `connectedCallback` is
-     * not delivered to whoever appended the element, it is reported as an uncaught
-     * page error — measured, it broke `adwaita-upgrade-order.spec.ts`, which counts
-     * exactly those. Nobody can handle it and everybody else pays for it. So the
-     * attribute path REFUSES THE MENU (no menu, and a menu-less dropdown is
-     * insensitive, which is visible) and says why on `console.error`.
+     * Take a real model, a JSON string in the portable spelling, or `null`.
      *
-     * A REFUSAL AND A TYPO ARE STILL DIFFERENT THINGS. `parseMenuModel` is total
-     * because malformed JSON is an author slip and must not stop the element
-     * upgrading; `custom` is well-formed, deliberate, and unhonourable here.
+     * The REFUSAL is at the assignment rather than at render time: a `custom` item names
+     * an application widget this surface cannot host, and discovering that as a blank row
+     * three interactions later is what the refusal exists to prevent. {@link MenuSlot}
+     * owns the door; the state is handed only a menu this surface agreed to draw.
      */
-    private _acceptMenu(input: AdwMenuInput, strict = true): AdwMenuModel {
-        const model = normalizeMenuModel(input);
-        if (strict) {
-            assertMenuRenderable(model, ADW_MENU_SURFACE_WEB);
-            return model;
-        }
-        const refusals = menuRefusals(model, ADW_MENU_SURFACE_WEB);
-        if (refusals.length === 0) return model;
-        // `console.error` is the browser's own channel for "this is wrong, the page
-        // continues" — and the alternative here is a row that lies.
-        console.error(`${ADW_MENU_SURFACE_WEB.name} cannot render this menu, so it has none:`);
-        for (const refusal of refusals) console.error(`  [${refusal.path.join('.')}] ${refusal.message}`);
-        return [];
+    set menuModel(value: AdwMenuModel | string | null) {
+        this._slot.write(value);
+        this._state.setMenuModel(this._slot.model);
+        if (this._initialized) this._render();
     }
 
     /**
@@ -387,7 +360,8 @@ export class AdwSplitButton extends WidgetElement {
                 this._state.setDropdownTooltip(value ?? '');
                 break;
             case 'menu-model':
-                this._state.setMenuModel(this._acceptMenu(parseMenuModel(value), false));
+                this._slot.writeMarkup(value);
+                this._state.setMenuModel(this._slot.model);
                 break;
             default:
                 break;
@@ -409,10 +383,12 @@ export class AdwSplitButton extends WidgetElement {
         const direction = this.getAttribute('direction');
         if (isSplitButtonDirection(direction)) this._state.setDirection(direction);
         this._state.setDropdownTooltip(this.getAttribute('dropdown-tooltip') ?? '');
-        // The `menuModel` property may have been set before the element upgraded;
-        // the attribute only seeds an otherwise empty menu.
+        // The `menuModel` property may have been set before the element upgraded; the
+        // attribute only seeds a widget that has NO menu — which since ADR 0128 means a
+        // null one, an empty model being a menu an author may have meant.
         if (this._state.menuModel === null) {
-            this._state.setMenuModel(this._acceptMenu(parseMenuModel(this.getAttribute('menu-model')), false));
+            this._slot.writeMarkup(this.getAttribute('menu-model'));
+            this._state.setMenuModel(this._slot.model);
         }
     }
 
@@ -528,9 +504,9 @@ export class AdwSplitButton extends WidgetElement {
 
     private _renderMenu(): void {
         this._menuEl.open = this._state.open;
-        const model = this._state.menuModel ?? [];
-        this._menuView.setMenuModel(model);
-        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, model));
+        const tree = this._slot.tree;
+        this._menuView.setMenuTree(tree);
+        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, tree));
         this._menuView.render();
     }
 }

package/src/elements/adw-tab-overview.ts

@@ -46,8 +46,9 @@
 //
 // `view` is a widget REFERENCE (`Adw.TabView`), so the attribute is the element id
 // `<adw-tab-button view>` also takes, while `view`/`setView` take the element.
-// `secondary-menu` is a `GMenuModel`: the property takes the portable model and the
-// attribute takes its JSON, which is `<gtk-menu-button menu-model>`'s own spelling.
+// `secondary-menu` is a `GMenuModel` and takes a real one (ADR 0128): the property takes
+// the model, the attribute takes its JSON, which is `<gtk-menu-button menu-model>`'s own
+// spelling, and {@link MenuSlot} is the door both go through.
 //
 // A11Y: the overview is a `role="grid"` of `role="gridcell"` thumbnails under a
 // header bar, and the pinned grid is a second grid — C's `AdwTabGrid` is a
@@ -68,16 +69,9 @@
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web; the icon,
 // indicator and portrait nodes are <gtk-image> and the grids are <div role="grid">.
 
-import {
-    gridColumns,
-    gridNavigate,
-    tabSearchMatches,
-    tabTooltip,
-    type AdwMenuInput,
-    type AdwMenuModel,
-} from '@gjsify/adwaita-core';
-import { normalizeMenuModel } from '@gjsify/adwaita-core';
-import { assertMenuRenderable, ADW_MENU_SURFACE_WEB } from '@gjsify/adwaita-core';
+import { gridColumns, gridNavigate, tabSearchMatches, tabTooltip, type AdwMenuModel } from '@gjsify/adwaita-core';
+
+import { MenuSlot } from './menu-slot.js';
 
 import type { AdwTabView, AdwTabViewPage } from './adw-tab-view.js';
 import { createGtkImage, type GtkImage } from './gtk-image.js';
@@ -119,7 +113,7 @@ export class AdwTabOverview extends WidgetElement {
     private readonly _thumbs = new Map<string, Thumbnail>();
 
     private _view: AdwTabView | null = null;
-    private _model: AdwMenuModel = [];
+    private readonly _slot = new MenuSlot(() => this._applyMenu());
     private _searchActive = false;
     private _initialized = false;
     /** The last visibility actually painted, so `notify::open` fires on a real change. */
@@ -225,16 +219,14 @@ export class AdwTabOverview extends WidgetElement {
     }
 
     /** `Adw.TabOverview:secondary-menu` — the portal menu of extra actions. */
-    get secondaryMenu(): AdwMenuModel {
-        return this._model;
+    get secondaryMenu(): AdwMenuModel | null {
+        return this._slot.model;
     }
 
-    set secondaryMenu(value: AdwMenuInput) {
-        const model = normalizeMenuModel(value);
+    set secondaryMenu(value: AdwMenuModel | string | null) {
         // The property setter is a CALL, so a `custom` item throws here where the caller
         // can catch it — `<gtk-menu-button>`'s own rule, which keeps the two doors honest.
-        assertMenuRenderable(model, ADW_MENU_SURFACE_WEB);
-        this._model = model;
+        this._slot.write(value);
         this._applyMenu();
     }
 
@@ -398,7 +390,8 @@ export class AdwTabOverview extends WidgetElement {
 
         const declaredMenu = this.getAttribute('secondary-menu');
         if (declaredMenu !== null) {
-            this.secondaryMenu = JSON.parse(declaredMenu) as AdwMenuInput;
+            this._slot.writeMarkup(declaredMenu);
+            this._applyMenu();
             this.removeAttribute('secondary-menu');
         }
 
@@ -423,11 +416,8 @@ export class AdwTabOverview extends WidgetElement {
                 if (value === null) return;
                 // An attribute is MARKUP: a `custom` item here is reported, not thrown
                 // (adw-sidebar/`gtk-menu-button`'s rule for the same two doors).
-                try {
-                    this.secondaryMenu = JSON.parse(value) as AdwMenuInput;
-                } catch (error) {
-                    console.error(`<adw-tab-overview secondary-menu> is not valid JSON: ${String(error)}`);
-                }
+                this._slot.writeMarkup(value);
+                this._applyMenu();
                 return;
             }
             case 'enable-new-tab':
@@ -557,7 +547,7 @@ export class AdwTabOverview extends WidgetElement {
      * slot is where an application puts its own controls.
      */
     private _applyHeaderBar(): void {
-        const hasMenu = this._model.length > 0;
+        const hasMenu = !this._slot.isEmpty;
         this._headerEl.hidden = !(
             this.enableSearch ||
             hasMenu ||
@@ -572,8 +562,8 @@ export class AdwTabOverview extends WidgetElement {
     }
 
     private _applyMenu(): void {
-        const view = this._menuBtn as HTMLElement & { menuModel?: AdwMenuModel };
-        if (this._model.length > 0) view.menuModel = this._model;
+        const view = this._menuBtn as HTMLElement & { menuModel?: AdwMenuModel | null };
+        if (this._slot.model !== null) view.menuModel = this._slot.model;
         this._applyHeaderBar();
     }
 

package/src/elements/gtk-menu-button.ts

@@ -9,8 +9,12 @@
 // `normalizeIconName` guard is what keeps a multi-token `icon-name="a b"` from
 // shipping a stray CSS class — for the button icon and for every menu entry's.
 //
-// The `menu-model` attribute is a JSON array in the portable menu model (ADR 0042) —
-// items, sections and submenus, with the same attributes GTK reads. Choosing an item
+// The `menu-model` ATTRIBUTE is a JSON array in the portable menu model (ADR 0042) —
+// items, sections and submenus, with the same attributes GTK reads. The `menuModel`
+// PROPERTY is a real `Gio.MenuModel` (ADR 0128), which is what GTK's own property is:
+// {@link MenuSlot} is the door between the two, and it is what hears a menu mutate
+// after it was handed over; a write of the property or the attribute fires
+// `notify::menu-model` (CustomEvent, bubbles, detail `{ menuModel }`). Choosing an item
 // closes the popover and fires `menu-item-activated` (CustomEvent, bubbles, detail
 // `{ id, label, path }`) with `id` falling back to `label`, matching the NS twin. The
 // rows themselves are `PopoverMenuView`'s, shared with `<adw-split-button>`: the split
@@ -24,19 +28,11 @@
 // Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
-import {
-    ADW_MENU_SURFACE_WEB,
-    assertMenuRenderable,
-    isSplitButtonDirection,
-    menuRefusals,
-    menuButtonPopupDirection,
-    menuItemAt,
-    normalizeMenuModel,
-    parseMenuModel,
-} from '@gjsify/adwaita-core';
+import { isSplitButtonDirection, menuButtonPopupDirection, menuItemAt } from '@gjsify/adwaita-core';
 import { activateElementMenuItem, menuActionsOfElement } from '../application.js';
-import type { AdwMenuActions, AdwMenuInput, AdwMenuModel, SplitButtonDirection } from '@gjsify/adwaita-core';
+import type { AdwMenuActions, AdwMenuModel, SplitButtonDirection } from '@gjsify/adwaita-core';
 
+import { MenuSlot } from './menu-slot.js';
 import { PopoverMenuView } from './popover-menu.js';
 
 // SIDE-EFFECT import, deliberately separate from the type import below: it guarantees
@@ -69,7 +65,10 @@ const POPOVER_POSITIONS = {
 export class GtkMenuButton extends WidgetElement {
     private _buttonEl!: HTMLButtonElement;
     private _popoverEl!: GtkPopover;
-    private _model: AdwMenuModel = [];
+    /** The model, its tree snapshot and its `items-changed` subscription (ADR 0128). */
+    private readonly _slot = new MenuSlot(() => {
+        if (this._initialized) this._renderMenu();
+    });
     private _actions: AdwMenuActions | null = null;
     private _menuTitle = '';
     private _initialized = false;
@@ -84,74 +83,46 @@ export class GtkMenuButton extends WidgetElement {
         return this._popoverEl?.open ?? false;
     }
 
-    /** The menu, normalised (ADR 0042). Setting rebuilds the popover. */
-    get menuModel(): AdwMenuModel {
-        return this._model;
+    /**
+     * The menu this button pops up, BY IDENTITY — the model itself, `null` when there is
+     * none, exactly as `gtk_menu_button_get_menu_model` answers (ADR 0128).
+     *
+     * It no longer answers an array, and `[]` is no longer how "no menu" is spelled: an
+     * EMPTY model is a menu that GTK still builds a popover for, and `null` is the one
+     * spelling of its absence (measured, `MENU_MODEL_DOOR_VECTORS`).
+     */
+    get menuModel(): AdwMenuModel | null {
+        return this._slot.model;
     }
 
     /**
-     * Set the menu from anything the portable model accepts. Refused HERE, at the
-     * assignment, for a `custom` item this surface cannot host — see the split button's
-     * note on the same setter.
+     * Take a real model, a JSON string in the portable spelling, or `null`. Refused HERE,
+     * at the assignment, for a `custom` item this surface cannot host — {@link MenuSlot}
+     * owns both doors and the note on why they refuse differently.
      */
-    set menuModel(value: AdwMenuInput) {
-        this._model = this._acceptMenu(value);
+    set menuModel(value: AdwMenuModel | string | null) {
+        this._slot.write(value);
         if (this._initialized) this._renderMenu();
+        this._notifyModel();
     }
 
     /** `Gtk.MenuButton:menu-model` — the GIR spelling of {@link menuModel}. */
-    get menu_model(): AdwMenuModel {
+    get menu_model(): AdwMenuModel | null {
         return this.menuModel;
     }
 
-    set menu_model(value: AdwMenuInput) {
+    set menu_model(value: AdwMenuModel | string | null) {
         this.menuModel = value;
     }
 
-    get_menu_model(): AdwMenuModel {
+    get_menu_model(): AdwMenuModel | null {
         return this.menuModel;
     }
 
-    set_menu_model(value: AdwMenuInput): void {
+    set_menu_model(value: AdwMenuModel | string | null): void {
         this.menuModel = value;
     }
 
-    /**
-     * Normalise, REFUSE, store — the one door every menu comes through.
-     *
-     * The property setter is not the only way a menu arrives: an attribute is, and the
-     * first cut refused only the setter, so a `custom` item written in markup drew
-     * exactly the row `assertMenuRenderable` exists to prevent — one that reads like a
-     * command and does nothing.
-     *
-     * THE TWO DOORS REFUSE DIFFERENTLY, and the difference is which side can hear it.
-     * A property assignment is a CALL, so it throws and the caller can catch. An
-     * attribute is MARKUP, parsed by the browser: a throw from `connectedCallback` is
-     * not delivered to whoever appended the element, it is reported as an uncaught
-     * page error — measured, it broke `adwaita-upgrade-order.spec.ts`, which counts
-     * exactly those. Nobody can handle it and everybody else pays for it. So the
-     * attribute path REFUSES THE MENU (no menu, and a menu-less dropdown is
-     * insensitive, which is visible) and says why on `console.error`.
-     *
-     * A REFUSAL AND A TYPO ARE STILL DIFFERENT THINGS. `parseMenuModel` is total
-     * because malformed JSON is an author slip and must not stop the element
-     * upgrading; `custom` is well-formed, deliberate, and unhonourable here.
-     */
-    private _acceptMenu(input: AdwMenuInput, strict = true): AdwMenuModel {
-        const model = normalizeMenuModel(input);
-        if (strict) {
-            assertMenuRenderable(model, ADW_MENU_SURFACE_WEB);
-            return model;
-        }
-        const refusals = menuRefusals(model, ADW_MENU_SURFACE_WEB);
-        if (refusals.length === 0) return model;
-        // `console.error` is the browser's own channel for "this is wrong, the page
-        // continues" — and the alternative here is a row that lies.
-        console.error(`${ADW_MENU_SURFACE_WEB.name} cannot render this menu, so it has none:`);
-        for (const refusal of refusals) console.error(`  [${refusal.path.join('.')}] ${refusal.message}`);
-        return [];
-    }
-
     /**
      * What the action group publishes about the actions this menu names — the portable
      * stand-in for a `GActionGroup`, and the only source of a menu's enabled/checked
@@ -212,7 +183,7 @@ export class GtkMenuButton extends WidgetElement {
         this._popoverEl.subscribe((open) => this._onPopoverToggled(open));
 
         this._menuView = new PopoverMenuView(this._popoverEl, 'adw-menu-button', (path) => {
-            const item = menuItemAt(this._model, path);
+            const item = menuItemAt(this._slot.tree, path);
             if (item === null) return;
             this._popoverEl.popdown();
             this._buttonEl.focus();
@@ -229,12 +200,14 @@ export class GtkMenuButton extends WidgetElement {
         this._buttonEl.addEventListener('click', () => {
             if (this.hasAttribute('disabled')) return;
             // Nothing to show is not a menu — never open an empty popover.
-            if (!this._popoverEl.open && this._model.length === 0) return;
+            if (!this._popoverEl.open && this._slot.isEmpty) return;
             this._popoverEl.open = !this._popoverEl.open;
         });
 
-        // Seed the menu from the attribute if the property was not set.
-        if (this._model.length === 0) this._model = this._parseMenuAttr();
+        // Seed the menu from the attribute if the property was not set — and "not set"
+        // is now the ABSENCE of a model, not an empty one, since an empty model is a
+        // menu an author may have handed over deliberately.
+        if (this._slot.model === null) this._slot.writeMarkup(this.getAttribute('menu-model'));
         // The flat default is set only now the DOM exists, so the observed-attribute
         // callback (which renders) never runs before `_buttonEl` is created.
         if (!this.hasAttribute('flat') && !this.hasAttribute('circular')) this.setAttribute('flat', '');
@@ -244,25 +217,14 @@ export class GtkMenuButton extends WidgetElement {
     attributeChangedCallback(name: string) {
         if (!this._initialized || !this._buttonEl) return;
         if (name === 'menu-model') {
-            this._model = this._parseMenuAttr();
+            this._slot.writeMarkup(this.getAttribute('menu-model'));
             this._renderMenu();
+            this._notifyModel();
             return;
         }
         this._render();
     }
 
-    /**
-     * The `menu-model` attribute, through the core parser both elements share.
-     *
-     * The copy this replaces was weaker in a way markup can reach: it kept `id` and
-     * `icon` WHATEVER their runtime type, so `{"label":"Open","id":7}` produced an
-     * entry whose `id` is a number in a field typed `string` — and `id` is what the
-     * activation event reports. The core parser keeps only string-typed attributes.
-     */
-    private _parseMenuAttr(): AdwMenuModel {
-        return this._acceptMenu(parseMenuModel(this.getAttribute('menu-model')), false);
-    }
-
     private _onPopoverToggled(open: boolean): void {
         this.classList.toggle('active', open);
         this._buttonEl.setAttribute('aria-expanded', String(open));
@@ -295,15 +257,31 @@ export class GtkMenuButton extends WidgetElement {
 
     /** The registry's answer, unless the application wrote `actions` itself (ADR 0097 § 2). */
     private _refreshActions(): void {
-        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, this._model));
+        this._menuView.setActions(this._actions ?? menuActionsOfElement(this, this._slot.tree));
         this._menuView.render();
     }
 
+    /**
+     * `gtk_menu_button_set_menu_model` notifies UNCONDITIONALLY — no identity guard, so the
+     * same model written twice notifies twice and `null` over `null` notifies as well
+     * (measured, `MENU_MODEL_NOTIFY_VECTORS`). Its `Adw.SplitButton` sibling guards on
+     * pointer equality, and the two disagree on purpose: a port with one rule for both is
+     * wrong about one of them.
+     *
+     * A MUTATION of the held model is not a write and notifies nothing — it arrives over
+     * `items-changed`, where it redraws the rows and stops.
+     */
+    private _notifyModel(): void {
+        this.dispatchEvent(
+            new CustomEvent('notify::menu-model', { bubbles: true, detail: { menuModel: this._slot.model } }),
+        );
+    }
+
     private _renderMenu(): void {
-        this._menuView.setMenuModel(this._model);
+        this._menuView.setMenuTree(this._slot.tree);
         this._menuView.setTitle(this.getAttribute('menu-title') ?? this._menuTitle);
         this._menuView.render();
-        if (this._model.length === 0) this._popoverEl.popdown();
+        if (this._slot.isEmpty) this._popoverEl.popdown();
     }
 }