component-previewer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Edmond Ndanji
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,126 @@
+# component-previewer
+
+Render a single React Native component in isolation, in your app's **real provider shell**, with chosen props/state, without booting the rest of the app. Uses **Storybook-compatible CSF** (`*.stories.tsx`) with **zero setup** (no `.rnstorybook/`, no codegen manifest, no Metro wrapper), and runs on **both surfaces**: the iOS/Android **simulator** (true native) and a **browser** (via react-native-web).
+
+The differentiator: your **real `AppShell` wraps every story** (single source of truth, can't drift), and CSF `decorators` run inside it. Edit a story's `args` **live on-device** with the built-in controls panel.
+
+## Install
+
+```bash
+pnpm add -D component-previewer        # or npm i -D / yarn add -D
+```
+
+Peer dependencies: `react`, `react-native`.
+
+## Use it in your own app (the contract)
+
+1. **Expose your real provider shell** as one component (theme, query client, i18n, safe-area, …):
+   ```tsx
+   // AppProviders.tsx
+   export function AppProviders({ children }) { /* your real providers */ }
+   ```
+2. **Write CSF stories** (`*.stories.tsx`), the exact Storybook format, no import from this tool needed:
+   ```tsx
+   // Button.stories.tsx
+   import { Button } from './Button';
+   export default { title: 'Button', component: Button, args: { label: 'Press me' } };
+   export const Primary = { args: { label: 'Buy now' } };
+   export const Disabled = { args: { disabled: true } };
+   // optional per-story providers run INSIDE your real shell:
+   // export const Boxed = { args: {...}, decorators: [(Story) => <View>…<Story/></View>] };
+   ```
+3. **Wire the boot flag** at your app root (~10 lines). Discovery is zero-codegen:
+   ```tsx
+   import { Previewer, fromRequireContext } from 'component-previewer';
+
+   const ctx = require.context('./', true, /\.stories\.tsx$/);            // Metro / native + Expo web
+   const PREVIEW = process.env.EXPO_PUBLIC_PREVIEW === '1';
+   const Shell = ({ children }) => <AppProviders>{children}</AppProviders>;
+
+   export default function App() {
+     return PREVIEW
+       ? <Previewer stories={fromRequireContext(ctx)} shell={Shell} />
+       : <YourApp />;
+   }
+   ```
+   On a pure-Vite host, use `fromGlob(import.meta.glob('./**/*.stories.tsx', { eager: true }))` instead of `fromRequireContext`.
+
+## Live props controls
+
+Open any story and tap **Controls** to edit its `args` on-device and re-render live (the Storybook-controls equivalent). Control kinds are inferred from the arg **values** with zero config:
+
+| value type | control          |
+| ---------- | ---------------- |
+| `string`   | text field       |
+| `number`   | numeric field    |
+| `boolean`  | switch           |
+
+Functions, objects, arrays, `null`/`undefined` are skipped (passed through untouched). For a dropdown, declare optional **CSF `argTypes`** on a story (also used for ranges):
+
+```tsx
+export default {
+  title: 'Badge',
+  component: Badge,
+  args: { tone: 'neutral' },
+  argTypes: { tone: { control: 'select', options: ['neutral', 'success', 'danger'] } },
+};
+// 'range' is supported too and renders as a clamped number field:
+// argTypes: { size: { control: 'range', min: 16, max: 256, step: 8 } }
+```
+
+A **Reset** button restores the story's declared args. Edits never leak between stories.
+
+## Run the example
+
+The repo ships an Expo example app.
+
+**Native (simulator / device):**
+```bash
+cd example
+EXPO_PUBLIC_PREVIEW=1 npx expo start   # press i, or scan with Expo Go
+```
+Boots into a searchable picker of discovered stories; selecting one renders it natively inside the real shell. This is the surface that shows Skia/glass/native modules (the example's `BlurCard` story renders a real native blur).
+
+**Browser (no simulator):**
+```bash
+EXPO_PUBLIC_PREVIEW=1 npx expo start --web
+```
+Same picker via react-native-web. Native modules can't render here (documented cap).
+
+Without the flag, the app boots its normal screen instead. Deep-link straight into one story with `EXPO_PUBLIC_PREVIEW_STORY=button--primary`.
+
+## API
+
+- `fromRequireContext(ctx)` / `fromGlob(glob)` → `StoryEntry[]` — zero-codegen discovery.
+- `<Previewer stories={…} shell={…} initialStoryId? />` — the picker + stage UI; `initialStoryId` (or `EXPO_PUBLIC_PREVIEW_STORY`) deep-links straight into one story.
+- `inferControls(args, argTypes?)` → `Control[]` — pure; the control descriptors that drive the on-device panel.
+- `composeStory(entry, Shell?, args?)` — `Shell` (outer) > decorators (inner) > story; pure. Pass `args` to render an override (the live-edit path).
+- `parseCsfModule(id, module)` → `StoryEntry[]` — parse one CSF module to entries.
+
+Exported types: `StoryEntry`, `Meta`, `Story`, `Args`, `ArgType`, `ArgTypes`, `ControlKind`, `Control`, `Decorator`, `ShellComponent`, `RequireContext`, `GlobModules`, `CsfModule`.
+
+## Develop the library
+
+This is a **pnpm workspace**: the `example/` app consumes the library **source** via Metro (bob's metro-config + the `source` export condition), so **editing `src/` hot-reloads in the example, no rebuild or repack**.
+
+```bash
+pnpm install     # once — links the workspace
+pnpm lint        # eslint (typescript-eslint)
+pnpm typecheck   # tsc --noEmit
+pnpm test        # vitest (CSF parsing, discovery, shell compose, control inference)
+pnpm build       # react-native-builder-bob → lib/module (ESM) + lib/typescript (.d.ts)
+```
+
+Build/packaging: `react-native-builder-bob` (ESM `module` + `typescript` targets), `exports` map with a `source` condition, MIT licensed. See [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## Status
+
+- **Core:** CSF parsing, zero-codegen discovery (`require.context` / `import.meta.glob`), registry, real-shell compose. Pure and unit-tested.
+- **Native backend:** boot-flag entry swap + in-app picker + real-shell render + deep-link, verified on the iOS simulator (including a native `expo-blur` story).
+- **Web backend:** renders the same CSF stories via react-native-web (native-module cap documented).
+- **Live props controls:** value-inferred text/number/boolean + CSF `argTypes` select/range, on-device, live.
+- **Roadmap:** TS-type-driven prop controls (auto-infer from prop types), VS Code extension, more CSF decorator edge cases.
+
+## License
+
+[MIT](./LICENSE)

package/lib/module/PreviewControls.js

@@ -0,0 +1,177 @@
+"use strict";
+
+import React from 'react';
+import { Pressable, ScrollView, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Dependency-free controls panel (bottom sheet). Neutral chrome — the host theme
+// applies to the previewed story, not here. Each control edits one arg live.
+export function PreviewControls({
+  controls,
+  onChange,
+  onReset
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.sheet,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: "Props"
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: onReset,
+        accessibilityLabel: "Reset props",
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.reset,
+          children: "Reset"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      keyboardShouldPersistTaps: "handled",
+      children: controls.map(c => /*#__PURE__*/_jsxs(View, {
+        style: styles.row,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          children: c.name
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.control,
+          children: /*#__PURE__*/_jsx(ControlInput, {
+            control: c,
+            onChange: v => onChange(c.name, v)
+          })
+        })]
+      }, c.name))
+    })]
+  });
+}
+function ControlInput({
+  control,
+  onChange
+}) {
+  switch (control.kind) {
+    case 'boolean':
+      return /*#__PURE__*/_jsx(Switch, {
+        value: control.value,
+        onValueChange: onChange
+      });
+    case 'number':
+      return /*#__PURE__*/_jsx(TextInput, {
+        style: styles.input,
+        keyboardType: "numeric",
+        value: String(control.value),
+        onChangeText: text => {
+          const n = Number(text);
+          if (text.trim() === '' || Number.isNaN(n)) return; // ignore non-numeric input
+          let next = n;
+          if (control.min != null) next = Math.max(control.min, next);
+          if (control.max != null) next = Math.min(control.max, next);
+          onChange(next);
+        }
+      });
+    case 'select':
+      return /*#__PURE__*/_jsx(View, {
+        style: styles.options,
+        children: control.options.map(opt => {
+          const selected = opt === control.value;
+          return /*#__PURE__*/_jsx(Pressable, {
+            style: [styles.pill, selected && styles.pillSelected],
+            onPress: () => onChange(opt),
+            children: /*#__PURE__*/_jsx(Text, {
+              style: [styles.pillText, selected && styles.pillTextSelected],
+              children: String(opt)
+            })
+          }, String(opt));
+        })
+      });
+    default:
+      // 'text'
+      return /*#__PURE__*/_jsx(TextInput, {
+        style: styles.input,
+        value: control.value,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        onChangeText: onChange
+      });
+  }
+}
+const styles = StyleSheet.create({
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    maxHeight: '45%',
+    backgroundColor: '#1a1a1c',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 28,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#333'
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8
+  },
+  title: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '700'
+  },
+  reset: {
+    color: '#7aa2ff',
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+    gap: 12
+  },
+  label: {
+    color: '#cbcbd2',
+    fontSize: 14,
+    width: 96
+  },
+  control: {
+    flex: 1,
+    alignItems: 'flex-end'
+  },
+  input: {
+    color: '#fff',
+    backgroundColor: '#262629',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    minWidth: 120,
+    width: '100%',
+    textAlign: 'right'
+  },
+  options: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    gap: 6
+  },
+  pill: {
+    backgroundColor: '#262629',
+    borderRadius: 999,
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  pillSelected: {
+    backgroundColor: '#7aa2ff'
+  },
+  pillText: {
+    color: '#cbcbd2',
+    fontSize: 13,
+    fontWeight: '600'
+  },
+  pillTextSelected: {
+    color: '#10131a'
+  }
+});
+//# sourceMappingURL=PreviewControls.js.map

package/lib/module/PreviewControls.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Pressable","ScrollView","StyleSheet","Switch","Text","TextInput","View","jsx","_jsx","jsxs","_jsxs","PreviewControls","controls","onChange","onReset","style","styles","sheet","children","header","title","onPress","accessibilityLabel","reset","keyboardShouldPersistTaps","map","c","row","label","name","control","ControlInput","v","kind","value","onValueChange","input","keyboardType","String","onChangeText","text","n","Number","trim","isNaN","next","min","Math","max","options","opt","selected","pill","pillSelected","pillText","pillTextSelected","autoCapitalize","autoCorrect","create","position","left","right","bottom","maxHeight","backgroundColor","borderTopLeftRadius","borderTopRightRadius","paddingHorizontal","paddingTop","paddingBottom","borderTopWidth","hairlineWidth","borderTopColor","flexDirection","justifyContent","alignItems","marginBottom","color","fontSize","fontWeight","paddingVertical","gap","width","flex","borderRadius","minWidth","textAlign","flexWrap"],"sourceRoot":"../../src","sources":["PreviewControls.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,UAAU,EAAEC,UAAU,EAAEC,MAAM,EAAEC,IAAI,EAAEC,SAAS,EAAEC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGhG;AACA;AACA,OAAO,SAASC,eAAeA,CAAC;EAC9BC,QAAQ;EACRC,QAAQ;EACRC;AAKF,CAAC,EAAE;EACD,oBACEJ,KAAA,CAACJ,IAAI;IAACS,KAAK,EAAEC,MAAM,CAACC,KAAM;IAAAC,QAAA,gBACxBR,KAAA,CAACJ,IAAI;MAACS,KAAK,EAAEC,MAAM,CAACG,MAAO;MAAAD,QAAA,gBACzBV,IAAA,CAACJ,IAAI;QAACW,KAAK,EAAEC,MAAM,CAACI,KAAM;QAAAF,QAAA,EAAC;MAAK,CAAM,CAAC,eACvCV,IAAA,CAACR,SAAS;QAACqB,OAAO,EAAEP,OAAQ;QAACQ,kBAAkB,EAAC,aAAa;QAAAJ,QAAA,eAC3DV,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEC,MAAM,CAACO,KAAM;UAAAL,QAAA,EAAC;QAAK,CAAM;MAAC,CAC9B,CAAC;IAAA,CACR,CAAC,eACPV,IAAA,CAACP,UAAU;MAACuB,yBAAyB,EAAC,SAAS;MAAAN,QAAA,EAC5CN,QAAQ,CAACa,GAAG,CAAEC,CAAC,iBACdhB,KAAA,CAACJ,IAAI;QAAcS,KAAK,EAAEC,MAAM,CAACW,GAAI;QAAAT,QAAA,gBACnCV,IAAA,CAACJ,IAAI;UAACW,KAAK,EAAEC,MAAM,CAACY,KAAM;UAAAV,QAAA,EAAEQ,CAAC,CAACG;QAAI,CAAO,CAAC,eAC1CrB,IAAA,CAACF,IAAI;UAACS,KAAK,EAAEC,MAAM,CAACc,OAAQ;UAAAZ,QAAA,eAC1BV,IAAA,CAACuB,YAAY;YAACD,OAAO,EAAEJ,CAAE;YAACb,QAAQ,EAAGmB,CAAC,IAAKnB,QAAQ,CAACa,CAAC,CAACG,IAAI,EAAEG,CAAC;UAAE,CAAE;QAAC,CAC9D,CAAC;MAAA,GAJEN,CAAC,CAACG,IAKP,CACP;IAAC,CACQ,CAAC;EAAA,CACT,CAAC;AAEX;AAEA,SAASE,YAAYA,CAAC;EAAED,OAAO;EAAEjB;AAAmE,CAAC,EAAE;EACrG,QAAQiB,OAAO,CAACG,IAAI;IAClB,KAAK,SAAS;MACZ,oBAAOzB,IAAA,CAACL,MAAM;QAAC+B,KAAK,EAAEJ,OAAO,CAACI,KAAM;QAACC,aAAa,EAAEtB;MAAS,CAAE,CAAC;IAElE,KAAK,QAAQ;MACX,oBACEL,IAAA,CAACH,SAAS;QACRU,KAAK,EAAEC,MAAM,CAACoB,KAAM;QACpBC,YAAY,EAAC,SAAS;QACtBH,KAAK,EAAEI,MAAM,CAACR,OAAO,CAACI,KAAK,CAAE;QAC7BK,YAAY,EAAGC,IAAI,IAAK;UACtB,MAAMC,CAAC,GAAGC,MAAM,CAACF,IAAI,CAAC;UACtB,IAAIA,IAAI,CAACG,IAAI,CAAC,CAAC,KAAK,EAAE,IAAID,MAAM,CAACE,KAAK,CAACH,CAAC,CAAC,EAAE,OAAO,CAAC;UACnD,IAAII,IAAI,GAAGJ,CAAC;UACZ,IAAIX,OAAO,CAACgB,GAAG,IAAI,IAAI,EAAED,IAAI,GAAGE,IAAI,CAACC,GAAG,CAAClB,OAAO,CAACgB,GAAG,EAAED,IAAI,CAAC;UAC3D,IAAIf,OAAO,CAACkB,GAAG,IAAI,IAAI,EAAEH,IAAI,GAAGE,IAAI,CAACD,GAAG,CAAChB,OAAO,CAACkB,GAAG,EAAEH,IAAI,CAAC;UAC3DhC,QAAQ,CAACgC,IAAI,CAAC;QAChB;MAAE,CACH,CAAC;IAGN,KAAK,QAAQ;MACX,oBACErC,IAAA,CAACF,IAAI;QAACS,KAAK,EAAEC,MAAM,CAACiC,OAAQ;QAAA/B,QAAA,EACzBY,OAAO,CAACmB,OAAO,CAACxB,GAAG,CAAEyB,GAAG,IAAK;UAC5B,MAAMC,QAAQ,GAAGD,GAAG,KAAKpB,OAAO,CAACI,KAAK;UACtC,oBACE1B,IAAA,CAACR,SAAS;YAERe,KAAK,EAAE,CAACC,MAAM,CAACoC,IAAI,EAAED,QAAQ,IAAInC,MAAM,CAACqC,YAAY,CAAE;YACtDhC,OAAO,EAAEA,CAAA,KAAMR,QAAQ,CAACqC,GAAG,CAAE;YAAAhC,QAAA,eAE7BV,IAAA,CAACJ,IAAI;cAACW,KAAK,EAAE,CAACC,MAAM,CAACsC,QAAQ,EAAEH,QAAQ,IAAInC,MAAM,CAACuC,gBAAgB,CAAE;cAAArC,QAAA,EAAEoB,MAAM,CAACY,GAAG;YAAC,CAAO;UAAC,GAJpFZ,MAAM,CAACY,GAAG,CAKN,CAAC;QAEhB,CAAC;MAAC,CACE,CAAC;IAGX;MAAS;MACP,oBACE1C,IAAA,CAACH,SAAS;QACRU,KAAK,EAAEC,MAAM,CAACoB,KAAM;QACpBF,KAAK,EAAEJ,OAAO,CAACI,KAAM;QACrBsB,cAAc,EAAC,MAAM;QACrBC,WAAW,EAAE,KAAM;QACnBlB,YAAY,EAAE1B;MAAS,CACxB,CAAC;EAER;AACF;AAEA,MAAMG,MAAM,GAAGd,UAAU,CAACwD,MAAM,CAAC;EAC/BzC,KAAK,EAAE;IACL0C,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,SAAS,EAAE,KAAK;IAChBC,eAAe,EAAE,SAAS;IAC1BC,mBAAmB,EAAE,EAAE;IACvBC,oBAAoB,EAAE,EAAE;IACxBC,iBAAiB,EAAE,EAAE;IACrBC,UAAU,EAAE,EAAE;IACdC,aAAa,EAAE,EAAE;IACjBC,cAAc,EAAEpE,UAAU,CAACqE,aAAa;IACxCC,cAAc,EAAE;EAClB,CAAC;EACDrD,MAAM,EAAE;IAAEsD,aAAa,EAAE,KAAK;IAAEC,cAAc,EAAE,eAAe;IAAEC,UAAU,EAAE,QAAQ;IAAEC,YAAY,EAAE;EAAE,CAAC;EACxGxD,KAAK,EAAE;IAAEyD,KAAK,EAAE,MAAM;IAAEC,QAAQ,EAAE,EAAE;IAAEC,UAAU,EAAE;EAAM,CAAC;EACzDxD,KAAK,EAAE;IAAEsD,KAAK,EAAE,SAAS;IAAEC,QAAQ,EAAE,EAAE;IAAEC,UAAU,EAAE;EAAM,CAAC;EAC5DpD,GAAG,EAAE;IAAE8C,aAAa,EAAE,KAAK;IAAEE,UAAU,EAAE,QAAQ;IAAEK,eAAe,EAAE,CAAC;IAAEC,GAAG,EAAE;EAAG,CAAC;EAChFrD,KAAK,EAAE;IAAEiD,KAAK,EAAE,SAAS;IAAEC,QAAQ,EAAE,EAAE;IAAEI,KAAK,EAAE;EAAG,CAAC;EACpDpD,OAAO,EAAE;IAAEqD,IAAI,EAAE,CAAC;IAAER,UAAU,EAAE;EAAW,CAAC;EAC5CvC,KAAK,EAAE;IACLyC,KAAK,EAAE,MAAM;IACbb,eAAe,EAAE,SAAS;IAC1BoB,YAAY,EAAE,CAAC;IACfjB,iBAAiB,EAAE,EAAE;IACrBa,eAAe,EAAE,CAAC;IAClBK,QAAQ,EAAE,GAAG;IACbH,KAAK,EAAE,MAAM;IACbI,SAAS,EAAE;EACb,CAAC;EACDrC,OAAO,EAAE;IAAEwB,aAAa,EAAE,KAAK;IAAEc,QAAQ,EAAE,MAAM;IAAEb,cAAc,EAAE,UAAU;IAAEO,GAAG,EAAE;EAAE,CAAC;EACvF7B,IAAI,EAAE;IAAEY,eAAe,EAAE,SAAS;IAAEoB,YAAY,EAAE,GAAG;IAAEjB,iBAAiB,EAAE,EAAE;IAAEa,eAAe,EAAE;EAAE,CAAC;EAClG3B,YAAY,EAAE;IAAEW,eAAe,EAAE;EAAU,CAAC;EAC5CV,QAAQ,EAAE;IAAEuB,KAAK,EAAE,SAAS;IAAEC,QAAQ,EAAE,EAAE;IAAEC,UAAU,EAAE;EAAM,CAAC;EAC/DxB,gBAAgB,EAAE;IAAEsB,KAAK,EAAE;EAAU;AACvC,CAAC,CAAC","ignoreList":[]}

package/lib/module/PreviewList.js

@@ -0,0 +1,99 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// Neutral, dependency-free picker. The host's theme applies only to the
+// previewed story (via the shell), not this chrome.
+export function PreviewList({
+  entries,
+  onSelect
+}) {
+  const [query, setQuery] = useState('');
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return entries;
+    return entries.filter(e => `${e.title} ${e.name}`.toLowerCase().includes(q));
+  }, [entries, query]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(Text, {
+      style: styles.heading,
+      children: ["Stories (", entries.length, ")"]
+    }), /*#__PURE__*/_jsx(TextInput, {
+      style: styles.search,
+      placeholder: "Filter\u2026",
+      placeholderTextColor: "#888",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      value: query,
+      onChangeText: setQuery
+    }), filtered.length === 0 ? /*#__PURE__*/_jsx(Text, {
+      style: styles.empty,
+      children: entries.length === 0 ? 'No *.stories.tsx found.' : 'No matches.'
+    }) : /*#__PURE__*/_jsx(FlatList, {
+      data: filtered,
+      keyExtractor: e => e.id,
+      renderItem: ({
+        item
+      }) => /*#__PURE__*/_jsxs(Pressable, {
+        style: styles.row,
+        onPress: () => onSelect(item),
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.rowTitle,
+          children: [item.title, " ", /*#__PURE__*/_jsxs(Text, {
+            style: styles.rowName,
+            children: ["/ ", item.name]
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.rowId,
+          children: item.id
+        })]
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    paddingTop: 64,
+    paddingHorizontal: 16,
+    backgroundColor: '#111'
+  },
+  heading: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: '600',
+    marginBottom: 12
+  },
+  search: {
+    color: '#fff',
+    backgroundColor: '#222',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    marginBottom: 12
+  },
+  empty: {
+    color: '#888',
+    marginTop: 24
+  },
+  row: {
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#333'
+  },
+  rowTitle: {
+    color: '#fff',
+    fontSize: 16
+  },
+  rowName: {
+    color: '#9a9aa2'
+  },
+  rowId: {
+    color: '#666',
+    fontSize: 12,
+    marginTop: 2
+  }
+});
+//# sourceMappingURL=PreviewList.js.map

package/lib/module/PreviewList.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","FlatList","Pressable","StyleSheet","Text","TextInput","View","jsxs","_jsxs","jsx","_jsx","PreviewList","entries","onSelect","query","setQuery","filtered","q","trim","toLowerCase","filter","e","title","name","includes","style","styles","root","children","heading","length","search","placeholder","placeholderTextColor","autoCapitalize","autoCorrect","value","onChangeText","empty","data","keyExtractor","id","renderItem","item","row","onPress","rowTitle","rowName","rowId","create","flex","paddingTop","paddingHorizontal","backgroundColor","color","fontSize","fontWeight","marginBottom","borderRadius","paddingVertical","marginTop","borderBottomWidth","hairlineWidth","borderBottomColor"],"sourceRoot":"../../src","sources":["PreviewList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/PreviewStage.js

@@ -0,0 +1,82 @@
+"use strict";
+
+import React, { useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { inferControls } from "./controls.js";
+import { PreviewControls } from "./PreviewControls.js";
+import { composeStory } from "./shell.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Renders the selected story full-bleed, composed with the real shell (outer)
+// and the story's decorators (inner). The picker chrome stays outside the shell.
+// Live props controls edit `args` and re-render the story in place.
+export function PreviewStage({
+  entry,
+  shell,
+  onBack
+}) {
+  const [args, setArgs] = useState(entry.args);
+  const [controlsOpen, setControlsOpen] = useState(false);
+  const controls = useMemo(() => inferControls(args, entry.argTypes), [args, entry.argTypes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.content,
+      children: composeStory(entry, shell, args)
+    }), /*#__PURE__*/_jsx(Pressable, {
+      style: styles.back,
+      onPress: onBack,
+      accessibilityLabel: "Back to stories",
+      children: /*#__PURE__*/_jsxs(Text, {
+        style: styles.backText,
+        children: ["\u2039 ", entry.title, " / ", entry.name]
+      })
+    }), controls.length > 0 && /*#__PURE__*/_jsx(Pressable, {
+      style: styles.toggle,
+      onPress: () => setControlsOpen(v => !v),
+      accessibilityLabel: "Toggle props controls",
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.backText,
+        children: controlsOpen ? 'Controls ▾' : 'Controls ▴'
+      })
+    }), controlsOpen && controls.length > 0 && /*#__PURE__*/_jsx(PreviewControls, {
+      controls: controls,
+      onChange: (name, value) => setArgs(a => ({
+        ...a,
+        [name]: value
+      })),
+      onReset: () => setArgs(entry.args)
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  content: {
+    flex: 1
+  },
+  back: {
+    position: 'absolute',
+    top: 56,
+    left: 12,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8
+  },
+  toggle: {
+    position: 'absolute',
+    top: 56,
+    right: 12,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8
+  },
+  backText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600'
+  }
+});
+//# sourceMappingURL=PreviewStage.js.map

package/lib/module/PreviewStage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","Pressable","StyleSheet","Text","View","inferControls","PreviewControls","composeStory","jsx","_jsx","jsxs","_jsxs","PreviewStage","entry","shell","onBack","args","setArgs","controlsOpen","setControlsOpen","controls","argTypes","style","styles","root","children","content","back","onPress","accessibilityLabel","backText","title","name","length","toggle","v","onChange","value","a","onReset","create","flex","position","top","left","backgroundColor","borderRadius","paddingHorizontal","paddingVertical","right","color","fontSize","fontWeight"],"sourceRoot":"../../src","sources":["PreviewStage.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Previewer.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { PreviewList } from "./PreviewList.js";
+import { PreviewStage } from "./PreviewStage.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The reusable picker + stage UI. The host builds `stories` via
+// fromRequireContext/fromGlob and passes its real `shell` (AppProviders).
+// `initialStoryId` boots straight into one story (useful for deep links /
+// screenshots / "jump to the thing I'm editing").
+export function Previewer({
+  stories,
+  shell,
+  initialStoryId
+}) {
+  const initial = initialStoryId ? stories.find(s => s.id === initialStoryId) ?? null : null;
+  const [selected, setSelected] = useState(initial);
+  if (selected) {
+    // key by story id so live-edited arg state resets cleanly per story.
+    return /*#__PURE__*/_jsx(PreviewStage, {
+      entry: selected,
+      shell: shell,
+      onBack: () => setSelected(null)
+    }, selected.id);
+  }
+  return /*#__PURE__*/_jsx(PreviewList, {
+    entries: stories,
+    onSelect: setSelected
+  });
+}
+//# sourceMappingURL=Previewer.js.map

package/lib/module/Previewer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","PreviewList","PreviewStage","jsx","_jsx","Previewer","stories","shell","initialStoryId","initial","find","s","id","selected","setSelected","entry","onBack","entries","onSelect"],"sourceRoot":"../../src","sources":["Previewer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,WAAW,QAAQ,kBAAe;AAC3C,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAI9C;AACA;AACA;AACA;AACA,OAAO,SAASC,SAASA,CAAC;EACxBC,OAAO;EACPC,KAAK;EACLC;AAKF,CAAC,EAAE;EACD,MAAMC,OAAO,GAAGD,cAAc,GAAIF,OAAO,CAACI,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACC,EAAE,KAAKJ,cAAc,CAAC,IAAI,IAAI,GAAI,IAAI;EAC9F,MAAM,CAACK,QAAQ,EAAEC,WAAW,CAAC,GAAGd,QAAQ,CAAoBS,OAAO,CAAC;EAEpE,IAAII,QAAQ,EAAE;IACZ;IACA,oBAAOT,IAAA,CAACF,YAAY;MAAmBa,KAAK,EAAEF,QAAS;MAACN,KAAK,EAAEA,KAAM;MAACS,MAAM,EAAEA,CAAA,KAAMF,WAAW,CAAC,IAAI;IAAE,GAA5ED,QAAQ,CAACD,EAAqE,CAAC;EAC3G;EACA,oBAAOR,IAAA,CAACH,WAAW;IAACgB,OAAO,EAAEX,OAAQ;IAACY,QAAQ,EAAEJ;EAAY,CAAE,CAAC;AACjE","ignoreList":[]}