@particle-academy/fancy-code 0.7.0 → 0.9.0

package/dist/index.js

@@ -1,5 +1,7 @@
-import { createContext, useState, useCallback, useRef, useEffect, useMemo, useSyncExternalStore, useContext } from 'react';
+import { createContext, useMemo, useState, useCallback, useRef, useEffect, useSyncExternalStore, useContext } from 'react';
 import { cn, useControllableState, resolveMediaType, MediaViewer, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
+import { annotateLines, highlightCode, tok, tokenizeHtml, LIGHT_COLORS, DARK_COLORS, languageFromFilename } from '@particle-academy/fancy-file-commons';
+export { languageFromFilename } from '@particle-academy/fancy-file-commons';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/CodeEditor/CodeEditor.tsx
@@ -11,6 +13,24 @@ function useCodeEditor() {
   }
   return ctx;
 }
+
+// src/components/CodeEditor/diff-gutter.ts
+function gutterDiffMark(annotations, line) {
+  if (!annotations) return null;
+  const a = annotations.byLine[line];
+  if (!a) return null;
+  return { type: a.type, deletedAbove: (a.deletedAbove ?? 0) > 0 };
+}
+function hasDeletedAtEnd(annotations) {
+  return (annotations?.deletedAtEnd ?? 0) > 0;
+}
+var FALLBACK = { added: "#3fb950", modified: "#4184e4", removed: "#f85149" };
+function diffMarkColor(type, colors) {
+  return type === "added" ? colors.diffAdded ?? FALLBACK.added : colors.diffModified ?? FALLBACK.modified;
+}
+function diffRemovedColor(colors) {
+  return colors.diffRemoved ?? FALLBACK.removed;
+}
 function CodeEditorPanel({ className }) {
   const {
     _engineReturn: engine,
@@ -18,6 +38,7 @@ function CodeEditorPanel({ className }) {
     wordWrap,
     readOnly,
     placeholder,
+    _diffAnnotations: diffAnnotations,
     _maxHeight,
     _minHeight
   } = useCodeEditor();
@@ -38,25 +59,80 @@ function CodeEditorPanel({ className }) {
   const gutterWidth = lineNumbers ? `${Math.max(String(lineCount).length, 2) * 0.75 + 1.5}em` : "0";
   const lineNumberElements = useMemo(() => {
     if (!lineNumbers) return null;
+    const removed = diffRemovedColor(themeColors);
     const lines = [];
     for (let i = 1; i <= lineCount; i++) {
+      const mark = gutterDiffMark(diffAnnotations, i);
       lines.push(
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           "div",
           {
+            "data-diff": mark?.type,
+            "data-diff-deleted-above": mark?.deletedAbove ? "" : void 0,
             style: {
+              position: "relative",
               color: i === activeLine ? themeColors.foreground : themeColors.gutterForeground,
               backgroundColor: i === activeLine ? themeColors.activeLineBackground : void 0
             },
             className: "pr-3 text-right text-[13px] leading-[1.5] select-none",
-            children: i
+            children: [
+              mark?.type && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: 3,
+                    borderRadius: 2,
+                    backgroundColor: diffMarkColor(mark.type, themeColors)
+                  }
+                }
+              ),
+              mark?.deletedAbove && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    top: -4,
+                    width: 0,
+                    height: 0,
+                    borderLeft: `8px solid ${removed}`,
+                    borderTop: "4px solid transparent",
+                    borderBottom: "4px solid transparent"
+                  }
+                }
+              ),
+              i,
+              i === lineCount && hasDeletedAtEnd(diffAnnotations) && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-diff-deleted-at-end": "",
+                  style: {
+                    position: "absolute",
+                    left: 0,
+                    bottom: -4,
+                    width: 0,
+                    height: 0,
+                    borderLeft: `8px solid ${removed}`,
+                    borderTop: "4px solid transparent",
+                    borderBottom: "4px solid transparent"
+                  }
+                }
+              )
+            ]
           },
           i
         )
       );
     }
     return lines;
-  }, [lineNumbers, lineCount, activeLine, themeColors]);
+  }, [lineNumbers, lineCount, activeLine, themeColors, diffAnnotations]);
   const containerStyle = {
     backgroundColor: themeColors.background,
     color: themeColors.foreground,
@@ -369,89 +445,6 @@ var tokenizeJavaScript = (source) => {
   return tokens;
 };
 
-// src/engine/tokenizers/html.ts
-var tokenizeHtml = (source) => {
-  const tokens = [];
-  const len = source.length;
-  let i = 0;
-  while (i < len) {
-    if (source[i] === "<" && source.slice(i, i + 4) === "<!--") {
-      const pos2 = i;
-      i += 4;
-      while (i < len && source.slice(i, i + 3) !== "-->") i++;
-      i += 3;
-      tokens.push({ type: "comment", start: pos2, end: i });
-      continue;
-    }
-    if (source[i] === "<" && source.slice(i, i + 9).toUpperCase() === "<!DOCTYPE") {
-      const pos2 = i;
-      while (i < len && source[i] !== ">") i++;
-      i++;
-      tokens.push({ type: "keyword", start: pos2, end: i });
-      continue;
-    }
-    if (source[i] === "<") {
-      tokens.push({ type: "punctuation", start: i, end: i + 1 });
-      i++;
-      if (i < len && source[i] === "/") {
-        tokens.push({ type: "punctuation", start: i, end: i + 1 });
-        i++;
-      }
-      if (i < len && /[a-zA-Z]/.test(source[i])) {
-        const pos2 = i;
-        while (i < len && /[a-zA-Z0-9-]/.test(source[i])) i++;
-        tokens.push({ type: "tag", start: pos2, end: i });
-      }
-      while (i < len && source[i] !== ">" && !(source[i] === "/" && source[i + 1] === ">")) {
-        if (source[i] === " " || source[i] === "	" || source[i] === "\n" || source[i] === "\r") {
-          i++;
-          continue;
-        }
-        if (/[a-zA-Z_@:]/.test(source[i])) {
-          const pos2 = i;
-          while (i < len && /[a-zA-Z0-9_\-:.]/.test(source[i])) i++;
-          tokens.push({ type: "attribute", start: pos2, end: i });
-          while (i < len && (source[i] === " " || source[i] === "	")) i++;
-          if (i < len && source[i] === "=") {
-            tokens.push({ type: "operator", start: i, end: i + 1 });
-            i++;
-            while (i < len && (source[i] === " " || source[i] === "	")) i++;
-            if (i < len && (source[i] === '"' || source[i] === "'")) {
-              const quote = source[i];
-              const pos3 = i;
-              i++;
-              while (i < len && source[i] !== quote) i++;
-              i++;
-              tokens.push({ type: "attributeValue", start: pos3, end: i });
-            } else if (i < len && /[^\s>]/.test(source[i])) {
-              const pos3 = i;
-              while (i < len && /[^\s>]/.test(source[i])) i++;
-              tokens.push({ type: "attributeValue", start: pos3, end: i });
-            }
-          }
-          continue;
-        }
-        i++;
-      }
-      if (i < len && source[i] === "/") {
-        tokens.push({ type: "punctuation", start: i, end: i + 1 });
-        i++;
-      }
-      if (i < len && source[i] === ">") {
-        tokens.push({ type: "punctuation", start: i, end: i + 1 });
-        i++;
-      }
-      continue;
-    }
-    const pos = i;
-    while (i < len && source[i] !== "<") i++;
-    if (i > pos) {
-      tokens.push({ type: "plain", start: pos, end: i });
-    }
-  }
-  return tokens;
-};
-
 // src/engine/tokenizers/php.ts
 var PHP_KEYWORDS = /* @__PURE__ */ new Set([
   "abstract",
@@ -1035,11 +1028,6 @@ var tokenizeGo = (source) => {
   return tokens;
 };
 
-// src/engine/tokenizer.ts
-function tok(type, s, e) {
-  return { type, start: s, end: e };
-}
-
 // src/engine/tokenizers/markdown.ts
 function tokenizeMarkdown(source) {
   const tokens = [];
@@ -1244,106 +1232,17 @@ function getTheme(name) {
 function getRegisteredThemes() {
   return Array.from(themeRegistry.keys());
 }
-
-// src/themes/light.ts
 registerTheme({
   name: "light",
   variant: "light",
-  colors: {
-    background: "#ffffff",
-    foreground: "#1e1e2e",
-    gutterBackground: "#f8fafc",
-    gutterForeground: "#94a3b8",
-    gutterBorder: "#e2e8f0",
-    activeLineBackground: "#f8fafc",
-    selectionBackground: "#dbeafe",
-    cursorColor: "#3b82f6",
-    keyword: "#8b5cf6",
-    string: "#059669",
-    comment: "#94a3b8",
-    number: "#d97706",
-    operator: "#0891b2",
-    function: "#2563eb",
-    type: "#d97706",
-    tag: "#dc2626",
-    attribute: "#d97706",
-    attributeValue: "#059669",
-    punctuation: "#64748b",
-    variable: "#1e1e2e"
-  }
+  colors: LIGHT_COLORS
 });
-
-// src/themes/dark.ts
 registerTheme({
   name: "dark",
   variant: "dark",
-  colors: {
-    background: "#18181b",
-    foreground: "#e4e4e7",
-    gutterBackground: "#18181b",
-    gutterForeground: "#52525b",
-    gutterBorder: "#27272a",
-    activeLineBackground: "#27272a",
-    selectionBackground: "#1e3a5f",
-    cursorColor: "#60a5fa",
-    keyword: "#c084fc",
-    string: "#34d399",
-    comment: "#71717a",
-    number: "#fbbf24",
-    operator: "#22d3ee",
-    function: "#60a5fa",
-    type: "#fbbf24",
-    tag: "#f87171",
-    attribute: "#fbbf24",
-    attributeValue: "#34d399",
-    punctuation: "#a1a1aa",
-    variable: "#e4e4e7"
-  }
+  colors: DARK_COLORS
 });
 
-// src/engine/highlight.ts
-function escapeHtml(text) {
-  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-var COLOR_RE = /^(#[0-9a-fA-F]{3,8}|(?:rgb|rgba|hsl|hsla)\([\d\s,.%/-]+\)|[a-zA-Z]+)$/;
-function safeColor(value) {
-  return typeof value === "string" && COLOR_RE.test(value.trim()) ? value.trim() : "inherit";
-}
-function highlightCode(source, tokens, colors) {
-  if (tokens.length === 0) return escapeHtml(source);
-  const colorMap = {
-    keyword: colors.keyword,
-    string: colors.string,
-    comment: colors.comment,
-    number: colors.number,
-    operator: colors.operator,
-    function: colors.function,
-    type: colors.type,
-    tag: colors.tag,
-    attribute: colors.attribute,
-    attributeValue: colors.attributeValue,
-    punctuation: colors.punctuation,
-    variable: colors.variable,
-    plain: colors.foreground
-  };
-  const parts = [];
-  let pos = 0;
-  for (const token of tokens) {
-    if (token.start > pos) {
-      parts.push(escapeHtml(source.slice(pos, token.start)));
-    }
-    const text = escapeHtml(source.slice(token.start, token.end));
-    const color = safeColor(colorMap[token.type]);
-    const style = token.type === "comment" ? `color:${color};font-style:italic` : `color:${color}`;
-    parts.push(`<span style="${style}">${text}</span>`);
-    pos = token.end;
-  }
-  if (pos < source.length) {
-    parts.push(escapeHtml(source.slice(pos)));
-  }
-  return parts.join("");
-}
-
 // src/engine/position.ts
 function lineColumnToOffset(text, line, column = 1) {
   const lines = text.split("\n");
@@ -1615,9 +1514,14 @@ function CodeEditorRoot({
   minHeight,
   maxHeight,
   cursorLine,
-  cursorColumn
+  cursorColumn,
+  diffBase
 }) {
   const [currentValue, setCurrentValue] = useControllableState(valueProp, defaultValue, onChange);
+  const diffAnnotations = useMemo(
+    () => diffBase == null ? null : annotateLines(diffBase, currentValue),
+    [diffBase, currentValue]
+  );
   const isDark = useDarkMode();
   const resolvedTheme = theme === "auto" ? isDark ? "dark" : "light" : theme;
   const [currentLanguage, setCurrentLanguageState] = useState(() => {
@@ -1696,11 +1600,17 @@ function CodeEditorRoot({
       selectionLength,
       textareaRef: engineReturn.textareaRef,
       placeholder,
+      diffStats: diffAnnotations ? {
+        added: diffAnnotations.added,
+        modified: diffAnnotations.modified,
+        removed: diffAnnotations.removed
+      } : null,
+      _diffAnnotations: diffAnnotations,
       _engineReturn: engineReturn,
       _minHeight: minHeight,
       _maxHeight: maxHeight
     }),
-    [engineReturn, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, placeholder, minHeight, maxHeight]
+    [engineReturn, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, placeholder, diffAnnotations, minHeight, maxHeight]
   );
   return /* @__PURE__ */ jsx(CodeEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "div",
@@ -1725,7 +1635,7 @@ var CodeEditor = Object.assign(CodeEditorRoot, {
 });
 
 // src/engine/markdown-render.ts
-function escapeHtml2(s) {
+function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function escapeAttr(s) {
@@ -1766,10 +1676,10 @@ function renderMarkdown(markdown) {
         i++;
       }
       i++;
-      out.push(`<pre><code${lang ? ` class="language-${escapeAttr(escapeHtml2(lang))}"` : ""}>${escapeHtml2(body.join("\n"))}</code></pre>`);
+      out.push(`<pre><code${lang ? ` class="language-${escapeAttr(escapeHtml(lang))}"` : ""}>${escapeHtml(body.join("\n"))}</code></pre>`);
       continue;
     }
-    const esc = escapeHtml2(line);
+    const esc = escapeHtml(line);
     if (/^\s*$/.test(line)) {
       flushPara();
       closeList();
@@ -1876,44 +1786,6 @@ function MarkdownEditor({
   );
 }
 MarkdownEditor.displayName = "MarkdownEditor";
-var EXT_LANGUAGE = {
-  js: "javascript",
-  mjs: "javascript",
-  cjs: "javascript",
-  jsx: "javascript",
-  json: "javascript",
-  // the JS tokenizer highlights JSON acceptably
-  jsonc: "javascript",
-  ts: "typescript",
-  mts: "typescript",
-  cts: "typescript",
-  tsx: "typescript",
-  html: "html",
-  htm: "html",
-  xml: "html",
-  xhtml: "html",
-  vue: "html",
-  php: "php",
-  phtml: "php",
-  py: "python",
-  pyw: "python",
-  go: "go",
-  md: "markdown",
-  markdown: "markdown",
-  mkd: "markdown",
-  mdx: "markdown"
-};
-function basename(filename) {
-  return filename.split(/[?#]/, 1)[0].split(/[\\/]/).pop() ?? "";
-}
-function languageFromFilename(filename) {
-  if (!filename) return "plaintext";
-  const seg = basename(filename);
-  const dot = seg.lastIndexOf(".");
-  if (dot <= 0) return "plaintext";
-  const ext = seg.slice(dot + 1).toLowerCase();
-  return EXT_LANGUAGE[ext] ?? "plaintext";
-}
 function resolveFileKind({ filename, mime }) {
   const media = resolveMediaType({ mime, src: filename });
   if (media !== "unknown") return { kind: "media", mediaKind: media };
@@ -1997,6 +1869,6 @@ function CodeEditorInputTag(props) {
   return /* @__PURE__ */ jsx(InputTag, { adapter, ...props });
 }
 
-export { CodeEditor, CodeEditorInputTag, FileViewer, MarkdownEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, languageFromFilename, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
+export { CodeEditor, CodeEditorInputTag, FileViewer, MarkdownEditor, diffMarkColor, diffRemovedColor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, gutterDiffMark, hasDeletedAtEnd, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map