Examples

Custom shell

Compose current components around WireProvider when product chrome is custom.

Contract

The shell owns layout. WireProvider owns the diagram runtime state, and all edits still flow through reducer actions against WireDiagram.

tsx

import "@aigentive/wire-react/styles.css";
import {
  WireCanvas,
  WireInspector,
  WireNodeList,
  WirePalette,
  WireProvider,
  WireToolbar,
  WireValidationPanel
} from "@aigentive/wire-react";

export function ProductShell({ diagram, onChange, optionCatalog }) {
  return (
    <WireProvider diagram={diagram} onChange={onChange} validateOnChange>
      <WireToolbar />
      <div className="grid grid-cols-[220px_minmax(0,1fr)_320px]">
        <aside>
          <WirePalette />
          <WireNodeList />
        </aside>
        <WireCanvas mode="edit" fitView optionCatalog={optionCatalog} />
        <aside>
          <WireInspector optionCatalog={optionCatalog} />
          <WireValidationPanel />
        </aside>
      </div>
    </WireProvider>
  );
}

NextOptions