Web Synth/Module Node

Draggable module card (params, scope, ports) rendered on the Web Synth patcher surface.

Web Synth

Short card

Tall card with scope

Panel — short (edit)

Panel — tall (play)

Panel — preview/play/edit

Scope — small (preview)

Scope — large (play)

Scope — preview/play/edit

Every port kind

Interaction modes

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). `render` returns // the client island `<CardHarness />` without executing it, so the module is // SSR-import-safe and the audio/scope work only runs inside the preview iframe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import type { JSX } from 'preact'; import { useState } from 'preact/hooks'; import type { ScopeData } from '@components/mdx/audio-demo/use-scope-worklet'; import type { WebSynthPatchModule } from './doc/patch-doc-types'; import { WEB_SYNTH_MODULE_REGISTRY, type WebSynthModuleManifest } from './module-registry'; import { WebSynthModuleNode } from './module-node'; import type { PatcherInteractionMode } from './patcher-contract'; const meta: StoryMeta = { title: 'Web Synth/Module Node', category: 'Web Synth', description: 'Draggable module card (params, scope, ports) rendered on the Web Synth patcher surface.', usage: `import { WebSynthModuleNode } from '@/src/components/web-synth/module-node';\n\n<WebSynthModuleNode instance={instance} manifest={manifest} mode="edit" />`, }; export default meta; const frameStyle: JSX.CSSProperties = { display: 'flex', minHeight: '24rem', flexWrap: 'wrap', alignItems: 'flex-start', gap: '5rem', padding: 'var(--zaudio-sp-3xl)', background: 'var(--zaudio-patch-panel)', }; interface CardHarnessProps { manifest: WebSynthModuleManifest; mode?: PatcherInteractionMode; selected?: boolean; instance?: WebSynthPatchModule; scope?: ScopeData; isPlaying?: boolean; } function CardHarness({ manifest, mode = 'edit', selected = false, instance: initialInstance, scope, isPlaying = false, }: CardHarnessProps) { const [instance, setInstance] = useState<WebSynthPatchModule>( initialInstance ?? makeInstance(manifest), ); return ( <WebSynthModuleNode instance={instance} manifest={manifest} mode={mode} selected={selected} // null is the unarmed state — click-to-connect arms a port at runtime, // which a static story never does. armedPort={null} registerCardElement={() => {}} registerPortAnchor={() => {}} registerPortHitTarget={() => {}} onHeaderPointerDown={() => {}} onPortPointerDown={() => {}} onResizePointerDown={() => {}} onOpenMenu={() => {}} onParamChange={(paramId, value) => setInstance((current) => ({ ...current, params: { ...current.params, [paramId]: value }, })) } onUiChange={(patch) => setInstance((current) => ({ ...current, ui: { ...current.ui, ...patch }, })) } scope={scope} isPlaying={isPlaying} /> ); } export const ShortCard = defineStory({ name: 'Short card', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.vca} instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.vca, { ui: { hideScope: true }, })} /> </div> ), }); export const TallCardWithScope = defineStory({ name: 'Tall card with scope', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.seq} selected /> </div> ), }); export const PanelShortEdit = defineStory({ name: 'Panel — short (edit)', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.panel} instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.panel, { w: 260, h: 100, ui: { text: 'Clock → divider → envelope', fontSize: 's', }, })} /> </div> ), }); export const PanelTallPlay = defineStory({ name: 'Panel — tall (play)', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.panel} mode="play" instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.panel, { id: 'panel-tall-play', w: 340, h: 260, ui: { text: 'Signal notes\n\nClock → SEQ → QUANT → VCO\nVCO → VCF → VCA → OUT', fontSize: 'l', }, })} /> </div> ), }); export const PanelPreviewPlayEdit = defineStory({ name: 'Panel — preview/play/edit', render: () => ( <div style={frameStyle}> {(['preview', 'play', 'edit'] as const).map((mode, index) => ( <CardHarness key={mode} manifest={WEB_SYNTH_MODULE_REGISTRY.panel} mode={mode} selected={mode === 'edit'} instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.panel, { id: `panel-${mode}`, w: 260, h: 150 + index * 20, ui: { text: `${mode.toUpperCase()} panel note`, fontSize: index === 0 ? 's' : index === 1 ? 'm' : 'l', }, })} /> ))} </div> ), }); export const ScopeSmallPreview = defineStory({ name: 'Scope — small (preview)', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.scope} mode="preview" scope={storyScopeData} instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.scope, { id: 'scope-small-preview', w: 180, h: 110, ui: { scopeRange: 1 }, })} /> </div> ), }); export const ScopeLargePlay = defineStory({ name: 'Scope — large (play)', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.scope} mode="play" scope={storyScopeData} isPlaying instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.scope, { id: 'scope-large-play', w: 480, h: 300, ui: { scopeRange: 4 }, })} /> </div> ), }); export const ScopePreviewPlayEdit = defineStory({ name: 'Scope — preview/play/edit', render: () => ( <div style={frameStyle}> {(['preview', 'play', 'edit'] as const).map((mode, index) => ( <CardHarness key={mode} manifest={WEB_SYNTH_MODULE_REGISTRY.scope} mode={mode} selected={mode === 'edit'} scope={storyScopeData} isPlaying={mode !== 'preview'} instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.scope, { id: `scope-${mode}`, w: 230 + index * 70, h: 140 + index * 50, ui: { scopeRange: index === 0 ? 1 : index === 1 ? 2 : 4 }, })} /> ))} </div> ), }); export const EveryPortKind = defineStory({ name: 'Every port kind', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.vcf} /> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.adsr} /> </div> ), }); export const InteractionModes = defineStory({ name: 'Interaction modes', render: () => ( <div style={frameStyle}> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.vco} mode="preview" instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.vco, { id: 'vco-preview' })} /> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.vco} mode="play" instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.vco, { id: 'vco-play' })} /> <CardHarness manifest={WEB_SYNTH_MODULE_REGISTRY.vco} mode="edit" selected instance={makeInstance(WEB_SYNTH_MODULE_REGISTRY.vco, { id: 'vco-edit' })} /> </div> ), }); function makeInstance( manifest: WebSynthModuleManifest, overrides: Partial<WebSynthPatchModule> = {}, ): WebSynthPatchModule { return { id: `${manifest.type}-story`, type: manifest.type, x: 0, y: 0, params: Object.fromEntries(manifest.params.map((param) => [param.id, param.initial])), ...(manifest.resizable ? { w: manifest.resizable.defaultW, h: manifest.resizable.defaultH } : {}), ...overrides, }; } const storyScopeData = makeStoryScopeData(); function makeStoryScopeData(): ScopeData { const sampleRate = 48_000; const ringBuffer = new Float32Array(sampleRate * 2); for (let index = 0; index < ringBuffer.length; index += 1) { ringBuffer[index] = Math.sin((index / sampleRate) * Math.PI * 2 * 110) * 0.78; } return { ringBufferRef: { current: ringBuffer }, ringWriteIndexRef: { current: 0 }, ringSampleRateRef: { current: sampleRate }, }; }