<!-- Кодовый блок с подсветкой JSON (config цели, условия правила).
     Компонента кода в каталоге кита нет — сделан по его стилистике:
     поверхность elevated, токены цвета кита, IBM Plex Mono не переопределяем. -->
<script setup>
import { computed } from "vue";
import { jsonSpans } from "../ui.js";

const props = defineProps({
  value: { type: [Object, Array, String], default: () => ({}) },
});

const spans = computed(() => jsonSpans(props.value ?? {}));
</script>

<template>
  <pre class="code-panel"><code><span
    v-for="(s, i) in spans"
    :key="i"
    :class="s.cls"
  >{{ s.text }}</span></code></pre>
</template>

<style scoped>
.code-panel {
  background: var(--gn-surface-panel-muted);
  border: 1px solid var(--gn-border-color-muted);
  border-radius: 6px;
  padding: var(--gn-space-3) var(--gn-space-4);
  margin: 0;
  overflow-x: auto;
  font-size: 0.86em;
  white-space: pre;
}
.code-panel .code-key {
  color: var(--gn-color-accent);
}
.code-panel .code-string {
  color: var(--gn-color-success);
}
.code-panel .code-number,
.code-panel .code-boolean {
  color: var(--gn-color-warning);
}
</style>