@gjsify/adwaita-web 0.58.0 → 0.59.0

package/lib/types/clipboard-host.d.ts

@@ -0,0 +1,7 @@
+import type { ClipboardHost } from '@gjsify/adwaita-core';
+/**
+ * Runs `run` as the handler of a DOM `copy` event: `Clipboard.set_content` calls made meanwhile
+ * land in `data`. Returns whether any did, so the caller knows to `preventDefault()`.
+ */
+export declare function interceptCopy(data: DataTransfer | null, run: () => void): boolean;
+export declare const webClipboardHost: ClipboardHost;

package/lib/types/gdk.spec.d.ts

@@ -0,0 +1 @@
+export declare const GdkTest: () => Promise<void>;

package/lib/types/gtksource/gtk-source-view.d.ts

@@ -1,5 +1,6 @@
 import { GtkAdjustment } from '@gjsify/adwaita-core';
 import type { Buffer, Gutter } from '@gjsify/gtksource-core';
+import { STOP_EMISSION } from '@gjsify/gtksource-core';
 export declare class GtkSourceView extends HTMLElement {
     static get observedAttributes(): string[];
     private readonly session;
@@ -7,6 +8,7 @@ export declare class GtkSourceView extends HTMLElement {
     private unsubscribe;
     private built;
     private readonly gutter;
+    private readonly rightGutter;
     private readonly backdrop;
     private readonly area;
     private readonly vadj;
@@ -71,7 +73,11 @@ export declare class GtkSourceView extends HTMLElement {
     get bottomMargin(): number;
     set bottomMargin(value: number | string);
     /** 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;
+    /** `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;
+    /** `GObject.signal_stop_emission_by_name(view, …)`: the session owns the emissions. */
+    [STOP_EMISSION](detailedSignal: string): void;
     disconnect(id: number): void;
     /** The inner textarea, for focus and tests. */
     get textarea(): HTMLTextAreaElement;

package/lib/types/gtksource/web-editor-driver.d.ts

@@ -4,9 +4,12 @@ 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 declare class WebEditorDriver implements EditorDriver {
     private readonly parts;
+    readonly gutterSides: number[];
     private host;
     private text;
     private caret;
@@ -25,6 +28,11 @@ export declare class WebEditorDriver implements EditorDriver {
     detach(): void;
     private onInput;
     private onSelection;
+    /**
+     * 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;
     /** `accepts-tab` is GTK's default; a textarea would move focus, so Tab inserts a tab. */
     private onKey;
     setText(text: string): void;
@@ -43,6 +51,7 @@ export declare class WebEditorDriver implements EditorDriver {
     /** One repaint per task: a burst of `paintLine` calls from one edit costs one DOM rebuild. */
     private scheduleRender;
     private hasColumns;
+    private hasRightColumns;
     private render;
     /** The lines in view, or all of them where nothing is laid out (a detached element, a test DOM). */
     private visibleLines;

package/lib/types/index.d.ts

@@ -12,6 +12,7 @@ export { isIconAvailable, registerIcon } from './icon-registry.js';
 export * as Adw from './namespace/adw.js';
 export * as Gtk from './namespace/gtk.js';
 export * as Gio from './namespace/gio.js';
+export * as Gdk from './namespace/gdk.js';
 export * as GLib from './namespace/glib.js';
 export * as GObject from './namespace/gobject.js';
 export * as GtkSource from './namespace/gtksource.js';

package/lib/types/namespace/gdk.d.ts

@@ -0,0 +1,7 @@
+export declare const gdk: import("@gjsify/adwaita-core").GdkClipboard;
+export declare const Display: {
+    get_default(): import("@gjsify/adwaita-core").Display;
+};
+export declare const Clipboard: typeof import("@gjsify/adwaita-core").Clipboard;
+export declare const ContentProvider: Pick<typeof import("@gjsify/adwaita-core").ContentProvider, "new_for_value">;
+export declare const ContentFormats: typeof import("@gjsify/adwaita-core").ContentFormats;

package/lib/types/namespace/gobject.d.ts

@@ -11,6 +11,7 @@ export declare const ParamFlags: {
     readonly CONSTRUCT: 4;
     readonly CONSTRUCT_ONLY: 8;
 };
+export declare const Value: typeof import("@gjsify/adwaita-core").Value;
 export declare const TYPE_STRING: import("@gjsify/adwaita-core").GType;
 export declare const TYPE_BOOLEAN: import("@gjsify/adwaita-core").GType;
 export declare const TYPE_INT: import("@gjsify/adwaita-core").GType;

package/lib/types/namespace/gtk-enums.d.ts

@@ -20,3 +20,8 @@ export declare const TextWindowType: Readonly<{
     readonly TOP: 5;
     readonly BOTTOM: 6;
 }>;
+/** `Gtk.TextExtendSelection`: `WORD` 0 (a double click), `LINE` 1 (a triple click). */
+export declare const TextExtendSelection: Readonly<{
+    readonly WORD: 0;
+    readonly LINE: 1;
+}>;

package/lib/types/namespace/gtk.d.ts

@@ -1,5 +1,5 @@
 export { GtkAdjustment as Adjustment } from '@gjsify/adwaita-core';
-export { PolicyType, TextDirection, TextWindowType } from './gtk-enums.js';
+export { 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';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.58.0",
+    "version": "0.59.0",
     "description": "Adwaita/Libadwaita web components for browser targets",
     "type": "module",
     "main": "./src/index.ts",
@@ -50,17 +50,17 @@
         "@codemirror/language": "^6.12.4",
         "@codemirror/state": "^6.7.0",
         "@codemirror/view": "^6.43.4",
-        "@gjsify/adwaita-core": "^0.58.0",
-        "@gjsify/adwaita-fonts": "^0.58.0",
-        "@gjsify/adwaita-icons": "^0.58.0",
-        "@gjsify/gtksource-core": "^0.58.0",
+        "@gjsify/adwaita-core": "^0.59.0",
+        "@gjsify/adwaita-fonts": "^0.59.0",
+        "@gjsify/adwaita-icons": "^0.59.0",
+        "@gjsify/gtksource-core": "^0.59.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/blueprint": "^0.58.0",
-        "@gjsify/cli": "^0.58.0",
-        "@gjsify/unit": "^0.58.0",
-        "@gjsify/vite-plugin-blueprint": "^0.58.0",
+        "@gjsify/blueprint": "^0.59.0",
+        "@gjsify/cli": "^0.59.0",
+        "@gjsify/unit": "^0.59.0",
+        "@gjsify/vite-plugin-blueprint": "^0.59.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/src/clipboard-host.ts

@@ -0,0 +1,47 @@
+// How the web door publishes `Gdk.Clipboard` content (ADR 0096 Amendment 2).
+//
+// The browser has two paths and they are not interchangeable:
+//   - inside a DOM `copy` event, `event.clipboardData.setData` is synchronous and needs no
+//     permission, but only until the event returns; the handler must then `preventDefault()` so the
+//     browser does not replace the data with the selection. This is the path of a `copy-clipboard`
+//     handler that replaces the default copy.
+//   - anywhere else, `navigator.clipboard.writeText` is asynchronous and needs a secure context and
+//     a user activation (or the permission); a refusal rejects and the core logs it.
+
+import type { ClipboardHost } from '@gjsify/adwaita-core';
+
+let copying: { data: DataTransfer; wrote: boolean } | null = null;
+
+/**
+ * Runs `run` as the handler of a DOM `copy` event: `Clipboard.set_content` calls made meanwhile
+ * land in `data`. Returns whether any did, so the caller knows to `preventDefault()`.
+ */
+export function interceptCopy(data: DataTransfer | null, run: () => void): boolean {
+    if (!data) {
+        run();
+        return false;
+    }
+    const outer = copying;
+    const frame = { data, wrote: false };
+    copying = frame;
+    try {
+        run();
+    } finally {
+        copying = outer;
+    }
+    return frame.wrote;
+}
+
+export const webClipboardHost: ClipboardHost = {
+    writeText(text) {
+        if (copying) {
+            copying.data.setData('text/plain', text);
+            copying.wrote = true;
+            return;
+        }
+        if (typeof navigator === 'undefined' || !navigator.clipboard) {
+            return Promise.reject(new Error('navigator.clipboard is not available here'));
+        }
+        return navigator.clipboard.writeText(text);
+    },
+};

package/src/gdk.spec.ts

@@ -0,0 +1,122 @@
+// The Gdk clipboard door of adwaita-web, held to the shared vectors (real GJS is their oracle, in
+// adwaita-core's `gdk.gjs.spec.ts`), plus what only a browser shows: the async Clipboard API for a
+// write outside an event, and the `copy` event's `clipboardData` inside one. Neither needs the
+// permission: `navigator.clipboard` is replaced by a recording fake, and the event carries a
+// `DataTransfer` the test reads.
+
+import {
+    driveGdkClipboardVectors,
+    GDK_CLIPBOARD_VECTORS,
+    type GdkClipboardNamespaces,
+} from '@gjsify/adwaita-core/conformance';
+import { describe, expect, it } from '@gjsify/unit';
+
+import { GtkSourceView } from './gtksource/gtk-source-view.js';
+import * as Gdk from './namespace/gdk.js';
+import * as GObject from './namespace/gobject.js';
+
+async function withClipboardApi<T>(
+    api: { writeText(text: string): Promise<void> },
+    body: () => Promise<T>,
+): Promise<T> {
+    const original = Object.getOwnPropertyDescriptor(navigator, 'clipboard');
+    Object.defineProperty(navigator, 'clipboard', { value: api, configurable: true });
+    try {
+        return await body();
+    } finally {
+        if (original) Object.defineProperty(navigator, 'clipboard', original);
+        else delete (navigator as unknown as Record<string, unknown>).clipboard;
+    }
+}
+
+const tick = () => new Promise<void>((resolve) => setTimeout(resolve, 0));
+
+export const GdkTest = async () => {
+    const written: string[] = [];
+    await withClipboardApi({ writeText: async (text) => void written.push(text) }, () =>
+        driveGdkClipboardVectors(
+            {
+                name: 'adwaita-web',
+                isOracle: false,
+                display: true,
+                GObject,
+                Gdk,
+                readBack: async () => {
+                    await tick();
+                    return written[written.length - 1] ?? null;
+                },
+            } as unknown as GdkClipboardNamespaces & Parameters<typeof driveGdkClipboardVectors>[0],
+            { describe, it, expect },
+            GDK_CLIPBOARD_VECTORS,
+        ),
+    );
+
+    await describe('adwaita-web: Gdk clipboard door', async () => {
+        const mounted = () => {
+            const view = document.createElement('gtk-source-view') as GtkSourceView;
+            document.body.append(view);
+            return view;
+        };
+        const copyEvent = () =>
+            new ClipboardEvent('copy', { cancelable: true, bubbles: true, clipboardData: new DataTransfer() });
+        const setText = (text: string) => {
+            const value = new GObject.Value().init(GObject.TYPE_STRING);
+            value.set_string(text);
+            Gdk.Display.get_default().get_clipboard().set_content(Gdk.ContentProvider.new_for_value(value));
+        };
+
+        await it('writes into the copy event when a copy-clipboard handler replaces the default copy', () => {
+            const view = mounted();
+            view.buffer.text = 'ff 00';
+            view.textarea.setSelectionRange(0, 2);
+            view.connect_after('copy-clipboard', () => setText('0xFF'));
+            const event = copyEvent();
+            view.textarea.dispatchEvent(event);
+            expect(event.clipboardData?.getData('text/plain')).toBe('0xFF');
+            expect(event.defaultPrevented).toBe(true);
+            view.remove();
+        });
+
+        await it('leaves the browser copy alone when no handler wrote anything', () => {
+            const view = mounted();
+            const event = copyEvent();
+            view.textarea.dispatchEvent(event);
+            expect(event.defaultPrevented).toBe(false);
+            view.remove();
+        });
+
+        await it('publishes through navigator.clipboard outside a copy event', async () => {
+            const seen: string[] = [];
+            await withClipboardApi({ writeText: async (text) => void seen.push(text) }, async () => {
+                setText('outside');
+                await tick();
+            });
+            expect(seen[0]).toBe('outside');
+        });
+
+        await it('warns, and keeps the content, when the browser refuses the write', async () => {
+            const warnings: unknown[][] = [];
+            const original = console.warn;
+            console.warn = (...args: unknown[]) => void warnings.push(args);
+            try {
+                await withClipboardApi({ writeText: () => Promise.reject(new Error('NotAllowedError')) }, async () => {
+                    setText('refused');
+                    await tick();
+                });
+            } finally {
+                console.warn = original;
+            }
+            expect(warnings.length).toBe(1);
+            expect(Gdk.Display.get_default().get_clipboard().get_formats().to_string()).toBe(
+                'gchararray text/plain;charset=utf-8 text/plain',
+            );
+        });
+
+        await it('puts get_display and get_clipboard on a registered class', () => {
+            const Widget = GObject.registerClass({ GTypeName: 'GdkSpecWidget' }, class extends HTMLElement {});
+            const widget = new (Widget as unknown as new () => { get_display(): unknown; get_clipboard(): unknown })();
+            expect(widget.get_display()).toBe(Gdk.Display.get_default());
+            expect(widget.get_clipboard()).toBe(Gdk.Display.get_default().get_clipboard());
+        });
+    });
+};

package/src/gobject-door.ts

@@ -18,9 +18,11 @@ import {
     type GObjectDoor,
     type RegisteredClass,
     type TemplateScope,
+    widgetDisplayMembers,
 } from '@gjsify/adwaita-core';
 import { propertyOf } from '@gjsify/adwaita-core/tags';
 
+import { gdk } from './namespace/gdk.js';
 import { dispatchElement, listenElement } from './gobject-elements.js';
 import { buildTemplateTree, type BuiltTemplateTree } from './shared-tree-builder.js';
 import { registerTemplateClass } from './template-classes.js';
@@ -119,6 +121,11 @@ export const webDoor: GObjectDoor = {
         Object.setPrototypeOf((klass as { prototype: object }).prototype, Constructing.prototype);
 
         const proto = (klass as { prototype: Record<string, unknown> }).prototype;
+        // `this.get_display()` / `this.get_clipboard()`, as on a realized Gtk.Widget; a class's own wins.
+        for (const [name, member] of Object.entries(widgetDisplayMembers(gdk))) {
+            if (!(name in proto))
+                Object.defineProperty(proto, name, { value: member, writable: true, configurable: true });
+        }
         const inherited = proto.connectedCallback as (() => void) | undefined;
         Object.defineProperty(proto, 'connectedCallback', {
             configurable: true,

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

@@ -2,10 +2,13 @@ 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';
@@ -34,9 +37,44 @@ 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);
+            });
+        }
+
+        // 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);
             });
         }
 
@@ -67,11 +105,18 @@ export const GtkSourceViewTest = async () => {
             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}`;
-                };
+            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 > *');
@@ -90,15 +135,47 @@ export const GtkSourceViewTest = async () => {
             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';
-                };
+            (
+                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();

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`, `get_gutter` (the LEFT gutter paints its renderers' `vfunc_query_data`; the right one is a model).
+// 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, Gutter } from '@gjsify/gtksource-core';
-import { EditorSession, GutterSet, toBoolean, toNumber } from '@gjsify/gtksource-core';
+import { EditorSession, GutterSet, STOP_EMISSION, toBoolean, toNumber } from '@gjsify/gtksource-core';
 
 import { WebEditorDriver } from './web-editor-driver.js';
 
@@ -53,6 +53,8 @@ gtk-source-view .gsv-gutter {
 }
 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; }
@@ -138,6 +140,7 @@ 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();
@@ -148,6 +151,7 @@ export class GtkSourceView extends HTMLElement {
     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';
@@ -159,6 +163,7 @@ 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);
@@ -180,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()));
@@ -369,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

@@ -16,7 +16,9 @@ import type {
     GutterColumn,
     StyledRun,
 } from '@gjsify/gtksource-core';
-import { digitCount, LineStore } 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;
 
@@ -31,9 +33,12 @@ 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;
@@ -65,17 +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.scheduleRender('gutter');
+            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();
@@ -122,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;
@@ -234,6 +266,7 @@ export class WebEditorDriver implements EditorDriver {
     }
 
     private hasColumns = false;
+    private hasRightColumns = false;
 
     private render(): void {
         const { backdrop } = this.parts;
@@ -325,7 +358,7 @@ export class WebEditorDriver implements EditorDriver {
 
     /** The gutter: the renderers left of the line numbers, the numbers, the renderers right of them. */
     private renderGutter(): void {
-        const { gutter, root, area } = this.parts;
+        const { gutter, rightGutter, root, area } = this.parts;
         const host = this.host;
         const count = this.text.split('\n').length;
         const [first, last] = this.visibleLines(count);
@@ -342,5 +375,15 @@ export class WebEditorDriver implements EditorDriver {
         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/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/gobject.ts

@@ -21,6 +21,7 @@ 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);

package/src/namespace/gtk.ts

@@ -21,7 +21,7 @@
 // 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, TextWindowType } from './gtk-enums.js';
+export { 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';

package/src/test.browser.mts

@@ -141,6 +141,7 @@ import { AdwFontsTest } from './adw-fonts.spec.js';
 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 { GLibTest } from './glib.spec.js';
 import { StyleManagerTest } from './style-manager.spec.js';
 import { GioActionsTest } from './gio.spec.js';
@@ -160,6 +161,7 @@ run({
     AdwConstructVectorsTest,
     GObjectDoorTest,
     ApplicationTest,
+    GdkTest,
     GLibTest,
     StyleManagerTest,
     GioActionsTest,