@particle-academy/fancy-code 0.1.0

package/dist/index.js

@@ -0,0 +1,719 @@
+import { createContext, useState, useCallback, useRef, useMemo, useSyncExternalStore, useEffect, useContext } from 'react';
+import { cn, useControllableState } from '@particle-academy/react-fancy';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { javascript } from '@codemirror/lang-javascript';
+import { html } from '@codemirror/lang-html';
+import { php } from '@codemirror/lang-php';
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, lineNumbers, highlightActiveLineGutter, placeholder, drawSelection, dropCursor, highlightActiveLine, keymap } from '@codemirror/view';
+import { history, defaultKeymap, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { HighlightStyle, foldGutter, indentOnInput, bracketMatching, foldKeymap, syntaxHighlighting } from '@codemirror/language';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
+import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+import { tags } from '@lezer/highlight';
+
+// src/components/CodeEditor/CodeEditor.tsx
+var CodeEditorContext = createContext(null);
+function useCodeEditor() {
+  const ctx = useContext(CodeEditorContext);
+  if (!ctx) {
+    throw new Error("useCodeEditor must be used within a <CodeEditor> component");
+  }
+  return ctx;
+}
+function CodeEditorPanel({ className }) {
+  const { _containerRef } = useCodeEditor();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-fancy-code-panel": "",
+      ref: _containerRef,
+      className: cn("text-sm", className)
+    }
+  );
+}
+CodeEditorPanel.displayName = "CodeEditorPanel";
+function CodeEditorToolbarSeparator() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-fancy-code-toolbar-separator": "",
+      className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700"
+    }
+  );
+}
+CodeEditorToolbarSeparator.displayName = "CodeEditorToolbarSeparator";
+
+// src/languages/registry.ts
+var languageRegistry = /* @__PURE__ */ new Map();
+function registerLanguage(def) {
+  languageRegistry.set(def.name.toLowerCase(), def);
+  if (def.aliases) {
+    for (const alias of def.aliases) {
+      languageRegistry.set(alias.toLowerCase(), def);
+    }
+  }
+}
+function getLanguage(name) {
+  return languageRegistry.get(name.toLowerCase());
+}
+function getRegisteredLanguages() {
+  const seen = /* @__PURE__ */ new Set();
+  const names = [];
+  for (const [, def] of languageRegistry) {
+    if (!seen.has(def)) {
+      seen.add(def);
+      names.push(def.name);
+    }
+  }
+  return names;
+}
+registerLanguage({
+  name: "JavaScript",
+  aliases: ["js", "javascript", "jsx"],
+  support: () => javascript({ jsx: true })
+});
+registerLanguage({
+  name: "TypeScript",
+  aliases: ["ts", "typescript", "tsx"],
+  support: () => javascript({ typescript: true, jsx: true })
+});
+registerLanguage({
+  name: "HTML",
+  aliases: ["html", "htm"],
+  support: () => html()
+});
+registerLanguage({
+  name: "PHP",
+  aliases: ["php"],
+  support: () => php()
+});
+var iconBtnClass = "inline-flex items-center justify-center rounded-md p-1 text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-200";
+function LanguageSelector() {
+  const { language, setLanguage } = useCodeEditor();
+  const languages = getRegisteredLanguages();
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      value: language,
+      onChange: (e) => setLanguage(e.target.value),
+      className: "h-6 rounded border border-zinc-200 bg-transparent px-1.5 text-[11px] text-zinc-600 outline-none transition-colors hover:border-zinc-300 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-600",
+      children: languages.map((lang) => /* @__PURE__ */ jsx("option", { value: lang, children: lang }, lang))
+    }
+  );
+}
+function DefaultToolbarActions() {
+  const { copyToClipboard, toggleWordWrap, wordWrap } = useCodeEditor();
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await copyToClipboard();
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LanguageSelector, {}),
+    /* @__PURE__ */ jsx(CodeEditorToolbarSeparator, {}),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleWordWrap,
+        title: wordWrap ? "Disable Word Wrap" : "Enable Word Wrap",
+        className: cn(iconBtnClass, wordWrap && "text-blue-500 dark:text-blue-400"),
+        children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+          /* @__PURE__ */ jsx("path", { d: "M3 12h15a3 3 0 110 6h-4" }),
+          /* @__PURE__ */ jsx("polyline", { points: "16 16 14 18 16 20" }),
+          /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "10", y2: "18" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: handleCopy, title: "Copy to Clipboard", className: iconBtnClass, children: copied ? /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+    ] }) })
+  ] });
+}
+function CodeEditorToolbar({ children, className }) {
+  const hasChildren = children != null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-fancy-code-toolbar": "",
+      className: cn(
+        "flex items-center gap-0.5 border-b border-zinc-200 px-2 py-1 dark:border-zinc-700",
+        className
+      ),
+      children: hasChildren ? children : /* @__PURE__ */ jsx(DefaultToolbarActions, {})
+    }
+  );
+}
+CodeEditorToolbar.displayName = "CodeEditorToolbar";
+function CodeEditorStatusBar({ children, className }) {
+  const { cursorPosition, selectionLength, language, tabSize } = useCodeEditor();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-fancy-code-statusbar": "",
+      className: cn(
+        "flex items-center gap-3 border-t border-zinc-200 px-3 py-1 text-[11px] text-zinc-500 dark:border-zinc-700 dark:text-zinc-400",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Ln ",
+          cursorPosition.line,
+          ", Col ",
+          cursorPosition.col
+        ] }),
+        selectionLength > 0 && /* @__PURE__ */ jsxs("span", { children: [
+          selectionLength,
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "ml-auto", children: language }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          tabSize,
+          " spaces"
+        ] })
+      ] })
+    }
+  );
+}
+CodeEditorStatusBar.displayName = "CodeEditorStatusBar";
+
+// src/themes/registry.ts
+var themeRegistry = /* @__PURE__ */ new Map();
+function registerTheme(theme) {
+  themeRegistry.set(theme.name.toLowerCase(), theme);
+}
+function getTheme(name) {
+  return themeRegistry.get(name.toLowerCase());
+}
+function getRegisteredThemes() {
+  return Array.from(themeRegistry.keys());
+}
+var editorTheme = EditorView.theme(
+  {
+    "&": {
+      backgroundColor: "#ffffff",
+      color: "#1e1e2e"
+    },
+    ".cm-content": {
+      caretColor: "#3b82f6"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "#3b82f6"
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+      backgroundColor: "#dbeafe"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "#f8fafc"
+    },
+    ".cm-gutters": {
+      backgroundColor: "#f8fafc",
+      color: "#94a3b8",
+      borderRight: "1px solid #e2e8f0"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "#f1f5f9",
+      color: "#475569"
+    },
+    ".cm-foldPlaceholder": {
+      backgroundColor: "#e2e8f0",
+      color: "#64748b",
+      border: "none"
+    },
+    ".cm-tooltip": {
+      backgroundColor: "#ffffff",
+      border: "1px solid #e2e8f0"
+    },
+    ".cm-tooltip .cm-tooltip-arrow:before": {
+      borderTopColor: "#e2e8f0",
+      borderBottomColor: "#e2e8f0"
+    },
+    ".cm-tooltip .cm-tooltip-arrow:after": {
+      borderTopColor: "#ffffff",
+      borderBottomColor: "#ffffff"
+    },
+    ".cm-tooltip-autocomplete": {
+      "& > ul > li[aria-selected]": {
+        backgroundColor: "#dbeafe",
+        color: "#1e40af"
+      }
+    },
+    ".cm-searchMatch": {
+      backgroundColor: "#fef08a",
+      outline: "1px solid #facc15"
+    },
+    ".cm-searchMatch.cm-searchMatch-selected": {
+      backgroundColor: "#bbf7d0",
+      outline: "1px solid #22c55e"
+    },
+    ".cm-selectionMatch": {
+      backgroundColor: "#e0f2fe"
+    },
+    ".cm-matchingBracket, .cm-nonmatchingBracket": {
+      outline: "1px solid #94a3b8"
+    },
+    ".cm-matchingBracket": {
+      backgroundColor: "#e0f2fe"
+    }
+  },
+  { dark: false }
+);
+var highlightStyle = HighlightStyle.define([
+  { tag: tags.keyword, color: "#8b5cf6" },
+  { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: "#1e1e2e" },
+  { tag: [tags.function(tags.variableName), tags.labelName], color: "#2563eb" },
+  { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: "#d97706" },
+  { tag: [tags.definition(tags.name), tags.separator], color: "#1e1e2e" },
+  { tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: "#d97706" },
+  { tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)], color: "#0891b2" },
+  { tag: [tags.meta, tags.comment], color: "#94a3b8", fontStyle: "italic" },
+  { tag: tags.strong, fontWeight: "bold" },
+  { tag: tags.emphasis, fontStyle: "italic" },
+  { tag: tags.strikethrough, textDecoration: "line-through" },
+  { tag: tags.link, color: "#2563eb", textDecoration: "underline" },
+  { tag: tags.heading, fontWeight: "bold", color: "#8b5cf6" },
+  { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "#d97706" },
+  { tag: [tags.processingInstruction, tags.string, tags.inserted], color: "#059669" },
+  { tag: tags.invalid, color: "#ef4444" },
+  { tag: tags.tagName, color: "#dc2626" },
+  { tag: tags.attributeName, color: "#d97706" },
+  { tag: tags.attributeValue, color: "#059669" }
+]);
+registerTheme({
+  name: "light",
+  variant: "light",
+  editorTheme,
+  highlightStyle
+});
+var editorTheme2 = EditorView.theme(
+  {
+    "&": {
+      backgroundColor: "#18181b",
+      color: "#e4e4e7"
+    },
+    ".cm-content": {
+      caretColor: "#60a5fa"
+    },
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "#60a5fa"
+    },
+    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+      backgroundColor: "#1e3a5f"
+    },
+    ".cm-activeLine": {
+      backgroundColor: "#27272a"
+    },
+    ".cm-gutters": {
+      backgroundColor: "#18181b",
+      color: "#52525b",
+      borderRight: "1px solid #27272a"
+    },
+    ".cm-activeLineGutter": {
+      backgroundColor: "#27272a",
+      color: "#a1a1aa"
+    },
+    ".cm-foldPlaceholder": {
+      backgroundColor: "#3f3f46",
+      color: "#a1a1aa",
+      border: "none"
+    },
+    ".cm-tooltip": {
+      backgroundColor: "#27272a",
+      border: "1px solid #3f3f46",
+      color: "#e4e4e7"
+    },
+    ".cm-tooltip .cm-tooltip-arrow:before": {
+      borderTopColor: "#3f3f46",
+      borderBottomColor: "#3f3f46"
+    },
+    ".cm-tooltip .cm-tooltip-arrow:after": {
+      borderTopColor: "#27272a",
+      borderBottomColor: "#27272a"
+    },
+    ".cm-tooltip-autocomplete": {
+      "& > ul > li[aria-selected]": {
+        backgroundColor: "#1e3a5f",
+        color: "#93c5fd"
+      }
+    },
+    ".cm-searchMatch": {
+      backgroundColor: "#854d0e",
+      outline: "1px solid #a16207"
+    },
+    ".cm-searchMatch.cm-searchMatch-selected": {
+      backgroundColor: "#166534",
+      outline: "1px solid #15803d"
+    },
+    ".cm-selectionMatch": {
+      backgroundColor: "#1e3a5f"
+    },
+    ".cm-matchingBracket, .cm-nonmatchingBracket": {
+      outline: "1px solid #71717a"
+    },
+    ".cm-matchingBracket": {
+      backgroundColor: "#3f3f46"
+    }
+  },
+  { dark: true }
+);
+var highlightStyle2 = HighlightStyle.define([
+  { tag: tags.keyword, color: "#c084fc" },
+  { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: "#e4e4e7" },
+  { tag: [tags.function(tags.variableName), tags.labelName], color: "#60a5fa" },
+  { tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)], color: "#fbbf24" },
+  { tag: [tags.definition(tags.name), tags.separator], color: "#e4e4e7" },
+  { tag: [tags.typeName, tags.className, tags.number, tags.changed, tags.annotation, tags.modifier, tags.self, tags.namespace], color: "#fbbf24" },
+  { tag: [tags.operator, tags.operatorKeyword, tags.url, tags.escape, tags.regexp, tags.link, tags.special(tags.string)], color: "#22d3ee" },
+  { tag: [tags.meta, tags.comment], color: "#71717a", fontStyle: "italic" },
+  { tag: tags.strong, fontWeight: "bold" },
+  { tag: tags.emphasis, fontStyle: "italic" },
+  { tag: tags.strikethrough, textDecoration: "line-through" },
+  { tag: tags.link, color: "#60a5fa", textDecoration: "underline" },
+  { tag: tags.heading, fontWeight: "bold", color: "#c084fc" },
+  { tag: [tags.atom, tags.bool, tags.special(tags.variableName)], color: "#fbbf24" },
+  { tag: [tags.processingInstruction, tags.string, tags.inserted], color: "#34d399" },
+  { tag: tags.invalid, color: "#f87171" },
+  { tag: tags.tagName, color: "#f87171" },
+  { tag: tags.attributeName, color: "#fbbf24" },
+  { tag: tags.attributeValue, color: "#34d399" }
+]);
+registerTheme({
+  name: "dark",
+  variant: "dark",
+  editorTheme: editorTheme2,
+  highlightStyle: highlightStyle2
+});
+
+// src/hooks/use-codemirror.ts
+function resolveLanguageExtension(name) {
+  const def = getLanguage(name);
+  if (!def) return [];
+  const result = def.support();
+  if (result instanceof Promise) {
+    return [];
+  }
+  return result;
+}
+function resolveThemeExtensions(name) {
+  const def = getTheme(name);
+  if (!def) {
+    const fallback = getTheme("dark");
+    if (!fallback) return [];
+    return [fallback.editorTheme, syntaxHighlighting(fallback.highlightStyle)];
+  }
+  return [def.editorTheme, syntaxHighlighting(def.highlightStyle)];
+}
+function useCodemirror({
+  containerRef,
+  value,
+  onChange,
+  language,
+  theme,
+  readOnly,
+  lineNumbers: lineNumbers$1,
+  wordWrap,
+  tabSize,
+  placeholder: placeholder$1,
+  minHeight,
+  maxHeight,
+  searchEnabled,
+  additionalExtensions,
+  onCursorChange
+}) {
+  const viewRef = useRef(null);
+  const isExternalUpdate = useRef(false);
+  const onChangeRef = useRef(onChange);
+  const onCursorChangeRef = useRef(onCursorChange);
+  onChangeRef.current = onChange;
+  onCursorChangeRef.current = onCursorChange;
+  const languageComp = useRef(new Compartment());
+  const themeComp = useRef(new Compartment());
+  const lineNumbersComp = useRef(new Compartment());
+  const wrapComp = useRef(new Compartment());
+  const tabSizeComp = useRef(new Compartment());
+  const readOnlyComp = useRef(new Compartment());
+  const placeholderComp = useRef(new Compartment());
+  const heightComp = useRef(new Compartment());
+  function buildHeightExtension(min, max) {
+    const styles = {};
+    if (min) styles.minHeight = `${min}px`;
+    if (max) styles.maxHeight = `${max}px`;
+    if (Object.keys(styles).length === 0) return [];
+    return EditorView.theme({
+      "&": { ...max ? { maxHeight: `${max}px` } : {} },
+      ".cm-scroller": { overflow: "auto", ...styles }
+    });
+  }
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged && !isExternalUpdate.current) {
+        onChangeRef.current?.(update.state.doc.toString());
+      }
+      if (update.selectionSet || update.docChanged) {
+        const pos = update.state.selection.main;
+        const line = update.state.doc.lineAt(pos.head);
+        onCursorChangeRef.current?.({
+          line: line.number,
+          col: pos.head - line.from + 1,
+          selectionLength: Math.abs(pos.to - pos.from)
+        });
+      }
+    });
+    const state = EditorState.create({
+      doc: value,
+      extensions: [
+        // Compartmentalized extensions
+        languageComp.current.of(resolveLanguageExtension(language)),
+        themeComp.current.of(resolveThemeExtensions(theme)),
+        lineNumbersComp.current.of(lineNumbers$1 ? [lineNumbers(), highlightActiveLineGutter()] : []),
+        wrapComp.current.of(wordWrap ? EditorView.lineWrapping : []),
+        tabSizeComp.current.of(EditorState.tabSize.of(tabSize)),
+        readOnlyComp.current.of(EditorState.readOnly.of(readOnly)),
+        placeholderComp.current.of(placeholder$1 ? placeholder(placeholder$1) : []),
+        heightComp.current.of(buildHeightExtension(minHeight, maxHeight)),
+        // Static extensions
+        history(),
+        foldGutter(),
+        drawSelection(),
+        dropCursor(),
+        indentOnInput(),
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        keymap.of([
+          ...closeBracketsKeymap,
+          ...defaultKeymap,
+          ...searchKeymap,
+          ...historyKeymap,
+          ...foldKeymap,
+          ...completionKeymap,
+          indentWithTab
+        ]),
+        updateListener,
+        ...additionalExtensions ?? []
+      ]
+    });
+    const view = new EditorView({ state, parent: container });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [containerRef]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const currentDoc = view.state.doc.toString();
+    if (value !== currentDoc) {
+      isExternalUpdate.current = true;
+      view.dispatch({
+        changes: { from: 0, to: currentDoc.length, insert: value }
+      });
+      isExternalUpdate.current = false;
+    }
+  }, [value]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const def = getLanguage(language);
+    if (!def) {
+      view.dispatch({ effects: languageComp.current.reconfigure([]) });
+      return;
+    }
+    const result = def.support();
+    if (result instanceof Promise) {
+      result.then((ext) => {
+        if (viewRef.current) {
+          viewRef.current.dispatch({ effects: languageComp.current.reconfigure(ext) });
+        }
+      });
+    } else {
+      view.dispatch({ effects: languageComp.current.reconfigure(result) });
+    }
+  }, [language]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({ effects: themeComp.current.reconfigure(resolveThemeExtensions(theme)) });
+  }, [theme]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: lineNumbersComp.current.reconfigure(
+        lineNumbers$1 ? [lineNumbers(), highlightActiveLineGutter()] : []
+      )
+    });
+  }, [lineNumbers$1]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: wrapComp.current.reconfigure(wordWrap ? EditorView.lineWrapping : [])
+    });
+  }, [wordWrap]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: tabSizeComp.current.reconfigure(EditorState.tabSize.of(tabSize))
+    });
+  }, [tabSize]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: readOnlyComp.current.reconfigure(EditorState.readOnly.of(readOnly))
+    });
+  }, [readOnly]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: placeholderComp.current.reconfigure(placeholder$1 ? placeholder(placeholder$1) : [])
+    });
+  }, [placeholder$1]);
+  return { view: viewRef.current };
+}
+function subscribe(callback) {
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", callback);
+  return () => mq.removeEventListener("change", callback);
+}
+function getSnapshot() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useDarkMode() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function CodeEditorRoot({
+  children,
+  className,
+  value: valueProp,
+  defaultValue = "",
+  onChange,
+  language: languageProp = "javascript",
+  onLanguageChange,
+  theme = "auto",
+  readOnly = false,
+  lineNumbers: lineNumbersProp = true,
+  wordWrap: wordWrapProp = false,
+  tabSize: tabSizeProp = 2,
+  placeholder,
+  minHeight,
+  maxHeight,
+  extensions: additionalExtensions
+}) {
+  const [currentValue, setCurrentValue] = useControllableState(valueProp, defaultValue, onChange);
+  const isDark = useDarkMode();
+  const resolvedTheme = theme === "auto" ? isDark ? "dark" : "light" : theme;
+  const [currentLanguage, setCurrentLanguageState] = useState(() => {
+    const def = getLanguage(languageProp);
+    return def?.name ?? languageProp;
+  });
+  const setLanguage = useCallback(
+    (lang) => {
+      const def = getLanguage(lang);
+      const resolved = def?.name ?? lang;
+      setCurrentLanguageState(resolved);
+      onLanguageChange?.(resolved);
+    },
+    [onLanguageChange]
+  );
+  const [showLineNumbers, setShowLineNumbers] = useState(lineNumbersProp);
+  const [isWordWrap, setIsWordWrap] = useState(wordWrapProp);
+  const [cursorPosition, setCursorPosition] = useState({ line: 1, col: 1 });
+  const [selectionLength, setSelectionLength] = useState(0);
+  const containerRef = useRef(null);
+  const { view } = useCodemirror({
+    containerRef,
+    value: currentValue,
+    onChange: setCurrentValue,
+    language: currentLanguage,
+    theme: resolvedTheme,
+    readOnly,
+    lineNumbers: showLineNumbers,
+    wordWrap: isWordWrap,
+    tabSize: tabSizeProp,
+    placeholder,
+    minHeight,
+    maxHeight,
+    searchEnabled: true,
+    additionalExtensions,
+    onCursorChange: ({ line, col, selectionLength: sel }) => {
+      setCursorPosition({ line, col });
+      setSelectionLength(sel);
+    }
+  });
+  const contextValue = useMemo(
+    () => ({
+      view,
+      getValue: () => view?.state.doc.toString() ?? currentValue,
+      getSelection: () => {
+        if (!view) return "";
+        const sel = view.state.selection.main;
+        return view.state.sliceDoc(sel.from, sel.to);
+      },
+      setValue: (v) => setCurrentValue(v),
+      replaceSelection: (text) => {
+        if (!view) return;
+        view.dispatch(view.state.replaceSelection(text));
+      },
+      focus: () => view?.focus(),
+      language: currentLanguage,
+      setLanguage,
+      theme: resolvedTheme,
+      readOnly,
+      lineNumbers: showLineNumbers,
+      wordWrap: isWordWrap,
+      tabSize: tabSizeProp,
+      toggleWordWrap: () => setIsWordWrap((w) => !w),
+      toggleLineNumbers: () => setShowLineNumbers((l) => !l),
+      copyToClipboard: async () => {
+        const text = view?.state.doc.toString() ?? currentValue;
+        await navigator.clipboard.writeText(text);
+      },
+      cursorPosition,
+      selectionLength,
+      _containerRef: containerRef,
+      _minHeight: minHeight,
+      _maxHeight: maxHeight
+    }),
+    [view, currentValue, currentLanguage, setLanguage, resolvedTheme, readOnly, showLineNumbers, isWordWrap, tabSizeProp, cursorPosition, selectionLength, setCurrentValue, minHeight, maxHeight]
+  );
+  return /* @__PURE__ */ jsx(CodeEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-fancy-code-editor": "",
+      className: cn(
+        "overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+        className
+      ),
+      children
+    }
+  ) });
+}
+CodeEditorRoot.displayName = "CodeEditor";
+var ToolbarWithSeparator = Object.assign(CodeEditorToolbar, {
+  Separator: CodeEditorToolbarSeparator
+});
+var CodeEditor = Object.assign(CodeEditorRoot, {
+  Toolbar: ToolbarWithSeparator,
+  Panel: CodeEditorPanel,
+  StatusBar: CodeEditorStatusBar
+});
+
+export { CodeEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, useCodeEditor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map