@gjsify/storybook-nativescript 0.44.0 → 0.46.0

package/lib/esm/app.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import{StorybookNsAppearance as e,buildAppearanceDialog as t,installAppearanceDialog as n}from"./appearance.js";import{createControlRow as r}from"./controls.js";import{StorybookController as i}from"@gjsify/storybook-core";import{AdwBreakpoint as a,AdwHeaderBar as o,AdwImageButton as s,AdwNavigationSplitView as c,AdwOverlaySplitView as l,AdwPreferencesGroup as u,AdwToolbarView as d,AdwWindowTitle as f,addBreakpoints as p,attachRowPressFeedback as m,setAdwaitaColorScheme as h}from"@gjsify/adwaita-nativescript";import{colorSelectSymbolic as g,goPreviousSymbolic as _,sidebarShowRightSymbolic as v}from"@gjsify/adwaita-icons/actions";import{Label as y,Screen as b,ScrollView as x,StackLayout as S}from"@nativescript/core";var StorybookNativeApp=class{_controller=new i(this,e=>this._buildControls(e));_options;root;_listColumn;_previewSlot;_previewTitle;_controlsGroup;_controlsSplit;_backButton;_appearance=new e;_appearanceDialog=null;_rowByTitle=new Map;_collapsed=!0;_disposeBreakpoint=null;constructor(e){this._options=e,this.root=new c,this._collapsed=!this._isWideWidth(b.mainScreen?.widthDIPs??0),this.root.collapsed=this._collapsed,this.root.className=`sb-window`}_isWideWidth(e){return e>=720}mount(){return this._buildUI(),this._controller.mount(this._options.stories,this._options.openFirst!==!1),this._wireColorScheme(),this._wireBreakpoint(),this._appearanceDialog||(this._appearanceDialog=t(this._appearance),n(this.root,this._appearanceDialog)),this.root}_presentAppearance(){this._appearanceDialog?.present()}_wireBreakpoint(){let e=new a(`max-width: 720sp`,{onApply:()=>this._applyLayoutMode(!0),onUnapply:()=>this._applyLayoutMode(!1)});this._disposeBreakpoint=p(this.root,[e])}_applyLayoutMode(e){e===this._collapsed&&this.root.collapsed===e||(this._collapsed=e,this.root.collapsed=e,this._controlsSplit.collapsed=e,this.root.showSidebarPane(),this._backButton.visibility=e?`visible`:`collapse`)}get activeStory(){return this._controller.activeStory}listStories(){return this._controller.listStories()}openStoryByTitle(e){return this._controller.openStoryByTitle(e)}getCurrentStory(){return this._controller.getCurrentStory()}setActiveArg(e,t){return this._controller.setActiveArg(e,t)}get controller(){return this._controller}_wireColorScheme(){let e=this._options.application;e?.systemAppearance&&h(e.systemAppearance()===`dark`?`dark`:`light`)}renderSidebar(e,t){this._listColumn.removeChildren(),this._rowByTitle.clear();for(let{category:n,stories:r}of e){let e=new y;e.text=n,e.className=`sb-category`,this._listColumn.addChild(e);for(let{instance:e,name:n}of r){let r=new S;r.orientation=`vertical`,r.className=`sb-story-row`;let i=new y;i.text=n,i.className=`sb-story-row-label`,r.addChild(i),m(r),r.addEventListener(`tap`,()=>{t(e),this._collapsed&&this.root.hideSidebarPane()}),this._listColumn.addChild(r),this._rowByTitle.set(e.meta.title,r)}}}markSelected(e){for(let[t,n]of this._rowByTitle)n.className=t===e?`sb-story-row sb-story-row-selected`:`sb-story-row`}setPreviewTitle(e){this._previewTitle.title=e}showPreview(e){this._previewSlot.removeChildren(),this._previewSlot.addChild(e.view)}renderControls(e){this._controlsGroup.listbox.removeChildren();for(let t of e)this._controlsGroup.addRow(t.view)}_buildControls(e){let t=[],n=e.meta.controls;if(Array.isArray(n))for(let i of n){if(!i?.name||!i?.type){console.warn(`Invalid control configuration:`,i);continue}let n=r(e,i);n&&t.push(n)}return t}_buildUI(){let e=new d;e.className=`${e.className} sb-sidebar-pane`.trim();let t=new o;t.className=`${t.className} sb-sidebar-header`.trim();let n=new f;n.title=this._options.title??`Stories`,t.setTitleWidget(n),e.addTopBar(t),this._listColumn=new S,this._listColumn.orientation=`vertical`,this._listColumn.className=`sb-sidebar-list`;let r=new x;r.className=`sb-sidebar-scroll`,r.content=this._listColumn,e.setContent(r),this.root.setSidebar(e);let i=new d;i.className=`${i.className} sb-content-pane`.trim();let a=new o;a.className=`${a.className} sb-detail-header`.trim();let c=new s;c.icon=_,c.className=`${c.className} sb-back-button`.trim(),c.addEventListener(`tap`,()=>this.root.showSidebarPane()),c.visibility=this._collapsed?`visible`:`collapse`,this._backButton=c,a.packStart(c),this._previewTitle=new f,this._previewTitle.title=`Preview`,a.setTitleWidget(this._previewTitle);let p=new s;p.icon=v,p.className=`${p.className} sb-controls-toggle`.trim(),p.addEventListener(`tap`,()=>{this._controlsSplit.showSidebar=!this._controlsSplit.showSidebar});let m=new s;m.icon=g,m.className=`${m.className} sb-appearance-button`.trim(),m.addEventListener(`tap`,()=>this._presentAppearance()),a.packEnd(m),a.packEnd(p),i.addTopBar(a),this._controlsSplit=new l,this._controlsSplit.collapsed=this._collapsed,this._controlsSplit.sidebarPosition=`end`,this._controlsSplit.sidebarWidth=320,this._controlsSplit.className=`${this._controlsSplit.className} sb-controls-split`.trim(),this._previewSlot=new S,this._previewSlot.orientation=`vertical`,this._previewSlot.className=`sb-preview-pane`;let h=new x;h.className=`sb-preview-scroll`,h.content=this._previewSlot,this._controlsSplit.setContent(h),this._controlsGroup=new u,this._controlsGroup.title=`Controls`,this._controlsGroup.className=`${this._controlsGroup.className} sb-controls-group`.trim();let y=new x;y.className=`sb-controls-scroll`,y.content=this._controlsGroup,this._controlsSplit.setSidebar(y),i.setContent(this._controlsSplit),this.root.setContent(i),this.root.showSidebarPane()}};function runStorybook(e){let t=new StorybookNativeApp(e);return t.mount(),t}export{StorybookNativeApp,runStorybook};
+import"./_virtual/_rolldown/runtime.js";import{StorybookNsAppearance as e,buildAppearanceDialog as t,installAppearanceDialog as n}from"./appearance.js";import{createControlRow as r}from"./controls.js";import{StorybookController as i}from"@gjsify/storybook-core";import{AdwBreakpoint as a,AdwHeaderBar as o,AdwImageButton as s,AdwNavigationSplitView as c,AdwOverlaySplitView as l,AdwPreferencesGroup as u,AdwToolbarView as d,AdwWindowTitle as f,addBreakpoints as p,attachRowPressFeedback as m,setAdwaitaColorScheme as h}from"@gjsify/adwaita-nativescript";import{colorSelectSymbolic as g,goPreviousSymbolic as _,sidebarShowRightSymbolic as v}from"@gjsify/adwaita-icons/actions";import{Label as y,Screen as b,ScrollView as x,StackLayout as S}from"@nativescript/core";var StorybookNativeApp=class{_controller=new i(this,e=>this._buildControls(e));_options;root;_listColumn;_previewSlot;_previewTitle;_controlsGroup;_controlsSplit;_backButton;_appearance=new e;_appearanceDialog=null;_rowByTitle=new Map;_collapsed=!0;_disposeBreakpoint=null;constructor(e){this._options=e,this.root=new c,this._collapsed=!this._isWideWidth(b.mainScreen?.widthDIPs??0),this.root.collapsed=this._collapsed,this.root.className=`sb-window`}_isWideWidth(e){return e>=720}mount(){return this._buildUI(),this._controller.mount(this._options.stories,this._options.openFirst!==!1),this._wireColorScheme(),this._wireBreakpoint(),this._appearanceDialog||(this._appearanceDialog=t(this._appearance),n(this.root,this._appearanceDialog)),this.root}_presentAppearance(){this._appearanceDialog?.present()}_wireBreakpoint(){let e=new a(`max-width: 720sp`,{onApply:()=>this._applyLayoutMode(!0),onUnapply:()=>this._applyLayoutMode(!1)});this._disposeBreakpoint=p(this.root,[e])}_applyLayoutMode(e){e===this._collapsed&&this.root.collapsed===e||(this._collapsed=e,this.root.collapsed=e,this._controlsSplit.collapsed=e,this.root.showSidebarPane(),this._backButton.visibility=e?`visible`:`collapse`)}get activeStory(){return this._controller.activeStory}listStories(){return this._controller.listStories()}openStoryByTitle(e){return this._controller.openStoryByTitle(e)}getCurrentStory(){return this._controller.getCurrentStory()}setActiveArg(e,t){return this._controller.setActiveArg(e,t)}get controller(){return this._controller}_wireColorScheme(){let e=this._options.application;e?.systemAppearance&&h(e.systemAppearance()===`dark`?`dark`:`light`)}renderSidebar(e,t){this._listColumn.removeChildren(),this._rowByTitle.clear();for(let{category:n,stories:r}of e){let e=new y;e.text=n,e.className=`sb-category`,this._listColumn.addChild(e);for(let{instance:e,name:n}of r){let r=new S;r.orientation=`vertical`,r.className=`sb-story-row`;let i=new y;i.text=n,i.className=`sb-story-row-label`,r.addChild(i),m(r),r.addEventListener(`tap`,()=>{t(e),this._collapsed&&this.root.hideSidebarPane()}),this._listColumn.addChild(r),this._rowByTitle.set(e.meta.title,r)}}}markSelected(e){for(let[t,n]of this._rowByTitle)n.className=t===e?`sb-story-row sb-story-row-selected`:`sb-story-row`}setPreviewTitle(e){this._previewTitle.title=e}showPreview(e){this._previewSlot.removeChildren(),this._previewSlot.addChild(e.view)}renderControls(e){this._controlsGroup.listbox.removeChildren();for(let t of e)this._controlsGroup.addRow(t.view)}_buildControls(e){let t=[],n=e.meta.controls;if(Array.isArray(n))for(let i of n){if(!i?.name||!i?.type){console.warn(`Invalid control configuration:`,i);continue}let n=r(e,i);n&&t.push(n)}return t}_buildUI(){let e=new d;e.className=`${e.className} sb-sidebar-pane`.trim();let t=new o;t.className=`${t.className} sb-sidebar-header`.trim();let n=new f;n.title=this._options.title??`Stories`,t.setTitleWidget(n),e.addTopBar(t),this._listColumn=new S,this._listColumn.orientation=`vertical`,this._listColumn.className=`sb-sidebar-list`;let r=new x;r.className=`sb-sidebar-scroll`,r.content=this._listColumn,e.setContent(r),this.root.setSidebar(e);let i=new d;i.className=`${i.className} sb-content-pane`.trim();let a=new o;a.className=`${a.className} sb-detail-header`.trim();let c=new s;c.iconName=_,c.className=`${c.className} sb-back-button`.trim(),c.addEventListener(`tap`,()=>this.root.showSidebarPane()),c.visibility=this._collapsed?`visible`:`collapse`,this._backButton=c,a.packStart(c),this._previewTitle=new f,this._previewTitle.title=`Preview`,a.setTitleWidget(this._previewTitle);let p=new s;p.iconName=v,p.className=`${p.className} sb-controls-toggle`.trim(),p.addEventListener(`tap`,()=>{this._controlsSplit.showSidebar=!this._controlsSplit.showSidebar});let m=new s;m.iconName=g,m.className=`${m.className} sb-appearance-button`.trim(),m.addEventListener(`tap`,()=>this._presentAppearance()),a.packEnd(m),a.packEnd(p),i.addTopBar(a),this._controlsSplit=new l,this._controlsSplit.collapsed=this._collapsed,this._controlsSplit.sidebarPosition=`end`,this._controlsSplit.sidebarWidth=320,this._controlsSplit.className=`${this._controlsSplit.className} sb-controls-split`.trim(),this._previewSlot=new S,this._previewSlot.orientation=`vertical`,this._previewSlot.className=`sb-preview-pane`;let h=new x;h.className=`sb-preview-scroll`,h.content=this._previewSlot,this._controlsSplit.setContent(h),this._controlsGroup=new u,this._controlsGroup.title=`Controls`,this._controlsGroup.className=`${this._controlsGroup.className} sb-controls-group`.trim();let y=new x;y.className=`sb-controls-scroll`,y.content=this._controlsGroup,this._controlsSplit.setSidebar(y),i.setContent(this._controlsSplit),this.root.setContent(i),this.root.showSidebarPane()}};function runStorybook(e){let t=new StorybookNativeApp(e);return t.mount(),t}export{StorybookNativeApp,runStorybook};

package/lib/esm/controls.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import{bindControl as e}from"@gjsify/storybook-core";import{AdwComboRow as t,AdwEntryRow as n,AdwSliderRow as r,AdwSpinRow as i,AdwSwitchRow as a,NOTIFY_ACTIVE as o,NOTIFY_SELECTED as s,NOTIFY_SLIDER_VALUE as c,NOTIFY_TEXT as l,NOTIFY_VALUE as u}from"@gjsify/adwaita-nativescript";function createControlRow(t,n){return e(t,n,d)}const d={text(e){let t=new n;t.title=e;let cb=()=>{};return t.addEventListener(l,e=>cb(e.text)),{node:t,get:()=>t.text??``,set:e=>{t.text=e},onChange:e=>{cb=e}}},color(e,t){let r=new n;r.title=`${e} (hex)`,t&&(r.subtitle=t);let cb=()=>{};return r.addEventListener(l,e=>cb(e.text)),{node:r,get:()=>r.text??``,set:e=>{r.text=e},onChange:e=>{cb=e}}},boolean(e,t){let n=new a;n.title=e,t&&(n.subtitle=t);let cb=()=>{};return n.addEventListener(o,e=>cb(e.active)),{node:n,get:()=>n.active,set:e=>{n.active=e},onChange:e=>{cb=e}}},number(e){return spinRow(e)},range(e){return sliderRow(e)},select(e){let n=e.options??[],r=new t;r.title=label(e),e.description&&(r.subtitle=e.description),r.options=n.map(e=>({label:e.label,value:String(e.value)}));let cb=()=>{};return r.addEventListener(s,e=>cb(e.selected)),{node:r,get:()=>r.selectedIndex,set:e=>{r.selectedIndex=e},onChange:e=>{cb=e}}}};function spinRow(e){let t=new i;t.title=label(e),e.description&&(t.subtitle=e.description),t.min=e.min??0,t.max=e.max??100,t.step=e.step??1;let cb=()=>{};return t.addEventListener(u,e=>cb(e.value)),{node:t,get:()=>t.value,set:e=>{t.value=e},onChange:e=>{cb=e}}}function sliderRow(e){let t=new r;t.title=label(e),t.min=e.min??0,t.max=e.max??100,t.step=e.step??1;let cb=()=>{};return t.addEventListener(c,e=>cb(e.value)),{node:t,get:()=>t.value,set:e=>{t.value=e},onChange:e=>{cb=e}}}function label(e){return e.label||e.name}export{createControlRow};
+import"./_virtual/_rolldown/runtime.js";import{bindControl as e}from"@gjsify/storybook-core";import{AdwComboRow as t,AdwEntryRow as n,AdwSliderRow as r,AdwSpinRow as i,AdwSwitchRow as a,NOTIFY_ACTIVE as o,NOTIFY_SELECTED as s,NOTIFY_SLIDER_VALUE as c,NOTIFY_TEXT as l,NOTIFY_VALUE as u}from"@gjsify/adwaita-nativescript";function createControlRow(t,n){return e(t,n,d)}const d={text(e){let t=new n;t.title=e;let cb=()=>{};return t.addEventListener(l,e=>cb(e.text)),{node:t,get:()=>t.text??``,set:e=>{t.text=e},onChange:e=>{cb=e}}},color(e,t){let r=new n;r.title=`${e} (hex)`,t&&(r.subtitle=t);let cb=()=>{};return r.addEventListener(l,e=>cb(e.text)),{node:r,get:()=>r.text??``,set:e=>{r.text=e},onChange:e=>{cb=e}}},boolean(e,t){let n=new a;n.title=e,t&&(n.subtitle=t);let cb=()=>{};return n.addEventListener(o,e=>cb(e.active)),{node:n,get:()=>n.active,set:e=>{n.active=e},onChange:e=>{cb=e}}},number(e){return spinRow(e)},range(e){return sliderRow(e)},select(e){let n=e.options??[],r=new t;r.title=label(e),e.description&&(r.subtitle=e.description),r.options=n.map(e=>({label:e.label,value:String(e.value)}));let cb=()=>{};return r.addEventListener(s,e=>cb(e.selected)),{node:r,get:()=>r.selected,set:e=>{r.selected=e},onChange:e=>{cb=e}}}};function spinRow(e){let t=new i;t.title=label(e),e.description&&(t.subtitle=e.description),t.min=e.min??0,t.max=e.max??100,t.step=e.step??1;let cb=()=>{};return t.addEventListener(u,e=>cb(e.value)),{node:t,get:()=>t.value,set:e=>{t.value=e},onChange:e=>{cb=e}}}function sliderRow(e){let t=new r;t.title=label(e),t.min=e.min??0,t.max=e.max??100,t.step=e.step??1;let cb=()=>{};return t.addEventListener(c,e=>cb(e.value)),{node:t,get:()=>t.value,set:e=>{t.value=e},onChange:e=>{cb=e}}}function label(e){return e.label||e.name}export{createControlRow};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/storybook-nativescript",
-    "version": "0.44.0",
+    "version": "0.46.0",
     "description": "NativeScript renderer for the @gjsify/stories contract — the NS counterpart of @gjsify/storybook (GTK) and @gjsify/adwaita-storybook (browser), built on @gjsify/adwaita-nativescript real native widgets",
     "type": "module",
     "module": "lib/esm/index.js",
@@ -39,12 +39,12 @@
         "gnome"
     ],
     "dependencies": {
-        "@gjsify/adwaita-icons": "^0.44.0",
-        "@gjsify/adwaita-core": "^0.44.0",
-        "@gjsify/adwaita-nativescript": "^0.44.0",
-        "@gjsify/devtools-nativescript": "^0.44.0",
-        "@gjsify/stories": "^0.44.0",
-        "@gjsify/storybook-core": "^0.44.0"
+        "@gjsify/adwaita-icons": "^0.46.0",
+        "@gjsify/adwaita-core": "^0.46.0",
+        "@gjsify/adwaita-nativescript": "^0.46.0",
+        "@gjsify/devtools-nativescript": "^0.46.0",
+        "@gjsify/stories": "^0.46.0",
+        "@gjsify/storybook-core": "^0.46.0"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -55,8 +55,8 @@
         }
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.44.0",
-        "@gjsify/unit": "^0.44.0",
+        "@gjsify/cli": "^0.46.0",
+        "@gjsify/unit": "^0.46.0",
         "@nativescript/types": "~9.0.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"

package/src/theme/storybook.css

@@ -44,6 +44,16 @@
     background-color: #ebebed;
 }
 
+/* The BOX the header bar sits in, not the header bar. AdwToolbarView pads it with
+ * the status-bar inset (#1128) and `.adw-toolbar-view-top` paints that padding in
+ * the DEFAULT header colour — white. Recolouring `.sb-sidebar-header` alone left
+ * that band white above a #ebebed sidebar: measured on emulator-5554, a 142 px
+ * (54 dp) white stripe between the clock and the title. The box has to carry the
+ * pane's colour too, which is what the widget's own comment says the box is for. */
+.sb-sidebar-pane .adw-toolbar-view-top {
+    background-color: #ebebed;
+}
+
 .sb-sidebar-scroll {
     background-color: #ebebed;
 }
@@ -100,6 +110,11 @@
     background-color: #fafafb;
 }
 
+/* Same as `.sb-sidebar-pane .adw-toolbar-view-top`, for the detail pane. */
+.sb-content-pane .adw-toolbar-view-top {
+    background-color: #fafafb;
+}
+
 .sb-back-button,
 .sb-controls-toggle {
     font-size: 18;
@@ -200,6 +215,17 @@
     background-color: #2e2e32;
 }
 
+/* Dark twins of the two `.adw-toolbar-view-top` rules above. The dark default
+ * (#2e2e32) happens to equal the dark sidebar, so only the detail pane showed the
+ * band in dark mode — both are pinned here rather than relying on that coincidence. */
+.ns-dark .sb-sidebar-pane .adw-toolbar-view-top {
+    background-color: #2e2e32;
+}
+
+.ns-dark .sb-content-pane .adw-toolbar-view-top {
+    background-color: #1d1d20;
+}
+
 .ns-dark .sb-category {
     color: rgba(255, 255, 255, 0.55);
 }