@agentix-e/spel-editor 0.0.0 → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [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()`
+- `change` event with `value` and `isValid` detail
+- Framework-agnostic — works with React, Vue, Angular, Svelte, or plain HTML
+
+[0.1.0]: https://github.com/AgentiX-E/spel-editor/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 AgentiX-E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,45 +1,95 @@
 # @agentix-e/spel-editor
 
-## ⚠️ IMPORTANT NOTICE ⚠️
-
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@agentix-e/spel-editor`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+> Web-embeddable Spring Expression Language (SpEL) editor.
+> Based on CodeMirror 6 + spel-ts v1.1.0. Framework-agnostic Web Component.
+
+[![GitHub](https://img.shields.io/npm/v/@agentix-e/spel-editor)](https://www.npmjs.com/package/@agentix-e/spel-editor)
+
+## Quick Start
+
+```bash
+npm install @agentix-e/spel-editor
+```
+
+```html
+<spel-editor
+  placeholder="Enter SpEL expression..."
+  min-height="100px"
+></spel-editor>
+
+<script type="module">
+  import '@agentix-e/spel-editor';
+
+  const editor = document.querySelector('spel-editor');
+  editor.addEventListener('change', (e) => {
+    console.log('Expression:', e.detail.value);
+    console.log('Valid:', e.detail.isValid);
+  });
+</script>
+```
+
+## Features
+
+- **Syntax highlighting** — Accurate token-level coloring powered by spel-ts Tokenizer
+- **Auto-completion** — Keyword, operator, variable, and context-aware suggestions
+- **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
+- **Framework agnostic** — Works with React, Vue, Angular, Svelte, or plain HTML
+
+## API Reference
+
+### Properties (Attributes)
+
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `value` | `value` | `string` | `''` | SpEL expression value |
+| `placeholder` | `placeholder` | `string` | `'Enter SpEL expression...'` | Placeholder text when editor is empty |
+| `readonly` | `readonly` | `boolean` | `false` | Read-only mode (prevents editing) |
+| `disabled` | `disabled` | `boolean` | `false` | Disabled mode (editor becomes inert) |
+| `minHeight` | `min-height` | `string` | `'80px'` | Minimum editor height (CSS value) |
+| `contextSchema` | — | `ContextSchema \| null` | `null` | Context schema for completions and diagnostics. Set via JavaScript only (not an HTML attribute) |
+
+### Methods
+
+| Method | Returns | Description |
+|--------|---------|-------------|
+| `getValue()` | `string` | Get the current expression text from the editor |
+| `setValue(value: string)` | `void` | Set the expression text programmatically |
+| `validate()` | `SpelDiagnostic[]` | Get the current diagnostics from the debounced validation cache |
+| `format()` | `void` | Format the current expression using SpelFormatter |
+| `insertSnippet(snippet: string)` | `void` | Insert a text snippet at the current cursor position |
+| `getEditorView()` | `EditorView \| null` | Get the underlying CodeMirror 6 EditorView instance |
+
+### Events
+
+| Event | Detail Type | Description |
+|-------|-------------|-------------|
+| `change` | `SpelEditorDetail` | Fired when the expression value changes. Detail contains `{ value: string; isValid: boolean }` |
+| `validate` | `{ diagnostics: SpelDiagnostic[] }` | Fired after debounced diagnostics complete. Detail contains the diagnostic results |
+
+### CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--spel-bg` | `#ffffff` | Editor background |
+| `--spel-font-family` | `'JetBrains Mono', monospace` | Editor font |
+| `--spel-font-size` | `14px` | Editor font size |
+| `--spel-line-height` | `1.6` | Editor line height |
+| `--spel-cursor` | `#111827` | Cursor color |
+| `--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-border-width` | `1px` | Editor border width |
+| `--spel-border-color` | `#d0d5dd` | Editor border color |
+| `--spel-border-radius` | `6px` | Editor border radius |
+
+## License
+
+MIT © AgentiX-E
+
+## Ecosystem
+
+- [@agentix-e/spel-ts](https://github.com/AgentiX-E/spel-ts) — Core SpEL parser and evaluator
+- [@agentix-e/nl2spel](https://github.com/AgentiX-E/nl2spel) — Natural language → SpEL generation (optional)

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import * as lit from 'lit';
+import { LitElement, PropertyValues } from 'lit';
+import { EditorView } from '@codemirror/view';
+import { ContextSchema, SpelDiagnostic } from '@agentix-e/spel-ts';
+export { ContextSchema, SpelDiagnostic } from '@agentix-e/spel-ts';
+
+/**
+ * `<spel-editor>` — Web-embeddable SpEL expression editor.
+ */
+declare class SpelEditor extends LitElement {
+    #private;
+    static styles: lit.CSSResult;
+    value: string;
+    contextSchema: ContextSchema | null;
+    placeholder: string;
+    readonly: boolean;
+    disabled: boolean;
+    minHeight: string;
+    private containerEl;
+    render(): lit.TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Get the current expression text from the editor.
+     */
+    getValue(): string;
+    /**
+     * Set the expression text programmatically.
+     */
+    setValue(value: string): void;
+    /**
+     * Insert a text snippet at the current cursor position.
+     */
+    insertSnippet(snippet: string): void;
+    /**
+     * Get the current diagnostics from the debounced validation cache.
+     */
+    validate(): SpelDiagnostic[];
+    /**
+     * Format the current expression using SpelFormatter.
+     */
+    format(): void;
+    /**
+     * Get the underlying CodeMirror 6 EditorView instance.
+     */
+    getEditorView(): EditorView | null;
+}
+
+/** Event detail for 'change' event */
+interface SpelEditorDetail {
+    value: string;
+    isValid: boolean;
+}
+
+export { SpelEditor, type SpelEditorDetail };

package/dist/index.js

@@ -0,0 +1,595 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/spel-editor.ts
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { EditorView, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { closeBrackets, autocompletion } from "@codemirror/autocomplete";
+import { linter } from "@codemirror/lint";
+
+// src/cm6/spel-language.ts
+import { LanguageSupport } from "@codemirror/language";
+
+// src/cm6/spel-grammar.ts
+import { StreamLanguage } from "@codemirror/language";
+import { Tokenizer as SpelTokenizer, TokenKind } from "@agentix-e/spel-ts";
+function tokenKindToStyle(kind) {
+  switch (kind) {
+    // Keywords
+    case TokenKind.LITERAL_NULL:
+      return "keyword";
+    case TokenKind.LITERAL_BOOLEAN:
+      return "bool";
+    case TokenKind.MATCHES:
+    case TokenKind.BETWEEN:
+    case TokenKind.INSTANCEOF:
+    case TokenKind.MOD:
+    case TokenKind.NEW:
+      return "keyword";
+    // Literals
+    case TokenKind.LITERAL_INT:
+    case TokenKind.LITERAL_LONG:
+    case TokenKind.LITERAL_FLOAT:
+    case TokenKind.LITERAL_DOUBLE:
+    case TokenKind.LITERAL_HEX:
+      return "number";
+    case TokenKind.LITERAL_STRING:
+      return "string";
+    // Variables
+    case TokenKind.IDENTIFIER:
+      return "variableName";
+    // Operators
+    case TokenKind.PLUS:
+    case TokenKind.MINUS:
+    case TokenKind.STAR:
+    case TokenKind.SLASH:
+    case TokenKind.PERCENT:
+    case TokenKind.POWER:
+    case TokenKind.INC:
+    case TokenKind.DEC:
+    case TokenKind.ASSIGN:
+      return "operator";
+    // Comparison
+    case TokenKind.EQ:
+    case TokenKind.NE:
+    case TokenKind.LT:
+    case TokenKind.LE:
+    case TokenKind.GT:
+    case TokenKind.GE:
+    case TokenKind.AND:
+    case TokenKind.OR:
+    case TokenKind.NOT:
+      return "operator";
+    // Type/Bean references
+    case TokenKind.HASH:
+    case TokenKind.AT:
+    case TokenKind.AMP_AT:
+      return "typeName";
+    // Punctuation
+    case TokenKind.LPAREN:
+    case TokenKind.RPAREN:
+    case TokenKind.LBRACKET:
+    case TokenKind.RBRACKET:
+    case TokenKind.LBRACE:
+    case TokenKind.RBRACE:
+    case TokenKind.COMMA:
+    case TokenKind.COLON:
+    case TokenKind.DOT:
+    case TokenKind.SAFE_NAV:
+    case TokenKind.QMARK:
+    case TokenKind.ELVIS:
+    case TokenKind.DOTDOT:
+      return "punctuation";
+    // Selection/Projection
+    case TokenKind.PROJECTION:
+    case TokenKind.SELECTION:
+    case TokenKind.SELECT_FIRST:
+    case TokenKind.SELECT_LAST:
+      return "operatorKeyword";
+    // Type
+    case TokenKind.TYPE_START:
+      return "typeName";
+    default:
+      return "";
+  }
+}
+function createSpelStreamParser() {
+  let _tokenizer = null;
+  let _tokens = [];
+  let _tokenIndex = 0;
+  return StreamLanguage.define({
+    startState: () => null,
+    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 });
+        }
+      }
+      while (_tokenIndex < _tokens.length) {
+        const t = _tokens[_tokenIndex];
+        if (t.from >= stream.pos) {
+          stream.pos = t.to;
+          _tokenIndex++;
+          return t.style || null;
+        }
+        _tokenIndex++;
+      }
+      stream.skipToEnd();
+      _tokenIndex = 0;
+      return null;
+    }
+  });
+}
+
+// src/cm6/spel-language.ts
+function spelLanguage() {
+  return new LanguageSupport(createSpelStreamParser());
+}
+
+// src/cm6/completion-source.ts
+import "@codemirror/autocomplete";
+import { SpelCompletionEngine } from "@agentix-e/spel-ts";
+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,
+      options: items.map((item) => mapToCM6Completion(item)),
+      // Allow completions at any position
+      validFor: () => true
+    };
+  };
+}
+function mapToCM6Completion(item) {
+  const type = mapKindToCM6Type(item.kind);
+  return {
+    label: item.label,
+    type,
+    detail: item.detail,
+    info: item.documentation,
+    apply: item.insertText,
+    // Higher priority items appear first
+    boost: item.sortPriority / 100
+  };
+}
+function mapKindToCM6Type(kind) {
+  switch (kind) {
+    case "keyword":
+      return "keyword";
+    case "operator":
+      return "operator";
+    case "variable":
+      return "variable";
+    case "property":
+      return "property";
+    case "method":
+      return "method";
+    case "function":
+      return "function";
+    case "type":
+      return "type";
+    default:
+      return "text";
+  }
+}
+
+// src/cm6/lint-source.ts
+import "@codemirror/lint";
+import {
+  SpelDiagnosticEngine,
+  DiagnosticSeverity
+} from "@agentix-e/spel-ts";
+function spelLint(getContextSchema) {
+  return (view) => {
+    const expression = view.state.sliceDoc();
+    const schema = getContextSchema?.() ?? void 0;
+    if (expression.trim().length === 0) return [];
+    const diagnostics = SpelDiagnosticEngine.validate(expression, schema);
+    return diagnostics.map((d) => mapToCM6Diagnostic(d));
+  };
+}
+function mapToCM6Diagnostic(d) {
+  return {
+    from: d.from,
+    to: d.to,
+    message: d.message,
+    severity: mapSeverity(d.severity),
+    source: d.code
+  };
+}
+function mapSeverity(sev) {
+  switch (sev) {
+    case DiagnosticSeverity.ERROR:
+      return "error";
+    case DiagnosticSeverity.WARNING:
+      return "warning";
+    case DiagnosticSeverity.INFO:
+      return "info";
+  }
+}
+
+// src/cm6/hover-tooltip.ts
+import { hoverTooltip } from "@codemirror/view";
+import {
+  AstWalker,
+  NodeType,
+  SpelExpressionParser
+} from "@agentix-e/spel-ts";
+function spelHover() {
+  return hoverTooltip(createHoverSource());
+}
+function createHoverSource() {
+  return (view, pos) => {
+    const expression = view.state.sliceDoc();
+    if (expression.trim().length === 0) return null;
+    try {
+      const parser = new SpelExpressionParser();
+      const ast = parser.parseRaw(expression);
+      const node = AstWalker.findNodeAt(ast, pos);
+      if (!node) return null;
+      const info = getNodeInfo(node);
+      if (!info) return null;
+      return {
+        pos: node.startPos,
+        end: node.endPos,
+        create() {
+          const dom = document.createElement("div");
+          dom.style.cssText = "padding: 4px 8px; font-size: 13px; max-width: 300px;";
+          dom.textContent = info;
+          return { dom };
+        }
+      };
+    } catch {
+      return null;
+    }
+  };
+}
+function getNodeInfo(node) {
+  switch (node.nodeType) {
+    case NodeType.VARIABLE_REFERENCE:
+      return `Variable: #${node.getVariableName()}`;
+    case NodeType.PROPERTY_OR_FIELD_REFERENCE:
+      return `Property: .${node.getName()}`;
+    case NodeType.BEAN_REFERENCE:
+      return `Spring Bean: @${node.getBeanName()}`;
+    case NodeType.TYPE_REFERENCE:
+      return `Type: T(${node.getTypeName()})`;
+    default:
+      return null;
+  }
+}
+
+// src/spel-editor.ts
+import { SpelFormatter, SpelDiagnosticEngine as SpelDiagnosticEngine2 } from "@agentix-e/spel-ts";
+var EDITOR_STYLES = css`
+  :host {
+    display: block;
+  }
+  .cm-container {
+    overflow: hidden;
+  }
+  .cm-editor {
+    height: 100%;
+    font-family: var(--spel-font-family, 'JetBrains Mono', monospace);
+    font-size: var(--spel-font-size, 14px);
+    line-height: var(--spel-line-height, 1.6);
+  }
+  .cm-editor.cm-focused {
+    outline: none;
+  }
+  .cm-editor .cm-scroller {
+    overflow: auto;
+  }
+  .cm-editor .cm-content {
+    caret-color: var(--spel-cursor, #111827);
+  }
+  .cm-editor .cm-cursor,
+  .cm-editor .cm-dropCursor {
+    border-left-color: var(--spel-cursor, #111827);
+  }
+  .cm-editor .cm-activeLine {
+    background-color: var(--spel-line-highlight, #f3f4f6);
+  }
+  .cm-editor .cm-selectionBackground,
+  .cm-editor.cm-focused .cm-selectionBackground {
+    background: var(--spel-selection-bg, #bfdbfe) !important;
+  }
+  .cm-editor .cm-gutters {
+    background: var(--spel-gutter-bg, #f9fafb);
+    color: var(--spel-gutter-fg, #9ca3af);
+    border: none;
+  }
+`;
+var _editorView, _diagnosticCache, _diagnosticDebounceTimer, _SpelEditor_instances, scheduleDiagnostics_fn, runDiagnostics_fn, createEditor_fn, updateEditorState_fn, fireChange_fn;
+var SpelEditor = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _SpelEditor_instances);
+    this.value = "";
+    this.contextSchema = null;
+    this.placeholder = "Enter SpEL expression...";
+    this.readonly = false;
+    this.disabled = false;
+    this.minHeight = "80px";
+    __privateAdd(this, _editorView, null);
+    __privateAdd(this, _diagnosticCache, []);
+    __privateAdd(this, _diagnosticDebounceTimer, null);
+  }
+  render() {
+    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);
+          border-radius: var(--spel-border-radius, 6px);
+          background: var(--spel-bg, #ffffff);
+        "
+      ></div>
+    `;
+  }
+  firstUpdated() {
+    __privateMethod(this, _SpelEditor_instances, createEditor_fn).call(this);
+  }
+  updated(changed) {
+    if (changed.has("disabled") || changed.has("readonly")) {
+      __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("contextSchema")) {
+      __privateMethod(this, _SpelEditor_instances, scheduleDiagnostics_fn).call(this);
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated && !__privateGet(this, _editorView)) {
+      void this.updateComplete.then(() => {
+        if (!__privateGet(this, _editorView)) {
+          __privateMethod(this, _SpelEditor_instances, createEditor_fn).call(this);
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (__privateGet(this, _diagnosticDebounceTimer)) {
+      clearTimeout(__privateGet(this, _diagnosticDebounceTimer));
+      __privateSet(this, _diagnosticDebounceTimer, null);
+    }
+    __privateGet(this, _editorView)?.destroy();
+    __privateSet(this, _editorView, null);
+  }
+  /**
+   * Get the current expression text from the editor.
+   */
+  getValue() {
+    return __privateGet(this, _editorView)?.state.sliceDoc() ?? this.value;
+  }
+  /**
+   * Set the expression text programmatically.
+   */
+  setValue(value) {
+    this.value = value;
+    if (__privateGet(this, _editorView)) {
+      __privateGet(this, _editorView).dispatch({
+        changes: {
+          from: 0,
+          to: __privateGet(this, _editorView).state.doc.length,
+          insert: value
+        },
+        selection: { anchor: value.length }
+      });
+      __privateMethod(this, _SpelEditor_instances, scheduleDiagnostics_fn).call(this);
+    }
+  }
+  /**
+   * Insert a text snippet at the current cursor position.
+   */
+  insertSnippet(snippet) {
+    if (!__privateGet(this, _editorView)) return;
+    const { from, to } = __privateGet(this, _editorView).state.selection.main;
+    __privateGet(this, _editorView).dispatch({
+      changes: { from, to, insert: snippet },
+      selection: { anchor: from + snippet.length }
+    });
+  }
+  /**
+   * Get the current diagnostics from the debounced validation cache.
+   */
+  validate() {
+    return __privateGet(this, _diagnosticCache);
+  }
+  /**
+   * Format the current expression using SpelFormatter.
+   */
+  format() {
+    if (!__privateGet(this, _editorView)) return;
+    const current = __privateGet(this, _editorView).state.sliceDoc();
+    const formatted = SpelFormatter.format(current);
+    if (formatted && formatted !== current) {
+      __privateGet(this, _editorView).dispatch({
+        changes: {
+          from: 0,
+          to: __privateGet(this, _editorView).state.doc.length,
+          insert: formatted
+        },
+        selection: { anchor: formatted.length }
+      });
+    }
+  }
+  /**
+   * Get the underlying CodeMirror 6 EditorView instance.
+   */
+  getEditorView() {
+    return __privateGet(this, _editorView);
+  }
+};
+_editorView = new WeakMap();
+_diagnosticCache = new WeakMap();
+_diagnosticDebounceTimer = new WeakMap();
+_SpelEditor_instances = new WeakSet();
+/**
+ * Schedule a debounced diagnostic run (300ms).
+ * Avoids redundant computation on rapid typing.
+ */
+scheduleDiagnostics_fn = function() {
+  if (__privateGet(this, _diagnosticDebounceTimer)) {
+    clearTimeout(__privateGet(this, _diagnosticDebounceTimer));
+  }
+  __privateSet(this, _diagnosticDebounceTimer, setTimeout(() => {
+    __privateMethod(this, _SpelEditor_instances, runDiagnostics_fn).call(this);
+    __privateSet(this, _diagnosticDebounceTimer, null);
+  }, 300));
+};
+/**
+ * Populate diagnosticCache by running validation.
+ * Dispatches a `validate` event after diagnostics complete.
+ */
+runDiagnostics_fn = function() {
+  if (!__privateGet(this, _editorView)) return;
+  const expr = __privateGet(this, _editorView).state.sliceDoc();
+  if (expr.trim().length === 0) {
+    __privateSet(this, _diagnosticCache, []);
+    return;
+  }
+  __privateSet(this, _diagnosticCache, SpelDiagnosticEngine2.validate(expr, this.contextSchema ?? void 0));
+  this.dispatchEvent(
+    new CustomEvent("validate", {
+      detail: { diagnostics: __privateGet(this, _diagnosticCache) },
+      bubbles: true,
+      composed: true
+    })
+  );
+};
+createEditor_fn = function() {
+  const extensions = [
+    spelLanguage(),
+    autocompletion({ override: [spelCompletion(() => this.contextSchema)] }),
+    linter(spelLint(() => this.contextSchema)),
+    spelHover(),
+    history(),
+    closeBrackets(),
+    keymap.of([...defaultKeymap, ...historyKeymap]),
+    cmPlaceholder(this.placeholder),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        this.value = update.state.sliceDoc();
+        __privateMethod(this, _SpelEditor_instances, fireChange_fn).call(this);
+        __privateMethod(this, _SpelEditor_instances, scheduleDiagnostics_fn).call(this);
+      }
+    })
+  ];
+  if (this.readonly || this.disabled) {
+    extensions.push(EditorState.readOnly.of(true));
+  }
+  __privateSet(this, _editorView, new EditorView({
+    state: EditorState.create({ doc: this.value, extensions }),
+    parent: this.containerEl
+  }));
+  __privateMethod(this, _SpelEditor_instances, scheduleDiagnostics_fn).call(this);
+};
+updateEditorState_fn = function() {
+  __privateGet(this, _editorView)?.destroy();
+  __privateSet(this, _editorView, null);
+  __privateMethod(this, _SpelEditor_instances, createEditor_fn).call(this);
+};
+fireChange_fn = function() {
+  const expr = this.value.trim();
+  const syntaxDiags = expr.length === 0 ? [] : SpelDiagnosticEngine2.checkSyntax(this.value);
+  const detail = {
+    value: this.value,
+    isValid: syntaxDiags.length === 0
+  };
+  this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
+};
+SpelEditor.styles = EDITOR_STYLES;
+__decorateClass([
+  property({ type: String })
+], SpelEditor.prototype, "value", 2);
+__decorateClass([
+  property({ type: Object, attribute: false })
+], SpelEditor.prototype, "contextSchema", 2);
+__decorateClass([
+  property({ type: String })
+], SpelEditor.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SpelEditor.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SpelEditor.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, attribute: "min-height" })
+], SpelEditor.prototype, "minHeight", 2);
+__decorateClass([
+  query(".cm-container")
+], SpelEditor.prototype, "containerEl", 2);
+SpelEditor = __decorateClass([
+  customElement("spel-editor")
+], SpelEditor);
+export {
+  SpelEditor
+};

package/package.json

@@ -1,10 +1,81 @@
 {
   "name": "@agentix-e/spel-editor",
-  "version": "0.0.0",
-  "description": "OIDC trusted publishing setup package for @agentix-e/spel-editor",
+  "version": "0.1.1",
+  "description": "Web-embeddable Spring Expression Language (SpEL) editor — CodeMirror 6 + spel-ts powered",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write 'src/**/*.ts' 'tests/**/*.ts'",
+    "format:check": "prettier --check 'src/**/*.ts' 'tests/**/*.ts'",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm build && pnpm test && pnpm typecheck"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@agentix-e/spel-ts": "^1.1.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",
+    "lit": "^3.0.0"
+  },
+  "peerDependencies": {
+    "@agentix-e/nl2spel": ">=1.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@agentix-e/nl2spel": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@vitest/coverage-v8": "^3.0.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.9.5",
+    "tsup": "^8.0.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.0.0"
+  },
   "keywords": [
-    "oidc",
-    "trusted-publishing",
-    "setup"
-  ]
+    "spel",
+    "editor",
+    "code-editor",
+    "expression-language",
+    "spring",
+    "codemirror",
+    "web-component"
+  ],
+  "license": "MIT",
+  "author": "AgentiX-E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AgentiX-E/spel-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AgentiX-E/spel-editor/issues"
+  },
+  "homepage": "https://github.com/AgentiX-E/spel-editor#readme",
+  "publishConfig": {
+    "access": "public"
+  }
 }