@gjsify/adwaita-web 0.60.0 → 0.61.0

package/README.md

@@ -185,6 +185,17 @@ Chromium 149 to `rgb(0, 117, 255)`: both blue, neither the desktop's accent. A p
 cannot tell such a default from a real accent, which is why the server handoff ranks
 above it.
 
+## Platform members
+
+`Gtk.CssProvider`, `Gtk.StyleContext`, `Gtk.Settings`, `Gtk.IconTheme`, `Gtk.EventControllerKey`,
+`Gtk.show_uri`, `Gdk.KEY_*`, `Adw.ColorScheme` and the web `Gtk.License` are ONE behaviour in
+`adwaita-core/src/gtk-platform.ts`. Each port only supplies a `PlatformHost` (`src/platform-host.ts`):
+a `<style>` element, `window.open` and a keydown listener on the web; `Application.addCss`, an Intent
+and an `OnKeyListener` on NativeScript, where iOS never delivers keys.
+
+`Gio.Settings` is `@gjsify/app-settings` (ADR 0099), an OPTIONAL peer of both ports (Tier 3, ADR 0003
+rule 1).
+
 ## Icons, and the ones the stylesheet does not ship
 
 A `<gtk-image icon-name="go-next">` is a CSS mask: the box takes its colour from

package/lib/types/elements/gtk-drop-down.d.ts

@@ -28,6 +28,10 @@ export declare class GtkDropDown extends HTMLElement {
     /** The selected index. Out-of-range values are ignored (Gtk.DropDown:selected). */
     get selected(): number;
     set selected(value: number);
+    /** `gtk_drop_down_get_selected`. */
+    get_selected(): number;
+    /** `gtk_drop_down_set_selected`; an out-of-range index is ignored, as the `selected` property does. */
+    set_selected(position: number): void;
     /** The selected option's value, or '' when empty (Gtk.DropDown:selected-item). */
     get selectedValue(): string;
     set selectedValue(value: string);

package/lib/types/elements/gtk-label.d.ts

@@ -82,6 +82,10 @@ export declare class GtkLabel extends HTMLElement {
     /** `Gtk.Label:selectable` — whether the text can be selected. GTK's default is not. */
     get selectable(): boolean;
     set selectable(value: boolean);
+    /** `gtk_label_get_label`. */
+    get_label(): string;
+    /** `gtk_label_set_label`. */
+    set_label(str: string): void;
     /** `gtk_label_get_text` — the text as SHOWN, markup reduced and the marker removed. */
     getText(): string;
     connectedCallback(): void;

package/lib/types/elements/gtk-text-view.d.ts

@@ -2,6 +2,13 @@ import { type LabelJustification } from '@gjsify/adwaita-core';
 /** `Gtk.WrapMode`'s four nicks, in enum order — Pango's enum, and the DEFAULT is `none`. */
 declare const WRAP_MODES: readonly ["none", "char", "word", "word-char"];
 type TextViewWrapMode = (typeof WRAP_MODES)[number];
+/** The members of `Gtk.TextBuffer` this element has: text in and out, and the insertion cursor. */
+export interface GtkTextBufferSubset {
+    readonly cursor_position: number;
+    insert_at_cursor(text: string, len?: number): void;
+    set_text(text: string, len?: number): void;
+    get_text(): string;
+}
 export declare class GtkTextView extends HTMLElement {
     private _area;
     private _initialized;
@@ -39,6 +46,14 @@ export declare class GtkTextView extends HTMLElement {
     /** `Gtk.TextView:right-margin` — pixels of blank space to the right of the text. */
     get rightMargin(): number;
     set rightMargin(value: number);
+    /**
+     * `gtk_text_view_get_buffer`: the part of `Gtk.TextBuffer` a program writes through. The text
+     * stays the element's own, so the buffer is a view onto it: the cursor is the textarea's caret,
+     * and a length of -1 means "the whole string", as in GTK.
+     */
+    get buffer(): GtkTextBufferSubset;
+    /** `gtk_text_view_get_buffer`. */
+    get_buffer(): GtkTextBufferSubset;
     /** The inner native textarea, for focus and selection. */
     get textarea(): HTMLTextAreaElement;
     connectedCallback(): void;

package/lib/types/file-chooser-host.d.ts

@@ -0,0 +1,55 @@
+import { type FileChooserDriver, type FileChooserRequest, type FileFilterSpec } from '@gjsify/adwaita-core';
+import './elements/adw-dialog.js';
+import './elements/adw-overlay-split-view.js';
+import './elements/adw-toolbar-view.js';
+import './elements/gtk-button.js';
+import './elements/gtk-drop-down.js';
+import './elements/gtk-entry.js';
+import './elements/gtk-list-box.js';
+import './elements/gtk-list-box-row.js';
+/** What the drawn dialog hands back: an OPFS entry by name, or a file the `<input>` picked. */
+export type OpfsChoice = {
+    readonly name: string;
+} | {
+    readonly upload: File;
+};
+/** File System Access `showOpenFilePicker`/`showSaveFilePicker` options, as far as the door fills them. */
+export interface FilePickerOptions {
+    types?: {
+        description: string;
+        accept: Record<string, string[]>;
+    }[];
+    excludeAcceptAllOption?: boolean;
+    suggestedName?: string;
+}
+/** The platform the driver reads. {@link browserFileChooserEnv} is the real one; a spec passes fakes. */
+export interface WebFileChooserEnv {
+    showOpenFilePicker?: (options: FilePickerOptions) => Promise<FileSystemFileHandle[]>;
+    showSaveFilePicker?: (options: FilePickerOptions) => Promise<FileSystemFileHandle>;
+    /** Transient user activation; an environment that cannot say answers `true`. */
+    isActive(): boolean;
+    opfsRoot(): Promise<FileSystemDirectoryHandle>;
+    /** The drawn dialog over `root`; `null` when the user closed it. */
+    choose(kind: 'open' | 'save', request: FileChooserRequest, root: FileSystemDirectoryHandle): Promise<OpfsChoice | null>;
+    /** Whether `handle` writes through `createWritable`; the worker writes otherwise. */
+    canStreamWrite(handle: FileSystemFileHandle): boolean;
+}
+/**
+ * The File System Access options for `request`. An extension-only filter needs a MIME key, and
+ * `application/octet-stream` is the one that claims nothing about the content. A filter that
+ * accepts everything is the picker's own accept-all option, so it is not a type.
+ */
+export declare function filePickerOptions(request: FileChooserRequest, kind: 'open' | 'save'): FilePickerOptions;
+/** `<input type=file accept>` for one filter: extensions and MIME types; `null` accepts every file. */
+export declare function inputAccept(spec: FileFilterSpec | null): string | null;
+export declare function createWebFileChooserDriver(env: WebFileChooserEnv): FileChooserDriver;
+/**
+ * Lets the user pick an OPFS file (`open`) or name one (`save`). Resolves the choice, or `null`
+ * when the dialog closes without one. On `open`, "Upload…" picks a file through `<input type=file>`;
+ * its `cancel` event dismisses the whole open, as ADR 0100 § 5 maps it.
+ *
+ * The dialog sets `data-ready` once the list is filled, which is what a spec waits for.
+ */
+export declare function presentOpfsDialog(kind: 'open' | 'save', request: FileChooserRequest, root: FileSystemDirectoryHandle): Promise<OpfsChoice | null>;
+export declare function browserFileChooserEnv(): WebFileChooserEnv;
+export declare const webFileChooserDriver: FileChooserDriver;

package/lib/types/file-chooser.spec.d.ts

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

package/lib/types/gtk-platform.spec.d.ts

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

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

@@ -56,3 +56,4 @@ 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';
+export { ColorScheme } from '@gjsify/adwaita-core';

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

@@ -5,3 +5,5 @@ export declare const 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;
+export declare const CURRENT_TIME = 0;
+export declare const KEY_space: 32, KEY_a: 97, KEY_d: 100, KEY_e: 101, KEY_q: 113, KEY_s: 115, KEY_w: 119, KEY_Return: 65293, KEY_Escape: 65307, KEY_Left: 65361, KEY_Up: 65362, KEY_Right: 65363, KEY_Down: 65364;

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

@@ -1,3 +1,6 @@
+import '../file-chooser-host.js';
 export { GioMenu as Menu, GioMenuItem as MenuItem } from '@gjsify/adwaita-core';
+export { GioFile as File, GioListStore as ListStore, GioOutputStream as OutputStream, GioFileOutputStream as FileOutputStream, FileCreateFlags, IOErrorEnum, promisify as _promisify, } from '@gjsify/adwaita-core';
 export { SimpleAction, SimpleActionGroup, ApplicationFlags } from '@gjsify/adwaita-core';
 export { GioApplication as Application } from '../application.js';
+export { Settings } from '@gjsify/app-settings/browser';

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

@@ -1,3 +1,4 @@
+export { GLibBytes as Bytes, GLibError as Error } from '@gjsify/adwaita-core';
 import { buildFilenamev, getCurrentDir, getSystemDataDirs } from '@gjsify/adwaita-core';
 export declare const PRIORITY_HIGH: number;
 export declare const PRIORITY_DEFAULT: number;

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

@@ -25,3 +25,25 @@ export declare const TextExtendSelection: Readonly<{
     readonly WORD: 0;
     readonly LINE: 1;
 }>;
+/** `Gtk.License`, the table `Adw.AboutDialog` reads. */
+export declare const License: {
+    readonly UNKNOWN: 0;
+    readonly CUSTOM: 1;
+    readonly GPL_2_0: 2;
+    readonly GPL_3_0: 3;
+    readonly LGPL_2_1: 4;
+    readonly LGPL_3_0: 5;
+    readonly BSD: 6;
+    readonly MIT_X11: 7;
+    readonly ARTISTIC: 8;
+    readonly GPL_2_0_ONLY: 9;
+    readonly GPL_3_0_ONLY: 10;
+    readonly LGPL_2_1_ONLY: 11;
+    readonly LGPL_3_0_ONLY: 12;
+    readonly AGPL_3_0: 13;
+    readonly AGPL_3_0_ONLY: 14;
+    readonly BSD_3: 15;
+    readonly APACHE_2_0: 16;
+    readonly MPL_2_0: 17;
+    readonly '0BSD': 18;
+};

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

@@ -0,0 +1,13 @@
+export declare const CssProvider: typeof import("@gjsify/adwaita-core").CssProvider;
+export declare const StyleContext: {
+    add_provider_for_display(display: unknown, provider: import("@gjsify/adwaita-core").CssProvider, priority: number): void;
+    remove_provider_for_display(display: unknown, provider: import("@gjsify/adwaita-core").CssProvider): void;
+};
+export declare const Settings: {
+    get_default(): import("@gjsify/adwaita-core").GtkSettings;
+};
+export declare const IconTheme: {
+    get_for_display(display: unknown): import("@gjsify/adwaita-core").IconTheme;
+};
+export declare const EventControllerKey: typeof import("@gjsify/adwaita-core").EventControllerKey;
+export declare const show_uri: (parent: unknown, uri: string, timestamp: number) => void;

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

@@ -1,5 +1,6 @@
 export { GtkAdjustment as Adjustment } from '@gjsify/adwaita-core';
-export { PolicyType, TextDirection, TextExtendSelection, TextWindowType } from './gtk-enums.js';
+export { GtkFileDialog as FileDialog, GtkFileFilter as FileFilter, DialogError } from '@gjsify/adwaita-core';
+export { License, PolicyType, TextDirection, TextExtendSelection, TextWindowType } from './gtk-enums.js';
 export { GtkAboutDialog as AboutDialog } from '../elements/gtk-about-dialog.js';
 export { GtkActionBar as ActionBar } from '../elements/gtk-action-bar.js';
 export { GtkApplicationWindow as ApplicationWindow } from '../elements/gtk-application-window.js';
@@ -75,3 +76,5 @@ export { GtkWindowControls as WindowControls } from '../elements/gtk-window-cont
 export { GtkViewport as Viewport } from '../elements/gtk-viewport.js';
 export { GtkWindowHandle as WindowHandle } from '../elements/gtk-window-handle.js';
 export { GtkApplication as Application } from '../application.js';
+export { STYLE_PROVIDER_PRIORITY_APPLICATION, STYLE_PROVIDER_PRIORITY_FALLBACK, STYLE_PROVIDER_PRIORITY_SETTINGS, STYLE_PROVIDER_PRIORITY_THEME, STYLE_PROVIDER_PRIORITY_USER, } from '@gjsify/adwaita-core';
+export { CssProvider, EventControllerKey, IconTheme, show_uri, StyleContext, Settings } from './gtk-platform.js';

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

@@ -0,0 +1,2 @@
+import type { PlatformHost } from '@gjsify/adwaita-core';
+export declare const webPlatformHost: PlatformHost;

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

@@ -1,5 +1,12 @@
 import { StyleManagerBase, type StyleSource } from '@gjsify/adwaita-core';
 export declare const webStyleSource: StyleSource;
 export declare class AdwStyleManager extends StyleManagerBase {
+    static readonly ColorScheme: {
+        readonly DEFAULT: 0;
+        readonly FORCE_LIGHT: 1;
+        readonly PREFER_LIGHT: 2;
+        readonly PREFER_DARK: 3;
+        readonly FORCE_DARK: 4;
+    };
     static source: StyleSource;
 }

package/package.json

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

package/src/capabilities.mjs

@@ -4,10 +4,7 @@
 
 /** @type {import('./capabilities.d.mts').capabilities} */
 export const capabilities = {
-    layout: {
-        refused:
-            'an <adw-…> element is placed by DOM order and slot=, so a layout-manager placement has no door in the markup this package reads (ADR 0092)',
-    },
+    layout: 'implemented',
     strings: 'implemented',
     responses: 'implemented',
     page: 'implemented',

package/src/construct-vectors.spec.ts

@@ -23,10 +23,19 @@ customElements.define('corpus-extern', CorpusExtern);
 registerTemplateClass(EXTERN_VECTOR_CLASS, 'corpus-extern');
 
 function observe(vector: ConstructVector): unknown {
-    if (vector.kind === 'layout' || vector.kind === 'sibling-object') {
+    if (vector.kind === 'sibling-object') {
         buildSharedTree(vector.tree);
         return undefined;
     }
+    if (vector.kind === 'layout') {
+        // CSS Grid lines count from 1, GTK cells from 0: `2 / span 2` is column 1, columnSpan 2.
+        const start = (line: string) => Number(line.split(' / ')[0]) - 1;
+        const span = (line: string) => Number(line.split('span ')[1]);
+        return [...buildSharedTree(vector.tree).children].map((child) => {
+            const { gridRow, gridColumn } = (child as HTMLElement).style;
+            return { row: start(gridRow), column: start(gridColumn), columnSpan: span(gridColumn) };
+        });
+    }
     if (vector.kind === 'page') {
         const stack = buildSharedTree(vector.tree);
         return [{ name: stack.children[0]!.getAttribute('name'), title: stack.children[0]!.getAttribute('title') }];

package/src/elements/gtk-drop-down.ts

@@ -126,6 +126,16 @@ export class GtkDropDown extends HTMLElement {
         this._selectIndex(value);
     }
 
+    /** `gtk_drop_down_get_selected`. */
+    get_selected(): number {
+        return this.selected;
+    }
+
+    /** `gtk_drop_down_set_selected`; an out-of-range index is ignored, as the `selected` property does. */
+    set_selected(position: number): void {
+        this.selected = position;
+    }
+
     /** The selected option's value, or '' when empty (Gtk.DropDown:selected-item). */
     get selectedValue(): string {
         return this._state.selectedValue;

package/src/elements/gtk-label.ts

@@ -262,6 +262,16 @@ export class GtkLabel extends HTMLElement {
         this.toggleAttribute('selectable', !!value);
     }
 
+    /** `gtk_label_get_label`. */
+    get_label(): string {
+        return this.label;
+    }
+
+    /** `gtk_label_set_label`. */
+    set_label(str: string): void {
+        this.label = str;
+    }
+
     /** `gtk_label_get_text` — the text as SHOWN, markup reduced and the marker removed. */
     getText(): string {
         return labelDisplayText(this.label, this.useMarkup, this.useUnderline);

package/src/elements/gtk-text-view.ts

@@ -75,6 +75,14 @@ const WRAP_WHITE_SPACE: Record<TextViewWrapMode, string> = {
     char: 'pre-wrap',
 };
 
+/** The members of `Gtk.TextBuffer` this element has: text in and out, and the insertion cursor. */
+export interface GtkTextBufferSubset {
+    readonly cursor_position: number;
+    insert_at_cursor(text: string, len?: number): void;
+    set_text(text: string, len?: number): void;
+    get_text(): string;
+}
+
 export class GtkTextView extends HTMLElement {
     private _area!: HTMLTextAreaElement;
     private _initialized = false;
@@ -195,6 +203,38 @@ export class GtkTextView extends HTMLElement {
         this.setAttribute('right-margin', String(value));
     }
 
+    /**
+     * `gtk_text_view_get_buffer`: the part of `Gtk.TextBuffer` a program writes through. The text
+     * stays the element's own, so the buffer is a view onto it: the cursor is the textarea's caret,
+     * and a length of -1 means "the whole string", as in GTK.
+     */
+    get buffer(): GtkTextBufferSubset {
+        return {
+            cursor_position: this._area ? (this._area.selectionEnd ?? this._area.value.length) : this.text.length,
+            insert_at_cursor: (text: string, len = -1) => {
+                const piece = len < 0 ? text : text.slice(0, len);
+                const area = this._area;
+                if (!area) {
+                    this.text = this.text + piece;
+                    return;
+                }
+                const at = area.selectionEnd ?? area.value.length;
+                area.setRangeText(piece, at, at, 'end');
+                this._emitChanged();
+            },
+            set_text: (text: string, len = -1) => {
+                this.text = len < 0 ? text : text.slice(0, len);
+                if (this._area) this._emitChanged();
+            },
+            get_text: () => this.text,
+        } as GtkTextBufferSubset;
+    }
+
+    /** `gtk_text_view_get_buffer`. */
+    get_buffer(): GtkTextBufferSubset {
+        return this.buffer;
+    }
+
     /** The inner native textarea, for focus and selection. */
     get textarea(): HTMLTextAreaElement {
         return this._area;