iReal Pro components

The iReal Pro surface mirrors the ChordPro surface in shape: bar-grid atom + preview + composed editor. All three components consume the same wasm bridge under the hood; a parse error inside the editor renders through errorFallback without unmounting the surrounding tree.

Renamed in @chordsketch/react v0.3.0 (ADR-0022). <IrealEditor> is now <IrealBarGrid> (Tier 1 widget atom) and <IrealPlayground> is now <IrealProEditor> (Tier 3 composed editor). <IrealPreview> keeps its name.

`<IrealProEditor>`

import { IrealProEditor } from '@chordsketch/react';
import '@chordsketch/react/styles.css';

const URL =
  'irealb://Autumn%20Leaves%3DKosma%20Joseph%3D%3DMedium%20Swing%3DG%2D%3D%3D' +
  '1r34LbKcu7T44%2AA%5BC%2D7%7CF7%7CBb%5E7%7CEb%5E7%7CAh7%7CD7%7CG%2D6%7CG%2D6Z' +
  '%3D%3D0%3D0';

<IrealProEditor defaultValue={URL} />

Prop	Type	Default	Description
`defaultValue`	`string`	sample chart	Initial uncontrolled `irealb://` URL.
`source`	`string`	—	Controlled URL. Pair with `onChange`.
`onChange`	`(url: string) => void`	—	Fires on every edit.
`readOnly`	`boolean`	`false`	Disables all form controls; the preview remains live.
`hideUrl`	`boolean`	`false`	Hide the URL textarea inside the editor pane.
`hideBars`	`boolean`	`false`	Hide the bar-grid editor inside the editor pane.
`hidePreview`	`boolean`	`false`	Hide the SVG preview pane.
`className`, `style`	—	—	Forwarded to the wrapper.
`errorFallback`	`((err: Error) => ReactNode) \| null`	inline message	Renderer for parse / serialise errors.
`loader`, `previewLoader`	loader callables	—	Test-only overrides.

`<IrealBarGrid>`

The form-based bar-grid editor surface used inside <IrealProEditor>. Available standalone for hosts that want their own preview layout.

Prop	Type	Description
`source`	`string`	Controlled URL value (no uncontrolled mode).
`onChange`	`(url: string) => void`	Fires on every edit.
`readOnly`	`boolean`	Force read-only display.
`showUrl`	`boolean`	Whether to show the raw-URL textarea. Defaults to `true`.
`showBars`	`boolean`	Whether to show the bar-grid editor. Defaults to `true`.
`promptSectionLabel`	`(current) => IrealSectionLabel \| null`	Override the prompt UX for adding / renaming sections. Defaults to `window.prompt`.
`confirmDeleteSection`	`(label) => boolean`	Override the confirm UX for deleting sections. Defaults to `window.confirm`.
`errorFallback`	`((err: Error) => ReactNode) \| null`	Parse / serialise error renderer.
`className`, `style`	—	Forwarded to the wrapper.
`loader`	loader callable	Test-only override.

`<IrealPreview>`

SVG-only preview surface — narrow on purpose, mirrors the shape of the SVG output the playground / desktop chart renderer produces.

Prop	Type	Description
`source`	`string`	`irealb://` URL to render.
`errorFallback`	`((err: Error) => ReactNode) \| null`	Rendered on parse failure.
`className`, `style`	—	Forwarded to the wrapper.
`loader`	loader callable	Test-only override.

<IrealPreview> does not embed pan / zoom controls; hosts wrap it with their own viewport when needed.