OxiGrid

Renders an OXI ONE MKII-style 16x8 pad grid for use in MDX articles. Uses CSS Grid with 1fr columns for auto-expandable sizing. Supports pads with colors/labels, playhead, init/end markers, scale labels, and seq buttons.

Product-Specific Blocks

Default

Melody pattern

Tie example

Init/End markers

Accumulator visualization

With seq buttons

In figure wrapper

With labels

import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import { OxiGrid } from './oxi-grid'; import { OxiGridFigure } from './oxi-grid-figure'; const meta: StoryMeta = { title: 'OxiGrid', category: 'Product-Specific Blocks', description: 'Renders an OXI ONE MKII-style 16x8 pad grid for use in MDX articles. Uses CSS Grid with 1fr columns for auto-expandable sizing. Supports pads with colors/labels, playhead, init/end markers, scale labels, and seq buttons.', usage: `import { OxiGrid } from '@/components/mdx/oxi-grid/oxi-grid';\n\n<OxiGrid steps={16} rows={8} pads={[{ col: 0, row: 0, color: 'rgb(0, 200, 80)' }]} />`, }; export default meta; /** Default empty 16x8 grid — fills available width */ export const Default = defineStory({ name: 'Default', render: () => <OxiGrid />, }); /** C minor melody with notes, playhead at step 5, and scale labels */ export const MelodyPattern = defineStory({ name: 'Melody pattern', render: () => ( <OxiGrid steps={16} rows={8} scaleLabels={['C2', 'D2', 'Eb2', 'F2', 'G2', 'Ab2', 'Bb2', 'C3']} playhead={4} pads={[ { col: 0, row: 0, color: 'rgb(0, 200, 80)' }, { col: 1, row: 2, color: 'rgb(0, 200, 80)' }, { col: 2, row: 3, color: 'rgb(0, 200, 80)' }, { col: 3, row: 4, color: 'rgb(0, 200, 80)' }, { col: 4, row: 2, color: 'rgb(0, 200, 80)' }, { col: 6, row: 0, color: 'rgb(0, 200, 80)' }, { col: 7, row: 1, color: 'rgb(0, 200, 80)' }, { col: 8, row: 4, color: 'rgb(0, 200, 80)' }, { col: 10, row: 3, color: 'rgb(0, 200, 80)' }, { col: 11, row: 2, color: 'rgb(0, 200, 80)' }, { col: 12, row: 0, color: 'rgb(0, 200, 80)' }, { col: 14, row: 4, color: 'rgb(0, 200, 80)' }, { col: 15, row: 7, color: 'rgb(0, 200, 80)' }, ]} /> ), }); /** Tied notes example: steps 3-5 tied together (darker green = tie continuation) */ export const TieExample = defineStory({ name: 'Tie example', render: () => ( <OxiGrid steps={8} rows={8} scaleLabels={['C2', 'D2', 'Eb2', 'F2', 'G2', 'Ab2', 'Bb2', 'C3']} pads={[ { col: 0, row: 0, color: 'rgb(0, 200, 80)' }, { col: 1, row: 2, color: 'rgb(0, 200, 80)' }, { col: 2, row: 4, color: 'rgb(0, 200, 80)' }, { col: 3, row: 4, color: 'rgb(0, 120, 50)' }, { col: 4, row: 4, color: 'rgb(0, 120, 50)' }, { col: 5, row: 3, color: 'rgb(0, 200, 80)' }, { col: 6, row: 2, color: 'rgb(0, 200, 80)' }, { col: 7, row: 0, color: 'rgb(0, 200, 80)' }, ]} /> ), }); /** Init/End loop markers shown as purple indicators */ export const InitEndMarkers = defineStory({ name: 'Init/End markers', render: () => ( <OxiGrid steps={16} rows={8} initStep={2} endStep={10} scaleLabels={['C2', 'D2', 'Eb2', 'F2', 'G2', 'Ab2', 'Bb2', 'C3']} pads={[ { col: 0, row: 0, color: 'rgb(0, 200, 80)' }, { col: 2, row: 2, color: 'rgb(0, 200, 80)' }, { col: 4, row: 4, color: 'rgb(0, 200, 80)' }, { col: 5, row: 3, color: 'rgb(0, 200, 80)' }, { col: 7, row: 2, color: 'rgb(0, 200, 80)' }, { col: 8, row: 4, color: 'rgb(0, 200, 80)' }, { col: 10, row: 0, color: 'rgb(0, 200, 80)' }, { col: 13, row: 3, color: 'rgb(0, 200, 80)' }, { col: 15, row: 1, color: 'rgb(0, 200, 80)' }, ]} /> ), }); /** Accumulator visualization: orange pads show pitch changes over cycles */ export const AccumulatorVisualization = defineStory({ name: 'Accumulator visualization', render: () => ( <OxiGrid steps={16} rows={8} scaleLabels={['C2', 'D2', 'Eb2', 'F2', 'G2', 'Ab2', 'Bb2', 'C3']} pads={[ { col: 0, row: 0, color: 'rgb(0, 200, 80)' }, { col: 1, row: 2, color: 'rgb(0, 200, 80)' }, { col: 2, row: 2, color: 'rgb(230, 140, 20)' }, { col: 3, row: 4, color: 'rgb(0, 200, 80)' }, { col: 4, row: 0, color: 'rgb(0, 200, 80)' }, { col: 5, row: 2, color: 'rgb(0, 200, 80)' }, { col: 6, row: 3, color: 'rgb(230, 140, 20)' }, { col: 7, row: 4, color: 'rgb(0, 200, 80)' }, { col: 8, row: 0, color: 'rgb(0, 200, 80)' }, { col: 9, row: 2, color: 'rgb(0, 200, 80)' }, { col: 10, row: 4, color: 'rgb(230, 140, 20)' }, { col: 11, row: 4, color: 'rgb(0, 200, 80)' }, { col: 12, row: 0, color: 'rgb(0, 200, 80)' }, { col: 13, row: 2, color: 'rgb(0, 200, 80)' }, { col: 14, row: 3, color: 'rgb(230, 140, 20)' }, { col: 15, row: 4, color: 'rgb(0, 200, 80)' }, ]} /> ), }); /** Grid with seq buttons column showing active sequences */ export const WithSeqButtons = defineStory({ name: 'With seq buttons', render: () => ( <OxiGrid steps={16} rows={8} seqButtons={[1, 3]} pads={[ { col: 0, row: 0, color: 'rgb(0, 200, 80)' }, { col: 4, row: 3, color: 'rgb(0, 200, 80)' }, { col: 8, row: 5, color: 'rgb(0, 200, 80)' }, { col: 12, row: 2, color: 'rgb(0, 200, 80)' }, ]} /> ), }); /** * OxiGrid wrapped in OxiGridFigure for responsive article layout. * Caption is rendered as figcaption outside the grid. */ export const InFigureWrapper = defineStory({ name: 'In figure wrapper', render: () => ( <div className="w-[800px] border border-dashed border-zd-white/20"> <OxiGridFigure steps={16} rows={8} scaleLabels={['C2', 'D2', 'Eb2', 'F2', 'G2', 'Ab2', 'Bb2', 'C3']} playhead={4} pads={[ { col: 0, row: 0, color: 'rgb(0, 200, 80)' }, { col: 1, row: 2, color: 'rgb(0, 200, 80)' }, { col: 2, row: 3, color: 'rgb(0, 200, 80)' }, { col: 3, row: 4, color: 'rgb(0, 200, 80)' }, { col: 4, row: 2, color: 'rgb(0, 200, 80)' }, { col: 8, row: 4, color: 'rgb(0, 200, 80)' }, { col: 12, row: 0, color: 'rgb(0, 200, 80)' }, { col: 15, row: 7, color: 'rgb(0, 200, 80)' }, ]} caption="Wrapped in OxiGridFigure (responsive container)" /> </div> ), }); /** Grid with labels on pads */ export const WithLabels = defineStory({ name: 'With labels', render: () => ( <OxiGrid steps={16} rows={8} pads={[ { col: 0, row: 0, color: 'rgb(0, 200, 80)', label: 'C' }, { col: 1, row: 1, color: 'rgb(0, 200, 80)', label: 'D' }, { col: 2, row: 2, color: 'rgb(0, 200, 80)', label: 'E' }, { col: 3, row: 3, color: 'rgb(0, 200, 80)', label: 'F' }, { col: 4, row: 2, color: 'rgb(59, 130, 246)', label: 'E' }, { col: 5, row: 1, color: 'rgb(59, 130, 246)', label: 'D' }, { col: 6, row: 0, color: 'rgb(59, 130, 246)', label: 'C' }, ]} /> ), });