@nbt-dev/components 0.0.5

package/src/editor/index.ts

@@ -0,0 +1,13 @@
+export { NbtEditor } from "./nbt-editor";
+export type { NbtEditorProps } from "./nbt-editor";
+export { nbtLanguage, nbtLanguageSupport } from "./nbt-language";
+export { NbtLspClient } from "./lsp-client";
+export type {
+  LspPosition,
+  LspRange,
+  LspDiagnostic,
+  LspCompletionItem,
+  LspLocation,
+} from "./lsp-client";
+export { lspExtensions } from "./lsp-extensions";
+export type { GotoDefHandler } from "./lsp-extensions";

package/src/editor/lsp-client.ts

@@ -0,0 +1,227 @@
+// Minimal LSP client over WebSocket for the console's dev-mode nbt_lsp bridge
+// (/_console/dev/lsp). One JSON-RPC message per WS text frame — no
+// Content-Length framing (the bridge's write_proc emits bare JSON).
+//
+// Hand-rolled on purpose: the server speaks ~10 methods with full-text sync,
+// and a library client (codemirror-languageserver) would drag transitive
+// runtime deps into every host app.
+
+export type LspPosition = { line: number; character: number };
+export type LspRange = { start: LspPosition; end: LspPosition };
+export type LspDiagnostic = {
+  range: LspRange;
+  severity?: number; // 1=error 2=warning 3=info 4=hint
+  message: string;
+  source?: string;
+};
+export type LspCompletionItem = {
+  label: string;
+  kind?: number;
+  detail?: string;
+};
+export type LspLocation = { uri: string; range: LspRange };
+
+type Pending = {
+  resolve: (v: unknown) => void;
+  reject: (e: Error) => void;
+};
+
+export class NbtLspClient {
+  private url: string;
+  private rootUri: string | null = null;
+  private ws: WebSocket | null = null;
+  private nextId = 1;
+  private pending = new Map<number, Pending>();
+  private diagHandlers = new Map<string, (d: LspDiagnostic[]) => void>();
+  // Open buffers, kept for replay across reconnects.
+  private docs = new Map<string, { text: string; version: number }>();
+  private ready = false;
+  private queue: string[] = [];
+  private closed = false;
+  private retryMs = 500;
+
+  constructor(url: string) {
+    this.url = url;
+    this.connect();
+  }
+
+  dispose() {
+    this.closed = true;
+    this.ws?.close();
+    this.pending.forEach((p) => p.reject(new Error("lsp client disposed")));
+    this.pending.clear();
+  }
+
+  private connect() {
+    if (this.closed) return;
+    const ws = new WebSocket(this.url);
+    this.ws = ws;
+    ws.onopen = () => {
+      this.retryMs = 500;
+      if (this.rootUri) this.sendInitialize(this.rootUri);
+    };
+    ws.onmessage = (ev) => {
+      if (typeof ev.data !== "string") return;
+      this.onMessage(ev.data);
+    };
+    ws.onclose = () => {
+      this.ready = false;
+      this.ws = null;
+      for (const p of this.pending.values())
+        p.reject(new Error("lsp connection closed"));
+      this.pending.clear();
+      if (!this.closed) {
+        setTimeout(() => this.connect(), this.retryMs);
+        this.retryMs = Math.min(this.retryMs * 2, 10_000);
+      }
+    };
+  }
+
+  // Called once by the host with file://<projectRoot>; also re-sent after every
+  // reconnect, followed by didOpen replays for tracked buffers.
+  initialize(rootUri: string) {
+    this.rootUri = rootUri;
+    if (this.ws?.readyState === WebSocket.OPEN) this.sendInitialize(rootUri);
+  }
+
+  private sendInitialize(rootUri: string) {
+    const id = this.nextId++;
+    this.pending.set(id, {
+      resolve: () => {
+        this.sendRaw({ jsonrpc: "2.0", method: "initialized", params: {} });
+        this.ready = true;
+        for (const [uri, d] of this.docs) {
+          this.sendRaw({
+            jsonrpc: "2.0",
+            method: "textDocument/didOpen",
+            params: {
+              textDocument: {
+                uri,
+                languageId: "nbt",
+                version: d.version,
+                text: d.text,
+              },
+            },
+          });
+        }
+        const q = this.queue;
+        this.queue = [];
+        for (const m of q) this.ws?.send(m);
+      },
+      reject: () => {},
+    });
+    this.ws?.send(
+      JSON.stringify({
+        jsonrpc: "2.0",
+        id,
+        method: "initialize",
+        params: { rootUri },
+      }),
+    );
+  }
+
+  private sendRaw(msg: object) {
+    const s = JSON.stringify(msg);
+    if (this.ready && this.ws?.readyState === WebSocket.OPEN) this.ws.send(s);
+    else this.queue.push(s);
+  }
+
+  private onMessage(data: string) {
+    let msg: any;
+    try {
+      msg = JSON.parse(data);
+    } catch {
+      return;
+    }
+    if (msg.id != null && (msg.result !== undefined || msg.error)) {
+      const p = this.pending.get(msg.id);
+      if (!p) return;
+      this.pending.delete(msg.id);
+      if (msg.error) p.reject(new Error(msg.error.message ?? "lsp error"));
+      else p.resolve(msg.result);
+      return;
+    }
+    if (msg.method === "textDocument/publishDiagnostics") {
+      const uri = msg.params?.uri as string;
+      const handler = this.diagHandlers.get(uri);
+      if (handler) handler((msg.params?.diagnostics ?? []) as LspDiagnostic[]);
+    }
+  }
+
+  request<T>(method: string, params: object): Promise<T> {
+    const id = this.nextId++;
+    const p = new Promise<T>((resolve, reject) => {
+      this.pending.set(id, { resolve: resolve as Pending["resolve"], reject });
+    });
+    this.sendRaw({ jsonrpc: "2.0", id, method, params });
+    return p;
+  }
+
+  onDiagnostics(uri: string, handler: (d: LspDiagnostic[]) => void): () => void {
+    this.diagHandlers.set(uri, handler);
+    return () => {
+      if (this.diagHandlers.get(uri) === handler) this.diagHandlers.delete(uri);
+    };
+  }
+
+  didOpen(uri: string, text: string) {
+    const existing = this.docs.get(uri);
+    if (existing) {
+      // Re-opening an already-tracked buffer (tab switch) — just resync.
+      this.didChange(uri, text);
+      return;
+    }
+    this.docs.set(uri, { text, version: 1 });
+    this.sendRaw({
+      jsonrpc: "2.0",
+      method: "textDocument/didOpen",
+      params: { textDocument: { uri, languageId: "nbt", version: 1, text } },
+    });
+  }
+
+  didChange(uri: string, text: string) {
+    const d = this.docs.get(uri);
+    if (!d) return this.didOpen(uri, text);
+    if (d.text === text) return;
+    d.text = text;
+    d.version += 1;
+    this.sendRaw({
+      jsonrpc: "2.0",
+      method: "textDocument/didChange",
+      params: {
+        textDocument: { uri, version: d.version },
+        contentChanges: [{ text }],
+      },
+    });
+  }
+
+  didClose(uri: string) {
+    if (!this.docs.delete(uri)) return;
+    this.sendRaw({
+      jsonrpc: "2.0",
+      method: "textDocument/didClose",
+      params: { textDocument: { uri } },
+    });
+  }
+
+  completion(uri: string, pos: LspPosition): Promise<{ items: LspCompletionItem[] } | LspCompletionItem[] | null> {
+    return this.request("textDocument/completion", {
+      textDocument: { uri },
+      position: pos,
+    });
+  }
+
+  hover(uri: string, pos: LspPosition): Promise<{ contents?: { value?: string } } | null> {
+    return this.request("textDocument/hover", {
+      textDocument: { uri },
+      position: pos,
+    });
+  }
+
+  definition(uri: string, pos: LspPosition): Promise<LspLocation | LspLocation[] | null> {
+    return this.request("textDocument/definition", {
+      textDocument: { uri },
+      position: pos,
+    });
+  }
+}

package/src/editor/lsp-extensions.ts

@@ -0,0 +1,191 @@
+// CodeMirror extensions wiring an editor buffer to the NbtLspClient:
+// full-text didChange sync (debounced), pushed publishDiagnostics → lint,
+// completion, hover, and F12 go-to-definition.
+
+import { type Extension, type Text } from "@codemirror/state";
+import {
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  hoverTooltip,
+  keymap,
+} from "@codemirror/view";
+import {
+  autocompletion,
+  type CompletionContext,
+  type CompletionResult,
+} from "@codemirror/autocomplete";
+import { setDiagnostics, type Diagnostic } from "@codemirror/lint";
+import {
+  NbtLspClient,
+  type LspDiagnostic,
+  type LspPosition,
+  type LspCompletionItem,
+  type LspLocation,
+} from "./lsp-client";
+
+function toLspPos(doc: Text, offset: number): LspPosition {
+  const line = doc.lineAt(offset);
+  return { line: line.number - 1, character: offset - line.from };
+}
+
+function fromLspPos(doc: Text, pos: LspPosition): number {
+  const lineNo = Math.min(Math.max(pos.line + 1, 1), doc.lines);
+  const line = doc.line(lineNo);
+  return Math.min(line.from + Math.max(pos.character, 0), line.to);
+}
+
+function toCmDiagnostics(doc: Text, diags: LspDiagnostic[]): Diagnostic[] {
+  return diags.map((d) => {
+    const from = fromLspPos(doc, d.range.start);
+    let to = fromLspPos(doc, d.range.end);
+    if (to <= from) to = Math.min(from + 1, doc.length);
+    const severity =
+      d.severity === 2 ? "warning" : d.severity === 3 || d.severity === 4 ? "info" : "error";
+    return { from, to, severity, message: d.message, source: d.source ?? "nbt" };
+  });
+}
+
+// LSP CompletionItemKind → CM completion type (drives the icon).
+function completionType(kind?: number): string {
+  switch (kind) {
+    case 3: return "function";
+    case 5: return "property";
+    case 13: return "enum";
+    case 14: return "keyword";
+    case 22: return "class";
+    default: return "variable";
+  }
+}
+
+export type GotoDefHandler = (uri: string, line: number) => void;
+
+export function lspExtensions(
+  client: NbtLspClient,
+  uri: string,
+  onGotoDefinition?: GotoDefHandler,
+): Extension[] {
+  // Sync + diagnostics plugin. didOpen on create, debounced didChange,
+  // diagnostics pushed by the server are dispatched into the lint state.
+  const syncPlugin = ViewPlugin.fromClass(
+    class {
+      private timer: ReturnType<typeof setTimeout> | null = null;
+      private unsubscribe: () => void;
+
+      constructor(readonly view: EditorView) {
+        client.didOpen(uri, view.state.doc.toString());
+        this.unsubscribe = client.onDiagnostics(uri, (diags) => {
+          const cm = toCmDiagnostics(this.view.state.doc, diags);
+          this.view.dispatch(setDiagnostics(this.view.state, cm));
+        });
+      }
+
+      update(u: ViewUpdate) {
+        if (!u.docChanged) return;
+        if (this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          this.timer = null;
+          client.didChange(uri, this.view.state.doc.toString());
+        }, 200);
+      }
+
+      destroy() {
+        if (this.timer) {
+          clearTimeout(this.timer);
+          client.didChange(uri, this.view.state.doc.toString());
+        }
+        this.unsubscribe();
+      }
+    },
+  );
+
+  const completionSource = async (
+    ctx: CompletionContext,
+  ): Promise<CompletionResult | null> => {
+    const word = ctx.matchBefore(/\w*/);
+    if (!word) return null;
+    if (word.from === word.to && !ctx.explicit) {
+      // Only fire automatically right after a trigger character.
+      const before = ctx.state.doc.sliceString(Math.max(0, ctx.pos - 1), ctx.pos);
+      if (before !== "." && before !== ":" && before !== '"') return null;
+    }
+    // Flush any pending edit so the server completes against the live buffer.
+    client.didChange(uri, ctx.state.doc.toString());
+    let result;
+    try {
+      result = await client.completion(uri, toLspPos(ctx.state.doc, ctx.pos));
+    } catch {
+      return null;
+    }
+    const items: LspCompletionItem[] = Array.isArray(result)
+      ? result
+      : (result?.items ?? []);
+    if (items.length === 0) return null;
+    return {
+      from: word.from,
+      options: items.map((it) => ({
+        label: it.label,
+        type: completionType(it.kind),
+        detail: it.detail,
+      })),
+    };
+  };
+
+  const hover = hoverTooltip(async (view, pos) => {
+    let result;
+    try {
+      result = await client.hover(uri, toLspPos(view.state.doc, pos));
+    } catch {
+      return null;
+    }
+    const value = result?.contents?.value;
+    if (!value) return null;
+    return {
+      pos,
+      create: () => {
+        const dom = document.createElement("pre");
+        dom.className = "nbt-hover-tooltip";
+        dom.style.cssText =
+          "margin:0;padding:6px 8px;max-width:480px;white-space:pre-wrap;font-size:11px;";
+        // Server emits fenced markdown code blocks; strip the fences, show text.
+        dom.textContent = value.replace(/```\w*\n?/g, "");
+        return { dom };
+      },
+    };
+  });
+
+  const gotoDef = keymap.of([
+    {
+      key: "F12",
+      run: (view) => {
+        const pos = toLspPos(view.state.doc, view.state.selection.main.head);
+        client
+          .definition(uri, pos)
+          .then((result) => {
+            const loc: LspLocation | null = Array.isArray(result)
+              ? (result[0] ?? null)
+              : result;
+            if (!loc?.uri) return;
+            if (loc.uri === uri) {
+              const off = fromLspPos(view.state.doc, loc.range.start);
+              view.dispatch({
+                selection: { anchor: off },
+                scrollIntoView: true,
+              });
+            } else {
+              onGotoDefinition?.(loc.uri, loc.range.start.line);
+            }
+          })
+          .catch(() => {});
+        return true;
+      },
+    },
+  ]);
+
+  return [
+    syncPlugin,
+    autocompletion({ override: [completionSource] }),
+    hover,
+    gotoDef,
+  ];
+}

package/src/editor/nbt-editor.tsx

@@ -0,0 +1,142 @@
+// CodeMirror 6 React wrapper for one NBT buffer. Recreated per uri (keyed by
+// the host); owns the EditorView lifecycle, Ctrl+S save, and the LSP wiring.
+
+import React from "react";
+import { EditorState } from "@codemirror/state";
+import {
+  EditorView,
+  keymap,
+  lineNumbers,
+  drawSelection,
+  highlightActiveLine,
+} from "@codemirror/view";
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from "@codemirror/commands";
+import {
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  bracketMatching,
+} from "@codemirror/language";
+import { lintGutter } from "@codemirror/lint";
+import { searchKeymap } from "@codemirror/search";
+import { completionKeymap, closeBrackets } from "@codemirror/autocomplete";
+import { nbtLanguageSupport } from "./nbt-language";
+import { lspExtensions, type GotoDefHandler } from "./lsp-extensions";
+import { NbtLspClient } from "./lsp-client";
+
+// Match the devtools panel chrome via its CSS variables (we render inside the
+// .nimbit-devtools subtree, so these resolve to the scoped theme).
+const nbtTheme = EditorView.theme(
+  {
+    "&": {
+      height: "100%",
+      fontSize: "12px",
+      backgroundColor: "var(--background)",
+      color: "var(--foreground)",
+    },
+    ".cm-content": { fontFamily: "ui-monospace, monospace" },
+    ".cm-gutters": {
+      backgroundColor: "var(--background)",
+      color: "var(--muted-foreground)",
+      borderRight: "1px solid var(--border)",
+    },
+    ".cm-activeLine": { backgroundColor: "color-mix(in srgb, var(--accent) 35%, transparent)" },
+    "&.cm-focused": { outline: "none" },
+    ".cm-tooltip": {
+      backgroundColor: "var(--popover)",
+      color: "var(--popover-foreground)",
+      border: "1px solid var(--border)",
+    },
+  },
+  { dark: true },
+);
+
+export type NbtEditorProps = {
+  uri: string;
+  value: string;
+  readOnly?: boolean;
+  lsp?: NbtLspClient | null;
+  onChange?: (text: string) => void;
+  onSave?: (text: string) => void;
+  onGotoDefinition?: GotoDefHandler;
+};
+
+export const NbtEditor: React.FC<NbtEditorProps> = ({
+  uri,
+  value,
+  readOnly = false,
+  lsp,
+  onChange,
+  onSave,
+  onGotoDefinition,
+}) => {
+  const hostRef = React.useRef<HTMLDivElement | null>(null);
+  const viewRef = React.useRef<EditorView | null>(null);
+
+  // Latest callbacks without recreating the view.
+  const onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  const onSaveRef = React.useRef(onSave);
+  onSaveRef.current = onSave;
+  const onGotoRef = React.useRef(onGotoDefinition);
+  onGotoRef.current = onGotoDefinition;
+
+  React.useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+
+    const extensions = [
+      lineNumbers(),
+      history(),
+      drawSelection(),
+      highlightActiveLine(),
+      bracketMatching(),
+      closeBrackets(),
+      lintGutter(),
+      syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+      nbtLanguageSupport(),
+      nbtTheme,
+      keymap.of([
+        {
+          key: "Mod-s",
+          run: (view) => {
+            onSaveRef.current?.(view.state.doc.toString());
+            return true;
+          },
+        },
+        ...defaultKeymap,
+        ...historyKeymap,
+        ...searchKeymap,
+        ...completionKeymap,
+        indentWithTab,
+      ]),
+      EditorView.updateListener.of((u) => {
+        if (u.docChanged) onChangeRef.current?.(u.state.doc.toString());
+      }),
+      EditorState.readOnly.of(readOnly),
+    ];
+    if (lsp && !readOnly) {
+      extensions.push(
+        lspExtensions(lsp, uri, (defUri, line) => onGotoRef.current?.(defUri, line)),
+      );
+    }
+
+    const view = new EditorView({
+      state: EditorState.create({ doc: value, extensions }),
+      parent: host,
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // Recreate per buffer identity / mode; `value` is only the initial doc.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uri, readOnly, lsp]);
+
+  return <div ref={hostRef} className="h-full min-h-0 overflow-hidden" />;
+};