<bmx-json-editor>

<bmx-json-editor id="ex-je" label="Service settings" name="settings" array-key="name" description="Checked against the service's JSON Schema as you edit. Try a negative timeout, or switch to Table on the regions."></bmx-json-editor>
<p class="note" id="ex-je-out" role="status" style="margin: 12px 0 0">No changes yet.</p>

<script type="module">
  await customElements.whenDefined('bmx-json-editor');
  const editor = document.getElementById('ex-je');
  const out = document.getElementById('ex-je-out');
  const published = {
    service: 'billing-api',
    version: '4.2.0',
    timeoutSeconds: 30,
    retries: { attempts: 3, backoff: 'exponential' },
    regions: [
      { name: 'eu-west', replicas: 3, primary: true },
      { name: 'us-east', replicas: 2, primary: false },
    ],
  };
  editor.schema = {
    type: 'object',
    required: ['service', 'version', 'timeoutSeconds', 'regions'],
    additionalProperties: false,
    properties: {
      service: { type: 'string', pattern: '^[a-z][a-z0-9-]*$', description: 'Lower case, letters, digits and hyphens.' },
      version: { type: 'string', pattern: '^\\d+\\.\\d+\\.\\d+$', description: 'Semantic version.' },
      timeoutSeconds: { type: 'integer', minimum: 1, maximum: 300, default: 30 },
      retries: {
        type: 'object',
        properties: { attempts: { type: 'integer', minimum: 0, maximum: 10 }, backoff: { enum: ['none', 'linear', 'exponential'] } },
      },
      regions: {
        type: 'array',
        minItems: 1,
        items: {
          type: 'object',
          required: ['name', 'replicas'],
          properties: { name: { enum: ['eu-west', 'eu-central', 'us-east', 'us-west', 'ap-south'] }, replicas: { type: 'integer', minimum: 1, default: 2 }, primary: { type: 'boolean', default: false } },
        },
      },
    },
  };
  editor.value = structuredClone(published);
  editor.compareWith = published;
  editor.addEventListener('bmxChange', event => {
    const { problems } = event.detail;
    out.textContent = problems.length ? `${problems.length} problem(s): ${problems[0].message}` : 'Valid - ready to publish.';
  });
</script>