MDX/WebSynthEmbed

Inline Web Synth patch facade embedded in MDX articles; loads the full patcher on play.

Web Synth

Facade preset

Annotated panel and scope

Narrow article slot

Invalid preset

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). WebSynthEmbed is // the SSR-safe MDX facade — the heavy patcher/session graph is dynamically // imported only on first interaction, so this render stays pure + SSR-safe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import type { WebSynthPatchDoc } from '@/src/components/web-synth/doc/patch-doc-types'; import { WebSynthEmbed } from './web-synth-embed'; const meta: StoryMeta = { title: 'MDX/WebSynthEmbed', category: 'Web Synth', description: 'Inline Web Synth patch facade embedded in MDX articles; loads the full patcher on play.', usage: `import { WebSynthEmbed } from '@/components/mdx/web-synth-embed/web-synth-embed';\n\n<WebSynthEmbed patch="vcf" />`, }; export default meta; const ANNOTATED_PATCH: WebSynthPatchDoc = { version: 1, name: 'Annotated oscillator', modules: [ { id: 'panel', type: 'panel', x: -420, y: -180, w: 250, h: 150, params: {}, ui: { text: 'Article annotation: adjust frequency after Play.', fontSize: 'm' }, }, { id: 'osc', type: 'vco', x: -100, y: -180, params: { freq: 220, wave: 'sine', detune: 0, level: 0.5 }, }, { id: 'scope', type: 'scope', x: 220, y: -180, w: 340, h: 220, params: {}, ui: { scopeRange: 2 }, }, { id: 'out', type: 'out', x: 220, y: 100, params: { level: 0.3 }, }, ], cables: [ { id: 'osc-scope', from: { module: 'osc', port: 'out' }, to: { module: 'scope', port: 'in' }, kind: 'audio', }, { id: 'osc-out', from: { module: 'osc', port: 'out' }, to: { module: 'out', port: 'in' }, kind: 'audio', }, ], }; export const FacadePreset = defineStory({ name: 'Facade preset', render: () => <WebSynthEmbed patch="vcf" />, }); export const AnnotatedPanelAndScope = defineStory({ name: 'Annotated panel and scope', render: () => <WebSynthEmbed doc={ANNOTATED_PATCH} />, }); export const NarrowArticleSlot = defineStory({ name: 'Narrow article slot', render: () => ( <div className="max-w-[390px]"> <WebSynthEmbed doc={ANNOTATED_PATCH} /> </div> ), }); export const InvalidPreset = defineStory({ name: 'Invalid preset', render: () => <WebSynthEmbed patch="missing-preset" />, });