Web Synth/Module Picker

Modal picker listing every Web Synth module manifest for adding a module to a patch.

Web Synth

All nineteen modules

Closed with trigger

/** @jsxRuntime automatic */ /** @jsxImportSource @takazudo/zfb/zudo-react */ // Migrated to the default-export story contract (issue #2051). `render` returns // the client island `<PickerHarness />` without executing it, so the module is // SSR-import-safe and the picker's hooks only run inside the preview iframe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { computed, getScope, Show, signal } from '@takazudo/zfb/zudo-react'; import { createState, createRef, createElementRef, read } from './native-state'; import { WEB_SYNTH_MODULE_REGISTRY, type WebSynthModuleType } from './module-registry'; import { WebSynthModulePicker } from './module-picker'; const meta: StoryMeta = { title: 'Web Synth/Module Picker', category: 'Web Synth', description: 'Modal picker listing every Web Synth module manifest for adding a module to a patch.', usage: `import { WebSynthModulePicker } from '@/src/components/web-synth/module-picker';\n\n<WebSynthModulePicker open onOpenChange={setOpen} manifests={manifests} onPick={onPick} />`, }; export default meta; const storyStyle: Record<string, string | number> = { 'min-height': '46rem', padding: 'var(--zaudio-sp-3xl)', background: 'var(--zaudio-patch-panel)', color: 'var(--zaudio-text)', }; function PickerHarness({ initiallyOpen = true }: { initiallyOpen?: boolean }) { const [open, setOpen] = createState(initiallyOpen); const [lastPick, setLastPick] = createState<WebSynthModuleType | null>(null); return ( <div style={storyStyle}> <button type="button" on:click={() => setOpen(true)}> ＋ module </button> <Show when={computed(() => lastPick.value !== null)}> {() => <p>Last picked: {lastPick}</p>} </Show> <WebSynthModulePicker open={open} onOpenChange={setOpen} manifests={Object.values(WEB_SYNTH_MODULE_REGISTRY)} onPick={setLastPick} /> </div> ); } export const AllNineteenModules = defineStory({ name: 'All nineteen modules', render: () => <PickerHarness />, }); export const ClosedWithTrigger = defineStory({ name: 'Closed with trigger', render: () => <PickerHarness initiallyOpen={false} />, });