@gjsify/adwaita-web 0.63.0 → 0.63.1-next.235

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.63.0",
+    "version": "0.63.1-next.235",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -58,14 +58,14 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.63.0",
-        "@gjsify/adwaita-fonts": "^0.63.0",
-        "@gjsify/adwaita-icons": "^0.63.0",
-        "@gjsify/gtksource-core": "^0.63.0",
+        "@gjsify/adwaita-core": "0.63.1-next.235",
+        "@gjsify/adwaita-fonts": "0.63.1-next.235",
+        "@gjsify/adwaita-icons": "0.63.1-next.235",
+        "@gjsify/gtksource-core": "0.63.1-next.235",
         "@lezer/highlight": "^1.2.3"
     },
     "peerDependencies": {
-        "@gjsify/app-settings": "^0.63.0"
+        "@gjsify/app-settings": "0.63.1-next.235"
     },
     "peerDependenciesMeta": {
         "@gjsify/app-settings": {
@@ -73,11 +73,11 @@
         }
     },
     "devDependencies": {
-        "@gjsify/app-settings": "^0.63.0",
-        "@gjsify/blueprint": "^0.63.0",
-        "@gjsify/cli": "^0.63.0",
-        "@gjsify/unit": "^0.63.0",
-        "@gjsify/vite-plugin-blueprint": "^0.63.0",
+        "@gjsify/app-settings": "0.63.1-next.235",
+        "@gjsify/blueprint": "0.63.1-next.235",
+        "@gjsify/cli": "0.63.1-next.235",
+        "@gjsify/unit": "0.63.1-next.235",
+        "@gjsify/vite-plugin-blueprint": "0.63.1-next.235",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },
@@ -114,5 +114,6 @@
     "bugs": {
         "url": "https://github.com/gjsify/gjsify/issues"
     },
-    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme"
+    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/web/adwaita-web#readme",
+    "gitHead": "9d2cca56170a0215b3e0792e98421ed1f83e7f72"
 }

package/scss/_window.scss

@@ -35,6 +35,11 @@ adw-application-window {
     outline: none;
     box-shadow: none;
   }
+
+  // `present()` and `hide-on-close` toggle `hidden`, which `display: flex` would override.
+  &[hidden] {
+    display: none;
+  }
 }
 
 // The content area — the one child slot `Adw.Window:content` fills. It takes the
@@ -64,8 +69,8 @@ adw-application-window {
 // through a selector list: `_reset.scss` re-roots the box model at each registered element,
 // and a shared `adw-window, gtk-window` block would put two component resets in one rule.
 //
-// NOT the same as `<adw-window>`, deliberately. `Adw.Window` is a plain styled container —
-// nothing about it is GTK's `GtkWindow` — while this one answers the FRAME properties:
+// NOT the same as `<adw-window>`, deliberately. `Adw.Window` extends `GtkWindow` but has no
+// titlebar area, while this one answers the FRAME properties:
 // `decorated` drops the titlebar strip, `maximized` and `fullscreened` square the corners
 // off and drop the shadow (`_window.scss:66-72`), and the strip itself is either the
 // application's `titlebar` or the two `<gtk-window-controls>` a server-side decoration would

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

@@ -7,6 +7,9 @@
 // `Adw.Window` plus `Gtk.ApplicationWindow:show-menubar`, so the window half is
 // <adw-window>'s spec and only the delta is asserted here.
 import { describe, it, expect } from '@gjsify/unit';
+import { driveWindowVectors, WINDOW_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import { webWindowSubject } from './gtk-window.spec.js';
 
 import type { AdwApplicationWindow } from './elements/adw-application-window.js';
 
@@ -30,6 +33,11 @@ function makeWindow(model: unknown = MENU_MODEL): AdwApplicationWindow {
 }
 
 export const AdwApplicationWindowTest = async () => {
+    // `Adw.Window` IS a `Gtk.Window` upstream: the same vectors that run against real GTK and
+    // <gtk-window> must hold here, or the state members have fallen off the subclass again.
+    const { subject, dispose } = webWindowSubject('adw-application-window');
+    await driveWindowVectors(subject, { describe, it, expect }, WINDOW_VECTORS);
+    dispose();
     await describe('adw-application-window is an adw-window', async () => {
         await it('places children in the inherited content area', async () => {
             const win = makeWindow();

package/src/adw-data-grid.spec.ts

@@ -33,6 +33,17 @@ export const AdwDataGridTest = async () => {
             grid.remove();
         });
 
+        await it('set_columns / set_rows are the same properties, the spelling the NativeScript port shares', async () => {
+            const grid = makeGrid();
+            grid.set_columns(BWA_COLUMNS);
+            grid.set_rows([{ position: 'Umsatz', total: '1' }]);
+            expect(grid.get_columns().map((column) => column.key)).toStrictEqual(['position', 'total']);
+            expect(grid.columns).toBe(grid.get_columns());
+            expect(grid.get_rows().length).toBe(1);
+            expect(grid.querySelectorAll('.adw-data-grid-row:not(.header)').length).toBe(1);
+            grid.remove();
+        });
+
         await it('falls back to the key when no label is given', async () => {
             const grid = makeGrid([{ key: 'amount' }], []);
             const cell = grid.querySelector('.adw-data-grid-row.header .adw-data-grid-cell');

package/src/adw-window.spec.ts

@@ -4,6 +4,9 @@
 // these specs create elements via document.createElement and assert their DOM
 // behaviour (content area, breakpoints, dialog tracking).
 import { describe, it, expect } from '@gjsify/unit';
+import { driveWindowVectors, WINDOW_VECTORS } from '@gjsify/adwaita-core/conformance';
+
+import { webWindowSubject } from './gtk-window.spec.js';
 
 import type { AdwWindow } from './elements/adw-window.js';
 
@@ -22,6 +25,11 @@ function settle(): Promise<void> {
 }
 
 export const AdwWindowTest = async () => {
+    // `Adw.Window` IS a `Gtk.Window` upstream: the same vectors that run against real GTK and
+    // <gtk-window> must hold here, or the state members have fallen off the subclass again.
+    const { subject, dispose } = webWindowSubject('adw-window');
+    await driveWindowVectors(subject, { describe, it, expect }, WINDOW_VECTORS);
+    dispose();
     await describe('adw-window content', async () => {
         await it('places children in the content area', async () => {
             const win = makeWindow('<p id="hello">Hello</p>');

package/src/application.spec.ts

@@ -23,7 +23,7 @@ const made: Element[] = [];
 const scene: ApplicationScene = {
     window(app) {
         const window = document.createElement('adw-application-window') as Adw.ApplicationWindow;
-        window.application = app;
+        window.application = app as unknown as Gtk.Application;
         document.body.append(window);
         made.push(window);
         return window;

package/src/bottom-sheet.spec.ts

@@ -558,6 +558,15 @@ export const AdwBottomSheetTest = async () => {
             sheet.remove();
         });
 
+        await it('get_modal / set_modal are the same property, the spelling the NativeScript port shares', () => {
+            const sheet = mountSheet();
+            sheet.set_modal(false);
+            expect(sheet.modal).toBe(false);
+            expect(sheet.get_modal()).toBe(false);
+            expect(sheet.classList.contains('modal')).toBe(false);
+            sheet.remove();
+        });
+
         await it('the dimming layer becomes interactive only while open AND modal', () => {
             const sheet = mountSheet();
             expect(dimming(sheet).classList.contains('visible')).toBe(false);

package/src/canvas2d/canvas2d-bridge.ts

@@ -16,7 +16,23 @@
 
 import { registerTemplateClass } from '../template-classes.js';
 
-type ReadyCallback = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) => void;
+/**
+ * The DOM types this element names, resolved through `globalThis` so the published `.d.ts`
+ * never names a `lib.dom` type directly: a consumer that loads `lib.dom` gets the real ones,
+ * one that does not still type-checks the declarations with `skipLibCheck: false`.
+ */
+export type BridgeCanvas = typeof globalThis extends { HTMLCanvasElement: { prototype: infer T } } ? T : object;
+export type BridgeContext2D = typeof globalThis extends { CanvasRenderingContext2D: { prototype: infer T } }
+    ? T
+    : object;
+/** `FrameRequestCallback` without `lib.dom`. */
+export type FrameCallback = (time: number) => void;
+type ElementConstructor = typeof globalThis extends { HTMLElement: infer C } ? C : abstract new () => object;
+
+// biome-ignore lint: the annotation, not the value, is what the declaration file keeps
+const HostElement: ElementConstructor = (globalThis as { HTMLElement?: unknown }).HTMLElement as ElementConstructor;
+
+type ReadyCallback = (canvas: BridgeCanvas, ctx: BridgeContext2D) => void;
 type ResizeCallback = (width: number, height: number) => void;
 type SignalHandler = (emitter: Canvas2DBridgeElement, ...args: unknown[]) => unknown;
 
@@ -25,18 +41,18 @@ const TAG = 'gjsify-canvas2d-bridge';
 /** `G_MAXINT`, the top of `g_param_spec_int`'s range. */
 const MAX_INT = 2147483647;
 
-function intAttribute(element: HTMLElement, name: string): number {
+function intAttribute(element: Element, name: string): number {
     const raw = Number.parseInt(element.getAttribute(name) ?? '', 10);
     return Number.isFinite(raw) ? raw : 0;
 }
 
-export class Canvas2DBridgeElement extends HTMLElement {
+export class Canvas2DBridgeElement extends HostElement {
     static readonly GTypeName = 'GjsifyCanvas2DBridge';
     /** The signals `connect()` accepts, as `Gtk.Widget` names them. */
     static readonly signals: Record<string, string> = { resize: 'resize' };
 
-    private _canvas: HTMLCanvasElement | null = null;
-    private _ctx: CanvasRenderingContext2D | null = null;
+    private _canvas: BridgeCanvas | null = null;
+    private _ctx: BridgeContext2D | null = null;
     private _readyCallbacks: ReadyCallback[] = [];
     private _resizeCallbacks: ResizeCallback[] = [];
     private _handlers = new Map<number, { signal: string; handler: SignalHandler }>();
@@ -89,12 +105,12 @@ export class Canvas2DBridgeElement extends HTMLElement {
     }
 
     /** The `<canvas>` backing this widget. Available after the first allocation. */
-    get canvas(): HTMLCanvasElement | null {
+    get canvas(): BridgeCanvas | null {
         return this._canvas;
     }
 
     /** The browser's own 2D context; available after the first allocation. */
-    getContext(_id: '2d'): CanvasRenderingContext2D | null {
+    getContext(_id: '2d'): BridgeContext2D | null {
         return this._ctx;
     }
 
@@ -113,7 +129,7 @@ export class Canvas2DBridgeElement extends HTMLElement {
     }
 
     /** The browser's own, here only so the call reads the same on every target. */
-    requestAnimationFrame(cb: FrameRequestCallback): number {
+    requestAnimationFrame(cb: FrameCallback): number {
         return globalThis.requestAnimationFrame(cb);
     }
 

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

@@ -23,8 +23,9 @@
 //   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)
 //
-// Extends <adw-window> and adds nothing else: the content property, the size request,
-// the breakpoints and the dialog bookkeeping are all inherited.
+// 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
+// breakpoints and the dialog bookkeeping are the same AdwWindowFeatures <adw-window> uses.
 //
 // Reference: refs/libadwaita/src/adw-application-window.c (the class adds no behaviour)
 // Reference: Gtk-4.0.gir `Gtk.ApplicationWindow:show-menubar` ("If this property is true,
@@ -40,21 +41,56 @@ import {
     type AdwMenuModel,
 } from '@gjsify/adwaita-core';
 
-import { AdwWindow } from './adw-window.js';
+import type { AdwBreakpoint } from '@gjsify/adwaita-core';
+import type { AdwSlot } from '../slotted-children.js';
+import { AdwWindowFeatures } from './adw-window-features.js';
+import { GtkApplicationWindow } from './gtk-application-window.js';
 import { defineWindowApplication } from '../application.js';
 
-export class AdwApplicationWindow extends AdwWindow {
-    /** `Gtk.Window:application`: setting it is `add_window` (ADR 0098), set by `defineWindowApplication`. */
-    declare application: object | null;
-    private _menubarEl: HTMLDivElement | null = null;
+export class AdwApplicationWindow extends GtkApplicationWindow {
+    private readonly _features = new AdwWindowFeatures(this);
     private _model: AdwMenuModel = [];
+    private _menubarEl: HTMLDivElement | null = null;
 
     // The base's list BY NAME, not `super.observedAttributes`: `AdwPasswordEntryRow`
     // spells its spread this way and the attribute readers follow (`adwaita-elements.mjs`
     // resolves a `[...Base.observedAttributes]` spread across files, and reports a
     // `super` one as unreadable rather than as empty).
     static get observedAttributes(): string[] {
-        return [...AdwWindow.observedAttributes, 'show-menubar', 'menu-model'];
+        return [...GtkApplicationWindow.observedAttributes, 'width', 'height', 'menu-model'];
+    }
+
+    /** The content area — the Adw.Window:content property. */
+    get contentArea(): HTMLDivElement {
+        return this._content;
+    }
+
+    get content(): HTMLElement | null {
+        return this._features.content;
+    }
+
+    set content(value: HTMLElement | null) {
+        this._features.content = value;
+    }
+
+    get breakpoints(): readonly AdwBreakpoint[] {
+        return this._features.breakpoints;
+    }
+
+    get currentBreakpoint(): AdwBreakpoint | null {
+        return this._features.currentBreakpoint;
+    }
+
+    get dialogs(): readonly HTMLElement[] {
+        return this._features.dialogs;
+    }
+
+    get visibleDialog(): HTMLElement | null {
+        return this._features.visibleDialog;
+    }
+
+    addBreakpoint(condition: string): AdwBreakpoint {
+        return this._features.addBreakpoint(condition);
     }
 
     /** Whether this window shows the application's menubar (Gtk.ApplicationWindow:show-menubar). */
@@ -84,17 +120,45 @@ export class AdwApplicationWindow extends AdwWindow {
 
     connectedCallback() {
         super.connectedCallback();
-        this._buildMenubar();
+        this._features.adopt(this._content);
+        // EVERY connect, not only the first — see `AdwWindowFeatures.bind`.
+        this._features.bind();
+    }
+
+    disconnectedCallback() {
+        this._features.release();
+        super.disconnectedCallback();
     }
 
     attributeChangedCallback(name: string) {
+        if (name === 'width' || name === 'height') {
+            this.renderFrameSize();
+            return;
+        }
         super.attributeChangedCallback(name);
         // 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'));
-        // Before the first connect the menubar does not exist yet, and `_buildMenubar`
-        // renders from the model this has just read — so nothing is built twice.
-        if (name === 'show-menubar' || name === 'menu-model') this._renderMenubar();
+        if (name === 'menu-model') {
+            this._model = parseMenuModel(this.getAttribute('menu-model'));
+            this._renderMenubar();
+        }
+    }
+
+    /** `Adw.ApplicationWindow` has no titlebar of its own, like `Adw.Window`. */
+    protected override hasTitlebar(): boolean {
+        return false;
+    }
+
+    protected override strips(): Node[] {
+        return [this._content];
+    }
+
+    protected override extraSlots(): AdwSlot[] {
+        return [{ name: 'content', into: this._content }];
+    }
+
+    protected override renderFrameSize(): void {
+        this._features.applySizeRequest();
     }
 
     /**
@@ -104,17 +168,23 @@ export class AdwApplicationWindow extends AdwWindow {
      * into the content area, so a sibling would be re-homed into it one tick later. The
      * content area's own children are not watched, so prepending here is stable — and
      * it is also where the bar belongs: above the toolbar view, inside the window box.
+     * Replaces the base's observer: this bar is filled from the model, not from a slot,
+     * and observing it would re-trigger every render.
      */
-    private _buildMenubar() {
-        if (this._menubarEl) return;
-        this._menubarEl = document.createElement('div');
-        this._menubarEl.className = 'adw-application-window-menubar';
-        this.contentArea.prepend(this._menubarEl);
-
+    protected override _followMenubar(): void {
+        if (this._menubarEl === null) {
+            this._menubarEl = document.createElement('div');
+            this._menubarEl.className = 'adw-application-window-menubar';
+            this._content.prepend(this._menubarEl);
+        }
         this._renderMenubar();
     }
 
-    private _renderMenubar(): void {
+    protected override menubarSection(): HTMLDivElement {
+        return this._menubarEl ?? super.menubarSection();
+    }
+
+    protected override _renderMenubar(): void {
         const bar = this._menubarEl;
         if (bar === null) return;
 

package/src/elements/adw-bottom-sheet.ts

@@ -110,6 +110,15 @@ export class AdwBottomSheet extends HTMLElement {
         this._setBoolAttr('modal', value);
     }
 
+    /** `adw_bottom_sheet_get_modal` — the NativeScript port's only door to it (ADR 0112). */
+    get_modal(): boolean {
+        return this.modal;
+    }
+
+    set_modal(modal: boolean): void {
+        this.modal = modal;
+    }
+
     /** Whether the user can dismiss the sheet (dimming / Escape / sheet.close). */
     get canClose(): boolean {
         return this._state.canClose;

package/src/elements/adw-data-grid.ts

@@ -111,6 +111,24 @@ export class AdwDataGrid extends HTMLElement {
         if (this._initialized) this._render();
     }
 
+    // The verbs are the spelling the NativeScript port has to use, where `GridLayout` owns both
+    // accessor names (ADR 0112); offered here too so one code-behind runs on both.
+    get_columns(): AdwDataGridColumn[] {
+        return this.columns;
+    }
+
+    set_columns(value: ReadonlyArray<AdwDataGridColumn>): void {
+        this.columns = value;
+    }
+
+    get_rows(): AdwDataGridRow[] {
+        return this.rows;
+    }
+
+    set_rows(value: ReadonlyArray<AdwDataGridRow>): void {
+        this.rows = value;
+    }
+
     /** The optional grid caption/title (reflected to the attribute). */
     get caption(): string {
         return this.getAttribute('caption') ?? '';

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

@@ -0,0 +1,128 @@
+// What `Adw.Window` and `Adw.ApplicationWindow` add on top of their Gtk parent: the content
+// area, the breakpoints and the open-dialog bookkeeping.
+//
+// A HELPER, NOT A BASE CLASS. Upstream `AdwWindow` extends `GtkWindow` and `AdwApplicationWindow`
+// extends `GtkApplicationWindow` (Adw-1.gir), so the two cannot share an Adw base without one of
+// them losing its Gtk parent. A custom element has one prototype chain, so the shared part is
+// composed in: each class owns one of these and forwards to it.
+//
+// Reference: refs/libadwaita/src/adw-window.c
+// Copyright (c) 2020-2023 Alice Mikhaylenko / Purism SPC (libadwaita). LGPLv2.1+
+// Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
+
+import { AdwBreakpoint } from '@gjsify/adwaita-core';
+import { addBreakpoints } from '../breakpoints.js';
+
+/** The default minimum size of an AdwWindow, from adw_window_init (C:344). */
+const DEFAULT_WIDTH = 360;
+const DEFAULT_HEIGHT = 200;
+
+export class AdwWindowFeatures {
+    private _contentEl: HTMLDivElement | null = null;
+    private _breakpoints: AdwBreakpoint[] = [];
+    private _disposeBreakpoints: (() => void) | null = null;
+    private _openDialogs: HTMLElement[] = [];
+
+    constructor(private readonly _host: HTMLElement) {}
+
+    /** The content area, or `null` before the window is first connected. */
+    get contentArea(): HTMLDivElement | null {
+        return this._contentEl;
+    }
+
+    /** The content widget — the first child of the content area. */
+    get content(): HTMLElement | null {
+        return (this._contentEl?.firstElementChild as HTMLElement | null) ?? null;
+    }
+
+    set content(value: HTMLElement | null) {
+        if (value) this._contentEl?.appendChild(value);
+    }
+
+    get breakpoints(): readonly AdwBreakpoint[] {
+        return this._breakpoints;
+    }
+
+    get currentBreakpoint(): AdwBreakpoint | null {
+        return this._breakpoints.find((bp) => bp.applied) ?? null;
+    }
+
+    get dialogs(): readonly HTMLElement[] {
+        // A dialog taken out of the document never raises `notify::open` on the way
+        // out, so a dialog that was REMOVED while open would otherwise stay listed
+        // for the rest of the window's life.
+        this._openDialogs = this._openDialogs.filter((dialog) => dialog.isConnected);
+        return this._openDialogs;
+    }
+
+    get visibleDialog(): HTMLElement | null {
+        const dialogs = this.dialogs;
+        return dialogs.length > 0 ? (dialogs[dialogs.length - 1] as HTMLElement) : null;
+    }
+
+    /**
+     * Take the content area the Gtk parent built, once. Tracks open dialogs presented inside
+     * the window: an AdwDialog raises `notify::open`, which bubbles to the host.
+     */
+    adopt(contentEl: HTMLDivElement): void {
+        if (this._contentEl !== null) return;
+        this._contentEl = contentEl;
+        contentEl.classList.add('adw-window-content');
+        this._host.addEventListener('notify::open', (e) => {
+            const dialog = e.target as HTMLElement;
+            if (dialog === this._host) return;
+            if (dialog.hasAttribute('open')) {
+                if (!this._openDialogs.includes(dialog)) this._openDialogs.push(dialog);
+            } else {
+                this._openDialogs = this._openDialogs.filter((d) => d !== dialog);
+            }
+        });
+    }
+
+    /**
+     * Add a breakpoint (adw_window_add_breakpoint). The breakpoint evaluates against the
+     * window's own box and sets a `data-breakpoint` attribute when applied.
+     */
+    addBreakpoint(condition: string): AdwBreakpoint {
+        const host = this._host;
+        const bp = new AdwBreakpoint(condition, {
+            onApply: () => (host.dataset.breakpoint = condition),
+            onUnapply: () => {
+                if (host.dataset.breakpoint === condition) delete host.dataset.breakpoint;
+            },
+        });
+        this._breakpoints.push(bp);
+        // Re-evaluated against a box that may have changed since the last add.
+        this.bind();
+        return bp;
+    }
+
+    /**
+     * Bind the breakpoints to THIS box.
+     *
+     * NOT once per lifetime: `release` drops the disposer, so a window moved between
+     * parents would come back deaf — and a window is exactly the thing a client-side route
+     * change re-parents. Re-binding is cheap and idempotent, and it re-measures the new box.
+     */
+    bind(): void {
+        this._disposeBreakpoints?.();
+        this._disposeBreakpoints = null;
+        if (this._contentEl !== null && this._breakpoints.length > 0) {
+            this._disposeBreakpoints = addBreakpoints(this._host, this._breakpoints);
+        }
+    }
+
+    release(): void {
+        this._disposeBreakpoints?.();
+        this._disposeBreakpoints = null;
+    }
+
+    /** The window's size request — GTK's, not CSS's, so an absent attribute means the default. */
+    applySizeRequest(): void {
+        const host = this._host;
+        const width = host.getAttribute('default-width') ?? host.getAttribute('width');
+        const height = host.getAttribute('default-height') ?? host.getAttribute('height');
+        host.style.width = width ? `${width}px` : `${DEFAULT_WIDTH}px`;
+        host.style.height = height ? `${height}px` : `${DEFAULT_HEIGHT}px`;
+    }
+}