@gjsify/adwaita-nativescript 0.51.1 → 0.52.0

package/lib/types/widgets/view-switcher-base.d.ts

@@ -1,5 +1,6 @@
 import { GridLayout, type EventData } from '@nativescript/core';
 import type { AdwInlineViewSwitcherDisplayMode, AdwViewSwitcherPolicy, ViewSwitcherState } from '@gjsify/adwaita-core';
+import type { AdwViewStack } from './adw-view-stack.js';
 import { type AdwViewPage, type ViewSwitcherKind, type ViewSwitcherNotifyPayload } from './view-switcher-model.js';
 export type { AdwViewPage };
 /** Event name emitted when the selected view changes. Mirrors GObject `notify::selected`. */
@@ -14,6 +15,18 @@ export interface NotifyViewSelectedEventData extends EventData, ViewSwitcherNoti
 declare const AdwViewSwitcherBase_base: (abstract new (...args: any[]) => {
     connect(eventName: string, callback: (self: /*elided*/ any, data: EventData) => void): number;
     disconnect(handlerId: number): void;
+    get halign(): string;
+    set halign(value: string | number);
+    get valign(): string;
+    set valign(value: string | number);
+    get hexpand(): boolean;
+    set hexpand(value: boolean | string);
+    get vexpand(): boolean;
+    set vexpand(value: boolean | string);
+    get marginStart(): number;
+    set marginStart(value: number | string);
+    get marginEnd(): number;
+    set marginEnd(value: number | string);
     _emit(eventName: string): void;
     addEventListener(eventName: string, callback: (data: EventData) => void, thisArg?: unknown, once?: boolean): void;
     removeEventListener(eventName: string, callback?: (data: EventData) => void, thisArg?: unknown): void;
@@ -27,6 +40,8 @@ declare const AdwViewSwitcherBase_base: (abstract new (...args: any[]) => {
  * Subclasses set the bar/button CSS classes for their look.
  */
 export declare abstract class AdwViewSwitcherBase extends AdwViewSwitcherBase_base {
+    /** `stack` names an `AdwViewStack` of the same tree — see `./builder-slots.ts`. */
+    static readonly builderReferences: readonly string[];
     /** The horizontal switcher bar holding the buttons. */
     protected readonly _bar: GridLayout;
     /** `Adw.ViewSwitcher:policy`, default NARROW as in C. */
@@ -38,6 +53,20 @@ export declare abstract class AdwViewSwitcherBase extends AdwViewSwitcherBase_ba
     /** The headless selection + page model every derivation reads. */
     protected readonly _state: ViewSwitcherState;
     private _nodes;
+    /** The bound `Adw.ViewSwitcher:stack`, or `null` when this switcher carries its own pages. */
+    private _stack;
+    private _stackListener;
+    /**
+     * Whether the CONTENT views are this widget's children.
+     *
+     * `false` once a stack is bound: an `AdwViewStack` is itself the `GridLayout` its
+     * pages live in, so re-parenting them here would empty the stack the consumer just
+     * put in the window. The switcher is then the button bar alone, which is what
+     * `Adw.ViewSwitcher` is on GTK.
+     */
+    private _ownsContent;
+    /** Guards the round trip switcher -> stack -> `notify::visible-child` -> switcher. */
+    private _syncingFromStack;
     /** CSS class applied to the switcher bar — subclass-specific. */
     protected abstract get barClass(): string;
     /** CSS class applied to each switcher button — subclass-specific. */
@@ -64,6 +93,39 @@ export declare abstract class AdwViewSwitcherBase extends AdwViewSwitcherBase_ba
      * first VISIBLE page otherwise.
      */
     setViews(pages: AdwViewPage[]): void;
+    /**
+     * The half of {@link setViews} a bound stack shares: rebuild the bar, and take the
+     * content views only when `ownsContent`.
+     */
+    private _installPages;
+    /**
+     * Bind the switcher to an `AdwViewStack` — `adw_view_switcher_set_stack`.
+     *
+     * THE POINT OF IT is that on GTK the switcher and the stack are two widgets: the
+     * bar goes in a header bar, the stack fills the window body, and one property joins
+     * them. This surface only had the bundled form — `setViews()` with the content
+     * inlined — so a pane ported off GJS had to be rewritten around it. Bound, this
+     * widget renders its BUTTONS only: the stack keeps its pages and stays the thing
+     * that shows them, exactly as {@link AdwViewSwitcherBar} already does.
+     *
+     * The page list is read once here. It is re-read when the stack's page COUNT moves,
+     * which reaches us through `notify::visible-child` — `AdwViewStack.add` notifies on
+     * the auto-pick, and libadwaita rebuilds on the pages model's `items-changed`, which
+     * this surface has no counterpart for.
+     */
+    set_stack(stack: AdwViewStack | null): void;
+    /** The bound stack, or `null` — `Adw.ViewSwitcher:stack`. */
+    get stack(): AdwViewStack | null;
+    set stack(value: AdwViewStack | null);
+    private _unbindStack;
+    /**
+     * Take the bound stack's pages and selection.
+     *
+     * The buttons are rebuilt only when the page COUNT moved: a selection change must
+     * not replace the button under the user's finger, the same rule
+     * `selection_changed_cb` follows (adw-view-switcher.c:265-295).
+     */
+    private _syncFromStack;
     /** Build one button's NS nodes. Painted by {@link _applySelection}. */
     private _buildButton;
     /**

package/lib/types/widgets/widget-layout.d.ts

@@ -0,0 +1,50 @@
+import type { Observable } from '@nativescript/core';
+/**
+ * A constructor the mixin can wrap — the same shape `withSignals` accepts, restated here so
+ * this module does not import the one that applies it.
+ */
+type ObservableConstructor = abstract new (...args: any[]) => Observable;
+/** The six accessors the mixin adds. Named so a consumer can annotate with it. */
+export interface GtkWidgetLayout {
+    /** `GtkWidget:halign` — a `Gtk.Align` nick, read back from `horizontalAlignment`. */
+    halign: string;
+    /** `GtkWidget:valign` — a `Gtk.Align` nick, read back from `verticalAlignment`. */
+    valign: string;
+    /** `GtkWidget:hexpand` — held; see the file header for which parents grant it. */
+    hexpand: boolean;
+    /** `GtkWidget:vexpand` — held; see the file header for which parents grant it. */
+    vexpand: boolean;
+    /** `GtkWidget:margin-start` — the leading edge, resolved against the text direction. */
+    marginStart: number;
+    /** `GtkWidget:margin-end` — the trailing edge, resolved against the text direction. */
+    marginEnd: number;
+}
+/**
+ * Give a `@nativescript/core` base GTK's widget layout properties.
+ *
+ * Applied by `withSignals` and nowhere else, so it reaches exactly the classes that meet the
+ * platform — the rule arm 6 of `check-nativescript-xml-doors.mjs` already holds for that
+ * mixin — and a subclass of a port class inherits it like any other accessor.
+ */
+export declare function withGtkWidgetLayout<TBase extends ObservableConstructor>(Base: TBase): (abstract new (...args: any[]) => {
+    get halign(): string;
+    set halign(value: string | number);
+    get valign(): string;
+    set valign(value: string | number);
+    get hexpand(): boolean;
+    set hexpand(value: boolean | string);
+    get vexpand(): boolean;
+    set vexpand(value: boolean | string);
+    get marginStart(): number;
+    set marginStart(value: number | string);
+    get marginEnd(): number;
+    set marginEnd(value: number | string);
+    _emit(eventName: string): void;
+    addEventListener(eventName: string, callback: (data: import("@nativescript/core").EventData) => void, thisArg?: unknown, once?: boolean): void;
+    removeEventListener(eventName: string, callback?: (data: import("@nativescript/core").EventData) => void, thisArg?: unknown): void;
+    notify<T extends import("@nativescript/core").EventData>(data: T): void;
+    notifyPropertyChange(name: string, value: unknown, oldValue?: unknown): void;
+    set(name: string, value: unknown): void;
+    get(name: string): unknown;
+}) & TBase;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/adwaita-nativescript",
-    "version": "0.51.1",
+    "version": "0.52.0",
     "description": "Native Adwaita widgets for the NativeScript runtime — real NativeScript components (StackLayout/GridLayout/Switch/Label) styled like Libadwaita, not a webview",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -18,6 +18,10 @@
             "types": "./lib/types/namespace/gtk.d.ts",
             "default": "./lib/esm/namespace/gtk.js"
         },
+        "./builder": {
+            "types": "./lib/types/builder/index.d.ts",
+            "default": "./lib/esm/builder/index.js"
+        },
         "./theme/adwaita.css": "./src/theme/adwaita.css",
         "./fonts": {
             "types": "./lib/types/fonts.d.ts",
@@ -26,20 +30,24 @@
     },
     "files": [
         "lib",
+        "!lib/types/**/*.d.mts",
+        "!lib/types/**/*.spec.d.ts",
         "src/theme/adwaita.css"
     ],
     "scripts": {
-        "clear": "gjsify clear lib tsconfig.tsbuildinfo tsconfig.types.tsbuildinfo test.gjs.mjs test.node.mjs",
+        "clear": "gjsify clear lib tsconfig.tsbuildinfo tsconfig.types.tsbuildinfo test.gjs.mjs test.node.mjs test.trees.gjs.mjs test.trees.node.mjs",
         "check": "gjsify tsc --noEmit",
         "build": "gjsify run build:gjsify && gjsify run build:types",
         "build:gjsify": "gjsify build --library 'src/**/*.{ts,js}' --exclude 'src/**/*.spec.{mts,ts}' 'src/test.{mts,ts}'",
         "build:types": "gjsify tsc",
-        "build:test": "gjsify run build:test:gjs && gjsify run build:test:node",
+        "build:test": "gjsify run build:test:gjs && gjsify run build:test:node && gjsify run build:test:trees:gjs && gjsify run build:test:trees:node",
         "build:test:gjs": "gjsify build src/test.mts --app gjs --outfile test.gjs.mjs",
         "build:test:node": "gjsify build src/test.mts --app node --outfile test.node.mjs",
+        "build:test:trees:gjs": "gjsify build src/test.trees.mts --app gjs --no-minify --alias @nativescript/core=../testing/ns-core.mjs --outfile test.trees.gjs.mjs",
+        "build:test:trees:node": "gjsify build src/test.trees.mts --app node --no-minify --alias @nativescript/core=../testing/ns-core.mjs --outfile test.trees.node.mjs",
         "test": "gjsify run build:gjsify && gjsify run build:test && gjsify run test:node && gjsify run test:gjs",
-        "test:gjs": "gjsify run test.gjs.mjs",
-        "test:node": "node test.node.mjs"
+        "test:gjs": "gjsify run test.gjs.mjs && gjsify run test.trees.gjs.mjs",
+        "test:node": "node test.node.mjs && node test.trees.node.mjs"
     },
     "keywords": [
         "gjs",
@@ -51,10 +59,10 @@
         "design-system"
     ],
     "dependencies": {
-        "@gjsify/adwaita-core": "^0.51.1",
-        "@gjsify/adwaita-fonts": "^0.51.1",
-        "@gjsify/adwaita-icons": "^0.51.1",
-        "@gjsify/native-platform": "^0.51.1"
+        "@gjsify/adwaita-core": "^0.52.0",
+        "@gjsify/adwaita-fonts": "^0.52.0",
+        "@gjsify/adwaita-icons": "^0.52.0",
+        "@gjsify/native-platform": "^0.52.0"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -65,8 +73,10 @@
         }
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.51.1",
-        "@gjsify/unit": "^0.51.1",
+        "@gjsify/blueprint": "^0.52.0",
+        "@gjsify/cli": "^0.52.0",
+        "@gjsify/unit": "^0.52.0",
+        "@gjsify/vite-plugin-blueprint": "^0.52.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },

package/src/theme/adwaita.css

@@ -494,9 +494,30 @@ Page.adw-window {
     color: rgba(0, 0, 0, 0.8);
 }
 
+/* `%pill_button` — `padding: 10px 32px; border-radius: 9999px` (_buttons.scss:322-326,
+ * pin 42f647ff). The padding is the whole variant, and it is why this rule HAS to
+ * restate the height.
+ *
+ * `.adw-button` above pins `height: 38`, and a NativeScript `height` is an EXACT box
+ * where GTK's `min-height` is a floor — the same non-equivalence ADR 0034 measured for
+ * `adw-spinner.size`. So a variant that doubles the vertical padding cannot grow the
+ * box it sits in: the base budgets 38 − (5 + 5) = 28 for the label, and this one left
+ * 38 − (10 + 10) = 18 for a `.adw-button-label` at `font-size: 15`, whose line box does
+ * not fit in 18. The pill was clipped, and every consumer that wanted one had to
+ * override the height itself — which is how the defect surfaced, in Learn6502.
+ *
+ * 48 is 28 + (10 + 10): the base's own content box under this variant's padding. GTK
+ * derives the same direction from the same numbers — `min-height: 24px` + 5px twice is
+ * 34, + 10px twice is 44 — so the pill is taller than the plain button there too.
+ *
+ * THE RULE THIS VARIANT BROKE, stated because the next variant will meet it: in this
+ * stylesheet a class that changes vertical padding on a widget whose base pins an exact
+ * `height` must restate that height. `.adw-button.circular` does (34), and both split
+ * button halves do (38) beside their own padding. This one did not, and nothing said so. */
 .adw-button.pill {
     border-radius: 9999;
     padding: 10 32 10 32;
+    height: 48;
 }
 
 /* `%circular_button` — the explicit exception to the 9px rounded square: a full
@@ -693,6 +714,23 @@ Page.adw-window {
     vertical-align: center;
 }
 
+/* ===== Action bar (Gtk.ActionBar) ===== */
+
+/* libadwaita `actionbar > revealer > box`: the headerbar surface with a TOP hairline
+   (an inset shadow there; the NS subset has none, so a border) and 7/6px padding. */
+.adw-action-bar {
+    background-color: #ffffff;
+    border-top-width: 1;
+    border-top-color: rgba(0, 0, 0, 0.1);
+    padding: 7 6 6 6;
+}
+
+.adw-action-bar-start,
+.adw-action-bar-end {
+    margin: 0;
+    vertical-align: center;
+}
+
 /* ===== Toolbar view ===== */
 
 .adw-toolbar-view {
@@ -983,6 +1021,15 @@ Page.adw-window {
     margin: 16 0 0 0;
 }
 
+/* `.compact` (libadwaita `_misc.scss`, statuspage.compact): tighter margins and `.title-2`. */
+.adw-status-page.compact .adw-status-page-content {
+    padding: 12 24 12 24;
+}
+
+.adw-status-page.compact .adw-status-page-title {
+    font-size: 15;
+}
+
 /* ===== Button row (full-width tappable row) ===== */
 
 .adw-button-row {
@@ -1326,7 +1373,10 @@ Page.adw-window {
     background-color: transparent;
 }
 
-.adw-carousel-dots {
+/* The two indicators an app binds to a carousel (`Adw.CarouselIndicatorDots` /
+   `…Lines`): a centred row of markers, the current one `active`. */
+.adw-carousel-indicator-dots,
+.adw-carousel-indicator-lines {
     padding: 8 0 8 0;
 }
 
@@ -1340,6 +1390,20 @@ Page.adw-window {
     color: #3584e4;
 }
 
+/* LINE_LENGTH 35, LINE_WIDTH 3, LINE_SPACING 5 (adw-carousel-indicator-lines.c); the
+   opacity ramp is reduced to the two ends it runs between, 0.3 and 0.9. */
+.adw-carousel-line {
+    width: 35;
+    height: 3;
+    border-radius: 1.5;
+    margin: 0 2.5 0 2.5;
+    background-color: rgba(0, 0, 6, 0.24);
+}
+
+.adw-carousel-line.active {
+    background-color: rgba(0, 0, 6, 0.72);
+}
+
 /* ===== Navigation view ===== */
 
 .adw-navigation-view {
@@ -1431,6 +1495,12 @@ Page.adw-window {
 
 /* ===== Bottom sheet ===== */
 
+/* The scrim a modal sheet lays over its content while open — libadwaita's
+   `> dimming` (_bottom-sheet.scss), at the strength `<adw-bottom-sheet>` paints it. */
+.adw-bottom-sheet-dimming {
+    background-color: rgba(0, 0, 6, 0.32);
+}
+
 .adw-bottom-sheet-panel {
     background-color: #ffffff;
     border-top-left-radius: 16;
@@ -1444,6 +1514,24 @@ Page.adw-window {
     margin: 0 0 6 0;
 }
 
+/* The collapsed form the sheet morphs out of, and the only thing a user can tap to
+   open it. Flat and radius-less inside the panel, like libadwaita's
+   `> sheet > stack > button` (_bottom-sheet.scss). */
+.adw-bottom-sheet-bottom-bar {
+    padding: 8 0;
+}
+
+.adw-bottom-sheet-bottom-bar:highlighted {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+/* can-open off: the bar stays tappable and loses only its press feedback, because
+   upstream refuses the click in the handler rather than disabling the button
+   (adw-bottom-sheet.c:2033-2036). */
+.adw-bottom-sheet-inert:highlighted {
+    background-color: transparent;
+}
+
 /* ===== Toast (transient snackbar) ===== */
 
 .adw-toast {
@@ -1872,6 +1960,11 @@ Page.ns-dark.adw-window {
     border-bottom-color: rgba(255, 255, 255, 0.12);
 }
 
+.ns-dark .adw-action-bar {
+    background-color: #2e2e32;
+    border-top-color: rgba(255, 255, 255, 0.12);
+}
+
 .ns-dark .adw-header-bar.flat {
     background-color: transparent;
     border-bottom-width: 0;
@@ -1997,6 +2090,18 @@ Page.ns-dark.adw-window {
     color: #ffffff;
 }
 
+/* The destructive content label needs the DARK scheme's red, and it needs its own rule
+ * because the light one out-specifies the block above: `.adw-button.destructive-action
+ * .adw-button-content-label` is three classes to that selector's two, so `#c01c28` — a
+ * colour picked to sit on the light scheme's `rgba(224, 27, 36, 0.12)` — was winning on
+ * the dark scheme's `rgba(192, 28, 40, 0.18)`. `.adw-button-label` got this override
+ * (above); `.adw-button-content-label` was left behind, which is the asymmetry the
+ * comment on `.adw-button-label` warns about read from the other side. The suggested
+ * variant needs none: its `#ffffff` is right on `#3584e4` in both schemes. */
+.ns-dark .adw-button.destructive-action .adw-button-content-label {
+    color: #ff7b80;
+}
+
 /* ===== Dark: split button ===== */
 
 .ns-dark .adw-split-button-action,
@@ -2069,6 +2174,14 @@ Page.ns-dark.adw-window {
     color: #78aeed;
 }
 
+.ns-dark .adw-carousel-line {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.ns-dark .adw-carousel-line.active {
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
 /* ===== Dark: navigation view ===== */
 
 .ns-dark .adw-navigation-view,
@@ -2137,6 +2250,14 @@ Page.ns-dark.adw-window {
     color: rgba(255, 255, 255, 0.3);
 }
 
+.ns-dark .adw-bottom-sheet-bottom-bar:highlighted {
+    background-color: rgba(255, 255, 255, 0.07);
+}
+
+.ns-dark .adw-bottom-sheet-inert:highlighted {
+    background-color: transparent;
+}
+
 /* ===== Dark: toast (dark base already; tune for dark page) ===== */
 
 .ns-dark .adw-toast {

package/lib/esm/widgets/label-text.js

@@ -1 +0,0 @@
-import"../_virtual/_rolldown/runtime.js";import{stripMarkup as e,stripMnemonic as t}from"@gjsify/adwaita-core";function labelDisplayText(n,r,i){let a=n??``,o=r?e(a)??a:a;return i?t(o):o}function labelMarkupIsUnparseable(t,n){return n&&e(t??``)===null}export{labelDisplayText,labelMarkupIsUnparseable};

package/lib/types/widgets/label-text.d.ts

@@ -1,13 +0,0 @@
-/**
- * The string a `Gtk.Label` puts in `Label.text` for a given `label` and the two flags
- * that transform it.
- *
- * ORDER MATTERS AND FOLLOWS THE C: markup is reduced first, the mnemonic marker second.
- * `gtk_label_set_markup_with_mnemonic` parses the markup and then takes the underscore out
- * of the resulting TEXT, so an `_` inside a tag's attributes is not a mnemonic. Doing it
- * the other way round would let `<span font_desc="Sans">` lose its underscore and stop
- * parsing.
- */
-export declare function labelDisplayText(label: string, useMarkup: boolean, useUnderline: boolean): string;
-/** Whether `label` carries markup this port could not reduce, so the raw string is shown. */
-export declare function labelMarkupIsUnparseable(label: string, useMarkup: boolean): boolean;