@gjsify/storybook-nativescript 0.12.0 → 0.13.0

package/lib/esm/app.js

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

package/lib/esm/story-view.js

@@ -1 +1 @@
-import"./_virtual/_rolldown/runtime.js";import{StoryViewBase as e}from"@gjsify/storybook-core";import{AdwClamp as t,AdwPreferencesGroup as n}from"@gjsify/adwaita-nativescript";import{Label as r,StackLayout as i}from"@nativescript/core";var StoryView=class extends e{constructor(e,t=`Default`,n){super(),this.initBase(e,t,n)}get view(){return this.root}createChrome(e,t){return t?{root:t,hasStage:!1,setStageContent:()=>{},setChromeText:()=>{}}:this._installDefaultChrome()}_installDefaultChrome(){let e=new i;e.orientation=`vertical`,e.className=`sb-story-page`;let a=new t;a.className=`${a.className} sb-story-clamp`.trim();let o=new n;o.className=`${o.className} sb-story-group`.trim();let s=new i;s.orientation=`vertical`,s.className=`sb-story-group-header`;let c=new r;c.className=`sb-story-group-title`,c.textWrap=!0,s.addChild(c);let l=new r;l.className=`sb-story-group-description`,l.textWrap=!0;let u=!1,d=new i;return d.orientation=`vertical`,d.className=`story-stage`,d.horizontalAlignment=`center`,o.addRow(s),o.addRow(d),a.setChild(o),e.addChild(a),{root:e,hasStage:!0,setStageContent:e=>{d.removeChildren(),d.addChild(e)},setChromeText:(e,t)=>{c.text=e,l.text=t;let n=t.length>0;n&&!u?(s.addChild(l),u=!0):!n&&u&&(s.removeChild(l),u=!1)}}}};export{StoryView};
+import"./_virtual/_rolldown/runtime.js";import{StoryViewBase as e}from"@gjsify/storybook-core";import{AdwClamp as t}from"@gjsify/adwaita-nativescript";import{Label as n,StackLayout as r}from"@nativescript/core";var StoryView=class extends e{constructor(e,t=`Default`,n){super(),this.initBase(e,t,n)}get view(){return this.root}createChrome(e,t){return t?{root:t,hasStage:!1,setStageContent:()=>{},setChromeText:()=>{}}:this._installDefaultChrome()}_installDefaultChrome(){let e=new r;e.orientation=`vertical`,e.className=`sb-story-page`;let i=new t;i.className=`${i.className} sb-story-clamp`.trim();let a=new r;a.orientation=`vertical`,a.className=`sb-story-group`;let o=new r;o.orientation=`vertical`,o.className=`sb-story-group-header`;let s=new n;s.className=`sb-story-group-title`,s.textWrap=!0,o.addChild(s);let c=new n;c.className=`sb-story-group-description`,c.textWrap=!0;let l=!1,u=new r;return u.orientation=`vertical`,u.className=`story-stage`,u.horizontalAlignment=`center`,a.addChild(o),a.addChild(u),i.setChild(a),e.addChild(i),{root:e,hasStage:!0,setStageContent:e=>{u.removeChildren(),u.addChild(e)},setChromeText:(e,t)=>{s.text=e,c.text=t;let n=t.length>0;n&&!l?(o.addChild(c),l=!0):!n&&l&&(o.removeChild(c),l=!1)}}}};export{StoryView};

package/lib/types/app.d.ts

@@ -5,6 +5,15 @@ import { type View } from '@nativescript/core';
 import type { StoryView } from './story-view.js';
 import type { NsStoryModule } from './types.js';
 export type { StorySummary } from '@gjsify/storybook-core';
+/**
+ * The slice of NativeScript's `Application` the storybook reads to follow the OS
+ * color scheme. Pass `Application` from `@nativescript/core` — it satisfies this
+ * shape. Kept structural so the package needs no `@nativescript/core` value import.
+ */
+export interface NsAppearanceSource {
+    /** Current OS appearance (`'light'` / `'dark'`), or null when unknown. */
+    systemAppearance(): 'light' | 'dark' | null | undefined;
+}
 /** Options that adapt the storybook to a host project. */
 export interface StorybookNativeOptions {
     /** Story modules to display. */
@@ -13,6 +22,13 @@ export interface StorybookNativeOptions {
     title?: string;
     /** Auto-select the first story on mount (default true). */
     openFirst?: boolean;
+    /**
+     * The NativeScript `Application` (optional). When given, the storybook follows
+     * the OS color scheme: NS already flips the `ns-dark` CSS class on the root view
+     * (so backgrounds/text follow the system theme), and this keeps the symbolic
+     * ICON bitmaps recoloured to match (they are pre-coloured, outside CSS's reach).
+     */
+    application?: NsAppearanceSource;
 }
 export declare class StorybookNativeApp implements StorybookView<StoryView> {
     private _controller;
@@ -26,10 +42,31 @@ export declare class StorybookNativeApp implements StorybookView<StoryView> {
     private _controlsGroup;
     /** Right controls overlay (the GTK OverlaySplitView, sidebar_position=END). */
     private _controlsSplit;
+    /** Back button (visible only in collapsed/phone layout). */
+    private _backButton;
     private _rowByTitle;
+    /** Current layout mode — true = collapsed (phone), false = three-pane (wide). */
+    private _collapsed;
+    /** Detaches the responsive breakpoint listeners on teardown. */
+    private _disposeBreakpoint;
     constructor(options: StorybookNativeOptions);
+    /** Whether `width` (DIPs) is at/above the three-pane breakpoint (720sp). */
+    private _isWideWidth;
     /** Build the UI, instantiate stories, and select the first one. Returns the root view. */
     mount(): View;
+    /**
+     * Collapse to phone layout below 720sp, expand to three side-by-side panes at
+     * or above it — the GTK storybook's `Adw.Breakpoint`, driven by the root
+     * view's post-layout width. Seeds immediately so the first paint is correct.
+     */
+    private _wireBreakpoint;
+    /**
+     * Switch between collapsed (phone) and expanded (wide) chrome. Collapsed: the
+     * master/detail nav swaps panes, the controls are a tap-to-reveal overlay, and
+     * the back button shows. Expanded: sidebar + preview + controls sit side by
+     * side and the back button hides (no navigation needed).
+     */
+    private _applyLayoutMode;
     /** The currently-displayed story, or null. */
     get activeStory(): StoryView | null;
     /** Every story flattened to a summary. */
@@ -46,6 +83,20 @@ export declare class StorybookNativeApp implements StorybookView<StoryView> {
     setActiveArg(name: string, value: StoryArgValue): boolean;
     /** The underlying controller (e.g. to build a devtools extension over it). */
     get controller(): StorybookController<StoryView>;
+    /**
+     * Match the OS color scheme at mount. NS applies the `ns-dark` CSS class to the
+     * root BEFORE the first style pass (so backgrounds/text/borders follow the
+     * system theme via `autoSystemAppearanceChanged`); the pre-coloured symbolic
+     * ICON bitmaps are outside CSS's reach, so this sets the global icon scheme to
+     * the matching fg (dark icons on light, near-white on dark). No-op without an
+     * `application` option.
+     *
+     * Seed-only (mount-time): a clean launch is the dependable path because NS
+     * 9.1-alpha does not reliably RE-APPLY the `.ns-dark` overrides at runtime, so a
+     * live OS theme switch is picked up on the next launch rather than risking the
+     * icons getting ahead of a CSS that didn't flip.
+     */
+    private _wireColorScheme;
     renderSidebar(groups: Array<CategoryGroup<StoryView>>, onSelect: (instance: StoryView) => void): void;
     markSelected(title: string): void;
     setPreviewTitle(title: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gjsify/storybook-nativescript",
-    "version": "0.12.0",
+    "version": "0.13.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,11 +39,11 @@
         "gnome"
     ],
     "dependencies": {
-        "@gjsify/adwaita-icons": "^0.12.0",
-        "@gjsify/adwaita-nativescript": "^0.12.0",
-        "@gjsify/devtools-nativescript": "^0.12.0",
-        "@gjsify/stories": "^0.12.0",
-        "@gjsify/storybook-core": "^0.12.0"
+        "@gjsify/adwaita-icons": "^0.13.0",
+        "@gjsify/adwaita-nativescript": "^0.13.0",
+        "@gjsify/devtools-nativescript": "^0.13.0",
+        "@gjsify/stories": "^0.13.0",
+        "@gjsify/storybook-core": "^0.13.0"
     },
     "peerDependencies": {
         "@nativescript/core": "*"
@@ -54,8 +54,8 @@
         }
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.12.0",
-        "@gjsify/unit": "^0.12.0",
+        "@gjsify/cli": "^0.13.0",
+        "@gjsify/unit": "^0.13.0",
         "@nativescript/types": "~9.0.0",
         "@types/node": "^25.9.2",
         "typescript": "^6.0.3"

package/src/theme/storybook.css

@@ -52,8 +52,11 @@
     padding: 4;
 }
 
+/* Category separator = Adwaita `.heading` + `.dim-label`: BODY size (same as the
+ * story rows), bold, dimmed — NOT a shrunk caption (matches the native GTK
+ * `.navigation-sidebar` section header). */
 .sb-category {
-    font-size: 11;
+    font-size: 14;
     font-weight: 700;
     color: rgba(0, 0, 0, 0.55);
     padding: 10 8 4 8;
@@ -66,20 +69,29 @@
     background-color: transparent;
 }
 
+/* Press/hover shade — Adwaita `.navigation-sidebar row.activatable:hover`
+ * ($hover_color = currentColor 7%). Wired via attachRowPressFeedback() (NS only
+ * auto-applies :highlighted to Button). */
+.sb-story-row:highlighted {
+    background-color: rgba(0, 0, 0, 0.07);
+}
+
 .sb-story-row-label {
     font-size: 15;
     color: rgba(0, 0, 0, 0.8);
 }
 
+/* Selected row — Adwaita `row:selected` uses $selected_color (currentColor 10%),
+ * a GREY shade, NOT the accent; the label stays the normal dark fg. */
 .sb-story-row-selected {
-    background-color: #3584e4;
+    background-color: rgba(0, 0, 0, 0.1);
     border-radius: 6;
     margin: 1 4 1 4;
     padding: 8 12 8 12;
 }
 
-.sb-story-row-selected .sb-story-row-label {
-    color: #ffffff;
+.sb-story-row-selected:highlighted {
+    background-color: rgba(0, 0, 0, 0.13);
 }
 
 /* ===== Detail header (back + story title + controls toggle) ===== */
@@ -113,15 +125,15 @@
 }
 
 .sb-story-group-title {
-    font-size: 20;
+    font-size: 17;
     font-weight: 700;
     color: rgba(0, 0, 0, 0.8);
 }
 
 .sb-story-group-description {
-    font-size: 15;
+    font-size: 14;
     color: rgba(0, 0, 0, 0.55);
-    margin: 2 0 0 0;
+    margin: 3 0 0 0;
 }
 
 /*
@@ -130,11 +142,11 @@
  */
 .story-stage {
     border-width: 1;
-    border-color: rgba(127, 127, 127, 0.28);
+    border-color: rgba(0, 0, 0, 0.28);
     border-style: dashed;
     border-radius: 12;
-    padding: 16;
-    margin: 8 0 0 0;
+    padding: 18;
+    margin: 12 0 0 0;
 }
 
 /* ===== Controls panel — a RIGHT overlay (sidebar_position=END) ===== */
@@ -142,14 +154,14 @@
    fill read as a distinct sidebar (the GTK OverlaySplitView controls pane). */
 
 .sb-controls-scroll {
-    background-color: #ebebed;
+    background-color: #f3f3f5;
     border-left-width: 1;
     border-left-color: rgba(0, 0, 0, 0.1);
 }
 
 .sb-controls-group {
     margin: 8 12 12 12;
-    background-color: #ebebed;
+    background-color: #f3f3f5;
 }
 
 /* ===== Dark mode ===== */
@@ -166,14 +178,14 @@
 
 .ns-dark .sb-controls-scroll,
 .ns-dark .sb-controls-group {
-    background-color: #242428;
+    background-color: #28282c;
     border-left-color: rgba(255, 255, 255, 0.1);
 }
 
 .ns-dark .sb-sidebar-pane,
 .ns-dark .sb-sidebar-header,
 .ns-dark .sb-sidebar-scroll {
-    background-color: #242428;
+    background-color: #2e2e32;
 }
 
 .ns-dark .sb-category {
@@ -184,6 +196,19 @@
     color: rgba(255, 255, 255, 0.8);
 }
 
+/* Dark selection/press — currentColor (white) overlay, mirroring the light rules. */
+.ns-dark .sb-story-row:highlighted {
+    background-color: rgba(255, 255, 255, 0.07);
+}
+
+.ns-dark .sb-story-row-selected {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.ns-dark .sb-story-row-selected:highlighted {
+    background-color: rgba(255, 255, 255, 0.13);
+}
+
 .ns-dark .sb-story-group-title {
     color: rgba(255, 255, 255, 0.85);
 }
@@ -193,5 +218,5 @@
 }
 
 .ns-dark .story-stage {
-    border-color: rgba(160, 160, 160, 0.28);
+    border-color: rgba(255, 255, 255, 0.28);
 }