@gjsify/storybook 0.38.1 → 0.40.0

package/lib/esm/styles.js

@@ -87,13 +87,35 @@ const e=`
     background-color: @window_bg_color;
 }
 
-/* Subtle dashed frame around the live preview so the widget's bounds stay
-   locatable even when it is transparent or in an empty state (e.g. a collapsed
-   bottom sheet, a status page, a bare button). @window_fg_color flips with the
-   theme (alpha(currentColor, …) does not resolve in a Gtk.CssProvider). */
+/* The preview AREA carries the tint, not a box inside it.
+
+   The requirement is unchanged — the preview must stay LOCATABLE when the widget on
+   it is transparent or in an empty state (a collapsed bottom sheet, a status page, a
+   bare button), which is why a frame was here at all. A dashed border met it by
+   drawing attention to itself; a box with a surface met it by floating in the pane
+   with no edge, which is how it read. The whole area meets it by being the surface,
+   which is what the widget gallery on the website does: there the tint is on the
+   preview panel and the stage within it is only centring.
+
+   BOTH SCHEMES, WITHOUT BRANCHING. A Gtk.CssProvider string cannot ask which colour
+   scheme is active, so the tint is named rather than spelled out: @accent_color is
+   libadwaita's STANDALONE accent, defined as the accent moved to a lightness that
+   reads against the current scheme's background (oklab min(l, 0.5) in light,
+   max(l, 0.85) in dark — _colors.scss:25,88). Correct in both by construction, and it
+   follows a runtime accent, so the area is never blue while the widgets are orange.
+   The website hardcodes #3584e4 / #78aeed for those two states, which is this name
+   resolved by hand.
+
+   The purple counter-tint has no named equivalent and stays a literal, as on the
+   website — decoration, not a role, and the same hue in both schemes there too. */
+.sb-preview-area {
+    background-image:
+        radial-gradient(circle at 0% 0%, alpha(@accent_color, 0.07), transparent 45%),
+        radial-gradient(circle at 100% 100%, alpha(#926ee4, 0.06), transparent 45%);
+}
+
+/* Breathing room only. No radius and no surface: nothing here is a box any more. */
 .story-stage {
-    border: 1px dashed alpha(@window_fg_color, 0.28);
-    border-radius: 12px;
     padding: 18px;
 }
 `;export{e as STORYBOOK_CSS};

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"@girs/adw-1";import r from"@girs/gdk-4.0";import i from"@girs/gtk-4.0";import{StorybookController as a,bindControl as o}from"@gjsify/storybook-core";import s from"@girs/gobject-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});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"@girs/adw-1";import r from"@girs/gdk-4.0";import i from"@girs/gtk-4.0";import{StorybookController as a,bindControl as o}from"@gjsify/storybook-core";import s from"@girs/gobject-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};

package/lib/types/styles.d.ts

@@ -1 +1 @@
-export declare const STORYBOOK_CSS = "\n/* Appearance dialog \u2014 round swatches with a selection ring, the shape GNOME's own\n   appearance switcher uses. Adapted from Learn6502's theme-mode-selector.css and\n   accent-color-selector.css (JumpLink/easy6502, MIT).\n\n   The inner `radio` indicator is switched off because the swatch IS the\n   indicator: a check mark drawn on top of a colour reads as two competing\n   signals, and the ring already says which one is selected.\n   `background-clip: content-box` is what keeps the ring outside the fill rather\n   than tinting it. */\n.storybook-swatch {\n    min-width: 24px;\n    min-height: 24px;\n    padding: 6px;\n    border-radius: 9999px;\n    background-clip: content-box;\n    background-image: none;\n    box-shadow: inset 0 0 0 3px transparent;\n}\n.storybook-swatch:checked {\n    box-shadow: inset 0 0 0 3px var(--accent-bg-color);\n}\n.storybook-swatch radio {\n    -gtk-icon-source: none;\n    border: none;\n    background: none;\n    box-shadow: none;\n    min-width: 12px;\n    min-height: 12px;\n    padding: 0;\n    transform: none;\n}\n/* Desaturated rather than merely dimmed: while the accent follows the desktop the\n   palette has to read as unavailable, not as nine slightly faded choices. */\n.storybook-swatch:disabled {\n    filter: saturate(0.4) brightness(1.05);\n    opacity: 0.7;\n}\n/* The scheme swatches are larger \u2014 they are the dialog's primary choice. */\n.storybook-swatch.storybook-scheme-swatch {\n    min-width: 44px;\n    min-height: 44px;\n}\n/* \"Follow system\" is drawn as the two schemes meeting on a diagonal, so the option\n   looks like what it does instead of needing a word for it. */\n.storybook-swatch.storybook-scheme-system {\n    background-image: linear-gradient(to bottom right, #f6f5f4 49.99%, #241f31 50.01%);\n}\n.storybook-swatch.storybook-scheme-light {\n    background-color: #f6f5f4;\n}\n.storybook-swatch.storybook-scheme-dark {\n    background-color: #241f31;\n}\n/* Squares the top corners so a swatch card sits flush under the row it belongs to,\n   instead of the two reading as separate cards with a seam between them. */\n.storybook-card-attached {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n}\n/* \u2026and the OTHER half, which squaring only the card cannot do: the row above lives\n   in the group's .boxed-list, whose own bottom corners are still round, so the two\n   met with a notch at each end. Both sides have to be squared for the join to read\n   as one list. The transparent bottom border keeps the boxed-list's height where it\n   was, so squaring it does not shift the card up by a pixel.\n   Adapted from Learn6502's views/preferences.dialog.css (JumpLink/easy6502, MIT). */\n.storybook-attached-group .boxed-list {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom: 1px solid transparent;\n}\n\n/* Range-control card in the controls sidebar \u2014 keeps the label + description\n   from being squashed into a single column when the sidebar is narrow. */\n.story-range-row {\n    padding: 0;\n}\n.story-range-row > box {\n    border-radius: 12px;\n}\n\n/* Controls panel shares the window (story) background; only the left\n   navigation sidebar keeps a distinct shade. The overlay-split-view sidebar is\n   otherwise drawn on the sidebar shade \u2014 flatten it onto the window colour. */\n.storybook-controls > .sidebar,\n.storybook-controls > .sidebar > * {\n    background-color: @window_bg_color;\n}\n\n/* Subtle dashed frame around the live preview so the widget's bounds stay\n   locatable even when it is transparent or in an empty state (e.g. a collapsed\n   bottom sheet, a status page, a bare button). @window_fg_color flips with the\n   theme (alpha(currentColor, \u2026) does not resolve in a Gtk.CssProvider). */\n.story-stage {\n    border: 1px dashed alpha(@window_fg_color, 0.28);\n    border-radius: 12px;\n    padding: 18px;\n}\n";
+export declare const STORYBOOK_CSS = "\n/* Appearance dialog \u2014 round swatches with a selection ring, the shape GNOME's own\n   appearance switcher uses. Adapted from Learn6502's theme-mode-selector.css and\n   accent-color-selector.css (JumpLink/easy6502, MIT).\n\n   The inner `radio` indicator is switched off because the swatch IS the\n   indicator: a check mark drawn on top of a colour reads as two competing\n   signals, and the ring already says which one is selected.\n   `background-clip: content-box` is what keeps the ring outside the fill rather\n   than tinting it. */\n.storybook-swatch {\n    min-width: 24px;\n    min-height: 24px;\n    padding: 6px;\n    border-radius: 9999px;\n    background-clip: content-box;\n    background-image: none;\n    box-shadow: inset 0 0 0 3px transparent;\n}\n.storybook-swatch:checked {\n    box-shadow: inset 0 0 0 3px var(--accent-bg-color);\n}\n.storybook-swatch radio {\n    -gtk-icon-source: none;\n    border: none;\n    background: none;\n    box-shadow: none;\n    min-width: 12px;\n    min-height: 12px;\n    padding: 0;\n    transform: none;\n}\n/* Desaturated rather than merely dimmed: while the accent follows the desktop the\n   palette has to read as unavailable, not as nine slightly faded choices. */\n.storybook-swatch:disabled {\n    filter: saturate(0.4) brightness(1.05);\n    opacity: 0.7;\n}\n/* The scheme swatches are larger \u2014 they are the dialog's primary choice. */\n.storybook-swatch.storybook-scheme-swatch {\n    min-width: 44px;\n    min-height: 44px;\n}\n/* \"Follow system\" is drawn as the two schemes meeting on a diagonal, so the option\n   looks like what it does instead of needing a word for it. */\n.storybook-swatch.storybook-scheme-system {\n    background-image: linear-gradient(to bottom right, #f6f5f4 49.99%, #241f31 50.01%);\n}\n.storybook-swatch.storybook-scheme-light {\n    background-color: #f6f5f4;\n}\n.storybook-swatch.storybook-scheme-dark {\n    background-color: #241f31;\n}\n/* Squares the top corners so a swatch card sits flush under the row it belongs to,\n   instead of the two reading as separate cards with a seam between them. */\n.storybook-card-attached {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n}\n/* \u2026and the OTHER half, which squaring only the card cannot do: the row above lives\n   in the group's .boxed-list, whose own bottom corners are still round, so the two\n   met with a notch at each end. Both sides have to be squared for the join to read\n   as one list. The transparent bottom border keeps the boxed-list's height where it\n   was, so squaring it does not shift the card up by a pixel.\n   Adapted from Learn6502's views/preferences.dialog.css (JumpLink/easy6502, MIT). */\n.storybook-attached-group .boxed-list {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom: 1px solid transparent;\n}\n\n/* Range-control card in the controls sidebar \u2014 keeps the label + description\n   from being squashed into a single column when the sidebar is narrow. */\n.story-range-row {\n    padding: 0;\n}\n.story-range-row > box {\n    border-radius: 12px;\n}\n\n/* Controls panel shares the window (story) background; only the left\n   navigation sidebar keeps a distinct shade. The overlay-split-view sidebar is\n   otherwise drawn on the sidebar shade \u2014 flatten it onto the window colour. */\n.storybook-controls > .sidebar,\n.storybook-controls > .sidebar > * {\n    background-color: @window_bg_color;\n}\n\n/* The preview AREA carries the tint, not a box inside it.\n\n   The requirement is unchanged \u2014 the preview must stay LOCATABLE when the widget on\n   it is transparent or in an empty state (a collapsed bottom sheet, a status page, a\n   bare button), which is why a frame was here at all. A dashed border met it by\n   drawing attention to itself; a box with a surface met it by floating in the pane\n   with no edge, which is how it read. The whole area meets it by being the surface,\n   which is what the widget gallery on the website does: there the tint is on the\n   preview panel and the stage within it is only centring.\n\n   BOTH SCHEMES, WITHOUT BRANCHING. A Gtk.CssProvider string cannot ask which colour\n   scheme is active, so the tint is named rather than spelled out: @accent_color is\n   libadwaita's STANDALONE accent, defined as the accent moved to a lightness that\n   reads against the current scheme's background (oklab min(l, 0.5) in light,\n   max(l, 0.85) in dark \u2014 _colors.scss:25,88). Correct in both by construction, and it\n   follows a runtime accent, so the area is never blue while the widgets are orange.\n   The website hardcodes #3584e4 / #78aeed for those two states, which is this name\n   resolved by hand.\n\n   The purple counter-tint has no named equivalent and stays a literal, as on the\n   website \u2014 decoration, not a role, and the same hue in both schemes there too. */\n.sb-preview-area {\n    background-image:\n        radial-gradient(circle at 0% 0%, alpha(@accent_color, 0.07), transparent 45%),\n        radial-gradient(circle at 100% 100%, alpha(#926ee4, 0.06), transparent 45%);\n}\n\n/* Breathing room only. No radius and no surface: nothing here is a box any more. */\n.story-stage {\n    padding: 18px;\n}\n";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/storybook",
-    "version": "0.38.1",
+    "version": "0.40.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",
@@ -41,15 +41,15 @@
         "@girs/glib-2.0": "^4.1.0",
         "@girs/gobject-2.0": "^4.1.0",
         "@girs/gtk-4.0": "^4.1.0",
-        "@gjsify/adwaita-app": "^0.38.1",
-        "@gjsify/adwaita-core": "^0.38.1",
-        "@gjsify/devtools": "^0.38.1",
-        "@gjsify/stories": "^0.38.1",
-        "@gjsify/storybook-core": "^0.38.1"
+        "@gjsify/adwaita-app": "^0.40.0",
+        "@gjsify/adwaita-core": "^0.40.0",
+        "@gjsify/devtools": "^0.40.0",
+        "@gjsify/stories": "^0.40.0",
+        "@gjsify/storybook-core": "^0.40.0"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.38.1",
-        "@gjsify/unit": "^0.38.1",
+        "@gjsify/cli": "^0.40.0",
+        "@gjsify/unit": "^0.40.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"
     },