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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjsify/example-gtk-adwaita-storybook",
-  "version": "0.54.0",
+  "version": "0.55.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": "5.4.0",
     "@girs/gobject-2.0": "5.4.0",
     "@girs/gtk-4.0": "5.4.0",
-    "@gjsify/adwaita-web": "^0.54.0",
-    "@gjsify/cli": "^0.54.0",
+    "@gjsify/adwaita-web": "^0.55.0",
+    "@gjsify/cli": "^0.55.0",
     "@gjsify/node-gi": "file:../../../packages/node-gi/node-gi",
-    "@gjsify/storybook": "^0.54.0",
-    "@gjsify/adwaita-storybook": "^0.54.0",
+    "@gjsify/storybook": "^0.55.0",
+    "@gjsify/adwaita-storybook": "^0.55.0",
     "@types/node": "^25.9.2",
     "typescript": "^6.0.3"
   },

package/src/browser/buttons/color-dialog-button.web.ts

@@ -0,0 +1,42 @@
+// Browser port of the Color Dialog Button story. Shares metadata with
+// color-dialog-button.meta.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { colorDialogButtonMeta } from '../../buttons/color-dialog-button.meta.js';
+import type { Gtk } from '@gjsify/adwaita-web';
+
+export class ColorDialogButtonWebStory extends StoryElement {
+    private _button: Gtk.ColorDialogButton | null = null;
+
+    constructor() {
+        super(ColorDialogButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return colorDialogButtonMeta;
+    }
+
+    initialize(): void {
+        this._button = document.createElement('gtk-color-dialog-button') as Gtk.ColorDialogButton;
+        // The `dialog` attribute is what makes the button sensitive: the element's rule is
+        // GTK's `dialog != NULL && cancellable == NULL`.
+        this._button.setAttribute('dialog', '');
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        this._button.setAttribute('rgba', this.args.rgba as string);
+        // `title` is a property of the DIALOG, not of the button, so it goes through the
+        // dialog rather than an attribute the element does not observe.
+        const title = (this.args.title as string).trim();
+        this._button.dialog = { title: title === '' ? null : title };
+    }
+}
+
+export const ColorDialogButtonWebStories: WebStoryModule = { stories: [ColorDialogButtonWebStory] };

package/src/browser/buttons/font-dialog-button.web.ts

@@ -0,0 +1,42 @@
+// Browser port of the Font Dialog Button story. Shares metadata with
+// font-dialog-button.meta.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { fontDialogButtonMeta } from '../../buttons/font-dialog-button.meta.js';
+import type { Gtk } from '@gjsify/adwaita-web';
+
+export class FontDialogButtonWebStory extends StoryElement {
+    private _button: Gtk.FontDialogButton | null = null;
+
+    constructor() {
+        super(FontDialogButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return fontDialogButtonMeta;
+    }
+
+    initialize(): void {
+        this._button = document.createElement('gtk-font-dialog-button') as Gtk.FontDialogButton;
+        // Without a dialog the button is insensitive, GTK's rule being
+        // `dialog != NULL && cancellable == NULL`.
+        this._button.setAttribute('dialog', '');
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        // `level` first: it decides whether the size box is visible at all.
+        this._button.setAttribute('level', this.args.level as string);
+        this._button.setAttribute('font-desc', this.args.fontDesc as string);
+        this._button.toggleAttribute('use-font', this.args.useFont as boolean);
+        this._button.toggleAttribute('use-size', this.args.useSize as boolean);
+    }
+}
+
+export const FontDialogButtonWebStories: WebStoryModule = { stories: [FontDialogButtonWebStory] };

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

@@ -0,0 +1,37 @@
+// Browser port of the Link Button story. Shares metadata with link-button.meta.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { linkButtonMeta } from '../../buttons/link-button.meta.js';
+
+export class LinkButtonWebStory extends StoryElement {
+    private _button: HTMLElement | null = null;
+
+    constructor() {
+        super(LinkButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return linkButtonMeta;
+    }
+
+    initialize(): void {
+        this._button = document.createElement('gtk-link-button');
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        this._button.setAttribute('label', this.args.label as string);
+        // `uri` last, because the element unsets `visited` as its side effect — the other
+        // order would never show a visited link, exactly as on GTK.
+        this._button.setAttribute('uri', this.args.uri as string);
+        this._button.toggleAttribute('visited', this.args.visited as boolean);
+    }
+}
+
+export const LinkButtonWebStories: WebStoryModule = { stories: [LinkButtonWebStory] };

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

@@ -0,0 +1,36 @@
+// Browser port of the Scale Button story. Shares metadata with scale-button.meta.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { scaleButtonMeta, SCALE_BUTTON_ICONS } from '../../buttons/scale-button.meta.js';
+
+export class ScaleButtonWebStory extends StoryElement {
+    private _button: HTMLElement | null = null;
+
+    constructor() {
+        super(ScaleButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return scaleButtonMeta;
+    }
+
+    initialize(): void {
+        this._button = document.createElement('gtk-scale-button');
+        this._button.setAttribute('icons', JSON.stringify(SCALE_BUTTON_ICONS));
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        this._button.setAttribute('orientation', this.args.orientation as string);
+        this._button.toggleAttribute('has-frame', this.args.hasFrame as boolean);
+        this._button.setAttribute('value', String(this.args.value));
+    }
+}
+
+export const ScaleButtonWebStories: WebStoryModule = { stories: [ScaleButtonWebStory] };

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

@@ -0,0 +1,35 @@
+// Browser port of the Toggle Button story. Shares metadata with toggle-button.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { toggleButtonMeta } from '../../buttons/toggle-button.meta.js';
+
+export class ToggleButtonWebStory extends StoryElement {
+    private _button: HTMLElement | null = null;
+
+    constructor() {
+        super(ToggleButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return toggleButtonMeta;
+    }
+
+    initialize(): void {
+        this._button = document.createElement('gtk-toggle-button');
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        this._button.setAttribute('label', this.args.label as string);
+        this._button.toggleAttribute('active', this.args.active as boolean);
+        this._button.toggleAttribute('flat', this.args.flat as boolean);
+    }
+}
+
+export const ToggleButtonWebStories: WebStoryModule = { stories: [ToggleButtonWebStory] };

package/src/browser/controls/check-button.web.ts

@@ -0,0 +1,38 @@
+// Browser port of the Check Button story. Shares metadata with check-button.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { checkButtonMeta } from '../../controls/check-button.meta.js';
+
+export class CheckButtonWebStory extends StoryElement {
+    private _button: HTMLElement | null = null;
+
+    constructor() {
+        super(CheckButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return checkButtonMeta;
+    }
+
+    initialize(): void {
+        this._button = document.createElement('gtk-check-button');
+        this._apply();
+        this.addContent(this._button);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._button) return;
+        this._button.setAttribute('label', this.args.label as string);
+        // `checked` and `indeterminate`, not GtkCheckButton's `active` / `inconsistent`:
+        // the element wraps a real `<input>` and the stylesheet selects on these two.
+        this._button.toggleAttribute('checked', this.args.checked as boolean);
+        this._button.toggleAttribute('indeterminate', this.args.indeterminate as boolean);
+        this._button.toggleAttribute('disabled', this.args.disabled as boolean);
+    }
+}
+
+export const CheckButtonWebStories: WebStoryModule = { stories: [CheckButtonWebStory] };

package/src/browser/controls/gtk-spinner.web.ts

@@ -0,0 +1,39 @@
+// Browser port of the GTK Spinner story. Shares metadata with gtk-spinner.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { gtkSpinnerMeta } from '../../controls/gtk-spinner.meta.js';
+
+export class GtkSpinnerWebStory extends StoryElement {
+    private _spinner: HTMLElement | null = null;
+
+    constructor() {
+        super(GtkSpinnerWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return gtkSpinnerMeta;
+    }
+
+    initialize(): void {
+        this._spinner = document.createElement('gtk-spinner');
+        this._apply();
+        this.addContent(this._spinner);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._spinner) return;
+        // `GtkSpinner` has no size property either; a box is what sizes it (gtkspinner.c:110-123).
+        const size = String(this.args.size as number);
+        this._spinner.style.width = `${size}px`;
+        this._spinner.style.height = `${size}px`;
+        if (this.args.spinning as boolean) (this._spinner as HTMLElement & { start(): void }).start();
+        else (this._spinner as HTMLElement & { stop(): void }).stop();
+        this._spinner.toggleAttribute('disabled', this.args.disabled as boolean);
+    }
+}
+
+export const GtkSpinnerWebStories: WebStoryModule = { stories: [GtkSpinnerWebStory] };

package/src/browser/controls/level-bar.web.ts

@@ -0,0 +1,43 @@
+// Browser port of the Level Bar story. Shares metadata with level-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { levelBarMeta } from '../../controls/level-bar.meta.js';
+
+export class LevelBarWebStory extends StoryElement {
+    private _bar: HTMLElement | null = null;
+
+    constructor() {
+        super(LevelBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return levelBarMeta;
+    }
+
+    initialize(): void {
+        this._bar = document.createElement('gtk-level-bar');
+        this._apply();
+        this.addContent(this._bar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        const vertical = this.args.orientation === 'vertical';
+        this._bar.setAttribute('orientation', vertical ? 'vertical' : 'horizontal');
+        // A horizontal bar fills the width it is given and a vertical one the height; the
+        // stylesheet takes the cross-axis from the orientation, so only the axis needs one.
+        this._bar.style.width = vertical ? '' : '200px';
+        this._bar.style.height = vertical ? '120px' : '';
+        // A new `max-value` drags `value` down with it, so it goes first (gtklevelbar.c:1229).
+        this._bar.setAttribute('max-value', String(this.args.maxValue as number));
+        this._bar.setAttribute('mode', this.args.mode as string);
+        this._bar.setAttribute('value', String(this.args.value as number));
+        this._bar.toggleAttribute('inverted', this.args.inverted as boolean);
+    }
+}
+
+export const LevelBarWebStories: WebStoryModule = { stories: [LevelBarWebStory] };

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

@@ -0,0 +1,36 @@
+// Browser port of the Password Entry story. Shares metadata with password-entry.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { passwordEntryMeta } from '../../controls/password-entry.meta.js';
+
+export class PasswordEntryWebStory extends StoryElement {
+    private _entry: HTMLElement | null = null;
+
+    constructor() {
+        super(PasswordEntryWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return passwordEntryMeta;
+    }
+
+    initialize(): void {
+        this._entry = document.createElement('gtk-password-entry');
+        this._entry.style.minWidth = '240px';
+        this._apply();
+        this.addContent(this._entry);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._entry) return;
+        this._entry.toggleAttribute('show-peek-icon', this.args.showPeekIcon as boolean);
+        this._entry.setAttribute('placeholder', this.args.placeholderText as string);
+        this._entry.toggleAttribute('disabled', this.args.disabled as boolean);
+    }
+}
+
+export const PasswordEntryWebStories: WebStoryModule = { stories: [PasswordEntryWebStory] };

package/src/browser/controls/progress-bar.web.ts

@@ -0,0 +1,39 @@
+// Browser port of the Progress Bar story. Shares metadata with progress-bar.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { progressBarMeta } from '../../controls/progress-bar.meta.js';
+
+export class ProgressBarWebStory extends StoryElement {
+    private _bar: HTMLElement | null = null;
+
+    constructor() {
+        super(ProgressBarWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return progressBarMeta;
+    }
+
+    initialize(): void {
+        this._bar = document.createElement('gtk-progress-bar');
+        this._apply();
+        this.addContent(this._bar);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._bar) return;
+        // GTK's own order: `set_fraction` leaves activity mode and `pulse()` enters it, so
+        // `pulsing` is what decides (gtkprogressbar.c:791, :845).
+        this._bar.toggleAttribute('pulsing', this.args.pulsing as boolean);
+        this._bar.setAttribute('fraction', String(this.args.fraction as number));
+        this._bar.toggleAttribute('show-text', this.args.showText as boolean);
+        this._bar.toggleAttribute('inverted', this.args.inverted as boolean);
+        this._bar.toggleAttribute('osd', this.args.osd as boolean);
+    }
+}
+
+export const ProgressBarWebStories: WebStoryModule = { stories: [ProgressBarWebStory] };

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

@@ -0,0 +1,44 @@
+// Browser port of the Scale story. Shares metadata with scale.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { scaleMeta } from '../../controls/scale.meta.js';
+
+export class ScaleWebStory extends StoryElement {
+    private _scale: HTMLElement | null = null;
+
+    constructor() {
+        super(ScaleWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return scaleMeta;
+    }
+
+    initialize(): void {
+        this._scale = document.createElement('gtk-scale');
+        this._scale.style.width = '260px';
+        this._apply();
+        this.addContent(this._scale);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._scale) return;
+        this._scale.setAttribute('orientation', this.args.orientation as string);
+        this._scale.setAttribute('value-pos', this.args.valuePos as string);
+        this._scale.toggleAttribute('draw-value', this.args.drawValue as boolean);
+        this._scale.setAttribute('digits', String(this.args.digits as number));
+        this._scale.toggleAttribute('inverted', this.args.inverted as boolean);
+        // `has-origin` is TRUE by default, so it is the absence of the attribute that
+        // withdraws the highlight — the same inversion `GtkPasswordEntry.revealed` uses.
+        if (this.args.hasOrigin as boolean) this._scale.removeAttribute('has-origin');
+        else this._scale.setAttribute('has-origin', 'false');
+        this._scale.setAttribute('adjustment', '{"lower":0,"upper":100,"stepIncrement":1,"pageIncrement":10}');
+        this._scale.setAttribute('value', String(this.args.value as number));
+    }
+}
+
+export const ScaleWebStories: WebStoryModule = { stories: [ScaleWebStory] };

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

@@ -0,0 +1,49 @@
+// Browser port of the Search Entry story. Shares metadata with search-entry.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { searchEntryMeta } from '../../controls/search-entry.meta.js';
+
+export class SearchEntryWebStory extends StoryElement {
+    private _entry: HTMLElement | null = null;
+    private _label: HTMLElement | null = null;
+
+    constructor() {
+        super(SearchEntryWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return searchEntryMeta;
+    }
+
+    initialize(): void {
+        this._entry = document.createElement('gtk-search-entry');
+        this._entry.style.minWidth = '260px';
+        this._label = document.createElement('gtk-label');
+        this._label.className = 'dimmed';
+        this._label.textContent = 'search-changed has not fired yet';
+        this._entry.addEventListener('search-changed', (event) => {
+            const { value } = (event as CustomEvent).detail as { value: string };
+            if (this._label) this._label.textContent = `search-changed: "${value}"`;
+        });
+        this._apply();
+        const box = document.createElement('div');
+        box.style.display = 'flex';
+        box.style.flexDirection = 'column';
+        box.style.gap = '12px';
+        box.append(this._entry, this._label);
+        this.addContent(box);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._entry) return;
+        this._entry.setAttribute('search-delay', String(this.args.searchDelay as number));
+        this._entry.setAttribute('placeholder', this.args.placeholderText as string);
+        this._entry.toggleAttribute('disabled', this.args.disabled as boolean);
+    }
+}
+
+export const SearchEntryWebStories: WebStoryModule = { stories: [SearchEntryWebStory] };

package/src/browser/controls/spin-button.web.ts

@@ -0,0 +1,40 @@
+// Browser port of the Spin Button story. Shares metadata with spin-button.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { spinButtonMeta } from '../../controls/spin-button.meta.js';
+
+export class SpinButtonWebStory extends StoryElement {
+    private _spin: HTMLElement | null = null;
+
+    constructor() {
+        super(SpinButtonWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return spinButtonMeta;
+    }
+
+    initialize(): void {
+        this._spin = document.createElement('gtk-spin-button');
+        this._apply();
+        this.addContent(this._spin);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._spin) return;
+        this._spin.setAttribute('orientation', this.args.orientation as string);
+        this._spin.setAttribute('digits', String(this.args.digits as number));
+        this._spin.toggleAttribute('numeric', this.args.numeric as boolean);
+        this._spin.toggleAttribute('snap-to-ticks', this.args.snapToTicks as boolean);
+        this._spin.toggleAttribute('wrap', this.args.wrap as boolean);
+        this._spin.setAttribute('update-policy', this.args.updatePolicy as string);
+        this._spin.setAttribute('adjustment', '{"lower":0,"upper":10,"stepIncrement":1,"pageIncrement":2}');
+        this._spin.setAttribute('value', String(this.args.value as number));
+    }
+}
+
+export const SpinButtonWebStories: WebStoryModule = { stories: [SpinButtonWebStory] };

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

@@ -0,0 +1,38 @@
+// Browser port of the Switch story. Shares metadata with switch.story.ts.
+
+import { StoryElement, type StoryArgs, type StoryMeta, type WebStoryModule } from '@gjsify/adwaita-storybook';
+import { switchMeta } from '../../controls/switch.meta.js';
+
+export class SwitchWebStory extends StoryElement {
+    private _switch: HTMLElement | null = null;
+
+    constructor() {
+        super(SwitchWebStory.getMetadata(), 'Default');
+    }
+
+    static getMetadata(): StoryMeta {
+        return switchMeta;
+    }
+
+    initialize(): void {
+        this._switch = document.createElement('gtk-switch');
+        this._apply();
+        this.addContent(this._switch);
+    }
+
+    updateArgs(_args: StoryArgs): void {
+        this._apply();
+    }
+
+    private _apply(): void {
+        if (!this._switch) return;
+        // `active` first: the element's setter writes `state` too, which is the default
+        // `::state-set` handler, and a `state` written afterwards is the application's
+        // half of the delayed change (gtkswitch.c:558, :637-654).
+        this._switch.toggleAttribute('active', this.args.active as boolean);
+        this._switch.toggleAttribute('state', this.args.state as boolean);
+        this._switch.toggleAttribute('disabled', this.args.disabled as boolean);
+    }
+}
+
+export const SwitchWebStories: WebStoryModule = { stories: [SwitchWebStory] };