@gjsify/adwaita-web 0.59.1 → 0.61.0

package/src/namespace/gtk.ts

@@ -21,7 +21,10 @@
 // are the same write and nothing in this package had to learn a second input shape.
 
 export { GtkAdjustment as Adjustment } from '@gjsify/adwaita-core';
-export { PolicyType, TextDirection, TextExtendSelection, TextWindowType } from './gtk-enums.js';
+// ADR 0100: the file dialog is no element either — `present`-less, it asks the driver
+// `../file-chooser-host.ts` registers (imported by `./gio.ts`) and resolves a `Gio.File`.
+export { GtkFileDialog as FileDialog, GtkFileFilter as FileFilter, DialogError } from '@gjsify/adwaita-core';
+export { License, PolicyType, TextDirection, TextExtendSelection, TextWindowType } from './gtk-enums.js';
 export { GtkAboutDialog as AboutDialog } from '../elements/gtk-about-dialog.js';
 export { GtkActionBar as ActionBar } from '../elements/gtk-action-bar.js';
 export { GtkApplicationWindow as ApplicationWindow } from '../elements/gtk-application-window.js';
@@ -97,3 +100,11 @@ export { GtkWindowControls as WindowControls } from '../elements/gtk-window-cont
 export { GtkViewport as Viewport } from '../elements/gtk-viewport.js';
 export { GtkWindowHandle as WindowHandle } from '../elements/gtk-window-handle.js';
 export { GtkApplication as Application } from '../application.js';
+export {
+    STYLE_PROVIDER_PRIORITY_APPLICATION,
+    STYLE_PROVIDER_PRIORITY_FALLBACK,
+    STYLE_PROVIDER_PRIORITY_SETTINGS,
+    STYLE_PROVIDER_PRIORITY_THEME,
+    STYLE_PROVIDER_PRIORITY_USER,
+} from '@gjsify/adwaita-core';
+export { CssProvider, EventControllerKey, IconTheme, show_uri, StyleContext, Settings } from './gtk-platform.js';

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/registered-styles.ts

@@ -0,0 +1,73 @@
+// The stylesheet of a registered class. `<adw-bin>` is styled by a rule on the tag `adw-bin`, and a
+// subclass that `GObject.registerClass` defines as `<gjsify-hexdump>` is another tag, so none of its
+// base's rules (a `display: block`, the box-model reset, the `:only-child` fill) reach it: a Bin
+// subclass collapsed to an inline box of zero width. GTK has no such seam because a subclass keeps
+// its parent's CSS node name.
+//
+// So the rules of the base tag are copied to the subclass tag, once per tag, from the stylesheets
+// the page has when the first instance connects: every selector that names the base tag as a type
+// selector, with that name replaced. The copy is adopted last, so it sits where the base's rules do
+// relative to the author's own.
+
+const DONE = new Set<string>();
+
+/** Splits a selector list at its top-level commas (`:is(a, b)` stays whole). */
+function splitSelectorList(list: string): string[] {
+    const parts: string[] = [];
+    let depth = 0;
+    let start = 0;
+    for (let i = 0; i < list.length; i++) {
+        const c = list[i];
+        if (c === '(' || c === '[') depth++;
+        else if (c === ')' || c === ']') depth--;
+        else if (c === ',' && depth === 0) {
+            parts.push(list.slice(start, i).trim());
+            start = i + 1;
+        }
+    }
+    parts.push(list.slice(start).trim());
+    return parts;
+}
+
+function rulesOf(sheet: CSSStyleSheet): CSSRuleList | null {
+    try {
+        return sheet.cssRules;
+    } catch {
+        return null; // a cross-origin sheet is not readable
+    }
+}
+
+function copyRules(rules: CSSRuleList, from: RegExp, to: string, out: string[]): void {
+    for (const rule of Array.from(rules)) {
+        if (rule instanceof CSSStyleRule) {
+            const mine = splitSelectorList(rule.selectorText).filter((selector) => from.test(selector));
+            if (mine.length === 0) continue;
+            const selector = mine.map((s) => s.replace(new RegExp(from.source, 'g'), to)).join(', ');
+            out.push(`${selector} { ${rule.style.cssText} }`);
+        } else if ('cssRules' in rule) {
+            // @media, @supports, @layer: copy the wrapper around what matches inside it
+            const inner: string[] = [];
+            copyRules((rule as CSSGroupingRule).cssRules, from, to, inner);
+            if (inner.length === 0) continue;
+            const head = rule.cssText.slice(0, rule.cssText.indexOf('{')).trim();
+            out.push(`${head} { ${inner.join('\n')} }`);
+        }
+    }
+}
+
+/** Gives `tag` the rules that `base` has in the page's stylesheets. Runs once per tag. */
+export function inheritStyles(tag: string, base: string | null | undefined): void {
+    if (!base || DONE.has(tag)) return;
+    DONE.add(tag);
+    const from = new RegExp(`(?<![\\w-])${base}(?![\\w-])`);
+    const css: string[] = [];
+    const sheets = [...Array.from(document.styleSheets), ...document.adoptedStyleSheets];
+    for (const sheet of sheets) {
+        const rules = rulesOf(sheet);
+        if (rules) copyRules(rules, from, tag, css);
+    }
+    if (css.length === 0) return;
+    const copy = new CSSStyleSheet();
+    copy.replaceSync(css.join('\n'));
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, copy];
+}

package/src/shared-tree-builder.ts

@@ -58,7 +58,7 @@ import { capabilities } from './capabilities.mjs';
 import { endpointOf, hasElementApi, installElementApi } from './gobject-elements.js';
 import { dispatchedSignalsOf } from './signals.js';
 import { slottedChildrenOf } from './slotted-children.js';
-import { templateTagFor } from './template-classes.js';
+import { isTemplateTag, templateTagFor } from './template-classes.js';
 import { writeBooleanAttribute } from './attributes.js';
 
 /** One authored placement, kept so {@link mountSharedTree} can hold the renderer to it. */
@@ -344,7 +344,11 @@ export function writeProp(el: HTMLElement, prop: string, value: string | number
     const member = propertyOf(prop);
     const expand = GTK_WIDGET_EXPAND.find((name) => name === attr);
     if (expand !== undefined && typeof value === 'boolean') el.setAttribute(expand, value ? '' : 'false');
-    else if (typeof value === 'boolean' && isValueBasedBooleanAttr(el.localName, attr)) {
+    else if (isTemplateTag(el.localName) && member in el) {
+        // An application class has no attributeChangedCallback: its properties are GObject properties,
+        // set the way `Gtk.Builder` sets them, after the constructor.
+        (el as unknown as Record<string, unknown>)[member] = value;
+    } else if (typeof value === 'boolean' && isValueBasedBooleanAttr(el.localName, attr)) {
         writeBooleanAttribute(el, attr, value);
     } else if (value === false && isWritable(el, member)) {
         // Non-value-based, writable property: set the property directly (bypasses attribute).
@@ -416,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;
 }