MDX/ModulePanel

Annotated module panel embedded in MetaModule-reference MDX articles.

MetaModule Reference

Japanese article

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). The render is a // pure, SSR-safe tree of the client-safe AnnotationPanel surface; the styleguide // only executes it inside the client-only preview iframe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { AnnotationPanel } from '@/src/components/metamodule-ref/annotation-panel'; import type { AnnotationMarker } from '@/lib/types/metamodule-ref'; const meta: StoryMeta = { title: 'MDX/ModulePanel', category: 'MetaModule Reference', description: 'Annotated module panel embedded in MetaModule-reference MDX articles.', usage: `import { AnnotationPanel } from '@/src/components/metamodule-ref/annotation-panel';\n\n<AnnotationPanel image={imageUrl} markers={markers} locale="ja" layout="article" />`, }; export default meta; const STORY_IMAGE = 'https://imgs.takazudomodular.com/images/modules/4ms-qcd.png'; const markers: AnnotationMarker[] = [ { id: 1, x: 60.8, y: 10.1, label: 'Tap Tempo', description: 'マスタークロックレートを設定するタップボタン。', category: 'switch', }, { id: 2, x: 21.2, y: 16.1, label: 'Gate PW Att 1', description: 'ゲートパルス幅アッテネーション1を調整する。', category: 'knob', }, { id: 3, x: 34.3, y: 16.4, label: 'Gate PW 1', description: 'ゲートパルス幅1を調整する。', category: 'knob', }, { id: 4, x: 48.5, y: 11.5, label: 'Inv Mode 1', description: 'Inv Mode 1のモードを切り替える。', category: 'switch', }, { id: 17, x: 7.2, y: 15.7, label: 'Gate PW CV 1', description: 'チャンネル1のゲートパルス幅CV入力。', category: 'input', }, { id: 32, x: 93.5, y: 21.5, label: 'Out 1', description: 'チャンネル1のクロック出力。', category: 'output', }, ]; /** * The production ModulePanel resolves this same shape on the server. The story * deliberately starts at the serialized, client-safe surface so the generated * annotation corpus never enters the styleguide preview island bundle. */ export const JapaneseArticle = defineStory({ name: 'Japanese article', 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> ), });