@agentix-e/spel-editor 1.1.3 → 1.2.0

package/CHANGELOG.md

@@ -2,31 +2,127 @@
 
 All notable changes to this project will be documented in this file.
 
-## [0.1.1] - 2026-07-14
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] — 2026-09-13
+### Added
+- `docs/integration.md` — embedding, theming, accessibility, and how to call a provider
+  without shipping its key to the browser.
+- Ten `--spel-token-*` custom properties, one per token class, so the syntax palette can be
+  replaced from CSS.
+
+### Changed
+- **`@agentix-e/spel-ts` moves to `^2.0.0`.** This package uses spel-ts at runtime — the
+  tokenizer and `TokenKind` for the grammar, the parser behind lint and hover, and the
+  completion, formatter and diagnostic engines — so the major bump is a real dependency
+  change rather than a formality. `TokenKind`'s ordinals are renumbered in 2.0.0 and an
+  unsuffixed integer literal above `int` range is no longer accepted. The grammar refers
+  to members by name and no literal above `int` range appears anywhere in this package's
+  sources or tests, so neither change should reach its behaviour — and the suite, not
+  that reasoning, is what establishes it.
+- `typecheck` now also checks the tests, which `tsconfig.json` had excluded by including
+  `src` alone. Fifty-two errors surfaced, all of them real, and are fixed.
+- Coverage thresholds raised to 95 on all four dimensions, from 85/80/85/85.
+
+### Fixed
+- **`true`, `false`, `null`, `and`, `or`, `matches`, `between`, `instanceof` and `new`
+  were painted as ordinary variables.** spel-ts 2.0.0 moved those words out of its
+  tokenizer — it resolves them in the parser, with `equalsIgnoreCase`, which is also
+  what lets a field be called `and` — so all nine now arrive as `IDENTIFIER` instead of
+  token kinds of their own. The grammar decides them from the text, and only when they
+  are not names: `#and` is still a variable and `obj.and` still a property.
+- **`div` was painted as nothing.** spel-ts 2.0.0 gives the textual division operator a
+  token kind of its own and the style table had no case for it, so `a div b` left it
+  unstyled. `a mod b` was already covered; the two now behave alike.
+- **Syntax highlighting did nothing.** `spelLanguage()` wrapped the stream parser in a
+  `LanguageSupport` without a highlight style, and `LanguageSupport` installs none of its
+  own, so every token was tagged and none was coloured. The style is now part of the
+  language support.
+- **Accepting a completion typed a placeholder into the document.** The engine describes
+  insertions as snippets (`T($1)`, `between {$1, $2}`, `$1 ? $2 : $3`), which were passed
+  to CodeMirror's `apply` as plain strings. They are translated to CodeMirror's field
+  syntax and applied as snippets, so the placeholders became tab-through fields.
+- **A completion replaced only the ASCII tail of a reference.** The prefix was matched with
+  `\w`, so completing `#order.amo` inserted after `amo` instead of replacing the
+  reference, and a field named in Chinese was not treated as part of the token at all.
+- **The completion list stayed open where no token continues.** `validFor` was `() => true`,
+  which claims every position — including the space that ends a name.
+- **Assigning `value` did not reach the document.** `setValue()` dispatched, but
+  `el.value = …` and the `value` attribute only updated the element's state, so a
+  declarative binding showed the previous expression.
+- **The highlighter's token cache was shared by every document.** The tokenizer, token list
+  and cursor lived in a closure rather than in the state CodeMirror passes per document, so
+  two parses interleaved and each replaced the other's tokens.
+- **Two nested textboxes for one editable region.** The wrapper carried `role="textbox"`
+  and `tabindex="0"` while CodeMirror's content already carries `role="textbox"`; the label
+  and disabled state now live on the content element, and the wrapper is no longer a
+  separate tab stop.
+- **Gutter text was below the contrast floor.** `#9ca3af` on `#f9fafb` measured 2.43:1;
+  the default is now `#5b6472`, which measures 5.72:1.
+- **A diagnostic outside the document would have taken out every mark.** Ranges from the
+  engine are clamped to the document, which CodeMirror requires.
+- Test fixtures that did not match the interfaces they claimed: `variables` was written as a
+  list, `MethodSchema`/`TypeSchema`/`FunctionSchema` were given a `type` field they do not
+  have, and a method key of `toString()` produced the label `toString()()`.
+
+## [1.1.3] — 2026-07-20
+### Changed
+- Unified badge style with CI/Docs/Coverage/License/TypeScript/Node.js badges
+- Added GitHub Pages deployment job to CI (TypeDoc + coverage)
+- Added `typedoc.json` for API docs generation
+- Added SEO-optimized GitHub Pages landing page
+- Bumped `spel-ts` to `^1.2.2`, `nl2spel` to `^1.3.0`
+
+## [1.1.2] — 2026-07-19
 ### Changed
-- Remove unused imports across source files
-- Add `.prettierrc` configuration for consistent formatting
-- Tighten `tsconfig.json` strictness checks
+- Updated `nl2spel` dependency to `^1.2.2`
 
+## [1.1.1] — 2026-07-19
+### Fixed
+- Removed arbitrary depth limit
+
+## [1.1.0] — 2026-07-18
+### Added
+- Recursive context schema extraction
+- NL2SpEL integration documentation and interactive demo page
+
+## [1.0.0] — 2026-07-17
 ### Added
-- Playwright browser integration tests (`test:browser` / `test:browser:ui`)
-- nl2spel integration tests with DeepSeek provider
-- `DEEPSEEK_API_KEY` secret handling for integration tests
+- 100% language service coverage (completion, diagnostics, hover, formatting)
+- OIDC npm provenance publishing
+- Playwright browser tests + nl2spel integration tests
+- `getEditorView()` method for direct CodeMirror access
+
+### Changed
+- `strictFunctionTypes` enabled
+- Coverage thresholds raised to 85/80/85/85
+- Vitest upgraded to v3.x
+- CI: fixed browser-tests job (ESM needs bundler)
+
+## [0.1.1] — 2026-07-14
+### Changed
+- Code quality: unused imports, config consistency, type safety
+- CI: explicit pnpm version 10.28.2
+- Restored npm badge
 
-## [0.1.0] - 2026-07-12
+### Fixed
+- Package.json repo URL
+- Cross-repo ecosystem coherence (links, consistency, badges)
 
+## [0.1.0] — 2026-07-12
 ### Added
-- Initial release of `@agentix-e/spel-editor`
-- `<spel-editor>` Web Component with CodeMirror 6 integration
-- Syntax highlighting via spel-ts Tokenizer + StreamLanguage adapter
-- Auto-completion with keyword, operator, and context-aware suggestions
-- Real-time diagnostics (syntax, semantic, and context validation)
-- Hover tooltips showing node type information
-- Non-invasive theming via 12 CSS custom properties
-- Programmatic API: `getValue()`, `setValue()`, `validate()`, `format()`, `insertSnippet()`
+- Initial release: Web-embeddable SpEL editor Web Component
+- CodeMirror 6 integration with syntax highlighting
+- Auto-completion adapter (spel-ts powered)
+- Real-time diagnostics / lint adapter
+- Hover tooltips adapter
+- SpEL grammar tokenizer (StreamLanguage)
+- `validate` event with `SpelDiagnostic` detail
 - `change` event with `value` and `isValid` detail
-- Framework-agnostic — works with React, Vue, Angular, Svelte, or plain HTML
+- 12 CSS custom properties for non-invasive theming
+- Framework-agnostic Web Component (`<spel-editor>`)
+- Programmatic API: `getValue()`, `setValue()`, `validate()`, `format()`, `insertSnippet()`, `getEditorView()`
 
-[0.1.1]: https://github.com/AgentiX-E/spel-editor/releases/tag/v0.1.1
-[0.1.0]: https://github.com/AgentiX-E/spel-editor/releases/tag/v0.1.0
+---
+*Format based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).*

package/README.md

@@ -1,7 +1,7 @@
 # @agentix-e/spel-editor
 
 > Web-embeddable Spring Expression Language (SpEL) editor.
-> Based on CodeMirror 6 + spel-ts v1.1.0. Framework-agnostic Web Component.
+> Based on CodeMirror 6 + spel-ts v2.0.0. Framework-agnostic Web Component.
 
 [![CI](https://github.com/AgentiX-E/spel-editor/actions/workflows/ci.yml/badge.svg)](https://github.com/AgentiX-E/spel-editor/actions/workflows/ci.yml)
 [![npm](https://img.shields.io/npm/v/@agentix-e/spel-editor?color=blue)](https://www.npmjs.com/package/@agentix-e/spel-editor)
@@ -47,11 +47,12 @@ npm install @agentix-e/spel-editor
 
 ## Features
 
-- **Syntax highlighting** — Accurate token-level coloring powered by spel-ts Tokenizer
-- **Auto-completion** — Keyword, operator, variable, and context-aware suggestions
+- **Syntax highlighting** — Token-level colouring powered by the spel-ts Tokenizer, with every token class themable through a CSS custom property
+- **Auto-completion** — Keyword, operator, variable, and context-aware suggestions, inserted as CodeMirror snippets with tab-through fields
 - **Real-time diagnostics** — Syntax, semantic, and context validation
 - **Hover tooltips** — Node type information on hover
-- **Non-invasive theming** — 12 CSS custom properties for complete visual control
+- **Non-invasive theming** — 22 CSS custom properties for complete visual control
+- **Declarative-friendly** — Assigning `value` (property or attribute) updates the visible document
 - **Framework agnostic** — Works with React, Vue, Angular, Svelte, or plain HTML
 
 ## API Reference
@@ -99,11 +100,27 @@ npm install @agentix-e/spel-editor
 | `--spel-line-highlight` | `#f3f4f6` | Active line highlight color |
 | `--spel-selection-bg` | `#bfdbfe` | Selection background color |
 | `--spel-gutter-bg` | `#f9fafb` | Gutter background |
-| `--spel-gutter-fg` | `#9ca3af` | Gutter foreground (line numbers) |
+| `--spel-gutter-fg` | `#5b6472` | Gutter foreground (line numbers). 5.72:1 on the gutter background |
 | `--spel-border-width` | `1px` | Editor border width |
 | `--spel-border-color` | `#d0d5dd` | Editor border color |
 | `--spel-border-radius` | `6px` | Editor border radius |
 
+Every colour a token can be painted in is a custom property too, so the palette can be
+replaced without a rebuild:
+
+| Property | Default | Token |
+|----------|---------|-------|
+| `--spel-token-keyword` | `#7c3aed` | `null`, `true`, `matches`, `between`, `instanceof` |
+| `--spel-token-bool` | `#b45309` | Boolean literals |
+| `--spel-token-number` | `#0f766e` | Integer, long, real and hex literals |
+| `--spel-token-string` | `#15803d` | String literals |
+| `--spel-token-variable` | `#1d4ed8` | `#variable` |
+| `--spel-token-property` | `#0369a1` | `.property` and `?.property` |
+| `--spel-token-operator` | `#475569` | Arithmetic, comparison and logical operators |
+| `--spel-token-type` | `#9333ea` | `@bean`, `&@factory`, `T` |
+| `--spel-token-punctuation` | `#64748b` | Brackets, commas, dots |
+| `--spel-token-operator-keyword` | `#7c3aed` | Selection and projection (`.?[ ]`, `.![ ]`, `.^[ ]`, `.*[ ]`) |
+
 ## NL Integration — Natural Language → SpEL
 
 `@agentix-e/spel-editor` accepts `@agentix-e/nl2spel` as an **optional peer dependency**.
@@ -153,11 +170,17 @@ npm install @agentix-e/nl2spel-openai
   const editor = document.querySelector('#editor');
   const engine = new NL2SpelEngine();
 
-  // Register DeepSeek as the LLM provider
+  // Route provider calls through your own server, which holds the API key.
+  // A key placed here would be compiled into a public bundle — see
+  // docs/integration.md §5 for the proxy contract and the browser-local alternative.
   engine.registerProvider(
     new OpenAICompatibleProvider({
-      provider: 'deepseek',
-      apiKey: 'sk-your-deepseek-key-here',
+      custom: {
+        name: 'spel-proxy',
+        baseURL: '/api/spel-llm',
+        apiKey: 'not-a-secret',
+        model: 'deepseek-chat',
+      },
     })
   );
 

package/dist/index.js

@@ -27,7 +27,7 @@ import { closeBrackets, autocompletion } from "@codemirror/autocomplete";
 import { linter } from "@codemirror/lint";
 
 // src/cm6/spel-language.ts
-import { LanguageSupport } from "@codemirror/language";
+import { LanguageSupport, syntaxHighlighting } from "@codemirror/language";
 
 // src/cm6/spel-grammar.ts
 import { StreamLanguage } from "@codemirror/language";
@@ -42,6 +42,7 @@ function tokenKindToStyle(kind) {
     case TokenKind.MATCHES:
     case TokenKind.BETWEEN:
     case TokenKind.INSTANCEOF:
+    case TokenKind.DIV:
     case TokenKind.MOD:
     case TokenKind.NEW:
       return "keyword";
@@ -112,103 +113,140 @@ function tokenKindToStyle(kind) {
       return "";
   }
 }
+var PARSER_RESOLVED_WORDS = /* @__PURE__ */ new Map([
+  ["true", "bool"],
+  ["false", "bool"],
+  ["null", "keyword"],
+  ["and", "operator"],
+  ["or", "operator"],
+  ["matches", "keyword"],
+  ["between", "keyword"],
+  ["instanceof", "keyword"],
+  ["new", "keyword"]
+]);
 function createSpelStreamParser() {
   return StreamLanguage.define(createTokenParser());
 }
+function spansFor(line) {
+  let tokens;
+  try {
+    tokens = new SpelTokenizer(line).tokenize();
+  } catch {
+    return [];
+  }
+  const spans = [];
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    if (token.kind === TokenKind.EOF) break;
+    const style = styleForToken(line, tokens, index);
+    if (style === "") continue;
+    spans.push({ from: token.startPos, to: token.endPos, style });
+  }
+  return spans;
+}
+function styleForToken(line, tokens, index) {
+  const token = tokens[index];
+  if (token.kind === TokenKind.IDENTIFIER) {
+    const previous = index > 0 ? tokens[index - 1] : void 0;
+    if (previous?.kind === TokenKind.HASH) return "variableName";
+    if (previous?.kind === TokenKind.DOT || previous?.kind === TokenKind.SAFE_NAV) {
+      return "propertyName";
+    }
+    const word = line.slice(token.startPos, token.endPos).toLowerCase();
+    return PARSER_RESOLVED_WORDS.get(word) ?? "variableName";
+  }
+  return tokenKindToStyle(token.kind);
+}
 function createTokenParser() {
-  let _tokenizer = null;
-  let _tokens = [];
-  let _tokenIndex = 0;
-  const startState = () => null;
-  const token = (stream) => {
-    if (!_tokenizer || _tokenIndex === 0) {
-      _tokenizer = new SpelTokenizer(stream.string);
-      let rawTokens;
-      try {
-        rawTokens = _tokenizer.tokenize();
-      } catch {
-        _tokens = [];
-        _tokenIndex = 0;
-        stream.skipToEnd();
-        return null;
-      }
-      _tokens = [];
-      _tokenIndex = 0;
-      for (let i = 0; i < rawTokens.length - 1; i++) {
-        const tok = rawTokens[i];
-        const style = tokenKindToStyle(tok.kind);
-        if (tok.kind === TokenKind.IDENTIFIER) {
-          const prevTok = i > 0 ? rawTokens[i - 1] : null;
-          if (prevTok?.kind === TokenKind.HASH) {
-            _tokens.push({
-              from: tok.startPos,
-              to: tok.endPos,
-              style: "variableName"
-            });
-            continue;
-          }
-          if (prevTok?.kind === TokenKind.DOT || prevTok?.kind === TokenKind.SAFE_NAV) {
-            _tokens.push({
-              from: tok.startPos,
-              to: tok.endPos,
-              style: "propertyName"
-            });
-            continue;
-          }
-        }
-        _tokens.push({ from: tok.startPos, to: tok.endPos, style });
-      }
+  const startState = () => ({ line: null, spans: [], index: 0 });
+  const token = (stream, state) => {
+    if (state.line !== stream.string || stream.pos === 0) {
+      state.line = stream.string;
+      state.spans = spansFor(stream.string);
+      state.index = 0;
     }
-    while (_tokenIndex < _tokens.length) {
-      const t = _tokens[_tokenIndex];
-      if (t.from >= stream.pos) {
-        stream.pos = t.to;
-        _tokenIndex++;
-        return t.style || null;
+    while (state.index < state.spans.length) {
+      const span = state.spans[state.index];
+      state.index += 1;
+      if (span.to > stream.pos) {
+        stream.pos = span.to;
+        return span.style;
       }
-      _tokenIndex++;
     }
     stream.skipToEnd();
-    _tokenIndex = 0;
     return null;
   };
   return { startState, token };
 }
 
+// src/cm6/spel-highlight.ts
+import { HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+var spelHighlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: "var(--spel-token-keyword, #7c3aed)" },
+  { tag: tags.bool, color: "var(--spel-token-bool, #b45309)" },
+  { tag: tags.number, color: "var(--spel-token-number, #0f766e)" },
+  { tag: tags.string, color: "var(--spel-token-string, #15803d)" },
+  { tag: tags.variableName, color: "var(--spel-token-variable, #1d4ed8)" },
+  { tag: tags.propertyName, color: "var(--spel-token-property, #0369a1)" },
+  { tag: tags.operator, color: "var(--spel-token-operator, #475569)" },
+  { tag: tags.typeName, color: "var(--spel-token-type, #9333ea)" },
+  { tag: tags.punctuation, color: "var(--spel-token-punctuation, #64748b)" },
+  {
+    tag: tags.operatorKeyword,
+    color: "var(--spel-token-operator-keyword, #7c3aed)",
+    fontStyle: "italic"
+  }
+]);
+
 // src/cm6/spel-language.ts
 function spelLanguage() {
-  return new LanguageSupport(createSpelStreamParser());
+  return new LanguageSupport(createSpelStreamParser(), [syntaxHighlighting(spelHighlightStyle)]);
 }
 
 // src/cm6/completion-source.ts
-import "@codemirror/autocomplete";
+import {
+  snippetCompletion
+} from "@codemirror/autocomplete";
 import { SpelCompletionEngine } from "@agentix-e/spel-ts";
+
+// src/cm6/snippet.ts
+function toCm6Snippet(template) {
+  return template.replace(/\$(\d+)/g, (_match, digits) => `\${${digits}}`);
+}
+
+// src/cm6/completion-source.ts
+var NAME_PREFIX = /[\p{L}\p{N}_$#@.]*$/u;
+var NAME_VALID_FOR = /^[\p{L}\p{N}_$#@.]*$/u;
 function spelCompletion(getContextSchema) {
   return (context) => {
     const expression = context.state.sliceDoc();
     const position = context.pos;
     const schema = getContextSchema?.() ?? void 0;
     const items = SpelCompletionEngine.getCompletions(expression, position, schema);
-    const validFor = /\w*/;
     return {
-      from: context.matchBefore(validFor)?.from ?? position,
+      // `matchBefore` answers null when the pattern does not match at the cursor, so the
+      // fallback stays even though NAME_PREFIX, which may match empty, always matches
+      // today. It guards CodeMirror's contract rather than a case this adapter can reach,
+      // and a future narrowing of the pattern would make it live.
+      from: context.matchBefore(NAME_PREFIX)?.from ?? position,
       options: items.map((item) => mapToCM6Completion(item)),
-      // Allow completions at any position
-      validFor: () => true
+      // Stated rather than omitted, so the list stays open only while the cursor is
+      // still inside a name. `() => true` claimed every position continues a token,
+      // including the space that ends one.
+      validFor: NAME_VALID_FOR
     };
   };
 }
 function mapToCM6Completion(item) {
-  const type = mapKindToCM6Type(item.kind);
-  return {
+  return snippetCompletion(toCm6Snippet(item.insertText), {
     label: item.label,
-    type,
+    type: mapKindToCM6Type(item.kind),
     detail: item.detail,
     info: item.documentation,
-    apply: item.insertText,
     // Higher priority items appear first
     boost: item.sortPriority / 100
-  };
+  });
 }
 function mapKindToCM6Type(kind) {
   switch (kind) {
@@ -243,16 +281,18 @@ function spelLint(getContextSchema) {
     const schema = getContextSchema?.() ?? void 0;
     if (expression.trim().length === 0) return [];
     const diagnostics = SpelDiagnosticEngine.validate(expression, schema);
-    return diagnostics.map((d) => mapToCM6Diagnostic(d));
+    return diagnostics.map((diagnostic) => mapToCM6Diagnostic(diagnostic, view.state.doc.length));
   };
 }
-function mapToCM6Diagnostic(d) {
+function mapToCM6Diagnostic(diagnostic, docLength) {
+  const from = Math.max(0, Math.min(diagnostic.from, docLength));
+  const to = Math.max(from, Math.min(diagnostic.to, docLength));
   return {
-    from: d.from,
-    to: d.to,
-    message: d.message,
-    severity: mapSeverity(d.severity),
-    source: d.code
+    from,
+    to,
+    message: diagnostic.message,
+    severity: mapSeverity(diagnostic.severity),
+    source: diagnostic.code
   };
 }
 function mapSeverity(sev) {
@@ -354,11 +394,14 @@ var EDITOR_STYLES = css`
   }
   .cm-editor .cm-gutters {
     background: var(--spel-gutter-bg, #f9fafb);
-    color: var(--spel-gutter-fg, #9ca3af);
+    /* 5.72:1 on the gutter background. The previous #9ca3af measured 2.43:1, under
+       the 4.5:1 WCAG AA requires for text, which made line numbers and lint markers
+       unreadable at reduced contrast sensitivity. */
+    color: var(--spel-gutter-fg, #5b6472);
     border: none;
   }
 `;
-var _editorView, _diagnosticCache, _diagnosticDebounceTimer, _SpelEditor_instances, scheduleDiagnostics_fn, runDiagnostics_fn, createEditor_fn, updateEditorState_fn, fireChange_fn;
+var _editorView, _diagnosticCache, _diagnosticDebounceTimer, _SpelEditor_instances, reflectValue_fn, scheduleDiagnostics_fn, runDiagnostics_fn, contentAttributes_fn, createEditor_fn, updateEditorState_fn, fireChange_fn;
 var SpelEditor = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -377,11 +420,6 @@ var SpelEditor = class extends LitElement {
     return html`
       <div
         class="cm-container"
-        role="textbox"
-        aria-label=${this.placeholder}
-        aria-readonly=${this.readonly ? "true" : "false"}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex="0"
         style="
           min-height: ${this.minHeight};
           border: var(--spel-border-width, 1px) solid var(--spel-border-color, #d0d5dd);
@@ -395,12 +433,15 @@ var SpelEditor = class extends LitElement {
     __privateMethod(this, _SpelEditor_instances, createEditor_fn).call(this);
   }
   updated(changed) {
-    if (changed.has("disabled") || changed.has("readonly")) {
+    if (changed.has("disabled") || changed.has("readonly") || changed.has("placeholder")) {
       __privateMethod(this, _SpelEditor_instances, updateEditorState_fn).call(this);
     }
     if (!__privateGet(this, _editorView) && this.containerEl) {
       __privateMethod(this, _SpelEditor_instances, createEditor_fn).call(this);
     }
+    if (changed.has("value")) {
+      __privateMethod(this, _SpelEditor_instances, reflectValue_fn).call(this);
+    }
     if (changed.has("contextSchema")) {
       __privateMethod(this, _SpelEditor_instances, scheduleDiagnostics_fn).call(this);
     }
@@ -493,6 +534,29 @@ _editorView = new WeakMap();
 _diagnosticCache = new WeakMap();
 _diagnosticDebounceTimer = new WeakMap();
 _SpelEditor_instances = new WeakSet();
+/**
+ * Push the current `value` into the editor, if the two have diverged.
+ *
+ * Typing sets `value` from the document, so this is a no-op for the common case and
+ * only acts on a value assigned from outside — which is how every declarative
+ * consumer sets it. Without this, `el.value = 'a > 1'` updated the element's state
+ * while the visible document kept showing the previous expression.
+ *
+ * The guard is what keeps it from looping: the change listener writes the document
+ * text back into `value`, and a dispatch here is skipped whenever they already
+ * agree, so the cursor is never reset mid-edit.
+ */
+reflectValue_fn = function() {
+  const view = __privateGet(this, _editorView);
+  if (!view) return;
+  const current = view.state.sliceDoc();
+  if (current === this.value) return;
+  view.dispatch({
+    changes: { from: 0, to: view.state.doc.length, insert: this.value },
+    selection: { anchor: this.value.length }
+  });
+  __privateMethod(this, _SpelEditor_instances, scheduleDiagnostics_fn).call(this);
+};
 /**
  * Schedule a debounced diagnostic run (300ms).
  * Avoids redundant computation on rapid typing.
@@ -526,6 +590,21 @@ runDiagnostics_fn = function() {
     })
   );
 };
+/**
+ * Attributes for the editable region.
+ *
+ * CodeMirror already renders `.cm-content` with `role="textbox"`,
+ * `aria-multiline="true"` and — when the state is read-only — `aria-readonly`, so
+ * that element is the component's one textbox. The label and the disabled state
+ * belong on it as well: declaring them on the wrapper as well produced two nested
+ * textboxes and two tab stops for a single editable region.
+ */
+contentAttributes_fn = function() {
+  return {
+    "aria-label": this.placeholder,
+    ...this.disabled ? { "aria-disabled": "true" } : {}
+  };
+};
 createEditor_fn = function() {
   const extensions = [
     spelLanguage(),
@@ -536,6 +615,7 @@ createEditor_fn = function() {
     closeBrackets(),
     keymap.of([...defaultKeymap, ...historyKeymap]),
     cmPlaceholder(this.placeholder),
+    EditorView.contentAttributes.of(__privateMethod(this, _SpelEditor_instances, contentAttributes_fn).call(this)),
     EditorView.updateListener.of((update) => {
       if (update.docChanged) {
         this.value = update.state.sliceDoc();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentix-e/spel-editor",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Web-embeddable Spring Expression Language (SpEL) editor — CodeMirror 6 + spel-ts powered, framework-agnostic Web Component with NL2SpEL integration",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,7 +24,7 @@
     "test:browser:ui": "playwright test --ui",
     "test:all": "pnpm test && pnpm test:browser",
     "test:watch": "vitest",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
     "format": "prettier --write 'src/**/*.ts' 'tests/**/*.ts'",
     "format:check": "prettier --check 'src/**/*.ts' 'tests/**/*.ts'",
     "clean": "rm -rf dist",
@@ -34,13 +34,14 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@agentix-e/spel-ts": "^1.2.2",
+    "@agentix-e/spel-ts": "^2.0.0",
     "@codemirror/autocomplete": "^6.0.0",
     "@codemirror/commands": "^6.0.0",
     "@codemirror/language": "^6.0.0",
     "@codemirror/lint": "^6.0.0",
     "@codemirror/state": "^6.0.0",
     "@codemirror/view": "^6.0.0",
+    "@lezer/highlight": "^1.2.3",
     "lit": "^3.0.0"
   },
   "peerDependencies": {