@particle-academy/fancy-code 0.1.0

package/dist/index.cjs

@@ -0,0 +1,728 @@
+'use strict';
+
+var react = require('react');
+var reactFancy = require('@particle-academy/react-fancy');
+var jsxRuntime = require('react/jsx-runtime');
+var langJavascript = require('@codemirror/lang-javascript');
+var langHtml = require('@codemirror/lang-html');
+var langPhp = require('@codemirror/lang-php');
+var state = require('@codemirror/state');
+var view = require('@codemirror/view');
+var commands = require('@codemirror/commands');
+var language = require('@codemirror/language');
+var search = require('@codemirror/search');
+var autocomplete = require('@codemirror/autocomplete');
+var highlight = require('@lezer/highlight');
+
+// src/components/CodeEditor/CodeEditor.tsx
+var CodeEditorContext = react.createContext(null);
+function useCodeEditor() {
+  const ctx = react.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-fancy-code-panel": "",
+      ref: _containerRef,
+      className: reactFancy.cn("text-sm", className)
+    }
+  );
+}
+CodeEditorPanel.displayName = "CodeEditorPanel";
+function CodeEditorToolbarSeparator() {
+  return /* @__PURE__ */ jsxRuntime.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: () => langJavascript.javascript({ jsx: true })
+});
+registerLanguage({
+  name: "TypeScript",
+  aliases: ["ts", "typescript", "tsx"],
+  support: () => langJavascript.javascript({ typescript: true, jsx: true })
+});
+registerLanguage({
+  name: "HTML",
+  aliases: ["html", "htm"],
+  support: () => langHtml.html()
+});
+registerLanguage({
+  name: "PHP",
+  aliases: ["php"],
+  support: () => langPhp.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: lang, children: lang }, lang))
+    }
+  );
+}
+function DefaultToolbarActions() {
+  const { copyToClipboard, toggleWordWrap, wordWrap } = useCodeEditor();
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = async () => {
+    await copyToClipboard();
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeEditorToolbarSeparator, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: toggleWordWrap,
+        title: wordWrap ? "Disable Word Wrap" : "Enable Word Wrap",
+        className: reactFancy.cn(iconBtnClass, wordWrap && "text-blue-500 dark:text-blue-400"),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12h15a3 3 0 110 6h-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "16 16 14 18 16 20" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "18", x2: "10", y2: "18" })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleCopy, title: "Copy to Clipboard", className: iconBtnClass, children: copied ? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-fancy-code-toolbar": "",
+      className: reactFancy.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__ */ jsxRuntime.jsx(DefaultToolbarActions, {})
+    }
+  );
+}
+CodeEditorToolbar.displayName = "CodeEditorToolbar";
+function CodeEditorStatusBar({ children, className }) {
+  const { cursorPosition, selectionLength, language, tabSize } = useCodeEditor();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-fancy-code-statusbar": "",
+      className: reactFancy.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Ln ",
+          cursorPosition.line,
+          ", Col ",
+          cursorPosition.col
+        ] }),
+        selectionLength > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          selectionLength,
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: language }),
+        /* @__PURE__ */ jsxRuntime.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 = view.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 = language.HighlightStyle.define([
+  { tag: highlight.tags.keyword, color: "#8b5cf6" },
+  { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: "#1e1e2e" },
+  { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: "#2563eb" },
+  { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: "#d97706" },
+  { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: "#1e1e2e" },
+  { tag: [highlight.tags.typeName, highlight.tags.className, highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: "#d97706" },
+  { tag: [highlight.tags.operator, highlight.tags.operatorKeyword, highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link, highlight.tags.special(highlight.tags.string)], color: "#0891b2" },
+  { tag: [highlight.tags.meta, highlight.tags.comment], color: "#94a3b8", fontStyle: "italic" },
+  { tag: highlight.tags.strong, fontWeight: "bold" },
+  { tag: highlight.tags.emphasis, fontStyle: "italic" },
+  { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
+  { tag: highlight.tags.link, color: "#2563eb", textDecoration: "underline" },
+  { tag: highlight.tags.heading, fontWeight: "bold", color: "#8b5cf6" },
+  { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "#d97706" },
+  { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted], color: "#059669" },
+  { tag: highlight.tags.invalid, color: "#ef4444" },
+  { tag: highlight.tags.tagName, color: "#dc2626" },
+  { tag: highlight.tags.attributeName, color: "#d97706" },
+  { tag: highlight.tags.attributeValue, color: "#059669" }
+]);
+registerTheme({
+  name: "light",
+  variant: "light",
+  editorTheme,
+  highlightStyle
+});
+var editorTheme2 = view.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 = language.HighlightStyle.define([
+  { tag: highlight.tags.keyword, color: "#c084fc" },
+  { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: "#e4e4e7" },
+  { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: "#60a5fa" },
+  { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: "#fbbf24" },
+  { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: "#e4e4e7" },
+  { tag: [highlight.tags.typeName, highlight.tags.className, highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], color: "#fbbf24" },
+  { tag: [highlight.tags.operator, highlight.tags.operatorKeyword, highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link, highlight.tags.special(highlight.tags.string)], color: "#22d3ee" },
+  { tag: [highlight.tags.meta, highlight.tags.comment], color: "#71717a", fontStyle: "italic" },
+  { tag: highlight.tags.strong, fontWeight: "bold" },
+  { tag: highlight.tags.emphasis, fontStyle: "italic" },
+  { tag: highlight.tags.strikethrough, textDecoration: "line-through" },
+  { tag: highlight.tags.link, color: "#60a5fa", textDecoration: "underline" },
+  { tag: highlight.tags.heading, fontWeight: "bold", color: "#c084fc" },
+  { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: "#fbbf24" },
+  { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted], color: "#34d399" },
+  { tag: highlight.tags.invalid, color: "#f87171" },
+  { tag: highlight.tags.tagName, color: "#f87171" },
+  { tag: highlight.tags.attributeName, color: "#fbbf24" },
+  { tag: highlight.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, language.syntaxHighlighting(fallback.highlightStyle)];
+  }
+  return [def.editorTheme, language.syntaxHighlighting(def.highlightStyle)];
+}
+function useCodemirror({
+  containerRef,
+  value,
+  onChange,
+  language: language$1,
+  theme,
+  readOnly,
+  lineNumbers,
+  wordWrap,
+  tabSize,
+  placeholder,
+  minHeight,
+  maxHeight,
+  searchEnabled,
+  additionalExtensions,
+  onCursorChange
+}) {
+  const viewRef = react.useRef(null);
+  const isExternalUpdate = react.useRef(false);
+  const onChangeRef = react.useRef(onChange);
+  const onCursorChangeRef = react.useRef(onCursorChange);
+  onChangeRef.current = onChange;
+  onCursorChangeRef.current = onCursorChange;
+  const languageComp = react.useRef(new state.Compartment());
+  const themeComp = react.useRef(new state.Compartment());
+  const lineNumbersComp = react.useRef(new state.Compartment());
+  const wrapComp = react.useRef(new state.Compartment());
+  const tabSizeComp = react.useRef(new state.Compartment());
+  const readOnlyComp = react.useRef(new state.Compartment());
+  const placeholderComp = react.useRef(new state.Compartment());
+  const heightComp = react.useRef(new state.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 view.EditorView.theme({
+      "&": { ...max ? { maxHeight: `${max}px` } : {} },
+      ".cm-scroller": { overflow: "auto", ...styles }
+    });
+  }
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const updateListener = view.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$1 = state.EditorState.create({
+      doc: value,
+      extensions: [
+        // Compartmentalized extensions
+        languageComp.current.of(resolveLanguageExtension(language$1)),
+        themeComp.current.of(resolveThemeExtensions(theme)),
+        lineNumbersComp.current.of(lineNumbers ? [view.lineNumbers(), view.highlightActiveLineGutter()] : []),
+        wrapComp.current.of(wordWrap ? view.EditorView.lineWrapping : []),
+        tabSizeComp.current.of(state.EditorState.tabSize.of(tabSize)),
+        readOnlyComp.current.of(state.EditorState.readOnly.of(readOnly)),
+        placeholderComp.current.of(placeholder ? view.placeholder(placeholder) : []),
+        heightComp.current.of(buildHeightExtension(minHeight, maxHeight)),
+        // Static extensions
+        commands.history(),
+        language.foldGutter(),
+        view.drawSelection(),
+        view.dropCursor(),
+        language.indentOnInput(),
+        language.bracketMatching(),
+        autocomplete.closeBrackets(),
+        autocomplete.autocompletion(),
+        view.highlightActiveLine(),
+        search.highlightSelectionMatches(),
+        view.keymap.of([
+          ...autocomplete.closeBracketsKeymap,
+          ...commands.defaultKeymap,
+          ...search.searchKeymap,
+          ...commands.historyKeymap,
+          ...language.foldKeymap,
+          ...autocomplete.completionKeymap,
+          commands.indentWithTab
+        ]),
+        updateListener,
+        ...additionalExtensions ?? []
+      ]
+    });
+    const view$1 = new view.EditorView({ state: state$1, parent: container });
+    viewRef.current = view$1;
+    return () => {
+      view$1.destroy();
+      viewRef.current = null;
+    };
+  }, [containerRef]);
+  react.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]);
+  react.useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const def = getLanguage(language$1);
+    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$1]);
+  react.useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({ effects: themeComp.current.reconfigure(resolveThemeExtensions(theme)) });
+  }, [theme]);
+  react.useEffect(() => {
+    const view$1 = viewRef.current;
+    if (!view$1) return;
+    view$1.dispatch({
+      effects: lineNumbersComp.current.reconfigure(
+        lineNumbers ? [view.lineNumbers(), view.highlightActiveLineGutter()] : []
+      )
+    });
+  }, [lineNumbers]);
+  react.useEffect(() => {
+    const view$1 = viewRef.current;
+    if (!view$1) return;
+    view$1.dispatch({
+      effects: wrapComp.current.reconfigure(wordWrap ? view.EditorView.lineWrapping : [])
+    });
+  }, [wordWrap]);
+  react.useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: tabSizeComp.current.reconfigure(state.EditorState.tabSize.of(tabSize))
+    });
+  }, [tabSize]);
+  react.useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({
+      effects: readOnlyComp.current.reconfigure(state.EditorState.readOnly.of(readOnly))
+    });
+  }, [readOnly]);
+  react.useEffect(() => {
+    const view$1 = viewRef.current;
+    if (!view$1) return;
+    view$1.dispatch({
+      effects: placeholderComp.current.reconfigure(placeholder ? view.placeholder(placeholder) : [])
+    });
+  }, [placeholder]);
+  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 react.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] = reactFancy.useControllableState(valueProp, defaultValue, onChange);
+  const isDark = useDarkMode();
+  const resolvedTheme = theme === "auto" ? isDark ? "dark" : "light" : theme;
+  const [currentLanguage, setCurrentLanguageState] = react.useState(() => {
+    const def = getLanguage(languageProp);
+    return def?.name ?? languageProp;
+  });
+  const setLanguage = react.useCallback(
+    (lang) => {
+      const def = getLanguage(lang);
+      const resolved = def?.name ?? lang;
+      setCurrentLanguageState(resolved);
+      onLanguageChange?.(resolved);
+    },
+    [onLanguageChange]
+  );
+  const [showLineNumbers, setShowLineNumbers] = react.useState(lineNumbersProp);
+  const [isWordWrap, setIsWordWrap] = react.useState(wordWrapProp);
+  const [cursorPosition, setCursorPosition] = react.useState({ line: 1, col: 1 });
+  const [selectionLength, setSelectionLength] = react.useState(0);
+  const containerRef = react.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 = react.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__ */ jsxRuntime.jsx(CodeEditorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-fancy-code-editor": "",
+      className: reactFancy.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
+});
+
+exports.CodeEditor = CodeEditor;
+exports.getLanguage = getLanguage;
+exports.getRegisteredLanguages = getRegisteredLanguages;
+exports.getRegisteredThemes = getRegisteredThemes;
+exports.getTheme = getTheme;
+exports.registerLanguage = registerLanguage;
+exports.registerTheme = registerTheme;
+exports.useCodeEditor = useCodeEditor;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map