MetaModule Reference/AnnotationPanel

Interactive annotated module image used in MetaModule-reference articles and dialogs.

MetaModule Reference

Article (English)

Article (Japanese)

Dialog viewport fit

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). AnnotationPanel // renders from a serialized, client-safe marker corpus; the render is pure and // SSR-safe and the styleguide only runs it inside the preview iframe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { AnnotationPanel } from './annotation-panel'; import type { AnnotationMarker } from '@/lib/types/metamodule-ref'; const meta: StoryMeta = { title: 'MetaModule Reference/AnnotationPanel', category: 'MetaModule Reference', description: 'Interactive annotated module image used in MetaModule-reference articles and dialogs.', usage: `import { AnnotationPanel } from '@/src/components/metamodule-ref/annotation-panel';\n\n<AnnotationPanel image={imageUrl} markers={markers} locale="en" layout="article" />`, }; export default meta; const STORY_IMAGE = 'https://imgs.takazudomodular.com/images/modules/countmodula-polyrhythmic-generator-mkii.png'; const markers: AnnotationMarker[] = [ { id: 1, x: 22, y: 12, label: 'Frequency', description: 'Sets the oscillator frequency.', category: 'knob', }, { id: 2, x: 50, y: 12, label: 'Shape', description: 'Selects the waveform shape.', category: 'switch', }, { id: 3, x: 78, y: 12, label: 'Pitch CV', description: 'Accepts pitch control voltage.', category: 'input', }, { id: 4, x: 22, y: 28, label: 'Audio', description: 'Main audio output.', category: 'output' }, { id: 5, x: 50, y: 28, label: 'Sync', description: 'Resets the oscillator phase.', category: 'button', }, { id: 6, x: 78, y: 28, label: 'Level', description: 'Adjusts the output level.', category: 'slider', }, { id: 7, x: 22, y: 46, label: 'Signal', description: 'Shows the current signal state.', category: 'light', }, { id: 8, x: 50, y: 46, label: 'Range', description: 'Toggles the frequency range.', category: 'toggle', }, { id: 9, x: 78, y: 46, label: 'Status', description: 'Names the status section.', category: 'label', }, { id: 10, x: 22, y: 66, label: 'Modulation', description: 'Groups modulation controls.', category: 'section', }, { id: 11, x: 50, y: 66, label: 'Expander', description: 'Connects an expander module.', category: 'jack', }, { id: 12, x: 78, y: 66, label: 'Value', description: 'Displays the current value.', category: 'display', }, ]; export const ArticleEnglish = defineStory({ name: 'Article (English)', render: () => ( <div class="w-full bg-zd-black p-vgap-sm text-zd-white"> <AnnotationPanel image={STORY_IMAGE} markers={markers} locale="en" layout="article" /> </div> ), }); export const ArticleJapanese = defineStory({ name: 'Article (Japanese)', render: () => ( <div class="w-full bg-zd-black p-vgap-sm text-zd-white"> <AnnotationPanel image={STORY_IMAGE} markers={markers} locale="ja" layout="article" /> </div> ), }); export const DialogViewportFit = defineStory({ name: 'Dialog viewport fit', render: () => ( <div class="mm-dialog-root min-h-[720px] w-full bg-zd-black text-zd-white"> <AnnotationPanel image={STORY_IMAGE} markers={markers} locale="ja" layout="dialog" /> </div> ), });