@particle-academy/fancy-code 0.6.0 → 0.8.0

package/README.md

@@ -44,6 +44,26 @@ function App() {
 
 The component ships with no default border or rounding — add your own via `className` for standalone use, or embed directly into IDE layouts without visual conflicts.
 
+## Diff gutter
+
+Pass `diffBase` (the baseline document) and the line-number column shows live,
+VS Code-style change marks of the **current value vs that baseline** — a green
+bar for added lines, a blue bar for modified lines, and a red wedge where lines
+were deleted. Recomputed as the user types (line-level, cheap — the engine is
+[`@particle-academy/fancy-file-commons`](https://github.com/Particle-Academy/fancy-file-commons),
+the same core `fancy-diff` renders).
+
+```tsx
+<CodeEditor value={code} onChange={setCode} diffBase={savedCode} language="typescript">
+  <CodeEditor.Panel />
+</CodeEditor>
+```
+
+Totals are exposed on the context as `diffStats` (`{ added, modified, removed }`)
+for a status-bar chip or save indicator, and every marked row carries stable
+`data-diff` / `data-diff-deleted-above` handles. Themes may override the colors
+via `diffAdded` / `diffModified` / `diffRemoved`.
+
 ## Unified file viewer
 
 Showing arbitrary files from a tree? `FileViewer` renders text in the

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var reactFancy = require('@particle-academy/react-fancy');
+var fancyFileCommons = require('@particle-academy/fancy-file-commons');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/CodeEditor/CodeEditor.tsx
@@ -13,6 +14,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,
@@ -20,6 +39,7 @@ function CodeEditorPanel({ className }) {
     wordWrap,
     readOnly,
     placeholder,
+    _diffAnnotations: diffAnnotations,
     _maxHeight,
     _minHeight
   } = useCodeEditor();
@@ -40,25 +60,80 @@ function CodeEditorPanel({ className }) {
   const gutterWidth = lineNumbers ? `${Math.max(String(lineCount).length, 2) * 0.75 + 1.5}em` : "0";
   const lineNumberElements = react.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__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -1260,6 +1335,9 @@ registerTheme({
     activeLineBackground: "#f8fafc",
     selectionBackground: "#dbeafe",
     cursorColor: "#3b82f6",
+    diffAdded: "#1a7f37",
+    diffModified: "#0969da",
+    diffRemoved: "#cf222e",
     keyword: "#8b5cf6",
     string: "#059669",
     comment: "#94a3b8",
@@ -1288,6 +1366,9 @@ registerTheme({
     activeLineBackground: "#27272a",
     selectionBackground: "#1e3a5f",
     cursorColor: "#60a5fa",
+    diffAdded: "#3fb950",
+    diffModified: "#4184e4",
+    diffRemoved: "#f85149",
     keyword: "#c084fc",
     string: "#34d399",
     comment: "#71717a",
@@ -1346,6 +1427,19 @@ function highlightCode(source, tokens, colors) {
   return parts.join("");
 }
 
+// src/engine/position.ts
+function lineColumnToOffset(text, line, column = 1) {
+  const lines = text.split("\n");
+  const targetLine = Math.max(1, Math.min(Math.trunc(line) || 1, lines.length));
+  let offset = 0;
+  for (let i = 0; i < targetLine - 1; i++) {
+    offset += lines[i].length + 1;
+  }
+  const lineText = lines[targetLine - 1] ?? "";
+  const col = Math.max(1, Math.min(Math.trunc(column) || 1, lineText.length + 1));
+  return offset + (col - 1);
+}
+
 // src/hooks/use-editor-engine.ts
 var DEFAULT_COLORS = {
   background: "#18181b",
@@ -1460,6 +1554,28 @@ function useEditorEngine({
     setScrollTop(ta.scrollTop);
     setScrollLeft(ta.scrollLeft);
   }, []);
+  const revealLine = react.useCallback(
+    (line, column = 1, opts) => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const offset = lineColumnToOffset(ta.value, line, column);
+      if (opts?.focus) ta.focus();
+      ta.selectionStart = ta.selectionEnd = offset;
+      updateCursorInfo();
+      const panel = ta.closest("[data-fancy-code-panel]");
+      if (!panel) return;
+      const cs = getComputedStyle(ta);
+      const lineHeight = parseFloat(cs.lineHeight) || 19.5;
+      const paddingTop = parseFloat(cs.paddingTop) || 0;
+      const lineIndex = (ta.value.slice(0, offset).match(/\n/g) || []).length;
+      const textareaTopInPanel = ta.getBoundingClientRect().top - panel.getBoundingClientRect().top + panel.scrollTop;
+      const lineTop = textareaTopInPanel + paddingTop + lineIndex * lineHeight;
+      const target = lineTop - panel.clientHeight / 2 + lineHeight / 2;
+      const maxScroll = panel.scrollHeight - panel.clientHeight;
+      panel.scrollTop = Math.max(0, Math.min(target, maxScroll));
+    },
+    [updateCursorInfo]
+  );
   const handleKeyDown = react.useCallback(
     (e) => {
       if (readOnly) {
@@ -1546,6 +1662,7 @@ function useEditorEngine({
     handleInput,
     handleScroll,
     handleSelect,
+    revealLine,
     scrollTop,
     scrollLeft
   };
@@ -1579,9 +1696,16 @@ function CodeEditorRoot({
   tabSize: tabSizeProp = 2,
   placeholder,
   minHeight,
-  maxHeight
+  maxHeight,
+  cursorLine,
+  cursorColumn,
+  diffBase
 }) {
   const [currentValue, setCurrentValue] = reactFancy.useControllableState(valueProp, defaultValue, onChange);
+  const diffAnnotations = react.useMemo(
+    () => diffBase == null ? null : fancyFileCommons.annotateLines(diffBase, currentValue),
+    [diffBase, currentValue]
+  );
   const isDark = useDarkMode();
   const resolvedTheme = theme === "auto" ? isDark ? "dark" : "light" : theme;
   const [currentLanguage, setCurrentLanguageState] = react.useState(() => {
@@ -1615,6 +1739,11 @@ function CodeEditorRoot({
       setSelectionLength(sel);
     }
   });
+  const { revealLine: revealLineImpl } = engineReturn;
+  react.useEffect(() => {
+    if (cursorLine == null) return;
+    revealLineImpl(cursorLine, cursorColumn ?? 1, { focus: false });
+  }, [cursorLine, cursorColumn, revealLineImpl]);
   const contextValue = react.useMemo(
     () => ({
       getValue: () => engineReturn.textareaRef.current?.value ?? currentValue,
@@ -1636,6 +1765,8 @@ function CodeEditorRoot({
         setCurrentValue(ta.value);
       },
       focus: () => engineReturn.textareaRef.current?.focus(),
+      revealLine: (line, column) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
+      setCursor: ({ line, column }) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
       language: currentLanguage,
       setLanguage,
       theme: resolvedTheme,
@@ -1653,11 +1784,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__ */ jsxRuntime.jsx(CodeEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1833,48 +1970,10 @@ 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 = reactFancy.resolveMediaType({ mime, src: filename });
   if (media !== "unknown") return { kind: "media", mediaKind: media };
-  return { kind: "text", language: languageFromFilename(filename) };
+  return { kind: "text", language: fancyFileCommons.languageFromFilename(filename) };
 }
 function FileViewer({
   filename,
@@ -1954,15 +2053,22 @@ function CodeEditorInputTag(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(reactFancy.InputTag, { adapter, ...props });
 }
 
+Object.defineProperty(exports, "languageFromFilename", {
+  enumerable: true,
+  get: function () { return fancyFileCommons.languageFromFilename; }
+});
 exports.CodeEditor = CodeEditor;
 exports.CodeEditorInputTag = CodeEditorInputTag;
 exports.FileViewer = FileViewer;
 exports.MarkdownEditor = MarkdownEditor;
+exports.diffMarkColor = diffMarkColor;
+exports.diffRemovedColor = diffRemovedColor;
 exports.getLanguage = getLanguage;
 exports.getRegisteredLanguages = getRegisteredLanguages;
 exports.getRegisteredThemes = getRegisteredThemes;
 exports.getTheme = getTheme;
-exports.languageFromFilename = languageFromFilename;
+exports.gutterDiffMark = gutterDiffMark;
+exports.hasDeletedAtEnd = hasDeletedAtEnd;
 exports.registerLanguage = registerLanguage;
 exports.registerTheme = registerTheme;
 exports.renderMarkdown = renderMarkdown;