Rework live demo: single editor + AST viewer, sample picker, drag-drop

Layout changes:
- Left panel: BSL editor (was: two side-by-side editors)
- Right panel: AST viewer that re-renders on every doc/selection change,
  descends into mounted SDBL overlays via NodeProp.mounted so query
  strings show their inner Query(StmtKw, MdoKw, VtKw, …) tree inline
- Header: sample dropdown (Module / Query / Preprocessor / Doc-comments
  & labels), theme toggle, API docs link

Features:
- Click an AST node → editor selects the corresponding range and scrolls
  to it. Makes it trivial to map highlight tags to grammar nodes.
- Drag-and-drop a .bsl/.os file onto the editor → loads its contents,
  re-renders AST, marks the sample picker with the dropped filename.
- ?sample=<id> URL parameter for shareable links to specific samples;
  ?theme=light still flips to the light theme.

Implementation note:
- AST node text is escaped before insertion; cursor positions are
  re-based for overlay trees (MountedTree.overlay ranges are
  host-relative).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: nixel2007

examples/demo.ts

@@ -1,14 +1,31 @@
-// Live demo: two-panel CodeMirror 6 + @1c-syntax/codemirror-lang-bsl showcase.
+// Live demo: CodeMirror 6 editor + side-by-side AST viewer, sample picker,
+// and drag-and-drop file loading.
 //
 // Bundled to docs/bundle.js by `npm run build:demo` and deployed to GitHub
-// Pages by the .github/workflows/pages.yml workflow.
+// Pages by .github/workflows/pages.yml. The AST viewer descends into mounted
+// SDBL overlays so query strings show their inner Query(StmtKw, MdoKw, …)
+// structure inline with the surrounding BSL tree.
 
 import {EditorView, basicSetup} from "codemirror"
-import {EditorState} from "@codemirror/state"
+import {EditorState, StateField, type Extension} from "@codemirror/state"
+import {syntaxTree} from "@codemirror/language"
 import {oneDark} from "@codemirror/theme-one-dark"
+import {Tree, NodeProp, type Tree as TreeT, type TreeCursor} from "@lezer/common"
 import {bsl} from "../src/index"
 
-const moduleSample = `// Пример модуля 1С: процедура с аннотацией, ветвлением, циклом
+// ---- Samples ---------------------------------------------------------------
+
+interface Sample {
+  id: string
+  label: string
+  doc: string
+}
+
+const SAMPLES: Sample[] = [
+  {
+    id: "module",
+    label: "Модуль — процедура, аннотация, ветвление, цикл, async",
+    doc: `// Пример модуля 1С: процедура с аннотацией, ветвлением, циклом
 &НаКлиенте
 Процедура ПриОткрытии(Отказ)
     Сообщить("Привет, " + Объект.Наименование + "!");
@@ -38,11 +55,13 @@ const moduleSample = `// Пример модуля 1С: процедура с а
 
 #КонецОбласти
 `
-
-const querySample = `// Демонстрация встроенной грамматики SDBL (язык запросов 1С) внутри строки.
-// Подсветка ключевых слов запроса, типов метаданных и виртуальных таблиц
-// активируется автоматически, когда строка начинается с ВЫБРАТЬ/SELECT.
-
+  },
+  {
+    id: "query",
+    label: "Запрос — SDBL внутри строки, JOIN, ИТОГИ, параметры",
+    doc: `// Демонстрация встроенной грамматики SDBL.
+// SDBL подсветка автоматически включается, когда строка
+// начинается с ВЫБРАТЬ/SELECT.
 Функция ПолучитьКонтрагентов() Экспорт
     Запрос = Новый Запрос;
     Запрос.Текст =
@@ -74,62 +93,261 @@ const querySample = `// Демонстрация встроенной грамм
     Возврат Запрос.Выполнить().Выгрузить();
 КонецФункции
 `
+  },
+  {
+    id: "preproc",
+    label: "Препроцессор — #Если / #Область / #Использовать",
+    doc: `#Использовать "vanessa-runner"
+
+#Область ПрограммныйИнтерфейс
+
+#Если Клиент Тогда
+
+&НаКлиенте
+Процедура ВыполнитьНаКлиенте() Экспорт
+    Сообщить("работаем на клиенте");
+КонецПроцедуры
+
+#ИначеЕсли Сервер И Не ВнешнееСоединение Тогда
+
+&НаСервере
+Процедура ВыполнитьНаСервере() Экспорт
+    Сообщить("работаем на сервере");
+КонецПроцедуры
+
+#Иначе
+
+Процедура НеподдерживаемоеОкружение()
+    ВызватьИсключение "Не поддерживается";
+КонецПроцедуры
+
+#КонецЕсли
+
+#КонецОбласти
+`
+  },
+  {
+    id: "doc",
+    label: "Doc-комментарии (///) и метки",
+    doc: `/// Поиск элемента в массиве по предикату.
+///
+/// @param Массив - Массив - где искать
+/// @param Предикат - Функция - возвращает Истина для подходящего элемента
+/// @returns Произвольный - первый элемент или Неопределено
+Функция Найти(Массив, Предикат) Экспорт
+    Для Каждого Элемент Из Массив Цикл
+        Если Предикат(Элемент) Тогда
+            Возврат Элемент;
+        КонецЕсли;
+    КонецЦикла;
+    Возврат Неопределено;
+КонецФункции
+
+Процедура ОбходПоМеткам()
+    Сч = 0;
+    ~Начало:
+    Сч = Сч + 1;
+    Если Сч < 5 Тогда
+        Перейти ~Начало;
+    КонецЕсли;
+КонецПроцедуры
+`
+  }
+]
+
+// ---- State -----------------------------------------------------------------
 
-// ----- helpers --------------------------------------------------------------
+const params = new URLSearchParams(location.search)
+let dark = params.get("theme") !== "light"
+let currentSampleId = params.get("sample") ?? "module"
 
-interface PanelState {
-  view: EditorView
-  dark: boolean
+const editorHost = document.getElementById("editor") as HTMLElement
+const astHost = document.getElementById("ast") as HTMLElement
+const themeBtn = document.getElementById("theme-toggle") as HTMLButtonElement
+const sampleSel = document.getElementById("sample") as HTMLSelectElement
+
+// ---- Sample picker ---------------------------------------------------------
+
+for (const s of SAMPLES) {
+  const opt = document.createElement("option")
+  opt.value = s.id
+  opt.textContent = s.label
+  sampleSel.appendChild(opt)
+}
+if (SAMPLES.some(s => s.id === currentSampleId)) {
+  sampleSel.value = currentSampleId
+} else {
+  currentSampleId = "module"
+  sampleSel.value = currentSampleId
 }
 
-function makePanel(parent: HTMLElement, doc: string, dark: boolean): PanelState {
-  const view = new EditorView({
-    state: EditorState.create({
-      doc,
-      extensions: [
-        basicSetup,
-        bsl(),
-        ...(dark ? [oneDark] : [])
-      ]
-    }),
-    parent
-  })
-  return {view, dark}
+// ---- AST viewer ------------------------------------------------------------
+
+function escapeText(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
 }
 
-function rebuild(panel: PanelState, doc: string): void {
-  panel.view.setState(EditorState.create({
-    doc,
-    extensions: [
-      basicSetup,
-      bsl(),
-      ...(panel.dark ? [oneDark] : [])
-    ]
-  }))
+function snippet(doc: string, from: number, to: number): string {
+  const max = 40
+  const raw = doc.slice(from, to).replace(/\n/g, "\\n").replace(/\s+/g, " ")
+  return raw.length > max ? raw.slice(0, max) + "…" : raw
 }
 
-// ----- bootstrap ------------------------------------------------------------
+// Walk a tree and render its nodes as HTML. Descends into mounted overlay
+// trees (the SDBL parser does this for query string literals via parseMixed)
+// so the AST viewer shows the inner Query(StmtKw, …) structure aligned with
+// the host BSL tree.
+function renderTree(tree: TreeT, doc: string): string {
+  const out: string[] = []
 
-const moduleHost = document.getElementById("editor-module") as HTMLElement
-const queryHost = document.getElementById("editor-query") as HTMLElement
-const themeBtn = document.getElementById("theme-toggle") as HTMLButtonElement
+  function walk(cursor: TreeCursor, baseOffset: number, depth: number): void {
+    do {
+      // Cursor positions are zero-based against the *current* tree's input;
+      // overlay trees use host-relative offsets, so we keep a running base.
+      const from = cursor.from + baseOffset
+      const to = cursor.to + baseOffset
+      const text = escapeText(snippet(doc, from, to))
+      out.push(
+        `<div class="ast-node" data-from="${from}" data-to="${to}" ` +
+        `style="padding-left:${depth * 14}px">` +
+        `<span class="ast-name">${escapeText(cursor.name)}</span> ` +
+        `<span class="ast-pos">${from}–${to}</span> ` +
+        `<span class="ast-text">${text}</span>` +
+        `</div>`
+      )
 
-// Default to dark — One Dark contrasts highlight tags noticeably more than
-// CM6's default light highlightStyle, which is what people open this demo
-// for. A URL ?theme=light query param or the toggle below switches back.
-let dark = new URLSearchParams(location.search).get("theme") !== "light"
-themeBtn.textContent = dark ? "Светлая тема" : "Тёмная тема"
-document.body.classList.toggle("dark", dark)
+      // Descend into mounted overlays (SDBL inside a BSL String node).
+      const sub = cursor.tree
+      const mount = sub && sub.prop(NodeProp.mounted)
+      if (mount && mount.overlay) {
+        const innerCursor = mount.tree.cursor()
+        walk(innerCursor, cursor.from + baseOffset, depth + 1)
+      }
 
-const modulePanel = makePanel(moduleHost, moduleSample, dark)
-const queryPanel = makePanel(queryHost, querySample, dark)
+      if (cursor.firstChild()) {
+        walk(cursor, baseOffset, depth + 1)
+        cursor.parent()
+      }
+    } while (cursor.nextSibling())
+  }
+
+  walk(tree.cursor(), 0, 0)
+  return out.join("")
+}
+
+let suppressAstUpdate = false
+const astUpdateField = StateField.define<number>({
+  create() { return 0 },
+  update(value, tx) {
+    if (suppressAstUpdate) return value
+    if (tx.docChanged || tx.selection) return value + 1
+    return value
+  }
+})
+
+const astUpdater = EditorView.updateListener.of(update => {
+  if (!update.docChanged && !update.selectionSet) return
+  const tree = syntaxTree(update.state)
+  astHost.innerHTML = renderTree(tree, update.state.doc.toString())
+})
+
+// ---- Editor ----------------------------------------------------------------
+
+function commonExtensions(): Extension[] {
+  return [
+    basicSetup,
+    bsl(),
+    astUpdater,
+    astUpdateField,
+    ...(dark ? [oneDark] : [])
+  ]
+}
+
+const initial = SAMPLES.find(s => s.id === currentSampleId) ?? SAMPLES[0]
+let view = new EditorView({
+  state: EditorState.create({
+    doc: initial.doc,
+    extensions: commonExtensions()
+  }),
+  parent: editorHost
+})
+
+// Initial render (no doc-change event will fire on its own at startup).
+astHost.innerHTML = renderTree(syntaxTree(view.state), view.state.doc.toString())
+
+// ---- Click on AST node → focus that region in the editor -------------------
+
+astHost.addEventListener("click", e => {
+  const node = (e.target as HTMLElement).closest(".ast-node") as HTMLElement | null
+  if (!node) return
+  const from = Number(node.dataset.from)
+  const to = Number(node.dataset.to)
+  view.dispatch({
+    selection: {anchor: from, head: to},
+    scrollIntoView: true
+  })
+  view.focus()
+})
+
+// ---- Sample picker behaviour -----------------------------------------------
+
+function loadSample(id: string): void {
+  const s = SAMPLES.find(x => x.id === id)
+  if (!s) return
+  currentSampleId = id
+  view.setState(EditorState.create({
+    doc: s.doc,
+    extensions: commonExtensions()
+  }))
+  astHost.innerHTML = renderTree(syntaxTree(view.state), view.state.doc.toString())
+}
+
+sampleSel.addEventListener("change", () => loadSample(sampleSel.value))
+
+// ---- Theme toggle ----------------------------------------------------------
+
+function applyTheme(): void {
+  document.body.classList.toggle("dark", dark)
+  themeBtn.textContent = dark ? "Светлая тема" : "Тёмная тема"
+}
+applyTheme()
 
 themeBtn.addEventListener("click", () => {
   dark = !dark
-  modulePanel.dark = dark
-  queryPanel.dark = dark
-  themeBtn.textContent = dark ? "Светлая тема" : "Тёмная тема"
-  document.body.classList.toggle("dark", dark)
-  rebuild(modulePanel, modulePanel.view.state.doc.toString())
-  rebuild(queryPanel, queryPanel.view.state.doc.toString())
+  applyTheme()
+  const doc = view.state.doc.toString()
+  view.setState(EditorState.create({doc, extensions: commonExtensions()}))
+  astHost.innerHTML = renderTree(syntaxTree(view.state), doc)
+})
+
+// ---- Drag-and-drop file loading --------------------------------------------
+
+;(["dragenter", "dragover"] as const).forEach(ev => {
+  editorHost.addEventListener(ev, e => {
+    e.preventDefault()
+    editorHost.classList.add("drop-target")
+  })
+})
+;(["dragleave", "drop"] as const).forEach(ev => {
+  editorHost.addEventListener(ev, e => {
+    e.preventDefault()
+    editorHost.classList.remove("drop-target")
+  })
+})
+
+editorHost.addEventListener("drop", async e => {
+  const file = e.dataTransfer?.files[0]
+  if (!file) return
+  const text = await file.text()
+  view.setState(EditorState.create({doc: text, extensions: commonExtensions()}))
+  astHost.innerHTML = renderTree(syntaxTree(view.state), text)
+  // Reset the sample picker to a custom-file marker by adding/selecting one.
+  let opt = sampleSel.querySelector<HTMLOptionElement>('option[value="__file"]')
+  if (!opt) {
+    opt = document.createElement("option")
+    opt.value = "__file"
+    sampleSel.appendChild(opt)
+  }
+  opt.textContent = `Загружено: ${file.name}`
+  sampleSel.value = "__file"
 })