Expose tokenizer for web highlighting

site/decodal-site/src/scripts/playground.js

@@ -1,5 +1,5 @@
-import init, { evaluateProject } from '../wasm/decodal_wasm.js';
-import { highlightDecodal } from '../lib/highlight.js';
+import init, { evaluateProject, tokenizeSource } from '../wasm/decodal_wasm.js';
+import { highlightDecodal, highlightDecodalTokens } from '../lib/highlight.js';
 import { playgroundExamples } from './playground-examples.js';
 
 const STORAGE_KEY = 'decodal-playground-project-v1';
@@ -18,6 +18,7 @@ const exampleSelect = document.getElementById('example-select');
 const loadExample = document.getElementById('load-example');
 
 const project = loadProject();
+let wasmReady = false;
 
 for (const example of playgroundExamples) {
   const option = document.createElement('option');
@@ -97,7 +98,18 @@ function setActiveFile(path) {
 }
 
 function updateHighlight() {
-  sourceHighlight.innerHTML = `${highlightDecodal(source.value)}\n`;
+  sourceHighlight.innerHTML = `${highlightSource(source.value)}\n`;
+}
+
+function highlightSource(value) {
+  if (!wasmReady) return highlightDecodal(value);
+  try {
+    const result = JSON.parse(tokenizeSource(value));
+    if (result.ok) return highlightDecodalTokens(value, result.tokens);
+  } catch (_error) {
+    // Fall back to the lightweight JavaScript highlighter.
+  }
+  return highlightDecodal(value);
 }
 
 function syncHighlightScroll() {
@@ -165,6 +177,8 @@ function compareNodes(a, b) {
 
 try {
   await init();
+  wasmReady = true;
+  updateHighlight();
   run.disabled = false;
   status.textContent = '';
   execute();