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

package/src/browser/view-switching/stack.web.ts

@@ -0,0 +1,72 @@
+// Browser port of the Stack story. Shares metadata with stack.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+// TYPE-ONLY: the pages are declared in markup and driven through attributes, so nothing
+// here needs the element's own API surface — and a hand-written structural type would be
+// a second copy of it that nothing keeps in step. The import erases.
+import type { Gtk } from '@gjsify/adwaita-web';
+import { STACK_PAGES, stackMeta } from '../../view-switching/stack.meta.js';
+
+export class StackWebStory extends StoryElement {
+    private _stack: Gtk.Stack | null = null;
+
+    constructor() {
+        super(StackWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return stackMeta;
+    }
+
+    initialize(): void {
+        const stack = document.createElement('gtk-stack') as Gtk.Stack;
+        stack.style.flex = '1';
+
+        // A GtkStackPage is a GObject, not a widget: its properties are ATTRIBUTES on the
+        // page element, which is the mapping `<gtk-stack>`'s header records.
+        for (const page of STACK_PAGES) {
+            const child = document.createElement('div');
+            child.setAttribute('name', page.name);
+            child.setAttribute('title', page.title);
+            child.setAttribute('use-underline', '');
+            if (page.attn) child.setAttribute('needs-attention', '');
+            child.style.cssText =
+                'display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;';
+            const heading = document.createElement('div');
+            heading.setAttribute('data-gtk-stack-story', 'heading');
+            heading.textContent = page.title;
+            const body = document.createElement('div');
+            body.setAttribute('data-gtk-stack-story', 'body');
+            body.textContent = page.body;
+            child.append(heading, body);
+            stack.appendChild(child);
+        }
+
+        const root = document.createElement('div');
+        root.style.cssText = 'display:flex;flex-direction:column;gap:12px;width:480px;height:320px;';
+        root.appendChild(stack);
+        this.addContent(root);
+
+        this._stack = stack;
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._stack) return;
+        // The ORDER is the element's own: `transition-type` first, because a new type is
+        // what a page change resolves a two-way nick against (gtkstack.c:1546-1561).
+        this._stack.setAttribute('transition-type', this.args.transitionType as string);
+        this._stack.setAttribute('transition-duration', String(this.args.transitionDuration as number));
+        this._stack.toggleAttribute('interpolate-size', this.args.interpolateSize as boolean);
+        // `hhomogeneous` / `vhomogeneous` default TRUE (gtkstack.c:981-995), so the false
+        // case has to be spelled: an absent attribute already reads as true.
+        this._stack.setAttribute('hhomogeneous', (this.args.hhomogeneous as boolean) ? '' : 'false');
+        this._stack.setAttribute('vhomogeneous', (this.args.vhomogeneous as boolean) ? '' : 'false');
+    }
+}
+
+export const StackWebStories: WebStoryModule = { stories: [StackWebStory] };

package/src/browser/view-switching/tab-bar.web.ts

@@ -0,0 +1,105 @@
+// Browser port of the Tab Bar story — an <adw-tab-bar> bound by id to an
+// <adw-tab-view>, with a slotted action widget on each side and the bar's five properties
+// on the same controls. Shares its metadata with tab-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import type { Adw } from '@gjsify/adwaita-web';
+import { tabBarMeta } from '../../view-switching/tab-bar.meta.js';
+
+const TABS: ReadonlyArray<{ title: string; body: string }> = [
+    { title: 'Overview', body: 'A summary of everything at a glance.' },
+    { title: 'Details', body: 'The specifics, broken down line by line.' },
+    { title: 'History', body: 'A log of every change made so far.' },
+];
+
+export class TabBarWebStory extends StoryElement {
+    private _bar: Adw.TabBar | null = null;
+    private _view: Adw.TabView | null = null;
+    private _startAction: HTMLButtonElement | null = null;
+    private _endAction: HTMLButtonElement | null = null;
+
+    constructor() {
+        super(TabBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return tabBarMeta;
+    }
+
+    initialize(): void {
+        const view = document.createElement('adw-tab-view') as Adw.TabView;
+        view.style.flex = '1';
+        for (const tab of TABS) {
+            const page = document.createElement('adw-tab-page');
+            page.setAttribute('title', tab.title);
+            page.appendChild(this._buildPageBody(tab.title, tab.body));
+            view.appendChild(page);
+        }
+        this._view = view;
+
+        const bar = document.createElement('adw-tab-bar') as Adw.TabBar;
+        // `view` is a widget REFERENCE upstream, and an id reference here — the same
+        // divergence `<adw-tab-button>` and `<adw-view-switcher-bar>` make. The setter
+        // takes the element directly, which is what `_apply` below uses for the rebinds.
+        bar.setAttribute('view', 'tab-bar-story-view');
+        view.id = 'tab-bar-story-view';
+        this._bar = bar;
+
+        // The two action widgets are widget-typed PROPERTIES, so a document spells them as
+        // `slot=` children rather than as children of their own.
+        this._startAction = this._actionButton('list-add-symbolic', 'New page');
+        this._startAction.slot = 'start-action-widget';
+        bar.appendChild(this._startAction);
+
+        this._endAction = this._actionButton('view-more-symbolic', 'Menu');
+        this._endAction.slot = 'end-action-widget';
+        bar.appendChild(this._endAction);
+
+        const root = document.createElement('div');
+        root.style.display = 'flex';
+        root.style.flexDirection = 'column';
+        root.style.width = '480px';
+        root.style.height = '320px';
+        root.append(bar, view);
+        this.addContent(root);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _actionButton(icon: string, tooltip: string): HTMLButtonElement {
+        const button = document.createElement('button') as HTMLButtonElement;
+        button.type = 'button';
+        button.className = 'adw-button flat image-button';
+        button.title = tooltip;
+        const image = document.createElement('gtk-image');
+        image.setAttribute('icon', icon);
+        button.appendChild(image);
+        return button;
+    }
+
+    private _buildPageBody(title: string, body: string): HTMLElement {
+        const status = document.createElement('adw-status-page');
+        status.setAttribute('icon', 'view-paged');
+        status.setAttribute('title', title);
+        status.setAttribute('description', body);
+        return status;
+    }
+
+    private _apply(): void {
+        const bar = this._bar;
+        const view = this._view;
+        if (bar === null || view === null) return;
+        bar.autohide = this.args.autohide as boolean;
+        bar.expandTabs = this.args.expandTabs as boolean;
+        bar.inverted = this.args.inverted as boolean;
+        // `view` through the PROPERTY, so the rebind does not depend on the id staying put.
+        if (bar.view !== view) bar.view = view;
+        bar.startActionWidget = (this.args.startAction as boolean) ? this._startAction : null;
+        bar.endActionWidget = (this.args.endAction as boolean) ? this._endAction : null;
+    }
+}
+
+export const TabBarWebStories: WebStoryModule = { stories: [TabBarWebStory] };

package/src/browser/view-switching/tab-button.web.ts

@@ -0,0 +1,52 @@
+// Browser port of the Tab Button story. Shares metadata with tab-button.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import type { Adw } from '@gjsify/adwaita-web';
+import { tabButtonMeta } from '../../view-switching/tab-button.meta.js';
+
+export class TabButtonWebStory extends StoryElement {
+    private _view: Adw.TabView | null = null;
+    private _serial = 0;
+
+    constructor() {
+        super(TabButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return tabButtonMeta;
+    }
+
+    initialize(): void {
+        // The view is the counter's data source and is never shown.
+        this._view = document.createElement('adw-tab-view') as Adw.TabView;
+        this._view.hidden = true;
+        const button = document.createElement('adw-tab-button') as Adw.TabButton;
+        const stage = document.createElement('div');
+        stage.append(this._view, button);
+        this.addContent(stage);
+        button.view = this._view;
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        const view = this._view;
+        if (!view) return;
+        const wanted = this.args.pages as number;
+        // Pages added after the view connected go through its API.
+        while (view.nPages < wanted) {
+            this._serial += 1;
+            view.appendPage({ id: `page-${this._serial}`, title: `Page ${view.nPages}` });
+        }
+        while (view.nPages > wanted) view.closePage(view.pages[view.nPages - 1].id);
+        const last = view.nPages - 1;
+        view.pages.forEach((page, i) => {
+            view.setPageNeedsAttention(page.id, (this.args.needsAttention as boolean) && i === last);
+        });
+    }
+}
+
+export const TabButtonWebStories: WebStoryModule = { stories: [TabButtonWebStory] };

package/src/browser/view-switching/tab-overview.web.ts

@@ -0,0 +1,87 @@
+// Browser port of the Tab Overview story — an <adw-tab-overview> over an
+// <adw-tab-view> with three pages, one of them pinned, plus the open / search /
+// new-tab / inverted controls. Shares its metadata with tab-overview.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import type { Adw } from '@gjsify/adwaita-web';
+import { tabOverviewMeta } from '../../view-switching/tab-overview.meta.js';
+
+const TABS: ReadonlyArray<{ title: string; body: string }> = [
+    { title: 'Overview', body: 'A summary of everything at a glance.' },
+    { title: 'Details', body: 'The specifics, broken down line by line.' },
+    { title: 'History', body: 'A log of every change made so far.' },
+];
+
+export class TabOverviewWebStory extends StoryElement {
+    private _overview: Adw.TabOverview | null = null;
+    private _view: Adw.TabView | null = null;
+
+    constructor() {
+        super(TabOverviewWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return tabOverviewMeta;
+    }
+
+    initialize(): void {
+        const view = document.createElement('adw-tab-view') as Adw.TabView;
+        view.style.width = '480px';
+        view.style.height = '340px';
+
+        for (const [index, tab] of TABS.entries()) {
+            const page = document.createElement('adw-tab-page');
+            page.setAttribute('title', tab.title);
+            if (index === 0) page.setAttribute('pinned', '');
+            page.appendChild(this._buildPageBody(tab.title, tab.body));
+            view.appendChild(page);
+        }
+        this._view = view;
+
+        const overview = document.createElement('adw-tab-overview') as Adw.TabOverview;
+        overview.style.width = '480px';
+        overview.style.height = '340px';
+        overview.appendChild(view);
+
+        // `create-tab`'s handler returns the page; in the DOM that is `detail.page`.
+        overview.addEventListener('create-tab', (event) => {
+            // A declared `<adw-tab-page>` is adopted on connect only, so the new page
+            // goes in through the view's API — the rule the tab-button story follows.
+            // `appendPage` returns the POSITION, so the page itself is read back off the
+            // view: `create-tab`'s handler must hand over the page, not a number.
+            const position = view.appendPage({
+                id: `new-${view.nPages}`,
+                title: 'New Page',
+                content: this._buildPageBody('New Page', 'Just created.'),
+            });
+            (event as CustomEvent).detail.page = view.pages[position];
+        });
+
+        this._overview = overview;
+        this.addContent(overview);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _buildPageBody(title: string, body: string): HTMLElement {
+        const status = document.createElement('adw-status-page');
+        status.setAttribute('icon', 'view-paged');
+        status.setAttribute('title', title);
+        if (body !== '') status.setAttribute('description', body);
+        return status;
+    }
+
+    private _apply(): void {
+        const overview = this._overview;
+        if (overview === null) return;
+        overview.enableSearch = this.args.enableSearch as boolean;
+        overview.enableNewTab = this.args.enableNewTab as boolean;
+        overview.inverted = this.args.inverted as boolean;
+        overview.setOpen(this.args.open as boolean);
+    }
+}
+
+export const TabOverviewWebStories: WebStoryModule = { stories: [TabOverviewWebStory] };

package/src/browser/view-switching/view-switcher-sidebar.web.ts

@@ -0,0 +1,77 @@
+// Browser port of the View Switcher Sidebar story — an <adw-view-switcher-sidebar> beside
+// the <adw-view-stack> it drives, with the same sections, badge and unread dot as the GTK
+// twin. Shares its metadata with view-switcher-sidebar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import type { Adw } from '@gjsify/adwaita-web';
+import {
+    VIEW_SWITCHER_SIDEBAR_PAGES,
+    viewSwitcherSidebarMeta,
+} from '../../view-switching/view-switcher-sidebar.meta.js';
+
+export class ViewSwitcherSidebarWebStory extends StoryElement {
+    private _switcher: Adw.ViewSwitcherSidebar | null = null;
+
+    constructor() {
+        super(ViewSwitcherSidebarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return viewSwitcherSidebarMeta;
+    }
+
+    initialize(): void {
+        const stack = document.createElement('adw-view-stack') as Adw.ViewStack;
+        stack.style.flex = '1';
+
+        for (const spec of VIEW_SWITCHER_SIDEBAR_PAGES) {
+            const page = document.createElement('adw-view-stack-page');
+            page.setAttribute('name', spec.name);
+            page.setAttribute('title', spec.title);
+            page.setAttribute('icon-name', spec.icon);
+            if (spec.sectionTitle) {
+                // The section opens ON this page, and the heading is its own.
+                page.setAttribute('starts-section', '');
+                page.setAttribute('section-title', spec.sectionTitle);
+            }
+            if (spec.badgeNumber) page.setAttribute('badge-number', String(spec.badgeNumber));
+            if (spec.needsAttention) page.setAttribute('needs-attention', '');
+            page.appendChild(this._buildContent(spec.icon, spec.title));
+            stack.appendChild(page);
+        }
+
+        const switcher = document.createElement('adw-view-switcher-sidebar') as Adw.ViewSwitcherSidebar;
+        switcher.style.width = '200px';
+        // The stack is the sibling declared right after the switcher, which is the
+        // nearest one the element can find when the attribute names no id.
+        this._switcher = switcher;
+
+        const stage = document.createElement('div');
+        stage.style.display = 'flex';
+        stage.style.flexDirection = 'row';
+        stage.style.width = '480px';
+        stage.style.height = '340px';
+        stage.append(switcher, stack);
+        this.addContent(stage);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _buildContent(icon: string, title: string): HTMLElement {
+        const status = document.createElement('adw-status-page');
+        status.setAttribute('icon', icon.replace(/-symbolic$/, ''));
+        status.setAttribute('title', title);
+        return status;
+    }
+
+    private _apply(): void {
+        const switcher = this._switcher;
+        if (switcher === null) return;
+        switcher.mode = (this.args.mode as boolean) ? 'page' : 'sidebar';
+    }
+}
+
+export const ViewSwitcherSidebarWebStories: WebStoryModule = { stories: [ViewSwitcherSidebarWebStory] };

package/src/browser/windows/action-bar.web.ts

@@ -0,0 +1,66 @@
+// Browser port of the Action Bar story. Shares metadata with action-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { actionBarMeta } from '../../windows/action-bar.meta.js';
+
+export class ActionBarWebStory extends StoryElement {
+    private _bar: HTMLElement | null = null;
+
+    constructor() {
+        super(ActionBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return actionBarMeta;
+    }
+
+    initialize(): void {
+        this._bar = document.createElement('gtk-action-bar');
+        // The same three children in the same order as the GTK story — `pack_end` PREPENDS,
+        // so the button added LAST sits nearest the edge (gtkactionbar.c:262-277).
+        for (const [slot, icon] of [
+            ['end', 'document-save-symbolic'],
+            ['end', 'document-open-symbolic'],
+            ['start', 'document-print-symbolic'],
+        ] as const) {
+            const button = document.createElement('gtk-button');
+            button.setAttribute('slot', slot);
+            button.setAttribute('icon-name', icon);
+            button.setAttribute('flat', '');
+            this._bar.appendChild(button);
+        }
+
+        const column = document.createElement('div');
+        column.style.display = 'flex';
+        column.style.flexDirection = 'column';
+        column.style.gap = '8px';
+        column.style.width = '420px';
+        const note = document.createElement('span');
+        note.textContent = 'The bar below is Gtk.ActionBar.';
+        column.append(note, this._bar);
+
+        this.addContent(column);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        this._bar.setAttribute('revealed', String(this.args.revealed as boolean));
+        // `gtk_action_bar_set_center_widget` (:306-...) takes a widget or NULL, and NULL
+        // clears the centre rather than replacing it with an empty label.
+        const centre = this._bar.querySelector('[slot="center"]');
+        if ((this.args.center as string) === 'label' && centre === null) {
+            const label = document.createElement('span');
+            label.setAttribute('slot', 'center');
+            label.textContent = 'notes.md';
+            this._bar.appendChild(label);
+        }
+        centre?.remove();
+    }
+}
+
+export const ActionBarWebStories: WebStoryModule = { stories: [ActionBarWebStory] };

package/src/browser/windows/gtk-application-window.web.ts

@@ -0,0 +1,67 @@
+// Browser port of the GTK Application Window story. Shares metadata with gtk-application-window.story.ts.
+//
+// The menubar is a SLOT here, because GTK builds the bar from the application's menu model
+// and no attribute can carry one — see `gtk-application-window.ts`. So the "the application has
+// one" control adds and removes the SLOT rather than a `GMenuModel`.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { gtkApplicationWindowMeta } from '../../windows/gtk-application-window.meta.js';
+
+export class GtkApplicationWindowWebStory extends StoryElement {
+    private _window: HTMLElement | null = null;
+    private _menubar: HTMLElement | null = null;
+
+    constructor() {
+        super(GtkApplicationWindowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return gtkApplicationWindowMeta;
+    }
+
+    initialize(): void {
+        this._window = document.createElement('gtk-application-window');
+        this._window.setAttribute('default-width', '460');
+        this._window.setAttribute('default-height', '260');
+
+        const bar = document.createElement('gtk-header-bar');
+        bar.setAttribute('slot', 'titlebar');
+        this._window.appendChild(bar);
+
+        const note = document.createElement('span');
+        note.textContent = 'The bar above the content is the application menubar.';
+        this._window.appendChild(note);
+
+        this._menubar = document.createElement('div');
+        for (const label of ['File', 'Edit']) {
+            const item = document.createElement('gtk-button');
+            item.setAttribute('label', label);
+            item.setAttribute('flat', '');
+            this._menubar.appendChild(item);
+        }
+
+        this.addContent(this._window);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._window) return;
+        this._window.setAttribute('title', this.args.title as string);
+        this._window.setAttribute('deletable', String(this.args.deletable as boolean));
+        this._window.setAttribute('show-menubar', String(this.args.showMenubar as boolean));
+        // The second half of `update_menubar`'s rule (gtkapplicationwindow.c:400-402): a
+        // window whose section has no items shows nothing, whatever the property says.
+        const present = this._window.querySelector('.adw-gtk-application-window-menubar')?.childElementCount ?? 0;
+        if (this.args.hasMenubar as boolean) {
+            if (present === 0) this._window.appendChild(this._menubar as HTMLElement);
+        } else if (present > 0) {
+            (this._menubar as HTMLElement).remove();
+        }
+    }
+}
+
+export const GtkApplicationWindowWebStories: WebStoryModule = { stories: [GtkApplicationWindowWebStory] };

package/src/browser/windows/gtk-header-bar.web.ts

@@ -0,0 +1,61 @@
+// Browser port of the GTK Header Bar story. Shares metadata with gtk-header-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { gtkHeaderBarMeta } from '../../windows/gtk-header-bar.meta.js';
+
+export class GtkHeaderBarWebStory extends StoryElement {
+    private _bar: HTMLElement | null = null;
+    private _titleLabel: HTMLElement | null = null;
+
+    constructor() {
+        super(GtkHeaderBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return gtkHeaderBarMeta;
+    }
+
+    initialize(): void {
+        this._bar = document.createElement('gtk-header-bar');
+
+        // The same three children in the same order as the GTK story — `pack_end` PREPENDS,
+        // so the button added LAST sits nearest the edge (gtkheaderbar.c:843-861).
+        for (const [slot, icon] of [
+            ['end', 'open-menu-symbolic'],
+            ['end', 'system-search-symbolic'],
+            ['start', 'go-previous-symbolic'],
+        ] as const) {
+            const button = document.createElement('gtk-button');
+            button.setAttribute('slot', slot);
+            button.setAttribute('icon-name', icon);
+            button.setAttribute('flat', '');
+            this._bar.appendChild(button);
+        }
+
+        // `gtk_header_bar_set_title_widget` empties the centre bin for the widget and hands
+        // the derived label back on NULL (gtkheaderbar.c:319-336) — so this child is
+        // REMOVED rather than hidden, which is the only way the bar can rebuild the label.
+        this._titleLabel = document.createElement('span');
+        this._titleLabel.setAttribute('slot', 'title');
+        this._titleLabel.textContent = 'Mailboxes';
+
+        this.addContent(this._bar);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        this._bar.setAttribute('decoration-layout', this.args.decorationLayout as string);
+        this._bar.setAttribute('show-title-buttons', String(this.args.showTitleButtons as boolean));
+        const custom = (this.args.titleWidget as string) === 'custom';
+        const present = this._bar.querySelector('[slot="title"]') !== null;
+        if (custom && !present) this._bar.appendChild(this._titleLabel as HTMLElement);
+        if (!custom && present) (this._titleLabel as HTMLElement).remove();
+    }
+}
+
+export const GtkHeaderBarWebStories: WebStoryModule = { stories: [GtkHeaderBarWebStory] };

package/src/browser/windows/gtk-window.web.ts

@@ -0,0 +1,58 @@
+// Browser port of the GTK Window story. Shares metadata with gtk-window.story.ts.
+//
+// The replica is an IN-PAGE FRAME, not a toplevel — see `gtk-window.ts`. The one thing this
+// story has to add for that to read is the `close-request` handler: GTK's default handler
+// destroys the window unless `hide-on-close`, and an application that wants to keep it
+// cancels the signal.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { gtkWindowMeta } from '../../windows/gtk-window.meta.js';
+
+export class GtkWindowWebStory extends StoryElement {
+    private _window: HTMLElement | null = null;
+    private _bar: HTMLElement | null = null;
+
+    constructor() {
+        super(GtkWindowWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return gtkWindowMeta;
+    }
+
+    initialize(): void {
+        this._window = document.createElement('gtk-window');
+        this._window.setAttribute('default-width', '460');
+        this._window.setAttribute('default-height', '280');
+
+        // `decorated: false` DROPS the titlebar strip, so the story keeps the bar in the TREE
+        // and lets the property decide whether it is seen (gtkwindow.c:1014).
+        this._bar = document.createElement('gtk-header-bar');
+        this._bar.setAttribute('slot', 'titlebar');
+        this._window.appendChild(this._bar);
+
+        const note = document.createElement('span');
+        note.textContent = 'The frame above is a Gtk.HeaderBar.';
+        this._window.appendChild(note);
+
+        this.addContent(this._window);
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._window) return;
+        this._window.setAttribute('title', this.args.title as string);
+        this._window.setAttribute('decorated', String(this.args.decorated as boolean));
+        this._window.setAttribute('deletable', String(this.args.deletable as boolean));
+        this._window.setAttribute('resizable', String(this.args.resizable as boolean));
+        this._window.setAttribute('maximized', String(this.args.maximized as boolean));
+        this._window.setAttribute('modal', String(this.args.modal as boolean));
+        this._window.setAttribute('hide-on-close', String(this.args.hideOnClose as boolean));
+    }
+}
+
+export const GtkWindowWebStories: WebStoryModule = { stories: [GtkWindowWebStory] };