@terminus-ai/cli 0.0.1

package/bin/dev-ui/highlight.js

@@ -0,0 +1,195 @@
+/**
+ * Dependency-free syntax highlighting for the dev editor.
+ *
+ * A compact port of the studio's approach (components/studio/codeHighlight.tsx)
+ * with the same token classes, so the two surfaces speak one vocabulary:
+ *
+ *   cs-k keyword · cs-s string · cs-c comment · cs-n number
+ *   cs-f call    · cs-t type   · cs-p property · cs-v variable
+ *
+ * Two phases. Containers first — comments and strings, which swallow
+ * everything inside them — then word classification of what is left between.
+ * The output is painted BEHIND a transparent textarea, so a miss can only
+ * mis-colour text; it can never corrupt it.
+ */
+
+/** Above this, highlighting costs more than it teaches. */
+const MAX_HIGHLIGHT_CHARS = 200_000;
+
+const KEYWORDS = {
+  js: "await async break case catch class const continue 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 yield true false null undefined",
+  py: "and as assert async await break class continue def del elif else except finally for from global if import in is lambda none not or pass raise return true false try while with yield self",
+  rs: "as async await break const continue crate dyn else enum extern false fn for if impl in let loop match mod move mut pub ref return self static struct super trait true type unsafe use where while",
+  sh: "case do done elif else esac fi for function if in return then until while export local readonly source echo cd set unset trap exit",
+};
+const TYPEISH = "string number boolean object any void never unknown Array Promise Record Map Set Date JSON Math Object String Number Boolean Error";
+
+function esc(text) {
+  return String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export function languageForPath(filePath) {
+  const name = String(filePath ?? "").toLowerCase();
+  const ext = name.includes(".") ? name.slice(name.lastIndexOf(".") + 1) : "";
+  if (/(^|\/)(agent|readme|prompt|skill)\.md$/.test(name) || ext === "md" || ext === "mdx") return "markdown";
+  if (["js", "jsx", "mjs", "cjs", "ts", "tsx"].includes(ext)) return "js";
+  if (["json", "jsonc"].includes(ext)) return "json";
+  if (["yml", "yaml", "toml", "ini", "env"].includes(ext)) return "yaml";
+  if (ext === "py") return "py";
+  if (ext === "rs") return "rs";
+  if (["sh", "bash", "zsh"].includes(ext)) return "sh";
+  if (name.endsWith(".gitignore") || ext === "gitignore") return "conf";
+  return "plain";
+}
+
+/**
+ * Markdown is prose first: structure, not tokens. The editor paints this layer
+ * under a transparent textarea in a PROPORTIONAL face, so nothing here may
+ * change a glyph's advance — no weight, no italic, no second family, no
+ * padding. Emphasis is colour, a background, or a stroke (`-webkit-text-stroke`
+ * thickens a glyph without moving the caret). The markup characters themselves
+ * step back so the words lead.
+ */
+function inlineMarkdown(text) {
+  let out = esc(text);
+  // Code first: nothing inside backticks is markdown.
+  const codes = [];
+  out = out.replace(/`([^`]+)`/g, (_, body) => {
+    codes.push(`<span class="md-code"><span class="md-mark">\`</span>${body}<span class="md-mark">\`</span></span>`);
+    return `\u0000${codes.length - 1}\u0000`;
+  });
+  out = out.replace(/(\*\*|__)(?=\S)(.+?)(?<=\S)\1/g,
+    '<span class="md-mark">$1</span><span class="md-strong">$2</span><span class="md-mark">$1</span>');
+  out = out.replace(/(^|[^*\w])(\*|_)(?=\S)([^*_]+?)(?<=\S)\2(?![*\w])/g,
+    '$1<span class="md-mark">$2</span><span class="md-em">$3</span><span class="md-mark">$2</span>');
+  out = out.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g,
+    '<span class="md-mark">[</span><span class="md-link">$1</span><span class="md-mark">]($2)</span>');
+  return out.replace(/\u0000(\d+)\u0000/g, (_, index) => codes[Number(index)]);
+}
+
+function markdownLine(line) {
+  const heading = /^(\s{0,3}#{1,6})(\s+)(.*)$/.exec(line);
+  if (heading) {
+    return `<span class="md-mark">${esc(heading[1])}</span>${heading[2]}<span class="md-h">${inlineMarkdown(heading[3])}</span>`;
+  }
+  const quote = /^(\s{0,3}>\s?)(.*)$/.exec(line);
+  if (quote) {
+    return `<span class="md-mark">${esc(quote[1])}</span><span class="md-quote">${inlineMarkdown(quote[2])}</span>`;
+  }
+  if (/^\s{0,3}([-*_])(\s*\1){2,}\s*$/.test(line)) return `<span class="md-mark">${esc(line)}</span>`;
+  const item = /^(\s*)([-*+]|\d+[.)])(\s+)(\[[ xX]\]\s)?(.*)$/.exec(line);
+  if (item) {
+    const box = item[4] ? `<span class="md-mark">${esc(item[4])}</span>` : "";
+    return `${item[1]}<span class="md-bullet">${esc(item[2])}</span>${item[3]}${box}${inlineMarkdown(item[5])}`;
+  }
+  return inlineMarkdown(line);
+}
+
+/** One line of code: containers, then words. */
+function codeLine(line, lang) {
+  const commentAt = lang === "js" || lang === "rs"
+    ? line.indexOf("//")
+    : ["py", "sh", "yaml", "conf"].includes(lang)
+      ? line.indexOf("#")
+      : -1;
+
+  const pieces = [];
+  let rest = line;
+  let trailing = "";
+  // A # inside a string is not a comment; only split when the marker sits
+  // outside every quote we have seen so far on the line.
+  if (commentAt >= 0) {
+    const before = line.slice(0, commentAt);
+    const quotes = (before.match(/["'`]/g) ?? []).length;
+    if (quotes % 2 === 0) {
+      rest = before;
+      trailing = `<span class="cs-c">${esc(line.slice(commentAt))}</span>`;
+    }
+  }
+
+  // Strings are containers: capture them whole, classify only the gaps.
+  const stringPattern = /(['"`])(?:\\.|(?!\1)[^\\])*\1?/g;
+  let index = 0;
+  let match;
+  while ((match = stringPattern.exec(rest)) !== null) {
+    pieces.push(words(rest.slice(index, match.index), lang));
+    // A quoted run followed by a colon is a KEY, not a value. Without this
+    // every JSON line is one flat colour, because a key is a string too.
+    const isKey = /^\s*:/.test(rest.slice(match.index + match[0].length));
+    pieces.push(`<span class="${isKey ? "cs-p" : "cs-s"}">${esc(match[0])}</span>`);
+    index = match.index + match[0].length;
+  }
+  pieces.push(words(rest.slice(index), lang));
+  return pieces.join("") + trailing;
+}
+
+function words(chunk, lang) {
+  if (!chunk) return "";
+  const keywords = new Set((KEYWORDS[lang] ?? "").split(" ").filter(Boolean));
+  const types = new Set(TYPEISH.split(" "));
+  let out = "";
+  const pattern = /([A-Za-z_$][\w$]*)|(\d[\d_.]*)|([^A-Za-z_$\d]+)/g;
+  let match;
+  while ((match = pattern.exec(chunk)) !== null) {
+    const [token, word, number, other] = match;
+    if (number) {
+      out += `<span class="cs-n">${esc(number)}</span>`;
+    } else if (word) {
+      const after = chunk.slice(match.index + word.length);
+      const isKey = lang === "json" || lang === "yaml" ? /^\s*:/.test(after) : false;
+      if (keywords.has(word.toLowerCase()) && keywords.has(word.toLowerCase())) {
+        out += `<span class="cs-k">${esc(word)}</span>`;
+      } else if (isKey) {
+        out += `<span class="cs-p">${esc(word)}</span>`;
+      } else if (types.has(word)) {
+        out += `<span class="cs-t">${esc(word)}</span>`;
+      } else if (/^\s*\(/.test(after)) {
+        out += `<span class="cs-f">${esc(word)}</span>`;
+      } else {
+        out += esc(word);
+      }
+    } else {
+      out += esc(other ?? token);
+    }
+  }
+  return out;
+}
+
+/**
+ * Highlight `text` as `lang`, returning ONE `<span class="hl-line">` per line.
+ * A line element per line is what lets the gutter and the active-line band
+ * agree with the wrapped text without measuring anything.
+ */
+export function highlight(text, lang, { active = -1 } = {}) {
+  const source = String(text ?? "");
+  const lines = source.split("\n");
+  // Each line carries its own number (painted in the margin by CSS) and knows
+  // whether it is the caret's, so numbers and the current-line band follow
+  // soft-wrapped text without measuring anything.
+  const open = (index, extra = "") =>
+    `<span class="hl-line${index === active ? " is-active" : ""}${extra}" data-n="${index + 1}">`;
+  if (source.length > MAX_HIGHLIGHT_CHARS || lang === "plain" || lang === "conf") {
+    return lines.map((line, index) => `${open(index)}${esc(line) || "\u200b"}</span>`).join("");
+  }
+  if (lang === "markdown") {
+    // Fenced blocks span lines, so the fence is tracked across them: the
+    // fence lines and everything between wear a quiet band, untokenized.
+    let fence = null;
+    return lines
+      .map((line, index) => {
+        const marker = /^\s{0,3}(```+|~~~+)/.exec(line);
+        if (fence || marker) {
+          const closing = fence && marker && marker[1][0] === fence[0] && marker[1].length >= fence.length;
+          if (!fence) fence = marker[1];
+          else if (closing) fence = null;
+          const cls = marker ? "md-mark" : "md-fenced";
+          return `${open(index, " md-fence")}<span class="${cls}">${esc(line) || "\u200b"}</span></span>`;
+        }
+        return `${open(index)}${markdownLine(line) || "\u200b"}</span>`;
+      })
+      .join("");
+  }
+  return lines
+    .map((line, index) => `${open(index)}${codeLine(line, lang) || "\u200b"}</span>`)
+    .join("");
+}

package/bin/dev-ui/index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>terminus dev</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&family=Noto+Sans:wght@400;500;600&display=swap">
+<link rel="stylesheet" href="/assets/style.css">
+<script>
+try {
+  document.documentElement.dataset.theme =
+    localStorage.getItem("terminus-dev-theme") === "dark" ? "dark" : "light";
+} catch {
+  document.documentElement.dataset.theme = "light";
+}
+window.__DEV__ = __DEV_BOOT__;
+</script>
+</head>
+<body>
+<div class="water" aria-hidden="true">
+  <div class="water-basin"></div>
+  <div class="water-glow"></div>
+  <div class="water-current water-current-a"></div>
+  <div class="water-current water-current-b"></div>
+  <div class="water-ribbon water-ribbon-a"></div>
+  <div class="water-ribbon water-ribbon-b"></div>
+  <div class="water-grain"></div>
+</div>
+<div class="app" id="app"></div>
+<script type="module" src="/assets/app.js"></script>
+</body>
+</html>