Web Synth/Module Menu

Per-module options menu (panel/scope UI controls, duplicate, delete) for the patcher.

Web Synth

Controlled panel

Controlled scope

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Migrated to the default-export story contract (issue #2051). `render` returns // the client island `<ModuleMenuStory />` without executing it, so the module is // SSR-import-safe and the hooks only run inside the preview iframe. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { useMemo, useState } from 'preact/hooks'; import type { WebSynthPatchModule, WebSynthPatchModuleUi } from './doc/patch-doc-types'; import type { PatcherModuleMenuActions } from './patcher-contract'; import { PatcherModuleMenu } from './module-menu'; import './context-menu.stories.css'; const meta: StoryMeta = { title: 'Web Synth/Module Menu', category: 'Web Synth', description: 'Per-module options menu (panel/scope UI controls, duplicate, delete) for the patcher.', usage: `import { PatcherModuleMenu } from '@/src/components/web-synth/module-menu';\n\n<PatcherModuleMenu open anchor={anchorEl} instance={instance} actions={actions} onClose={close} />`, }; export default meta; function ModuleMenuStory({ initialInstance }: { initialInstance: WebSynthPatchModule }) { const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null); const [open, setOpen] = useState(true); const [instance, setInstance] = useState(initialInstance); const [status, setStatus] = useState('Menu is controlled by this story.'); const actions = useMemo<PatcherModuleMenuActions>( () => ({ setUi: (patch: Partial<WebSynthPatchModuleUi>) => { setInstance((current) => ({ ...current, ui: { ...current.ui, ...patch }, })); setStatus('setUi persisted a controlled module update; the menu stayed open.'); }, duplicate: () => setStatus('Duplicate ran after the menu closed.'), delete: () => setStatus('Delete ran after the menu closed.'), }), [], ); return ( <div class="web-synth-menu-story"> <h2 class="web-synth-menu-story__heading">{instance.type.toUpperCase()} options</h2> <p class="web-synth-menu-story__status" aria-live="polite"> {status} </p> <button ref={setAnchor} type="button" class="web-synth-menu-story__trigger" aria-label={`Open ${instance.type.toUpperCase()} options`} onClick={() => setOpen(true)} > {instance.type.toUpperCase()} ⋮ </button> <pre class="web-synth-menu-story__module-state">{JSON.stringify(instance.ui, null, 2)}</pre> <PatcherModuleMenu open={open} anchor={anchor} instance={instance} actions={actions} onClose={() => setOpen(false)} /> </div> ); } export const ControlledPanel = defineStory({ name: 'Controlled panel', render: () => ( <ModuleMenuStory initialInstance={{ id: 'panel-story', type: 'panel', x: 0, y: 0, w: 260, h: 140, params: {}, ui: { text: 'Sequencer notes', fontSize: 'm' }, }} /> ), }); export const ControlledScope = defineStory({ name: 'Controlled scope', render: () => ( <ModuleMenuStory initialInstance={{ id: 'scope-story', type: 'scope', x: 0, y: 0, w: 300, h: 180, params: {}, ui: { scopeRange: 2 }, }} /> ), });