@particle-academy/fancy-code 0.7.0 → 0.9.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,
@@ -371,89 +446,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",
@@ -631,7 +623,7 @@ var tokenizePhp = (source) => {
     if (source[i] === "<" && source[i + 1] === "?") {
       if (i > htmlChunkStart) {
         const htmlChunk = source.slice(htmlChunkStart, i);
-        const htmlTokens = tokenizeHtml(htmlChunk);
+        const htmlTokens = fancyFileCommons.tokenizeHtml(htmlChunk);
         for (const t of htmlTokens) {
           tokens.push({ type: t.type, start: t.start + htmlChunkStart, end: t.end + htmlChunkStart });
         }
@@ -658,7 +650,7 @@ var tokenizePhp = (source) => {
   }
   if (htmlChunkStart < len) {
     const htmlChunk = source.slice(htmlChunkStart);
-    const htmlTokens = tokenizeHtml(htmlChunk);
+    const htmlTokens = fancyFileCommons.tokenizeHtml(htmlChunk);
     for (const t of htmlTokens) {
       tokens.push({ type: t.type, start: t.start + htmlChunkStart, end: t.end + htmlChunkStart });
     }
@@ -1037,11 +1029,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 = [];
@@ -1053,26 +1040,26 @@ function tokenizeMarkdown(source) {
     const len = line.length;
     offset += len + 1;
     if (/^\s*(```|~~~)/.test(line)) {
-      tokens.push(tok("string", base, base + len));
+      tokens.push(fancyFileCommons.tok("string", base, base + len));
       inFence = !inFence;
       continue;
     }
     if (inFence) {
-      tokens.push(tok("string", base, base + len));
+      tokens.push(fancyFileCommons.tok("string", base, base + len));
       continue;
     }
     if (/^#{1,6}\s/.test(line)) {
-      tokens.push(tok("keyword", base, base + len));
+      tokens.push(fancyFileCommons.tok("keyword", base, base + len));
       continue;
     }
     if (/^\s*>/.test(line)) {
-      tokens.push(tok("comment", base, base + len));
+      tokens.push(fancyFileCommons.tok("comment", base, base + len));
       continue;
     }
     const list = line.match(/^(\s*)([-*+]|\d+\.)\s/);
     if (list) {
       const start = base + list[1].length;
-      tokens.push(tok("operator", start, start + list[2].length));
+      tokens.push(fancyFileCommons.tok("operator", start, start + list[2].length));
     }
     pushInline(line, base, tokens);
   }
@@ -1082,7 +1069,7 @@ function pushInline(line, base, out) {
   if (line.length > 5e3) return;
   const spans = [];
   const add = (type, start, end) => {
-    spans.push(tok(type, base + start, base + end));
+    spans.push(fancyFileCommons.tok(type, base + start, base + end));
   };
   let m;
   const code = /`[^`]+`/g;
@@ -1125,7 +1112,7 @@ registerLanguage({
 registerLanguage({
   name: "HTML",
   aliases: ["html", "htm"],
-  tokenize: tokenizeHtml
+  tokenize: fancyFileCommons.tokenizeHtml
 });
 registerLanguage({
   name: "PHP",
@@ -1246,106 +1233,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: fancyFileCommons.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: fancyFileCommons.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");
@@ -1413,7 +1311,7 @@ function useEditorEngine({
       return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
     }
     const tokens = tokenizer(value);
-    return highlightCode(value, tokens, themeColors);
+    return fancyFileCommons.highlightCode(value, tokens, themeColors);
   }, [value, tokenizer, themeColors]);
   const lineCount = react.useMemo(() => {
     let count = 1;
@@ -1617,9 +1515,14 @@ function CodeEditorRoot({
   minHeight,
   maxHeight,
   cursorLine,
-  cursorColumn
+  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(() => {
@@ -1698,11 +1601,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",
@@ -1727,7 +1636,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) {
@@ -1768,10 +1677,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();
@@ -1878,48 +1787,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,
@@ -1999,15 +1870,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;