@chrysb/alphaclaw 0.3.2 → 0.3.3

package/lib/public/js/lib/browse-draft-state.js

@@ -0,0 +1,109 @@
+export const kFileDraftStorageKeyPrefix = "alphaclaw.browse.draft.";
+export const kLegacyFileDraftStorageKeyPrefix = "alphaclawBrowseDraft:";
+export const kDraftIndexStorageKey = "alphaclaw.draftIndex";
+export const kDraftIndexChangedEventName = "alphaclaw:browse-draft-index-changed";
+
+const getStorage = (storage) => storage || window.localStorage;
+
+export const getFileDraftStorageKey = (filePath, useLegacyPrefix = false) =>
+  `${useLegacyPrefix ? kLegacyFileDraftStorageKeyPrefix : kFileDraftStorageKeyPrefix}${String(filePath || "").trim()}`;
+
+export const readStoredFileDraft = (filePath, storage) => {
+  try {
+    if (!filePath) return "";
+    const localStorage = getStorage(storage);
+    const draft =
+      localStorage.getItem(getFileDraftStorageKey(filePath)) ||
+      localStorage.getItem(getFileDraftStorageKey(filePath, true));
+    return typeof draft === "string" ? draft : "";
+  } catch {
+    return "";
+  }
+};
+
+export const writeStoredFileDraft = (filePath, content, storage) => {
+  try {
+    if (!filePath) return;
+    const localStorage = getStorage(storage);
+    localStorage.setItem(getFileDraftStorageKey(filePath), String(content || ""));
+  } catch {}
+};
+
+export const clearStoredFileDraft = (filePath, storage) => {
+  try {
+    if (!filePath) return;
+    const localStorage = getStorage(storage);
+    localStorage.removeItem(getFileDraftStorageKey(filePath));
+    localStorage.removeItem(getFileDraftStorageKey(filePath, true));
+  } catch {}
+};
+
+export const readDraftIndex = (storage) => {
+  try {
+    const localStorage = getStorage(storage);
+    const rawValue = localStorage.getItem(kDraftIndexStorageKey);
+    if (!rawValue) return new Set();
+    const parsedValue = JSON.parse(rawValue);
+    if (!Array.isArray(parsedValue)) return new Set();
+    return new Set(
+      parsedValue.map((entry) => String(entry || "").trim()).filter(Boolean),
+    );
+  } catch {
+    return new Set();
+  }
+};
+
+export const writeDraftIndex = (draftPaths, options = {}) => {
+  const { storage, dispatchEvent } = options;
+  try {
+    const localStorage = getStorage(storage);
+    const normalizedPaths = Array.from(draftPaths).sort((left, right) =>
+      left.localeCompare(right),
+    );
+    localStorage.setItem(kDraftIndexStorageKey, JSON.stringify(normalizedPaths));
+    if (dispatchEvent) {
+      dispatchEvent(
+        new CustomEvent(kDraftIndexChangedEventName, {
+          detail: { paths: normalizedPaths },
+        }),
+      );
+    }
+  } catch {}
+};
+
+export const updateDraftIndex = (filePath, hasDraft, options = {}) => {
+  const { storage, dispatchEvent } = options;
+  if (!filePath) return;
+  const normalizedPath = String(filePath || "").trim();
+  if (!normalizedPath) return;
+  const nextDraftPaths = readDraftIndex(storage);
+  if (hasDraft) nextDraftPaths.add(normalizedPath);
+  else nextDraftPaths.delete(normalizedPath);
+  writeDraftIndex(nextDraftPaths, { storage, dispatchEvent });
+};
+
+export const readStoredDraftPaths = (storage) => {
+  try {
+    const localStorage = getStorage(storage);
+    const draftIndex = readDraftIndex(localStorage);
+    if (draftIndex.size > 0) return draftIndex;
+    const nextDraftPaths = new Set();
+    for (let index = 0; index < localStorage.length; index += 1) {
+      const key = localStorage.key(index) || "";
+      if (key.startsWith(kFileDraftStorageKeyPrefix)) {
+        const path = key.slice(kFileDraftStorageKeyPrefix.length).trim();
+        if (path) nextDraftPaths.add(path);
+      }
+      if (key.startsWith(kLegacyFileDraftStorageKeyPrefix)) {
+        const path = key.slice(kLegacyFileDraftStorageKeyPrefix.length).trim();
+        if (path) nextDraftPaths.add(path);
+      }
+    }
+    if (nextDraftPaths.size > 0) {
+      writeDraftIndex(nextDraftPaths, { storage: localStorage });
+    }
+    return nextDraftPaths;
+  } catch {
+    return new Set();
+  }
+};

package/lib/public/js/lib/file-highlighting.js

@@ -0,0 +1,6 @@
+export {
+  formatFrontmatterValue,
+  getFileSyntaxKind,
+  highlightEditorLines,
+  parseFrontmatter,
+} from "./syntax-highlighters/index.js";

package/lib/public/js/lib/file-tree-utils.js

@@ -0,0 +1,12 @@
+export const collectAncestorFolderPaths = (targetPath) => {
+  const normalizedPath = String(targetPath || "")
+    .split("/")
+    .map((segment) => segment.trim())
+    .filter(Boolean);
+  if (normalizedPath.length <= 1) return [];
+  const ancestors = [];
+  for (let index = 0; index < normalizedPath.length - 1; index += 1) {
+    ancestors.push(normalizedPath.slice(0, index + 1).join("/"));
+  }
+  return ancestors;
+};

package/lib/public/js/lib/syntax-highlighters/css.js

@@ -0,0 +1,124 @@
+import { escapeHtml } from "./utils.js";
+
+const kCssNumberRegex =
+  /(^|[^\w.#-])(-?\d+(?:\.\d+)?(?:px|em|rem|vh|vw|%|deg|s|ms)?)(?=$|[^\w-])/g;
+
+const highlightCssTextSegment = (text) => {
+  let content = escapeHtml(text);
+  content = content.replace(/@[a-zA-Z-]+/g, '<span class="hl-keyword">$&</span>');
+  content = content.replace(/#[0-9a-fA-F]{3,8}\b/g, '<span class="hl-number">$&</span>');
+  content = content.replace(kCssNumberRegex, '$1<span class="hl-number">$2</span>');
+  content = content.replace(
+    /(^|[;{\s])([a-zA-Z-]+)(\s*:)/g,
+    '$1<span class="hl-attr">$2</span>$3',
+  );
+  return content;
+};
+
+const findClosingQuote = (source, startIndex, quote) => {
+  let index = startIndex + 1;
+  while (index < source.length) {
+    if (source[index] === "\\" && index + 1 < source.length) {
+      index += 2;
+      continue;
+    }
+    if (source[index] === quote) return index;
+    index += 1;
+  }
+  return -1;
+};
+
+const tokenizeCssLine = (line, inBlockComment) => {
+  const source = String(line || "");
+  const parts = [];
+  let cursor = 0;
+  let nextInBlockComment = inBlockComment;
+
+  while (cursor < source.length) {
+    if (nextInBlockComment) {
+      const blockEnd = source.indexOf("*/", cursor);
+      if (blockEnd === -1) {
+        parts.push({ kind: "comment", value: source.slice(cursor) });
+        return { parts, inBlockComment: true };
+      }
+      parts.push({ kind: "comment", value: source.slice(cursor, blockEnd + 2) });
+      cursor = blockEnd + 2;
+      nextInBlockComment = false;
+      continue;
+    }
+
+    const blockCommentIndex = source.indexOf("/*", cursor);
+    const singleQuoteIndex = source.indexOf("'", cursor);
+    const doubleQuoteIndex = source.indexOf('"', cursor);
+    const indexes = [blockCommentIndex, singleQuoteIndex, doubleQuoteIndex].filter(
+      (index) => index !== -1,
+    );
+
+    if (indexes.length === 0) {
+      parts.push({ kind: "text", value: source.slice(cursor) });
+      break;
+    }
+
+    const nextIndex = Math.min(...indexes);
+    if (nextIndex > cursor) {
+      parts.push({ kind: "text", value: source.slice(cursor, nextIndex) });
+      cursor = nextIndex;
+    }
+
+    if (blockCommentIndex === nextIndex) {
+      const blockEnd = source.indexOf("*/", nextIndex + 2);
+      if (blockEnd === -1) {
+        parts.push({ kind: "comment", value: source.slice(nextIndex) });
+        nextInBlockComment = true;
+        break;
+      }
+      parts.push({ kind: "comment", value: source.slice(nextIndex, blockEnd + 2) });
+      cursor = blockEnd + 2;
+      continue;
+    }
+
+    const quote = source[nextIndex];
+    const quoteEnd = findClosingQuote(source, nextIndex, quote);
+    if (quoteEnd === -1) {
+      parts.push({ kind: "string", value: source.slice(nextIndex) });
+      break;
+    }
+    parts.push({ kind: "string", value: source.slice(nextIndex, quoteEnd + 1) });
+    cursor = quoteEnd + 1;
+  }
+
+  return { parts, inBlockComment: nextInBlockComment };
+};
+
+export const highlightCssLine = (line, state = { inBlockComment: false }) => {
+  const tokens = tokenizeCssLine(line, Boolean(state?.inBlockComment));
+  const html = tokens.parts
+    .map((part) => {
+      if (part.kind === "comment") {
+        return `<span class="hl-comment">${escapeHtml(part.value)}</span>`;
+      }
+      if (part.kind === "string") {
+        return `<span class="hl-string">${escapeHtml(part.value)}</span>`;
+      }
+      return highlightCssTextSegment(part.value);
+    })
+    .join("");
+
+  return {
+    html,
+    state: { inBlockComment: tokens.inBlockComment },
+  };
+};
+
+export const highlightCssContent = (content) => {
+  const lines = String(content || "").split("\n");
+  let state = { inBlockComment: false };
+  return lines.map((line, index) => {
+    const renderedLine = highlightCssLine(line, state);
+    state = renderedLine.state;
+    return {
+      lineNumber: index + 1,
+      html: renderedLine.html,
+    };
+  });
+};

package/lib/public/js/lib/syntax-highlighters/frontmatter.js

@@ -0,0 +1,49 @@
+export const parseFrontmatter = (markdown) => {
+  const value = String(markdown || "");
+  if (!(value.startsWith("---\n") || value === "---")) {
+    return { entries: [], body: value };
+  }
+  const lines = value.split("\n");
+  if (lines[0] !== "---") {
+    return { entries: [], body: value };
+  }
+  const closingFenceIndex = lines.findIndex(
+    (line, index) => index > 0 && line === "---",
+  );
+  if (closingFenceIndex === -1) {
+    return { entries: [], body: value };
+  }
+  const frontmatterLines = lines.slice(1, closingFenceIndex);
+  const bodyLines = lines.slice(closingFenceIndex + 1);
+  const entries = frontmatterLines
+    .map((line) => {
+      const separatorIndex = line.indexOf(":");
+      if (separatorIndex <= 0) return null;
+      const key = line.slice(0, separatorIndex).trim();
+      const rawValue = line.slice(separatorIndex + 1).trim();
+      if (!key) return null;
+      return { key, rawValue };
+    })
+    .filter((entry) => entry !== null);
+  return {
+    entries,
+    body: bodyLines.join("\n").replace(/^\n+/, ""),
+  };
+};
+
+export const formatFrontmatterValue = (rawValue) => {
+  const trimmedValue = String(rawValue || "").trim();
+  if (!trimmedValue) return trimmedValue;
+  if (
+    (trimmedValue.startsWith("{") && trimmedValue.endsWith("}")) ||
+    (trimmedValue.startsWith("[") && trimmedValue.endsWith("]"))
+  ) {
+    try {
+      const parsedValue = JSON.parse(trimmedValue);
+      return JSON.stringify(parsedValue, null, 2);
+    } catch {
+      return trimmedValue;
+    }
+  }
+  return trimmedValue;
+};

package/lib/public/js/lib/syntax-highlighters/html.js

@@ -0,0 +1,209 @@
+import { escapeHtml } from "./utils.js";
+import { highlightCssLine } from "./css.js";
+import { highlightJavaScriptLine } from "./javascript.js";
+
+const highlightHtmlTextSegment = (text) =>
+  escapeHtml(text).replace(
+    /(&[a-zA-Z][a-zA-Z0-9]+;|&#\d+;|&#x[0-9a-fA-F]+;)/g,
+    '<span class="hl-entity">$1</span>',
+  );
+
+const highlightHtmlAttributeValue = (valueWithSpace) => {
+  const leadingWhitespace = valueWithSpace.match(/^\s*/)?.[0] || "";
+  const rawValue = valueWithSpace.slice(leadingWhitespace.length);
+  return `${escapeHtml(leadingWhitespace)}<span class="hl-string">${escapeHtml(rawValue)}</span>`;
+};
+
+const highlightHtmlAttributes = (attributesText) => {
+  const attrRegex = /([:@A-Za-z_][\w:.-]*)(\s*=\s*(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+))?/g;
+  let html = "";
+  let cursor = 0;
+  let match = attrRegex.exec(attributesText);
+
+  while (match) {
+    const fullMatch = match[0];
+    const attrName = match[1];
+    const attrAssignment = match[2] || "";
+    const start = match.index;
+    const end = start + fullMatch.length;
+
+    if (start > cursor) {
+      html += escapeHtml(attributesText.slice(cursor, start));
+    }
+    html += `<span class="hl-attr">${escapeHtml(attrName)}</span>`;
+
+    if (attrAssignment) {
+      const equalsIndex = attrAssignment.indexOf("=");
+      if (equalsIndex !== -1) {
+        const beforeEquals = attrAssignment.slice(0, equalsIndex);
+        const afterEquals = attrAssignment.slice(equalsIndex + 1);
+        html += `${escapeHtml(beforeEquals)}<span class="hl-punc">=</span>${highlightHtmlAttributeValue(afterEquals)}`;
+      } else {
+        html += escapeHtml(attrAssignment);
+      }
+    }
+
+    cursor = end;
+    match = attrRegex.exec(attributesText);
+  }
+
+  if (cursor < attributesText.length) {
+    html += escapeHtml(attributesText.slice(cursor));
+  }
+  return html;
+};
+
+const renderHighlightedHtmlTag = (tagText) => {
+  if (/^<!--[\s\S]*-->$/.test(tagText) || /^<!DOCTYPE/i.test(tagText)) {
+    return `<span class="hl-meta">${escapeHtml(tagText)}</span>`;
+  }
+
+  const tagMatch = tagText.match(/^<\s*(\/?)\s*([A-Za-z][\w:-]*)([\s\S]*?)(\/?)\s*>$/);
+  if (!tagMatch) {
+    return `<span class="hl-tag">${escapeHtml(tagText)}</span>`;
+  }
+
+  const isClosing = tagMatch[1] === "/";
+  const tagName = tagMatch[2];
+  const attributesText = tagMatch[3] || "";
+  const isSelfClosing = tagMatch[4] === "/";
+  const open = isClosing ? "&lt;/" : "&lt;";
+  const attrsHtml = isClosing ? "" : highlightHtmlAttributes(attributesText);
+  const close = isSelfClosing ? "/&gt;" : "&gt;";
+
+  return `<span class="hl-punc">${open}</span><span class="hl-tag">${escapeHtml(tagName)}</span>${attrsHtml}<span class="hl-punc">${close}</span>`;
+};
+
+const renderHighlightedHtmlLine = (line) => {
+  const tokenRegex = /<!--[\s\S]*?-->|<!DOCTYPE[^>]*>|<\/?[A-Za-z][^>]*>/gi;
+  const source = String(line || "");
+  let html = "";
+  let cursor = 0;
+  let match = tokenRegex.exec(source);
+
+  while (match) {
+    const token = match[0];
+    const start = match.index;
+    const end = start + token.length;
+    if (start > cursor) {
+      html += highlightHtmlTextSegment(source.slice(cursor, start));
+    }
+    html += renderHighlightedHtmlTag(token);
+    cursor = end;
+    match = tokenRegex.exec(source);
+  }
+
+  if (cursor < source.length) {
+    html += highlightHtmlTextSegment(source.slice(cursor));
+  }
+  return html;
+};
+
+const findNextTag = (source, tagName) => {
+  const regex = new RegExp(`<\\/?\\s*${tagName}\\b[^>]*>`, "ig");
+  const match = regex.exec(source);
+  if (!match) return null;
+  return {
+    text: match[0],
+    start: match.index,
+    end: match.index + match[0].length,
+    isClosing: /^<\s*\//.test(match[0]),
+  };
+};
+
+const highlightInlineSection = (line, state) => {
+  let html = "";
+  let cursor = 0;
+  let nextMode = state.mode;
+  let nextLanguageState = state.languageState;
+
+  while (cursor < line.length) {
+    if (nextMode === "script") {
+      const closeTag = findNextTag(line.slice(cursor), "script");
+      if (!closeTag || !closeTag.isClosing) {
+        const renderedJs = highlightJavaScriptLine(line.slice(cursor), nextLanguageState);
+        html += renderedJs.html;
+        nextLanguageState = renderedJs.state;
+        cursor = line.length;
+        break;
+      }
+      const absoluteCloseStart = cursor + closeTag.start;
+      const absoluteCloseEnd = cursor + closeTag.end;
+      const jsPart = line.slice(cursor, absoluteCloseStart);
+      const renderedJs = highlightJavaScriptLine(jsPart, nextLanguageState);
+      html += renderedJs.html;
+      html += renderHighlightedHtmlLine(line.slice(absoluteCloseStart, absoluteCloseEnd));
+      nextMode = "html";
+      nextLanguageState = { inBlockComment: false };
+      cursor = absoluteCloseEnd;
+      continue;
+    }
+
+    if (nextMode === "style") {
+      const closeTag = findNextTag(line.slice(cursor), "style");
+      if (!closeTag || !closeTag.isClosing) {
+        const renderedCss = highlightCssLine(line.slice(cursor), nextLanguageState);
+        html += renderedCss.html;
+        nextLanguageState = renderedCss.state;
+        cursor = line.length;
+        break;
+      }
+      const absoluteCloseStart = cursor + closeTag.start;
+      const absoluteCloseEnd = cursor + closeTag.end;
+      const cssPart = line.slice(cursor, absoluteCloseStart);
+      const renderedCss = highlightCssLine(cssPart, nextLanguageState);
+      html += renderedCss.html;
+      html += renderHighlightedHtmlLine(line.slice(absoluteCloseStart, absoluteCloseEnd));
+      nextMode = "html";
+      nextLanguageState = { inBlockComment: false };
+      cursor = absoluteCloseEnd;
+      continue;
+    }
+
+    const remaining = line.slice(cursor);
+    const nextScript = findNextTag(remaining, "script");
+    const nextStyle = findNextTag(remaining, "style");
+    const candidates = [nextScript, nextStyle]
+      .filter((candidate) => candidate && !candidate.isClosing)
+      .sort((left, right) => left.start - right.start);
+
+    if (candidates.length === 0) {
+      html += renderHighlightedHtmlLine(remaining);
+      cursor = line.length;
+      break;
+    }
+
+    const nextTag = candidates[0];
+    const absoluteTagStart = cursor + nextTag.start;
+    const absoluteTagEnd = cursor + nextTag.end;
+    html += renderHighlightedHtmlLine(line.slice(cursor, absoluteTagStart));
+    html += renderHighlightedHtmlLine(line.slice(absoluteTagStart, absoluteTagEnd));
+    nextMode = /<\s*script\b/i.test(nextTag.text) ? "script" : "style";
+    nextLanguageState = { inBlockComment: false };
+    cursor = absoluteTagEnd;
+  }
+
+  return {
+    html,
+    state: {
+      mode: nextMode,
+      languageState: nextLanguageState,
+    },
+  };
+};
+
+export const highlightHtmlContent = (content) => {
+  const lines = String(content || "").split("\n");
+  let state = {
+    mode: "html",
+    languageState: { inBlockComment: false },
+  };
+  return lines.map((line, index) => {
+    const renderedLine = highlightInlineSection(line, state);
+    state = renderedLine.state;
+    return {
+      lineNumber: index + 1,
+      html: renderedLine.html,
+    };
+  });
+};

package/lib/public/js/lib/syntax-highlighters/index.js

@@ -0,0 +1,28 @@
+import { formatFrontmatterValue, parseFrontmatter } from "./frontmatter.js";
+import { highlightCssContent } from "./css.js";
+import { highlightHtmlContent } from "./html.js";
+import { highlightJavaScriptContent } from "./javascript.js";
+import { highlightJsonContent } from "./json.js";
+import { highlightMarkdownContent } from "./markdown.js";
+import { escapeHtml, toLineObjects } from "./utils.js";
+
+export const getFileSyntaxKind = (filePath) => {
+  const normalizedPath = String(filePath || "").toLowerCase();
+  if (/\.(md|markdown|mdx)$/i.test(normalizedPath)) return "markdown";
+  if (/\.(json|jsonl)$/i.test(normalizedPath)) return "json";
+  if (/\.(html|htm)$/i.test(normalizedPath)) return "html";
+  if (/\.(js|mjs|cjs)$/i.test(normalizedPath)) return "javascript";
+  if (/\.(css|scss)$/i.test(normalizedPath)) return "css";
+  return "plain";
+};
+
+export const highlightEditorLines = (content, syntaxKind) => {
+  if (syntaxKind === "markdown") return highlightMarkdownContent(content);
+  if (syntaxKind === "json") return highlightJsonContent(content);
+  if (syntaxKind === "html") return highlightHtmlContent(content);
+  if (syntaxKind === "javascript") return highlightJavaScriptContent(content);
+  if (syntaxKind === "css") return highlightCssContent(content);
+  return toLineObjects(content, (line) => escapeHtml(line));
+};
+
+export { formatFrontmatterValue, parseFrontmatter };

package/lib/public/js/lib/syntax-highlighters/javascript.js

@@ -0,0 +1,134 @@
+import { escapeHtml } from "./utils.js";
+
+const kJavaScriptKeywordsRegex =
+  /\b(await|break|case|catch|class|const|continue|debugger|default|delete|do|else|export|extends|finally|for|from|function|if|import|in|instanceof|let|new|of|return|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/g;
+
+const kNumberRegex =
+  /(^|[^\w.])(-?(?:0x[a-fA-F0-9]+|\d+(?:\.\d+)?(?:[eE][+-]?\d+)?))(?=$|[^\w.])/g;
+
+const highlightJavaScriptTextSegment = (text) => {
+  let content = escapeHtml(text);
+  content = content.replace(kJavaScriptKeywordsRegex, '<span class="hl-keyword">$1</span>');
+  content = content.replace(/\b(true|false)\b/g, '<span class="hl-boolean">$1</span>');
+  content = content.replace(/\b(null|undefined)\b/g, '<span class="hl-null">$1</span>');
+  content = content.replace(kNumberRegex, '$1<span class="hl-number">$2</span>');
+  return content;
+};
+
+const findClosingQuote = (source, startIndex, quote) => {
+  let index = startIndex + 1;
+  while (index < source.length) {
+    if (source[index] === "\\" && index + 1 < source.length) {
+      index += 2;
+      continue;
+    }
+    if (source[index] === quote) return index;
+    index += 1;
+  }
+  return -1;
+};
+
+const tokenizeJavaScriptLine = (line, inBlockComment) => {
+  const source = String(line || "");
+  const parts = [];
+  let cursor = 0;
+  let nextInBlockComment = inBlockComment;
+
+  while (cursor < source.length) {
+    if (nextInBlockComment) {
+      const blockEnd = source.indexOf("*/", cursor);
+      if (blockEnd === -1) {
+        parts.push({ kind: "comment", value: source.slice(cursor) });
+        return { parts, inBlockComment: true };
+      }
+      parts.push({ kind: "comment", value: source.slice(cursor, blockEnd + 2) });
+      cursor = blockEnd + 2;
+      nextInBlockComment = false;
+      continue;
+    }
+
+    const lineCommentIndex = source.indexOf("//", cursor);
+    const blockCommentIndex = source.indexOf("/*", cursor);
+    const singleQuoteIndex = source.indexOf("'", cursor);
+    const doubleQuoteIndex = source.indexOf('"', cursor);
+    const templateQuoteIndex = source.indexOf("`", cursor);
+    const indexes = [
+      lineCommentIndex,
+      blockCommentIndex,
+      singleQuoteIndex,
+      doubleQuoteIndex,
+      templateQuoteIndex,
+    ].filter((index) => index !== -1);
+
+    if (indexes.length === 0) {
+      parts.push({ kind: "text", value: source.slice(cursor) });
+      break;
+    }
+
+    const nextIndex = Math.min(...indexes);
+    if (nextIndex > cursor) {
+      parts.push({ kind: "text", value: source.slice(cursor, nextIndex) });
+      cursor = nextIndex;
+    }
+
+    if (lineCommentIndex === nextIndex) {
+      parts.push({ kind: "comment", value: source.slice(nextIndex) });
+      break;
+    }
+
+    if (blockCommentIndex === nextIndex) {
+      const blockEnd = source.indexOf("*/", nextIndex + 2);
+      if (blockEnd === -1) {
+        parts.push({ kind: "comment", value: source.slice(nextIndex) });
+        nextInBlockComment = true;
+        break;
+      }
+      parts.push({ kind: "comment", value: source.slice(nextIndex, blockEnd + 2) });
+      cursor = blockEnd + 2;
+      continue;
+    }
+
+    const quote = source[nextIndex];
+    const quoteEnd = findClosingQuote(source, nextIndex, quote);
+    if (quoteEnd === -1) {
+      parts.push({ kind: "string", value: source.slice(nextIndex) });
+      break;
+    }
+    parts.push({ kind: "string", value: source.slice(nextIndex, quoteEnd + 1) });
+    cursor = quoteEnd + 1;
+  }
+
+  return { parts, inBlockComment: nextInBlockComment };
+};
+
+export const highlightJavaScriptLine = (line, state = { inBlockComment: false }) => {
+  const tokens = tokenizeJavaScriptLine(line, Boolean(state?.inBlockComment));
+  const html = tokens.parts
+    .map((part) => {
+      if (part.kind === "comment") {
+        return `<span class="hl-comment">${escapeHtml(part.value)}</span>`;
+      }
+      if (part.kind === "string") {
+        return `<span class="hl-string">${escapeHtml(part.value)}</span>`;
+      }
+      return highlightJavaScriptTextSegment(part.value);
+    })
+    .join("");
+  return {
+    html,
+    state: { inBlockComment: tokens.inBlockComment },
+  };
+};
+
+export const highlightJavaScriptContent = (content) => {
+  const lines = String(content || "").split("\n");
+  let state = { inBlockComment: false };
+  return lines.map((line, index) => {
+    const renderedLine = highlightJavaScriptLine(line, state);
+    state = renderedLine.state;
+    return {
+      lineNumber: index + 1,
+      html: renderedLine.html,
+    };
+  });
+};