Web Synth/Patcher Integration

End-to-end Web Synth patcher wired to real module nodes, menus, and the picker.

Web Synth

Edit

Stress — twelve real cards

Play

Preview

Narrow inline play

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). `render` returns // the client island `<WebSynthPatcherIntegrationHarness />` without executing it, // so the module stays SSR-import-safe; the full patcher only runs in the preview // iframe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import type { WebSynthPatchDoc } from './doc/patch-doc-types'; import { WEB_SYNTH_PATCHER_INTEGRATION_DOC, WebSynthPatcherIntegrationHarness, } from './patcher-integration-harness'; import { createWebSynthModuleForPicker } from './patcher-module-factory'; import './patcher-integration.css'; const meta: StoryMeta = { title: 'Web Synth/Patcher Integration', category: 'Web Synth', description: 'End-to-end Web Synth patcher wired to real module nodes, menus, and the picker.', usage: `import { WebSynthPatcherIntegrationHarness } from '@/src/components/web-synth/patcher-integration-harness';\n\n<WebSynthPatcherIntegrationHarness initialDoc={doc} />`, }; export default meta; const STRESS_TYPES = [ 'clock', 'divider', 'seq', 'vco', 'noise', 'vcf', 'vca', 'adsr', 'lfo', 'mixer', 'out', 'panel', ] as const; const STRESS_DOC: WebSynthPatchDoc = { version: 1, name: 'Twelve real cards', modules: STRESS_TYPES.map((type, index) => { const column = index % 4; const row = Math.floor(index / 4); const instance = createWebSynthModuleForPicker( type, { x: -560 + column * 310, y: -390 + row * 360 }, () => `stress-${type}-${index + 1}`, ); return type !== 'panel' ? { ...instance, ui: { hideScope: true } } : instance; }), cables: [], }; export const Edit = defineStory({ name: 'Edit', render: () => ( <WebSynthPatcherIntegrationHarness initialDoc={WEB_SYNTH_PATCHER_INTEGRATION_DOC} /> ), }); export const StressTwelveRealCards = defineStory({ name: 'Stress — twelve real cards', render: () => <WebSynthPatcherIntegrationHarness initialDoc={STRESS_DOC} />, }); export const Play = defineStory({ name: 'Play', render: () => <WebSynthPatcherIntegrationHarness mode="play" />, }); export const Preview = defineStory({ name: 'Preview', render: () => <WebSynthPatcherIntegrationHarness mode="preview" />, }); export const NarrowInlinePlay = defineStory({ name: 'Narrow inline play', render: () => <WebSynthPatcherIntegrationHarness mode="play" narrow />, });