@gjsify/example-gtk-adwaita-storybook 0.45.0 → 0.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/example-gtk-adwaita-storybook",
-  "version": "0.45.0",
+  "version": "0.47.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",
@@ -48,17 +48,17 @@
     }
   },
   "devDependencies": {
-    "@girs/adw-1": "^4.1.0",
-    "@girs/gio-2.0": "^4.1.0",
-    "@girs/gjs": "^4.1.0",
-    "@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.45.0",
-    "@gjsify/cli": "^0.45.0",
+    "@girs/adw-1": "4.6.0",
+    "@girs/gio-2.0": "4.6.0",
+    "@girs/gjs": "4.6.0",
+    "@girs/glib-2.0": "4.6.0",
+    "@girs/gobject-2.0": "4.6.0",
+    "@girs/gtk-4.0": "4.6.0",
+    "@gjsify/adwaita-web": "^0.47.0",
+    "@gjsify/cli": "^0.47.0",
     "@gjsify/node-gi": "file:../../../packages/node-gi/node-gi",
-    "@gjsify/storybook": "^0.45.0",
-    "@gjsify/adwaita-storybook": "^0.45.0",
+    "@gjsify/storybook": "^0.47.0",
+    "@gjsify/adwaita-storybook": "^0.47.0",
     "@types/node": "^25.9.2",
     "typescript": "^6.0.3"
   },

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

@@ -1,5 +1,5 @@
 // Browser port of the Button Content story — an <adw-button-content> (icon +
-// label) inside a suggested-action pill <adw-button>, mirroring the GTK twin
+// label) inside a suggested-action pill <gtk-button>, mirroring the GTK twin
 // (button-content.story.ts) which places an Adw.ButtonContent inside a
 // Gtk.Button with the .suggested-action + .pill style classes.
 
@@ -27,8 +27,8 @@ export class ButtonContentWebStory extends StoryElement {
         this._syncContent();
 
         // The native story wraps the content in a suggested-action pill button.
-        // Use a plain button carrying the adw-button style classes (the
-        // <adw-button> custom element rebuilds its subtree from attributes and
+        // Use a plain button carrying the .adw-button style classes (the
+        // <gtk-button> custom element rebuilds its subtree from attributes and
         // would discard the nested <adw-button-content>).
         const button = document.createElement('button');
         button.className = 'adw-button suggested-action pill';

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

@@ -1,4 +1,4 @@
-// Browser port of the Button Styles story — adw-button with Adwaita style
+// Browser port of the Button Styles story — gtk-button with Adwaita style
 // variants. Shares its metadata/controls with the GTK twin (button-styles.story.ts).
 
 import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
@@ -6,7 +6,7 @@ import { buttonStylesMeta } from '../../buttons/button-styles.meta.js';
 
 const VARIANT_ATTRS = ['pill', 'circular', 'suggested', 'destructive', 'flat'] as const;
 
-/** Map the storybook `style` value to an <adw-button> variant attribute. */
+/** Map the storybook `style` value to a <gtk-button> variant attribute. */
 const VARIANT_BY_STYLE: Record<string, (typeof VARIANT_ATTRS)[number]> = {
     pill: 'pill',
     circular: 'circular',
@@ -16,7 +16,7 @@ const VARIANT_BY_STYLE: Record<string, (typeof VARIANT_ATTRS)[number]> = {
 };
 
 function button(opts: { label?: string; icon?: string; variant?: (typeof VARIANT_ATTRS)[number] }): HTMLElement {
-    const btn = document.createElement('adw-button');
+    const btn = document.createElement('gtk-button');
     if (opts.label) btn.setAttribute('label', opts.label);
     if (opts.icon) btn.setAttribute('icon', opts.icon);
     if (opts.variant) btn.setAttribute(opts.variant, '');

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

@@ -15,7 +15,7 @@ export class MenuButtonWebStory extends StoryElement {
     }
 
     initialize(): void {
-        this._widget = document.createElement('adw-menu-button');
+        this._widget = document.createElement('gtk-menu-button');
         this._widget.setAttribute('menu', JSON.stringify(MENU_BUTTON_ITEMS.map((label) => ({ label }))));
         this._apply();
         this.addContent(this._widget);

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

@@ -15,7 +15,7 @@ export class DropDownWebStory extends StoryElement {
     }
 
     initialize(): void {
-        this._dropDown = document.createElement('adw-drop-down');
+        this._dropDown = document.createElement('gtk-drop-down');
         this._dropDown.setAttribute('options', JSON.stringify(DROP_DOWN_OPTIONS));
         this._apply();
         this.addContent(this._dropDown);

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

@@ -15,7 +15,7 @@ export class EntryWebStory extends StoryElement {
     }
 
     initialize(): void {
-        this._entry = document.createElement('adw-entry');
+        this._entry = document.createElement('gtk-entry');
         this._entry.style.minWidth = '280px';
         this._apply();
         this.addContent(this._entry);
@@ -29,7 +29,7 @@ export class EntryWebStory extends StoryElement {
         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
+        // `<gtk-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');

package/src/browser/feedback/about-dialog.web.ts

@@ -30,7 +30,7 @@ export class AboutDialogWebStory extends StoryElement {
         center.style.justifyContent = 'center';
         center.style.minHeight = '160px';
 
-        const button = document.createElement('adw-button');
+        const button = document.createElement('gtk-button');
         button.textContent = 'Show dialog';
         button.setAttribute('pill', '');
         button.setAttribute('suggested', '');

package/src/browser/feedback/alert-dialog.web.ts

@@ -17,7 +17,7 @@ export class AlertDialogWebStory extends StoryElement {
     }
 
     initialize(): void {
-        const button = document.createElement('adw-button');
+        const button = document.createElement('gtk-button');
         button.textContent = 'Show dialog';
         button.setAttribute('pill', '');
         button.setAttribute('suggested', '');

package/src/browser/feedback/preferences-dialog.web.ts

@@ -68,7 +68,7 @@ export class PreferencesDialogWebStory extends StoryElement {
         center.style.height = '100%';
         center.style.minHeight = '200px';
 
-        const button = document.createElement('adw-button');
+        const button = document.createElement('gtk-button');
         button.textContent = 'Show dialog';
         button.setAttribute('pill', '');
         button.setAttribute('suggested', '');

package/src/browser/feedback/toast.web.ts

@@ -34,7 +34,7 @@ export class ToastWebStory extends StoryElement {
         center.style.width = '100%';
         center.style.height = '100%';
 
-        const button = document.createElement('adw-button');
+        const button = document.createElement('gtk-button');
         button.textContent = 'Show toast';
         button.setAttribute('pill', '');
         button.setAttribute('suggested', '');

package/src/browser/layout/header-bar.web.ts

@@ -21,13 +21,13 @@ export class HeaderBarWebStory extends StoryElement {
         this._title.setAttribute('slot', 'center');
 
         // Start control — a flat back button.
-        const backButton = document.createElement('adw-button');
+        const backButton = document.createElement('gtk-button');
         backButton.setAttribute('slot', 'start');
         backButton.setAttribute('icon', 'go-previous');
         backButton.setAttribute('flat', '');
 
         // End control — a flat menu button.
-        const menuButton = document.createElement('adw-button');
+        const menuButton = document.createElement('gtk-button');
         menuButton.setAttribute('slot', 'end');
         menuButton.setAttribute('icon', 'open-menu');
         menuButton.setAttribute('flat', '');

package/src/browser/layout/toolbar-view.web.ts

@@ -49,12 +49,12 @@ export class ToolbarViewWebStory extends StoryElement {
         bottomBar.style.padding = 'var(--spacing-xs, 6px)';
         bottomBar.style.borderTop = '1px solid var(--separator-color, rgba(0, 0, 0, 0.15))';
 
-        const addButton = document.createElement('adw-button');
+        const addButton = document.createElement('gtk-button');
         addButton.setAttribute('icon', 'list-add');
         addButton.setAttribute('flat', '');
         addButton.setAttribute('tooltip', 'Add');
 
-        const removeButton = document.createElement('adw-button');
+        const removeButton = document.createElement('gtk-button');
         removeButton.setAttribute('icon', 'list-remove');
         removeButton.setAttribute('flat', '');
         removeButton.setAttribute('tooltip', 'Remove');
@@ -64,7 +64,7 @@ export class ToolbarViewWebStory extends StoryElement {
         selectionLabel.style.flex = '1 1 auto';
         selectionLabel.style.textAlign = 'center';
 
-        const shareButton = document.createElement('adw-button');
+        const shareButton = document.createElement('gtk-button');
         shareButton.setAttribute('icon', 'send-to');
         shareButton.setAttribute('flat', '');
         shareButton.setAttribute('tooltip', 'Share');

package/src/browser/layout/wrap-box.web.ts

@@ -21,7 +21,7 @@ export class WrapBoxWebStory extends StoryElement {
         this._wrap.style.width = '460px';
 
         for (const tag of TAGS) {
-            const chip = document.createElement('adw-button');
+            const chip = document.createElement('gtk-button');
             chip.setAttribute('label', tag);
             chip.setAttribute('pill', '');
             this._wrap.append(chip);

package/src/browser/navigation/bottom-sheet.web.ts

@@ -5,7 +5,7 @@ import { bottomSheetMeta } from '../../navigation/bottom-sheet.meta.js';
 
 /** GTK symbolic name (e.g. "list-add-symbolic") → adwaita-web icon class. */
 function iconClass(gtkName: string): string {
-    return `adw-icon adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
+    return `gtk-image adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
 }
 
 export class BottomSheetWebStory extends StoryElement {
@@ -30,7 +30,7 @@ export class BottomSheetWebStory extends StoryElement {
         center.style.width = '100%';
         center.style.height = '100%';
 
-        const toggle = document.createElement('adw-button');
+        const toggle = document.createElement('gtk-button');
         toggle.textContent = 'Toggle sheet';
         toggle.setAttribute('pill', '');
         toggle.setAttribute('suggested', '');

package/src/browser/navigation/navigation-split-view.web.ts

@@ -6,7 +6,7 @@ import { navigationSplitViewMeta } from '../../navigation/navigation-split-view.
 
 /** GTK symbolic name (e.g. "folder-symbolic") → adwaita-web icon class. */
 function iconClass(gtkName: string): string {
-    return `adw-icon adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
+    return `gtk-image adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
 }
 
 export class NavigationSplitViewWebStory extends StoryElement {

package/src/browser/navigation/navigation-view.web.ts

@@ -56,7 +56,7 @@ export class NavigationViewWebStory extends StoryElement {
         this._rootTitle.setAttribute('title', this.args.rootTitle as string);
         this._rootTitle.setAttribute('slot', 'center');
 
-        const openButton = document.createElement('adw-button');
+        const openButton = document.createElement('gtk-button');
         openButton.setAttribute('label', 'Open contact');
         openButton.setAttribute('pill', '');
         openButton.setAttribute('suggested', '');

package/src/browser/navigation/sidebar.web.ts

@@ -75,7 +75,7 @@ export class SidebarWebStory extends StoryElement {
         const item = this.items[selected] ?? this.items[0];
         this._status.setAttribute('title', item.title);
         // adw-status-page's `icon` attribute is a plain symbolic name (it strips
-        // -symbolic and builds the adw-icon class itself).
+        // -symbolic and builds the gtk-image class itself).
         this._status.setAttribute('icon', item.icon.replace(/-symbolic$/, ''));
         this._status.setAttribute('description', item.subtitle);
     }

package/src/browser/presentation/status-page.web.ts

@@ -18,7 +18,7 @@ export class StatusPageWebStory extends StoryElement {
         this._page = document.createElement('adw-status-page');
 
         // Suggested-action pill button, matching the native story's child.
-        const button = document.createElement('adw-button');
+        const button = document.createElement('gtk-button');
         button.setAttribute('label', 'New Document');
         button.setAttribute('pill', '');
         button.setAttribute('suggested', '');

package/src/browser/rows/action-row.web.ts

@@ -5,7 +5,7 @@ import { actionRowMeta } from '../../rows/action-row.meta.js';
 
 /** GTK symbolic name (e.g. "folder-symbolic") → adwaita-web icon class. */
 function iconClass(gtkName: string): string {
-    return `adw-icon adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
+    return `gtk-image adw-icon--${gtkName.replace(/-symbolic$/, '')}`;
 }
 
 export class ActionRowWebStory extends StoryElement {
@@ -27,7 +27,7 @@ export class ActionRowWebStory extends StoryElement {
         this._icon.setAttribute('slot', 'prefix');
         this._icon.className = iconClass(this.args.iconName as string);
 
-        const button = document.createElement('adw-button');
+        const button = document.createElement('gtk-button');
         button.setAttribute('slot', 'suffix');
         button.setAttribute('icon', 'go-next');
         button.setAttribute('flat', '');

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

@@ -5,11 +5,11 @@ import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } fro
 // 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 type { Adw } 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;
+    private _bar: Adw.ViewSwitcherBar | null = null;
 
     constructor() {
         super(ViewSwitcherBarWebStory.getMetadata(), 'Default');
@@ -20,7 +20,7 @@ export class ViewSwitcherBarWebStory extends StoryElement {
     }
 
     initialize(): void {
-        const stack = document.createElement('adw-view-stack') as AdwViewStack;
+        const stack = document.createElement('adw-view-stack') as Adw.ViewStack;
         stack.style.flex = '1';
         for (const page of VIEW_SWITCHER_BAR_PAGES) {
             const status = document.createElement('adw-status-page');
@@ -35,7 +35,7 @@ export class ViewSwitcherBarWebStory extends StoryElement {
             stack.appendChild(child);
         }
 
-        const bar = document.createElement('adw-view-switcher-bar') as AdwViewSwitcherBar;
+        const bar = document.createElement('adw-view-switcher-bar') as Adw.ViewSwitcherBar;
         bar.setAttribute('slot', 'bottom');
 
         // A toolbar view, so the bar sits where libadwaita puts it — at the bottom

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

@@ -1,9 +1,9 @@
 // Adw.ButtonContent — an icon-plus-label child for a Gtk.Button, with optional
 // shrinking. original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { buttonContentMeta } from './button-content.meta.js';
 

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

@@ -1,9 +1,9 @@
 // Gtk.Button style classes — .pill, .circular, .suggested-action,
 // .destructive-action, .flat. original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { buttonStylesMeta } from './button-styles.meta.js';
 

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

@@ -1,9 +1,9 @@
 // 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 Gio from 'gi://Gio?version=2.0';
+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 { MENU_BUTTON_ITEMS, menuButtonMeta } from './menu-button.meta.js';
 

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

@@ -1,9 +1,9 @@
 // Adw.SplitButton — a button with a main action plus an attached dropdown menu.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gio from '@girs/gio-2.0';
-import GObject from '@girs/gobject-2.0';
+import Adw from 'gi://Adw?version=1';
+import 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 { splitButtonFlatMeta, splitButtonMeta } from './split-button.meta.js';
 

package/src/buttons/toggle-group.story.ts

@@ -1,8 +1,8 @@
 // Adw.ToggleGroup — a linked set of Adw.Toggle buttons with a single active item.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import GObject from '@girs/gobject-2.0';
+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 { toggleGroupMeta } from './toggle-group.meta.js';
 

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

@@ -1,8 +1,8 @@
 // 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 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 { DROP_DOWN_OPTIONS, dropDownMeta } from './drop-down.meta.js';
 

package/src/controls/entry.story.ts

@@ -1,8 +1,8 @@
 // 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 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 { entryMeta } from './entry.meta.js';
 

package/src/feedback/about-dialog.story.ts

@@ -1,9 +1,9 @@
 // Adw.AboutDialog — the standard Adwaita "About" window for an application.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { aboutDialogMeta } from './about-dialog.meta.js';
 

package/src/feedback/alert-dialog.story.ts

@@ -1,9 +1,9 @@
 // Adw.AlertDialog — a modal dialog with a heading, body and a row of responses.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { alertDialogMeta } from './alert-dialog.meta.js';
 

package/src/feedback/preferences-dialog.story.ts

@@ -1,9 +1,9 @@
 // Adw.PreferencesDialog — a multi-page preferences window built from pages,
 // groups and rows. original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { preferencesDialogMeta } from './preferences-dialog.meta.js';
 

package/src/feedback/toast.story.ts

@@ -1,9 +1,9 @@
 // Adw.Toast — a transient notification shown over content via Adw.ToastOverlay.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { toastMeta } from './toast.meta.js';
 

package/src/layout/clamp.story.ts

@@ -1,9 +1,9 @@
 // Adw.Clamp — constrains its child to a maximum size, centring it within wider space.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { clampMeta } from './clamp.meta.js';
 

package/src/layout/header-bar.story.ts

@@ -1,10 +1,10 @@
 // Adw.HeaderBar — a window header bar with a custom title widget and packed buttons.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import Gio from '@girs/gio-2.0';
-import GObject from '@girs/gobject-2.0';
+import Adw from 'gi://Adw?version=1';
+import Gtk from 'gi://Gtk?version=4.0';
+import 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 { headerBarMeta } from './header-bar.meta.js';
 

package/src/layout/toolbar-view.story.ts

@@ -1,9 +1,9 @@
 // Adw.ToolbarView — wraps content between revealable top and bottom toolbars.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { toolbarViewMeta } from './toolbar-view.meta.js';
 

package/src/layout/wrap-box.story.ts

@@ -1,9 +1,9 @@
 // Adw.WrapBox — a box that lays children out in a line, wrapping onto new lines as needed.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { wrapBoxMeta } from './wrap-box.meta.js';
 

package/src/navigation/bottom-sheet.story.ts

@@ -1,9 +1,9 @@
 // Adw.BottomSheet — a content area with a sheet that slides up from the bottom.
 // original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { bottomSheetMeta } from './bottom-sheet.meta.js';
 

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

@@ -1,9 +1,9 @@
 // Adw.NavigationSplitView — a two-pane sidebar/content split that collapses
 // into a single navigation stack. original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 { navigationSplitViewMeta } from './navigation-split-view.meta.js';
 

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

@@ -1,9 +1,9 @@
 // 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 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 { navigationViewMeta } from './navigation-view.meta.js';
 

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

@@ -1,9 +1,9 @@
 // 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 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 { overlaySplitViewMeta } from './overlay-split-view.meta.js';
 

package/src/navigation/sidebar.story.ts

@@ -1,9 +1,9 @@
 // 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 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 { sidebarMeta } from './sidebar.meta.js';
 

package/src/overview/widgets.story.ts

@@ -1,9 +1,9 @@
 // The Overview story on GTK — the widget gallery that used to be
 // `examples/gtk/adwaita-reference`. original implementation.
 
-import Adw from '@girs/adw-1';
-import Gtk from '@girs/gtk-4.0';
-import GObject from '@girs/gobject-2.0';
+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 {
     OVERVIEW_ACCENT_OPTIONS,