@gjsify/example-gtk-adwaita-storybook 0.38.1 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/example-gtk-adwaita-storybook",
-  "version": "0.38.1",
+  "version": "0.40.0",
   "description": "Interactive component browser for Libadwaita widgets — a native Adwaita storybook built on @gjsify/storybook, debuggable over DBus/MCP via @gjsify/devtools",
   "type": "module",
   "main": "dist/gjs.js",
@@ -54,11 +54,11 @@
     "@girs/glib-2.0": "^4.1.0",
     "@girs/gobject-2.0": "^4.1.0",
     "@girs/gtk-4.0": "^4.1.0",
-    "@gjsify/adwaita-web": "^0.38.1",
-    "@gjsify/cli": "^0.38.1",
+    "@gjsify/adwaita-web": "^0.40.0",
+    "@gjsify/cli": "^0.40.0",
     "@gjsify/node-gi": "file:../../../packages/node-gi/node-gi",
-    "@gjsify/storybook": "^0.38.1",
-    "@gjsify/adwaita-storybook": "^0.38.1",
+    "@gjsify/storybook": "^0.40.0",
+    "@gjsify/adwaita-storybook": "^0.40.0",
     "@types/node": "^25.9.2",
     "typescript": "^6.0.3"
   },

package/src/browser/buttons/menu-button.web.ts

@@ -0,0 +1,37 @@
+// Browser port of the Menu Button story. Shares metadata with menu-button.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { MENU_BUTTON_ITEMS, menuButtonMeta } from '../../buttons/menu-button.meta.js';
+
+export class MenuButtonWebStory extends StoryElement {
+    private _widget: HTMLElement | null = null;
+
+    constructor() {
+        super(MenuButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return menuButtonMeta;
+    }
+
+    initialize(): void {
+        this._widget = document.createElement('adw-menu-button');
+        this._widget.setAttribute('menu', JSON.stringify(MENU_BUTTON_ITEMS.map((label) => ({ label }))));
+        this._apply();
+        this.addContent(this._widget);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._widget) return;
+        // The element takes symbolic names WITHOUT the `-symbolic` suffix — its icon
+        // set is Adwaita's symbolic one, so the suffix would be part of every name.
+        this._widget.setAttribute('icon-name', (this.args.iconName as string).replace(/-symbolic$/, ''));
+        this._widget.setAttribute('menu-title', this.args.menuTitle as string);
+    }
+}
+
+export const MenuButtonWebStories: WebStoryModule = { stories: [MenuButtonWebStory] };

package/src/browser/controls/drop-down.web.ts

@@ -0,0 +1,36 @@
+// Browser port of the Drop Down story. Shares metadata with drop-down.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { DROP_DOWN_OPTIONS, dropDownMeta } from '../../controls/drop-down.meta.js';
+
+export class DropDownWebStory extends StoryElement {
+    private _dropDown: HTMLElement | null = null;
+
+    constructor() {
+        super(DropDownWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return dropDownMeta;
+    }
+
+    initialize(): void {
+        this._dropDown = document.createElement('adw-drop-down');
+        this._dropDown.setAttribute('options', JSON.stringify(DROP_DOWN_OPTIONS));
+        this._apply();
+        this.addContent(this._dropDown);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._dropDown) return;
+        this._dropDown.setAttribute('selected', String(this.args.selected as number));
+        if (this.args.enableSearch as boolean) this._dropDown.setAttribute('enable-search', '');
+        else this._dropDown.removeAttribute('enable-search');
+    }
+}
+
+export const DropDownWebStories: WebStoryModule = { stories: [DropDownWebStory] };

package/src/browser/controls/entry.web.ts

@@ -0,0 +1,40 @@
+// Browser port of the Entry story. Shares metadata with entry.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { entryMeta } from '../../controls/entry.meta.js';
+
+export class EntryWebStory extends StoryElement {
+    private _entry: HTMLElement | null = null;
+
+    constructor() {
+        super(EntryWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return entryMeta;
+    }
+
+    initialize(): void {
+        this._entry = document.createElement('adw-entry');
+        this._entry.style.minWidth = '280px';
+        this._apply();
+        this.addContent(this._entry);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._entry) return;
+        this._entry.setAttribute('value', this.args.text as string);
+        this._entry.setAttribute('placeholder', this.args.placeholder as string);
+        // `<adw-entry>` has no `editable`: the browser spelling of a field you may
+        // read but not change is `disabled`, which also greys it — the one place
+        // this rendering cannot match GtkEditable:editable exactly.
+        if (this.args.editable as boolean) this._entry.removeAttribute('disabled');
+        else this._entry.setAttribute('disabled', '');
+    }
+}
+
+export const EntryWebStories: WebStoryModule = { stories: [EntryWebStory] };

package/src/browser/overview/widgets.web.ts

@@ -5,7 +5,10 @@ import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } fro
 import {
     OVERVIEW_ACCENT_OPTIONS,
     OVERVIEW_ADVANCED_ROWS,
+    OVERVIEW_DEVICES,
+    OVERVIEW_GROUP_TITLES,
     OVERVIEW_SHORTCUTS,
+    OVERVIEW_TEXT,
     overviewWidgetsMeta,
 } from '../../overview/widgets.meta.js';
 
@@ -33,7 +36,10 @@ export class OverviewWidgetsWebStory extends StoryElement {
         host.style.flexDirection = 'column';
         host.style.width = '100%';
 
-        this._banner = el('adw-banner', { title: 'You have unsaved changes', 'button-label': 'Save' });
+        this._banner = el('adw-banner', {
+            title: OVERVIEW_TEXT.bannerTitle,
+            'button-label': OVERVIEW_TEXT.bannerButton,
+        });
         this._syncBanner();
         host.append(this._banner);
 
@@ -42,12 +48,16 @@ export class OverviewWidgetsWebStory extends StoryElement {
         // --- Appearance: a widget demo only. The storybook's OWN appearance is in
         // the chrome, and wiring these to it would give one setting two controls
         // that disagree.
-        const appearance = el('adw-preferences-group', { title: 'Appearance' });
+        const appearance = el('adw-preferences-group', { title: OVERVIEW_GROUP_TITLES.appearance });
         appearance.append(
-            el('adw-switch-row', { title: 'Dark mode', subtitle: 'Use the dark Adwaita palette' }),
-            el('adw-switch-row', { title: 'Notifications', subtitle: 'Show toasts for events', active: '' }),
+            el('adw-switch-row', { title: OVERVIEW_TEXT.darkMode, subtitle: OVERVIEW_TEXT.darkModeSubtitle }),
+            el('adw-switch-row', {
+                title: OVERVIEW_TEXT.notifications,
+                subtitle: OVERVIEW_TEXT.notificationsSubtitle,
+                active: '',
+            }),
             el('adw-combo-row', {
-                title: 'Accent color',
+                title: OVERVIEW_TEXT.accentColor,
                 // `items` is JSON, not a comma list — the element parses it.
                 items: JSON.stringify([...OVERVIEW_ACCENT_OPTIONS]),
                 selected: '0',
@@ -56,14 +66,23 @@ export class OverviewWidgetsWebStory extends StoryElement {
         page.append(appearance);
 
         // --- Account ---
-        const account = el('adw-preferences-group', { title: 'Account' });
+        const account = el('adw-preferences-group', { title: OVERVIEW_GROUP_TITLES.account });
         account.append(
-            el('adw-entry-row', { title: 'Name', text: 'Ada Lovelace' }),
-            el('adw-entry-row', { title: 'Email', text: 'ada@example.com' }),
-            el('adw-spin-row', { title: 'Devices', min: '1', max: '10', step: '1', value: '3' }),
+            el('adw-entry-row', { title: OVERVIEW_TEXT.name, text: OVERVIEW_TEXT.nameValue }),
+            el('adw-entry-row', { title: OVERVIEW_TEXT.email, text: OVERVIEW_TEXT.emailValue }),
+            el('adw-spin-row', {
+                title: OVERVIEW_TEXT.devices,
+                min: String(OVERVIEW_DEVICES.lower),
+                max: String(OVERVIEW_DEVICES.upper),
+                step: String(OVERVIEW_DEVICES.step),
+                value: String(OVERVIEW_DEVICES.value),
+            }),
         );
 
-        const advanced = el('adw-expander-row', { title: 'Advanced', subtitle: 'More options' });
+        const advanced = el('adw-expander-row', {
+            title: OVERVIEW_TEXT.advanced,
+            subtitle: OVERVIEW_TEXT.advancedSubtitle,
+        });
         advanced.toggleAttribute('expanded', true);
         for (const row of OVERVIEW_ADVANCED_ROWS) {
             advanced.append(
@@ -76,7 +95,7 @@ export class OverviewWidgetsWebStory extends StoryElement {
         page.append(account);
 
         // --- Shortcuts: the newest widget, in context ---
-        const shortcuts = el('adw-preferences-group', { title: 'Shortcuts' });
+        const shortcuts = el('adw-preferences-group', { title: OVERVIEW_GROUP_TITLES.shortcuts });
         for (const shortcut of OVERVIEW_SHORTCUTS) {
             const row = el('adw-action-row', { title: shortcut.title });
             const label = el('adw-shortcut-label', { accelerator: shortcut.accelerator, slot: 'suffix' });
@@ -86,7 +105,7 @@ export class OverviewWidgetsWebStory extends StoryElement {
         page.append(shortcuts);
 
         // --- Actions ---
-        const actions = el('adw-preferences-group', { title: 'Actions' });
+        const actions = el('adw-preferences-group', { title: OVERVIEW_GROUP_TITLES.actions });
         const buttons = document.createElement('div');
         buttons.style.display = 'flex';
         buttons.style.gap = '12px';
@@ -94,10 +113,10 @@ export class OverviewWidgetsWebStory extends StoryElement {
 
         const save = document.createElement('button');
         save.className = 'adw-button suggested-action';
-        save.textContent = 'Save changes';
+        save.textContent = OVERVIEW_TEXT.save;
         const remove = document.createElement('button');
         remove.className = 'adw-button destructive-action';
-        remove.textContent = 'Delete account';
+        remove.textContent = OVERVIEW_TEXT.delete;
         buttons.append(save, remove);
         actions.append(buttons);
         page.append(actions);

package/src/browser/stories.ts

@@ -3,8 +3,17 @@
 // embeddable `mount(container)` (`embed.ts`, used by the gjsify website) draw
 // from this single list so the two stay in lockstep.
 //
-// Order mirrors the native sidebar's category order (Presentation, Boxed
-// Lists, Buttons, …).
+// THE ORDER OF THIS ARRAY NO LONGER DECIDES THE SIDEBAR. Categories are ordered
+// by STORYBOOK_CATEGORY_ORDER in @gjsify/storybook-core, which every target's
+// controller applies, so this list only decides which stories exist and how they
+// sit WITHIN their category.
+//
+// It used to claim it mirrored the native sidebar's order. It measurably did not:
+// the GTK and NativeScript storybooks took their order from a path glob
+// (alphabetical by directory), so `Overview` led here and sat fifth there. One
+// sentence was the only thing holding an invariant across three files, and the
+// sentence was wrong — which is why the order moved somewhere a build gate can
+// check it.
 
 import type { WebStoryModule } from '@gjsify/adwaita-storybook';
 import { OverviewWidgetsWebStories } from './overview/widgets.web.js';
@@ -23,8 +32,11 @@ import { PasswordEntryRowWebStories } from './rows/password-entry-row.web.js';
 import { PreferencesGroupWebStories } from './rows/preferences-group.web.js';
 import { SpinRowWebStories } from './rows/spin-row.web.js';
 import { SwitchRowWebStories } from './rows/switch-row.web.js';
+import { DropDownWebStories } from './controls/drop-down.web.js';
+import { EntryWebStories } from './controls/entry.web.js';
 import { ButtonContentWebStories } from './buttons/button-content.web.js';
 import { ButtonStylesWebStories } from './buttons/button-styles.web.js';
+import { MenuButtonWebStories } from './buttons/menu-button.web.js';
 import { SplitButtonWebStories } from './buttons/split-button.web.js';
 import { ToggleGroupWebStories } from './buttons/toggle-group.web.js';
 import { ClampWebStories } from './layout/clamp.web.js';
@@ -35,6 +47,7 @@ import { CarouselWebStories } from './view-switching/carousel.web.js';
 import { InlineViewSwitcherWebStories } from './view-switching/inline-view-switcher.web.js';
 import { TabViewWebStories } from './view-switching/tab-view.web.js';
 import { ViewSwitcherWebStories } from './view-switching/view-switcher.web.js';
+import { ViewSwitcherBarWebStories } from './view-switching/view-switcher-bar.web.js';
 import { BottomSheetWebStories } from './navigation/bottom-sheet.web.js';
 import { NavigationSplitViewWebStories } from './navigation/navigation-split-view.web.js';
 import { NavigationViewWebStories } from './navigation/navigation-view.web.js';
@@ -62,8 +75,11 @@ export const stories: WebStoryModule[] = [
     PreferencesGroupWebStories,
     SpinRowWebStories,
     SwitchRowWebStories,
+    EntryWebStories,
+    DropDownWebStories,
     ButtonContentWebStories,
     ButtonStylesWebStories,
+    MenuButtonWebStories,
     SplitButtonWebStories,
     ToggleGroupWebStories,
     ClampWebStories,
@@ -74,6 +90,7 @@ export const stories: WebStoryModule[] = [
     InlineViewSwitcherWebStories,
     TabViewWebStories,
     ViewSwitcherWebStories,
+    ViewSwitcherBarWebStories,
     BottomSheetWebStories,
     NavigationSplitViewWebStories,
     NavigationViewWebStories,

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

@@ -0,0 +1,67 @@
+// Browser port of the View Switcher Bar story. Shares metadata with
+// view-switcher-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+// TYPE-ONLY: the bar is driven through `setStack()`/`reveal`, not attributes, and a
+// hand-written structural interface here would be a second copy of that API that
+// nothing keeps in step. The import erases, so the bundle keeps no edge to the package.
+import type { AdwViewStack, AdwViewSwitcherBar } from '@gjsify/adwaita-web';
+import { VIEW_SWITCHER_BAR_PAGES, viewSwitcherBarMeta } from '../../view-switching/view-switcher-bar.meta.js';
+
+export class ViewSwitcherBarWebStory extends StoryElement {
+    private _bar: AdwViewSwitcherBar | null = null;
+
+    constructor() {
+        super(ViewSwitcherBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return viewSwitcherBarMeta;
+    }
+
+    initialize(): void {
+        const stack = document.createElement('adw-view-stack') as AdwViewStack;
+        stack.style.flex = '1';
+        for (const page of VIEW_SWITCHER_BAR_PAGES) {
+            const status = document.createElement('adw-status-page');
+            status.setAttribute('icon', page.icon.replace(/-symbolic$/, ''));
+            status.setAttribute('title', page.title);
+            status.setAttribute('description', `The ${page.title.toLowerCase()} page.`);
+            const child = document.createElement('adw-view-stack-page');
+            child.setAttribute('name', page.name);
+            child.setAttribute('title', page.title);
+            child.setAttribute('icon-name', page.icon.replace(/-symbolic$/, ''));
+            child.appendChild(status);
+            stack.appendChild(child);
+        }
+
+        const bar = document.createElement('adw-view-switcher-bar') as AdwViewSwitcherBar;
+        bar.setAttribute('slot', 'bottom');
+
+        // A toolbar view, so the bar sits where libadwaita puts it — at the bottom
+        // edge — rather than floating in the middle of the preview.
+        const view = document.createElement('adw-toolbar-view');
+        view.style.width = '360px';
+        view.style.height = '360px';
+        view.append(stack, bar);
+        this.addContent(view);
+
+        // Bound AFTER the stack is in the document: the bar derives its buttons from
+        // the stack's pages, and those only exist once the `<adw-view-stack-page>`
+        // children have upgraded.
+        bar.setStack(stack);
+        this._bar = bar;
+        this._apply();
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        this._bar.reveal = this.args.reveal as boolean;
+    }
+}
+
+export const ViewSwitcherBarWebStories: WebStoryModule = { stories: [ViewSwitcherBarWebStory] };

package/src/buttons/menu-button.meta.ts

@@ -0,0 +1,29 @@
+// Shared, renderer-agnostic metadata for the Menu Button story. Imported by the GTK
+// renderer (menu-button.story.ts), the browser renderer
+// (browser/buttons/menu-button.web.ts) and the NativeScript one.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** The menu all three renderings build, so the popover holds the same items everywhere. */
+export const MENU_BUTTON_ITEMS = ['Save as…', 'Export', 'Print'] as const;
+
+export const menuButtonMeta: StoryMeta = {
+    title: 'Buttons/Menu Button',
+    description:
+        'Gtk.MenuButton — a button whose only action is to open a menu. Where a Split Button has a primary ' +
+        'action beside its arrow, this one has none: every choice lives in the popover.',
+    controls: [
+        {
+            name: 'iconName',
+            label: 'Icon',
+            type: ControlType.SELECT,
+            options: [
+                { label: 'Hamburger', value: 'open-menu-symbolic' },
+                { label: 'More', value: 'view-more-symbolic' },
+                { label: 'Open', value: 'document-open-symbolic' },
+            ],
+            defaultValue: 'open-menu-symbolic',
+        },
+        { name: 'menuTitle', label: 'Menu title', type: ControlType.TEXT, defaultValue: 'Document' },
+    ],
+};

package/src/buttons/menu-button.story.ts

@@ -0,0 +1,60 @@
+// Gtk.MenuButton — a button whose only job is to open a menu.
+// original implementation.
+
+import Gio from '@girs/gio-2.0';
+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 { MENU_BUTTON_ITEMS, menuButtonMeta } from './menu-button.meta.js';
+
+/** Story: a Gtk.MenuButton over a Gio.Menu whose section carries the title. */
+export class MenuButtonStory extends StoryWidget {
+    private _widget: Gtk.MenuButton | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookMenuButton' }, MenuButtonStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(MenuButtonStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...menuButtonMeta, component: Gtk.MenuButton.$gtype };
+    }
+
+    initialize(): void {
+        this._widget = new Gtk.MenuButton({ halign: Gtk.Align.CENTER });
+        this._apply();
+        this.addContent(this._widget);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    /**
+     * A Gio.Menu is immutable to the popover once shown, so the model is rebuilt
+     * rather than mutated — the title lives on the SECTION, which is how GTK
+     * spells a labelled group of items.
+     */
+    private _buildMenu(title: string): Gio.Menu {
+        const items = new Gio.Menu();
+        for (const label of MENU_BUTTON_ITEMS) {
+            items.append(label, `app.${label.toLowerCase().replace(/[^a-z]+/g, '-')}`);
+        }
+        const menu = new Gio.Menu();
+        menu.append_section(title.length > 0 ? title : null, items);
+        return menu;
+    }
+
+    private _apply(): void {
+        if (!this._widget) return;
+        this._widget.iconName = this.args.iconName as string;
+        this._widget.menuModel = this._buildMenu(this.args.menuTitle as string);
+    }
+}
+
+GObject.type_ensure(MenuButtonStory.$gtype);
+
+export const MenuButtonStories: StoryModule = { stories: [MenuButtonStory] };

package/src/controls/drop-down.meta.ts

@@ -0,0 +1,25 @@
+// Shared, renderer-agnostic metadata for the Drop Down story. Imported by the GTK
+// renderer (drop-down.story.ts), the browser renderer
+// (browser/controls/drop-down.web.ts) and the NativeScript one.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+/** The one option list all three renderings drive, so a pick means the same thing everywhere. */
+export const DROP_DOWN_OPTIONS = ['Automatic', 'Always', 'Never', 'When busy'] as const;
+
+export const dropDownMeta: StoryMeta = {
+    title: 'Controls/Drop Down',
+    description:
+        'Gtk.DropDown — pick one value from a list. The button shows the selection; the list opens in a ' +
+        'popover. Adw.ComboRow is the same choice presented as a boxed-list row.',
+    controls: [
+        {
+            name: 'selected',
+            label: 'Selected',
+            type: ControlType.SELECT,
+            options: DROP_DOWN_OPTIONS.map((label, index) => ({ label, value: index })),
+            defaultValue: 0,
+        },
+        { name: 'enableSearch', label: 'Search field', type: ControlType.BOOLEAN, defaultValue: false },
+    ],
+};

package/src/controls/drop-down.story.ts

@@ -0,0 +1,49 @@
+// Gtk.DropDown — pick one value from a list, shown in a popover.
+// original implementation.
+
+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 { DROP_DOWN_OPTIONS, dropDownMeta } from './drop-down.meta.js';
+
+/** Story: a Gtk.DropDown over a Gtk.StringList, with the search field toggled by an arg. */
+export class DropDownStory extends StoryWidget {
+    private _dropDown: Gtk.DropDown | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookDropDown' }, DropDownStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(DropDownStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...dropDownMeta, component: Gtk.DropDown.$gtype };
+    }
+
+    initialize(): void {
+        this._dropDown = Gtk.DropDown.new_from_strings([...DROP_DOWN_OPTIONS]);
+        // Search needs to know WHICH string to match: a GtkDropDown over a
+        // GtkStringList holds GtkStringObjects, and without an expression the
+        // search field appears and matches nothing.
+        this._dropDown.expression = Gtk.PropertyExpression.new(Gtk.StringObject.$gtype, null, 'string');
+        this._dropDown.halign = Gtk.Align.CENTER;
+        this._apply();
+        this.addContent(this._dropDown);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._dropDown) return;
+        this._dropDown.selected = this.args.selected as number;
+        this._dropDown.enableSearch = this.args.enableSearch as boolean;
+    }
+}
+
+GObject.type_ensure(DropDownStory.$gtype);
+
+export const DropDownStories: StoryModule = { stories: [DropDownStory] };

package/src/controls/entry.meta.ts

@@ -0,0 +1,18 @@
+// Shared, renderer-agnostic metadata for the Entry story. Imported by the GTK
+// renderer (entry.story.ts), the browser renderer (browser/controls/entry.web.ts)
+// and the NativeScript one, so all three expose identical controls.
+
+import { ControlType, type StoryMeta } from '@gjsify/stories';
+
+export const entryMeta: StoryMeta = {
+    title: 'Controls/Entry',
+    description:
+        'Gtk.Entry — a single-line text field. Libadwaita ships no AdwEntry; the Adwaita look is the ' +
+        'GTK entry styled by the stylesheet, which is why the row variants (Entry Row, Password Entry Row) ' +
+        'are the widgets with an Adw prefix.',
+    controls: [
+        { name: 'text', label: 'Text', type: ControlType.TEXT, defaultValue: '' },
+        { name: 'placeholder', label: 'Placeholder', type: ControlType.TEXT, defaultValue: 'Search files…' },
+        { name: 'editable', label: 'Editable', type: ControlType.BOOLEAN, defaultValue: true },
+    ],
+};

package/src/controls/entry.story.ts

@@ -0,0 +1,47 @@
+// Gtk.Entry — the single-line text field the Adwaita stylesheet dresses.
+// original implementation.
+
+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 { entryMeta } from './entry.meta.js';
+
+/** Story: a Gtk.Entry with placeholder text and an editable toggle. */
+export class EntryStory extends StoryWidget {
+    private _entry: Gtk.Entry | null = null;
+
+    static {
+        GObject.registerClass({ GTypeName: 'AdwStorybookEntry' }, EntryStory);
+    }
+
+    constructor() {
+        super(StoryWidget.fromMeta(EntryStory.getMetadata(), 'Default'));
+    }
+
+    static getMetadata(): StoryMeta {
+        return { ...entryMeta, component: Gtk.Entry.$gtype };
+    }
+
+    initialize(): void {
+        this._entry = new Gtk.Entry({ widthRequest: 280, halign: Gtk.Align.CENTER });
+        this._apply();
+        this.addContent(this._entry);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._entry) return;
+        this._entry.text = this.args.text as string;
+        this._entry.placeholderText = this.args.placeholder as string;
+        // `editable` false keeps the entry focusable and selectable, which is what
+        // GtkEditable:editable means — NOT `sensitive`, which would grey it out.
+        this._entry.editable = this.args.editable as boolean;
+    }
+}
+
+GObject.type_ensure(EntryStory.$gtype);
+
+export const EntryStories: StoryModule = { stories: [EntryStory] };

package/src/metas.ts

@@ -6,8 +6,11 @@
 
 export * from './buttons/button-content.meta.js';
 export * from './buttons/button-styles.meta.js';
+export * from './buttons/menu-button.meta.js';
 export * from './buttons/split-button.meta.js';
 export * from './buttons/toggle-group.meta.js';
+export * from './controls/drop-down.meta.js';
+export * from './controls/entry.meta.js';
 export * from './feedback/about-dialog.meta.js';
 export * from './feedback/alert-dialog.meta.js';
 export * from './feedback/preferences-dialog.meta.js';
@@ -40,4 +43,5 @@ export * from './rows/switch-row.meta.js';
 export * from './view-switching/carousel.meta.js';
 export * from './view-switching/inline-view-switcher.meta.js';
 export * from './view-switching/tab-view.meta.js';
+export * from './view-switching/view-switcher-bar.meta.js';
 export * from './view-switching/view-switcher.meta.js';