@gjsify/example-gtk-adwaita-storybook 0.19.0

package/src/navigation/navigation-view.story.ts

@@ -0,0 +1,77 @@
+// Adw.NavigationView — a stack of navigation pages with push/pop and an
+// automatic back button. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { navigationViewMeta } from './navigation-view.meta.js';
+
+/** Story: Adw.NavigationView with a root page that pushes a detail page. */
+export class NavigationViewStory extends StoryWidget {
+    private _view: Adw.NavigationView | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookNavigationView' }, NavigationViewStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(NavigationViewStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...navigationViewMeta, component: Adw.NavigationView.$gtype };
+    }
+
+    private buildPage(title: string, body: Gtk.Widget): Adw.NavigationPage {
+        const toolbarView = new Adw.ToolbarView();
+        toolbarView.add_top_bar(new Adw.HeaderBar());
+        toolbarView.content = body;
+        return new Adw.NavigationPage({ title, child: toolbarView });
+    }
+
+    initialize(): void {
+        this._view = new Adw.NavigationView({
+            animateTransitions: this.args.animateTransitions as boolean,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+
+        const detail = this.buildPage(
+            this.args.detailTitle as string,
+            new Adw.StatusPage({
+                iconName: 'avatar-default-symbolic',
+                title: this.args.detailTitle as string,
+                description: 'Mathematician and writer, the first computer programmer.',
+                vexpand: true,
+            }),
+        );
+
+        const openButton = new Gtk.Button({
+            label: 'Open contact',
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+            vexpand: true,
+        });
+        openButton.add_css_class('pill');
+        openButton.add_css_class('suggested-action');
+        openButton.connect('clicked', () => {
+            this._view?.push(detail);
+        });
+
+        const root = this.buildPage(this.args.rootTitle as string, openButton);
+
+        this._view.add(root);
+        this._view.add(detail);
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._view) return;
+        this._view.animateTransitions = this.args.animateTransitions as boolean;
+    }
+}
+
+GObject.type_ensure(NavigationViewStory.$gtype);
+
+export const NavigationViewStories: StoryModule = { stories: [NavigationViewStory] };

package/src/navigation/overlay-split-view.meta.ts

@@ -0,0 +1,13 @@
+// Shared, renderer-agnostic metadata for the Overlay Split View story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const overlaySplitViewMeta: StoryMeta = {
+    title: 'Navigation/Overlay Split View',
+    description:
+        'Adw.OverlaySplitView — a sidebar shown beside the content, or overlaid on top of it when collapsed.',
+    controls: [
+        { name: 'showSidebar', label: 'Show sidebar', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'collapsed', label: 'Collapsed', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/navigation/overlay-split-view.story.ts

@@ -0,0 +1,82 @@
+// Adw.OverlaySplitView — a sidebar that sits beside the content, or overlays it
+// when collapsed. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { overlaySplitViewMeta } from './overlay-split-view.meta.js';
+
+/** Story: Adw.OverlaySplitView with a boxed-list sidebar and a status-page content. */
+export class OverlaySplitViewStory extends StoryWidget {
+    private _view: Adw.OverlaySplitView | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookOverlaySplitView' }, OverlaySplitViewStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(OverlaySplitViewStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...overlaySplitViewMeta, component: Adw.OverlaySplitView.$gtype };
+    }
+
+    private buildSidebar(): Gtk.Widget {
+        const group = new Adw.PreferencesGroup();
+        for (const [title, icon] of [
+            ['Home', 'go-home-symbolic'],
+            ['Discover', 'system-search-symbolic'],
+            ['Library', 'folder-music-symbolic'],
+            ['Settings', 'emblem-system-symbolic'],
+        ] as const) {
+            const row = new Adw.ActionRow({ title });
+            row.add_prefix(new Gtk.Image({ iconName: icon }));
+            row.activatable = true;
+            group.add(row);
+        }
+
+        const toolbarView = new Adw.ToolbarView();
+        toolbarView.add_top_bar(new Adw.HeaderBar({ showTitle: false }));
+        toolbarView.content = group;
+        toolbarView.add_css_class('sidebar');
+        return toolbarView;
+    }
+
+    private buildContent(): Gtk.Widget {
+        const status = new Adw.StatusPage({
+            iconName: 'folder-music-symbolic',
+            title: 'Your Library',
+            description: 'Toggle the sidebar to browse sections. Collapse it to overlay the content.',
+            vexpand: true,
+        });
+
+        const toolbarView = new Adw.ToolbarView();
+        toolbarView.add_top_bar(new Adw.HeaderBar());
+        toolbarView.content = status;
+        return toolbarView;
+    }
+
+    initialize(): void {
+        this._view = new Adw.OverlaySplitView({
+            sidebar: this.buildSidebar(),
+            content: this.buildContent(),
+            showSidebar: this.args.showSidebar as boolean,
+            collapsed: this.args.collapsed as boolean,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        this.addContent(this._view);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._view) return;
+        this._view.showSidebar = this.args.showSidebar as boolean;
+        this._view.collapsed = this.args.collapsed as boolean;
+    }
+}
+
+GObject.type_ensure(OverlaySplitViewStory.$gtype);
+
+export const OverlaySplitViewStories: StoryModule = { stories: [OverlaySplitViewStory] };

package/src/navigation/sidebar.meta.ts

@@ -0,0 +1,30 @@
+// Shared, renderer-agnostic metadata for the Sidebar story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const sidebarMeta: StoryMeta = {
+    title: 'Navigation/Sidebar',
+    description:
+        'Adw.Sidebar — a selectable list of Adw.SidebarItem grouped into sections. Selecting an item updates the content.',
+    controls: [
+        {
+            name: 'mode',
+            label: 'Mode',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Sidebar', value: 'sidebar' },
+                { label: 'Page', value: 'page' },
+            ],
+            defaultValue: 'sidebar',
+        },
+        {
+            name: 'selected',
+            label: 'Selected index',
+            type: ControlType.NUMBER,
+            min: 0,
+            max: 3,
+            step: 1,
+            defaultValue: 0,
+        },
+    ],
+};

package/src/navigation/sidebar.story.ts

@@ -0,0 +1,85 @@
+// Adw.Sidebar — a selectable navigation sidebar built from sections of items.
+// original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { sidebarMeta } from './sidebar.meta.js';
+
+/** Story: Adw.Sidebar with a titled Adw.SidebarSection driving a content pane. */
+export class SidebarStory extends StoryWidget {
+    private _sidebar: Adw.Sidebar | null = null;
+    private _status: Adw.StatusPage | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookSidebar' }, SidebarStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(SidebarStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...sidebarMeta, component: Adw.Sidebar.$gtype };
+    }
+
+    private readonly items: readonly { title: string; subtitle: string; icon: string }[] = [
+        { title: 'Inbox', subtitle: '3 unread', icon: 'mail-unread-symbolic' },
+        { title: 'Starred', subtitle: 'Favourites', icon: 'starred-symbolic' },
+        { title: 'Sent', subtitle: 'Outgoing mail', icon: 'mail-send-symbolic' },
+        { title: 'Archive', subtitle: 'Older mail', icon: 'folder-symbolic' },
+    ];
+
+    private modeFromArg(value: string): Adw.SidebarMode {
+        return value === 'page' ? Adw.SidebarMode.PAGE : Adw.SidebarMode.SIDEBAR;
+    }
+
+    private syncContent(): void {
+        if (!this._sidebar || !this._status) return;
+        const item = this.items[this._sidebar.selected] ?? this.items[0];
+        this._status.title = item.title;
+        this._status.iconName = item.icon;
+        this._status.description = item.subtitle;
+    }
+
+    initialize(): void {
+        const section = new Adw.SidebarSection({ title: 'Mailboxes' });
+        for (const entry of this.items) {
+            section.append(new Adw.SidebarItem({ title: entry.title, subtitle: entry.subtitle, iconName: entry.icon }));
+        }
+
+        this._sidebar = new Adw.Sidebar({
+            mode: this.modeFromArg(this.args.mode as string),
+            selected: this.args.selected as number,
+            widthRequest: 220,
+        });
+        this._sidebar.append(section);
+        this._sidebar.connect('notify::selected', () => this.syncContent());
+
+        this._status = new Adw.StatusPage({ hexpand: true, vexpand: true });
+
+        const box = new Gtk.Box({
+            orientation: Gtk.Orientation.HORIZONTAL,
+            widthRequest: 480,
+            heightRequest: 340,
+        });
+        box.append(this._sidebar);
+        box.append(new Gtk.Separator({ orientation: Gtk.Orientation.VERTICAL }));
+        box.append(this._status);
+
+        this.syncContent();
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._sidebar) return;
+        this._sidebar.mode = this.modeFromArg(this.args.mode as string);
+        this._sidebar.selected = this.args.selected as number;
+        this.syncContent();
+    }
+}
+
+GObject.type_ensure(SidebarStory.$gtype);
+
+export const SidebarStories: StoryModule = { stories: [SidebarStory] };

package/src/presentation/avatar.meta.ts

@@ -0,0 +1,24 @@
+// Shared, renderer-agnostic metadata for the Avatar story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const avatarMeta: StoryMeta = {
+    title: 'Presentation/Avatar',
+    description: 'A circular avatar that derives initials (and a colour) from a name, or shows a symbolic icon.',
+    controls: [
+        { name: 'text', label: 'Name', type: ControlType.TEXT, defaultValue: 'Ada Lovelace' },
+        { name: 'size', label: 'Size', type: ControlType.RANGE, min: 24, max: 160, step: 8, defaultValue: 96 },
+        { name: 'showInitials', label: 'Show initials', type: ControlType.BOOLEAN, defaultValue: true },
+        {
+            name: 'iconName',
+            label: 'Fallback icon',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Person', value: 'avatar-default-symbolic' },
+                { label: 'Contact', value: 'contact-new-symbolic' },
+                { label: 'Camera', value: 'camera-photo-symbolic' },
+            ],
+            defaultValue: 'avatar-default-symbolic',
+        },
+    ],
+};

package/src/presentation/avatar.story.ts

@@ -0,0 +1,46 @@
+// Adw.Avatar — a circular avatar that renders generated initials, a symbolic
+// icon, or a custom image. original implementation.
+
+import Adw from '@girs/adw-1';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { avatarMeta } from './avatar.meta.js';
+
+/** Story: Adw.Avatar with live text / size / icon controls. */
+export class AvatarStory extends StoryWidget {
+    private _avatar: Adw.Avatar | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookAvatar' }, AvatarStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(AvatarStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...avatarMeta, component: Adw.Avatar.$gtype };
+    }
+
+    initialize(): void {
+        this._avatar = new Adw.Avatar({
+            size: this.args.size as number,
+            text: this.args.text as string,
+            showInitials: this.args.showInitials as boolean,
+            iconName: this.args.iconName as string,
+        });
+        this.addContent(this._avatar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._avatar) return;
+        this._avatar.size = this.args.size as number;
+        this._avatar.text = this.args.text as string;
+        this._avatar.showInitials = this.args.showInitials as boolean;
+        this._avatar.iconName = this.args.iconName as string;
+    }
+}
+
+GObject.type_ensure(AvatarStory.$gtype);
+
+export const AvatarStories: StoryModule = { stories: [AvatarStory] };

package/src/presentation/banner.meta.ts

@@ -0,0 +1,19 @@
+// Shared, renderer-agnostic metadata for the Banner story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const bannerMeta: StoryMeta = {
+    title: 'Presentation/Banner',
+    description: 'Adw.Banner — a full-width strip carrying a status message and an optional action button.',
+    controls: [
+        {
+            name: 'title',
+            label: 'Title',
+            type: ControlType.TEXT,
+            defaultValue: 'Metered connection — updates paused',
+        },
+        { name: 'buttonLabel', label: 'Button label', type: ControlType.TEXT, defaultValue: 'Resume' },
+        { name: 'revealed', label: 'Revealed', type: ControlType.BOOLEAN, defaultValue: true },
+        { name: 'useMarkup', label: 'Use markup', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/presentation/banner.story.ts

@@ -0,0 +1,53 @@
+// Adw.Banner — a full-width bar for a single in-context message, with an
+// optional action button. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { bannerMeta } from './banner.meta.js';
+
+/** Story: Adw.Banner shown full-width inside a sized container. */
+export class BannerStory extends StoryWidget {
+    private _banner: Adw.Banner | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookBanner' }, BannerStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(BannerStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...bannerMeta, component: Adw.Banner.$gtype };
+    }
+
+    initialize(): void {
+        this._banner = new Adw.Banner({
+            title: this.args.title as string,
+            buttonLabel: this.args.buttonLabel as string,
+            revealed: this.args.revealed as boolean,
+            useMarkup: this.args.useMarkup as boolean,
+        });
+
+        const container = new Gtk.Box({
+            orientation: Gtk.Orientation.VERTICAL,
+            widthRequest: 460,
+        });
+        container.append(this._banner);
+        this.addContent(container);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._banner) return;
+        this._banner.title = this.args.title as string;
+        this._banner.buttonLabel = this.args.buttonLabel as string;
+        this._banner.revealed = this.args.revealed as boolean;
+        this._banner.useMarkup = this.args.useMarkup as boolean;
+    }
+}
+
+GObject.type_ensure(BannerStory.$gtype);
+
+export const BannerStories: StoryModule = { stories: [BannerStory] };

package/src/presentation/spinner.meta.ts

@@ -0,0 +1,9 @@
+// Shared, renderer-agnostic metadata for the Spinner story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const spinnerMeta: StoryMeta = {
+    title: 'Presentation/Spinner',
+    description: 'Adw.Spinner — a lightweight loading indicator that spins continuously while visible.',
+    controls: [{ name: 'size', label: 'Size', type: ControlType.RANGE, min: 16, max: 64, step: 4, defaultValue: 48 }],
+};

package/src/presentation/spinner.story.ts

@@ -0,0 +1,47 @@
+// Adw.Spinner — a determinate-free loading indicator that animates while
+// shown. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { spinnerMeta } from './spinner.meta.js';
+
+/** Story: Adw.Spinner sized via width/height requests. */
+export class SpinnerStory extends StoryWidget {
+    private _spinner: Adw.Spinner | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookSpinner' }, SpinnerStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(SpinnerStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...spinnerMeta, component: Adw.Spinner.$gtype };
+    }
+
+    initialize(): void {
+        const size = this.args.size as number;
+        this._spinner = new Adw.Spinner({
+            widthRequest: size,
+            heightRequest: size,
+            halign: Gtk.Align.CENTER,
+            valign: Gtk.Align.CENTER,
+        });
+        this.addContent(this._spinner);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._spinner) return;
+        const size = this.args.size as number;
+        this._spinner.widthRequest = size;
+        this._spinner.heightRequest = size;
+    }
+}
+
+GObject.type_ensure(SpinnerStory.$gtype);
+
+export const SpinnerStories: StoryModule = { stories: [SpinnerStory] };

package/src/presentation/status-page.meta.ts

@@ -0,0 +1,29 @@
+// Shared, renderer-agnostic metadata for the Status Page story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const statusPageMeta: StoryMeta = {
+    title: 'Presentation/Status Page',
+    description: 'Adw.StatusPage — a full-page empty state with an icon, title, description and optional action.',
+    controls: [
+        {
+            name: 'iconName',
+            label: 'Icon',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Folder', value: 'folder-symbolic' },
+                { label: 'Mail', value: 'mail-unread-symbolic' },
+                { label: 'Search', value: 'system-search-symbolic' },
+                { label: 'Star', value: 'starred-symbolic' },
+            ],
+            defaultValue: 'folder-symbolic',
+        },
+        { name: 'title', label: 'Title', type: ControlType.TEXT, defaultValue: 'No Documents' },
+        {
+            name: 'description',
+            label: 'Description',
+            type: ControlType.TEXT,
+            defaultValue: 'Documents you create or open will appear here.',
+        },
+    ],
+};

package/src/presentation/status-page.story.ts

@@ -0,0 +1,55 @@
+// Adw.StatusPage — a centred empty/placeholder state with an icon, title,
+// description and an optional action. original implementation.
+
+import Adw from '@girs/adw-1';
+import Gtk from '@girs/gtk-4.0';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { statusPageMeta } from './status-page.meta.js';
+
+/** Story: Adw.StatusPage with a suggested-action pill button. */
+export class StatusPageStory extends StoryWidget {
+    private _statusPage: Adw.StatusPage | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookStatusPage' }, StatusPageStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(StatusPageStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...statusPageMeta, component: Adw.StatusPage.$gtype };
+    }
+
+    initialize(): void {
+        const button = new Gtk.Button({
+            label: 'New Document',
+            halign: Gtk.Align.CENTER,
+            cssClasses: ['pill', 'suggested-action'],
+        });
+
+        this._statusPage = new Adw.StatusPage({
+            iconName: this.args.iconName as string,
+            title: this.args.title as string,
+            description: this.args.description as string,
+            child: button,
+            widthRequest: 460,
+            heightRequest: 320,
+        });
+
+        this.addContent(this._statusPage);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._statusPage) return;
+        this._statusPage.iconName = this.args.iconName as string;
+        this._statusPage.title = this.args.title as string;
+        this._statusPage.description = this.args.description as string;
+    }
+}
+
+GObject.type_ensure(StatusPageStory.$gtype);
+
+export const StatusPageStories: StoryModule = { stories: [StatusPageStory] };

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

@@ -0,0 +1,12 @@
+// Shared, renderer-agnostic metadata for the Window Title story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const windowTitleMeta: StoryMeta = {
+    title: 'Presentation/Window Title',
+    description: 'Adw.WindowTitle — a compact title/subtitle widget intended for a window or header bar.',
+    controls: [
+        { name: 'title', label: 'Title', type: ControlType.TEXT, defaultValue: 'Inbox' },
+        { name: 'subtitle', label: 'Subtitle', type: ControlType.TEXT, defaultValue: '3 unread messages' },
+    ],
+};

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

@@ -0,0 +1,42 @@
+// Adw.WindowTitle — a header-bar title widget pairing a title with an
+// optional subtitle. original implementation.
+
+import Adw from '@girs/adw-1';
+import GObject from '@girs/gobject-2.0';
+import { type StoryArgs, type StoryMeta, type StoryModule, StoryWidget } from '@gjsify/storybook';
+import { windowTitleMeta } from './window-title.meta.js';
+
+/** Story: Adw.WindowTitle with live title / subtitle controls. */
+export class WindowTitleStory extends StoryWidget {
+    private _windowTitle: Adw.WindowTitle | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookWindowTitle' }, WindowTitleStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(WindowTitleStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...windowTitleMeta, component: Adw.WindowTitle.$gtype };
+    }
+
+    initialize(): void {
+        this._windowTitle = new Adw.WindowTitle({
+            title: this.args.title as string,
+            subtitle: this.args.subtitle as string,
+        });
+        this.addContent(this._windowTitle);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        if (!this._windowTitle) return;
+        this._windowTitle.title = this.args.title as string;
+        this._windowTitle.subtitle = this.args.subtitle as string;
+    }
+}
+
+GObject.type_ensure(WindowTitleStory.$gtype);
+
+export const WindowTitleStories: StoryModule = { stories: [WindowTitleStory] };

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

@@ -0,0 +1,30 @@
+// Shared, renderer-agnostic metadata for the Action Row story.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const actionRowMeta: StoryMeta = {
+    title: 'Boxed Lists/Action Row',
+    description:
+        'Adw.ActionRow — a preferences row with a title/subtitle, a prefix icon and a suffix button, shown inside a boxed list.',
+    controls: [
+        { name: 'title', label: 'Title', type: ControlType.TEXT, defaultValue: 'Wi-Fi' },
+        {
+            name: 'subtitle',
+            label: 'Subtitle',
+            type: ControlType.TEXT,
+            defaultValue: 'Connected to Highgarden 5GHz',
+        },
+        {
+            name: 'iconName',
+            label: 'Prefix icon',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Network', value: 'network-wireless-symbolic' },
+                { label: 'Folder', value: 'folder-symbolic' },
+                { label: 'Starred', value: 'starred-symbolic' },
+            ],
+            defaultValue: 'network-wireless-symbolic',
+        },
+        { name: 'activatable', label: 'Activatable', type: ControlType.BOOLEAN, defaultValue: true },
+    ],
+};