@particle-academy/fancy-code 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -1,8 +1,50 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode, RefObject } from 'react';
-import { Extension } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { LanguageSupport, HighlightStyle } from '@codemirror/language';
+import { RefObject, ReactNode } from 'react';
+
+interface ThemeColors {
+    background: string;
+    foreground: string;
+    gutterBackground: string;
+    gutterForeground: string;
+    gutterBorder: string;
+    activeLineBackground: string;
+    selectionBackground: string;
+    cursorColor: 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;
+    /** Whether this is a dark or light theme */
+    variant: "light" | "dark";
+    /** Color definitions */
+    colors: ThemeColors;
+}
+
+interface UseEditorEngineReturn {
+    textareaRef: RefObject<HTMLTextAreaElement | null>;
+    highlightedHtml: string;
+    lineCount: number;
+    activeLine: number;
+    themeColors: ThemeColors;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    handleInput: () => void;
+    handleScroll: () => void;
+    handleSelect: () => void;
+    scrollTop: number;
+    scrollLeft: number;
+}
 
 interface CodeEditorProps {
     children: ReactNode;
@@ -33,12 +75,8 @@ interface CodeEditorProps {
     minHeight?: number;
     /** Maximum height in px (scrolls beyond this) */
     maxHeight?: number;
-    /** Additional CodeMirror extensions */
-    extensions?: Extension[];
 }
 interface CodeEditorContextValue {
-    /** The CodeMirror EditorView (null during SSR or before mount) */
-    view: EditorView | null;
     /** Get the current document text */
     getValue: () => string;
     /** Get the currently selected text */
@@ -76,8 +114,10 @@ interface CodeEditorContextValue {
     };
     /** Length of the current selection (0 if none) */
     selectionLength: number;
-    /** @internal Ref for the CodeMirror mount point */
-    _containerRef: RefObject<HTMLDivElement | null>;
+    /** Placeholder text */
+    placeholder?: string;
+    /** @internal */
+    _engineReturn: UseEditorEngineReturn | null;
     /** @internal */
     _minHeight?: number;
     /** @internal */
@@ -95,7 +135,7 @@ interface CodeEditorStatusBarProps {
     className?: string;
 }
 
-declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorPanel({ className }: CodeEditorPanelProps): react_jsx_runtime.JSX.Element | null;
 declare namespace CodeEditorPanel {
     var displayName: string;
 }
@@ -115,7 +155,7 @@ declare namespace CodeEditorStatusBar {
     var displayName: string;
 }
 
-declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, extensions: additionalExtensions, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
+declare function CodeEditorRoot({ children, className, value: valueProp, defaultValue, onChange, language: languageProp, onLanguageChange, theme, readOnly, lineNumbers: lineNumbersProp, wordWrap: wordWrapProp, tabSize: tabSizeProp, placeholder, minHeight, maxHeight, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -129,32 +169,29 @@ declare const CodeEditor: typeof CodeEditorRoot & {
 
 declare function useCodeEditor(): CodeEditorContextValue;
 
+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[];
+
 interface LanguageDefinition {
     /** Display name shown in UI (e.g., "JavaScript") */
     name: string;
     /** Alternative keys (e.g., ["js", "javascript"]) */
     aliases?: string[];
-    /** Factory returning the CodeMirror LanguageSupport extension */
-    support: () => LanguageSupport | Promise<LanguageSupport>;
+    /** Tokenizer function for syntax highlighting */
+    tokenize: Tokenizer;
 }
 
 declare function registerLanguage(def: LanguageDefinition): void;
 declare function getLanguage(name: string): LanguageDefinition | undefined;
 declare function getRegisteredLanguages(): string[];
 
-interface ThemeDefinition {
-    /** Unique theme name */
-    name: string;
-    /** Whether this is a dark or light theme */
-    variant: "light" | "dark";
-    /** CodeMirror editor theme (gutter, cursor, selection, etc.) */
-    editorTheme: Extension;
-    /** Syntax highlighting color scheme */
-    highlightStyle: HighlightStyle;
-}
-
 declare function registerTheme(theme: ThemeDefinition): void;
 declare function getTheme(name: string): ThemeDefinition | undefined;
 declare function getRegisteredThemes(): string[];
 
-export { CodeEditor, type CodeEditorContextValue, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeDefinition, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+export { CodeEditor, type CodeEditorContextValue, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type LanguageDefinition, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };