@gjsify/adwaita-web 0.60.0 → 0.61.0

package/src/platform-host.ts

@@ -0,0 +1,88 @@
+// How the web door reaches the platform for `Gtk.StyleContext`, `Gtk.Settings`, `Gtk.show_uri` and
+// `Gtk.EventControllerKey` (the behaviour is in `@gjsify/adwaita-core`, `gtk-platform.ts`).
+//
+//   - styles: one `<style>` element per provider, kept in priority order at the end of `<head>`.
+//   - uris: `window.open` with `noopener`; a popup blocker may refuse it outside a user gesture.
+//   - keys: `keydown` / `keyup` on the element; a handled key gets `preventDefault()`.
+
+import type { HostKeyEvent, PlatformHost } from '@gjsify/adwaita-core';
+
+const SHIFT_MASK = 1 << 0;
+const CONTROL_MASK = 1 << 2;
+const ALT_MASK = 1 << 3;
+const SUPER_MASK = 1 << 26;
+
+const sheets = new Map<object, HTMLStyleElement>();
+
+function modifierState(event: KeyboardEvent): number {
+    return (
+        (event.shiftKey ? SHIFT_MASK : 0) |
+        (event.ctrlKey ? CONTROL_MASK : 0) |
+        (event.altKey ? ALT_MASK : 0) |
+        (event.metaKey ? SUPER_MASK : 0)
+    );
+}
+
+export const webPlatformHost: PlatformHost = {
+    setStyles(list) {
+        if (typeof document === 'undefined') return;
+        const keep = new Set(list.map((entry) => entry.owner));
+        for (const [owner, element] of sheets) {
+            if (keep.has(owner)) continue;
+            element.remove();
+            sheets.delete(owner);
+        }
+        // Re-appending in order is what makes the later sheet win at equal specificity.
+        for (const { owner, css, priority } of list) {
+            let element = sheets.get(owner);
+            if (!element) {
+                element = document.createElement('style');
+                sheets.set(owner, element);
+            }
+            element.dataset.gtkPriority = String(priority);
+            if (element.textContent !== css) element.textContent = css;
+            document.head.append(element);
+        }
+    },
+
+    openUri(uri) {
+        if (typeof window === 'undefined') return;
+        window.open(uri, '_blank', 'noopener');
+    },
+
+    fontName() {
+        if (typeof document === 'undefined' || !document.body) return null;
+        const style = getComputedStyle(document.body);
+        const family = style.fontFamily
+            .split(',')[0]
+            ?.trim()
+            .replace(/^["']|["']$/g, '');
+        const px = Number.parseFloat(style.fontSize);
+        if (!family || !Number.isFinite(px)) return null;
+        return `${family} ${Math.round(px * 0.75 * 10) / 10}`;
+    },
+
+    listenKeys(widget, handler) {
+        const element = widget as HTMLElement;
+        // A bare element takes no keys until it can be focused.
+        if (!element.hasAttribute('tabindex')) element.setAttribute('tabindex', '-1');
+        const listen = (pressed: boolean) => (event: Event) => {
+            const key = event as KeyboardEvent;
+            const host: HostKeyEvent = {
+                key: key.key,
+                keycode: key.keyCode,
+                state: modifierState(key),
+                pressed,
+            };
+            if (handler(host)) key.preventDefault();
+        };
+        const down = listen(true);
+        const up = listen(false);
+        element.addEventListener('keydown', down);
+        element.addEventListener('keyup', up);
+        return () => {
+            element.removeEventListener('keydown', down);
+            element.removeEventListener('keyup', up);
+        };
+    },
+};

package/src/shared-tree-builder.ts

@@ -420,11 +420,51 @@ function writeLook(el: HTMLElement, node: SharedTreeNode, menus?: SharedTreeNode
     writeExtensions(el, node);
 }
 
+/** The `GtkGridLayoutChild` properties `layout { }` may carry, and the CSS Grid line each one is. */
+const GRID_CELL: Readonly<Record<string, { property: 'gridRow' | 'gridColumn'; span: boolean }>> = {
+    row: { property: 'gridRow', span: false },
+    column: { property: 'gridColumn', span: false },
+    'row-span': { property: 'gridRow', span: true },
+    'column-span': { property: 'gridColumn', span: true },
+};
+
+/**
+ * ADR 0092's `layout { }`: the child's cell in a `Gtk.Grid`. GTK counts from 0 and CSS Grid from 1,
+ * and a span is `span N` after the start line. The one layout manager here is the grid, so a
+ * layout under any other parent, a key the grid child has no spelling for, or a value that is not
+ * a whole number is REFUSED by name: the cell would otherwise be dropped at exit 0.
+ */
+function writeGridCell(parent: HTMLElement, childEl: HTMLElement, child: SharedTreeNode): void {
+    const layout = child.layout ?? {};
+    if (parent.localName !== 'gtk-grid') {
+        throw new Error(
+            `layout (${Object.keys(layout).join(', ')}) on \`${child.tag}\` under \`${parent.localName}\`: ` +
+                "this renderer's only layout manager is the grid, so the placement would be dropped.",
+        );
+    }
+    const cell = { row: 0, column: 0, 'row-span': 1, 'column-span': 1 } as Record<string, number>;
+    for (const [key, value] of Object.entries(layout)) {
+        if (GRID_CELL[key] === undefined) {
+            throw new Error(
+                `layout \`${key}\` on \`${child.tag}\` reaches nothing: a grid child takes ` +
+                    `${Object.keys(GRID_CELL).join(', ')}.`,
+            );
+        }
+        if (typeof value !== 'number' || !Number.isInteger(value)) {
+            throw new Error(`layout \`${key}: ${String(value)}\` on \`${child.tag}\` is not a whole number.`);
+        }
+        cell[key] = value;
+    }
+    childEl.style.gridRow = `${cell.row + 1} / span ${cell['row-span']}`;
+    childEl.style.gridColumn = `${cell.column + 1} / span ${cell['column-span']}`;
+}
+
 /** The built children of `node`, placed (`page`, `slot`) but not yet appended to `el`. */
 function buildChildren(el: HTMLElement, node: SharedTreeNode, record: BuildRecord): HTMLElement[] {
     const built: HTMLElement[] = [];
     for (const child of node.children ?? []) {
         const childEl = buildNode(child, record);
+        if (child.layout !== undefined) writeGridCell(el, childEl, child);
         if (child.page !== undefined) writePage(el, childEl, child);
         if (child.slot !== undefined) {
             childEl.setAttribute('slot', child.slot);

package/src/shared-trees.spec.ts

@@ -364,6 +364,42 @@ export const AdwSharedTreesTest = async () => {
             ).toThrow('has no slot "middle"');
         });
 
+        // ADR 0092's `layout { }`: a grid child's cell. GTK counts from 0, CSS Grid from 1.
+        await it('`layout { }` places a grid child in its cell, spans defaulting to one', () => {
+            mounted(
+                {
+                    tag: 'GtkGrid',
+                    children: [
+                        { tag: 'GtkLabel', id: 'a', layout: { row: 0, column: 0 } },
+                        { tag: 'GtkLabel', id: 'b', layout: { row: 1, column: 1, 'column-span': 2 } },
+                    ],
+                },
+                (root) => {
+                    const a = root.querySelector<HTMLElement>('#a')!;
+                    const b = root.querySelector<HTMLElement>('#b')!;
+                    expect(a.style.gridRow).toBe('1 / span 1');
+                    expect(a.style.gridColumn).toBe('1 / span 1');
+                    expect(b.style.gridRow).toBe('2 / span 1');
+                    expect(b.style.gridColumn).toBe('2 / span 2');
+                },
+            );
+        });
+
+        await it('`layout { }` under a parent that is not a grid is refused BY NAME', () => {
+            expect(() =>
+                mountSharedTree({ tag: 'GtkBox', children: [{ tag: 'GtkLabel', layout: { row: 0, column: 0 } }] }),
+            ).toThrow('only layout manager is the grid');
+        });
+
+        await it('a `layout { }` key or value the grid child cannot take is refused BY NAME', () => {
+            expect(() =>
+                mountSharedTree({ tag: 'GtkGrid', children: [{ tag: 'GtkLabel', layout: { colum: 0 } }] }),
+            ).toThrow('layout `colum`');
+            expect(() =>
+                mountSharedTree({ tag: 'GtkGrid', children: [{ tag: 'GtkLabel', layout: { row: 1.5 } }] }),
+            ).toThrow('is not a whole number');
+        });
+
         // `child: Gtk.Label {…}` in a `.blp` authors `slot: 'child'` — the widget's own
         // GObject property name — for every single-child widget the corpus never places
         // one on. `<adw-clamp>` has no separate box to route into (every child is already

package/src/style-manager.ts

@@ -3,7 +3,7 @@
 // core's (`style-manager.ts`); this file is the SOURCE: the root's `class` attribute and the media
 // query are the two things that can flip it. Without a `document` (SSR) it is light and never changes.
 
-import { StyleManagerBase, type StyleSource } from '@gjsify/adwaita-core';
+import { ColorScheme, StyleManagerBase, type StyleSource } from '@gjsify/adwaita-core';
 
 import { isAdwaitaDark } from './accent.js';
 
@@ -22,6 +22,15 @@ export const webStyleSource: StyleSource = {
     },
 };
 
+// FORCE_DARK / FORCE_LIGHT write the same root class an app writes by hand; DEFAULT takes it away.
+webStyleSource.force = (dark) => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    root.classList.remove('theme-dark', 'theme-light');
+    if (dark !== null) root.classList.add(dark ? 'theme-dark' : 'theme-light');
+};
+
 export class AdwStyleManager extends StyleManagerBase {
+    static readonly ColorScheme = ColorScheme;
     static override source = webStyleSource;
 }

package/src/test.browser.mts

@@ -142,8 +142,10 @@ import { AdwConstructVectorsTest } from './construct-vectors.spec.js';
 import { GObjectDoorTest } from './gobject-door.spec.js';
 import { ApplicationTest } from './application.spec.js';
 import { GdkTest } from './gdk.spec.js';
+import { FileChooserTest } from './file-chooser.spec.js';
 import { WidgetMembersTest } from './widget-members.spec.js';
 import { GLibTest } from './glib.spec.js';
+import { GtkPlatformTest } from './gtk-platform.spec.js';
 import { StyleManagerTest } from './style-manager.spec.js';
 import { GioActionsTest } from './gio.spec.js';
 import { MenuActionsTest } from './menu-actions.spec.js';
@@ -163,8 +165,10 @@ run({
     GObjectDoorTest,
     ApplicationTest,
     GdkTest,
+    FileChooserTest,
     WidgetMembersTest,
     GLibTest,
+    GtkPlatformTest,
     StyleManagerTest,
     GioActionsTest,
     MenuActionsTest,

package/src/widget-members.spec.ts

@@ -68,6 +68,18 @@ export const WidgetMembersTest = async () => {
             expect(parent.get_parent()).toBe(null);
         });
 
+        await it('adds, tests and removes a CSS class with the GTK names', () => {
+            const widget = make('WidgetMembersCss') as unknown as {
+                add_css_class(c: string): void;
+                remove_css_class(c: string): void;
+                has_css_class(c: string): boolean;
+            };
+            widget.add_css_class('dim-label');
+            expect(widget.has_css_class('dim-label')).toBe(true);
+            widget.remove_css_class('dim-label');
+            expect(widget.has_css_class('dim-label')).toBe(false);
+        });
+
         await it('takes an action group and drops it again with null', () => {
             const widget = make('WidgetMembersActions');
             const group = new Gio.SimpleActionGroup();