@gjsify/storybook 0.51.0 → 0.52.0

package/README.md

@@ -116,6 +116,16 @@ That is how `gjsify storybook --runtime node` proves the full Libadwaita gallery
 on Linux AND on Windows (the `--windowing` GTK bundle, no gvsbuild): CI
 `storybook-node-gi-bundle` feeds `gtk-smoke` and `windows-gtk-storybook`.
 
+**Both are `node-gi.yml` legs, so read the Windows half with its condition attached.**
+`windows-gtk-storybook` needs `windows`, and `node-gi.yml`'s `scope` job runs the Windows
+matrix only when `packages/node-gi/**` (or the consumer harness, the workflow itself, or
+`.github/scripts/**`) changed — plus every `workflow_dispatch` and the 03:17 UTC nightly,
+which run the full matrix by definition. So "renders on Windows" is a statement about the
+last run that EXECUTED that leg, not about this commit: on a consumer-only `main` push the
+leg is `skipped`, which is the same colour as green, and `ci-summary`'s gate-history table
+is what names the SHA where it last actually ran. The Linux `gtk-smoke` leg has no such
+caveat.
+
 ## Exports
 
 - `StoryWidget` — Adw.Bin base class; `fromMeta()`, `addContent()`, `initialize()`/`updateArgs()`/`teardown()` hooks

package/lib/esm/window.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import{StorybookAppearance as e,buildAppearanceDialog as t}from"./appearance.js";import n from"gi://Adw?version=1";import r from"gi://Gdk?version=4.0";import i from"gi://Gtk?version=4.0";import{StorybookController as a,bindControl as o}from"@gjsify/storybook-core";import s from"gi://GObject?version=2.0";function adwControlWidgetFactory(){return{text(e,t){let r=new n.EntryRow({title:e});t&&r.set_tooltip_text(t);let i=null;return r.connect(`changed`,()=>i?.(r.get_text())),{node:r,get:()=>r.get_text(),set:e=>r.set_text(e),onChange:e=>{i=e}}},boolean(e,t){let r=new n.SwitchRow({title:e,subtitle:t??``}),i=null;return r.connect(`notify::active`,()=>i?.(r.get_active())),{node:r,get:()=>r.get_active(),set:e=>r.set_active(e),onChange:e=>{i=e}}},number(e){let t=n.SpinRow.new_with_range(e.min??0,e.max??100,e.step??1);t.set_title(e.label||e.name),e.description&&t.set_subtitle(e.description);let r=null;return t.connect(`changed`,()=>r?.(t.get_value())),{node:t,get:()=>t.get_value(),set:e=>t.set_value(e),onChange:e=>{r=e}}},range(e){return buildRangeWidget(e)},select(e){return buildSelectWidget(e)},color(e,t){return buildColorWidget(e,t)}}}function buildRangeWidget(e){let t=e.min??0,n=e.max??100,r=e.step??1,a=typeof e.min==`number`?e.min:0,o=Number.isInteger(r)&&Number.isInteger(a),s=new i.Adjustment({lower:t,upper:n,step_increment:r,value:a});s.step_increment=r;let c=new i.ListBoxRow({selectable:!1,activatable:!1});c.add_css_class(`story-range-row`);let l=new i.Box({orientation:i.Orientation.VERTICAL,spacing:6,margin_top:12,margin_bottom:12,margin_start:12,margin_end:12}),u=new i.Box({orientation:i.Orientation.HORIZONTAL,spacing:12}),d=new i.Label({label:e.label||e.name,halign:i.Align.START,hexpand:!0,ellipsize:3});d.add_css_class(`heading`);let formatValue=e=>o?String(Math.round(e)):e.toFixed(2),f=new i.Label({label:formatValue(a),halign:i.Align.END});if(f.add_css_class(`numeric`),f.add_css_class(`dim-label`),u.append(d),u.append(f),l.append(u),e.description){let t=new i.Label({label:e.description,halign:i.Align.START,xalign:0,wrap:!0,max_width_chars:32});t.add_css_class(`caption`),t.add_css_class(`dim-label`),l.append(t)}let p=new i.Scale({orientation:i.Orientation.HORIZONTAL,adjustment:s,draw_value:!1,hexpand:!0}),m=null,h=!1;return p.connect(`value-changed`,()=>{if(h)return;let e=p.get_value();if(o){let t=Math.round(e);if(t!==e){p.set_value(t);return}e=t}f.set_label(formatValue(e)),m?.(e)}),l.append(p),c.set_child(l),{node:c,get:()=>p.get_value(),set:e=>{h=!0,p.set_value(e),h=!1,f.set_label(formatValue(e))},onChange:e=>{m=e}}}function buildSelectWidget(e){let t=e.options??[],r=i.StringList.new(t.map(e=>e.label)),a=new n.ComboRow({title:e.label||e.name,subtitle:e.description??``,model:r}),o=null;return a.connect(`notify::selected`,()=>o?.(a.get_selected())),{node:a,get:()=>a.get_selected(),set:e=>a.set_selected(e),onChange:e=>{o=e}}}function buildColorWidget(e,t){let a=new n.ActionRow({title:e,subtitle:t??``}),o=new i.ColorDialogButton({dialog:new i.ColorDialog({title:e}),valign:i.Align.CENTER});a.add_suffix(o),a.set_activatable_widget(o);let channel=e=>Math.round(Math.max(0,Math.min(1,e))*255).toString(16).padStart(2,`0`),rgbaToHex=e=>`#${channel(e.red)}${channel(e.green)}${channel(e.blue)}`,s=null,c=!1;return o.connect(`notify::rgba`,()=>{c||s?.(rgbaToHex(o.get_rgba()))}),{node:a,get:()=>rgbaToHex(o.get_rgba()),set:e=>{let t=new r.RGBA;t.parse(e)&&(c=!0,o.set_rgba(t),c=!1)},onChange:e=>{s=e}}}var c=class StorybookWindow extends n.ApplicationWindow{static{s.registerClass({GTypeName:`StorybookWindow`},StorybookWindow)}constructor(t){super(t),this._appearance=new e,this._controlRows=[],this._rowByTitle=new Map,this._onSelect=null,this._suppressSelect=!1,this.set_default_size(1200,800),this.set_size_request(360,320),this.set_title(`Storybook`),this._buildUI(),this._controller=new a(this,e=>this._buildControls(e)),this._sidebar_list.connect(`row-selected`,this._onRowSelected.bind(this)),this._show_controls_button.connect(`toggled`,this._onToggleControls.bind(this)),this._controls_split_view.set_show_sidebar(!0)}_onRowSelected(e,t){if(this._suppressSelect||!t)return;let n=t;n.storyWidget&&this._onSelect?.(n.storyWidget)}get controller(){return this._controller}_buildControls(e){let t=e.meta.controls;if(!Array.isArray(t))return[];let n=adwControlWidgetFactory(),r=[];for(let i of t){if(!i?.name||!i?.type){console.warn(`Invalid control configuration:`,i);continue}let t=o(e,i,n);t&&r.push(t)}return r}_buildUI(){this._sidebar_list=new i.ListBox({selection_mode:i.SelectionMode.SINGLE}),this._sidebar_list.add_css_class(`navigation-sidebar`);let e=new i.ScrolledWindow({hexpand:!0,vexpand:!0,child:this._sidebar_list}),r=new n.HeaderBar({title_widget:new n.WindowTitle({title:`Stories`}),show_end_title_buttons:!1}),a=new n.ToolbarView({content:e,top_bar_style:n.ToolbarStyle.FLAT});a.add_top_bar(r);let o=new n.NavigationPage({title:`Stories`,tag:`stories`,child:a});this._content_area=new n.Bin({hexpand:!0,vexpand:!0});let s=new i.ScrolledWindow({hexpand:!0,vexpand:!0,child:this._content_area});s.add_css_class(`sb-preview-area`),this._control_panel=new n.PreferencesGroup({title:`Controls`});let c=new n.PreferencesPage;c.add(this._control_panel);let l=new i.ScrolledWindow({vexpand:!0,child:c});this._controls_split_view=new n.OverlaySplitView({show_sidebar:!0,sidebar_position:i.PackType.END,min_sidebar_width:280,max_sidebar_width:360,content:s,sidebar:l,css_classes:[`storybook-controls`]}),this._preview_title=new n.WindowTitle({title:`Preview`}),this._show_controls_button=new i.ToggleButton({icon_name:`sidebar-show-right-symbolic`,tooltip_text:`Toggle Controls`,active:!0});let u=new n.HeaderBar({title_widget:this._preview_title});u.pack_end(this._show_controls_button);let d=new i.Button({icon_name:`applications-graphics-symbolic`,tooltip_text:`Appearance`});d.connect(`clicked`,()=>t(this._appearance).present(this)),u.pack_end(d);let f=new n.ToolbarView({content:this._controls_split_view,top_bar_style:n.ToolbarStyle.FLAT});f.add_top_bar(u);let p=new n.NavigationPage({title:`Preview`,tag:`preview`,child:f});this._main_split_view=new n.NavigationSplitView({min_sidebar_width:220,max_sidebar_width:320,sidebar:o,content:p}),this.set_content(this._main_split_view);let m=n.BreakpointCondition.parse(`max-width: 720sp`);if(m){let e=new n.Breakpoint({condition:m});e.connect(`apply`,()=>{this._main_split_view.collapsed=!0,this._controls_split_view.collapsed=!0}),e.connect(`unapply`,()=>{this._main_split_view.collapsed=!1,this._controls_split_view.collapsed=!1}),this.add_breakpoint(e)}}_onToggleControls(e){this._controls_split_view.set_show_sidebar(e.get_active())}populateSidebar(e){this._controller.mount(e,!0)}renderSidebar(e,t){this._onSelect=t,this._suppressSelect=!0,this._clearSidebar(),this._rowByTitle.clear();for(let t of e){this._addCategoryToSidebar(t.category);for(let{instance:e,name:n}of t.stories)this._addStoryToSidebar(e,n)}this._suppressSelect=!1}markSelected(e){let t=this._rowByTitle.get(e);t&&this._sidebar_list.get_selected_row()!==t&&(this._suppressSelect=!0,this._sidebar_list.select_row(t),this._suppressSelect=!1)}setPreviewTitle(e){this._preview_title.set_title(e)}showPreview(e){this._content_area.set_child(e),this._main_split_view.get_collapsed()&&this._main_split_view.set_show_content(!0)}renderControls(e){this._clearControlPanel();for(let t of e){let e=t.view;e instanceof n.PreferencesRow&&e.set_use_markup(!1),this._control_panel.add(e),this._controlRows.push(e)}this._show_controls_button.set_active(!0)}_clearSidebar(){let e=this._sidebar_list.get_first_child();for(;e;){let t=e.get_next_sibling();e.unparent(),e=t}}_addCategoryToSidebar(e){let t=new i.ListBoxRow({selectable:!1}),n=new i.Label({label:e,halign:i.Align.START,margin_top:10,margin_bottom:4,margin_start:12,margin_end:12});n.add_css_class(`heading`),n.add_css_class(`dim-label`),t.set_child(n),this._sidebar_list.append(t)}_addStoryToSidebar(e,t){let n=new i.ListBoxRow,r=new i.Label({label:t||`Unnamed Story`,halign:i.Align.START,margin_start:20,margin_top:6,margin_bottom:6});n.set_child(r),this._sidebar_list.append(n),n.storyWidget=e,this._rowByTitle.set(e.meta.title,n)}_clearControlPanel(){for(let e of this._controlRows)this._control_panel.remove(e);this._controlRows=[]}get activeStory(){return this._controller.activeStory}openStoryByTitle(e){return this._controller.openStoryByTitle(e)}setActiveArg(e,t){return this._controller.setActiveArg(e,t)}};s.type_ensure(c.$gtype);export{c as StorybookWindow};
+import"./_virtual/_rolldown/runtime.js";import{StorybookAppearance as e,buildAppearanceDialog as t}from"./appearance.js";import n from"./window2.js";import r from"gi://Adw?version=1";import i from"gi://Gdk?version=4.0";import a from"gi://Gtk?version=4.0";import{StorybookController as o,bindControl as s}from"@gjsify/storybook-core";import c from"gi://GObject?version=2.0";function adwControlWidgetFactory(){return{text(e,t){let n=new r.EntryRow({title:e});t&&n.set_tooltip_text(t);let i=null;return n.connect(`changed`,()=>i?.(n.get_text())),{node:n,get:()=>n.get_text(),set:e=>n.set_text(e),onChange:e=>{i=e}}},boolean(e,t){let n=new r.SwitchRow({title:e,subtitle:t??``}),i=null;return n.connect(`notify::active`,()=>i?.(n.get_active())),{node:n,get:()=>n.get_active(),set:e=>n.set_active(e),onChange:e=>{i=e}}},number(e){let t=r.SpinRow.new_with_range(e.min??0,e.max??100,e.step??1);t.set_title(e.label||e.name),e.description&&t.set_subtitle(e.description);let n=null;return t.connect(`changed`,()=>n?.(t.get_value())),{node:t,get:()=>t.get_value(),set:e=>t.set_value(e),onChange:e=>{n=e}}},range(e){return buildRangeWidget(e)},select(e){return buildSelectWidget(e)},color(e,t){return buildColorWidget(e,t)}}}function buildRangeWidget(e){let t=e.min??0,n=e.max??100,r=e.step??1,i=typeof e.min==`number`?e.min:0,o=Number.isInteger(r)&&Number.isInteger(i),s=new a.Adjustment({lower:t,upper:n,step_increment:r,value:i});s.step_increment=r;let c=new a.ListBoxRow({selectable:!1,activatable:!1});c.add_css_class(`story-range-row`);let l=new a.Box({orientation:a.Orientation.VERTICAL,spacing:6,margin_top:12,margin_bottom:12,margin_start:12,margin_end:12}),u=new a.Box({orientation:a.Orientation.HORIZONTAL,spacing:12}),d=new a.Label({label:e.label||e.name,halign:a.Align.START,hexpand:!0,ellipsize:3});d.add_css_class(`heading`);let formatValue=e=>o?String(Math.round(e)):e.toFixed(2),f=new a.Label({label:formatValue(i),halign:a.Align.END});if(f.add_css_class(`numeric`),f.add_css_class(`dim-label`),u.append(d),u.append(f),l.append(u),e.description){let t=new a.Label({label:e.description,halign:a.Align.START,xalign:0,wrap:!0,max_width_chars:32});t.add_css_class(`caption`),t.add_css_class(`dim-label`),l.append(t)}let p=new a.Scale({orientation:a.Orientation.HORIZONTAL,adjustment:s,draw_value:!1,hexpand:!0}),m=null,h=!1;return p.connect(`value-changed`,()=>{if(h)return;let e=p.get_value();if(o){let t=Math.round(e);if(t!==e){p.set_value(t);return}e=t}f.set_label(formatValue(e)),m?.(e)}),l.append(p),c.set_child(l),{node:c,get:()=>p.get_value(),set:e=>{h=!0,p.set_value(e),h=!1,f.set_label(formatValue(e))},onChange:e=>{m=e}}}function buildSelectWidget(e){let t=e.options??[],n=a.StringList.new(t.map(e=>e.label)),i=new r.ComboRow({title:e.label||e.name,subtitle:e.description??``,model:n}),o=null;return i.connect(`notify::selected`,()=>o?.(i.get_selected())),{node:i,get:()=>i.get_selected(),set:e=>i.set_selected(e),onChange:e=>{o=e}}}function buildColorWidget(e,t){let n=new r.ActionRow({title:e,subtitle:t??``}),o=new a.ColorDialogButton({dialog:new a.ColorDialog({title:e}),valign:a.Align.CENTER});n.add_suffix(o),n.set_activatable_widget(o);let channel=e=>Math.round(Math.max(0,Math.min(1,e))*255).toString(16).padStart(2,`0`),rgbaToHex=e=>`#${channel(e.red)}${channel(e.green)}${channel(e.blue)}`,s=null,c=!1;return o.connect(`notify::rgba`,()=>{c||s?.(rgbaToHex(o.get_rgba()))}),{node:n,get:()=>rgbaToHex(o.get_rgba()),set:e=>{let t=new i.RGBA;t.parse(e)&&(c=!0,o.set_rgba(t),c=!1)},onChange:e=>{s=e}}}var l=class StorybookWindow extends r.ApplicationWindow{static{c.registerClass({GTypeName:`StorybookWindow`,Template:n,InternalChildren:[`sidebar_list`,`content_area`,`control_panel`,`preview_title`,`show_controls_button`,`controls_split_view`,`main_split_view`]},StorybookWindow)}constructor(t){super(t),this._appearance=new e,this._controlRows=[],this._rowByTitle=new Map,this._onSelect=null,this._suppressSelect=!1,this._controller=new o(this,e=>this._buildControls(e))}_onRowSelected(e,t){if(this._suppressSelect||!t)return;let n=t;n.storyWidget&&this._onSelect?.(n.storyWidget)}get controller(){return this._controller}_buildControls(e){let t=e.meta.controls;if(!Array.isArray(t))return[];let n=adwControlWidgetFactory(),r=[];for(let i of t){if(!i?.name||!i?.type){console.warn(`Invalid control configuration:`,i);continue}let t=s(e,i,n);t&&r.push(t)}return r}_onAppearanceClicked(){t(this._appearance).present(this)}_onToggleControls(e){this._controls_split_view.set_show_sidebar(e.get_active())}populateSidebar(e){this._controller.mount(e,!0)}renderSidebar(e,t){this._onSelect=t,this._suppressSelect=!0,this._clearSidebar(),this._rowByTitle.clear();for(let t of e){this._addCategoryToSidebar(t.category);for(let{instance:e,name:n}of t.stories)this._addStoryToSidebar(e,n)}this._suppressSelect=!1}markSelected(e){let t=this._rowByTitle.get(e);t&&this._sidebar_list.get_selected_row()!==t&&(this._suppressSelect=!0,this._sidebar_list.select_row(t),this._suppressSelect=!1)}setPreviewTitle(e){this._preview_title.set_title(e)}showPreview(e){this._content_area.set_child(e),this._main_split_view.get_collapsed()&&this._main_split_view.set_show_content(!0)}renderControls(e){this._clearControlPanel();for(let t of e){let e=t.view;e instanceof r.PreferencesRow&&e.set_use_markup(!1),this._control_panel.add(e),this._controlRows.push(e)}this._show_controls_button.set_active(!0)}_clearSidebar(){let e=this._sidebar_list.get_first_child();for(;e;){let t=e.get_next_sibling();e.unparent(),e=t}}_addCategoryToSidebar(e){let t=new a.ListBoxRow({selectable:!1}),n=new a.Label({label:e,halign:a.Align.START,margin_top:10,margin_bottom:4,margin_start:12,margin_end:12});n.add_css_class(`heading`),n.add_css_class(`dim-label`),t.set_child(n),this._sidebar_list.append(t)}_addStoryToSidebar(e,t){let n=new a.ListBoxRow,r=new a.Label({label:t||`Unnamed Story`,halign:a.Align.START,margin_start:20,margin_top:6,margin_bottom:6});n.set_child(r),this._sidebar_list.append(n),n.storyWidget=e,this._rowByTitle.set(e.meta.title,n)}_clearControlPanel(){for(let e of this._controlRows)this._control_panel.remove(e);this._controlRows=[]}get activeStory(){return this._controller.activeStory}openStoryByTitle(e){return this._controller.openStoryByTitle(e)}setActiveArg(e,t){return this._controller.setActiveArg(e,t)}};c.type_ensure(l.$gtype);export{l as StorybookWindow};

package/lib/esm/window2.js

@@ -0,0 +1,141 @@
+var e=`<?xml version="1.0" encoding="UTF-8"?>
+<!--
+DO NOT EDIT!
+This file was @generated by blueprint-compiler. Instead, edit the
+corresponding .blp file and regenerate this file with blueprint-compiler.
+-->
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <template class="StorybookWindow" parent="AdwApplicationWindow">
+    <property name="default-width">1200</property>
+    <property name="default-height">800</property>
+    <property name="width-request">360</property>
+    <property name="height-request">320</property>
+    <property name="title">Storybook</property>
+    <property name="content">
+      <object class="AdwNavigationSplitView" id="main_split_view">
+        <property name="min-sidebar-width">220</property>
+        <property name="max-sidebar-width">320</property>
+        <property name="sidebar">
+          <object class="AdwNavigationPage">
+            <property name="title">Stories</property>
+            <property name="tag">stories</property>
+            <property name="child">
+              <object class="AdwToolbarView">
+                <property name="top-bar-style">0</property>
+                <child type="top">
+                  <object class="AdwHeaderBar">
+                    <property name="show-end-title-buttons">false</property>
+                    <property name="title-widget">
+                      <object class="AdwWindowTitle">
+                        <property name="title">Stories</property>
+                      </object>
+                    </property>
+                  </object>
+                </child>
+                <property name="content">
+                  <object class="GtkScrolledWindow">
+                    <property name="hexpand">true</property>
+                    <property name="vexpand">true</property>
+                    <child>
+                      <object class="GtkListBox" id="sidebar_list">
+                        <property name="selection-mode">1</property>
+                        <signal name="row-selected" handler="_onRowSelected"/>
+                        <style>
+                          <class name="navigation-sidebar"/>
+                        </style>
+                      </object>
+                    </child>
+                  </object>
+                </property>
+              </object>
+            </property>
+          </object>
+        </property>
+        <property name="content">
+          <object class="AdwNavigationPage">
+            <property name="title">Preview</property>
+            <property name="tag">preview</property>
+            <property name="child">
+              <object class="AdwToolbarView">
+                <property name="top-bar-style">0</property>
+                <child type="top">
+                  <object class="AdwHeaderBar">
+                    <property name="title-widget">
+                      <object class="AdwWindowTitle" id="preview_title">
+                        <property name="title">Preview</property>
+                      </object>
+                    </property>
+                    <child type="end">
+                      <object class="GtkToggleButton" id="show_controls_button">
+                        <property name="icon-name">sidebar-show-right-symbolic</property>
+                        <property name="tooltip-text">Toggle Controls</property>
+                        <property name="active">true</property>
+                        <signal name="toggled" handler="_onToggleControls"/>
+                      </object>
+                    </child>
+                    <child type="end">
+                      <object class="GtkButton">
+                        <property name="icon-name">applications-graphics-symbolic</property>
+                        <property name="tooltip-text">Appearance</property>
+                        <signal name="clicked" handler="_onAppearanceClicked"/>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+                <property name="content">
+                  <object class="AdwOverlaySplitView" id="controls_split_view">
+                    <property name="show-sidebar">true</property>
+                    <property name="sidebar-position">1</property>
+                    <property name="min-sidebar-width">280</property>
+                    <property name="max-sidebar-width">360</property>
+                    <style>
+                      <class name="storybook-controls"/>
+                    </style>
+                    <property name="content">
+                      <object class="GtkScrolledWindow">
+                        <property name="hexpand">true</property>
+                        <property name="vexpand">true</property>
+                        <style>
+                          <class name="sb-preview-area"/>
+                        </style>
+                        <child>
+                          <object class="AdwBin" id="content_area">
+                            <property name="hexpand">true</property>
+                            <property name="vexpand">true</property>
+                          </object>
+                        </child>
+                      </object>
+                    </property>
+                    <property name="sidebar">
+                      <object class="GtkScrolledWindow">
+                        <property name="vexpand">true</property>
+                        <child>
+                          <object class="AdwPreferencesPage">
+                            <child>
+                              <object class="AdwPreferencesGroup" id="control_panel">
+                                <property name="title">Controls</property>
+                              </object>
+                            </child>
+                          </object>
+                        </child>
+                      </object>
+                    </property>
+                  </object>
+                </property>
+              </object>
+            </property>
+          </object>
+        </property>
+      </object>
+    </property>
+    <child>
+      <object class="AdwBreakpoint">
+        <condition>max-width: 720sp</condition>
+        <setter object="main_split_view" property="collapsed">true</setter>
+        <setter object="controls_split_view" property="collapsed">true</setter>
+      </object>
+    </child>
+  </template>
+</interface>
+`;export{e as default};

package/lib/types/window.d.ts

@@ -1,4 +1,5 @@
 import Adw from 'gi://Adw?version=1';
+import Gtk from 'gi://Gtk?version=4.0';
 import type { StoryArgValue } from '@gjsify/stories';
 import { type CategoryGroup, type ControlRow, StorybookController, type StorybookView } from '@gjsify/storybook-core';
 import type { StoryModule, StoryWidget } from './story-widget.js';
@@ -15,22 +16,22 @@ export declare class StorybookWindow extends Adw.ApplicationWindow implements St
     private _control_panel;
     private _preview_title;
     private _show_controls_button;
-    /** Colour scheme + accent for the whole storybook, not for one story. */
-    private _appearance;
     private _controls_split_view;
     private _main_split_view;
+    /** Colour scheme + accent for the whole storybook, not for one story. */
+    private _appearance;
     private _controlRows;
     private _rowByTitle;
     private _controller;
     private _onSelect;
     private _suppressSelect;
     constructor(params: Partial<Adw.ApplicationWindow.ConstructorProps>);
-    private _onRowSelected;
+    protected _onRowSelected(_listbox: Gtk.ListBox, row: Gtk.ListBoxRow | null): void;
     /** The controller driving this window (exposed for the devtools extension). */
     get controller(): StorybookController<StoryWidget>;
     private _buildControls;
-    private _buildUI;
-    private _onToggleControls;
+    protected _onAppearanceClicked(): void;
+    protected _onToggleControls(button: Gtk.ToggleButton): void;
     /**
      * Populate the sidebar with story modules. Registers + instantiates them via
      * the controller (which renders the sidebar through this view's

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/storybook",
-    "version": "0.51.0",
+    "version": "0.52.0",
     "description": "Reusable GTK/Adwaita storybook for GJS — author *.story.ts and browse them in a generic component explorer",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -34,22 +34,23 @@
         "ui"
     ],
     "dependencies": {
-        "@girs/adw-1": "5.0.0",
-        "@girs/gdk-4.0": "5.0.0",
-        "@girs/gio-2.0": "5.0.0",
-        "@girs/gjs": "5.0.0",
-        "@girs/glib-2.0": "5.0.0",
-        "@girs/gobject-2.0": "5.0.0",
-        "@girs/gtk-4.0": "5.0.0",
-        "@gjsify/adwaita-app": "^0.51.0",
-        "@gjsify/adwaita-core": "^0.51.0",
-        "@gjsify/devtools": "^0.51.0",
-        "@gjsify/stories": "^0.51.0",
-        "@gjsify/storybook-core": "^0.51.0"
+        "@girs/adw-1": "5.4.0",
+        "@girs/gdk-4.0": "5.4.0",
+        "@girs/gio-2.0": "5.4.0",
+        "@girs/gjs": "5.4.0",
+        "@girs/glib-2.0": "5.4.0",
+        "@girs/gobject-2.0": "5.4.0",
+        "@girs/gtk-4.0": "5.4.0",
+        "@gjsify/adwaita-app": "^0.52.0",
+        "@gjsify/adwaita-core": "^0.52.0",
+        "@gjsify/devtools": "^0.52.0",
+        "@gjsify/stories": "^0.52.0",
+        "@gjsify/storybook-core": "^0.52.0"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.51.0",
-        "@gjsify/unit": "^0.51.0",
+        "@gjsify/cli": "^0.52.0",
+        "@gjsify/unit": "^0.52.0",
+        "@gjsify/vite-plugin-blueprint": "^0.52.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },