@gjsify/adwaita-web 0.64.1 → 0.64.2-next.254

package/src/icon-theme.ts

@@ -13,25 +13,18 @@
 // and `gtk_icon_theme_lookup_icon` returns the first candidate the theme has, else
 // `image-missing` — it never returns NULL (refs/gtk/gtk/gtkicontheme.c, `choose_icon`).
 //
-// This package compiles and registers symbolic glyphs only (`icon-registry.ts`, the
-// stylesheet's `.adw-icon--<name>` masks). The colour half lives here: a map from an EXACT
-// name to an image URL, filled by {@link registerColorIcon}. With the map empty every lookup
-// ends where it ended before this module existed, so nothing that only uses symbolic icons
-// changes.
-//
-// The colour map is keyed by the raw name, not by `normalizeIconName`: an application icon
-// is named after its application ID (`org.gnome.Builder`, adw-about-dialog.c:1215), which is
-// not a CSS token and never could be a mask class, but is a perfectly good Map key.
+// The stylesheet compiles a SUBSET of Adwaita's symbolic glyphs (the `.adw-icon--<name>`
+// masks); that subset is the port's current theme. Everything else — an application's own
+// symbolic glyphs and its full-colour icons alike — comes from GResource files.
 //
 // RESOURCE PATHS (ADR 0116 § 4). The names go through the `Gtk.IconTheme` resource paths an
 // application added (`GtkApplication` adds `<resource-base-path>/icons/` at startup);
 // `@gjsify/adwaita-core`'s `lookupResourceIcon` decides which file answers, as gtkicontheme.c
-// does, and asks this module only whether the stylesheet holds a symbolic glyph. A colour
-// registration stands in hicolor there, as the file an app ships in `hicolor/scalable/apps/`
-// would: the stylesheet's `X-symbolic` answers `X` before it, as Adwaita's does on GNOME. A file
-// answers as a blob URL of its bytes: a symbolic one is drawn as a mask in `currentColor`, the
-// rest as-is. A browser draws SVG and PNG; an XPM or a compressed entry draws `image-missing`
-// with a warning.
+// does, and asks this module only whether the stylesheet holds a symbolic glyph: the
+// stylesheet's `X-symbolic` answers `X` before a resource's colour `X`, as Adwaita's does on
+// GNOME. A file answers as a blob URL of its bytes: a symbolic one is drawn as a mask in
+// `currentColor`, the rest as-is. A browser draws SVG and PNG; an XPM or a compressed entry
+// draws `image-missing` with a warning.
 //
 // Original implementation.
 
@@ -42,14 +35,11 @@ import {
     resources_lookup_data,
     type IconDirection,
 } from '@gjsify/adwaita-core';
-import { toDataUri } from '@gjsify/adwaita-icons/utils';
 
 import { IconTheme } from './namespace/gtk-platform.js';
 
 /** What one icon name resolves to, in the order GTK's theme would try it. */
 export type IconLookup =
-    /** A registered full-colour image, drawn as-is. `url` is ready for `url("…")`. */
-    | { kind: 'color'; name: string; url: string }
     /**
      * A file under a `Gtk.IconTheme` resource path; `symbolic` files are masks in `currentColor`.
      * `url` is `null` when the browser cannot draw the file (XPM, compressed): draw `image-missing`.
@@ -61,21 +51,9 @@ export type IconLookup =
     | { kind: 'missing' };
 
 /**
- * Every name GTK's theme treats as a symbolic FILE (gtkicontheme.c `icon_name_is_symbolic`):
- * the directional variants are symbolic too, so none of them is a colour icon.
- */
-const SYMBOLIC_FILE_NAME = /-symbolic(?:-ltr|-rtl)?$/;
-
-/** Schemes a colour icon may be fetched from. Anything else can run script or is unknown. */
-const ALLOWED_PROTOCOLS = new Set(['http:', 'https:', 'blob:', 'file:']);
-
-const colorIcons = new Map<string, string>();
-
-/**
- * Elements that drew a lookup result and have to redraw when the theme changes. A symbolic
- * registration is live through CSS and needs no redraw, but a colour one is an inline
- * `background-image`, and GTK's own images re-run their lookup on the theme's `changed`
- * signal for the same reason.
+ * Elements that drew a lookup result and have to redraw when the theme changes. A resource
+ * file is an inline `background-image` or mask, and GTK's own images re-run their lookup on
+ * the theme's `changed` signal for the same reason.
  */
 const listeners = new Set<() => void>();
 
@@ -87,11 +65,6 @@ export function onIconThemeChanged(listener: () => void): () => void {
     };
 }
 
-/** Run every subscriber — after any registration that can change a lookup's answer. */
-export function notifyIconThemeChanged(): void {
-    for (const listener of listeners) listener();
-}
-
 /** Whether a symbolic glyph for an already-normalized name is in the cascade. */
 function hasSymbolic(normalized: string): boolean {
     if (normalized === '') return false;
@@ -102,11 +75,9 @@ function hasSymbolic(normalized: string): boolean {
  * Resolve `iconName` as `gtk_icon_theme_lookup_by_gicon` would for a `GtkImage`. `null` when
  * no name was given — the state where GTK draws nothing, not `image-missing`.
  *
- * When neither a colour registration nor a resource holds a name, the request is returned as a
- * symbolic one WITHOUT checking the cascade: the mask class falls back to `image-missing`
- * through CSS by itself and corrects itself when a later `registerIcon` lands, which is how
- * `<gtk-image>` behaved before this module. The cascade is read only to choose between a
- * symbolic glyph and a colour entry or file.
+ * When no resource holds a name, the request is returned as a symbolic one WITHOUT checking
+ * the cascade: the mask class falls back to `image-missing` through CSS by itself. The cascade
+ * is read only to choose between a symbolic glyph and a resource file.
  */
 export function lookupIcon(iconName: string | null | undefined, request: IconRequest = {}): IconLookup | null {
     if (iconName === null || iconName === undefined || iconName === '') return null;
@@ -133,7 +104,7 @@ const resourceUrls = new Map<string, string | null>();
 theme.connect('changed', () => {
     for (const url of resourceUrls.values()) if (url !== null) URL.revokeObjectURL(url);
     resourceUrls.clear();
-    notifyIconThemeChanged();
+    for (const listener of listeners) listener();
 });
 
 const RESOURCE_TYPES: Record<string, string> = { '.svg': 'image/svg+xml', '.png': 'image/png' };
@@ -159,8 +130,8 @@ function resourceUrl(path: string): string | null {
 }
 
 /**
- * The lookup over the colour registrations and the theme's resource paths; `null` when neither
- * answers any name, a `symbolic` entry when the current theme's glyph comes first.
+ * The lookup over the theme's resource paths; `null` when no resource answers any name, a
+ * `symbolic` entry when the current theme's glyph comes first.
  */
 export function resourceIcon(iconName: string, request: IconRequest): IconLookup | null {
     const match = lookupResourceIcon(theme, {
@@ -170,11 +141,9 @@ export function resourceIcon(iconName: string, request: IconRequest): IconLookup
         },
         scale: request.scale ?? 1,
         themeHas: (name) => hasSymbolic(normalizeIconName(name)),
-        hicolorHas: (name) => colorIcons.has(name),
     });
     if (match === null) return null;
     if (match.kind === 'theme') return { kind: 'symbolic', name: normalizeIconName(match.name) };
-    if (match.kind === 'hicolor') return { kind: 'color', name: match.name, url: colorIcons.get(match.name)! };
     return {
         kind: 'resource',
         name: match.name,
@@ -185,78 +154,19 @@ export function resourceIcon(iconName: string, request: IconRequest): IconLookup
 }
 
 /**
- * Whether `iconName` resolves to something other than `image-missing` — a registered colour
- * icon, a file under a resource path, or a symbolic glyph compiled into the stylesheet or
- * registered at runtime.
+ * Whether `name` draws something other than `image-missing` — a file under a `Gtk.IconTheme`
+ * resource path, or a symbolic glyph compiled into the stylesheet. The name is looked up
+ * exactly as `<gtk-image icon-name>` looks it up.
+ *
+ * Reads the live cascade rather than a generated list, so it answers for a glyph that arrived
+ * by any route, including a consumer's own `--icon-<name>` declaration. It is deliberately the
+ * CUSTOM PROPERTY that is read and not the rendered `mask-image` of a probe element: since
+ * `_icon.scss` gives every icon box the `image-missing` fallback, a rendered mask is never
+ * `none`, and comparing against the fallback would answer `false` for `image-missing` itself.
  */
-export function iconResolves(iconName: string): boolean {
-    const found = lookupIcon(iconName);
+export function isIconAvailable(name: string): boolean {
+    const found = lookupIcon(name);
     if (found === null || found.kind === 'missing') return false;
     if (found.kind === 'resource') return found.url !== null;
-    return found.kind === 'color' || hasSymbolic(found.name);
-}
-
-/** `source` as a URL `background-image` can load, or a thrown reason why not. */
-function colorIconUrl(name: string, source: string): string {
-    if (source.trimStart().startsWith('<')) {
-        const root = new DOMParser().parseFromString(source, 'image/svg+xml').documentElement;
-        if (root.tagName !== 'svg') {
-            throw new TypeError(
-                `registerColorIcon(${JSON.stringify(name)}): the source starts with '<' but parsed ` +
-                    `to <${root.tagName}>, not an <svg> root.`,
-            );
-        }
-        return toDataUri(source);
-    }
-
-    let url: URL;
-    try {
-        url = new URL(source, document.baseURI);
-    } catch {
-        throw new TypeError(`registerColorIcon(${JSON.stringify(name)}): the source is neither SVG source nor a URL.`);
-    }
-    const isImageData = url.protocol === 'data:' && /^data:image\//i.test(url.href);
-    if (!isImageData && !ALLOWED_PROTOCOLS.has(url.protocol)) {
-        throw new TypeError(
-            `registerColorIcon(${JSON.stringify(name)}): ${JSON.stringify(url.protocol)} URLs are not ` +
-                'accepted — use http(s):, blob:, file: or a data:image/ URI.',
-        );
-    }
-    return url.href;
-}
-
-/**
- * Register a FULL-COLOUR icon under `name` — what an application ships in
- * `hicolor/scalable/apps/<app-id>.svg` and GTK finds through its icon theme. Every
- * `<gtk-image>` asking for the name draws the image unrecoloured, the way `AdwAboutDialog`'s
- * `application-icon` does on GNOME.
- *
- * `name` is the EXACT icon name, reverse-DNS application IDs included. A name with a
- * `-symbolic` suffix THROWS: that is the other half of the theme, and {@link registerIcon}
- * is its door. `source` is SVG source, or a URL (resolved against the document) to any
- * image the browser can draw.
- *
- * Re-registering a name replaces the image, and every mounted `<gtk-image>` redraws.
- *
- * CLIENT-SIDE ONLY, like `registerIcon`: it reads `document`.
- */
-export function registerColorIcon(name: string, source: string): void {
-    if (typeof name !== 'string' || name === '' || /\s/.test(name)) {
-        throw new TypeError(
-            `registerColorIcon: ${JSON.stringify(name)} is not an icon name — it must be non-empty ` +
-                'and contain no whitespace.',
-        );
-    }
-    if (SYMBOLIC_FILE_NAME.test(name)) {
-        throw new TypeError(
-            `registerColorIcon: ${JSON.stringify(name)} names a SYMBOLIC icon, which is recoloured ` +
-                'rather than drawn as-is — register it with registerIcon() instead.',
-        );
-    }
-    if (typeof source !== 'string' || source.trim() === '') {
-        throw new TypeError(`registerColorIcon(${JSON.stringify(name)}): the source is empty.`);
-    }
-
-    colorIcons.set(name, colorIconUrl(name, source));
-    notifyIconThemeChanged();
+    return hasSymbolic(found.name);
 }

package/src/index.ts

@@ -80,18 +80,14 @@ export type { AdwUndershootEdges } from './scroll-shading.js';
 // replaying an authored tree — a storybook fixture, a devtools probe, the shared-trees
 // spec itself — has a route to it that is not a `.spec.ts` import; see that file's header
 // for why `mountSharedTree` and not `buildSharedTree` alone is the instantiation half.
-export { buildSharedTree, mountSharedTree } from './shared-tree-builder.js';
-export type { MountOptions, MountedSharedTree, SizeSource } from './shared-tree-builder.js';
+export { buildSharedTree, buildWithSiblings, mountSharedTree } from './shared-tree-builder.js';
+export type { BuildOptions, BuiltTree, MountOptions, MountedSharedTree, SizeSource } from './shared-tree-builder.js';
 export { registerTemplateClass } from './template-classes.js';
 
 // The stylesheet compiles a chosen SUBSET of `@gjsify/adwaita-icons` (the whole set is
-// ~1.07 MB of data-URI), so a name outside it draws the `image-missing` fallback. This is
-// the way in for an app that needs a glyph this package does not ship — see
-// `icon-registry.ts` for the full recipe.
-export { isIconAvailable, registerIcon } from './icon-registry.js';
-// The full-colour half of the icon theme — an application icon drawn as-is, the web stand-in
-// for an app's `hicolor/…/apps/<app-id>.svg`. See `icon-theme.ts` for the lookup order.
-export { registerColorIcon } from './icon-theme.js';
+// ~1.07 MB of data-URI). An app's own icons, symbolic and full-colour, come from its
+// GResource through `Gtk.IconTheme`'s resource paths (ADR 0116); see `icon-theme.ts`.
+export { isIconAvailable } from './icon-theme.js';
 
 // THE WIDGET CLASSES ARE REACHABLE ONLY AS `Adw.<Name>` / `Gtk.<Name>` (ADR 0034
 // clause 2 + § Amendment 6). The namespace used to be the LAST line in the file, under a

package/src/keyboard-operable.spec.ts

@@ -314,8 +314,8 @@ export const AdwKeyboardOperableTest = async () => {
                 '<adw-alert-response id="ok">OK</adw-alert-response>' +
                     '<adw-alert-response id="cancel">Cancel</adw-alert-response>',
             );
-            el.setDefaultResponse('ok');
-            el.setResponseEnabled('ok', false);
+            el.set_default_response('ok');
+            el.set_response_enabled('ok', false);
             opener.focus();
             el.setAttribute('open', '');
 
@@ -344,7 +344,7 @@ export const AdwKeyboardOperableTest = async () => {
                     '<adw-alert-response id="ok">OK</adw-alert-response>' +
                     '<adw-alert-response id="cancel">Cancel</adw-alert-response>',
             );
-            el.setDefaultResponse('ok');
+            el.set_default_response('ok');
             el.setAttribute('open', '');
 
             // `adw_alert_dialog_grab_focus` tries the CONTENT first (adw-alert-dialog.c:397)

package/src/learn6502-window.spec.ts

@@ -0,0 +1,113 @@
+// Learn6502's `main.window.blp`, reduced to the shapes that rendered short through
+// `buildWithSiblings`: header-bar buttons after a single `[start]` (GtkBuilder packs an untyped
+// child at start too), and `Overlay { child: Adw.ToastOverlay { Stack } }`. Every
+// widget the file authors has to be in the document once the built window is attached — the
+// failure was widgets that were built and then silently dropped on the way.
+import { describe, expect, it } from '@gjsify/unit';
+import { parseBlueprint, projectToSharedNode } from '@gjsify/blueprint';
+
+import { buildWithSiblings } from './shared-tree-builder.js';
+
+const BLUEPRINT = `using Gtk 4.0;
+using Adw 1;
+
+Adw.ApplicationWindow mainWindow {
+  content: Adw.ToolbarView toolbarView {
+    [top]
+    Adw.HeaderBar headerBar {
+      title-widget: Label titleLabel {
+        label: "Learn 6502";
+      };
+
+      [start]
+      ToggleButton sidebarToggleButton {
+        icon-name: "sidebar-show-symbolic";
+      }
+
+      Button learnBackButton {
+        icon-name: "go-previous-symbolic";
+      }
+
+      Button unsavedChangesIndicator {
+        icon-name: "dot-symbolic";
+      }
+
+      [end]
+      MenuButton menuButton {
+        icon-name: "open-menu-symbolic";
+      }
+    }
+
+    content: Overlay mainOverlay {
+      child: Adw.ToastOverlay toastOverlay {
+        Stack layoutHost {
+          StackPage singlePage {
+            name: "single";
+            child: Adw.Bin singleContainer {
+              child: Label singleLabel {
+                label: "single";
+              };
+            };
+          }
+
+          StackPage threePage {
+            name: "three";
+            child: Adw.Bin threeColumnContainer {
+              child: Box threeColumns {
+                Label threeLabel {
+                  label: "three";
+                }
+              };
+            };
+          }
+        }
+      };
+    };
+  };
+}
+`;
+
+const AUTHORED = [
+    'toolbarView',
+    'headerBar',
+    'titleLabel',
+    'sidebarToggleButton',
+    'learnBackButton',
+    'unsavedChangesIndicator',
+    'menuButton',
+    'mainOverlay',
+    'toastOverlay',
+    'layoutHost',
+    'singleContainer',
+    'singleLabel',
+    'threeColumnContainer',
+    'threeColumns',
+    'threeLabel',
+];
+
+export const AdwLearn6502WindowTest = async () => {
+    await describe("Learn6502's main window through buildWithSiblings", async () => {
+        const { node, lost } = projectToSharedNode(parseBlueprint(BLUEPRINT, 'main.window.blp'));
+
+        await it('projects without losing anything', () => {
+            expect(lost.map((loss) => `${loss.kind}@${loss.line}`).join()).toBe('');
+        });
+
+        await it('puts every authored widget in the document, the start buttons at start', () => {
+            const { root } = buildWithSiblings(node);
+            document.body.append(root);
+            const missing = AUTHORED.filter((id) => !root.querySelector(`#${id}`)?.isConnected);
+            const start = ['sidebarToggleButton', 'learnBackButton', 'unsavedChangesIndicator'].filter(
+                (id) => root.querySelector(`#${id}`)?.parentElement?.className !== 'adw-header-bar-start',
+            );
+            const toast = root.querySelector('#toastOverlay');
+            const overlaid =
+                toast?.closest('.adw-overlay-child') === root.querySelector('#mainOverlay > .adw-overlay-child');
+            root.remove();
+
+            expect(missing.join()).toBe('');
+            expect(start.join()).toBe('');
+            expect(overlaid).toBe(true);
+        });
+    });
+};

package/src/namespace/adw.ts

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

package/src/namespace/gdk.ts

@@ -15,6 +15,7 @@ export const Display = gdk.Display;
 export const Clipboard = gdk.Clipboard;
 export const ContentProvider = gdk.ContentProvider;
 export const ContentFormats = gdk.ContentFormats;
+export const AppLaunchContext = gdk.AppLaunchContext;
 
 export const CURRENT_TIME = GDK_PLATFORM_CURRENT_TIME;
 export const {

package/src/namespace/gio.ts

@@ -24,6 +24,10 @@
 
 import '../file-chooser-host.js';
 
+import { createAppInfo } from '@gjsify/adwaita-core';
+
+import { webPlatformHost } from '../platform-host.js';
+
 export { GioMenu as Menu, GioMenuItem as MenuItem } from '@gjsify/adwaita-core';
 export {
     GioFile as File,
@@ -47,3 +51,7 @@ export {
 } from '@gjsify/adwaita-core';
 export { GioApplication as Application } from '../application.js';
 export { Settings } from '@gjsify/app-settings/browser';
+
+// `Gio.AppInfo.launch_default_for_uri` over the host `Gtk.show_uri` uses (ADR 0101): the core's
+// `gio-app-info.ts`.
+export const AppInfo = createAppInfo(webPlatformHost);

package/src/namespace/glib.ts

@@ -7,6 +7,8 @@
 // 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.
 //
+// `uri_escape_string` is the core's `glib-uri.ts`, a pure function over UTF-8 bytes.
+//
 // `Bytes` and `Error` are the ADR 0100 subset a `Gio.File` reads and fails with (`get_data`,
 // `matches`, `code`, `message`), re-exported from the core's `glib-bytes.ts` / `glib-error.ts`.
 //
@@ -21,6 +23,7 @@ import {
     getCurrentDir,
     getSystemDataDirs,
     MAXUINT32 as GLIB_MAXUINT32,
+    uriEscapeString,
 } from '@gjsify/adwaita-core';
 
 const glib = createGLibTimers();
@@ -40,3 +43,4 @@ export const MAXUINT32 = GLIB_MAXUINT32;
 export const build_filenamev = buildFilenamev;
 export const get_current_dir = getCurrentDir;
 export const get_system_data_dirs = getSystemDataDirs;
+export const uri_escape_string = uriEscapeString;

package/src/namespace/gtk.ts

@@ -86,6 +86,7 @@ export { GtkSeparator as Separator } from '../elements/gtk-separator.js';
 export { GtkSpinButton as SpinButton } from '../elements/gtk-spin-button.js';
 export { GtkSpinner as Spinner } from '../elements/gtk-spinner.js';
 export { GtkStack as Stack } from '../elements/gtk-stack.js';
+export { GtkStackPage as StackPage } from '../elements/gtk-stack-page.js';
 export { GtkStackSidebar as StackSidebar } from '../elements/gtk-stack-sidebar.js';
 export { GtkStackSwitcher as StackSwitcher } from '../elements/gtk-stack-switcher.js';
 export { GtkStringList as StringList } from '@gjsify/adwaita-core';
@@ -101,6 +102,7 @@ export type { WindowCommon } from '@gjsify/adwaita-core';
 export { GtkWindowControls as WindowControls } from '../elements/gtk-window-controls.js';
 export { GtkViewport as Viewport } from '../elements/gtk-viewport.js';
 export { GtkWindowHandle as WindowHandle } from '../elements/gtk-window-handle.js';
+export { ApplicationInhibitFlags } from '@gjsify/adwaita-core';
 export { GtkApplication as Application } from '../application.js';
 export {
     STYLE_PROVIDER_PRIORITY_APPLICATION,