@gjsify/adwaita-web 0.57.0 → 0.59.0

package/src/gtksource/gtk-source-view.spec.ts

@@ -1,12 +1,19 @@
 import { describe, expect, it } from '@gjsify/unit';
 import {
+    GUTTER_PAINT_VECTORS,
     GTKSOURCE_BUFFER_VECTORS,
+    GTKSOURCE_STOP_VECTORS,
     GTKSOURCE_VIEW_DEFAULT_VECTORS,
     GTKSOURCE_VIEW_SURFACE_VECTORS,
     type GtkSourceViewSurfaceLike,
     type GtkSourceBufferLike,
+    type GtkSourceStopGestures,
+    type GtkSourceStopSurface,
+    type GutterPaintSurface,
+    type ViewLike,
 } from '@gjsify/gtksource-core/conformance';
 
+import * as GObject from '../namespace/gobject.js';
 import * as Gtk from '../namespace/gtk.js';
 import * as GtkSource from '../namespace/gtksource.js';
 
@@ -30,14 +37,156 @@ export const GtkSourceViewTest = async () => {
 
         for (const vector of GTKSOURCE_VIEW_SURFACE_VECTORS) {
             await it(`surface: ${vector.rule}`, () => {
-                expect(vector.observe({ Gtk, GtkSource } as unknown as GtkSourceViewSurfaceLike)).toStrictEqual(
-                    vector.shows,
-                );
+                expect(
+                    vector.observe({
+                        Gtk,
+                        GtkSource,
+                    } as unknown as GtkSourceViewSurfaceLike),
+                ).toStrictEqual(vector.shows);
             });
         }
 
-        await it('refuses get_gutter by name until slice 6', () => {
-            expect(() => new GtkSourceView().get_gutter(Gtk.TextWindowType.LEFT)).toThrow(/get_gutter/);
+        // The driver listens to the textarea only while the view is in a document.
+        const mounted = (view: unknown): GtkSourceView => {
+            const element = view as GtkSourceView;
+            if (!element.isConnected) document.body.append(element);
+            return element;
+        };
+        const gestures: GtkSourceStopGestures = {
+            extendSelection: (view, offset) => {
+                const area = mounted(view).textarea;
+                area.setSelectionRange(offset, offset);
+                const down = new MouseEvent('mousedown', {
+                    detail: 2,
+                    button: 0,
+                    cancelable: true,
+                    bubbles: true,
+                });
+                area.dispatchEvent(down);
+                return down.defaultPrevented ? [area.selectionStart, area.selectionEnd] : 'native';
+            },
+            copyClipboard: (view) => {
+                const copy = new Event('copy', { cancelable: true, bubbles: true });
+                mounted(view).textarea.dispatchEvent(copy);
+            },
+        };
+        for (const vector of GTKSOURCE_STOP_VECTORS) {
+            await it(`stopping an emission: ${vector.rule}`, () => {
+                const seen = vector.observe({ GtkSource, GObject } as unknown as GtkSourceStopSurface, gestures);
+                for (const view of document.body.querySelectorAll('gtk-source-view')) view.remove();
+                expect(seen).toStrictEqual(vector.shows);
+            });
+        }
+
+        const task = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+        for (const vector of GUTTER_PAINT_VECTORS) {
+            await it(`gutter paint: ${vector.rule}`, async () => {
+                const views: HTMLElement[] = [];
+                const harness = {
+                    async present(view: ViewLike) {
+                        document.body.append(view as unknown as HTMLElement);
+                        views.push(view as unknown as HTMLElement);
+                        await task();
+                    },
+                    settle: task,
+                };
+                try {
+                    expect(
+                        await vector.observe({ Gtk, GtkSource, GObject } as unknown as GutterPaintSurface, harness),
+                    ).toStrictEqual(vector.shows);
+                } finally {
+                    for (const view of views) view.remove();
+                }
+            });
+        }
+
+        await it("paints a renderer's text, in a column left of the line numbers when its position is negative", async () => {
+            const view = document.createElement('gtk-source-view') as GtkSourceView;
+            view.showLineNumbers = true;
+            document.body.append(view);
+            view.buffer.text = 'a\nb';
+            const renderer = new GtkSource.GutterRendererText({
+                width_request: 24,
+                margin_start: 2,
+                margin_end: 3,
+            });
+            (
+                renderer as unknown as {
+                    vfunc_query_data(lines: unknown, line: number): void;
+                }
+            ).vfunc_query_data = function (this: { text: string }, _lines, line) {
+                this.text = `r${line}`;
+            };
+            view.get_gutter(Gtk.TextWindowType.LEFT)!.insert(renderer, -1);
+            await task();
+            const columns = view.querySelectorAll<HTMLElement>('.gsv-columns > *');
+            expect([...columns].map((column) => column.className)).toStrictEqual(['gsv-column', 'gsv-numbers']);
+            const first = columns[0];
+            expect([...first.querySelectorAll('.gsv-cell')].map((cell) => cell.textContent)).toStrictEqual([
+                'r0',
+                'r1',
+            ]);
+            expect([first.style.minWidth, first.style.paddingLeft, first.style.paddingRight]).toStrictEqual([
+                '24px',
+                '2px',
+                '3px',
+            ]);
+            expect(view.classList.contains('has-columns')).toBe(true);
+            view.remove();
+        });
+
+        await it('paints the RIGHT gutter as a column right of the text, apart from the left one', async () => {
+            const view = document.createElement('gtk-source-view') as GtkSourceView;
+            document.body.append(view);
+            view.buffer.text = 'a\nb';
+            const renderer = new GtkSource.GutterRendererText({ width_request: 12 });
+            (
+                renderer as unknown as {
+                    vfunc_query_data(lines: unknown, line: number): void;
+                }
+            ).vfunc_query_data = function (this: { text: string }, _lines, line) {
+                this.text = `R${line}`;
+            };
+            const right = view.get_gutter(Gtk.TextWindowType.RIGHT)!;
+            right.insert(renderer, 0);
+            await task();
+            const element = view.querySelector<HTMLElement>('.gsv-gutter-right')!;
+            expect([...element.querySelectorAll('.gsv-cell')].map((cell) => cell.textContent)).toStrictEqual([
+                'R0',
+                'R1',
+            ]);
+            expect(view.classList.contains('has-right-columns')).toBe(true);
+            expect(view.classList.contains('has-columns')).toBe(false);
+            expect(view.lastElementChild).toBe(element);
+            right.remove(renderer);
+            await task();
+            expect(view.classList.contains('has-right-columns')).toBe(false);
+            view.remove();
+        });
+
+        await it('paints markup as styled spans and drops the column with its renderer', async () => {
+            const view = document.createElement('gtk-source-view') as GtkSourceView;
+            document.body.append(view);
+            view.buffer.text = 'a';
+            const renderer = new GtkSource.GutterRendererText({ width_request: 10 });
+            (
+                renderer as unknown as {
+                    vfunc_query_data(lines: unknown, line: number): void;
+                }
+            ).vfunc_query_data = function (this: { markup: string }) {
+                this.markup = '<b>x</b> &amp; y';
+            };
+            const gutter = view.get_gutter(Gtk.TextWindowType.LEFT)!;
+            gutter.insert(renderer, 0);
+            await task();
+            const cell = view.querySelector<HTMLElement>('.gsv-cell')!;
+            expect(cell.textContent).toBe('x & y');
+            expect(cell.querySelector<HTMLElement>('span')!.style.fontWeight).toBe('bold');
+            gutter.remove(renderer);
+            await task();
+            expect(view.querySelector('.gsv-column')).toBe(null);
+            expect(view.classList.contains('has-columns')).toBe(false);
+            view.remove();
         });
 
         await it('writes through attributes with GTK semantics', () => {

package/src/gtksource/gtk-source-view.ts

@@ -9,15 +9,15 @@
 //
 // IN THIS SLICE: `buffer`, `auto-indent`, `indent-width` (held and read back, as on Android),
 // `show-line-numbers`, `highlight-current-line`, `monospace`, `editable`, `cursor-visible`, the four
-// margins, `connect`/`disconnect`, the GJS snake_case accessors, `vadjustment`/`hadjustment`,
-// `set_direction`, `get_first_child`/`get_next_sibling`. Not yet: gutters (`get_gutter` throws).
+// margins, `connect`/`connect_after`/`disconnect`, `extend-selection` and `copy-clipboard` (stoppable), the GJS snake_case accessors, `vadjustment`/`hadjustment`,
+// `set_direction`, `get_first_child`/`get_next_sibling`, `get_gutter` (both gutters paint their renderers' `vfunc_query_data`).
 //
 // Reference: GtkSourceView 5 gtksourceview.c, upstream GNOME/gtksourceview (properties and defaults)
 // Modifications: Implemented as a Web Component for @gjsify/adwaita-web.
 
 import { adwaitaColorScheme, GtkAdjustment, onAdwaitaColorSchemeChanged } from '@gjsify/adwaita-core';
-import type { Buffer } from '@gjsify/gtksource-core';
-import { EditorSession, toBoolean, toNumber } from '@gjsify/gtksource-core';
+import type { Buffer, Gutter } from '@gjsify/gtksource-core';
+import { EditorSession, GutterSet, STOP_EMISSION, toBoolean, toNumber } from '@gjsify/gtksource-core';
 
 import { WebEditorDriver } from './web-editor-driver.js';
 
@@ -44,15 +44,22 @@ gtk-source-view .gsv-gutter {
   flex: none;
   overflow: hidden;
   box-sizing: content-box;
-  padding: var(--gsv-margin-top, 0px) var(--gsv-gutter-padding, 8px) 0;
-  width: var(--gsv-gutter-width, 2ch);
+  padding: var(--gsv-margin-top, 0px) 0 0;
   text-align: end;
   line-height: var(--gsv-line-height);
   color: var(--gsv-number-fg);
   background: var(--gsv-number-bg);
   user-select: none;
 }
-gtk-source-view.show-line-numbers .gsv-gutter { display: block; }
+gtk-source-view.show-line-numbers .gsv-gutter,
+gtk-source-view.has-columns .gsv-gutter { display: block; }
+gtk-source-view .gsv-gutter-right { display: none; }
+gtk-source-view.has-right-columns .gsv-gutter-right { display: block; }
+gtk-source-view .gsv-columns { display: flex; }
+gtk-source-view .gsv-numbers,
+gtk-source-view .gsv-column { flex: none; box-sizing: content-box; }
+gtk-source-view .gsv-numbers { width: var(--gsv-gutter-width, 2ch); padding: 0 var(--gsv-gutter-padding, 8px); }
+gtk-source-view .gsv-cell { height: calc(1em * var(--gsv-line-height)); white-space: pre; text-align: start; }
 gtk-source-view .gsv-number.current { color: var(--gsv-current-number-fg); background: var(--gsv-current-number-bg); }
 gtk-source-view .gsv-stage { position: relative; flex: 1 1 auto; min-width: 0; }
 gtk-source-view .gsv-backdrop,
@@ -133,15 +140,18 @@ export class GtkSourceView extends HTMLElement {
     private unsubscribe: (() => void) | null = null;
     private built = false;
     private readonly gutter = document.createElement('div');
+    private readonly rightGutter = document.createElement('div');
     private readonly backdrop = document.createElement('div');
     private readonly area = document.createElement('textarea');
     private readonly vadj = new GtkAdjustment();
     private readonly hadj = new GtkAdjustment();
     private direction = 1;
+    private readonly gutters = new GutterSet(this);
 
     constructor() {
         super();
         this.gutter.className = 'gsv-gutter';
+        this.rightGutter.className = 'gsv-gutter gsv-gutter-right';
         this.backdrop.className = 'gsv-backdrop';
         this.area.className = 'gsv-area';
         this.area.wrap = 'off';
@@ -153,8 +163,10 @@ export class GtkSourceView extends HTMLElement {
             area: this.area,
             backdrop: this.backdrop,
             gutter: this.gutter,
+            rightGutter: this.rightGutter,
         });
         this.session = new EditorSession(this.driver, undefined, adwaitaColorScheme());
+        this.session.bindGutters(this.gutters);
     }
 
     private syncAdjustments(): void {
@@ -173,7 +185,7 @@ export class GtkSourceView extends HTMLElement {
             const stage = document.createElement('div');
             stage.className = 'gsv-stage';
             stage.append(this.backdrop, this.area);
-            this.append(this.gutter, stage);
+            this.append(this.gutter, stage, this.rightGutter);
         }
         this.driver.attach();
         this.unsubscribe = onAdwaitaColorSchemeChanged(() => this.session.setColorScheme(adwaitaColorScheme()));
@@ -328,9 +340,9 @@ export class GtkSourceView extends HTMLElement {
         return this.parentElement;
     }
 
-    /** Gutters are slice 6 (ADR 0094). */
-    get_gutter(_window_type: number): never {
-        throw new Error('GtkSource.View.get_gutter is not implemented');
+    /** `null` for any side but LEFT and RIGHT, as in GtkSourceView (ADR 0103). */
+    get_gutter(window_type: number): Gutter | null {
+        return this.gutters.get(window_type);
     }
 
     get leftMargin(): number {
@@ -362,10 +374,21 @@ export class GtkSourceView extends HTMLElement {
     }
 
     /** GJS `connect(name, cb) → id`; the handler's first argument is this view. */
-    connect(name: string, callback: (self: GtkSourceView, ...args: never[]) => void): number {
+    connect(name: string, callback: (self: GtkSourceView, ...args: never[]) => unknown): number {
         return this.session.connect(name, ((_session: unknown, ...args: never[]) => callback(this, ...args)) as never);
     }
 
+    /** `g_signal_connect_after`: runs once the plain handlers and the default of the emission have run. */
+    connect_after(name: string, callback: (self: GtkSourceView, ...args: never[]) => unknown): number {
+        return this.session.connect_after(name, ((_session: unknown, ...args: never[]) =>
+            callback(this, ...args)) as never);
+    }
+
+    /** `GObject.signal_stop_emission_by_name(view, …)`: the session owns the emissions. */
+    [STOP_EMISSION](detailedSignal: string): void {
+        this.session[STOP_EMISSION](detailedSignal);
+    }
+
     disconnect(id: number): void {
         this.session.disconnect(id);
     }

package/src/gtksource/web-editor-driver.ts

@@ -7,8 +7,18 @@
 // NO WORD WRAP, as on Android: `wrap="off"` and `white-space: pre` keep every logical line on
 // one layout line, so the backdrop and the gutter stay aligned by a fixed line height.
 
-import type { EditorDriver, EditorHost, EditorLayout, EditorPalette, StyledRun } from '@gjsify/gtksource-core';
-import { digitCount, LineStore } from '@gjsify/gtksource-core';
+import type {
+    EditorDriver,
+    EditorHost,
+    EditorLayout,
+    EditorPalette,
+    GutterCell,
+    GutterColumn,
+    StyledRun,
+} from '@gjsify/gtksource-core';
+import { digitCount, LineStore, WINDOW_LEFT, WINDOW_RIGHT } from '@gjsify/gtksource-core';
+
+import { interceptCopy } from '../clipboard-host.js';
 
 const GUTTER_PADDING_PX = 8;
 
@@ -23,16 +33,20 @@ export interface EditorParts {
     readonly area: HTMLTextAreaElement;
     readonly backdrop: HTMLElement;
     readonly gutter: HTMLElement;
+    /** The RIGHT gutter's element, right of the text. */
+    readonly rightGutter: HTMLElement;
 }
 
 export class WebEditorDriver implements EditorDriver {
+    readonly gutterSides = [WINDOW_LEFT, WINDOW_RIGHT];
     private host: EditorHost | null = null;
     private text = '';
     private caret = 0;
     private reported = { start: 0, end: 0 };
     private layout: EditorLayout | null = null;
     private readonly runs = new LineStore<readonly StyledRun[]>();
-    private scheduled = false;
+    private scheduled: 'none' | 'gutter' | 'all' = 'none';
+    private numbers: HTMLElement | null = null;
     private listening: Array<() => void> = [];
     private palette: EditorPalette | null = null;
     private attached = false;
@@ -56,15 +70,30 @@ export class WebEditorDriver implements EditorDriver {
         on(area, 'scroll', () => {
             backdrop.scrollTop = area.scrollTop;
             backdrop.scrollLeft = area.scrollLeft;
-            (gutter.firstElementChild as HTMLElement | null)?.style.setProperty(
-                'transform',
-                `translateY(${-area.scrollTop}px)`,
-            );
+            for (const side of [gutter, this.parts.rightGutter]) {
+                (side.firstElementChild as HTMLElement | null)?.style.setProperty(
+                    'transform',
+                    `translateY(${-area.scrollTop}px)`,
+                );
+            }
+            // Only the lines in view are asked; a scroll brings new ones.
+            if (this.hasColumns || this.hasRightColumns) this.scheduleRender('gutter');
         });
         on(area, 'select', () => this.onSelection());
         on(area, 'keyup', () => this.onSelection());
         on(area, 'mouseup', () => this.onSelection());
         on(area, 'keydown', (event) => this.onKey(event as KeyboardEvent));
+        on(area, 'mousedown', (event) => this.onMouseDown(event as MouseEvent));
+        on(area, 'copy', (event) => {
+            // A handler of `copy-clipboard` stopped the emission: the default, the copy, does not happen.
+            // One that put content on the Gdk clipboard meanwhile wrote it into this event
+            // (`clipboard-host.ts`); the browser must not replace it with the selection.
+            let ran = false;
+            const wrote = interceptCopy((event as ClipboardEvent).clipboardData, () => {
+                ran = this.host?.onNativeCopy() ?? false;
+            });
+            if (!ran || wrote) event.preventDefault();
+        });
         // Firefox and Chromium fire `selectionchange` on different targets for a textarea.
         on(area.ownerDocument, 'selectionchange', () => {
             if (area.ownerDocument.activeElement === area) this.onSelection();
@@ -111,6 +140,20 @@ export class WebEditorDriver implements EditorDriver {
         this.scheduleRender();
     }
 
+    /**
+     * The second and third press of a multi-click: GTK asks `extend-selection` before it selects the word
+     * or line. The first press has already placed the caret, which is the location asked about.
+     */
+    private onMouseDown(event: MouseEvent): void {
+        if (event.button !== 0 || (event.detail !== 2 && event.detail !== 3)) return;
+        const { area } = this.parts;
+        const range = this.host?.onNativeExtendSelection(event.detail === 2 ? 0 : 1, area.selectionStart ?? 0);
+        if (!range) return;
+        event.preventDefault();
+        area.setSelectionRange(range[0], range[1]);
+        this.onSelection();
+    }
+
     /** `accepts-tab` is GTK's default; a textarea would move focus, so Tab inserts a tab. */
     private onKey(event: KeyboardEvent): void {
         if (event.key !== 'Tab' || event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return;
@@ -188,6 +231,10 @@ export class WebEditorDriver implements EditorDriver {
         style.setProperty('--gsv-current-number-bg', cssColor(palette.currentLineNumberBackground));
     }
 
+    invalidateGutter(): void {
+        this.scheduleRender('gutter');
+    }
+
     spliceLines(first: number, removed: number, inserted: number): void {
         this.runs.splice(first, removed, inserted);
     }
@@ -205,17 +252,24 @@ export class WebEditorDriver implements EditorDriver {
     // --- painting ----------------------------------------------------------------------------
 
     /** One repaint per task: a burst of `paintLine` calls from one edit costs one DOM rebuild. */
-    private scheduleRender(): void {
-        if (this.scheduled || !this.attached) return;
-        this.scheduled = true;
+    private scheduleRender(only: 'gutter' | 'all' = 'all'): void {
+        if (!this.attached) return;
+        const pending = this.scheduled;
+        this.scheduled = only === 'all' || pending === 'all' ? 'all' : 'gutter';
+        if (pending !== 'none') return;
         queueMicrotask(() => {
-            this.scheduled = false;
-            this.render();
+            const level = this.scheduled;
+            this.scheduled = 'none';
+            if (level === 'all') this.render();
+            else if (level === 'gutter') this.renderGutter();
         });
     }
 
+    private hasColumns = false;
+    private hasRightColumns = false;
+
     private render(): void {
-        const { backdrop, gutter, root } = this.parts;
+        const { backdrop } = this.parts;
         const lines = this.text.split('\n');
         const highlight = this.layout?.highlightCurrentLine === true;
         const caretLine = this.text.slice(0, this.caret).split('\n').length - 1;
@@ -252,9 +306,84 @@ export class WebEditorDriver implements EditorDriver {
         const column = document.createElement('div');
         column.className = 'gsv-numbers';
         column.append(...numbers);
-        column.style.transform = `translateY(${-this.parts.area.scrollTop}px)`;
-        gutter.replaceChildren(column);
+        this.numbers = column;
+        const { root } = this.parts;
         root.style.setProperty('--gsv-gutter-width', `${digitCount(lines.length) + 0}ch`);
         root.style.setProperty('--gsv-gutter-padding', `${GUTTER_PADDING_PX}px`);
+        this.renderGutter();
+    }
+
+    /** The lines in view, or all of them where nothing is laid out (a detached element, a test DOM). */
+    private visibleLines(count: number): [number, number] {
+        const { area, backdrop } = this.parts;
+        const row = backdrop.firstElementChild;
+        const height = row === null ? 0 : row.getBoundingClientRect().height;
+        if (height <= 0 || area.clientHeight <= 0) return [0, count - 1];
+        const top = Math.max(0, area.scrollTop - (this.layout?.topMargin ?? 0));
+        const first = Math.min(count - 1, Math.floor(top / height));
+        const last = Math.min(count - 1, Math.max(first, Math.ceil((top + area.clientHeight) / height) - 1));
+        return [first, last];
+    }
+
+    private cellElement(cell: GutterCell): HTMLElement {
+        const element = document.createElement('div');
+        element.className = 'gsv-cell';
+        if (cell.runs === null) {
+            element.textContent = cell.text;
+            return element;
+        }
+        for (const run of cell.runs) {
+            const span = document.createElement('span');
+            span.textContent = run.text;
+            if (run.bold) span.style.fontWeight = 'bold';
+            if (run.italic) span.style.fontStyle = 'italic';
+            const decorations = [run.underline ? 'underline' : '', run.strikethrough ? 'line-through' : ''];
+            span.style.textDecoration = decorations.filter(Boolean).join(' ');
+            element.append(span);
+        }
+        return element;
+    }
+
+    private columnElement(column: GutterColumn, first: number): HTMLElement {
+        const element = document.createElement('div');
+        element.className = 'gsv-column';
+        element.style.minWidth = `${column.widthRequest}px`;
+        element.style.paddingLeft = `${column.marginStart}px`;
+        element.style.paddingRight = `${column.marginEnd}px`;
+        const spacer = document.createElement('div');
+        spacer.style.height = `calc(${first} * 1em * var(--gsv-line-height))`;
+        element.append(spacer, ...column.cells.map((cell) => this.cellElement(cell)));
+        return element;
+    }
+
+    /** The gutter: the renderers left of the line numbers, the numbers, the renderers right of them. */
+    private renderGutter(): void {
+        const { gutter, rightGutter, root, area } = this.parts;
+        const host = this.host;
+        const count = this.text.split('\n').length;
+        const [first, last] = this.visibleLines(count);
+        const columns = host?.queryGutter(first, last) ?? [];
+        this.hasColumns = columns.length > 0;
+        const showNumbers = this.layout?.showLineNumbers === true;
+        root.classList.toggle('has-columns', this.hasColumns);
+        const elements: HTMLElement[] = [];
+        for (const column of columns.filter((c) => c.position < 0)) elements.push(this.columnElement(column, first));
+        if (showNumbers && this.numbers !== null) elements.push(this.numbers);
+        for (const column of columns.filter((c) => c.position >= 0)) elements.push(this.columnElement(column, first));
+        const wrapper = document.createElement('div');
+        wrapper.className = 'gsv-columns';
+        wrapper.append(...elements);
+        wrapper.style.transform = `translateY(${-area.scrollTop}px)`;
+        gutter.replaceChildren(wrapper);
+
+        // The RIGHT gutter holds renderers only: the line numbers are a LEFT-side feature.
+        const right = host?.queryGutter(first, last, WINDOW_RIGHT) ?? [];
+        this.hasRightColumns = right.length > 0;
+        root.classList.toggle('has-right-columns', this.hasRightColumns);
+        const rightWrapper = document.createElement('div');
+        rightWrapper.className = 'gsv-columns';
+        rightWrapper.append(...right.map((column) => this.columnElement(column, first)));
+        rightWrapper.style.transform = `translateY(${-area.scrollTop}px)`;
+        rightGutter.replaceChildren(rightWrapper);
     }
 }

package/src/index.ts

@@ -119,6 +119,8 @@ export * as Gtk from './namespace/gtk.js';
 // program here as on GJS — `./namespace/gio.ts` says what does not go in it.
 export * as Gio from './namespace/gio.js';
 
+// Gdk's clipboard (`Display`, `Clipboard`, `ContentProvider`): `./namespace/gdk.ts` says what is absent.
+export * as Gdk from './namespace/gdk.js';
 // GLib's timers (`idle_add`, `timeout_add`, `source_remove`): `./namespace/glib.ts` says what is absent.
 export * as GLib from './namespace/glib.js';
 

package/src/namespace/adw.ts

@@ -110,3 +110,4 @@ export { AdwWindow as Window } from '../elements/adw-window.js';
 export { AdwWindowTitle as WindowTitle } from '../elements/adw-window-title.js';
 export { AdwWrapBox as WrapBox } from '../elements/adw-wrap-box.js';
 export { AdwApplication as Application } from '../application.js';
+export { AdwStyleManager as StyleManager } from '../style-manager.js';

package/src/namespace/gdk.ts

@@ -0,0 +1,17 @@
+// The Gdk half of `@gjsify/adwaita-web`'s vocabulary, as far as the clipboard goes (ADR 0096
+// Amendment 2): `Display.get_default().get_clipboard()`, `Clipboard.set_content` / `set` and
+// `ContentProvider.new_for_value`. The behaviour lives once in `@gjsify/adwaita-core` (`gdk.ts`); this
+// file hands it the browser's clipboard, `../clipboard-host.ts`.
+//
+// A TRUE SUBSET: everything else in Gdk is absent, and the `gi://Gdk` arm refuses it by name.
+
+import { createGdk } from '@gjsify/adwaita-core';
+
+import { webClipboardHost } from '../clipboard-host.js';
+
+export const gdk = createGdk(webClipboardHost);
+
+export const Display = gdk.Display;
+export const Clipboard = gdk.Clipboard;
+export const ContentProvider = gdk.ContentProvider;
+export const ContentFormats = gdk.ContentFormats;

package/src/namespace/gio.ts

@@ -12,10 +12,10 @@
 // `check-vocabulary-alignment.mjs` derives their members from the elements this package
 // defines. GIO defines none: what lands here is the handful of GObject types an Adwaita
 // author CONSTRUCTS while building a tree — today the menu a `menuModel` property takes.
-// `Gio.File`, `Gio.Settings`, `Gio.SimpleAction` and the rest of the library are NOT this
+// `Gio.File`, `Gio.Settings` and the rest of the library are NOT this
 // package's business; a namespace that grows past what the elements consume is a second,
 // unheld vocabulary.
 
 export { GioMenu as Menu, GioMenuItem as MenuItem } from '@gjsify/adwaita-core';
-export { SimpleAction, ApplicationFlags } from '@gjsify/adwaita-core';
+export { SimpleAction, SimpleActionGroup, ApplicationFlags } from '@gjsify/adwaita-core';
 export { GioApplication as Application } from '../application.js';

package/src/namespace/glib.ts

@@ -3,10 +3,20 @@
 // behaviour lives once in `@gjsify/adwaita-core` (`glib-timers.ts`, which states where a host
 // event loop cannot honour GLib); this file is the namespace door over the host's `setTimeout`.
 //
+// The path helpers (`MAXUINT32`, `build_filenamev`, `get_current_dir`, `get_system_data_dirs`) live
+// in `glib-paths.ts` of the core; the host has no filesystem, so `get_current_dir()` is `"/"` and
+// `get_system_data_dirs()` is `[]`. A port that knows better replaces the member in its own file.
+//
 // A TRUE SUBSET: everything else in GLib (`MainLoop`, `Source`, `timeout_add_seconds`, `Bytes`,
-// `build_filenamev`, …) is absent, and the `gi://GLib` arm refuses it by name.
+// `get_home_dir`, …) is absent, and the `gi://GLib` arm refuses it by name.
 
-import { createGLibTimers } from '@gjsify/adwaita-core';
+import {
+    buildFilenamev,
+    createGLibTimers,
+    getCurrentDir,
+    getSystemDataDirs,
+    MAXUINT32 as GLIB_MAXUINT32,
+} from '@gjsify/adwaita-core';
 
 const glib = createGLibTimers();
 
@@ -20,3 +30,8 @@ export const SOURCE_CONTINUE = glib.SOURCE_CONTINUE;
 export const idle_add = glib.idle_add;
 export const timeout_add = glib.timeout_add;
 export const source_remove = glib.source_remove;
+
+export const MAXUINT32 = GLIB_MAXUINT32;
+export const build_filenamev = buildFilenamev;
+export const get_current_dir = getCurrentDir;
+export const get_system_data_dirs = getSystemDataDirs;

package/src/namespace/gobject.ts

@@ -18,8 +18,10 @@ const GObjectObject = gobject.Object;
 export { GObjectObject as Object };
 export const registerClass = gobject.registerClass;
 export const type_ensure = gobject.type_ensure;
+export const signal_stop_emission_by_name = gobject.signal_stop_emission_by_name;
 export const ParamSpec = gobject.ParamSpec;
 export const ParamFlags = gobject.ParamFlags;
+export const Value = gobject.Value;
 export const TYPE_STRING = gobject.TYPE_STRING;
 export const TYPE_BOOLEAN = gobject.TYPE_BOOLEAN;
 export const TYPE_INT = gobject.TYPE_INT;

package/src/namespace/gtk-enums.ts

@@ -1,15 +1,34 @@
-// The plain GTK enums an application reads off `Gtk` — `Gtk.PolicyType`, `Gtk.TextDirection` and
-// `Gtk.TextWindowType`, as value tables. The numbers are the typelib's (GIR declaration order),
+// The plain GTK enums an application reads off `Gtk` — `Gtk.PolicyType`, `Gtk.TextDirection`,
+// `Gtk.TextExtendSelection` and `Gtk.TextWindowType`, as value tables. The numbers are the typelib's (GIR declaration order),
 // and the same tables the NativeScript port publishes.
 //
 // Reference: refs/gtk gtk/gtkenums.h (GtkPolicyType, GtkTextDirection), gtk/gtktextview.h (GtkTextWindowType)
 // Copyright (c) The GTK Team. LGPLv2.1+.
 
 /** `Gtk.PolicyType`: `ALWAYS` 0, `AUTOMATIC` 1, `NEVER` 2, `EXTERNAL` 3. */
-export const PolicyType = Object.freeze({ ALWAYS: 0, AUTOMATIC: 1, NEVER: 2, EXTERNAL: 3 } as const);
+export const PolicyType = Object.freeze({
+    ALWAYS: 0,
+    AUTOMATIC: 1,
+    NEVER: 2,
+    EXTERNAL: 3,
+} as const);
 
 /** `Gtk.TextDirection`: `NONE` 0, `LTR` 1, `RTL` 2. */
-export const TextDirection = Object.freeze({ NONE: 0, LTR: 1, RTL: 2 } as const);
+export const TextDirection = Object.freeze({
+    NONE: 0,
+    LTR: 1,
+    RTL: 2,
+} as const);
 
 /** `Gtk.TextWindowType`: `WIDGET` 1, `TEXT` 2, `LEFT` 3, `RIGHT` 4, `TOP` 5, `BOTTOM` 6. */
-export const TextWindowType = Object.freeze({ WIDGET: 1, TEXT: 2, LEFT: 3, RIGHT: 4, TOP: 5, BOTTOM: 6 } as const);
+export const TextWindowType = Object.freeze({
+    WIDGET: 1,
+    TEXT: 2,
+    LEFT: 3,
+    RIGHT: 4,
+    TOP: 5,
+    BOTTOM: 6,
+} as const);
+
+/** `Gtk.TextExtendSelection`: `WORD` 0 (a double click), `LINE` 1 (a triple click). */
+export const TextExtendSelection = Object.freeze({ WORD: 0, LINE: 1 } as const);