@gjsify/example-gtk-adwaita-storybook 0.53.0 → 0.55.0

package/src/presentation/grid-view.story.ts

@@ -0,0 +1,64 @@
+// Gtk.GridView — the list view's model and factory, reflowed into columns.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { GRID_VIEW_ITEMS, gridViewMeta } from './grid-view.meta.js';
+
+/** Story: a Gtk.GridView over a Gtk.StringList, with both column bounds as args. */
+export class GridViewStory extends StoryWidget {
+    private _view: Gtk.GridView | null = null;
+    private _model: Gtk.StringList | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookGridView' }, GridViewStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(GridViewStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...gridViewMeta, component: Gtk.GridView.$gtype };
+    }
+
+    initialize(): void {
+        this._model = Gtk.StringList.new([...GRID_VIEW_ITEMS]);
+
+        const factory = new Gtk.SignalListItemFactory();
+        factory.connect('setup', (_factory, item: GObject.Object) => {
+            (item as Gtk.ListItem).child = new Gtk.Label({ xalign: 0.5 });
+        });
+        factory.connect('bind', (_factory, item: GObject.Object) => {
+            const listItem = item as Gtk.ListItem;
+            const label = listItem.child as Gtk.Label;
+            label.label = (listItem.item as Gtk.StringObject).string;
+        });
+
+        this._view = new Gtk.GridView({ factory, vexpand: true });
+        const scroller = new Gtk.ScrolledWindow({ child: this._view, heightRequest: 200, hexpand: true });
+        this._apply();
+        this.addContent(scroller);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._view || !this._model) return;
+        this._view.model =
+            (this.args.selectionMode as string) === 'multiple'
+                ? Gtk.MultiSelection.new(this._model)
+                : (this.args.selectionMode as string) === 'none'
+                  ? Gtk.NoSelection.new(this._model)
+                  : Gtk.SingleSelection.new(this._model);
+        this._view.minColumns = Math.max(1, this.args.minColumns as number);
+        this._view.maxColumns = Math.max(this._view.minColumns, this.args.maxColumns as number);
+    }
+}
+
+GObject.type_ensure(GridViewStory.$gtype);
+
+export const GridViewStories: StoryModule = { stories: [GridViewStory] };

package/src/presentation/list-box.meta.ts

@@ -0,0 +1,55 @@
+// Shared, renderer-agnostic metadata for the List Box story. Imported by the GTK renderer
+// (list-box.story.ts) and the browser renderer (browser/presentation/list-box.web.ts), so
+// both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** The rows both renderings build, so a selected position means the same thing everywhere. */
+export const LIST_BOX_ROWS = ['Documents', 'Downloads', 'Music', 'Pictures', 'Videos'] as const;
+
+/**
+ * All four `Gtk.SelectionMode` values, under the same nicks the attribute and the shared
+ * selection module use — `browse` included, which is the mode the model-driven views have no
+ * word for because they wrap a selection MODEL and this one does not.
+ */
+export const LIST_BOX_SELECTION_MODES = [
+    { label: 'Single', value: 'single' },
+    { label: 'Multiple', value: 'multiple' },
+    { label: 'Browse', value: 'browse' },
+    { label: 'None', value: 'none' },
+];
+
+export const listBoxMeta: StoryMeta = {
+    title: 'Presentation/List Box',
+    description:
+        'Gtk.ListBox — one row per child you append, with GTK’s four selection modes. Ctrl toggles and ' +
+        'Shift extends from the anchor the last Shift-click left behind; activate-on-single-click defaults ' +
+        'to TRUE here, unlike Gtk.ListView’s single-click-activate.',
+    controls: [
+        {
+            name: 'selectionMode',
+            label: 'Selection',
+            type: ControlType.SELECT,
+            options: LIST_BOX_SELECTION_MODES,
+            defaultValue: 'single',
+        },
+        { name: 'showSeparators', label: 'Separators', type: ControlType.BOOLEAN, defaultValue: true },
+        {
+            name: 'activateOnSingleClick',
+            label: 'Activate on single click',
+            type: ControlType.BOOLEAN,
+            defaultValue: true,
+        },
+        {
+            name: 'tabBehavior',
+            label: 'Tab behaviour',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'All', value: 'all' },
+                { label: 'Item', value: 'item' },
+                { label: 'Cell', value: 'cell' },
+            ],
+            defaultValue: 'all',
+        },
+    ],
+};

package/src/presentation/list-box.story.ts

@@ -0,0 +1,68 @@
+// Gtk.ListBox — one row per child you append, with GTK's four selection modes.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { LIST_BOX_ROWS, listBoxMeta } from './list-box.meta.js';
+
+/** Story: a Gtk.ListBox of GtkListBoxRow children, the selection mode chosen by an arg. */
+export class ListBoxStory extends StoryWidget {
+    private _box: Gtk.ListBox | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookListBox' }, ListBoxStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ListBoxStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...listBoxMeta, component: Gtk.ListBox.$gtype };
+    }
+
+    initialize(): void {
+        this._box = new Gtk.ListBox({ hexpand: true });
+        // `gtk_list_box_append()` WRAPS whatever it is given in a GtkListBoxRow, so the rows
+        // are built here — the one thing the markup form has to spell and this cannot.
+        for (const title of LIST_BOX_ROWS) {
+            this._box.append(new Gtk.ListBoxRow({ child: new Gtk.Label({ label: title, xalign: 0 }) }));
+        }
+        this._apply();
+        const scroller = new Gtk.ScrolledWindow({ child: this._box, heightRequest: 200 });
+        this.addContent(scroller);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._box) return;
+        this._box.selection_mode = this._selectionMode();
+        this._box.show_separators = this.args.showSeparators as boolean;
+        // The ParamSpec default is TRUE (gtklistbox.c:543) — the opposite of GtkListView's
+        // `single-click-activate` — so a false arg is the only thing that changes it.
+        this._box.activate_on_single_click = this.args.activateOnSingleClick as boolean;
+        this._box.tab_behavior = this.args.tabBehavior as Gtk.ListTabBehavior;
+    }
+
+    /** The four `Gtk.SelectionMode` values, under the nicks the shared metadata spells. */
+    private _selectionMode(): Gtk.SelectionMode {
+        switch (this.args.selectionMode as string) {
+            case 'multiple':
+                return Gtk.SelectionMode.MULTIPLE;
+            case 'browse':
+                return Gtk.SelectionMode.BROWSE;
+            case 'none':
+                return Gtk.SelectionMode.NONE;
+            default:
+                return Gtk.SelectionMode.SINGLE;
+        }
+    }
+}
+
+GObject.type_ensure(ListBoxStory.$gtype);
+
+export const ListBoxStories: StoryModule = { stories: [ListBoxStory] };

package/src/presentation/list-view.meta.ts

@@ -0,0 +1,38 @@
+// Shared, renderer-agnostic metadata for the List View story. Imported by the GTK
+// renderer (list-view.story.ts) and the browser renderer
+// (browser/presentation/list-view.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** The one model all renderings drive, so a selected position means the same thing everywhere. */
+export const LIST_VIEW_ITEMS = ['Documents', 'Downloads', 'Music', 'Pictures', 'Videos'] as const;
+
+/** The three selection models a view may wrap its model in, under their portable nicks. */
+export const LIST_VIEW_SELECTION_MODES = [
+    { label: 'Single', value: 'single' },
+    { label: 'Multiple', value: 'multiple' },
+    { label: 'None', value: 'none' },
+];
+
+export const listViewMeta: StoryMeta = {
+    title: 'Presentation/List View',
+    description:
+        'Gtk.ListView — one row per item of a list model, each built by a factory. The model is the ' +
+        'portable list (ADR 0046); which Gtk.SelectionModel would have wrapped it is the selection mode.',
+    controls: [
+        {
+            name: 'selectionMode',
+            label: 'Selection',
+            type: ControlType.SELECT,
+            options: LIST_VIEW_SELECTION_MODES,
+            defaultValue: 'single',
+        },
+        { name: 'showSeparators', label: 'Separators', type: ControlType.BOOLEAN, defaultValue: true },
+        {
+            name: 'singleClickActivate',
+            label: 'Activate on single click',
+            type: ControlType.BOOLEAN,
+            defaultValue: false,
+        },
+    ],
+};

package/src/presentation/list-view.story.ts

@@ -0,0 +1,73 @@
+// Gtk.ListView — one row per model item, each built by a factory.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { LIST_VIEW_ITEMS, listViewMeta } from './list-view.meta.js';
+
+/** Story: a Gtk.ListView over a Gtk.StringList, with the selection model chosen by an arg. */
+export class ListViewStory extends StoryWidget {
+    private _view: Gtk.ListView | null = null;
+    private _model: Gtk.StringList | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookListView' }, ListViewStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(ListViewStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...listViewMeta, component: Gtk.ListView.$gtype };
+    }
+
+    initialize(): void {
+        this._model = Gtk.StringList.new([...LIST_VIEW_ITEMS]);
+
+        // `setup` builds the row widget and `bind` fills it — the pair GTK keeps apart so
+        // it can RECYCLE rows while scrolling.
+        const factory = new Gtk.SignalListItemFactory();
+        factory.connect('setup', (_factory, item: GObject.Object) => {
+            (item as Gtk.ListItem).child = new Gtk.Label({ xalign: 0 });
+        });
+        factory.connect('bind', (_factory, item: GObject.Object) => {
+            const listItem = item as Gtk.ListItem;
+            const label = listItem.child as Gtk.Label;
+            label.label = (listItem.item as Gtk.StringObject).string;
+        });
+
+        this._view = new Gtk.ListView({ factory, vexpand: true });
+        const scroller = new Gtk.ScrolledWindow({ child: this._view, heightRequest: 200, hexpand: true });
+        this._apply();
+        this.addContent(scroller);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._view || !this._model) return;
+        this._view.model = this._selectionModel(this._model);
+        this._view.showSeparators = this.args.showSeparators as boolean;
+        this._view.singleClickActivate = this.args.singleClickActivate as boolean;
+    }
+
+    /** The three models a `GtkListView:model` may be, under the nicks the story shares. */
+    private _selectionModel(model: Gtk.StringList): Gtk.SelectionModel {
+        switch (this.args.selectionMode as string) {
+            case 'multiple':
+                return Gtk.MultiSelection.new(model);
+            case 'none':
+                return Gtk.NoSelection.new(model);
+            default:
+                return Gtk.SingleSelection.new(model);
+        }
+    }
+}
+
+GObject.type_ensure(ListViewStory.$gtype);
+
+export const ListViewStories: StoryModule = { stories: [ListViewStory] };

package/src/presentation/tree-expander.meta.ts

@@ -0,0 +1,24 @@
+// Shared, renderer-agnostic metadata for the Tree Expander story. Imported by the GTK
+// renderer (tree-expander.story.ts) and the browser renderer
+// (browser/presentation/tree-expander.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** One small tree, as parent labels to their children — enough for two levels of depth. */
+export const TREE_EXPANDER_TREE: Readonly<Record<string, readonly string[]>> = {
+    Pictures: ['Holiday', 'Screenshots'],
+    Music: ['Albums'],
+    Notes: [],
+};
+
+export const treeExpanderMeta: StoryMeta = {
+    title: 'Presentation/Tree Expander',
+    description:
+        'Gtk.TreeExpander — the indent and the disclosure arrow a tree row wears in front of its contents. ' +
+        'A leaf takes one indent in place of the arrow, so its text lines up with its siblings.',
+    controls: [
+        { name: 'expanded', label: 'Expanded', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'hideExpander', label: 'Hide the arrow', type: ControlType.BOOLEAN, defaultValue: false },
+        { name: 'indentForIcon', label: 'Indent leaves by an arrow', type: ControlType.BOOLEAN, defaultValue: true },
+    ],
+};

package/src/presentation/tree-expander.story.ts

@@ -0,0 +1,105 @@
+// Gtk.TreeExpander — the indent and the arrow in front of a tree row's contents.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import type Gio from 'gi://Gio?version=2.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { TREE_EXPANDER_TREE, treeExpanderMeta } from './tree-expander.meta.js';
+
+/**
+ * Story: a Gtk.ListView over a Gtk.TreeListModel, each row a Gtk.TreeExpander.
+ *
+ * The expander is only ever reachable this way — it watches a `GtkTreeListRow`, which
+ * only a `GtkTreeListModel` produces — so the story builds the model the widget needs
+ * rather than a standalone expander that would have nothing to expand.
+ */
+export class TreeExpanderStory extends StoryWidget {
+    private _view: Gtk.ListView | null = null;
+    private _tree: Gtk.TreeListModel | null = null;
+    /** The expanders the factory has built, so an arg change reaches the live ones. */
+    private readonly _expanders = new Set<Gtk.TreeExpander>();
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookTreeExpander' }, TreeExpanderStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(TreeExpanderStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...treeExpanderMeta, component: Gtk.TreeExpander.$gtype };
+    }
+
+    initialize(): void {
+        const roots = Gtk.StringList.new(Object.keys(TREE_EXPANDER_TREE));
+        // `passthrough: false` is what makes the model hand out `GtkTreeListRow`s, which
+        // is what the expander watches; the C says so in the widget's own documentation.
+        this._tree = Gtk.TreeListModel.new(roots, false, false, (item: GObject.Object) => {
+            const children = TREE_EXPANDER_TREE[(item as Gtk.StringObject).string] ?? [];
+            return children.length === 0 ? null : (Gtk.StringList.new([...children]) as Gio.ListModel);
+        });
+
+        const factory = new Gtk.SignalListItemFactory();
+        factory.connect('setup', (_factory, item: GObject.Object) => {
+            const listItem = item as Gtk.ListItem;
+            // The expander owns the keyboard shortcuts, so focus belongs to it and not to
+            // the list item around it (gtktreeexpander.c, "Shortcuts and Gestures").
+            listItem.focusable = false;
+            const expander = new Gtk.TreeExpander();
+            expander.child = new Gtk.Label({ xalign: 0 });
+            listItem.child = expander;
+            this._expanders.add(expander);
+        });
+        factory.connect('teardown', (_factory, item: GObject.Object) => {
+            // Cleanup beside creation: a recycled row's expander is unparented here, and a
+            // set that kept it would hand a destroyed widget to the next arg change.
+            const child = (item as Gtk.ListItem).child;
+            if (child !== null) this._expanders.delete(child as Gtk.TreeExpander);
+        });
+        factory.connect('bind', (_factory, item: GObject.Object) => {
+            const listItem = item as Gtk.ListItem;
+            const expander = listItem.child as Gtk.TreeExpander;
+            const row = listItem.item as Gtk.TreeListRow;
+            expander.listRow = row;
+            (expander.child as Gtk.Label).label = (row.item as Gtk.StringObject).string;
+            this._applyTo(expander);
+        });
+
+        this._view = new Gtk.ListView({ model: Gtk.SingleSelection.new(this._tree), factory, vexpand: true });
+        const scroller = new Gtk.ScrolledWindow({ child: this._view, heightRequest: 200, hexpand: true });
+        this.addContent(scroller);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    /**
+     * Apply the args to the ROOT rows and to every expander currently bound.
+     *
+     * Two halves because the two properties live in two places: `expanded` is the tree
+     * row's and survives a row widget being recycled, while `hide-expander` and
+     * `indent-for-icon` are the WIDGET's and therefore have to be re-applied to each one
+     * the factory has built — which `bind` does for a row that arrives later.
+     */
+    private _apply(): void {
+        if (this._tree === null) return;
+        for (let position = 0; position < this._tree.get_n_items(); position++) {
+            const row = this._tree.get_row(position);
+            if (row !== null && row.depth === 0) row.expanded = this.args.expanded as boolean;
+        }
+        for (const expander of this._expanders) this._applyTo(expander);
+    }
+
+    private _applyTo(expander: Gtk.TreeExpander): void {
+        expander.hideExpander = this.args.hideExpander as boolean;
+        expander.indentForIcon = this.args.indentForIcon as boolean;
+    }
+}
+
+GObject.type_ensure(TreeExpanderStory.$gtype);
+
+export const TreeExpanderStories: StoryModule = { stories: [TreeExpanderStory] };

package/src/presentation/window-handle.meta.ts

@@ -0,0 +1,27 @@
+// Shared, renderer-agnostic metadata for the Window Handle story. Imported by the GTK
+// renderer (presentation/window-handle.story.ts) and the browser renderer
+// (browser/presentation/window-handle.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const windowHandleMeta: StoryMeta = {
+    title: 'Presentation/WindowHandle',
+    description:
+        'Gtk.WindowHandle — the titlebar strip. Dragging it moves the window; a double click, ' +
+        'a middle click and a right click raise the window actions the compositor (or, here, the ' +
+        'titlebar settings) names.',
+    controls: [
+        {
+            name: 'action',
+            label: 'Double-click action',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Toggle maximize', value: 'toggle-maximize' },
+                { label: 'Minimize', value: 'minimize' },
+                { label: 'Menu', value: 'menu' },
+                { label: 'None', value: 'none' },
+            ],
+            defaultValue: 'toggle-maximize',
+        },
+    ],
+};

package/src/presentation/window-handle.story.ts

@@ -0,0 +1,53 @@
+// Gtk.WindowHandle — a header bar that can be dragged, and the three titlebar clicks.
+// original implementation.
+
+import Adw from 'gi://Adw?version=1';
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { windowHandleMeta } from './window-handle.meta.js';
+
+/**
+ * Story: a Gtk.WindowHandle around a header bar — the shape a window's titlebar takes.
+ */
+export class WindowHandleStory extends StoryWidget {
+    private _handle: Gtk.WindowHandle | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookWindowHandle' }, WindowHandleStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(WindowHandleStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...windowHandleMeta, component: Gtk.WindowHandle.$gtype };
+    }
+
+    initialize(): void {
+        const bar = new Adw.HeaderBar();
+        bar.set_title_widget(new Adw.WindowTitle({ title: 'Notes' }));
+        this._handle = new Gtk.WindowHandle({ child: bar, halign: Gtk.Align.CENTER });
+        this._apply();
+        this.addContent(this._handle);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        // READ, and cannot be honoured: the action a double click performs is the
+        // `gtk-titlebar-double-click` SETTING, resolved by the compositor first
+        // (`gdk_toplevel_titlebar_gesture`) and by `Gtk.Settings` where there is no answer
+        // (gtkwindowhandle.c:282-333). A widget has no handle on either, so this story cannot
+        // set it per instance; the web renderer takes the same value as an attribute, which is
+        // the only door a document has.
+        void this.args.action;
+    }
+}
+
+GObject.type_ensure(WindowHandleStory.$gtype);
+
+export const WindowHandleStories: StoryModule = { stories: [WindowHandleStory] };

package/src/rows/preferences-row.meta.ts

@@ -0,0 +1,15 @@
+// Shared, renderer-agnostic metadata for the Preferences Row story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const preferencesRowMeta: StoryMeta = {
+    title: 'Boxed Lists/Preferences Row',
+    description:
+        'Adw.PreferencesRow — the base of every boxed-list row: a list row with a title that the preferences ' +
+        'dialog searches. The title can carry Pango markup and be made selectable.',
+    controls: [
+        { name: 'title', label: 'Title', type: ControlType.TEXT, defaultValue: 'A <b>plain</b> preferences row' },
+        { name: 'useMarkup', label: 'Use markup', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'titleSelectable', label: 'Title selectable', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/rows/preferences-row.story.ts

@@ -0,0 +1,50 @@
+// Adw.PreferencesRow — the base row, shown inside a boxed list.
+// original implementation.
+
+import Adw from 'gi://Adw?version=1';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { preferencesRowMeta } from './preferences-row.meta.js';
+
+/** Story: a bare Adw.PreferencesRow inside an Adw.PreferencesGroup. */
+export class PreferencesRowStory extends StoryWidget {
+    private _row: Adw.PreferencesRow | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookPreferencesRow' }, PreferencesRowStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(PreferencesRowStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...preferencesRowMeta, component: Adw.PreferencesRow.$gtype };
+    }
+
+    initialize(): void {
+        this._row = new Adw.PreferencesRow();
+        this._apply();
+
+        const group = new Adw.PreferencesGroup();
+        group.add(this._row);
+
+        const clamp = new Adw.Clamp({ maximumSize: 400, child: group });
+        this.addContent(clamp);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._row) return;
+        this._row.title = this.args.title as string;
+        this._row.useMarkup = this.args.useMarkup as boolean;
+        this._row.titleSelectable = this.args.titleSelectable as boolean;
+    }
+}
+
+GObject.type_ensure(PreferencesRowStory.$gtype);
+
+export const PreferencesRowStories: StoryModule = { stories: [PreferencesRowStory] };

package/src/text/editable-label.meta.ts

@@ -0,0 +1,17 @@
+// Shared, renderer-agnostic metadata for the Editable Label story. Imported by the GTK
+// renderer (editable-label.story.ts) and the browser renderer
+// (browser/text/editable-label.web.ts), so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const editableLabelMeta: StoryMeta = {
+    title: 'Text/Editable Label',
+    description:
+        'Gtk.EditableLabel — a label you click and edit in place. Enter starts editing, Enter commits, ' +
+        'Escape discards, and editable=false leaves it a label; the draft lives in the entry, not in the label.',
+    controls: [
+        { name: 'text', label: 'Text', type: ControlType.TEXT, defaultValue: 'Ada Lovelace' },
+        { name: 'editable', label: 'Editable', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'editing', label: 'Editing', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/text/editable-label.story.ts

@@ -0,0 +1,47 @@
+// Gtk.EditableLabel — a label you click and edit in place.
+// original implementation.
+
+import Gtk from 'gi://Gtk?version=4.0';
+import GObject from 'gi://GObject?version=2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { editableLabelMeta } from './editable-label.meta.js';
+
+/** Story: a Gtk.EditableLabel with its text and both of its booleans bound to args. */
+export class EditableLabelStory extends StoryWidget {
+    private _label: Gtk.EditableLabel | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookEditableLabel' }, EditableLabelStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(EditableLabelStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...editableLabelMeta, component: Gtk.EditableLabel.$gtype };
+    }
+
+    initialize(): void {
+        this._label = new Gtk.EditableLabel({ halign: Gtk.Align.CENTER });
+        this._apply();
+        this.addContent(this._label);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._label) return;
+        // The draft lives in the entry, so the property is written only while nothing is being
+        // edited — which is the order the C keeps them in (gtkeditablelabel.c:237-248).
+        if (!this._label.editing) this._label.text = this.args.text as string;
+        this._label.editable = this.args.editable as boolean;
+        this._label.editing = this.args.editing as boolean;
+    }
+}
+
+GObject.type_ensure(EditableLabelStory.$gtype);
+
+export const EditableLabelStories: StoryModule = { stories: [EditableLabelStory] };

package/src/text/search-bar.meta.ts

@@ -0,0 +1,17 @@
+// Shared, renderer-agnostic metadata for the Search Bar story. Imported by the GTK
+// renderer (search-bar.story.ts) and the browser renderer (browser/text/search-bar.web.ts),
+// so both expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const searchBarMeta: StoryMeta = {
+    title: 'Text/Search Bar',
+    description:
+        'Gtk.SearchBar — the strip that reveals a search entry when search starts. The property IS the ' +
+        "revealer's reveal-child, so one boolean decides both whether the strip is shown and whether " +
+        'the search is on; hiding it clears the entry.',
+    controls: [
+        { name: 'searchModeEnabled', label: 'Search mode', type: ControlType.BOOLEAN, defaultValue: false },
+        { name: 'showCloseButton', label: 'Close button', type: ControlType.BOOLEAN, defaultValue: true },
+    ],
+};