@particle-academy/fancy-code 0.8.0 → 0.9.1

package/dist/index.d.cts

@@ -1,34 +1,9 @@
 import * as react from 'react';
 import { RefObject, ReactNode, CSSProperties } from 'react';
-import { DiffAnnotations, LineChangeType } from '@particle-academy/fancy-file-commons';
-export { languageFromFilename } from '@particle-academy/fancy-file-commons';
+import { ThemeColors, DiffAnnotations, LineChangeType, Token, Tokenizer } from '@particle-academy/fancy-file-commons';
+export { ThemeColors, Token, TokenType, Tokenizer, languageFromFilename } from '@particle-academy/fancy-file-commons';
 import { MediaKind, MediaViewerProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
-interface ThemeColors {
-    background: string;
-    foreground: string;
-    gutterBackground: string;
-    gutterForeground: string;
-    gutterBorder: string;
-    activeLineBackground: string;
-    selectionBackground: string;
-    cursorColor: string;
-    diffAdded?: string;
-    diffModified?: string;
-    diffRemoved?: string;
-    keyword: string;
-    string: string;
-    comment: string;
-    number: string;
-    operator: string;
-    function: string;
-    type: string;
-    tag: string;
-    attribute: string;
-    attributeValue: string;
-    punctuation: string;
-    variable: string;
-}
 interface ThemeDefinition {
     /** Unique theme name */
     name: string;
@@ -407,14 +382,6 @@ declare function diffRemovedColor(colors: ThemeColors): string;
  */
 declare function renderMarkdown(markdown: string): string;
 
-type TokenType = "keyword" | "string" | "comment" | "number" | "operator" | "tag" | "attribute" | "attributeValue" | "punctuation" | "function" | "type" | "variable" | "plain";
-interface Token {
-    type: TokenType;
-    start: number;
-    end: number;
-}
-type Tokenizer = (source: string) => Token[];
-
 /**
  * Minimal, dependency-free Markdown tokenizer for editor highlighting. Line-based
  * for block constructs (fences, headings, blockquotes, list markers) plus a few
@@ -481,4 +448,4 @@ interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
  */
 declare function CodeEditorInputTag(props: CodeEditorInputTagProps): react.JSX.Element;
 
-export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type FileKind, FileViewer, type FileViewerProps, type GutterDiffMark, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ResolveFileKindInput, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, diffMarkColor, diffRemovedColor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, gutterDiffMark, hasDeletedAtEnd, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type FileKind, FileViewer, type FileViewerProps, type GutterDiffMark, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ResolveFileKindInput, type ThemeDefinition, diffMarkColor, diffRemovedColor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, gutterDiffMark, hasDeletedAtEnd, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.d.ts

@@ -1,34 +1,9 @@
 import * as react from 'react';
 import { RefObject, ReactNode, CSSProperties } from 'react';
-import { DiffAnnotations, LineChangeType } from '@particle-academy/fancy-file-commons';
-export { languageFromFilename } from '@particle-academy/fancy-file-commons';
+import { ThemeColors, DiffAnnotations, LineChangeType, Token, Tokenizer } from '@particle-academy/fancy-file-commons';
+export { ThemeColors, Token, TokenType, Tokenizer, languageFromFilename } from '@particle-academy/fancy-file-commons';
 import { MediaKind, MediaViewerProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
-interface ThemeColors {
-    background: string;
-    foreground: string;
-    gutterBackground: string;
-    gutterForeground: string;
-    gutterBorder: string;
-    activeLineBackground: string;
-    selectionBackground: string;
-    cursorColor: string;
-    diffAdded?: string;
-    diffModified?: string;
-    diffRemoved?: string;
-    keyword: string;
-    string: string;
-    comment: string;
-    number: string;
-    operator: string;
-    function: string;
-    type: string;
-    tag: string;
-    attribute: string;
-    attributeValue: string;
-    punctuation: string;
-    variable: string;
-}
 interface ThemeDefinition {
     /** Unique theme name */
     name: string;
@@ -407,14 +382,6 @@ declare function diffRemovedColor(colors: ThemeColors): string;
  */
 declare function renderMarkdown(markdown: string): string;
 
-type TokenType = "keyword" | "string" | "comment" | "number" | "operator" | "tag" | "attribute" | "attributeValue" | "punctuation" | "function" | "type" | "variable" | "plain";
-interface Token {
-    type: TokenType;
-    start: number;
-    end: number;
-}
-type Tokenizer = (source: string) => Token[];
-
 /**
  * Minimal, dependency-free Markdown tokenizer for editor highlighting. Line-based
  * for block constructs (fences, headings, blockquotes, list markers) plus a few
@@ -481,4 +448,4 @@ interface CodeEditorInputTagProps extends Omit<InputTagProps, "adapter"> {
  */
 declare function CodeEditorInputTag(props: CodeEditorInputTagProps): react.JSX.Element;
 
-export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type FileKind, FileViewer, type FileViewerProps, type GutterDiffMark, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ResolveFileKindInput, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, diffMarkColor, diffRemovedColor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, gutterDiffMark, hasDeletedAtEnd, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type FileKind, FileViewer, type FileViewerProps, type GutterDiffMark, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ResolveFileKindInput, type ThemeDefinition, diffMarkColor, diffRemovedColor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, gutterDiffMark, hasDeletedAtEnd, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.js

@@ -1,6 +1,6 @@
 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, languageFromFilename } from '@particle-academy/fancy-file-commons';
+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';
 
@@ -42,26 +42,12 @@ function CodeEditorPanel({ className }) {
     _maxHeight,
     _minHeight
   } = useCodeEditor();
-  if (!engine) return null;
-  const {
-    textareaRef,
-    highlightedHtml,
-    lineCount,
-    activeLine,
-    themeColors,
-    handleKeyDown,
-    handleInput,
-    handleScroll,
-    handleSelect,
-    scrollTop,
-    scrollLeft
-  } = engine;
-  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);
+    if (!engine || !lineNumbers) return null;
+    const { themeColors: themeColors2, lineCount: lineCount2, activeLine: activeLine2 } = engine;
+    const removed = diffRemovedColor(themeColors2);
     const lines = [];
-    for (let i = 1; i <= lineCount; i++) {
+    for (let i = 1; i <= lineCount2; i++) {
       const mark = gutterDiffMark(diffAnnotations, i);
       lines.push(
         /* @__PURE__ */ jsxs(
@@ -71,8 +57,8 @@ function CodeEditorPanel({ className }) {
             "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
+              color: i === activeLine2 ? themeColors2.foreground : themeColors2.gutterForeground,
+              backgroundColor: i === activeLine2 ? themeColors2.activeLineBackground : void 0
             },
             className: "pr-3 text-right text-[13px] leading-[1.5] select-none",
             children: [
@@ -87,7 +73,7 @@ function CodeEditorPanel({ className }) {
                     bottom: 0,
                     width: 3,
                     borderRadius: 2,
-                    backgroundColor: diffMarkColor(mark.type, themeColors)
+                    backgroundColor: diffMarkColor(mark.type, themeColors2)
                   }
                 }
               ),
@@ -108,7 +94,7 @@ function CodeEditorPanel({ className }) {
                 }
               ),
               i,
-              i === lineCount && hasDeletedAtEnd(diffAnnotations) && /* @__PURE__ */ jsx(
+              i === lineCount2 && hasDeletedAtEnd(diffAnnotations) && /* @__PURE__ */ jsx(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -132,7 +118,22 @@ function CodeEditorPanel({ className }) {
       );
     }
     return lines;
-  }, [lineNumbers, lineCount, activeLine, themeColors, diffAnnotations]);
+  }, [engine, lineNumbers, diffAnnotations]);
+  if (!engine) return null;
+  const {
+    textareaRef,
+    highlightedHtml,
+    lineCount,
+    activeLine,
+    themeColors,
+    handleKeyDown,
+    handleInput,
+    handleScroll,
+    handleSelect,
+    scrollTop,
+    scrollLeft
+  } = engine;
+  const gutterWidth = lineNumbers ? `${Math.max(String(lineCount).length, 2) * 0.75 + 1.5}em` : "0";
   const containerStyle = {
     backgroundColor: themeColors.background,
     color: themeColors.foreground,
@@ -445,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",
@@ -1111,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 = [];
@@ -1320,112 +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",
-    diffAdded: "#1a7f37",
-    diffModified: "#0969da",
-    diffRemoved: "#cf222e",
-    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",
-    diffAdded: "#3fb950",
-    diffModified: "#4184e4",
-    diffRemoved: "#f85149",
-    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");
@@ -1818,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) {
@@ -1859,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();