@citisen/litearea 0.1.0

package/dist/react.js

@@ -0,0 +1,3010 @@
+import * as React from 'react';
+
+// src/react/index.tsx
+
+// src/core/rank.ts
+var TIER_STRIDE = 1e6;
+var TIER = {
+  /** The needle is the label, in the same case. */
+  exact: 5,
+  /** The needle is the label, ignoring case. */
+  exactFold: 4,
+  /** The label starts with the needle. */
+  prefix: 3,
+  /**
+   * Every needle character either starts a word or continues one the match has
+   * already started. This is what makes initials work: `fm` finds `Fira Mono` and
+   * `IPM` finds `IBM Plex Mono`, without `IPM` being a substring of anything.
+   */
+  boundary: 2,
+  /** The needle appears as one unbroken run inside the label. */
+  substring: 1,
+  /** The needle's characters appear in order, with gaps. */
+  subsequence: 0
+};
+var SEPARATORS = /[\s\-_./:@()+[\]]/;
+function isWordStart(label, index) {
+  if (index <= 0) return index === 0;
+  const previous = label.charAt(index - 1);
+  if (SEPARATORS.test(previous)) return true;
+  const current = label.charAt(index);
+  return previous === previous.toLowerCase() && current !== current.toLowerCase();
+}
+function wantsExactCase(needle) {
+  return needle !== needle.toLowerCase();
+}
+function localScore(label, needle, indices, exactCase) {
+  let score = 0;
+  for (let position = 0; position < indices.length; position += 1) {
+    const index = indices[position];
+    if (index === void 0) continue;
+    if (index === 0) score += 24;
+    else if (isWordStart(label, index)) score += 14;
+    if (position > 0 && index === (indices[position - 1] ?? -2) + 1) score += 10;
+    if (exactCase && label.charAt(index) === needle.charAt(position)) score += 4;
+  }
+  const first = indices[0] ?? 0;
+  const last = indices[indices.length - 1] ?? 0;
+  score -= (last - first + 1 - needle.length) * 1.5;
+  score -= first * 2;
+  score -= label.length * 0.05;
+  return score;
+}
+function fuzzyMatch(needle, label) {
+  if (needle === "") return { score: 0, indices: [], tier: 0 };
+  const exactCase = wantsExactCase(needle);
+  const haystack = exactCase ? label : label.toLowerCase();
+  const query = exactCase ? needle : needle.toLowerCase();
+  if (label === needle) {
+    return { score: TIER.exact * TIER_STRIDE + localScore(label, needle, range(needle.length), true), indices: range(needle.length), tier: TIER.exact };
+  }
+  if (label.toLowerCase() === query) {
+    const indices = range(needle.length);
+    return {
+      score: TIER.exactFold * TIER_STRIDE + localScore(label, needle, indices, exactCase),
+      indices,
+      tier: TIER.exactFold
+    };
+  }
+  if (haystack.startsWith(query)) {
+    const indices = range(needle.length);
+    return {
+      score: TIER.prefix * TIER_STRIDE + localScore(label, needle, indices, exactCase),
+      indices,
+      tier: TIER.prefix
+    };
+  }
+  let best;
+  const consider = (candidate) => {
+    if (best === void 0 || candidate.score > best.score) best = candidate;
+  };
+  for (let at = haystack.indexOf(query); at >= 0; at = haystack.indexOf(query, at + 1)) {
+    const indices = range(needle.length, at);
+    const tier = isWordStart(label, at) ? TIER.boundary : TIER.substring;
+    consider({ score: tier * TIER_STRIDE + localScore(label, needle, indices, exactCase), indices, tier });
+  }
+  for (let start = 0; start < haystack.length; start += 1) {
+    if (haystack.charAt(start) !== query.charAt(0)) continue;
+    const indices = [start];
+    let cursor = start + 1;
+    let complete2 = true;
+    for (let position = 1; position < query.length; position += 1) {
+      const found = haystack.indexOf(query.charAt(position), cursor);
+      if (found < 0) {
+        complete2 = false;
+        break;
+      }
+      indices.push(found);
+      cursor = found + 1;
+    }
+    if (!complete2) continue;
+    const tier = indicesAreBoundaryish(label, indices) ? TIER.boundary : TIER.subsequence;
+    consider({ score: tier * TIER_STRIDE + localScore(label, needle, indices, exactCase), indices, tier });
+  }
+  return best;
+}
+function indicesAreBoundaryish(label, indices) {
+  for (let position = 0; position < indices.length; position += 1) {
+    const index = indices[position];
+    if (index === void 0) continue;
+    if (isWordStart(label, index)) continue;
+    if (position > 0 && index === (indices[position - 1] ?? -2) + 1) continue;
+    return false;
+  }
+  return true;
+}
+function range(count, from = 0) {
+  const out = [];
+  for (let index = 0; index < count; index += 1) out.push(from + index);
+  return out;
+}
+function rank(items, needle, options) {
+  const out = [];
+  for (const item of items) {
+    if (needle === "") {
+      out.push({ item, score: 0, indices: [] });
+      continue;
+    }
+    const label = options.label(item);
+    const subject = options.filterText?.(item) ?? label;
+    const match = fuzzyMatch(needle, subject);
+    if (match === void 0) continue;
+    out.push({ item, score: match.score, indices: subject === label ? match.indices : [] });
+  }
+  if (options.sortText === void 0) {
+    out.sort((left, right) => right.score - left.score);
+    return out;
+  }
+  return out.sort((left, right) => {
+    const leftKey = options.sortText?.(left.item) ?? options.label(left.item);
+    const rightKey = options.sortText?.(right.item) ?? options.label(right.item);
+    return leftKey < rightKey ? -1 : leftKey > rightKey ? 1 : right.score - left.score;
+  });
+}
+function highlightSegments(label, indices) {
+  if (indices.length === 0) return label === "" ? [] : [{ text: label, matched: false }];
+  const marked = new Set(indices);
+  const segments = [];
+  let current;
+  for (let index = 0; index < label.length; index += 1) {
+    const matched = marked.has(index);
+    if (current === void 0 || current.matched !== matched) {
+      if (current !== void 0) segments.push(current);
+      current = { text: "", matched };
+    }
+    current.text += label.charAt(index);
+  }
+  if (current !== void 0) segments.push(current);
+  return segments;
+}
+
+// src/core/text.ts
+function clamp(value, low, high) {
+  return value < low ? low : value > high ? high : value;
+}
+function lineStarts(source) {
+  const starts = [0];
+  for (let index = 0; index < source.length; index += 1) {
+    const code = source.charCodeAt(index);
+    if (code === 10) {
+      starts.push(index + 1);
+    } else if (code === 13) {
+      if (source.charCodeAt(index + 1) === 10) index += 1;
+      starts.push(index + 1);
+    }
+  }
+  return starts;
+}
+function lineIndexAt(starts, offset) {
+  let low = 0;
+  let high = starts.length - 1;
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if ((starts[middle] ?? 0) <= offset) low = middle;
+    else high = middle - 1;
+  }
+  return low;
+}
+function lineAt(source, offset, starts) {
+  const position = clamp(offset, 0, source.length);
+  const boundaries = starts ?? lineStarts(source);
+  const index = lineIndexAt(boundaries, position);
+  const from = boundaries[index] ?? 0;
+  const rawTo = boundaries[index + 1] ?? source.length;
+  let to = rawTo;
+  while (to > from) {
+    const code = source.charCodeAt(to - 1);
+    if (code === 10 || code === 13) to -= 1;
+    else break;
+  }
+  const text = source.slice(from, to);
+  const column = clamp(position - from, 0, text.length);
+  return {
+    from,
+    to,
+    text,
+    number: index,
+    column,
+    before: text.slice(0, column),
+    after: text.slice(column)
+  };
+}
+function isWordChar(char, wordChars) {
+  return char !== "" && wordChars.test(char);
+}
+function wordInfoAt(source, offset, wordChars) {
+  const position = clamp(offset, 0, source.length);
+  let from = position;
+  let to = position;
+  while (from > 0 && isWordChar(source.charAt(from - 1), wordChars)) from -= 1;
+  while (to < source.length && isWordChar(source.charAt(to), wordChars)) to += 1;
+  const text = source.slice(from, to);
+  const column = position - from;
+  return {
+    from,
+    to,
+    text,
+    prefix: text.slice(0, column),
+    suffix: text.slice(column)
+  };
+}
+function containsOffset(range2, offset) {
+  return offset >= range2.from && offset < range2.to;
+}
+function tokenAt(tokens, offset) {
+  for (const token of tokens) {
+    if (token.from <= offset && offset < token.to) return token;
+    if (token.from > offset) break;
+  }
+  return void 0;
+}
+function scopeAt(tokens, offset) {
+  return tokenAt(tokens, offset)?.scope;
+}
+function tokenBefore(tokens, offset) {
+  let found;
+  for (const token of tokens) {
+    if (token.to > offset) break;
+    if (token.text.trim() !== "") found = token;
+  }
+  return found;
+}
+function tokensOnLine(tokens, line) {
+  const number = typeof line === "number" ? line : line.number;
+  return tokens.filter((token) => token.line === number && token.text.trim() !== "");
+}
+
+// src/core/format.ts
+var DEFAULT_LIST_LIMIT = 12;
+function listPhrase(items, options) {
+  const conjunction = "or";
+  const limit = DEFAULT_LIST_LIMIT;
+  const shown = items.slice(0, limit);
+  const rest = items.length - shown.length;
+  if (shown.length === 0) return "";
+  if (shown.length === 1) {
+    return rest > 0 ? `${String(shown[0])} and ${String(rest)} more` : String(shown[0]);
+  }
+  if (shown.length === 2) {
+    const pair = `${String(shown[0])} ${conjunction} ${String(shown[1])}`;
+    return rest > 0 ? `${pair}, and ${String(rest)} more` : pair;
+  }
+  const head = shown.slice(0, -1).join(", ");
+  const tail = shown[shown.length - 1];
+  const phrase = `${head}, ${conjunction} ${String(tail)}`;
+  return rest > 0 ? `${phrase}, and ${String(rest)} more` : phrase;
+}
+
+// src/core/vocabulary.ts
+function asResolvedVocabulary(source) {
+  if (typeof source !== "object" || source === null || Array.isArray(source)) return void 0;
+  const candidate = source;
+  return typeof candidate.resolve === "function" ? source : void 0;
+}
+function resolveWordsSource(source, context) {
+  const vocabulary = asResolvedVocabulary(source);
+  const raw = vocabulary !== void 0 ? vocabulary.resolve(context) : typeof source === "function" ? source(context) : source;
+  return Array.isArray(raw) ? raw.filter((word) => word !== "") : [];
+}
+
+// src/core/scan.ts
+function isResolvedGrammar(value) {
+  return value.__resolved === true;
+}
+var DEFAULT_WORD_CHARS = /[\p{L}\p{N}_$]/u;
+var stickyCache = /* @__PURE__ */ new WeakMap();
+function sticky(pattern) {
+  const cached = stickyCache.get(pattern);
+  if (cached !== void 0) return cached;
+  const flags = pattern.flags.replace(/[gy]/g, "");
+  const compiled = new RegExp(pattern.source, `${flags}y`);
+  stickyCache.set(pattern, compiled);
+  return compiled;
+}
+function execAt(pattern, source, index) {
+  pattern.lastIndex = index;
+  const match = pattern.exec(source);
+  return match !== null && match.index === index ? match : null;
+}
+function withoutStatefulFlags(pattern) {
+  const flags = pattern.flags.replace(/[gy]/g, "");
+  return flags === pattern.flags ? pattern : new RegExp(pattern.source, flags);
+}
+function resolveGrammar(grammar) {
+  return {
+    __resolved: true,
+    grammar,
+    rules: grammar.rules,
+    fallbackScope: grammar.fallbackScope ?? "text",
+    wordChars: withoutStatefulFlags(grammar.wordChars ?? DEFAULT_WORD_CHARS)
+  };
+}
+function scan(source, grammar) {
+  const resolved = isResolvedGrammar(grammar) ? grammar : resolveGrammar(grammar);
+  const { rules, fallbackScope, wordChars } = resolved;
+  const declared = resolved.grammar;
+  const sourceId = declared.id;
+  const state = declared.analyze === void 0 ? declared.initialState : declared.analyze(source);
+  const vocabularyContext = { text: source, state };
+  const tokens = [];
+  const diagnostics = [];
+  const starts = lineStarts(source);
+  const length = source.length;
+  const wordsCache = /* @__PURE__ */ new Map();
+  let cachedLineNumber = -1;
+  let cachedLineBounds;
+  const prevNotCache = /* @__PURE__ */ new WeakMap();
+  const lineInfoAt = (position) => {
+    const number = lineIndexAt(starts, position);
+    if (number !== cachedLineNumber || cachedLineBounds === void 0) {
+      const info = lineAt(source, position, starts);
+      cachedLineBounds = { from: info.from, to: info.to, text: info.text };
+      cachedLineNumber = number;
+    }
+    const column = clamp(position - cachedLineBounds.from, 0, cachedLineBounds.text.length);
+    return {
+      from: cachedLineBounds.from,
+      to: cachedLineBounds.to,
+      text: cachedLineBounds.text,
+      number,
+      column,
+      before: cachedLineBounds.text.slice(0, column),
+      after: cachedLineBounds.text.slice(column)
+    };
+  };
+  const resolveWords = (from) => {
+    const cached = wordsCache.get(from);
+    if (cached !== void 0) return cached;
+    const vocabulary = asResolvedVocabulary(from);
+    const caseSensitive = vocabulary?.caseSensitive === true;
+    const raw = vocabulary !== void 0 ? vocabulary.resolve(vocabularyContext) : typeof from === "function" ? from(vocabularyContext) : from;
+    const list = Array.isArray(raw) ? raw.filter((word) => word !== "") : [];
+    const fold = (word) => caseSensitive ? word : word.toLowerCase();
+    const entry = {
+      list,
+      set: new Set(list.map(fold)),
+      literal: list.filter((word) => [...word].some((char) => !isWordChar(char, wordChars))).slice().sort((left, right) => right.length - left.length),
+      caseSensitive
+    };
+    wordsCache.set(from, entry);
+    return entry;
+  };
+  const scopeOf = (spec, match, fallback) => spec === void 0 ? fallback : typeof spec === "function" ? spec(match) : spec;
+  const contextHolds = (when, index2, previousScope2) => {
+    if (when === void 0) return true;
+    const info = lineInfoAt(index2);
+    if (when.firstOnLine === true && info.text.slice(0, info.column).trim() !== "") return false;
+    if (when.after !== void 0) {
+      if (previousScope2 === void 0 || !when.after.includes(previousScope2)) return false;
+    }
+    if (when.notAfter !== void 0 && previousScope2 !== void 0) {
+      if (when.notAfter.includes(previousScope2)) return false;
+    }
+    if (when.line !== void 0 && !when.line.test(info.text)) return false;
+    if (when.minColumn !== void 0 && info.column < when.minColumn) return false;
+    if (when.maxColumn !== void 0 && info.column > when.maxColumn) return false;
+    if (when.prevNot !== void 0 && index2 > 0) {
+      let pattern = prevNotCache.get(when);
+      if (pattern === void 0) {
+        pattern = new RegExp(`[${when.prevNot}]`);
+        prevNotCache.set(when, pattern);
+      }
+      if (pattern.test(source.charAt(index2 - 1))) return false;
+    }
+    return true;
+  };
+  let regionScope;
+  let previousScope;
+  const push = (scope, from, to, region) => {
+    if (to <= from) return;
+    const text = source.slice(from, to);
+    const last = tokens[tokens.length - 1];
+    if (last !== void 0 && last.scope === scope && last.to === from && last.region === region && !/[\r\n]/.test(text) && !/[\r\n]/.test(last.text)) {
+      last.to = to;
+      last.text = source.slice(last.from, to);
+    } else {
+      const info = lineInfoAt(from);
+      tokens.push({ from, to, scope, text, line: info.number, column: from - info.from, region });
+    }
+    if (text.trim() !== "") previousScope = scope;
+  };
+  const report = (problem) => {
+    diagnostics.push({
+      from: problem.from,
+      to: problem.to,
+      message: problem.message,
+      severity: problem.severity ?? "error",
+      code: problem.code ?? "lexical",
+      source: sourceId
+    });
+  };
+  const ruleMatch = (text, from, groups) => ({ text, source, from, groups, state });
+  const readWordRun = (index2) => {
+    let to = index2;
+    while (to < length && isWordChar(source.charAt(to), wordChars)) to += 1;
+    return to;
+  };
+  const readSegments = (index2, limit) => {
+    const segments = [];
+    let cursor = index2;
+    while (segments.length < limit && cursor < length) {
+      const to = readWordRun(cursor);
+      if (to === cursor) break;
+      segments.push({ from: cursor, to });
+      cursor = to;
+      const gap = /^[^\S\r\n]+/.exec(source.slice(cursor))?.[0];
+      if (gap === void 0) break;
+      cursor += gap.length;
+    }
+    return segments;
+  };
+  const matchWords = (rule, words, index2) => {
+    const fold = (word) => words.caseSensitive ? word : word.toLowerCase();
+    const firstTo = readWordRun(index2);
+    if (firstTo > index2) {
+      if (rule.phrase !== void 0) {
+        const segments = readSegments(index2, Math.max(rule.phrase.max ?? 4, 1));
+        for (let count = segments.length; count >= 1; count -= 1) {
+          const texts = segments.slice(0, count).map((segment) => source.slice(segment.from, segment.to));
+          const candidate = texts.join(" ");
+          if (words.set.has(fold(candidate))) {
+            const last = segments[count - 1];
+            if (last !== void 0) return { to: last.to, member: candidate };
+          }
+        }
+      } else {
+        const candidate = source.slice(index2, firstTo);
+        if (words.set.has(fold(candidate))) return { to: firstTo, member: candidate };
+      }
+    }
+    for (const member of words.literal) {
+      if (rule.phrase !== void 0 && /\s/.test(member)) continue;
+      if (source.startsWith(member, index2)) return { to: index2 + member.length, member };
+    }
+    return void 0;
+  };
+  const anyRuleClaims = (index2, previous) => {
+    const openRegion = openRegions[openRegions.length - 1];
+    if (openRegion !== void 0) {
+      const endMatch = execAt(sticky(openRegion.rule.end), source, index2);
+      if (endMatch !== null && endMatch[0].length > 0) return true;
+    }
+    for (const rule of rules) {
+      if (!contextHolds(rule.when, index2, previous)) continue;
+      if (rule.kind === "region") {
+        const match2 = execAt(sticky(rule.begin), source, index2);
+        if (match2 !== null && match2[0].length > 0) return true;
+        continue;
+      }
+      if (rule.kind === "words") {
+        if (matchWords(rule, resolveWords(rule.words), index2) !== void 0) return true;
+        if (rule.unknown !== void 0 && readWordRun(index2) > index2) return true;
+        continue;
+      }
+      const match = execAt(sticky(rule.pattern), source, index2);
+      if (match !== null && match[0].length > 0) return true;
+    }
+    return false;
+  };
+  const openRegions = [];
+  let index = 0;
+  while (index < length) {
+    const open = openRegions[openRegions.length - 1];
+    if (open !== void 0) {
+      const endMatch = execAt(sticky(open.rule.end), source, index);
+      if (endMatch !== null && endMatch[0].length > 0) {
+        const closeScope = scopeOf(
+          open.rule.closeScope ?? open.rule.scope,
+          ruleMatch(endMatch[0], index, [...endMatch]),
+          open.scope
+        );
+        push(closeScope, index, index + endMatch[0].length, open.scope);
+        index += endMatch[0].length;
+        openRegions.pop();
+        regionScope = openRegions[openRegions.length - 1]?.scope;
+        continue;
+      }
+      if (open.rule.transparent !== true) {
+        if (open.rule.nested === true) {
+          const inner = execAt(sticky(open.rule.begin), source, index);
+          if (inner !== null && inner[0].length > 0) {
+            const innerMatch = ruleMatch(inner[0], index, [...inner]);
+            push(
+              scopeOf(open.rule.openScope ?? open.rule.scope, innerMatch, open.scope),
+              index,
+              index + inner[0].length,
+              open.scope
+            );
+            openRegions.push({
+              rule: open.rule,
+              scope: open.scope,
+              beginFrom: index,
+              beginTo: index + inner[0].length
+            });
+            index += inner[0].length;
+            continue;
+          }
+        }
+        push(open.scope, index, index + 1, open.scope);
+        index += 1;
+        continue;
+      }
+    }
+    let matched = false;
+    for (const rule of rules) {
+      if (!contextHolds(rule.when, index, previousScope)) continue;
+      if (rule.kind === "region") {
+        const begin = execAt(sticky(rule.begin), source, index);
+        if (begin === null || begin[0].length === 0) continue;
+        const beginMatch = ruleMatch(begin[0], index, [...begin]);
+        const scope = scopeOf(rule.scope, beginMatch, "text");
+        const openScope = scopeOf(rule.openScope ?? rule.scope, beginMatch, scope);
+        const contentScope = scopeOf(rule.contentScope ?? rule.scope, beginMatch, scope);
+        const closeScope = scopeOf(rule.closeScope ?? rule.scope, beginMatch, scope);
+        const beginEnd = index + begin[0].length;
+        push(openScope, index, beginEnd, regionScope);
+        if (rule.nested === true || rule.transparent === true) {
+          openRegions.push({ rule, scope: contentScope, beginFrom: index, beginTo: beginEnd });
+          regionScope = contentScope;
+          index = beginEnd;
+          matched = true;
+          break;
+        }
+        const close = findRegionEnd(rule.end, source, beginEnd);
+        if (close === void 0) {
+          push(
+            scopeOf(rule.unclosed?.scope === void 0 ? void 0 : rule.unclosed.scope, beginMatch, contentScope),
+            beginEnd,
+            length,
+            scope
+          );
+          report({
+            from: index,
+            to: beginEnd,
+            message: rule.unclosed?.message === void 0 ? `Unterminated ${scope}.` : typeof rule.unclosed.message === "function" ? rule.unclosed.message(beginMatch) : rule.unclosed.message,
+            severity: rule.unclosed?.severity ?? "error",
+            code: rule.unclosed?.code ?? "unclosed-region"
+          });
+          index = length;
+          matched = true;
+          break;
+        }
+        push(contentScope, beginEnd, close.from, scope);
+        push(closeScope, close.from, close.to, scope);
+        index = close.to;
+        matched = true;
+        break;
+      }
+      if (rule.kind === "words") {
+        const words = resolveWords(rule.words);
+        const vocabulary = asResolvedVocabulary(rule.words);
+        const hit = matchWords(rule, words, index);
+        if (hit !== void 0) {
+          const text = source.slice(index, hit.to);
+          const match2 = ruleMatch(text, index, [text]);
+          const scope = rule.scope !== void 0 ? scopeOf(rule.scope, match2, "word") : vocabulary?.scopeFor !== void 0 ? vocabulary.scopeFor(hit.member) : "word";
+          push(scope, index, hit.to, regionScope);
+          index = hit.to;
+          matched = true;
+          break;
+        }
+        if (rule.unknown === void 0) continue;
+        const candidateTo = readWordRun(index);
+        if (candidateTo <= index) continue;
+        const word = source.slice(index, candidateTo);
+        const rejected = vocabulary?.reject?.(word, vocabularyContext);
+        const message = rule.unknown.message === void 0 ? rejected?.message : typeof rule.unknown.message === "function" ? rule.unknown.message(word, ruleMatch(word, index, [word])) : rule.unknown.message.replace(/\{word\}/g, word).replace(/\{allowed\}/g, listPhrase(words.list));
+        push(rule.unknown.scope ?? vocabulary?.unknownScope ?? "invalid", index, candidateTo, regionScope);
+        if (message !== void 0) {
+          report({
+            from: index,
+            to: candidateTo,
+            message,
+            severity: rule.unknown.severity ?? rejected?.severity ?? "error",
+            code: rule.unknown.code ?? rejected?.code ?? "unknown-word"
+          });
+        }
+        index = candidateTo;
+        matched = true;
+        break;
+      }
+      const match = execAt(sticky(rule.pattern), source, index);
+      if (match === null || match[0].length === 0) continue;
+      const matchInfo = ruleMatch(match[0], index, [...match]);
+      push(scopeOf(rule.scope, matchInfo, fallbackScope), index, index + match[0].length, regionScope);
+      index += match[0].length;
+      matched = true;
+      break;
+    }
+    if (matched) continue;
+    const unclaimed = regionScope ?? fallbackScope;
+    let to = index;
+    let runPrevious = previousScope;
+    while (to < length) {
+      const char = source.charAt(to);
+      if (char === "\n" || char === "\r") break;
+      if (anyRuleClaims(to, runPrevious)) break;
+      if (/\S/.test(char)) runPrevious = unclaimed;
+      to += 1;
+    }
+    push(unclaimed, index, Math.max(to, index + 1), regionScope);
+    index = Math.max(to, index + 1);
+  }
+  for (let frame = openRegions.length - 1; frame >= 0; frame -= 1) {
+    const open = openRegions[frame];
+    if (open === void 0) continue;
+    const message = open.rule.unclosed?.message === void 0 ? `Unterminated ${open.scope}.` : typeof open.rule.unclosed.message === "function" ? open.rule.unclosed.message(ruleMatch("", open.beginFrom, [""])) : open.rule.unclosed.message;
+    report({
+      from: open.beginFrom,
+      to: open.beginTo,
+      message,
+      severity: open.rule.unclosed?.severity ?? "error",
+      code: open.rule.unclosed?.code ?? "unclosed-region"
+    });
+  }
+  return { tokens, diagnostics, state };
+}
+function findRegionEnd(pattern, source, from) {
+  const probe = new RegExp(pattern.source, `${pattern.flags.replace(/[gy]/g, "")}g`);
+  probe.lastIndex = from;
+  const match = probe.exec(source);
+  if (match === null || match[0].length === 0) return void 0;
+  return { from: match.index, to: match.index + match[0].length };
+}
+
+// src/core/complete.ts
+var DEFAULT_LIMIT = 100;
+function complete(inspection, grammar, request) {
+  const resolved = isResolvedGrammar(grammar) ? grammar : resolveGrammar(grammar);
+  const sources = resolved.grammar.compose;
+  if (sources === void 0 || sources.length === 0) return void 0;
+  const text = request.text;
+  const caret = clamp(request.caret, 0, text.length);
+  const context = completionContext(inspection, resolved, caret, request.trigger);
+  const eligible = sources.filter((source) => source.when === void 0 || source.when(context));
+  if (eligible.length === 0) return void 0;
+  const ordered = [...eligible].sort((left, right) => (right.priority ?? 0) - (left.priority ?? 0));
+  const reopening = request.previousSourceId === void 0 ? void 0 : ordered.find((source) => source.id === request.previousSourceId);
+  const winner = reopening ?? ordered[0];
+  if (winner === void 0) return void 0;
+  const range2 = resolveRange(winner, context);
+  const merged = [...winner.items(context)];
+  for (const source of ordered) {
+    if (source === winner || source.merge !== true) continue;
+    merged.push(...source.items(context));
+  }
+  if (merged.length === 0) return void 0;
+  const needleFrom = clamp(range2.from, 0, caret);
+  const needleTo = clamp(caret, needleFrom, Math.max(range2.to, needleFrom));
+  const needle = text.slice(needleFrom, needleTo);
+  const ranked = rank(merged, needle, {
+    label: (item) => item.label,
+    ...merged.some((item) => item.filterText !== void 0) ? { filterText: (item) => item.filterText ?? item.label } : {},
+    ...merged.some((item) => item.sortText !== void 0) ? { sortText: (item) => item.sortText } : {}
+  });
+  const limit = request.limit ?? DEFAULT_LIMIT;
+  return {
+    range: range2,
+    rows: ranked.slice(0, limit).map((entry) => ({
+      item: entry.item,
+      score: entry.score,
+      indices: entry.indices
+    })),
+    needle,
+    sourceId: winner.id
+  };
+}
+function resolveRange(source, context) {
+  if (typeof source.range !== "function") return source.range;
+  const range2 = source.range(context);
+  return {
+    from: Math.min(range2.from, range2.to),
+    to: Math.max(range2.from, range2.to)
+  };
+}
+function completionContext(inspection, resolved, caret, trigger) {
+  const { text, tokens, diagnostics, state } = inspection;
+  const line = lineAt(text, caret, lineStarts(text));
+  const lineTokens = tokensOnLine(tokens, line.number);
+  const word = wordInfoAt(text, caret, resolved.wordChars);
+  return {
+    text,
+    caret,
+    word,
+    line,
+    tokens,
+    diagnostics,
+    state,
+    scope: scopeAt(tokens, caret),
+    scopeBefore: tokenBefore(tokens, caret)?.scope,
+    // "First on line" means only whitespace precedes the caret, which is a question
+    // about the caret and not about the token under it: a caret in the indentation of
+    // a line that already has content is not first on that line. `lineTokens` is what
+    // tells the difference, so the tokens are read even though the answer looks like a
+    // string test.
+    firstOnLine: line.before.trim() === "" && !lineTokens.some((token) => token.to <= caret),
+    // "First word" additionally allows the rest of the word the caret is in, which is
+    // what keeps a line-head completion alive while the head is being typed.
+    firstWord: line.text.slice(0, Math.max(0, word.from - line.from)).trim() === "",
+    firstToken: lineTokens[0],
+    trigger
+  };
+}
+function applyCompletion(text, range2, item) {
+  const from = clamp(Math.min(range2.from, range2.to), 0, text.length);
+  const to = clamp(Math.max(range2.from, range2.to), from, text.length);
+  const insert = item.insert ?? item.label;
+  const append = item.append ?? "";
+  const offset = item.caretOffset ?? 0;
+  if (item.mode === "before") {
+    const head2 = text.slice(0, from);
+    const gap = head2 !== "" && !/\s$/.test(head2) ? " " : "";
+    const rest2 = text.slice(from).replace(/^\s+/, "");
+    const written2 = `${gap}${insert}${redundant(append, rest2) ? "" : append}`;
+    return {
+      text: `${head2}${written2}${rest2}`,
+      caret: head2.length + written2.length + offset,
+      range: { from: head2.length, to: head2.length + written2.length },
+      from,
+      to: from,
+      insert: written2
+    };
+  }
+  const head = text.slice(0, from);
+  const rest = text.slice(to);
+  const written = `${insert}${redundant(append, rest) ? "" : append}`;
+  return {
+    text: `${head}${written}${rest}`,
+    caret: head.length + written.length + offset,
+    range: { from: head.length, to: head.length + written.length },
+    from,
+    to,
+    insert: written
+  };
+}
+function redundant(append, rest) {
+  if (append === "") return true;
+  return append.trim() === "" ? /^\s/.test(rest) : rest.startsWith(append);
+}
+
+// src/core/hover.ts
+var SEVERITY_TITLE = {
+  error: "Error",
+  warning: "Warning",
+  info: "Info",
+  hint: "Hint"
+};
+function diagnosticHover(diagnostic) {
+  return {
+    kind: "diagnostic",
+    title: SEVERITY_TITLE[diagnostic.severity],
+    detail: diagnostic.source,
+    body: diagnostic.detail === void 0 ? diagnostic.message : `${diagnostic.message}
+
+${diagnostic.detail}`,
+    range: { from: diagnostic.from, to: diagnostic.to }
+  };
+}
+function resolveHover(inspection, grammar, offset) {
+  const resolved = isResolvedGrammar(grammar) ? grammar : resolveGrammar(grammar);
+  const { text, tokens, diagnostics, decorations, state } = inspection;
+  let covering;
+  for (const diagnostic of diagnostics) {
+    if (!containsOffset(diagnostic, offset)) continue;
+    if (covering === void 0 || diagnostic.to - diagnostic.from < covering.to - covering.from) {
+      covering = diagnostic;
+    }
+  }
+  if (covering !== void 0) return diagnosticHover(covering);
+  const decoration = decorations.find((entry) => containsOffset(entry, offset));
+  const described = describeAt(inspection, resolved, offset);
+  if (decoration?.title !== void 0) {
+    return {
+      kind: "decoration",
+      title: decoration.title,
+      detail: described?.detail ?? described?.title,
+      body: described?.body,
+      range: { from: decoration.from, to: decoration.to }
+    };
+  }
+  return described;
+}
+function describeAt(inspection, resolved, offset) {
+  if (resolved.grammar.describe === void 0) return void 0;
+  const { text, tokens, diagnostics, state } = inspection;
+  const found = tokenAt(tokens, offset);
+  const token = found === void 0 || found.text.trim() === "" ? void 0 : found;
+  const context = {
+    text,
+    offset,
+    token,
+    word: wordInfoAt(text, offset, resolved.wordChars),
+    line: lineAt(text, offset, lineStarts(text)),
+    tokens,
+    diagnostics,
+    state
+  };
+  return resolved.grammar.describe(context) ?? void 0;
+}
+
+// src/core/inspect.ts
+function runChecks(source, grammar, tokens, state) {
+  const checks = grammar.grammar.checks;
+  if (checks === void 0 || checks.length === 0) return [];
+  const diagnostics = [];
+  const context = { text: source, state };
+  for (const check of checks) {
+    const members = check.allow === void 0 ? void 0 : resolveWordsSource(check.allow, context);
+    const vocabulary = check.allow === void 0 ? void 0 : check.allow;
+    const caseSensitive = typeof vocabulary === "object" && vocabulary !== null && !Array.isArray(vocabulary) ? vocabulary.caseSensitive === true : false;
+    const fold = (word) => caseSensitive ? word : word.toLowerCase();
+    const set = members === void 0 ? void 0 : new Set(members.map((member) => fold(member)));
+    const reportedLines = /* @__PURE__ */ new Set();
+    for (const token of tokens) {
+      if (token.text.trim() === "") continue;
+      if (!check.scopes.includes("*") && !check.scopes.includes(token.scope)) continue;
+      if (check.except !== void 0 && check.except.test(token.text)) continue;
+      if (set !== void 0 && set.has(fold(token.text))) continue;
+      if (check.perLine === true) {
+        if (reportedLines.has(token.line)) continue;
+        reportedLines.add(token.line);
+      }
+      diagnostics.push({
+        from: token.from,
+        to: token.to,
+        severity: check.severity ?? "error",
+        message: check.message.replace(/\{word\}/g, token.text).replace(/\{allowed\}/g, listPhrase(members ?? [])),
+        code: check.code,
+        detail: check.detail,
+        source: grammar.grammar.id
+      });
+    }
+  }
+  return diagnostics;
+}
+function inspect(source, grammar) {
+  const resolved = isResolvedGrammar(grammar) ? grammar : resolveGrammar(grammar);
+  const scanned = scan(source, resolved);
+  const declared = resolved.grammar;
+  const diagnostics = [...scanned.diagnostics];
+  diagnostics.push(...runChecks(source, resolved, scanned.tokens, scanned.state));
+  if (declared.validate !== void 0) {
+    const context = {
+      text: source,
+      tokens: scanned.tokens,
+      state: scanned.state,
+      report: (problem) => {
+        diagnostics.push({
+          from: problem.from,
+          to: problem.to,
+          severity: problem.severity ?? "error",
+          message: problem.message,
+          code: problem.code ?? "validate",
+          detail: problem.detail,
+          source: declared.id
+        });
+      }
+    };
+    declared.validate(context);
+  }
+  const decorations = declared.decorate === void 0 ? [] : [...declared.decorate(source, scanned.state)];
+  return {
+    text: source,
+    tokens: scanned.tokens,
+    diagnostics: normalizeDiagnostics(diagnostics),
+    decorations: normalizeDecorations(decorations, source.length),
+    state: scanned.state
+  };
+}
+function normalizeDiagnostics(diagnostics) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const diagnostic of diagnostics) {
+    const key = `${diagnostic.from}:${diagnostic.to}:${diagnostic.code ?? ""}:${diagnostic.message}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(diagnostic);
+  }
+  return out.sort((left, right) => left.from - right.from || left.to - right.to);
+}
+function normalizeDecorations(decorations, length) {
+  const out = [];
+  for (const decoration of decorations) {
+    const from = Math.max(0, Math.min(decoration.from, length));
+    const to = Math.max(from, Math.min(decoration.to, length));
+    if (to <= from) continue;
+    out.push({ ...decoration, from, to });
+  }
+  return out.sort((left, right) => left.from - right.from || left.to - right.to);
+}
+
+// src/styles.ts
+var SCOPE_PALETTE = [
+  { scope: "text", light: "var(--litearea-fg)" },
+  { scope: "word", light: "var(--litearea-fg)" },
+  { scope: "family", light: "var(--litearea-fg)" },
+  { scope: "family-generic", light: "#7c3aed", dark: "#c4a2ff" },
+  { scope: "family-unknown", light: "var(--litearea-warning)" },
+  { scope: "family-unclosed", light: "var(--litearea-error)" },
+  { scope: "weight", light: "var(--litearea-accent)" },
+  { scope: "weight-missing", light: "var(--litearea-warning)" },
+  { scope: "state", light: "var(--litearea-accent)" },
+  { scope: "property", light: "#7c3aed", dark: "#c4a2ff" },
+  { scope: "operator", light: "var(--litearea-fg-dim)" },
+  { scope: "separator", light: "var(--litearea-fg-dim)" },
+  { scope: "value-shape", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-color", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-pattern", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-motion", light: "#0f766e", dark: "#5eead4" },
+  { scope: "value-number", light: "#b45309", dark: "#fbbf24" },
+  { scope: "comment", light: "var(--litearea-fg-dim)" },
+  { scope: "invalid", light: "var(--litearea-error)" },
+  { scope: "keyword", light: "var(--litearea-accent)" },
+  { scope: "string", light: "#0f766e", dark: "#5eead4" },
+  { scope: "number", light: "#b45309", dark: "#fbbf24" }
+];
+function scopeVariables(scheme) {
+  return SCOPE_PALETTE.filter((entry) => scheme === "light" || entry.dark !== void 0).map((entry) => {
+    const value = scheme === "light" ? entry.light : entry.dark;
+    return `  --litearea-scope-${entry.scope}: ${String(value)};`;
+  }).join("\n");
+}
+function scopeRules() {
+  return SCOPE_PALETTE.map(
+    (entry) => `.litearea-scope-${entry.scope} { color: var(--litearea-scope-${entry.scope}); }`
+  ).join("\n");
+}
+var LITEAREA_STYLES = `
+.litearea {
+  --litearea-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --litearea-font-size: 13px;
+  --litearea-line-height: 20px;
+  --litearea-padding-block: 6px;
+  --litearea-padding-inline: 10px;
+  --litearea-radius: 8px;
+  --litearea-fg: #1f2328;
+  --litearea-fg-dim: #6b7280;
+  --litearea-fg-strong: #111827;
+  --litearea-bg: #ffffff;
+  --litearea-bg-raised: #ffffff;
+  --litearea-border: #d8dbe0;
+  --litearea-border-focus: #4d6bfe;
+  --litearea-accent: #4d6bfe;
+  --litearea-accent-soft: rgba(77, 107, 254, 0.12);
+  --litearea-selection: rgba(77, 107, 254, 0.22);
+  --litearea-error: #e5484d;
+  --litearea-warning: #d97706;
+  --litearea-info: #4d6bfe;
+  --litearea-hint: #8b8f97;
+  --litearea-shadow: 0 6px 24px rgba(15, 23, 42, 0.14);
+
+${scopeVariables("light")}
+
+  position: relative;
+  display: block;
+  color: var(--litearea-fg);
+}
+
+@media (prefers-color-scheme: dark) {
+  .litearea {
+    --litearea-fg: #e6e8eb;
+    --litearea-fg-dim: #8b919b;
+    --litearea-fg-strong: #ffffff;
+    --litearea-bg: #1b1e24;
+    --litearea-bg-raised: #23262c;
+    --litearea-border: #363b44;
+${scopeVariables("dark")}
+    --litearea-error: #ff6b6b;
+    --litearea-warning: #f59e0b;
+    --litearea-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
+  }
+}
+
+/* \u2500\u2500 the box \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.litearea-box {
+  position: relative;
+  display: block;
+  border: 1px solid var(--litearea-border);
+  border-radius: var(--litearea-radius);
+  background: var(--litearea-bg);
+  transition: border-color 120ms ease;
+}
+
+.litearea-box:focus-within {
+  border-color: var(--litearea-border-focus);
+}
+
+.litearea-invalid .litearea-box {
+  border-color: var(--litearea-error);
+}
+
+/*
+ * The layer and the field share this rule and nothing may be added to one alone.
+ * Every property here is a property the mirror copies too \u2014 three elements, one
+ * typography, or the paint drifts.
+ */
+.litearea-layer,
+.litearea-input {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: var(--litearea-padding-block) var(--litearea-padding-inline);
+  border: none;
+  font-family: var(--litearea-font);
+  font-size: var(--litearea-font-size);
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+  font-variant-ligatures: none;
+  font-kerning: none;
+  font-feature-settings: "liga" 0, "calt" 0, "dlig" 0;
+  line-height: var(--litearea-line-height);
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-align: left;
+  direction: ltr;
+  tab-size: 2;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.litearea-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+/*
+ * When the box is clamped to its maximum height the field grows a scrollbar, and a
+ * scrollbar narrows the text. If the layer kept the full width it would wrap
+ * differently from the field and every colour would slide off its character, so the
+ * field's measured scrollbar width is published as --litearea-scrollbar and added
+ * here. The value is 0 whenever no scrollbar is shown.
+ */
+.litearea-layer {
+  padding-right: calc(var(--litearea-padding-inline) + var(--litearea-scrollbar, 0px));
+}
+
+.litearea-paint {
+  position: relative;
+  min-height: 100%;
+  /* A zero-width space keeps the layer's last line box as tall as the field's:
+     a trailing newline would otherwise collapse in the paint alone, and the box
+     would jump the moment one was typed. */
+  will-change: transform;
+}
+
+.litearea-input {
+  position: relative;
+  display: block;
+  resize: none;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--litearea-fg);
+  outline: none;
+  overflow-y: hidden;
+}
+
+.litearea-growable .litearea-input {
+  resize: none;
+}
+
+.litearea-resizable .litearea-input {
+  resize: vertical;
+}
+
+.litearea-input::placeholder {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-input::selection {
+  background: var(--litearea-selection);
+}
+
+.litearea-readonly .litearea-input {
+  caret-color: transparent;
+}
+
+/*
+ * The rules that spend the variables, generated from the same list that declares them. There is
+ * deliberately NO catch-all rule setting a property on every painted span: there was one, and a
+ * class plus an element outranks a bare class on specificity, so it silently switched off every
+ * squiggle in the library.
+ *
+ * A scope that is not in the list gets no colour from here, and a host writing a grammar of its
+ * own styles it with a plain rule \u2014 .litearea-scope-my-thing { color: \u2026 } \u2014 since nothing in
+ * this file competes for that selector.
+ */
+${scopeRules()}
+
+.litearea-dec-effective {
+  border-radius: 3px;
+  background: var(--litearea-accent-soft);
+  box-shadow: 0 0 0 1px var(--litearea-accent-soft);
+}
+
+/* The four shapes a diagnostic can take. Wavy for the two that mean "fix this", dotted for
+   the two that mean "worth knowing" \u2014 the same distinction VSCode draws, and the reason
+   severity is a class rather than an inline colour. */
+.litearea-diag-error {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--litearea-error);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-warning {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: var(--litearea-warning);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-info {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--litearea-info);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+.litearea-diag-hint {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--litearea-hint);
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+}
+
+/* \u2500\u2500 the completion list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+/*
+ * The container holds two things and scrolls NEITHER of them: the list scrolls itself, and the
+ * documentation is pinned below it. Putting the documentation inside the scroll range \u2014 which is
+ * what this used to do \u2014 makes it unreachable with a long list and a long explanation: the
+ * arrows move the active row rather than the scrollbar, so a keyboard user never sees it, and a
+ * mouse user has to scroll down to read it and back up to reach the next row.
+ */
+.litearea-popup {
+  position: absolute;
+  z-index: 30;
+  display: none;
+  flex-direction: column;
+  max-width: 460px;
+  padding: 4px;
+  border: 1px solid var(--litearea-border);
+  border-radius: 10px;
+  background: var(--litearea-bg-raised);
+  box-shadow: var(--litearea-shadow);
+  font-family: var(--litearea-font);
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--litearea-fg);
+  overflow: hidden;
+}
+
+.litearea-popup[data-open="true"] {
+  display: flex;
+}
+
+/* The rows, and the only part that scrolls. Its height is bounded so the documentation below
+   always has somewhere to live. */
+.litearea-list {
+  min-height: 0;
+  max-height: 208px;
+  overflow-y: auto;
+}
+
+/*
+ * The explanation, pinned. Its own height is bounded and it scrolls ITSELF, so a long
+ * explanation stays readable while the rows stay put \u2014 and arrowing to the next row swaps the
+ * text in place instead of requiring a scroll back up.
+ */
+.litearea-docs {
+  flex: none;
+  max-height: 132px;
+  overflow-y: auto;
+  margin: 4px -4px -4px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--litearea-border);
+  background: var(--litearea-bg);
+  border-radius: 0 0 10px 10px;
+  color: var(--litearea-fg);
+  white-space: pre-wrap;
+}
+
+.litearea-popup[data-docs="false"] .litearea-docs {
+  display: none;
+}
+
+.litearea-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 6px;
+  border-radius: 6px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.litearea-row[aria-selected="true"] {
+  background: var(--litearea-accent-soft);
+}
+
+.litearea-rowKind {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+  background: var(--litearea-fg-dim);
+  transform: translateY(-1px);
+}
+
+.litearea-kind-family { background: var(--litearea-scope-family-generic); }
+.litearea-kind-generic { background: var(--litearea-scope-family-generic); }
+.litearea-kind-weight { background: var(--litearea-scope-weight); }
+.litearea-kind-state { background: var(--litearea-scope-state); }
+.litearea-kind-property { background: var(--litearea-scope-property); }
+.litearea-kind-value { background: var(--litearea-scope-value-shape); }
+.litearea-kind-number { background: var(--litearea-scope-value-number); }
+.litearea-kind-custom { background: var(--litearea-fg-dim); }
+
+.litearea-rowLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.litearea-rowMatch {
+  color: var(--litearea-accent);
+  font-weight: 600;
+}
+
+.litearea-rowDetail {
+  flex: none;
+  color: var(--litearea-fg-dim);
+  font-size: 11px;
+}
+
+.litearea-docsTitle {
+  font-weight: 600;
+}
+
+.litearea-docsDetail {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-docsBody {
+  margin-top: 2px;
+  color: var(--litearea-fg-dim);
+}
+
+/* \u2500\u2500 the hover tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.litearea-tooltip {
+  position: absolute;
+  z-index: 40;
+  display: none;
+  max-width: 340px;
+  padding: 6px 10px;
+  border: 1px solid var(--litearea-border);
+  border-radius: 8px;
+  background: var(--litearea-bg-raised);
+  box-shadow: var(--litearea-shadow);
+  font-family: var(--litearea-font);
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--litearea-fg);
+  pointer-events: none;
+  white-space: pre-wrap;
+}
+
+.litearea-tooltip[data-open="true"] {
+  display: block;
+}
+
+.litearea-tooltipTitle {
+  font-weight: 600;
+}
+
+.litearea-tooltipDetail {
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-tooltipBody {
+  margin-top: 3px;
+  color: var(--litearea-fg-dim);
+}
+
+.litearea-srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+`.trim();
+function injectStyles(ownerDocument, nonce) {
+  if (ownerDocument === null || ownerDocument === void 0) return void 0;
+  const existing = ownerDocument.querySelector("style[data-litearea-styles]");
+  if (existing !== null) return existing;
+  const style = ownerDocument.createElement("style");
+  style.dataset.liteareaStyles = "";
+  if (nonce !== void 0) style.nonce = nonce;
+  style.textContent = LITEAREA_STYLES;
+  const head = ownerDocument.head ?? ownerDocument.documentElement;
+  if (head === null || head === void 0) return void 0;
+  head.appendChild(style);
+  return style;
+}
+function scopeClass(scope) {
+  const folded = scope.replace(/[^A-Za-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
+  return folded === "" ? "litearea-scope-text" : `litearea-scope-${folded}`;
+}
+function decorationClass(kind) {
+  return `litearea-dec-${kind.replace(/[^A-Za-z0-9_-]+/g, "-")}`;
+}
+function severityClass(severity) {
+  return `litearea-diag-${severity.replace(/[^A-Za-z0-9_-]+/g, "-")}`;
+}
+
+// src/dom/support.ts
+function hasDocument() {
+  return typeof document !== "undefined" && document !== null;
+}
+function canEditThroughPipeline() {
+  return hasDocument() && typeof document.execCommand === "function";
+}
+function withDefaults(defaults, given) {
+  if (given === void 0) return { ...defaults };
+  const merged = { ...defaults };
+  for (const key of Object.keys(given)) {
+    const value = given[key];
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+}
+
+// src/dom/editing.ts
+function readSelection(field) {
+  const start = field.selectionStart ?? 0;
+  const end = field.selectionEnd ?? start;
+  return { start, end };
+}
+function writeSelection(field, start, end = start) {
+  const length = field.value.length;
+  const from = clamp(Math.min(start, end), 0, length);
+  const to = clamp(Math.max(start, end), from, length);
+  field.setSelectionRange(from, to);
+}
+function replaceThroughPipeline(field, from, to, text) {
+  const start = clamp(Math.min(from, to), 0, field.value.length);
+  const end = clamp(Math.max(from, to), start, field.value.length);
+  if (start === end && text === "") return "unchanged";
+  if (field.ownerDocument.activeElement !== field) field.focus({ preventScroll: true });
+  writeSelection(field, start, end);
+  const before = field.value;
+  if (canEditThroughPipeline()) {
+    try {
+      field.ownerDocument.execCommand("insertText", false, text);
+    } catch {
+    }
+    if (field.value !== before) return "pipeline";
+  }
+  field.setRangeText(text, start, end, "end");
+  if (field.value === before) return "unchanged";
+  dispatchInput(field, text);
+  return "direct";
+}
+function dispatchInput(field, text) {
+  const view = field.ownerDocument.defaultView;
+  const InputEventCtor = view === null ? void 0 : view.InputEvent;
+  if (typeof InputEventCtor === "function") {
+    field.dispatchEvent(
+      new InputEventCtor("input", { bubbles: true, inputType: "insertText", data: text })
+    );
+    return;
+  }
+  field.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function undoField(field) {
+  if (!canEditThroughPipeline()) return false;
+  if (field.ownerDocument.activeElement !== field) field.focus({ preventScroll: true });
+  try {
+    return field.ownerDocument.execCommand("undo");
+  } catch {
+    return false;
+  }
+}
+function redoField(field) {
+  if (!canEditThroughPipeline()) return false;
+  if (field.ownerDocument.activeElement !== field) field.focus({ preventScroll: true });
+  try {
+    return field.ownerDocument.execCommand("redo");
+  } catch {
+    return false;
+  }
+}
+function writeDocument(field, next, preserveHistory = false) {
+  if (field.value === next) return "unchanged";
+  if (preserveHistory) return replaceThroughPipeline(field, 0, field.value.length, next);
+  field.value = next;
+  writeSelection(field, next.length, next.length);
+  return "direct";
+}
+
+// src/dom/mirror.ts
+var COPIED_PROPERTIES = [
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "fontStyle",
+  "fontStretch",
+  "fontVariantLigatures",
+  "fontKerning",
+  "fontFeatureSettings",
+  "lineHeight",
+  "letterSpacing",
+  "wordSpacing",
+  "textTransform",
+  "textIndent",
+  "textAlign",
+  "direction",
+  "tabSize",
+  "whiteSpace",
+  "overflowWrap",
+  "wordBreak",
+  "hyphens",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "boxSizing"
+];
+var SENTINEL = "\u200B";
+var TextMirror = class {
+  /** The measuring element. Kept out of the document's flow by `position: fixed`. */
+  element;
+  document;
+  view;
+  /** The field this mirror is currently shaped like. */
+  adopted;
+  /** The line height measured with the field, or 0 before the first measurement. */
+  measuredLineHeight = 0;
+  /**
+   * @param ownerDocument - the document to create the element in.
+   */
+  constructor(ownerDocument) {
+    this.document = ownerDocument;
+    this.view = ownerDocument.defaultView ?? void 0;
+    this.element = ownerDocument.createElement("div");
+    this.element.setAttribute("aria-hidden", "true");
+    this.element.dataset.liteareaPart = "mirror";
+    this.element.style.cssText = [
+      "position:fixed",
+      "top:0",
+      "left:0",
+      "visibility:hidden",
+      "pointer-events:none",
+      "z-index:-1",
+      "margin:0",
+      "overflow:hidden",
+      "white-space:pre-wrap",
+      "overflow-wrap:break-word",
+      "word-break:break-word",
+      "box-sizing:border-box"
+    ].join(";");
+  }
+  /** Whether the mirror is in a document. */
+  get mounted() {
+    return this.element.isConnected;
+  }
+  /**
+   * Mount the mirror, once, so measurements have a layout to read.
+   * @param parent - where to mount it. The body is right unless the document has none.
+   */
+  mount(parent) {
+    if (this.mounted) return;
+    const host = parent ?? this.document.body ?? this.document.documentElement;
+    if (host === null || host === void 0) return;
+    host.appendChild(this.element);
+  }
+  /**
+   * Shape the mirror like a field.
+   *
+   * The width is the interesting part. It has to be the field's CONTENT width, or
+   * text wraps in one and not the other — and the field's `clientWidth` is its
+   * content plus padding but NOT its border, while the mirror is `border-box`. So
+   * the borders are added back, and what is deliberately left out is the
+   * scrollbar: a field clamped to its maximum height has one, and the text wraps
+   * inside the narrower area above it.
+   * @param field - the textarea to imitate.
+   */
+  adopt(field) {
+    this.mount();
+    this.adopted = field;
+    const view = this.view;
+    if (view === null || view === void 0) return;
+    const styles = view.getComputedStyle(field);
+    for (const property of COPIED_PROPERTIES) {
+      this.element.style.setProperty(
+        property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`),
+        styles.getPropertyValue(property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`))
+      );
+    }
+    const borderLeft = Number.parseFloat(styles.borderLeftWidth) || 0;
+    const borderRight = Number.parseFloat(styles.borderRightWidth) || 0;
+    this.element.style.width = `${String(field.clientWidth + borderLeft + borderRight)}px`;
+    this.measuredLineHeight = 0;
+  }
+  /**
+   * The line height in force, measured rather than assumed.
+   *
+   * `line-height: normal` is a real value and a common one, and it cannot be read
+   * as a number — `parseFloat('normal')` is `NaN`. So it is measured by laying one
+   * line of text out and taking the height, which is also the only way to be right
+   * about a font whose normal leading is not 1.2.
+   * @param field - the field to measure against.
+   * @returns the line height in pixels.
+   */
+  lineHeight(field) {
+    if (this.measuredLineHeight > 0) return this.measuredLineHeight;
+    const view = this.view;
+    if (view === null || view === void 0) return 0;
+    const styles = view.getComputedStyle(field);
+    const declared = Number.parseFloat(styles.lineHeight);
+    if (Number.isFinite(declared) && declared > 0) {
+      this.measuredLineHeight = declared;
+      return declared;
+    }
+    this.adopt(field);
+    this.setText("M");
+    const padding = this.verticalPadding();
+    const height = this.element.getBoundingClientRect().height - padding;
+    const fontSize = Number.parseFloat(styles.fontSize);
+    const fallback = (Number.isFinite(fontSize) ? fontSize : 16) * 1.2;
+    this.measuredLineHeight = height > 0 ? height : fallback;
+    return this.measuredLineHeight;
+  }
+  /** The mirror's vertical padding plus border, which every height includes. */
+  verticalPadding() {
+    const view = this.view;
+    if (view === null || view === void 0) return 0;
+    const styles = view.getComputedStyle(this.element);
+    const sum = (Number.parseFloat(styles.paddingTop) || 0) + (Number.parseFloat(styles.paddingBottom) || 0) + (Number.parseFloat(styles.borderTopWidth) || 0) + (Number.parseFloat(styles.borderBottomWidth) || 0);
+    return sum;
+  }
+  /**
+   * Put text in the mirror with nothing else in it.
+   * @param text - the content.
+   */
+  setText(text) {
+    this.element.textContent = text;
+  }
+  /**
+   * The height a field needs to show a document without scrolling.
+   *
+   * The trailing-newline problem is handled here. A div with `white-space:
+   * pre-wrap` and content ending in `\n` does not lay out a final empty line — the
+   * newline breaks the line but nothing follows it — so the measured height comes
+   * back one line short and the field grows a scrollbar exactly when the user
+   * presses Enter at the end. A zero-width space after the newline gives that last
+   * line something to be.
+   * @param field - the field being sized.
+   * @param value - the text it holds.
+   * @returns the border-box height the content requires.
+   */
+  contentHeight(field, value) {
+    this.adopt(field);
+    const needsSentinel = value === "" || value.endsWith("\n") || value.endsWith("\r");
+    this.setText(needsSentinel ? `${value}${SENTINEL}` : value);
+    return this.element.getBoundingClientRect().height;
+  }
+  /**
+   * Where the caret sits, in pixels relative to the field's border box.
+   *
+   * The trick is a marker element holding the character AFTER the caret, measured
+   * against the mirror. Everything before the caret lays out normally, so the
+   * marker lands exactly where the next glyph will be — which is where the caret
+   * is. At the end of the document there is no next character, so a zero-width
+   * space stands in for it.
+   *
+   * The field's own scroll offset is subtracted, because the caret's position on
+   * screen is what the popup has to be placed against, and a scrolled field moves
+   * its text without moving its border box.
+   *
+   * @param field - the field the caret is in.
+   * @param offset - the caret's character offset.
+   * @returns the caret box, or undefined when there is no layout to measure.
+   */
+  caretBox(field, offset) {
+    const view = this.view;
+    if (view === null || view === void 0) return void 0;
+    this.adopt(field);
+    const value = field.value;
+    const position = clamp(offset, 0, value.length);
+    const before = value.slice(0, position);
+    const after = value.slice(position);
+    const next = after === "" ? SENTINEL : after.charAt(0);
+    this.element.textContent = "";
+    this.element.appendChild(this.document.createTextNode(before));
+    const marker = this.document.createElement("span");
+    marker.textContent = next;
+    marker.style.whiteSpace = "pre";
+    this.element.appendChild(marker);
+    this.element.appendChild(this.document.createTextNode(after.slice(next.length)));
+    const mirrorRect = this.element.getBoundingClientRect();
+    const markerRect = marker.getBoundingClientRect();
+    const lineHeight = this.lineHeight(field);
+    return {
+      x: markerRect.left - mirrorRect.left - field.scrollLeft,
+      y: markerRect.top - mirrorRect.top - field.scrollTop,
+      height: markerRect.height > 0 ? markerRect.height : lineHeight,
+      lineHeight
+    };
+  }
+  /** Take the mirror out of the document. */
+  destroy() {
+    this.element.remove();
+    this.adopted = void 0;
+  }
+  /**
+   * The field this mirror was last shaped like.
+   * @returns the field, or undefined before {@link adopt}.
+   */
+  get field() {
+    return this.adopted;
+  }
+};
+
+// src/core/segments.ts
+var SEVERITY_RANK = { error: 4, warning: 3, info: 2, hint: 1 };
+function buildSegments(text, input, fallbackScope = "text") {
+  const length = text.length;
+  if (length === 0) return [];
+  const cuts = /* @__PURE__ */ new Set([0, length]);
+  for (const token of input.tokens) {
+    cuts.add(Math.max(0, Math.min(token.from, length)));
+    cuts.add(Math.max(0, Math.min(token.to, length)));
+  }
+  for (const decoration of input.decorations) {
+    cuts.add(Math.max(0, Math.min(decoration.from, length)));
+    cuts.add(Math.max(0, Math.min(decoration.to, length)));
+  }
+  for (const diagnostic of input.diagnostics) {
+    cuts.add(Math.max(0, Math.min(diagnostic.from, length)));
+    cuts.add(Math.max(0, Math.min(diagnostic.to, length)));
+  }
+  const bounds = [...cuts].sort((left, right) => left - right);
+  const segments = [];
+  for (let index = 0; index < bounds.length - 1; index += 1) {
+    const from = bounds[index] ?? 0;
+    const to = bounds[index + 1] ?? 0;
+    if (to <= from) continue;
+    const scope = coverScope(input.tokens, from, fallbackScope);
+    const decorations = coverDecorations(input.decorations, from, to);
+    const severity = coverSeverity(input.diagnostics, from, to);
+    const title = input.decorations.find(
+      (decoration) => decoration.title !== void 0 && from >= decoration.from && to <= decoration.to
+    )?.title;
+    const last = segments[segments.length - 1];
+    if (last !== void 0 && last.scope === scope && last.severity === severity && last.title === title && sameList(last.decorations, decorations)) {
+      last.to = to;
+      last.text = text.slice(last.from, to);
+      continue;
+    }
+    segments.push({ from, to, text: text.slice(from, to), scope, decorations, severity, title });
+  }
+  return segments;
+}
+function coverScope(tokens, offset, fallback) {
+  for (const token of tokens) {
+    if (token.from > offset) break;
+    if (offset >= token.from && offset < token.to) return token.scope;
+  }
+  return fallback;
+}
+function coverDecorations(decorations, from, to) {
+  const kinds = [];
+  for (const decoration of decorations) {
+    if (decoration.from <= from && to <= decoration.to) kinds.push(decoration.kind);
+  }
+  return kinds;
+}
+function coverSeverity(diagnostics, from, to) {
+  let loudest;
+  for (const diagnostic of diagnostics) {
+    if (diagnostic.from > from || diagnostic.to < to) continue;
+    if (loudest === void 0 || SEVERITY_RANK[diagnostic.severity] > SEVERITY_RANK[loudest]) {
+      loudest = diagnostic.severity;
+    }
+  }
+  return loudest;
+}
+function sameList(left, right) {
+  if (left.length !== right.length) return false;
+  for (let index = 0; index < left.length; index += 1) {
+    if (left[index] !== right[index]) return false;
+  }
+  return true;
+}
+function segmentClasses(segment, scopeClass2, decorationClass2, severityClass2) {
+  const classes = [scopeClass2(segment.scope)];
+  for (const kind of segment.decorations) classes.push(decorationClass2(kind));
+  if (segment.severity !== void 0) classes.push(severityClass2(segment.severity));
+  return classes;
+}
+
+// src/dom/overlay.ts
+var Overlay = class {
+  /** The scroll container. Same box as the field. */
+  element;
+  /** The element the spans are written into. */
+  paint;
+  document;
+  classNames;
+  /** What was painted last, so an unchanged document is not repainted. */
+  paintedText;
+  paintedKey = "";
+  /**
+   * @param ownerDocument - the document to build in.
+   * @param classNames - the three class-name mappings.
+   */
+  constructor(ownerDocument, classNames) {
+    this.document = ownerDocument;
+    this.classNames = classNames;
+    this.element = ownerDocument.createElement("div");
+    this.element.className = "litearea-layer";
+    this.element.setAttribute("aria-hidden", "true");
+    this.element.dataset.liteareaPart = "layer";
+    this.paint = ownerDocument.createElement("div");
+    this.paint.className = "litearea-paint";
+    this.element.appendChild(this.paint);
+  }
+  /**
+   * Paint a document.
+   *
+   * `key` is whatever the caller knows changed. When it and the text both match
+   * the last call the work is skipped, which is what keeps a caret move or a
+   * mouse hover from rebuilding every span on the page.
+   * @param text - the document.
+   * @param input - the tokens, decorations, and diagnostics.
+   * @param key - a cheap signature of everything that affects the paint.
+   * @param fallbackScope - the scope for characters no token covers.
+   */
+  render(text, input, key, fallbackScope = "text") {
+    if (this.paintedText === text && this.paintedKey === key) return;
+    const segments = buildSegments(text, input, fallbackScope);
+    const fragment = this.document.createDocumentFragment();
+    for (const segment of segments) {
+      const span = this.document.createElement("span");
+      span.className = segmentClasses(
+        segment,
+        this.classNames.scope,
+        this.classNames.decoration,
+        this.classNames.severity
+      ).join(" ");
+      if (segment.title !== void 0) span.title = segment.title;
+      span.textContent = segment.text;
+      fragment.appendChild(span);
+    }
+    this.paint.replaceChildren(fragment);
+    this.paintedText = text;
+    this.paintedKey = key;
+  }
+  /**
+   * Follow the field's scroll position.
+   *
+   * The layer is `overflow: hidden` and its content is taller than its box exactly
+   * when the field is: an auto-grown field has nothing to scroll and a field
+   * clamped to its maximum height has everything to scroll. Copying the offset is
+   * therefore enough, and it is more reliable than a transform, which can leave
+   * the text on a half pixel.
+   * @param field - the textarea.
+   */
+  syncScroll(field) {
+    if (this.element.scrollTop !== field.scrollTop) this.element.scrollTop = field.scrollTop;
+    if (this.element.scrollLeft !== field.scrollLeft) this.element.scrollLeft = field.scrollLeft;
+  }
+  /** Forget what was painted, so the next render rebuilds. */
+  invalidate() {
+    this.paintedText = void 0;
+    this.paintedKey = "";
+  }
+  /** Take the layer out of the document. */
+  destroy() {
+    this.element.remove();
+    this.paint.replaceChildren();
+  }
+};
+
+// src/dom/popup.ts
+var Popup = class {
+  /** The positioned container. */
+  element;
+  /** The scrolling element, which holds the rows and nothing else. */
+  list;
+  document;
+  handlers;
+  rows = [];
+  active = -1;
+  open = false;
+  showDocs = true;
+  docs;
+  prefix;
+  /**
+   * @param ownerDocument - the document to build in.
+   * @param handlers - how to report a pick and a hover.
+   * @param idPrefix - a stable prefix for row ids, so two editors do not collide.
+   */
+  constructor(ownerDocument, handlers, idPrefix) {
+    this.document = ownerDocument;
+    this.handlers = handlers;
+    this.prefix = idPrefix;
+    this.element = ownerDocument.createElement("div");
+    this.element.className = "litearea-popup";
+    this.element.dataset.liteareaPart = "popup";
+    this.element.dataset.open = "false";
+    this.list = ownerDocument.createElement("div");
+    this.list.className = "litearea-list";
+    this.list.setAttribute("role", "listbox");
+    this.list.id = `${idPrefix}-listbox`;
+    this.element.appendChild(this.list);
+    this.docs = ownerDocument.createElement("div");
+    this.docs.className = "litearea-docs";
+    this.docs.hidden = true;
+    this.element.appendChild(this.docs);
+    this.list.addEventListener("mousedown", this.onMouseDown);
+    this.list.addEventListener("mousemove", this.onMouseMove);
+  }
+  /** Whether the list is showing. */
+  get isOpen() {
+    return this.open;
+  }
+  /** The active row's index, or -1. */
+  get activeIndex() {
+    return this.active;
+  }
+  /** The rows currently shown. */
+  get items() {
+    return this.rows;
+  }
+  /** The active row, when there is one. */
+  get activeRow() {
+    return this.rows[this.active];
+  }
+  /** The id the field's `aria-controls` should name. It is the list, not the container. */
+  get listId() {
+    return this.list.id;
+  }
+  /**
+   * The id of the active row, for the field's `aria-activedescendant`.
+   *
+   * The list does not write that attribute itself: the field belongs to the editor, and a
+   * floating list reaching out of its own subtree to find it is the kind of coupling that
+   * breaks the moment the two are mounted somewhere unexpected.
+   * @returns the row id, or undefined when no row is active.
+   */
+  get activeRowId() {
+    return this.active >= 0 ? this.rowId(this.active) : void 0;
+  }
+  /**
+   * Show a list.
+   * @param rows - the rows, already ranked.
+   * @param active - the row to make active.
+   * @param showDocs - whether to render the documentation panel.
+   */
+  show(rows, active, showDocs) {
+    this.rows = rows;
+    this.active = active;
+    this.showDocs = showDocs;
+    this.open = true;
+    this.element.dataset.open = "true";
+    this.element.dataset.docs = showDocs ? "true" : "false";
+    this.list.scrollTop = 0;
+    this.render();
+  }
+  /** Hide the list and forget its rows. */
+  close() {
+    if (!this.open) return;
+    this.open = false;
+    this.active = -1;
+    this.rows = [];
+    this.element.dataset.open = "false";
+    this.list.replaceChildren();
+    this.docs.hidden = true;
+    this.docs.replaceChildren();
+  }
+  /**
+   * Make a row active without rebuilding the list.
+   * @param index - the row index.
+   */
+  setActive(index) {
+    if (index === this.active) return;
+    const previous = this.list.querySelector(`#${this.rowId(this.active)}`);
+    if (previous !== null) previous.setAttribute("aria-selected", "false");
+    this.active = index;
+    const next = this.list.querySelector(`#${this.rowId(index)}`);
+    if (next !== null) {
+      next.setAttribute("aria-selected", "true");
+      const top = next.offsetTop;
+      const bottom = top + next.offsetHeight;
+      if (top < this.list.scrollTop) this.list.scrollTop = top;
+      else if (bottom > this.list.scrollTop + this.list.clientHeight) {
+        this.list.scrollTop = bottom - this.list.clientHeight;
+      }
+    }
+    this.renderDocs();
+  }
+  /**
+   * Place the list under an anchor, flipping above it when there is no room below.
+   *
+   * The container's own box is what is measured, so the documentation panel counts towards the
+   * height and a popup whose rows and explanation together would run off the bottom flips as a
+   * whole rather than being cut in half.
+   * @param anchor - the caret's box, in the container's coordinates.
+   * @param container - the element the list is positioned against.
+   * @param viewport - the visible area to stay inside.
+   */
+  place(anchor, container, viewport) {
+    const box = this.element.getBoundingClientRect();
+    const containerBox = container.getBoundingClientRect();
+    const gap = 4;
+    let top = anchor.y + anchor.height + gap;
+    if (containerBox.top + top + box.height > viewport.height - gap) {
+      const above = anchor.y - box.height - gap;
+      if (containerBox.top + above >= gap) top = above;
+    }
+    let left = anchor.x;
+    const maxLeft = containerBox.width - box.width;
+    if (left > maxLeft) left = Math.max(0, maxLeft);
+    this.element.style.top = `${String(Math.round(top))}px`;
+    this.element.style.left = `${String(Math.round(left))}px`;
+  }
+  /** Take the list out of the document. */
+  destroy() {
+    this.list.removeEventListener("mousedown", this.onMouseDown);
+    this.list.removeEventListener("mousemove", this.onMouseMove);
+    this.element.remove();
+    this.list.replaceChildren();
+    this.docs.replaceChildren();
+  }
+  /** The DOM id of a row, which `aria-activedescendant` points at. */
+  rowId(index) {
+    return `${this.prefix}-row-${String(index)}`;
+  }
+  // ── internals ────────────────────────────────────────────────────────────
+  render() {
+    const fragment = this.document.createDocumentFragment();
+    this.rows.forEach((row, index) => {
+      const element = this.document.createElement("div");
+      element.className = "litearea-row";
+      element.id = this.rowId(index);
+      element.setAttribute("role", "option");
+      element.setAttribute("aria-selected", index === this.active ? "true" : "false");
+      element.dataset.index = String(index);
+      const kind = this.document.createElement("span");
+      kind.className = `litearea-rowKind litearea-kind-${row.item.kind ?? "value"}`;
+      element.appendChild(kind);
+      const label = this.document.createElement("span");
+      label.className = "litearea-rowLabel";
+      for (const piece of highlightSegments(row.item.label, row.indices)) {
+        if (piece.matched) {
+          const mark = this.document.createElement("span");
+          mark.className = "litearea-rowMatch";
+          mark.textContent = piece.text;
+          label.appendChild(mark);
+        } else {
+          label.appendChild(this.document.createTextNode(piece.text));
+        }
+      }
+      element.appendChild(label);
+      if (row.item.detail !== void 0) {
+        const detail = this.document.createElement("span");
+        detail.className = "litearea-rowDetail";
+        detail.textContent = row.item.detail;
+        element.appendChild(detail);
+      }
+      fragment.appendChild(element);
+    });
+    this.list.replaceChildren(fragment);
+    this.renderDocs();
+  }
+  /** Refresh the documentation panel from the active row. */
+  renderDocs() {
+    const item = this.rows[this.active]?.item;
+    const hasDocs = this.showDocs && this.open && item !== void 0 && (item.documentation !== void 0 || item.detail !== void 0);
+    this.docs.hidden = !hasDocs;
+    if (!hasDocs || item === void 0) {
+      this.docs.replaceChildren();
+      return;
+    }
+    const fragment = this.document.createDocumentFragment();
+    const title = this.document.createElement("div");
+    title.className = "litearea-docsTitle";
+    title.textContent = item.label;
+    fragment.appendChild(title);
+    if (item.detail !== void 0) {
+      const detail = this.document.createElement("div");
+      detail.className = "litearea-docsDetail";
+      detail.textContent = item.detail;
+      fragment.appendChild(detail);
+    }
+    if (item.documentation !== void 0) {
+      const body = this.document.createElement("div");
+      body.className = "litearea-docsBody";
+      body.textContent = item.documentation;
+      fragment.appendChild(body);
+    }
+    this.docs.replaceChildren(fragment);
+    this.docs.scrollTop = 0;
+  }
+  onMouseDown = (event) => {
+    const row = event.target?.closest(".litearea-row");
+    if (row === null || row === void 0) return;
+    event.preventDefault();
+    const index = Number.parseInt(row.dataset.index ?? "-1", 10);
+    if (Number.isInteger(index) && index >= 0) this.handlers.accept(index);
+  };
+  onMouseMove = (event) => {
+    const row = event.target?.closest(".litearea-row");
+    if (row === null || row === void 0) return;
+    const index = Number.parseInt(row.dataset.index ?? "-1", 10);
+    if (!Number.isInteger(index) || index < 0 || index === this.active) return;
+    this.handlers.hover(index);
+  };
+};
+
+// src/dom/tooltip.ts
+var Tooltip = class {
+  /** The tooltip element. */
+  element;
+  document;
+  open = false;
+  /**
+   * @param ownerDocument - the document to build in.
+   */
+  constructor(ownerDocument) {
+    this.document = ownerDocument;
+    this.element = ownerDocument.createElement("div");
+    this.element.className = "litearea-tooltip";
+    this.element.setAttribute("role", "tooltip");
+    this.element.dataset.liteareaPart = "tooltip";
+    this.element.dataset.open = "false";
+  }
+  /** Whether the tooltip is showing. */
+  get isOpen() {
+    return this.open;
+  }
+  /**
+   * Show a hover.
+   * @param info - what to say.
+   * @param anchor - where the thing being described is.
+   * @param container - the element the tooltip is positioned against.
+   * @param viewport - the visible area to stay inside.
+   */
+  show(info, anchor, container, viewport) {
+    const fragment = this.document.createDocumentFragment();
+    if (info.title !== void 0) {
+      const title = this.document.createElement("div");
+      title.className = "litearea-tooltipTitle";
+      title.textContent = info.title;
+      fragment.appendChild(title);
+    }
+    if (info.detail !== void 0 && info.detail !== "") {
+      const detail = this.document.createElement("div");
+      detail.className = "litearea-tooltipDetail";
+      detail.textContent = info.detail;
+      fragment.appendChild(detail);
+    }
+    if (info.body !== void 0 && info.body !== "") {
+      const body = this.document.createElement("div");
+      body.className = "litearea-tooltipBody";
+      body.textContent = info.body;
+      fragment.appendChild(body);
+    }
+    this.element.replaceChildren(fragment);
+    this.open = true;
+    this.element.dataset.open = "true";
+    const box = this.element.getBoundingClientRect();
+    const containerBox = container.getBoundingClientRect();
+    const gap = 6;
+    let top = anchor.y + anchor.height + gap;
+    if (containerBox.top + top + box.height > viewport.height - gap) {
+      const above = anchor.y - box.height - gap;
+      top = containerBox.top + above >= gap ? above : Math.max(0, viewport.height - gap - box.height - containerBox.top);
+    }
+    let left = anchor.x;
+    const overflowRight = containerBox.left + left + box.width - (viewport.width - gap);
+    if (overflowRight > 0) left = Math.max(0, left - overflowRight);
+    this.element.style.top = `${String(Math.round(top))}px`;
+    this.element.style.left = `${String(Math.round(left))}px`;
+  }
+  /** Hide the tooltip. */
+  hide() {
+    if (!this.open) return;
+    this.open = false;
+    this.element.dataset.open = "false";
+    this.element.replaceChildren();
+  }
+  /** Take the tooltip out of the document. */
+  destroy() {
+    this.element.remove();
+    this.element.replaceChildren();
+  }
+};
+
+// src/dom/editor.ts
+var PAGE_STEP = 8;
+var LiteArea = class {
+  /** The positioning container. Put this in the page. */
+  element;
+  /** The real field. Exposed for a host that needs the element itself. */
+  input;
+  document;
+  view;
+  /**
+   * The grammar as the host declared it, kept so {@link refresh} can re-resolve it.
+   *
+   * Mutable on purpose, and it is what lets a host pass a live object — a proxy
+   * reading the newest props, say — without the editor having to be rebuilt when the
+   * language changes. A rebuild would throw away the undo history, which is the one
+   * thing this library must not do, so re-resolving is the only acceptable answer.
+   */
+  declaredGrammar;
+  /** The grammar the engine is currently running, with its defaults filled in. */
+  grammar;
+  box;
+  overlay;
+  popup;
+  tooltip;
+  mirror;
+  sizing;
+  completion;
+  hover;
+  paintDecorations;
+  handlers;
+  injectedStyle;
+  instanceId;
+  fontsReady;
+  /** The current inspection, and the text it was computed from. */
+  current;
+  currentText;
+  /** Bumped whenever the inspection changes, so the painter can skip work. */
+  revision = 0;
+  /** The list on screen, with the range frozen when it opened. */
+  completionState;
+  /** True during an IME composition, when no completion may run. */
+  composing = false;
+  /** True while the editor itself is writing, so its own edit does not re-open the list. */
+  applying = false;
+  /** The height and overflow last written, so unchanged values are not rewritten. */
+  appliedHeight = -1;
+  appliedOverflow = "";
+  appliedScrollbar = -1;
+  /** The offset the tooltip last described, so a resting pointer does not re-query. */
+  hoverOffset;
+  /** The custom properties this instance set, so one that disappears can be removed. */
+  appliedVariables = /* @__PURE__ */ new Set();
+  hoverTimer;
+  /** Watches for a width change, which invalidates wrapping and the box height. */
+  resizeObserver;
+  observedWidth = -1;
+  /**
+   * A signature of the last announced problem list, so the host is told once.
+   *
+   * Starts as `undefined` rather than as the empty string, because "no problems" is a
+   * real signature and a host waiting to be told that the list is clear would otherwise
+   * never hear it — it would keep whatever it was showing before the editor existed.
+   */
+  announced;
+  destroyed = false;
+  /**
+   * @param options - the grammar, the initial text, and the behaviour to use.
+   */
+  constructor(options) {
+    const probe = typeof document === "undefined" ? void 0 : document;
+    if (probe === void 0) {
+      throw new Error("litearea: an editor needs a document, and there is none in this environment");
+    }
+    this.document = probe;
+    this.view = probe.defaultView ?? void 0;
+    this.handlers = options;
+    const declared = options.grammar;
+    this.declaredGrammar = isResolvedGrammar(declared) ? declared.grammar : declared;
+    this.grammar = resolveGrammar(this.declaredGrammar);
+    this.instanceId = `litearea-${Math.random().toString(36).slice(2, 9)}`;
+    this.sizing = withDefaults(
+      { autoGrow: true, minRows: 1 },
+      options.sizing
+    );
+    this.completion = options.completion === false ? void 0 : withDefaults(
+      { auto: true, triggerCharacters: " ", limit: 100, showDocumentation: true },
+      options.completion
+    );
+    this.hover = options.hover === false ? void 0 : withDefaults({ enabled: true, delay: 140 }, options.hover);
+    this.paintDecorations = options.decorations !== false;
+    if (options.injectStyles !== false) {
+      this.injectedStyle = injectStyles(this.document, options.styleNonce);
+    }
+    this.element = this.document.createElement("div");
+    this.element.className = options.className === void 0 ? "litearea" : `litearea ${options.className}`;
+    this.element.classList.add(this.sizing.autoGrow ? "litearea-growable" : "litearea-resizable");
+    if (options.readOnly === true) this.element.classList.add("litearea-readonly");
+    if (options.variables !== void 0) this.applyVariables(options.variables);
+    this.box = this.document.createElement("div");
+    this.box.className = "litearea-box";
+    this.element.appendChild(this.box);
+    this.overlay = new Overlay(this.document, {
+      scope: scopeClass,
+      decoration: decorationClass,
+      severity: severityClass
+    });
+    this.box.appendChild(this.overlay.element);
+    this.input = this.document.createElement("textarea");
+    this.input.className = "litearea-input";
+    this.input.dataset.liteareaPart = "input";
+    this.input.spellcheck = options.spellCheck === true;
+    this.input.autocomplete = "off";
+    this.input.setAttribute("autocorrect", "off");
+    this.input.setAttribute("autocapitalize", "off");
+    this.input.setAttribute("wrap", "soft");
+    this.input.readOnly = options.readOnly === true;
+    this.input.rows = this.sizing.minRows;
+    if (options.placeholder !== void 0) this.input.placeholder = options.placeholder;
+    if (options.ariaLabel !== void 0) this.input.setAttribute("aria-label", options.ariaLabel);
+    this.input.setAttribute("aria-autocomplete", this.completion === void 0 ? "none" : "list");
+    this.input.setAttribute("aria-expanded", "false");
+    this.input.setAttribute("role", "combobox");
+    this.input.value = options.value ?? "";
+    this.box.appendChild(this.input);
+    this.popup = new Popup(
+      this.document,
+      {
+        accept: (index) => {
+          this.acceptCompletion(index);
+        },
+        hover: (index) => {
+          this.setActive(index);
+        }
+      },
+      this.instanceId
+    );
+    this.element.appendChild(this.popup.element);
+    this.input.setAttribute("aria-controls", this.popup.listId);
+    this.tooltip = new Tooltip(this.document);
+    this.element.appendChild(this.tooltip.element);
+    this.mirror = new TextMirror(this.document);
+    this.mirror.mount(this.document.body ?? this.document.documentElement);
+    const Observer = this.view?.ResizeObserver;
+    if (typeof Observer === "function") {
+      this.resizeObserver = new Observer(() => {
+        const width = this.element.clientWidth;
+        if (width === this.observedWidth) return;
+        this.observedWidth = width;
+        this.mirror.adopt(this.input);
+        this.resize(this.input.value);
+        this.placePopup();
+      });
+      this.resizeObserver.observe(this.element);
+    }
+    const fonts = this.document.fonts;
+    this.fontsReady = fonts?.ready;
+    this.bind();
+    this.sync();
+    if (this.fontsReady !== void 0) {
+      void this.fontsReady.then(() => {
+        if (!this.destroyed) this.refresh();
+      });
+    }
+  }
+  // ── what a host reads ──────────────────────────────────────────────────────
+  /** The current text. */
+  get value() {
+    return this.input.value;
+  }
+  /** The caret or selection. */
+  get selection() {
+    return readSelection(this.input);
+  }
+  /** The last inspection, or undefined before the first one. */
+  get inspection() {
+    return this.current;
+  }
+  /** The problems the grammar found. */
+  get diagnostics() {
+    return this.current?.diagnostics ?? [];
+  }
+  /** The list on screen, when one is. */
+  get currentCompletion() {
+    return this.completionState;
+  }
+  /** Whether the editor has focus. */
+  get focused() {
+    return this.document.activeElement === this.input;
+  }
+  // ── what a host calls ─────────────────────────────────────────────────────
+  /**
+   * Replace the text.
+   *
+   * `preserveHistory` writes through the editing pipeline, so the replacement is
+   * one undoable edit and Ctrl+Z brings the old text back — what a Reset button
+   * wants. Without it the value property is assigned, which is faster and clears
+   * the history, which is what loading a different document wants.
+   *
+   * This is the only path that writes the text, and it is never used for an edit
+   * the user could have made.
+   * @param next - the new text.
+   * @param preserveHistory - whether Ctrl+Z should be able to undo it.
+   * @returns how the write landed.
+   */
+  setValue(next, preserveHistory = false) {
+    if (this.input.value === next) return "unchanged";
+    this.applying = true;
+    let outcome;
+    try {
+      outcome = writeDocument(this.input, next, preserveHistory);
+    } finally {
+      this.applying = false;
+    }
+    this.sync();
+    return outcome;
+  }
+  /**
+   * Put the caret somewhere.
+   * @param start - the anchor offset.
+   * @param end - the moving offset; defaults to `start`.
+   */
+  setSelection(start, end = start) {
+    writeSelection(this.input, start, end);
+    this.updateCompletionForCaret();
+  }
+  /** Move the caret into the field. */
+  focus() {
+    this.input.focus();
+  }
+  /** Undo, through the browser's history. */
+  undo() {
+    const done = undoField(this.input);
+    if (done) this.sync();
+    return done;
+  }
+  /** Redo, through the browser's history. */
+  redo() {
+    const done = redoField(this.input);
+    if (done) this.sync();
+    return done;
+  }
+  /**
+   * Set CSS custom properties on the wrapper, replacing whatever this method set last time.
+   *
+   * A property that has disappeared from the record is removed rather than left behind, so a
+   * host can un-theme by passing a smaller object. Properties set by other means — a stylesheet,
+   * or the wrapper's inline style directly — are not touched, and a removed one falls back to
+   * whatever CSS says.
+   *
+   * Safe to call at any time after construction. The constructor uses the private write-only
+   * half, because re-measuring needs the field, the mirror, and the overlay, none of which exist
+   * until it has finished.
+   * @param next - the properties, keyed as {@link LiteAreaOptions.variables} describes.
+   */
+  setVariables(next) {
+    this.applyVariables(next);
+    this.mirror.adopt(this.input);
+    this.appliedHeight = -1;
+    this.sync();
+  }
+  /** Write the properties, and forget the ones that are gone. No re-measure. */
+  applyVariables(next) {
+    const keep = /* @__PURE__ */ new Set();
+    for (const [key, value] of Object.entries(next)) {
+      const name = variableName(key);
+      keep.add(name);
+      this.element.style.setProperty(name, value);
+    }
+    for (const name of this.appliedVariables) {
+      if (!keep.has(name)) this.element.style.removeProperty(name);
+    }
+    this.appliedVariables = keep;
+  }
+  /**
+   * Re-read the document with the same text.
+   *
+   * For a host whose grammar depends on something outside it — an installed font
+   * list that has just been re-read, a palette that changed — and for the moment a
+   * web font finishes loading.
+   *
+   * The grammar is re-resolved here, which is what makes a live grammar object
+   * work: a host that rebuilds its rules on every render can call `refresh()` and
+   * the editor picks the new ones up without being rebuilt, so the undo history
+   * survives a language change.
+   */
+  refresh() {
+    this.grammar = resolveGrammar(this.declaredGrammar);
+    this.current = void 0;
+    this.currentText = void 0;
+    this.mirror.adopt(this.input);
+    this.overlay.invalidate();
+    this.appliedHeight = -1;
+    this.appliedOverflow = "";
+    this.appliedScrollbar = -1;
+    this.sync();
+  }
+  /** Open the completion list on demand, as Ctrl+Space does. */
+  showCompletions() {
+    if (this.completion === void 0) return;
+    this.openCompletion("explicit");
+  }
+  /** Close the completion list. */
+  hideCompletions() {
+    this.closeCompletion();
+  }
+  /** Remove the editor and every listener it owns. */
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.unbind();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = void 0;
+    if (this.hoverTimer !== void 0) this.view?.clearTimeout(this.hoverTimer);
+    this.popup.destroy();
+    this.tooltip.destroy();
+    this.overlay.destroy();
+    this.mirror.destroy();
+    void this.injectedStyle;
+    this.element.remove();
+  }
+  // ── the pipeline ──────────────────────────────────────────────────────────
+  /**
+   * Bring everything up to date with the field.
+   *
+   * The inspection is cached on the text, so moving the caret or scrolling costs
+   * nothing beyond the paint — and the paint itself is skipped when neither the
+   * text nor the analysis changed.
+   */
+  sync() {
+    const text = this.input.value;
+    if (this.current === void 0 || this.currentText !== text) {
+      this.current = inspect(text, this.grammar);
+      this.currentText = text;
+      this.revision += 1;
+    }
+    const inspection = this.current;
+    this.paint(inspection);
+    this.resize(text);
+    this.overlay.syncScroll(this.input);
+    this.announceDiagnostics(inspection);
+  }
+  /** Paint the layer, and mark the box when a problem is an error. */
+  paint(inspection) {
+    const painting = {
+      tokens: inspection.tokens,
+      decorations: this.paintDecorations ? inspection.decorations : [],
+      diagnostics: inspection.diagnostics
+    };
+    const key = [
+      String(this.revision),
+      this.paintDecorations ? "d" : "-",
+      String(painting.decorations.length),
+      String(painting.diagnostics.length)
+    ].join(":");
+    this.overlay.render(inspection.text, painting, key, this.grammar.fallbackScope);
+    const hasError = inspection.diagnostics.some((diagnostic) => diagnostic.severity === "error");
+    this.element.classList.toggle("litearea-invalid", hasError);
+    this.input.setAttribute("aria-invalid", hasError ? "true" : "false");
+  }
+  /** Tell the host, once, when the problem list actually changed. */
+  announceDiagnostics(inspection) {
+    if (this.handlers.onDiagnostics === void 0) return;
+    const key = inspection.diagnostics.map(
+      (diagnostic) => `${String(diagnostic.from)}:${diagnostic.code ?? ""}:${diagnostic.message}`
+    ).join("|");
+    if (key === this.announced) return;
+    this.announced = key;
+    this.handlers.onDiagnostics(inspection.diagnostics);
+  }
+  /**
+   * Size the box to its content.
+   *
+   * The mirror has no scrollbar, so its measurement is the height the content wants
+   * with the full width available — which is exactly the number that decides whether
+   * a scrollbar is needed at all. If it fits under the maximum, the height becomes
+   * the content height and the overflow stays hidden, which is the promise of "grow
+   * and shrink so no scrollbar is ever shown". If it does not fit, the height is
+   * clamped and the overflow becomes `auto`.
+   *
+   * Clamping introduces a second problem that is easy to miss: a scrollbar narrows
+   * the text, so the field rewraps, so the PAINT no longer wraps the same way and
+   * every coloured span slides off its character. The measured scrollbar width is
+   * therefore published as a custom property, and the stylesheet adds it to the
+   * layer's own right padding so the two keep wrapping identically.
+   *
+   * An UNMOUNTED field is skipped rather than measured. Before the element is in the
+   * document it has no layout, so its `clientWidth` is zero, the mirror wraps at every
+   * character, and the measurement comes back several times too tall — a wrong height
+   * that then has to be corrected on the next keystroke, which is what a box that
+   * jumps on first focus actually is. The `ResizeObserver` installed at construction
+   * does the first real measurement as soon as there is a width to measure against.
+   * @param text - the current text.
+   */
+  resize(text) {
+    if (!this.sizing.autoGrow) {
+      this.mirror.adopt(this.input);
+      return;
+    }
+    if (!this.input.isConnected || this.input.clientWidth === 0) return;
+    const chrome = this.mirror.verticalPadding();
+    const lineHeight = this.mirror.lineHeight(this.input);
+    const minPx = Math.max(
+      this.sizing.minHeight ?? 0,
+      lineHeight * (this.sizing.minRows ?? 1) + chrome
+    );
+    const maxCandidate = Math.min(
+      this.sizing.maxHeight ?? Number.POSITIVE_INFINITY,
+      this.sizing.maxRows === void 0 ? Number.POSITIVE_INFINITY : lineHeight * this.sizing.maxRows + chrome
+    );
+    const maxPx = Math.max(maxCandidate, minPx);
+    const content = this.mirror.contentHeight(this.input, text);
+    const wanted = clamp(Math.max(content, minPx), minPx, maxPx);
+    const overflow = content > wanted + 0.5 ? "auto" : "hidden";
+    if (Math.abs(wanted - this.appliedHeight) > 0.5) {
+      this.input.style.height = `${String(Math.round(wanted))}px`;
+      this.appliedHeight = wanted;
+    }
+    if (overflow !== this.appliedOverflow) {
+      this.input.style.overflowY = overflow;
+      this.appliedOverflow = overflow;
+    }
+    const scrollbar = overflow === "auto" ? this.input.offsetWidth - this.input.clientWidth : 0;
+    const width = Math.max(0, scrollbar);
+    if (width !== this.appliedScrollbar) {
+      this.element.style.setProperty("--litearea-scrollbar", `${String(width)}px`);
+      this.appliedScrollbar = width;
+    }
+  }
+  // ── completion ────────────────────────────────────────────────────────────
+  /** The caret's offset, clamped into the text. */
+  caret() {
+    return clamp(readSelection(this.input).start, 0, this.input.value.length);
+  }
+  /** Resolve and show a list for the caret. */
+  openCompletion(trigger) {
+    if (this.completion === void 0 || this.current === void 0) return;
+    const result = complete(this.current, this.grammar, {
+      text: this.input.value,
+      caret: this.caret(),
+      trigger,
+      previousSourceId: this.completionState?.sourceId,
+      limit: this.completion.limit
+    });
+    if (result === void 0 || result.rows.length === 0) {
+      this.closeCompletion();
+      return;
+    }
+    this.completionState = result;
+    this.popup.show(result.rows, 0, this.completion.showDocumentation);
+    this.input.setAttribute("aria-expanded", "true");
+    this.syncActiveDescendant();
+    this.placePopup();
+    this.handlers.onCompletion?.(result);
+  }
+  /** Close the list and tell the host. */
+  closeCompletion() {
+    if (this.completionState === void 0 && !this.popup.isOpen) return;
+    this.completionState = void 0;
+    this.popup.close();
+    this.input.setAttribute("aria-expanded", "false");
+    this.input.removeAttribute("aria-activedescendant");
+    this.handlers.onCompletion?.(void 0);
+  }
+  /** Keep the field's `aria-activedescendant` pointing at the active row. */
+  syncActiveDescendant() {
+    const id = this.popup.activeRowId;
+    if (id === void 0) this.input.removeAttribute("aria-activedescendant");
+    else this.input.setAttribute("aria-activedescendant", id);
+  }
+  /** Put the list under the caret. */
+  placePopup() {
+    if (this.completionState === void 0) return;
+    const box = this.mirror.caretBox(this.input, this.caret());
+    if (box === void 0) return;
+    const inputRect = this.input.getBoundingClientRect();
+    const elementRect = this.element.getBoundingClientRect();
+    this.popup.place(
+      {
+        x: inputRect.left - elementRect.left + box.x,
+        y: inputRect.top - elementRect.top + box.y,
+        height: box.height
+      },
+      this.element,
+      { width: this.view?.innerWidth ?? 0, height: this.view?.innerHeight ?? 0 }
+    );
+  }
+  /**
+   * Take the active row.
+   * @param index - the row to take.
+   * @param commitCharacter - a character typed to trigger the pick, written after
+   *   the completion so the keystroke is not swallowed.
+   */
+  acceptCompletion(index, commitCharacter) {
+    const state = this.completionState;
+    const row = this.popup.items[index]?.item;
+    if (state === void 0 || row === void 0) return;
+    const applied = applyCompletion(this.input.value, state.range, row);
+    this.applying = true;
+    try {
+      replaceThroughPipeline(this.input, applied.from, applied.to, applied.insert);
+      writeSelection(this.input, applied.caret);
+      if (commitCharacter !== void 0) {
+        replaceThroughPipeline(this.input, applied.caret, applied.caret, commitCharacter);
+        writeSelection(this.input, applied.caret + commitCharacter.length);
+      }
+    } finally {
+      this.applying = false;
+    }
+    this.closeCompletion();
+    this.sync();
+    const inspection = this.current;
+    if (inspection !== void 0) {
+      this.grammar.grammar.onAccept?.({
+        text: this.input.value,
+        caret: this.caret(),
+        item: row,
+        state: inspection.state
+      });
+    }
+  }
+  /** Decide what an edit does to the list. */
+  updateCompletionAfterInput(data, deletion) {
+    if (this.completion === void 0 || this.applying || this.composing) return;
+    if (this.input.readOnly) return;
+    if (deletion) {
+      if (this.completionState !== void 0) this.openCompletion("auto");
+      return;
+    }
+    if (this.completionState !== void 0) {
+      this.openCompletion("auto");
+      return;
+    }
+    if (!this.completion.auto) return;
+    if (!this.shouldAutoOpen(data)) return;
+    this.openCompletion("auto");
+  }
+  /** Whether a keystroke is a reason to offer suggestions. */
+  shouldAutoOpen(data) {
+    if (data === "" || this.completion === void 0) return false;
+    const last = data.slice(-1);
+    if (this.completion.triggerCharacters.includes(last)) return true;
+    return this.grammar.wordChars.test(last);
+  }
+  /** Close a list the caret has left. */
+  updateCompletionForCaret() {
+    const state = this.completionState;
+    if (state === void 0) return;
+    const caret = this.caret();
+    if (caret < state.range.from || caret > state.range.to) this.closeCompletion();
+    else this.placePopup();
+  }
+  // ── hover ─────────────────────────────────────────────────────────────────
+  /** Start, or restart, the timer that shows a tooltip. */
+  queueHover(offset, event) {
+    if (this.hover === void 0 || !this.hover.enabled || this.current === void 0) return;
+    if (offset === this.hoverOffset && this.tooltip.isOpen) return;
+    this.hoverOffset = offset;
+    this.hideTooltip();
+    const clientX = event.clientX;
+    const clientY = event.clientY;
+    this.hoverTimer = this.view?.setTimeout(() => {
+      this.hoverTimer = void 0;
+      this.showHover(offset, clientX, clientY);
+    }, this.hover.delay);
+  }
+  /** Resolve and show a tooltip. */
+  showHover(offset, clientX, clientY) {
+    if (this.current === void 0 || this.destroyed) return;
+    const info = resolveHover(this.current, this.grammar, offset);
+    if (info === void 0) {
+      this.hideTooltip();
+      return;
+    }
+    const rect = this.element.getBoundingClientRect();
+    const lineHeight = this.mirror.lineHeight(this.input);
+    this.tooltip.show(
+      info,
+      { x: clientX - rect.left, y: clientY - rect.top, height: lineHeight },
+      this.element,
+      { width: this.view?.innerWidth ?? 0, height: this.view?.innerHeight ?? 0 }
+    );
+    this.handlers.onHover?.(info);
+  }
+  /** Hide the tooltip and forget what it described. */
+  hideTooltip() {
+    if (this.hoverTimer !== void 0) {
+      this.view?.clearTimeout(this.hoverTimer);
+      this.hoverTimer = void 0;
+    }
+    if (!this.tooltip.isOpen) return;
+    this.tooltip.hide();
+    this.handlers.onHover?.(void 0);
+  }
+  // ── events ────────────────────────────────────────────────────────────────
+  /** Attach every listener. */
+  bind() {
+    this.input.addEventListener("input", this.onInput);
+    this.input.addEventListener("keydown", this.onKeyDown);
+    this.input.addEventListener("scroll", this.onScroll);
+    this.input.addEventListener("click", this.onCaretMoved);
+    this.input.addEventListener("keyup", this.onKeyUp);
+    this.input.addEventListener("select", this.onCaretMoved);
+    this.input.addEventListener("blur", this.onBlur);
+    this.input.addEventListener("mousemove", this.onMouseMove);
+    this.input.addEventListener("mouseleave", this.onMouseLeave);
+    this.input.addEventListener("compositionstart", this.onCompositionStart);
+    this.input.addEventListener("compositionend", this.onCompositionEnd);
+    this.document.addEventListener("selectionchange", this.onSelectionChange);
+  }
+  /** Detach every listener. */
+  unbind() {
+    this.input.removeEventListener("input", this.onInput);
+    this.input.removeEventListener("keydown", this.onKeyDown);
+    this.input.removeEventListener("scroll", this.onScroll);
+    this.input.removeEventListener("click", this.onCaretMoved);
+    this.input.removeEventListener("keyup", this.onKeyUp);
+    this.input.removeEventListener("select", this.onCaretMoved);
+    this.input.removeEventListener("blur", this.onBlur);
+    this.input.removeEventListener("mousemove", this.onMouseMove);
+    this.input.removeEventListener("mouseleave", this.onMouseLeave);
+    this.input.removeEventListener("compositionstart", this.onCompositionStart);
+    this.input.removeEventListener("compositionend", this.onCompositionEnd);
+    this.document.removeEventListener("selectionchange", this.onSelectionChange);
+  }
+  onInput = (event) => {
+    this.sync();
+    const input = event;
+    const type = input.inputType ?? "";
+    const deletion = type.startsWith("delete");
+    const data = typeof input.data === "string" ? input.data : "";
+    this.hideTooltip();
+    this.updateCompletionAfterInput(data, deletion);
+    if (!this.applying) this.handlers.onChange?.(this.input.value);
+  };
+  onKeyDown = (event) => {
+    if (this.commitCharacter(event)) return;
+    if (event.key === "Escape") {
+      if (this.popup.isOpen) {
+        event.preventDefault();
+        this.closeCompletion();
+        return;
+      }
+      this.hideTooltip();
+      return;
+    }
+    if (event.key === " " && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      if (this.popup.isOpen) this.closeCompletion();
+      else this.openCompletion("explicit");
+      return;
+    }
+    if (!this.popup.isOpen) return;
+    const last = this.popup.items.length - 1;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.setActive(Math.min(this.popup.activeIndex + 1, last));
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        this.setActive(Math.max(this.popup.activeIndex - 1, 0));
+        return;
+      case "PageDown":
+        event.preventDefault();
+        this.setActive(Math.min(this.popup.activeIndex + PAGE_STEP, last));
+        return;
+      case "PageUp":
+        event.preventDefault();
+        this.setActive(Math.max(this.popup.activeIndex - PAGE_STEP, 0));
+        return;
+      case "Enter":
+        event.preventDefault();
+        this.acceptCompletion(this.popup.activeIndex);
+        return;
+      case "Tab":
+        event.preventDefault();
+        this.acceptCompletion(this.popup.activeIndex);
+        return;
+      default:
+        return;
+    }
+  };
+  /**
+   * Whether a keystroke is a commit character for the active row.
+   *
+   * Typing `=` at the end of `shape` takes the `shape=` row and keeps the
+   * character, rather than either swallowing the keystroke or leaving the row to be
+   * clicked. A row opts in; nothing has a commit character by default.
+   * @param event - the key event.
+   * @returns whether the keystroke was consumed.
+   */
+  commitCharacter(event) {
+    if (!this.popup.isOpen) return false;
+    if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return false;
+    const characters = this.popup.activeRow?.item.commitCharacters;
+    if (characters === void 0 || !characters.includes(event.key)) return false;
+    event.preventDefault();
+    this.acceptCompletion(this.popup.activeIndex, event.key);
+    return true;
+  }
+  /** Make a row active and keep the ARIA pointer in step. */
+  setActive(index) {
+    this.popup.setActive(index);
+    this.syncActiveDescendant();
+  }
+  onScroll = () => {
+    this.overlay.syncScroll(this.input);
+    this.placePopup();
+    this.hideTooltip();
+  };
+  onCaretMoved = () => {
+    this.updateCompletionForCaret();
+    this.handlers.onSelectionChange?.(readSelection(this.input));
+  };
+  onKeyUp = (event) => {
+    if (event.key.startsWith("Arrow") || event.key === "Home" || event.key === "End") {
+      this.updateCompletionForCaret();
+    }
+  };
+  onSelectionChange = () => {
+    if (this.document.activeElement !== this.input) return;
+    this.handlers.onSelectionChange?.(readSelection(this.input));
+  };
+  onBlur = () => {
+    this.closeCompletion();
+    this.hideTooltip();
+  };
+  onMouseMove = (event) => {
+    if (this.hover === void 0 || !this.hover.enabled) return;
+    if (this.popup.isOpen) {
+      this.hideTooltip();
+      return;
+    }
+    const offset = caretOffsetFromPoint(this.document, event.clientX, event.clientY);
+    if (offset === void 0) return;
+    this.queueHover(offset, event);
+  };
+  onMouseLeave = () => {
+    this.hoverOffset = void 0;
+    this.hideTooltip();
+  };
+  onCompositionStart = () => {
+    this.composing = true;
+    this.closeCompletion();
+  };
+  onCompositionEnd = () => {
+    this.composing = false;
+    this.sync();
+  };
+};
+function variableName(key) {
+  if (key.startsWith("--")) return key;
+  return key.startsWith("litearea-") ? `--${key}` : `--litearea-${key}`;
+}
+function caretOffsetFromPoint(ownerDocument, x, y) {
+  const probe = ownerDocument;
+  if (typeof probe.caretPositionFromPoint === "function") {
+    return probe.caretPositionFromPoint(x, y)?.offset;
+  }
+  if (typeof probe.caretRangeFromPoint === "function") {
+    return probe.caretRangeFromPoint(x, y)?.startOffset;
+  }
+  return void 0;
+}
+
+// src/react/index.tsx
+function liveGrammar(holder) {
+  return new Proxy({}, {
+    get: (_target, key) => Reflect.get(holder.current, key),
+    has: (_target, key) => Reflect.has(holder.current, key),
+    ownKeys: () => Reflect.ownKeys(holder.current),
+    getOwnPropertyDescriptor: (_target, key) => Reflect.getOwnPropertyDescriptor(holder.current, key)
+  });
+}
+function sameVariables(left, right) {
+  if (left === right) return true;
+  const a = Object.entries(left ?? {});
+  const b = Object.entries(right ?? {});
+  if (a.length !== b.length) return false;
+  return a.every(([key, value]) => (right ?? {})[key] === value);
+}
+function LiteAreaEditor(props) {
+  const hostRef = React.useRef(null);
+  const editorRef = React.useRef(void 0);
+  const latest = React.useRef(props);
+  latest.current = props;
+  const grammarBox = React.useRef(props.grammar);
+  grammarBox.current = props.grammar;
+  const live = React.useMemo(() => liveGrammar(grammarBox), []);
+  const variablesRef = React.useRef(void 0);
+  React.useLayoutEffect(() => {
+    const host = hostRef.current;
+    if (host === null) return;
+    const core = latest.current;
+    const editor = new LiteArea({
+      grammar: live,
+      value: latest.current.defaultValue ?? latest.current.value ?? "",
+      readOnly: latest.current.readOnly === true,
+      ...core,
+      // Every callback reads through `latest`, so a host that passes a new closure
+      // on each render does not need the editor to know about it.
+      onChange: (value) => {
+        latest.current.onChange?.(value);
+      },
+      onSelectionChange: (selection) => {
+        latest.current.onSelectionChange?.(selection);
+      },
+      onDiagnostics: (diagnostics) => {
+        latest.current.onDiagnostics?.(diagnostics);
+      },
+      onCompletion: (completion) => {
+        latest.current.onCompletion?.(completion);
+      },
+      onHover: (info) => {
+        latest.current.onHover?.(info);
+      }
+    });
+    host.appendChild(editor.element);
+    editorRef.current = editor;
+    latest.current.editorRef?.(editor);
+    return () => {
+      editor.destroy();
+      editorRef.current = void 0;
+      latest.current.editorRef?.(void 0);
+    };
+  }, [live]);
+  React.useLayoutEffect(() => {
+    const editor = editorRef.current;
+    if (editor === void 0) return;
+    if (!sameVariables(props.variables, variablesRef.current)) {
+      variablesRef.current = props.variables;
+      editor.setVariables(props.variables ?? {});
+    }
+    editor.refresh();
+    if (props.value !== void 0 && editor.value !== props.value) {
+      editor.setValue(props.value, props.preserveHistory === true);
+    }
+    if (editor.input.readOnly !== (props.readOnly === true)) {
+      editor.input.readOnly = props.readOnly === true;
+      editor.element.classList.toggle("litearea-readonly", props.readOnly === true);
+    }
+  });
+  return React.createElement("div", {
+    ref: hostRef,
+    className: props.className,
+    style: props.style
+  });
+}
+
+export { LiteAreaEditor };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map