{
  "id": "wire.react",
  "kind": "library",
  "summary": "Preferred React integration surface for building Wire editors and viewers.",
  "useWhen": [
    "building a Wire UI in React or Next.js",
    "customizing cards, palettes, validation panels, or inspectors",
    "persisting canvas edits to cloud or local state"
  ],
  "contracts": [
    "wire-react-components",
    "wire-diagram"
  ],
  "preferredPath": [
    "Install @aigentive/wire-react with @aigentive/wire-core.",
    "Use WireWorkspace for a complete editor.",
    "Use WireProvider + WireCanvas for custom product shells.",
    "Persist the WireDiagram emitted by onChange.",
    "Use WireToolbar, WirePalette, WireInspector, and WireValidationPanel instead of reimplementing standard controls."
  ],
  "avoid": [
    "Do not import React Flow as the app-level contract.",
    "Do not store canvas state as React Flow nodes and edges.",
    "Do not bypass WireProvider when edit state, validation, history, or events matter."
  ],
  "components": [
    {
      "name": "WireWorkspace",
      "package": "@aigentive/wire-react",
      "purpose": "Full editor shell with sidebar, canvas, and inspector slots.",
      "contract": "Accepts diagram/defaultDiagram and emits canonical WireDiagram through onChange."
    },
    {
      "name": "WireProvider",
      "package": "@aigentive/wire-react",
      "purpose": "Owns diagram state, validation, events, and actions for child components.",
      "contract": "Use around WireCanvas and controls when composing a custom UI."
    },
    {
      "name": "WireCanvas",
      "package": "@aigentive/wire-react",
      "purpose": "Renders and edits the Wire diagram canvas.",
      "contract": "Consumes WireProvider state; accepts mode, fitView, showMiniMap, renderNodeCard, renderGroup."
    },
    {
      "name": "WireNodeCardView",
      "package": "@aigentive/wire-react",
      "purpose": "Default node-card renderer that can be wrapped or replaced.",
      "contract": "Use for custom card composition while preserving Wire node semantics."
    }
  ],
  "routes": [
    {
      "path": "/llm/react.shape.json",
      "mediaType": "application/json",
      "purpose": "React build contract."
    },
    {
      "path": "/llm/recipes/build-react-workspace.json",
      "mediaType": "application/json",
      "purpose": "Fast React implementation recipe."
    }
  ],
  "related": [
    "wire.schema",
    "wire.examples",
    "wire.validation"
  ]
}