${n}`)
      });
    }
      
    const s = highlight(reformat ? astring.generate(ast) : source);
    rows.push({
      type: 'source',
      label: 'Source',
      content: html`${s}`
    });
      
    return html`
${name == null ? html`#${i+1}` : html`${name}`}
${rows.map(r => html`${r.label} ${r.content}`)}
    `;
  }

  function css() {
    return `
:scope {
  --padding: 5px 10px;
  max-width: initial;
  font: 16px/1.5 var(--sans-serif);
  padding: 0;
  list-style: none;
}
:scope li:not(:first-child) { margin-top: .5em }
:scope .inputs {
  margin-top: .5em;
}
:scope li {
  border: 1px solid #efefef;
  border-radius: 3px;
}
:scope li > :first-child {
  display: block;
  background: #efefef;
  padding: var(--padding);
  font-weight: bold;
}
:scope .inputs,
:scope .inputs code {
  font-size: 13px;
}
:scope .inputs code {
  color: var(--syntax-keyword);
  cursor: help;
  border: 2px solid currentColor;
  padding: 3px;
  border-radius: 3px;
  display: inline-block;
  margin: 0 5px 5px 0;
}
:scope .inputs td {
  padding-bottom: 0;
}
:scope .inputs code.builtin {
  color: green;
}
:scope .inputs code.imported {
  color: hsl(200,100%,40%);
}
:scope li .value {
  margin-top: .5em;
  max-height: 300px;
  height: fit-content;
  border:1px solid #eee;
  padding: 5px;
  overflow: auto;
  background: #fafafa;
}
:scope pre {
  margin: 0;
}
:scope pre,
:scope pre > code {
  font-size: 13px;
}
:scope table {
  table-layout: fixed;
  width: 100%;
  max-width: none;
  margin: 5px 0;
}
:scope tr {
  border: none;
}
:scope th {
  width: 6ch;
}
:scope th,
:scope td {
  vertical-align: text-top;
  padding: var(--padding);
}
    `;
  }

}