@gjsify/adwaita-storybook 0.14.0 → 0.16.0

package/README.md

@@ -52,6 +52,8 @@ mountStorybook(document.body, {
 
 `mountStorybook` builds the full chrome — a sidebar of stories grouped by category, a preview pane, and a controls panel that renders the story's `controls` as live-bound adwaita-web rows.
 
+The package entry is TypeScript (`src/index.ts`), consumed via a TypeScript-compiling build — `gjsify build --app browser` / the `gjsifyBrowser()` Vite preset (or any Vite/bundler setup), same as `@gjsify/adwaita-web`. Type declarations are shipped pre-built at `lib/types/index.d.ts`, so `gjsify tsc` consumers resolve the package's types without compiling its source.
+
 ## Driving it programmatically
 
 `mountStorybook` exposes a small control surface on `window.__storybook` (`listStories`, `openStory`, `getCurrentStory`, `setArg`, `getArgs`), so a host browser's MCP `eval_js` (see [`@gjsify/devtools-browser`](../../framework/devtools-browser)) can drive and screenshot stories without an in-page devtools channel.

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@gjsify/adwaita-storybook",
-    "version": "0.14.0",
+    "version": "0.16.0",
     "description": "Browser renderer for the @gjsify/stories contract — the web counterpart of @gjsify/storybook, built on @gjsify/adwaita-web",
     "type": "module",
-    "main": "src/index.ts",
-    "types": "src/index.ts",
+    "main": "./src/index.ts",
+    "types": "./lib/types/index.d.ts",
     "exports": {
         ".": {
-            "types": "./src/index.ts",
+            "types": "./lib/types/index.d.ts",
             "default": "./src/index.ts"
         }
     },
@@ -18,8 +18,7 @@
     "scripts": {
         "clear": "rm -rf lib tsconfig.tsbuildinfo || exit 0",
         "check": "gjsify tsc --noEmit",
-        "build": "gjsify run build:gjsify && gjsify run build:types",
-        "build:gjsify": "gjsify build --library 'src/**/*.ts' --exclude 'src/**/*.spec.ts'",
+        "build": "gjsify run build:types",
         "build:types": "gjsify tsc"
     },
     "keywords": [
@@ -30,12 +29,12 @@
         "browser"
     ],
     "dependencies": {
-        "@gjsify/adwaita-web": "^0.14.0",
-        "@gjsify/stories": "^0.14.0",
-        "@gjsify/storybook-core": "^0.14.0"
+        "@gjsify/adwaita-web": "^0.16.0",
+        "@gjsify/stories": "^0.16.0",
+        "@gjsify/storybook-core": "^0.16.0"
     },
     "devDependencies": {
-        "@gjsify/cli": "^0.14.0",
+        "@gjsify/cli": "^0.16.0",
         "typescript": "^6.0.3"
     },
     "gjsify": {
@@ -44,7 +43,8 @@
             "node": "none",
             "browser": "polyfill",
             "nativescript": "none"
-        }
+        },
+        "tier": 2
     },
     "license": "MIT",
     "repository": {

package/src/_virtual/_rolldown/runtime.js

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

package/src/_virtual/_rolldown/runtime2.js

@@ -1 +0,0 @@
-import"./runtime.js";

package/src/_virtual/_rolldown/runtime22.js

@@ -1 +0,0 @@
-import"./runtime2.js";

package/src/app.js

@@ -1 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import{createControlRow as e}from"./controls2.js";import{injectStorybookStyles as t}from"./styles2.js";import"@gjsify/adwaita-web";import{StorybookController as n}from"@gjsify/storybook-core";function h(e,t={},n=[]){let r=document.createElement(e);for(let[e,n]of Object.entries(t))r.setAttribute(e,n);for(let e of n)r.append(e);return r}var StorybookWebApp=class{_controller=new n(this,e=>this._buildControls(e));_options;_container;_listEl;_previewEl;_previewTitle;_controlsGroup;_navSplit;_controlsSplit;_backBtn;_rowByTitle=new Map;constructor(e,t){this._container=e,this._options=t}mount(){t(),this._buildUI(),this._observeBreakpoint(),this._exposeGlobal(),this._controller.mount(this._options.stories,this._options.openFirst!==!1)}_observeBreakpoint(){let apply=()=>this._applyBreakpoint();typeof ResizeObserver<`u`?new ResizeObserver(apply).observe(this._navSplit):globalThis.addEventListener?.(`resize`,apply),apply()}_applyBreakpoint(){let e=this._navSplit.clientWidth;if(e===0)return;let t=e<620,n=e<1e3,r=this._navSplit,i=this._controlsSplit;r.collapsed!==t&&(r.collapsed=t),i.collapsed!==n&&(i.collapsed=n),this._navSplit.removeAttribute(`show-content`),this._backBtn.hidden=!0,i.showSidebar=!n}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)}renderSidebar(e,t){this._listEl.replaceChildren(),this._rowByTitle.clear();for(let{category:n,stories:r}of e){this._listEl.append(h(`div`,{class:`sb-category`},[n]));for(let{instance:e,name:n}of r){let r=h(`div`,{class:`sb-story-row`,role:`button`,tabindex:`0`},[n]);r.addEventListener(`click`,()=>t(e)),r.addEventListener(`keydown`,n=>{(n.key===`Enter`||n.key===` `)&&(n.preventDefault(),t(e))}),this._listEl.append(r),this._rowByTitle.set(e.meta.title,r)}}}markSelected(e){for(let[t,n]of this._rowByTitle)n.classList.toggle(`selected`,t===e)}setPreviewTitle(e){this._previewTitle.setAttribute(`title`,e)}showPreview(e){this._previewEl.replaceChildren(e.element),this._navSplit.collapsed&&this._navSplit.setAttribute(`show-content`,``)}renderControls(e){let t=this._controlsGroup.querySelector(`.adw-preferences-group-listbox`);if(t){t.replaceChildren();for(let n of e)t.append(n.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(){this._listEl=h(`div`,{class:`sb-sidebar-list navigation-sidebar`});let e=h(`div`,{class:`sb-sidebar-scroll`},[this._listEl]),t=h(`div`,{slot:`sidebar`,class:`sb-sidebar-pane`},[h(`adw-toolbar-view`,{},[h(`adw-header-bar`,{slot:`top`},[h(`adw-window-title`,{slot:`center`,title:this._options.title??`Stories`})]),e])]);this._previewEl=h(`div`,{class:`sb-preview-scroll`}),this._controlsGroup=h(`adw-preferences-group`,{title:`Controls`});let n=h(`div`,{slot:`sidebar`,class:`sb-controls-scroll`},[h(`div`,{class:`sb-controls-page`},[this._controlsGroup])]),r=h(`adw-overlay-split-view`,{"sidebar-position":`end`,"show-sidebar":``,"min-sidebar-width":`280`,"max-sidebar-width":`360`},[h(`div`,{slot:`content`,class:`sb-preview-pane`},[this._previewEl]),n]);this._controlsSplit=r,this._backBtn=h(`button`,{class:`adw-header-btn sb-back-btn`,slot:`start`,title:`Back to stories`,"aria-label":`Back to stories`}),this._backBtn.append(h(`span`,{class:`adw-icon adw-icon--go-previous`})),this._backBtn.hidden=!0,this._backBtn.addEventListener(`click`,()=>this._navSplit.removeAttribute(`show-content`)),this._previewTitle=h(`adw-window-title`,{slot:`center`,title:`Preview`});let i=h(`button`,{class:`adw-header-btn sb-toggle-controls`,title:`Toggle Controls`,"aria-label":`Toggle Controls`});i.append(h(`span`,{class:`adw-icon adw-icon--sidebar-show`})),i.setAttribute(`slot`,`end`),i.addEventListener(`click`,()=>{r.showSidebar=!r.showSidebar});let a=h(`div`,{slot:`content`,class:`sb-content-pane`},[h(`adw-toolbar-view`,{},[h(`adw-header-bar`,{slot:`top`},[this._backBtn,this._previewTitle,i]),r])]);this._navSplit=h(`adw-navigation-split-view`,{"min-sidebar-width":`220`,"max-sidebar-width":`320`},[t,a]);let o=h(`adw-window`,{class:`sb-window`},[this._navSplit]);this._container.replaceChildren(o)}_exposeGlobal(){globalThis.__storybook={listStories:()=>this.listStories(),openStory:e=>this.openStoryByTitle(e),getCurrentStory:()=>this.getCurrentStory(),setArg:(e,t)=>this.setActiveArg(e,t),getArgs:()=>this.activeStory?.args??null}}};function mountStorybook(e,t){let n=new StorybookWebApp(e,t);return n.mount(),n}export{StorybookWebApp,mountStorybook};

package/src/app2.js

@@ -1 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import{createControlRow as e}from"./controls22.js";import{injectStorybookStyles as t}from"./styles22.js";import"@gjsify/adwaita-web";import{StorybookController as n}from"@gjsify/storybook-core";function h(e,t={},n=[]){let r=document.createElement(e);for(let[e,n]of Object.entries(t))r.setAttribute(e,n);for(let e of n)r.append(e);return r}var StorybookWebApp=class{_controller=new n(this,e=>this._buildControls(e));_options;_container;_listEl;_previewEl;_previewTitle;_controlsGroup;_navSplit;_controlsSplit;_backBtn;_rowByTitle=new Map;constructor(e,t){this._container=e,this._options=t}mount(){t(),this._buildUI(),this._observeBreakpoint(),this._exposeGlobal(),this._controller.mount(this._options.stories,this._options.openFirst!==!1)}_observeBreakpoint(){let apply=()=>this._applyBreakpoint();typeof ResizeObserver<`u`?new ResizeObserver(apply).observe(this._navSplit):globalThis.addEventListener?.(`resize`,apply),apply()}_applyBreakpoint(){let e=this._navSplit.clientWidth;if(e===0)return;let t=e<620,n=e<1e3,r=this._navSplit,i=this._controlsSplit;r.collapsed!==t&&(r.collapsed=t),i.collapsed!==n&&(i.collapsed=n),this._navSplit.removeAttribute(`show-content`),this._backBtn.hidden=!0,i.showSidebar=!n}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)}renderSidebar(e,t){this._listEl.replaceChildren(),this._rowByTitle.clear();for(let{category:n,stories:r}of e){this._listEl.append(h(`div`,{class:`sb-category`},[n]));for(let{instance:e,name:n}of r){let r=h(`div`,{class:`sb-story-row`,role:`button`,tabindex:`0`},[n]);r.addEventListener(`click`,()=>t(e)),r.addEventListener(`keydown`,n=>{(n.key===`Enter`||n.key===` `)&&(n.preventDefault(),t(e))}),this._listEl.append(r),this._rowByTitle.set(e.meta.title,r)}}}markSelected(e){for(let[t,n]of this._rowByTitle)n.classList.toggle(`selected`,t===e)}setPreviewTitle(e){this._previewTitle.setAttribute(`title`,e)}showPreview(e){this._previewEl.replaceChildren(e.element),this._navSplit.collapsed&&this._navSplit.setAttribute(`show-content`,``)}renderControls(e){let t=this._controlsGroup.querySelector(`.adw-preferences-group-listbox`);if(t){t.replaceChildren();for(let n of e)t.append(n.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(){this._listEl=h(`div`,{class:`sb-sidebar-list navigation-sidebar`});let e=h(`div`,{class:`sb-sidebar-scroll`},[this._listEl]),t=h(`div`,{slot:`sidebar`,class:`sb-sidebar-pane`},[h(`adw-toolbar-view`,{},[h(`adw-header-bar`,{slot:`top`},[h(`adw-window-title`,{slot:`center`,title:this._options.title??`Stories`})]),e])]);this._previewEl=h(`div`,{class:`sb-preview-scroll`}),this._controlsGroup=h(`adw-preferences-group`,{title:`Controls`});let n=h(`div`,{slot:`sidebar`,class:`sb-controls-scroll`},[h(`div`,{class:`sb-controls-page`},[this._controlsGroup])]),r=h(`adw-overlay-split-view`,{"sidebar-position":`end`,"show-sidebar":``,"min-sidebar-width":`280`,"max-sidebar-width":`360`},[h(`div`,{slot:`content`,class:`sb-preview-pane`},[this._previewEl]),n]);this._controlsSplit=r,this._backBtn=h(`button`,{class:`adw-header-btn sb-back-btn`,slot:`start`,title:`Back to stories`,"aria-label":`Back to stories`}),this._backBtn.append(h(`span`,{class:`adw-icon adw-icon--go-previous`})),this._backBtn.hidden=!0,this._backBtn.addEventListener(`click`,()=>this._navSplit.removeAttribute(`show-content`)),this._previewTitle=h(`adw-window-title`,{slot:`center`,title:`Preview`});let i=h(`button`,{class:`adw-header-btn sb-toggle-controls`,title:`Toggle Controls`,"aria-label":`Toggle Controls`});i.append(h(`span`,{class:`adw-icon adw-icon--sidebar-show`})),i.setAttribute(`slot`,`end`),i.addEventListener(`click`,()=>{r.showSidebar=!r.showSidebar});let a=h(`div`,{slot:`content`,class:`sb-content-pane`},[h(`adw-toolbar-view`,{},[h(`adw-header-bar`,{slot:`top`},[this._backBtn,this._previewTitle,i]),r])]);this._navSplit=h(`adw-navigation-split-view`,{"min-sidebar-width":`220`,"max-sidebar-width":`320`},[t,a]);let o=h(`adw-window`,{class:`sb-window`},[this._navSplit]);this._container.replaceChildren(o)}_exposeGlobal(){globalThis.__storybook={listStories:()=>this.listStories(),openStory:e=>this.openStoryByTitle(e),getCurrentStory:()=>this.getCurrentStory(),setArg:(e,t)=>this.setActiveArg(e,t),getArgs:()=>this.activeStory?.args??null}}};function mountStorybook(e,t){let n=new StorybookWebApp(e,t);return n.mount(),n}export{StorybookWebApp,mountStorybook};

package/src/controls.js

@@ -1 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import{bindControl as e}from"@gjsify/storybook-core";function createControlRow(n,r){return e(n,r,t)}const t={text(e){let t=document.createElement(`adw-entry-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`changed`,e=>cb(e.detail.text)),{node:t,get:()=>t.text??``,set:e=>{t.text=e},onChange:e=>{cb=e}}},color(e,t){let n=document.createElement(`adw-action-row`);n.setAttribute(`title`,e),t&&n.setAttribute(`subtitle`,t);let r=document.createElement(`input`);r.type=`color`,r.className=`sb-color-input`,r.slot=`suffix`,n.appendChild(r);let cb=()=>{};return r.addEventListener(`input`,()=>cb(r.value)),{node:n,get:()=>r.value,set:e=>{r.value=e},onChange:e=>{cb=e}}},boolean(e){let t=document.createElement(`adw-switch-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`notify::active`,e=>cb(e.detail.active)),{node:t,get:()=>t.hasAttribute(`active`),set:e=>{t.toggleAttribute(`active`,e)},onChange:e=>{cb=e}}},number(e){let t=document.createElement(`adw-spin-row`);t.setAttribute(`title`,label(e)),t.setAttribute(`min`,String(e.min??0)),t.setAttribute(`max`,String(e.max??100)),t.setAttribute(`step`,String(e.step??1));let cb=()=>{};return t.addEventListener(`notify::value`,e=>cb(e.detail.value)),{node:t,get:()=>t.value??0,set:e=>{t.value=e},onChange:e=>{cb=e}}},select(e){let t=e.options??[],n=document.createElement(`adw-combo-row`);n.setAttribute(`title`,label(e)),n.setAttribute(`items`,JSON.stringify(t.map(e=>e.label)));let cb=()=>{};return n.addEventListener(`notify::selected`,e=>cb(e.detail.selected)),{node:n,get:()=>n.selected??0,set:e=>{n.selected=e},onChange:e=>{cb=e}}},range(e){let t=e.min??0,n=e.max??100,r=e.step??1,i=Number.isInteger(r),format=e=>i?String(Math.round(e)):e.toFixed(2),a=document.createElement(`div`);a.className=`sb-range-row`;let o=document.createElement(`div`);o.className=`sb-range-header`;let s=document.createElement(`span`);s.className=`sb-range-title`,s.textContent=label(e);let c=document.createElement(`span`);c.className=`sb-range-value`,o.append(s,c);let l=document.createElement(`input`);if(l.type=`range`,l.className=`sb-range-input`,l.min=String(t),l.max=String(n),l.step=String(r),e.description){let t=document.createElement(`span`);t.className=`sb-range-description`,t.textContent=e.description,a.append(o,t,l)}else a.append(o,l);let cb=()=>{};return l.addEventListener(`input`,()=>{let e=parseFloat(l.value);c.textContent=format(e),cb(e)}),{node:a,get:()=>parseFloat(l.value),set:e=>{l.value=String(e),c.textContent=format(e)},onChange:e=>{cb=e}}}};function label(e){return e.label||e.name}export{createControlRow};

package/src/controls2.js

@@ -1 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import{bindControl as e}from"@gjsify/storybook-core";function createControlRow(n,r){return e(n,r,t)}const t={text(e){let t=document.createElement(`adw-entry-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`changed`,e=>cb(e.detail.text)),{node:t,get:()=>t.text??``,set:e=>{t.text=e},onChange:e=>{cb=e}}},color(e,t){let n=document.createElement(`adw-action-row`);n.setAttribute(`title`,e),t&&n.setAttribute(`subtitle`,t);let r=document.createElement(`input`);r.type=`color`,r.className=`sb-color-input`,r.slot=`suffix`,n.appendChild(r);let cb=()=>{};return r.addEventListener(`input`,()=>cb(r.value)),{node:n,get:()=>r.value,set:e=>{r.value=e},onChange:e=>{cb=e}}},boolean(e){let t=document.createElement(`adw-switch-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`notify::active`,e=>cb(e.detail.active)),{node:t,get:()=>t.hasAttribute(`active`),set:e=>{t.toggleAttribute(`active`,e)},onChange:e=>{cb=e}}},number(e){let t=document.createElement(`adw-spin-row`);t.setAttribute(`title`,label(e)),t.setAttribute(`min`,String(e.min??0)),t.setAttribute(`max`,String(e.max??100)),t.setAttribute(`step`,String(e.step??1));let cb=()=>{};return t.addEventListener(`notify::value`,e=>cb(e.detail.value)),{node:t,get:()=>t.value??0,set:e=>{t.value=e},onChange:e=>{cb=e}}},select(e){let t=e.options??[],n=document.createElement(`adw-combo-row`);n.setAttribute(`title`,label(e)),n.setAttribute(`items`,JSON.stringify(t.map(e=>e.label)));let cb=()=>{};return n.addEventListener(`notify::selected`,e=>cb(e.detail.selected)),{node:n,get:()=>n.selected??0,set:e=>{n.selected=e},onChange:e=>{cb=e}}},range(e){let t=e.min??0,n=e.max??100,r=e.step??1,i=Number.isInteger(r),format=e=>i?String(Math.round(e)):e.toFixed(2),a=document.createElement(`div`);a.className=`sb-range-row`;let o=document.createElement(`div`);o.className=`sb-range-header`;let s=document.createElement(`span`);s.className=`sb-range-title`,s.textContent=label(e);let c=document.createElement(`span`);c.className=`sb-range-value`,o.append(s,c);let l=document.createElement(`input`);if(l.type=`range`,l.className=`sb-range-input`,l.min=String(t),l.max=String(n),l.step=String(r),e.description){let t=document.createElement(`span`);t.className=`sb-range-description`,t.textContent=e.description,a.append(o,t,l)}else a.append(o,l);let cb=()=>{};return l.addEventListener(`input`,()=>{let e=parseFloat(l.value);c.textContent=format(e),cb(e)}),{node:a,get:()=>parseFloat(l.value),set:e=>{l.value=String(e),c.textContent=format(e)},onChange:e=>{cb=e}}}};function label(e){return e.label||e.name}export{createControlRow};

package/src/controls22.js

@@ -1 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import"./_virtual/_rolldown/runtime22.js";import{bindControl as e}from"@gjsify/storybook-core";function createControlRow(n,r){return e(n,r,t)}const t={text(e){let t=document.createElement(`adw-entry-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`changed`,e=>cb(e.detail.text)),{node:t,get:()=>t.text??``,set:e=>{t.text=e},onChange:e=>{cb=e}}},color(e,t){let n=document.createElement(`adw-action-row`);n.setAttribute(`title`,e),t&&n.setAttribute(`subtitle`,t);let r=document.createElement(`input`);r.type=`color`,r.className=`sb-color-input`,r.slot=`suffix`,n.appendChild(r);let cb=()=>{};return r.addEventListener(`input`,()=>cb(r.value)),{node:n,get:()=>r.value,set:e=>{r.value=e},onChange:e=>{cb=e}}},boolean(e){let t=document.createElement(`adw-switch-row`);t.setAttribute(`title`,e);let cb=()=>{};return t.addEventListener(`notify::active`,e=>cb(e.detail.active)),{node:t,get:()=>t.hasAttribute(`active`),set:e=>{t.toggleAttribute(`active`,e)},onChange:e=>{cb=e}}},number(e){let t=document.createElement(`adw-spin-row`);t.setAttribute(`title`,label(e)),t.setAttribute(`min`,String(e.min??0)),t.setAttribute(`max`,String(e.max??100)),t.setAttribute(`step`,String(e.step??1));let cb=()=>{};return t.addEventListener(`notify::value`,e=>cb(e.detail.value)),{node:t,get:()=>t.value??0,set:e=>{t.value=e},onChange:e=>{cb=e}}},select(e){let t=e.options??[],n=document.createElement(`adw-combo-row`);n.setAttribute(`title`,label(e)),n.setAttribute(`items`,JSON.stringify(t.map(e=>e.label)));let cb=()=>{};return n.addEventListener(`notify::selected`,e=>cb(e.detail.selected)),{node:n,get:()=>n.selected??0,set:e=>{n.selected=e},onChange:e=>{cb=e}}},range(e){let t=e.min??0,n=e.max??100,r=e.step??1,i=Number.isInteger(r),format=e=>i?String(Math.round(e)):e.toFixed(2),a=document.createElement(`div`);a.className=`sb-range-row`;let o=document.createElement(`div`);o.className=`sb-range-header`;let s=document.createElement(`span`);s.className=`sb-range-title`,s.textContent=label(e);let c=document.createElement(`span`);c.className=`sb-range-value`,o.append(s,c);let l=document.createElement(`input`);if(l.type=`range`,l.className=`sb-range-input`,l.min=String(t),l.max=String(n),l.step=String(r),e.description){let t=document.createElement(`span`);t.className=`sb-range-description`,t.textContent=e.description,a.append(o,t,l)}else a.append(o,l);let cb=()=>{};return l.addEventListener(`input`,()=>{let e=parseFloat(l.value);c.textContent=format(e),cb(e)}),{node:a,get:()=>parseFloat(l.value),set:e=>{l.value=String(e),c.textContent=format(e)},onChange:e=>{cb=e}}}};function label(e){return e.label||e.name}export{createControlRow};

package/src/index.js

@@ -1 +0,0 @@
-import{createControlRow as e}from"./controls2.js";import{e as t,injectStorybookStyles as n}from"./styles2.js";import{StoryElement as r}from"./story-element2.js";import{e as i}from"./registry2.js";import{StorybookWebApp as a,mountStorybook as o}from"./app2.js";import{isWebStoryModule as s}from"./types2.js";import{ControlType as c,argsFromControls as l}from"@gjsify/stories";export{c as ControlType,t as STORYBOOK_WEB_CSS,r as StoryElement,i as StoryRegistry,a as StorybookWebApp,l as argsFromControls,e as createControlRow,n as injectStorybookStyles,s as isWebStoryModule,o as mountStorybook};

package/src/registry.js

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

package/src/registry2.js

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

package/src/story-element.js

@@ -1 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import{StoryViewBase as e}from"@gjsify/storybook-core";var StoryElement=class extends e{constructor(e,t=`Default`,n){super(),this.initBase(e,t,n)}get element(){return this.root}createChrome(e,t){return t?{root:t,hasStage:!1,setStageContent:()=>{},setChromeText:()=>{}}:this._installDefaultChrome()}_installDefaultChrome(){let e=document.createElement(`div`);e.className=`sb-story-page`;let t=document.createElement(`div`);t.className=`sb-story-clamp`;let n=document.createElement(`div`);n.className=`sb-story-group`;let r=document.createElement(`div`);r.className=`sb-story-group-header`;let i=document.createElement(`span`);i.className=`sb-story-group-title`;let a=document.createElement(`span`);a.className=`sb-story-group-description`,r.append(i,a);let o=document.createElement(`div`);return o.className=`story-stage`,n.append(r,o),t.append(n),e.append(t),{root:e,hasStage:!0,setStageContent:e=>o.replaceChildren(e),setChromeText:(e,t)=>{i.textContent=e,a.textContent=t,a.hidden=t.length===0}}}};export{StoryElement};

package/src/story-element2.js

@@ -1 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import{StoryViewBase as e}from"@gjsify/storybook-core";var StoryElement=class extends e{constructor(e,t=`Default`,n){super(),this.initBase(e,t,n)}get element(){return this.root}createChrome(e,t){return t?{root:t,hasStage:!1,setStageContent:()=>{},setChromeText:()=>{}}:this._installDefaultChrome()}_installDefaultChrome(){let e=document.createElement(`div`);e.className=`sb-story-page`;let t=document.createElement(`div`);t.className=`sb-story-clamp`;let n=document.createElement(`div`);n.className=`sb-story-group`;let r=document.createElement(`div`);r.className=`sb-story-group-header`;let i=document.createElement(`span`);i.className=`sb-story-group-title`;let a=document.createElement(`span`);a.className=`sb-story-group-description`,r.append(i,a);let o=document.createElement(`div`);return o.className=`story-stage`,n.append(r,o),t.append(n),e.append(t),{root:e,hasStage:!0,setStageContent:e=>o.replaceChildren(e),setChromeText:(e,t)=>{i.textContent=e,a.textContent=t,a.hidden=t.length===0}}}};export{StoryElement};

package/src/styles.js

@@ -1,198 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";const e=`
-.sb-window {
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-    min-height: 0;
-}
-
-/* Each pane in the outer split view is a flex column that fills its height. */
-.sb-sidebar-pane,
-.sb-content-pane {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    min-width: 0;
-    flex: 1 1 auto;
-}
-
-/* The toolbar-view content holds either a scroller (sidebar) or the split view
-   (content); the inner panes own the scrolling, so this level never scrolls. */
-.sb-sidebar-pane adw-toolbar-view > .adw-toolbar-view-content,
-.sb-content-pane adw-toolbar-view > .adw-toolbar-view-content {
-    overflow: hidden;
-}
-
-/* Background scheme: the content header + preview + controls all sit on the
-   window (story) background as one surface; only the left story-list column
-   (its header + list) keeps the distinct sidebar shade. Matches the native
-   renderer. The default adw-header-bar background is its own headerbar shade,
-   so override it per pane here. */
-.sb-content-pane adw-header-bar {
-    background-color: var(--window-bg-color);
-}
-.sb-sidebar-pane adw-header-bar {
-    background-color: var(--sidebar-bg-color);
-}
-
-.sb-sidebar-scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    background-color: var(--sidebar-bg-color);
-}
-
-/* --- Story list (mirrors GTK .navigation-sidebar) --- */
-.sb-sidebar-list {
-    padding: var(--spacing-xs);
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-}
-
-.sb-category {
-    font-size: var(--font-size-small);
-    font-weight: 700;
-    opacity: var(--dim-opacity);
-    padding: 10px var(--spacing-m) 4px;
-}
-
-.sb-story-row {
-    padding: var(--spacing-xs) var(--spacing-m);
-    margin: 0 var(--spacing-xs);
-    border-radius: var(--button-radius);
-    cursor: pointer;
-    color: var(--window-fg-color);
-    font-size: var(--font-size-base);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.sb-story-row:hover {
-    background-color: var(--button-bg-color);
-}
-
-.sb-story-row.selected {
-    background-color: var(--accent-bg-color);
-    color: var(--accent-fg-color);
-}
-
-/* --- Preview area --- */
-.sb-preview-scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    min-width: 0;
-    overflow: auto;
-    background-color: var(--window-bg-color);
-}
-
-.sb-story-page {
-    display: flex;
-    justify-content: center;
-    padding: var(--spacing-xl) var(--spacing-m);
-    min-height: 100%;
-    box-sizing: border-box;
-}
-
-.sb-story-clamp {
-    width: 100%;
-    max-width: 600px;
-}
-
-.sb-story-group-header {
-    padding: var(--spacing-xs) 2px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.sb-story-group-title {
-    font-size: var(--font-size-heading);
-    font-weight: 700;
-    color: var(--window-fg-color);
-}
-
-.sb-story-group-description {
-    font-size: var(--font-size-base);
-    opacity: var(--dim-opacity);
-    color: var(--window-fg-color);
-}
-
-/* Centered, dashed-framed preview stage (mirrors the native .story-stage). */
-.story-stage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-m);
-    padding: var(--spacing-l);
-    margin-top: var(--spacing-s);
-    border: 1px dashed rgba(127, 127, 127, 0.28);
-    border-radius: var(--card-radius);
-    min-height: 80px;
-}
-
-/* --- Controls panel --- */
-.sb-controls-scroll {
-    height: 100%;
-    overflow-y: auto;
-    background-color: var(--window-bg-color);
-}
-
-.sb-controls-page {
-    padding: var(--spacing-l);
-}
-
-/* Range-control card (mirrors the native .story-range-row). */
-.sb-range-row {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-m);
-    border-bottom: 1px solid var(--card-shade-color);
-}
-
-.sb-range-row:last-child {
-    border-bottom: none;
-}
-
-.sb-range-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: var(--spacing-m);
-}
-
-.sb-range-title {
-    font-size: var(--font-size-base);
-    font-weight: 700;
-    color: var(--card-fg-color);
-}
-
-.sb-range-value {
-    font-size: var(--font-size-base);
-    font-variant-numeric: tabular-nums;
-    opacity: var(--dim-opacity);
-}
-
-.sb-range-description {
-    font-size: var(--font-size-small);
-    opacity: var(--dim-opacity);
-}
-
-.sb-range-input {
-    width: 100%;
-    accent-color: var(--accent-bg-color);
-}
-
-.sb-color-input {
-    width: 42px;
-    height: 28px;
-    padding: 0;
-    border: 1px solid var(--card-shade-color);
-    border-radius: var(--button-radius);
-    background: none;
-    cursor: pointer;
-}
-`;let t=!1;function injectStorybookStyles(){if(t||typeof document>`u`)return;if(document.getElementById(`adwaita-storybook-style`)){t=!0;return}let n=document.createElement(`style`);n.id=`adwaita-storybook-style`,n.textContent=e,document.head.appendChild(n),t=!0}export{e as STORYBOOK_WEB_CSS,injectStorybookStyles};

package/src/styles2.js

@@ -1,198 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";const e=`
-.sb-window {
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-    min-height: 0;
-}
-
-/* Each pane in the outer split view is a flex column that fills its height. */
-.sb-sidebar-pane,
-.sb-content-pane {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    min-width: 0;
-    flex: 1 1 auto;
-}
-
-/* The toolbar-view content holds either a scroller (sidebar) or the split view
-   (content); the inner panes own the scrolling, so this level never scrolls. */
-.sb-sidebar-pane adw-toolbar-view > .adw-toolbar-view-content,
-.sb-content-pane adw-toolbar-view > .adw-toolbar-view-content {
-    overflow: hidden;
-}
-
-/* Background scheme: the content header + preview + controls all sit on the
-   window (story) background as one surface; only the left story-list column
-   (its header + list) keeps the distinct sidebar shade. Matches the native
-   renderer. The default adw-header-bar background is its own headerbar shade,
-   so override it per pane here. */
-.sb-content-pane adw-header-bar {
-    background-color: var(--window-bg-color);
-}
-.sb-sidebar-pane adw-header-bar {
-    background-color: var(--sidebar-bg-color);
-}
-
-.sb-sidebar-scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    background-color: var(--sidebar-bg-color);
-}
-
-/* --- Story list (mirrors GTK .navigation-sidebar) --- */
-.sb-sidebar-list {
-    padding: var(--spacing-xs);
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-}
-
-.sb-category {
-    font-size: var(--font-size-small);
-    font-weight: 700;
-    opacity: var(--dim-opacity);
-    padding: 10px var(--spacing-m) 4px;
-}
-
-.sb-story-row {
-    padding: var(--spacing-xs) var(--spacing-m);
-    margin: 0 var(--spacing-xs);
-    border-radius: var(--button-radius);
-    cursor: pointer;
-    color: var(--window-fg-color);
-    font-size: var(--font-size-base);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.sb-story-row:hover {
-    background-color: var(--button-bg-color);
-}
-
-.sb-story-row.selected {
-    background-color: var(--accent-bg-color);
-    color: var(--accent-fg-color);
-}
-
-/* --- Preview area --- */
-.sb-preview-scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    min-width: 0;
-    overflow: auto;
-    background-color: var(--window-bg-color);
-}
-
-.sb-story-page {
-    display: flex;
-    justify-content: center;
-    padding: var(--spacing-xl) var(--spacing-m);
-    min-height: 100%;
-    box-sizing: border-box;
-}
-
-.sb-story-clamp {
-    width: 100%;
-    max-width: 600px;
-}
-
-.sb-story-group-header {
-    padding: var(--spacing-xs) 2px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.sb-story-group-title {
-    font-size: var(--font-size-heading);
-    font-weight: 700;
-    color: var(--window-fg-color);
-}
-
-.sb-story-group-description {
-    font-size: var(--font-size-base);
-    opacity: var(--dim-opacity);
-    color: var(--window-fg-color);
-}
-
-/* Centered, dashed-framed preview stage (mirrors the native .story-stage). */
-.story-stage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-m);
-    padding: var(--spacing-l);
-    margin-top: var(--spacing-s);
-    border: 1px dashed rgba(127, 127, 127, 0.28);
-    border-radius: var(--card-radius);
-    min-height: 80px;
-}
-
-/* --- Controls panel --- */
-.sb-controls-scroll {
-    height: 100%;
-    overflow-y: auto;
-    background-color: var(--window-bg-color);
-}
-
-.sb-controls-page {
-    padding: var(--spacing-l);
-}
-
-/* Range-control card (mirrors the native .story-range-row). */
-.sb-range-row {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-m);
-    border-bottom: 1px solid var(--card-shade-color);
-}
-
-.sb-range-row:last-child {
-    border-bottom: none;
-}
-
-.sb-range-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: var(--spacing-m);
-}
-
-.sb-range-title {
-    font-size: var(--font-size-base);
-    font-weight: 700;
-    color: var(--card-fg-color);
-}
-
-.sb-range-value {
-    font-size: var(--font-size-base);
-    font-variant-numeric: tabular-nums;
-    opacity: var(--dim-opacity);
-}
-
-.sb-range-description {
-    font-size: var(--font-size-small);
-    opacity: var(--dim-opacity);
-}
-
-.sb-range-input {
-    width: 100%;
-    accent-color: var(--accent-bg-color);
-}
-
-.sb-color-input {
-    width: 42px;
-    height: 28px;
-    padding: 0;
-    border: 1px solid var(--card-shade-color);
-    border-radius: var(--button-radius);
-    background: none;
-    cursor: pointer;
-}
-`;let t=!1;function injectStorybookStyles(){if(t||typeof document>`u`)return;if(document.getElementById(`adwaita-storybook-style`)){t=!0;return}let n=document.createElement(`style`);n.id=`adwaita-storybook-style`,n.textContent=e,document.head.appendChild(n),t=!0}export{e,injectStorybookStyles};

package/src/styles22.js

@@ -1,198 +0,0 @@
-import"./_virtual/_rolldown/runtime.js";import"./_virtual/_rolldown/runtime2.js";import"./_virtual/_rolldown/runtime22.js";let e=!1;function injectStorybookStyles(){if(e||typeof document>`u`)return;if(document.getElementById(`adwaita-storybook-style`)){e=!0;return}let t=document.createElement(`style`);t.id=`adwaita-storybook-style`,t.textContent=`
-.sb-window {
-    width: 100%;
-    height: 100%;
-    min-width: 0;
-    min-height: 0;
-}
-
-/* Each pane in the outer split view is a flex column that fills its height. */
-.sb-sidebar-pane,
-.sb-content-pane {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-    min-width: 0;
-    flex: 1 1 auto;
-}
-
-/* The toolbar-view content holds either a scroller (sidebar) or the split view
-   (content); the inner panes own the scrolling, so this level never scrolls. */
-.sb-sidebar-pane adw-toolbar-view > .adw-toolbar-view-content,
-.sb-content-pane adw-toolbar-view > .adw-toolbar-view-content {
-    overflow: hidden;
-}
-
-/* Background scheme: the content header + preview + controls all sit on the
-   window (story) background as one surface; only the left story-list column
-   (its header + list) keeps the distinct sidebar shade. Matches the native
-   renderer. The default adw-header-bar background is its own headerbar shade,
-   so override it per pane here. */
-.sb-content-pane adw-header-bar {
-    background-color: var(--window-bg-color);
-}
-.sb-sidebar-pane adw-header-bar {
-    background-color: var(--sidebar-bg-color);
-}
-
-.sb-sidebar-scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    background-color: var(--sidebar-bg-color);
-}
-
-/* --- Story list (mirrors GTK .navigation-sidebar) --- */
-.sb-sidebar-list {
-    padding: var(--spacing-xs);
-    display: flex;
-    flex-direction: column;
-    gap: 1px;
-}
-
-.sb-category {
-    font-size: var(--font-size-small);
-    font-weight: 700;
-    opacity: var(--dim-opacity);
-    padding: 10px var(--spacing-m) 4px;
-}
-
-.sb-story-row {
-    padding: var(--spacing-xs) var(--spacing-m);
-    margin: 0 var(--spacing-xs);
-    border-radius: var(--button-radius);
-    cursor: pointer;
-    color: var(--window-fg-color);
-    font-size: var(--font-size-base);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.sb-story-row:hover {
-    background-color: var(--button-bg-color);
-}
-
-.sb-story-row.selected {
-    background-color: var(--accent-bg-color);
-    color: var(--accent-fg-color);
-}
-
-/* --- Preview area --- */
-.sb-preview-scroll {
-    flex: 1 1 auto;
-    min-height: 0;
-    min-width: 0;
-    overflow: auto;
-    background-color: var(--window-bg-color);
-}
-
-.sb-story-page {
-    display: flex;
-    justify-content: center;
-    padding: var(--spacing-xl) var(--spacing-m);
-    min-height: 100%;
-    box-sizing: border-box;
-}
-
-.sb-story-clamp {
-    width: 100%;
-    max-width: 600px;
-}
-
-.sb-story-group-header {
-    padding: var(--spacing-xs) 2px;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.sb-story-group-title {
-    font-size: var(--font-size-heading);
-    font-weight: 700;
-    color: var(--window-fg-color);
-}
-
-.sb-story-group-description {
-    font-size: var(--font-size-base);
-    opacity: var(--dim-opacity);
-    color: var(--window-fg-color);
-}
-
-/* Centered, dashed-framed preview stage (mirrors the native .story-stage). */
-.story-stage {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacing-m);
-    padding: var(--spacing-l);
-    margin-top: var(--spacing-s);
-    border: 1px dashed rgba(127, 127, 127, 0.28);
-    border-radius: var(--card-radius);
-    min-height: 80px;
-}
-
-/* --- Controls panel --- */
-.sb-controls-scroll {
-    height: 100%;
-    overflow-y: auto;
-    background-color: var(--window-bg-color);
-}
-
-.sb-controls-page {
-    padding: var(--spacing-l);
-}
-
-/* Range-control card (mirrors the native .story-range-row). */
-.sb-range-row {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-m);
-    border-bottom: 1px solid var(--card-shade-color);
-}
-
-.sb-range-row:last-child {
-    border-bottom: none;
-}
-
-.sb-range-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    gap: var(--spacing-m);
-}
-
-.sb-range-title {
-    font-size: var(--font-size-base);
-    font-weight: 700;
-    color: var(--card-fg-color);
-}
-
-.sb-range-value {
-    font-size: var(--font-size-base);
-    font-variant-numeric: tabular-nums;
-    opacity: var(--dim-opacity);
-}
-
-.sb-range-description {
-    font-size: var(--font-size-small);
-    opacity: var(--dim-opacity);
-}
-
-.sb-range-input {
-    width: 100%;
-    accent-color: var(--accent-bg-color);
-}
-
-.sb-color-input {
-    width: 42px;
-    height: 28px;
-    padding: 0;
-    border: 1px solid var(--card-shade-color);
-    border-radius: var(--button-radius);
-    background: none;
-    cursor: pointer;
-}
-`,document.head.appendChild(t),e=!0}export{injectStorybookStyles};

package/src/types.js

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

package/src/types2.js

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