@gjsify/storybook-nativescript 0.11.0

package/lib/esm/_virtual/_rolldown/runtime.js

@@ -0,0 +1 @@
+var e=Object.defineProperty,__name=(t,n)=>e(t,`name`,{value:n,configurable:!0});export{__name};

package/lib/esm/app.js

@@ -0,0 +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};

package/lib/esm/controls.js

@@ -0,0 +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};

package/lib/esm/devtools.js

@@ -0,0 +1 @@
+import"./_virtual/_rolldown/runtime.js";import{buildStorybookDevtoolsExtension as e}from"@gjsify/storybook-core";import{installDevtools as t}from"@gjsify/devtools-nativescript";const n={ListStories:[],GetCurrentStory:[],OpenStory:[`title`],SetStoryArg:[`name`,`valueJson`],GetStoryArgs:[]};function buildStorybookNsExtension(t){let r=e(t);return{methods:r.methods.map(e=>{let t=n[e.name]??[],r=e.handler;return{name:e.name,kind:e.kind,handler:e=>r(...t.map(t=>e[t]))}}),contributeStatus:r.contributeStatus}}function installStorybookDevtools(e,n={}){return t({...n,extensions:[buildStorybookNsExtension(e)]})}export{buildStorybookNsExtension,installStorybookDevtools};

package/lib/esm/index.js

@@ -0,0 +1 @@
+import{createControlRow as e}from"./controls.js";import{StorybookNativeApp as t,runStorybook as n}from"./app.js";import{buildStorybookNsExtension as r,installStorybookDevtools as i}from"./devtools.js";import{StoryView as a}from"./story-view.js";import{StoryRegistry as o}from"./registry.js";import{isNsStoryModule as s}from"./types.js";import{collectStoryModules as c}from"@gjsify/storybook-core";import{ControlType as l,argsFromControls as u}from"@gjsify/stories";export{l as ControlType,o as StoryRegistry,a as StoryView,t as StorybookNativeApp,u as argsFromControls,r as buildStorybookNsExtension,c as collectStoryModules,e as createControlRow,i as installStorybookDevtools,s as isNsStoryModule,n as runStorybook};

package/lib/esm/registry.js

@@ -0,0 +1 @@
+import{StoryRegistry as e}from"@gjsify/storybook-core";export{e as StoryRegistry};

package/lib/esm/story-view.js

@@ -0,0 +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};

package/lib/esm/types.js

@@ -0,0 +1 @@
+import"./_virtual/_rolldown/runtime.js";function isNsStoryModule(e){return typeof e==`object`&&!!e&&Array.isArray(e.stories)}export{isNsStoryModule};

package/lib/types/app.d.ts

@@ -0,0 +1,58 @@
+import type { StoryArgValue } from '@gjsify/stories';
+import { type CategoryGroup, type ControlRow, StorybookController, type StorybookView, type StorySummary } from '@gjsify/storybook-core';
+import { AdwNavigationSplitView } from '@gjsify/adwaita-nativescript';
+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';
+/** Options that adapt the storybook to a host project. */
+export interface StorybookNativeOptions {
+    /** Story modules to display. */
+    stories: NsStoryModule[];
+    /** Title shown in the sidebar header. */
+    title?: string;
+    /** Auto-select the first story on mount (default true). */
+    openFirst?: boolean;
+}
+export declare class StorybookNativeApp implements StorybookView<StoryView> {
+    private _controller;
+    private _options;
+    /** The single root view the host adds to its page — a collapsed navigation
+     *  split view (master story list ⇄ detail preview). */
+    readonly root: AdwNavigationSplitView;
+    private _listColumn;
+    private _previewSlot;
+    private _previewTitle;
+    private _controlsGroup;
+    /** Right controls overlay (the GTK OverlaySplitView, sidebar_position=END). */
+    private _controlsSplit;
+    private _rowByTitle;
+    constructor(options: StorybookNativeOptions);
+    /** Build the UI, instantiate stories, and select the first one. Returns the root view. */
+    mount(): View;
+    /** The currently-displayed story, or null. */
+    get activeStory(): StoryView | null;
+    /** Every story flattened to a summary. */
+    listStories(): StorySummary[];
+    /** Select + show a story by its full `Category/Name` title. */
+    openStoryByTitle(title: string): boolean;
+    /** The active story as `{ title, story, args }`, or null. */
+    getCurrentStory(): {
+        title: string;
+        story: string;
+        args: Record<string, unknown>;
+    } | null;
+    /** Set one arg on the active story — drives the same path as the controls. */
+    setActiveArg(name: string, value: StoryArgValue): boolean;
+    /** The underlying controller (e.g. to build a devtools extension over it). */
+    get controller(): StorybookController<StoryView>;
+    renderSidebar(groups: Array<CategoryGroup<StoryView>>, onSelect: (instance: StoryView) => void): void;
+    markSelected(title: string): void;
+    setPreviewTitle(title: string): void;
+    showPreview(instance: StoryView): void;
+    renderControls(rows: Array<ControlRow<unknown>>): void;
+    private _buildControls;
+    private _buildUI;
+}
+/** Construct, mount, and return a {@link StorybookNativeApp} root view + controller. */
+export declare function runStorybook(options: StorybookNativeOptions): StorybookNativeApp;

package/lib/types/controls.d.ts

@@ -0,0 +1,8 @@
+import type { StoryControl } from '@gjsify/stories';
+import { type ControlRow as CoreControlRow } from '@gjsify/storybook-core';
+import type { View } from '@nativescript/core';
+import type { StoryView } from './story-view.js';
+/** A built control: the row view plus a refresher that re-syncs it from args. */
+export type ControlRow = CoreControlRow<View>;
+/** Build the row for a single control, or null if it cannot be rendered. */
+export declare function createControlRow(story: StoryView, control: StoryControl): ControlRow | null;

package/lib/types/devtools.d.ts

@@ -0,0 +1,24 @@
+import { type StorybookController } from '@gjsify/storybook-core';
+import { type InstallNsDevtoolsOptions, type NsDevtoolsAgent, type NsDevtoolsExtension } from '@gjsify/devtools-nativescript';
+import type { StoryView } from './story-view.js';
+/**
+ * Build the NS devtools extension over a storybook controller — the
+ * renderer-neutral storybook method set from `@gjsify/storybook-core`, adapted to
+ * the NS devtools `params`-record handler shape.
+ */
+export declare function buildStorybookNsExtension(controller: StorybookController<StoryView>): NsDevtoolsExtension;
+/**
+ * Install the in-app NativeScript devtools agent with the storybook control
+ * surface wired in. A no-op returning `null` unless `GJSIFY_DEVTOOLS` is set (or
+ * `options.enabled`), so it is safe to leave in production. Call once after
+ * `runStorybook(...)`.
+ *
+ * @example
+ * ```ts
+ * import { Application, Frame } from '@nativescript/core';
+ * import { runStorybook, installStorybookDevtools } from '@gjsify/storybook-nativescript';
+ * const app = runStorybook({ stories });
+ * installStorybookDevtools(app.controller, { application: Application, frame: Frame });
+ * ```
+ */
+export declare function installStorybookDevtools(controller: StorybookController<StoryView>, options?: Omit<InstallNsDevtoolsOptions, 'extensions'>): NsDevtoolsAgent | null;

package/lib/types/index.d.ts

@@ -0,0 +1,8 @@
+export { ControlType, argsFromControls, type StoryArgs, type StoryArgValue, type StoryBooleanControl, type StoryColorControl, type StoryControl, type StoryMeta, type StoryNumberControl, type StorySelectControl, type StorySelectOption, type StoryTextControl, } from '@gjsify/stories';
+export { collectStoryModules, type StorybookController } from '@gjsify/storybook-core';
+export { StoryView, type StoryArgsListener } from './story-view.js';
+export { StoryRegistry } from './registry.js';
+export { createControlRow, type ControlRow } from './controls.js';
+export { StorybookNativeApp, runStorybook, type StorybookNativeOptions, type StorySummary, } from './app.js';
+export { buildStorybookNsExtension, installStorybookDevtools } from './devtools.js';
+export { isNsStoryModule, type NsStoryConstructor, type NsStoryDecorator, type NsStoryModule } from './types.js';

package/lib/types/index.spec.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => Promise<void>;
+export default _default;

package/lib/types/registry.d.ts

@@ -0,0 +1 @@
+export { StoryRegistry } from '@gjsify/storybook-core';

package/lib/types/story-view.d.ts

@@ -0,0 +1,35 @@
+import type { StoryArgs, StoryMeta } from '@gjsify/stories';
+import { type StoryChrome, StoryViewBase } from '@gjsify/storybook-core';
+import { type View } from '@nativescript/core';
+/** Notified whenever a story's args change (the controls panel re-syncs through this). */
+export type StoryArgsListener = (args: StoryArgs) => void;
+/**
+ * Base class for NativeScript story views.
+ *
+ * Provides default chrome — a clamped boxed group (`AdwClamp` +
+ * `AdwPreferencesGroup`) with a title + description above a centered,
+ * dashed-framed preview "stage" — built programmatically with the
+ * `@gjsify/adwaita-nativescript` widgets + the Adwaita CSS classes. Simple
+ * stories compose their preview by calling {@link addContent}; a subclass that
+ * needs a bespoke layout passes its own root view to the constructor (then
+ * {@link addContent} is a no-op), mirroring the browser `customRoot` opt-out.
+ */
+export declare class StoryView extends StoryViewBase<View> {
+    /**
+     * @param meta       The story's metadata (the same renderer-agnostic object
+     *                   its GTK / browser twins use).
+     * @param story      Variant name (defaults to "Default").
+     * @param customRoot Opt out of the default chrome by supplying a root view.
+     */
+    constructor(meta: StoryMeta, story?: string, customRoot?: View);
+    /**
+     * The real NativeScript `View` an NS `Page`/`Frame` mounts. Alias for the
+     * base's {@link root} getter — the NS counterpart of the browser's
+     * `.element` (and of the GTK base simply being a widget). NativeScript needs
+     * a concrete `View` to add to a page, so this surfaces one.
+     */
+    get view(): View;
+    /** Build the @gjsify/adwaita-nativescript native chrome — the single renderer seam. */
+    protected createChrome(_meta: StoryMeta, customRoot?: View): StoryChrome<View>;
+    private _installDefaultChrome;
+}

package/lib/types/types.d.ts

@@ -0,0 +1,24 @@
+import type { StoryMeta } from '@gjsify/stories';
+import type { StoryModuleLike } from '@gjsify/storybook-core';
+import type { StoryView } from './story-view.js';
+/** Constructor contract for a NS story class: zero-arg `new`, static metadata. */
+export interface NsStoryConstructor {
+    new (): StoryView;
+    getMetadata(): StoryMeta;
+}
+/** Wraps a story's content-build step (e.g. to install a shared environment). */
+export type NsStoryDecorator = (build: () => void, story: StoryView) => void;
+/**
+ * A group of related NativeScript stories, optionally wrapped by module-level
+ * decorators. The NS binding of {@link StoryModuleLike} over {@link StoryView} +
+ * {@link NsStoryConstructor}.
+ */
+export interface NsStoryModule extends StoryModuleLike<StoryView, NsStoryConstructor> {
+    stories: NsStoryConstructor[];
+    /** Populated by {@link StoryRegistry.createStoryInstances}. */
+    instances?: StoryView[];
+    /** Decorators applied around every story's `initialize()` in this module. */
+    decorators?: NsStoryDecorator[];
+}
+/** Narrowing guard — `true` when `value` is a {@link NsStoryModule}. */
+export declare function isNsStoryModule(value: unknown): value is NsStoryModule;

package/package.json

@@ -0,0 +1,85 @@
+{
+    "name": "@gjsify/storybook-nativescript",
+    "version": "0.11.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",
+    "types": "lib/types/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/types/index.d.ts",
+            "default": "./lib/esm/index.js"
+        },
+        "./theme/storybook.css": "./src/theme/storybook.css"
+    },
+    "files": [
+        "lib",
+        "src/theme/storybook.css"
+    ],
+    "scripts": {
+        "clear": "rm -rf lib tsconfig.tsbuildinfo tsconfig.types.tsbuildinfo test.gjs.mjs test.node.mjs || exit 0",
+        "check": "gjsify tsc --noEmit",
+        "build": "gjsify run build:gjsify && gjsify run build:types",
+        "build:gjsify": "gjsify build --library 'src/**/*.{ts,js}' --exclude 'src/**/*.spec.{mts,ts}' 'src/test.{mts,ts}'",
+        "build:types": "gjsify tsc",
+        "build:test": "gjsify run build:test:gjs && gjsify run build:test:node",
+        "build:test:gjs": "gjsify build src/test.mts --app gjs --outfile test.gjs.mjs",
+        "build:test:node": "gjsify build src/test.mts --app node --outfile test.node.mjs",
+        "test": "gjsify run build:gjsify && gjsify run build:test && gjsify run test:node && gjsify run test:gjs",
+        "test:gjs": "gjsify run test.gjs.mjs",
+        "test:node": "node test.node.mjs"
+    },
+    "keywords": [
+        "storybook",
+        "stories",
+        "adwaita",
+        "nativescript",
+        "android",
+        "ios",
+        "gnome"
+    ],
+    "dependencies": {
+        "@gjsify/adwaita-icons": "^0.11.0",
+        "@gjsify/adwaita-nativescript": "^0.11.0",
+        "@gjsify/devtools-nativescript": "^0.11.0",
+        "@gjsify/stories": "^0.11.0",
+        "@gjsify/storybook-core": "^0.11.0"
+    },
+    "peerDependencies": {
+        "@nativescript/core": "*"
+    },
+    "peerDependenciesMeta": {
+        "@nativescript/core": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@gjsify/cli": "^0.11.0",
+        "@gjsify/unit": "^0.11.0",
+        "@nativescript/types": "~9.0.0",
+        "@types/node": "^25.9.2",
+        "typescript": "^6.0.3"
+    },
+    "gjsify": {
+        "runtimes": {
+            "gjs": "none",
+            "node": "none",
+            "browser": "none",
+            "nativescript": "native"
+        },
+        "nativescriptPlatforms": [
+            "android",
+            "ios"
+        ]
+    },
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/gjsify/gjsify.git",
+        "directory": "packages/nativescript-bridge/storybook"
+    },
+    "bugs": {
+        "url": "https://github.com/gjsify/gjsify/issues"
+    },
+    "homepage": "https://github.com/gjsify/gjsify/tree/main/packages/nativescript-bridge/storybook#readme"
+}

package/src/theme/storybook.css

@@ -0,0 +1,197 @@
+/*
+ * storybook.css — storybook chrome for @gjsify/storybook-nativescript.
+ *
+ * Pairs with @gjsify/adwaita-nativescript's `theme/adwaita.css` (import BOTH into
+ * your app CSS). It styles only the storybook-specific chrome classes
+ * (`.sb-*` + `.story-stage`) — the rows + groups inherit the Adwaita look from
+ * the adwaita-nativescript stylesheet.
+ *
+ * NativeScript CSS subset ONLY: color / background-color / font-size /
+ * font-weight / padding / margin / width / height / border-* / border-radius /
+ * opacity. NO flexbox cascade, NO z-index, NO CSS custom properties (NS does not
+ * resolve `var()`) — the Adwaita tokens are inlined per rule, matching the
+ * adwaita-nativescript stylesheet's light palette
+ * (window bg #fafafb / fg rgba(0,0,0,.8); accent #3584e4; sidebar #ebebed).
+ *
+ * Color tokens ported from @gjsify/adwaita-web's `_variables.scss` / `_theme.scss`
+ * (mirroring refs/libadwaita/src/stylesheet/_colors.scss).
+ * Copyright (c) GNOME contributors (libadwaita). LGPLv2.1+.
+ *
+ * Toggle dark mode by adding `ns-dark` to the page/root (mirrors the
+ * adwaita-nativescript theme convention).
+ */
+
+/* ===== Window / panes ===== */
+
+.sb-window {
+    background-color: #fafafb;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.sb-content-pane {
+    background-color: #fafafb;
+}
+
+/* ===== Sidebar (story list) — distinct shade, mirrors GTK .navigation-sidebar ===== */
+
+.sb-sidebar-pane {
+    background-color: #ebebed;
+    width: 240;
+}
+
+.sb-sidebar-header {
+    padding: 12 12 8 12;
+    background-color: #ebebed;
+}
+
+.sb-sidebar-scroll {
+    background-color: #ebebed;
+}
+
+.sb-sidebar-list {
+    padding: 4;
+}
+
+.sb-category {
+    font-size: 11;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.55);
+    padding: 10 8 4 8;
+}
+
+.sb-story-row {
+    border-radius: 6;
+    margin: 1 4 1 4;
+    padding: 8 12 8 12;
+    background-color: transparent;
+}
+
+.sb-story-row-label {
+    font-size: 15;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.sb-story-row-selected {
+    background-color: #3584e4;
+    border-radius: 6;
+    margin: 1 4 1 4;
+    padding: 8 12 8 12;
+}
+
+.sb-story-row-selected .sb-story-row-label {
+    color: #ffffff;
+}
+
+/* ===== Detail header (back + story title + controls toggle) ===== */
+
+.sb-detail-header {
+    background-color: #fafafb;
+}
+
+.sb-back-button,
+.sb-controls-toggle {
+    font-size: 18;
+}
+
+/* ===== Detail area (preview content + right controls overlay) ===== */
+
+.sb-controls-split,
+.sb-preview-scroll {
+    background-color: #fafafb;
+}
+
+.sb-preview-pane {
+    padding: 24 12 24 12;
+}
+
+.sb-story-page {
+    padding: 0;
+}
+
+.sb-story-group-header {
+    padding: 4 2 4 2;
+}
+
+.sb-story-group-title {
+    font-size: 20;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+}
+
+.sb-story-group-description {
+    font-size: 15;
+    color: rgba(0, 0, 0, 0.55);
+    margin: 2 0 0 0;
+}
+
+/*
+ * Centered, dashed-framed preview stage (mirrors the browser .story-stage and
+ * the native renderer's .story-stage). NS supports a dashed border style.
+ */
+.story-stage {
+    border-width: 1;
+    border-color: rgba(127, 127, 127, 0.28);
+    border-style: dashed;
+    border-radius: 12;
+    padding: 16;
+    margin: 8 0 0 0;
+}
+
+/* ===== Controls panel — a RIGHT overlay (sidebar_position=END) ===== */
+/* Opaque so it covers the preview when toggled on; the left hairline + tinted
+   fill read as a distinct sidebar (the GTK OverlaySplitView controls pane). */
+
+.sb-controls-scroll {
+    background-color: #ebebed;
+    border-left-width: 1;
+    border-left-color: rgba(0, 0, 0, 0.1);
+}
+
+.sb-controls-group {
+    margin: 8 12 12 12;
+    background-color: #ebebed;
+}
+
+/* ===== Dark mode ===== */
+
+.ns-dark.sb-window,
+.ns-dark .sb-content-pane,
+.ns-dark .sb-controls-split,
+.ns-dark .sb-preview-scroll,
+.ns-dark .sb-preview-pane,
+.ns-dark .sb-detail-header {
+    background-color: #1d1d20;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.ns-dark .sb-controls-scroll,
+.ns-dark .sb-controls-group {
+    background-color: #242428;
+    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;
+}
+
+.ns-dark .sb-category {
+    color: rgba(255, 255, 255, 0.55);
+}
+
+.ns-dark .sb-story-row-label {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.ns-dark .sb-story-group-title {
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.ns-dark .sb-story-group-description {
+    color: rgba(255, 255, 255, 0.55);
+}
+
+.ns-dark .story-stage {
+    border-color: rgba(160, 160, 160, 0.28);
+}