feat: implement lexicon and record validation with honk

lexicon-validator.html

···
     </div>
     <script src="https://cdn.jsdelivr.net/gh/bigmoves/honk@main/dist/honk.min.js"></script>
     <script>
-      // JavaScript will be added in subsequent tasks
+// =============================================================================
+// STATE
+// =============================================================================
+
+const state = {
+  lexicons: [{ id: 1, value: "" }],
+  nextLexiconId: 2,
+  record: "",
+  nsid: "",
+  result: null
+};
+
+// =============================================================================
+// PLACEHOLDERS
+// =============================================================================
+
+const LEXICON_PLACEHOLDER = `{
+  "lexicon": 1,
+  "id": "com.example.myRecord",
+  "defs": {
+    "main": {
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["status", "createdAt"],
+        "properties": {
+          "status": {
+            "type": "string",
+            "maxLength": 100
+          },
+          "createdAt": {
+            "type": "string",
+            "format": "datetime"
+          }
+        }
+      }
+    }
+  }
+}`;
+
+const RECORD_PLACEHOLDER = `{
+  "status": "Hello world",
+  "createdAt": "2025-01-15T12:00:00Z"
+}`;
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function esc(str) {
+  const d = document.createElement("div");
+  d.textContent = str || "";
+  return d.innerHTML;
+}
+
+function escapeAttr(str) {
+  return (str || "")
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+function unwrapHonkResult(result) {
+  if (typeof result.isOk === "function") {
+    return { ok: result.isOk(), value: result.isOk() ? result.unwrap() : result.unwrapError() };
+  }
+  if ("Ok" in result) {
+    return { ok: true, value: result.Ok };
+  }
+  if ("Error" in result) {
+    return { ok: false, value: result.Error };
+  }
+  return { ok: true, value: result };
+}
+
+function formatHonkError(err) {
+  if (!err) return "Unknown error";
+  if (typeof err === "string") return err;
+  if (err.message) {
+    return err.path ? `${err.message} (at ${err.path})` : err.message;
+  }
+  return JSON.stringify(err, null, 2);
+}
+
+// =============================================================================
+// RENDERING
+// =============================================================================
+
+function renderLexiconsSection() {
+  const section = document.getElementById("lexicons-section");
+
+  const editorsHtml = state.lexicons.map((lex, idx) => `
+    <div class="editor-card" data-lexicon-id="${lex.id}">
+      <div class="editor-header">
+        <span class="editor-label">Lexicon ${idx + 1}</span>
+        <button
+          class="btn btn-danger btn-small"
+          onclick="removeLexicon(${lex.id})"
+          ${state.lexicons.length === 1 ? "disabled" : ""}
+        >Remove</button>
+      </div>
+      <textarea
+        placeholder="${escapeAttr(LEXICON_PLACEHOLDER)}"
+        onchange="updateLexicon(${lex.id}, this.value)"
+        oninput="updateLexicon(${lex.id}, this.value)"
+      >${esc(lex.value)}</textarea>
+    </div>
+  `).join("");
+
+  section.innerHTML = `
+    <div class="section-header">
+      <span class="section-title">Lexicons</span>
+    </div>
+    ${editorsHtml}
+    <div class="button-row">
+      <button class="btn btn-secondary" onclick="addLexicon()">+ Add Lexicon</button>
+      <button class="btn btn-primary" onclick="validateLexicons()">Validate Lexicons</button>
+    </div>
+  `;
+}
+
+function renderRecordSection() {
+  const section = document.getElementById("record-section");
+
+  section.innerHTML = `
+    <div class="section-header">
+      <span class="section-title">Record</span>
+    </div>
+    <div class="nsid-row">
+      <span class="nsid-label">NSID:</span>
+      <input
+        type="text"
+        id="nsid-input"
+        placeholder="com.example.myRecord"
+        value="${escapeAttr(state.nsid)}"
+        oninput="updateNsid(this.value)"
+      />
+    </div>
+    <div class="editor-card">
+      <div class="editor-header">
+        <span class="editor-label">Record Data</span>
+      </div>
+      <textarea
+        id="record-input"
+        placeholder="${escapeAttr(RECORD_PLACEHOLDER)}"
+        onchange="updateRecord(this.value)"
+        oninput="updateRecord(this.value)"
+      >${esc(state.record)}</textarea>
+    </div>
+    <div class="button-row">
+      <button class="btn btn-primary" onclick="validateRecord()">Validate Record</button>
+    </div>
+  `;
+}
+
+function renderResult() {
+  const section = document.getElementById("results-section");
+
+  if (!state.result) {
+    section.innerHTML = "";
+    return;
+  }
+
+  const cls = state.result.success ? "result-success" : "result-error";
+  const icon = state.result.success ? "✓" : "✗";
+
+  section.innerHTML = `
+    <div class="result ${cls}">${icon} ${esc(state.result.message)}</div>
+  `;
+}
+
+// =============================================================================
+// STATE UPDATES
+// =============================================================================
+
+function addLexicon() {
+  state.lexicons.push({ id: state.nextLexiconId++, value: "" });
+  renderLexiconsSection();
+}
+
+function removeLexicon(id) {
+  if (state.lexicons.length <= 1) return;
+  state.lexicons = state.lexicons.filter(l => l.id !== id);
+  renderLexiconsSection();
+}
+
+function updateLexicon(id, value) {
+  const lex = state.lexicons.find(l => l.id === id);
+  if (lex) lex.value = value;
+}
+
+function updateRecord(value) {
+  state.record = value;
+}
+
+function updateNsid(value) {
+  state.nsid = value;
+}
+
+// =============================================================================
+// VALIDATION
+// =============================================================================
+
+function parseLexicons() {
+  const parsed = [];
+  for (let i = 0; i < state.lexicons.length; i++) {
+    const lex = state.lexicons[i];
+    const trimmed = lex.value.trim();
+
+    if (!trimmed) {
+      return { error: `Lexicon ${i + 1}: Empty - please enter a lexicon schema` };
+    }
+
+    try {
+      const obj = JSON.parse(trimmed);
+      if (Array.isArray(obj)) {
+        return { error: `Lexicon ${i + 1}: Expected a single lexicon object, not an array. Use "+ Add Lexicon" for multiple.` };
+      }
+      parsed.push(obj);
+    } catch (e) {
+      return { error: `Lexicon ${i + 1}: Invalid JSON - ${e.message}` };
+    }
+  }
+  return { lexicons: parsed };
+}
+
+function validateLexicons() {
+  state.result = null;
+
+  const parseResult = parseLexicons();
+  if (parseResult.error) {
+    state.result = { success: false, message: parseResult.error };
+    renderResult();
+    return;
+  }
+
+  try {
+    const result = honk.validate(parseResult.lexicons);
+    const unwrapped = unwrapHonkResult(result);
+
+    if (unwrapped.ok) {
+      const count = parseResult.lexicons.length;
+      const noun = count === 1 ? "lexicon" : "lexicons";
+      state.result = { success: true, message: `${count} ${noun} valid` };
+    } else {
+      state.result = { success: false, message: `Validation failed: ${formatHonkError(unwrapped.value)}` };
+    }
+  } catch (e) {
+    state.result = { success: false, message: `Validation error: ${e.message}` };
+  }
+
+  renderResult();
+}
+
+function validateRecord() {
+  state.result = null;
+
+  const nsid = state.nsid.trim();
+  if (!nsid) {
+    state.result = { success: false, message: "NSID is required for record validation" };
+    renderResult();
+    return;
+  }
+
+  if (!honk.is_valid_nsid(nsid)) {
+    state.result = { success: false, message: `Invalid NSID format: "${nsid}"` };
+    renderResult();
+    return;
+  }
+
+  const parseResult = parseLexicons();
+  if (parseResult.error) {
+    state.result = { success: false, message: parseResult.error };
+    renderResult();
+    return;
+  }
+
+  const recordTrimmed = state.record.trim();
+  if (!recordTrimmed) {
+    state.result = { success: false, message: "Record data is required" };
+    renderResult();
+    return;
+  }
+
+  let recordData;
+  try {
+    recordData = JSON.parse(recordTrimmed);
+  } catch (e) {
+    state.result = { success: false, message: `Record: Invalid JSON - ${e.message}` };
+    renderResult();
+    return;
+  }
+
+  try {
+    const result = honk.validate_record(parseResult.lexicons, nsid, recordData);
+    const unwrapped = unwrapHonkResult(result);
+
+    if (unwrapped.ok) {
+      state.result = { success: true, message: `Record valid against ${nsid}` };
+    } else {
+      state.result = { success: false, message: `Record invalid: ${formatHonkError(unwrapped.value)}` };
+    }
+  } catch (e) {
+    state.result = { success: false, message: `Validation error: ${e.message}` };
+  }
+
+  renderResult();
+}
+
+// =============================================================================
+// INIT
+// =============================================================================
+
+function init() {
+  if (typeof honk === "undefined") {
+    document.getElementById("results-section").innerHTML = `
+      <div class="result result-error">✗ Failed to load honk library from CDN. Check your internet connection.</div>
+    `;
+    return;
+  }
+  renderLexiconsSection();
+  renderRecordSection();
+}
+
+window.addEventListener("DOMContentLoaded", init);
     </script>
   </body>
 </html>