{
  "filename": "SpanHighlighter.svelte",
  "module": {
    "type": "Root",
    "fragment": {
      "type": "Fragment",
      "nodes": [
        {
          "type": "Script",
          "context": "default",
          "content": {
            "declarations": [
              { "kind": "export let", "name": "text", "type": "string" },
              { "kind": "export let", "name": "spans", "type": "Span[]" },
              { "kind": "let", "name": "selectedSpan", "init": null }
            ]
          }
        },
        {
          "type": "Element",
          "name": "div",
          "attributes": [{ "name": "class", "value": "highlighter" }],
          "children": [
            {
              "type": "EachBlock",
              "expression": "spans",
              "context": "span",
              "index": "i",
              "children": [
                {
                  "type": "Element",
                  "name": "mark",
                  "attributes": [
                    { "name": "class", "value": "{span.label.toLowerCase()}" },
                    { "name": "on:click", "value": "() => selectedSpan = span" }
                  ],
                  "children": [
                    { "type": "MustacheTag", "expression": "text.slice(span.start, span.end)" }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "css": {
    "type": "Style",
    "content": ".highlighter { font-family: 'Inter', sans-serif; line-height: 1.8; } mark { cursor: pointer; }"
  }
}
