@gjsify/adwaita-web 0.57.0 → 0.58.0

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

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

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

@@ -1,5 +1,5 @@
 import { GtkAdjustment } from '@gjsify/adwaita-core';
-import type { Buffer } from '@gjsify/gtksource-core';
+import type { Buffer, Gutter } from '@gjsify/gtksource-core';
 export declare class GtkSourceView extends HTMLElement {
     static get observedAttributes(): string[];
     private readonly session;
@@ -12,6 +12,7 @@ export declare class GtkSourceView extends HTMLElement {
     private readonly vadj;
     private readonly hadj;
     private direction;
+    private readonly gutters;
     constructor();
     private syncAdjustments;
     private readonly onAreaScroll;
@@ -59,8 +60,8 @@ export declare class GtkSourceView extends HTMLElement {
     get_first_child(): null;
     get_next_sibling(): Element | null;
     get_parent(): Element | null;
-    /** Gutters are slice 6 (ADR 0094). */
-    get_gutter(_window_type: number): never;
+    /** `null` for any side but LEFT and RIGHT, as in GtkSourceView (ADR 0103). */
+    get_gutter(window_type: number): Gutter | null;
     get leftMargin(): number;
     set leftMargin(value: number | string);
     get rightMargin(): number;

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

@@ -14,6 +14,7 @@ export declare class WebEditorDriver implements EditorDriver {
     private layout;
     private readonly runs;
     private scheduled;
+    private numbers;
     private listening;
     private palette;
     private attached;
@@ -35,10 +36,18 @@ export declare class WebEditorDriver implements EditorDriver {
     private applyLayout;
     setPalette(palette: EditorPalette): void;
     private applyPalette;
+    invalidateGutter(): void;
     spliceLines(first: number, removed: number, inserted: number): void;
     paintLine(line: number, _lineStart: number, runs: readonly StyledRun[]): void;
     clearAll(): void;
     /** One repaint per task: a burst of `paintLine` calls from one edit costs one DOM rebuild. */
     private scheduleRender;
+    private hasColumns;
     private render;
+    /** The lines in view, or all of them where nothing is laid out (a detached element, a test DOM). */
+    private visibleLines;
+    private cellElement;
+    private columnElement;
+    /** The gutter: the renderers left of the line numbers, the numbers, the renderers right of them. */
+    private renderGutter;
 }

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

@@ -55,3 +55,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/lib/types/namespace/gio.d.ts

@@ -1,3 +1,3 @@
 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/lib/types/namespace/glib.d.ts

@@ -1,3 +1,4 @@
+import { buildFilenamev, getCurrentDir, getSystemDataDirs } from '@gjsify/adwaita-core';
 export declare const PRIORITY_HIGH: number;
 export declare const PRIORITY_DEFAULT: number;
 export declare const PRIORITY_HIGH_IDLE: number;
@@ -8,3 +9,7 @@ export declare const SOURCE_CONTINUE: boolean;
 export declare const idle_add: (priority: number, run: import("@gjsify/adwaita-core").SourceFunc) => number;
 export declare const timeout_add: (priority: number, milliseconds: number, run: import("@gjsify/adwaita-core").SourceFunc) => number;
 export declare const source_remove: (sourceId: number) => boolean;
+export declare const MAXUINT32 = 4294967295;
+export declare const build_filenamev: typeof buildFilenamev;
+export declare const get_current_dir: typeof getCurrentDir;
+export declare const get_system_data_dirs: typeof getSystemDataDirs;

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

@@ -2,6 +2,7 @@ declare const GObjectObject: import("@gjsify/adwaita-core").GObjectConstructor;
 export { GObjectObject as Object };
 export declare const registerClass: import("@gjsify/adwaita-core").RegisterClass;
 export declare const type_ensure: (gtype: import("@gjsify/adwaita-core").GType) => void;
+export declare const signal_stop_emission_by_name: (instance: import("@gjsify/adwaita-core").GObjectInstance, detailedSignal: string) => void;
 export declare const ParamSpec: typeof import("@gjsify/adwaita-core").ParamSpec;
 export declare const ParamFlags: {
     readonly READABLE: 1;

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

@@ -1,2 +1,2 @@
-export { Buffer, Language, LanguageManager, StyleScheme, StyleSchemeManager, init } from '@gjsify/gtksource-core';
+export { Buffer, Gutter, GutterLines, GutterRenderer, GutterRendererText, Language, LanguageManager, StyleScheme, StyleSchemeManager, init, } from '@gjsify/gtksource-core';
 export { GtkSourceView as View } from '../gtksource/gtk-source-view.js';

package/lib/types/style-manager.d.ts

@@ -0,0 +1,5 @@
+import { StyleManagerBase, type StyleSource } from '@gjsify/adwaita-core';
+export declare const webStyleSource: StyleSource;
+export declare class AdwStyleManager extends StyleManagerBase {
+    static source: StyleSource;
+}

package/lib/types/style-manager.spec.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-web",
-    "version": "0.57.0",
+    "version": "0.58.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.57.0",
-        "@gjsify/adwaita-fonts": "^0.57.0",
-        "@gjsify/adwaita-icons": "^0.57.0",
-        "@gjsify/gtksource-core": "^0.57.0",
+        "@gjsify/adwaita-core": "^0.58.0",
+        "@gjsify/adwaita-fonts": "^0.58.0",
+        "@gjsify/adwaita-icons": "^0.58.0",
+        "@gjsify/gtksource-core": "^0.58.0",
         "@lezer/highlight": "^1.2.3"
     },
     "devDependencies": {
-        "@gjsify/blueprint": "^0.57.0",
-        "@gjsify/cli": "^0.57.0",
-        "@gjsify/unit": "^0.57.0",
-        "@gjsify/vite-plugin-blueprint": "^0.57.0",
+        "@gjsify/blueprint": "^0.58.0",
+        "@gjsify/cli": "^0.58.0",
+        "@gjsify/unit": "^0.58.0",
+        "@gjsify/vite-plugin-blueprint": "^0.58.0",
         "sass": "^1.101.0",
         "typescript": "^6.0.3"
     },

package/src/application.spec.ts

@@ -58,7 +58,7 @@ export const ApplicationTest = async () => {
 
     await describe('adwaita-web: Application (ADR 0098 § 3)', async () => {
         await it('has a vector for every unlocked vfunc', () => {
-            expect(unprovenVfuncs(APPLICATION_VECTORS).length).toBe(0);
+            expect(unprovenVfuncs(APPLICATION_VECTORS, 'Gio.').length).toBe(0);
         });
         await it('Adw.Application is a Gtk.Application', () => {
             expect(Adw.Application.prototype instanceof Gtk.Application).toBe(true);

package/src/gio.spec.ts

@@ -0,0 +1,23 @@
+// The `Gio.SimpleActionGroup` door of adwaita-web, held to the shared vectors (real GJS is their
+// oracle, in adwaita-core's `simple-action-group.gjs.spec.ts`). The door is the namespace module itself.
+
+import {
+    SIMPLE_ACTION_GROUP_VECTORS,
+    driveSimpleActionGroupVectors,
+    type GioActionsLike,
+} from '@gjsify/adwaita-core/conformance';
+import { describe, expect, it } from '@gjsify/unit';
+
+import * as Gio from './namespace/gio.js';
+
+export const GioActionsTest = async () => {
+    await driveSimpleActionGroupVectors(
+        { name: 'adwaita-web', isOracle: false, Gio: Gio as unknown as GioActionsLike },
+        { describe, it, expect },
+    );
+    await describe('adwaita-web: Gio door', async () => {
+        await it('has a vector row for every vector', () => {
+            expect(SIMPLE_ACTION_GROUP_VECTORS.length > 0).toBe(true);
+        });
+    });
+};

package/src/glib.spec.ts

@@ -2,7 +2,14 @@
 // adwaita-core's `glib-timers.gjs.spec.ts`). The door is the namespace module itself, so a member
 // that stops being exported fails here.
 
-import { GLIB_TIMER_VECTORS, driveGLibTimerVectors, type GLibTimersLike } from '@gjsify/adwaita-core/conformance';
+import {
+    GLIB_PATH_VECTORS,
+    GLIB_TIMER_VECTORS,
+    driveGLibPathVectors,
+    driveGLibTimerVectors,
+    type GLibPathsLike,
+    type GLibTimersLike,
+} from '@gjsify/adwaita-core/conformance';
 import { describe, expect, it } from '@gjsify/unit';
 
 import * as GLib from './namespace/glib.js';
@@ -26,9 +33,17 @@ export const GLibTest = async () => {
         },
         { describe, it, expect },
     );
+    await driveGLibPathVectors(
+        { name: 'adwaita-web', isOracle: false, GLib: GLib as unknown as GLibPathsLike },
+        { describe, it, expect },
+    );
     await describe('adwaita-web: GLib door', async () => {
+        await it('answers the host-bound path questions with the root and no data dirs', () => {
+            expect(GLib.get_current_dir()).toBe('/');
+            expect(GLib.get_system_data_dirs().length).toBe(0);
+        });
         await it('has a vector row for every vector', () => {
-            expect(GLIB_TIMER_VECTORS.length > 0).toBe(true);
+            expect(GLIB_TIMER_VECTORS.length > 0 && GLIB_PATH_VECTORS.length > 0).toBe(true);
         });
     });
 };

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

@@ -1,12 +1,16 @@
 import { describe, expect, it } from '@gjsify/unit';
 import {
+    GUTTER_PAINT_VECTORS,
     GTKSOURCE_BUFFER_VECTORS,
     GTKSOURCE_VIEW_DEFAULT_VECTORS,
     GTKSOURCE_VIEW_SURFACE_VECTORS,
     type GtkSourceViewSurfaceLike,
     type GtkSourceBufferLike,
+    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';
 
@@ -36,8 +40,76 @@ export const GtkSourceViewTest = async () => {
             });
         }
 
-        await it('refuses get_gutter by name until slice 6', () => {
-            expect(() => new GtkSourceView().get_gutter(Gtk.TextWindowType.LEFT)).toThrow(/get_gutter/);
+        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 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

@@ -10,14 +10,14 @@
 // 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).
+// `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).
 //
 // 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, toBoolean, toNumber } from '@gjsify/gtksource-core';
 
 import { WebEditorDriver } from './web-editor-driver.js';
 
@@ -44,15 +44,20 @@ 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-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,
@@ -138,6 +143,7 @@ export class GtkSourceView extends HTMLElement {
     private readonly vadj = new GtkAdjustment();
     private readonly hadj = new GtkAdjustment();
     private direction = 1;
+    private readonly gutters = new GutterSet(this);
 
     constructor() {
         super();
@@ -155,6 +161,7 @@ export class GtkSourceView extends HTMLElement {
             gutter: this.gutter,
         });
         this.session = new EditorSession(this.driver, undefined, adwaitaColorScheme());
+        this.session.bindGutters(this.gutters);
     }
 
     private syncAdjustments(): void {
@@ -328,9 +335,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 {

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

@@ -7,7 +7,15 @@
 // 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 type {
+    EditorDriver,
+    EditorHost,
+    EditorLayout,
+    EditorPalette,
+    GutterCell,
+    GutterColumn,
+    StyledRun,
+} from '@gjsify/gtksource-core';
 import { digitCount, LineStore } from '@gjsify/gtksource-core';
 
 const GUTTER_PADDING_PX = 8;
@@ -32,7 +40,8 @@ export class WebEditorDriver implements EditorDriver {
     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;
@@ -60,6 +69,8 @@ export class WebEditorDriver implements EditorDriver {
                 'transform',
                 `translateY(${-area.scrollTop}px)`,
             );
+            // Only the lines in view are asked; a scroll brings new ones.
+            if (this.hasColumns) this.scheduleRender('gutter');
         });
         on(area, 'select', () => this.onSelection());
         on(area, 'keyup', () => this.onSelection());
@@ -188,6 +199,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 +220,23 @@ 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 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 +273,74 @@ 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, 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);
     }
 }

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/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,6 +18,7 @@ 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 TYPE_STRING = gobject.TYPE_STRING;

package/src/namespace/gtksource.ts

@@ -3,7 +3,18 @@
 // the NativeScript port publishes. `export * as GtkSource from './namespace/gtksource.js'` in
 // `src/index.ts` makes it the namespace the `gi://GtkSource` arm answers from.
 //
-// A TRUE SUBSET: GtkSource's gutters, completion, search and the rest are absent, and the arm
-// refuses each by name.
-export { Buffer, Language, LanguageManager, StyleScheme, StyleSchemeManager, init } from '@gjsify/gtksource-core';
+// A TRUE SUBSET: GtkSource's completion, search and the rest are absent, and the arm refuses each
+// by name.
+export {
+    Buffer,
+    Gutter,
+    GutterLines,
+    GutterRenderer,
+    GutterRendererText,
+    Language,
+    LanguageManager,
+    StyleScheme,
+    StyleSchemeManager,
+    init,
+} from '@gjsify/gtksource-core';
 export { GtkSourceView as View } from '../gtksource/gtk-source-view.js';

package/src/style-manager.spec.ts

@@ -0,0 +1,36 @@
+// The `Adw.StyleManager` door of adwaita-web, held to the shared vectors (real GJS is their oracle, in
+// adwaita-core's `style-manager.gjs.spec.ts`). The page is made dark the way an app does it: the
+// `.theme-dark` / `.theme-light` class on the root.
+
+import { STYLE_MANAGER_VECTORS, driveStyleManagerVectors, type AdwStyleLike } from '@gjsify/adwaita-core/conformance';
+import { describe, expect, it } from '@gjsify/unit';
+
+import * as Adw from './namespace/adw.js';
+
+export const StyleManagerTest = async () => {
+    const root = document.documentElement;
+    const before = root.className;
+    try {
+        await driveStyleManagerVectors(
+            {
+                name: 'adwaita-web',
+                isOracle: false,
+                Adw: Adw as unknown as AdwStyleLike,
+                setDark(dark) {
+                    root.classList.remove('theme-dark', 'theme-light');
+                    root.classList.add(dark ? 'theme-dark' : 'theme-light');
+                },
+                // A MutationObserver reports in a microtask; a task later it has been heard.
+                settle: () => new Promise((resolve) => setTimeout(resolve, 0)),
+            },
+            { describe, it, expect },
+        );
+        await describe('adwaita-web: Adw.StyleManager door', async () => {
+            await it('has a vector row for every vector', () => {
+                expect(STYLE_MANAGER_VECTORS.length > 0).toBe(true);
+            });
+        });
+    } finally {
+        root.className = before;
+    }
+};

package/src/style-manager.ts

@@ -0,0 +1,27 @@
+// `Adw.StyleManager` on the browser: `dark` is what the page shows — a `.theme-dark` / `.theme-light`
+// on the root outranks `prefers-color-scheme` (ADR 0078, `isAdwaitaDark`). The behaviour is the
+// 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 { isAdwaitaDark } from './accent.js';
+
+export const webStyleSource: StyleSource = {
+    dark: () => typeof document !== 'undefined' && isAdwaitaDark(document.documentElement),
+    subscribe(changed) {
+        if (typeof document === 'undefined') return () => {};
+        const media = globalThis.matchMedia?.('(prefers-color-scheme: dark)');
+        media?.addEventListener('change', changed);
+        const observer = new MutationObserver(changed);
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+        return () => {
+            media?.removeEventListener('change', changed);
+            observer.disconnect();
+        };
+    },
+};
+
+export class AdwStyleManager extends StyleManagerBase {
+    static override source = webStyleSource;
+}

package/src/test.browser.mts

@@ -142,6 +142,8 @@ import { AdwConstructVectorsTest } from './construct-vectors.spec.js';
 import { GObjectDoorTest } from './gobject-door.spec.js';
 import { ApplicationTest } from './application.spec.js';
 import { GLibTest } from './glib.spec.js';
+import { StyleManagerTest } from './style-manager.spec.js';
+import { GioActionsTest } from './gio.spec.js';
 import { MenuActionsTest } from './menu-actions.spec.js';
 import { AdwSharedTreesTest } from './shared-trees.spec.js';
 import { AdwBlueprintTreeTest } from './blueprint-tree.spec.js';
@@ -159,6 +161,8 @@ run({
     GObjectDoorTest,
     ApplicationTest,
     GLibTest,
+    StyleManagerTest,
+    GioActionsTest,
     MenuActionsTest,
     AdwBlueprintTreeTest,
     AdwValueListsTest,