@particle-academy/fancy-code 0.5.1 → 0.7.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { RefObject, ReactNode } from 'react';
-import { InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
+import { RefObject, ReactNode, CSSProperties } from 'react';
+import { MediaKind, MediaViewerProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeColors {
     background: string;
@@ -43,6 +43,13 @@ interface UseEditorEngineReturn {
     handleInput: () => void;
     handleScroll: () => void;
     handleSelect: () => void;
+    /**
+     * Place the caret on a 1-based `line` / `column` and scroll the editor so the
+     * line is centered in view. Out-of-range positions clamp to document bounds.
+     */
+    revealLine: (line: number, column?: number, opts?: {
+        focus?: boolean;
+    }) => void;
     scrollTop: number;
     scrollLeft: number;
 }
@@ -76,6 +83,16 @@ interface CodeEditorProps {
     minHeight?: number;
     /** Maximum height in px (scrolls beyond this) */
     maxHeight?: number;
+    /**
+     * 1-based line to reveal (scroll to + place the caret on). Applied on mount
+     * and whenever it (or `cursorColumn`) changes — so opening a file *at* a line,
+     * or re-targeting an already-open file, scrolls the line into view. Does not
+     * steal focus; call the imperative `revealLine`/`setCursor` (or `focus`) for
+     * that. Out-of-range values clamp to document bounds.
+     */
+    cursorLine?: number;
+    /** 1-based column for {@link cursorLine} (default 1). */
+    cursorColumn?: number;
 }
 interface CodeEditorContextValue {
     /** Get the current document text */
@@ -88,6 +105,16 @@ interface CodeEditorContextValue {
     replaceSelection: (text: string) => void;
     /** Focus the editor */
     focus: () => void;
+    /**
+     * Scroll to + place the caret on a 1-based `line` (optional 1-based `column`),
+     * focusing the editor. Out-of-range positions clamp to document bounds.
+     */
+    revealLine: (line: number, column?: number) => void;
+    /** Place the caret at a 1-based `{ line, column }` and reveal it (focuses). */
+    setCursor: (pos: {
+        line: number;
+        column?: number;
+    }) => void;
     /** Current language name */
     language: string;
     /** Change the active language */
@@ -163,7 +190,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, }: CodeEditorProps): react.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, cursorLine, cursorColumn, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -225,6 +252,106 @@ declare namespace MarkdownEditor {
     var displayName: string;
 }
 
+/**
+ * The decision a file viewer makes about a file: render it as editable text, or
+ * hand it to a media viewer. `media` carries the resolved {@link MediaKind};
+ * `text` carries the editor language id.
+ */
+type FileKind = {
+    kind: "text";
+    language: string;
+} | {
+    kind: "media";
+    mediaKind: MediaKind;
+};
+interface ResolveFileKindInput {
+    /** File name or path — sniffed for an extension (and used for the media check). */
+    filename?: string;
+    /** MIME type — preferred over the filename when known. */
+    mime?: string;
+}
+/**
+ * Resolve the fancy-code editor language for a filename. Returns `"plaintext"`
+ * (no syntax highlighting) for unknown or extension-less files.
+ */
+declare function languageFromFilename(filename?: string): string;
+/**
+ * Decide whether a file is previewable media (image / video / audio / PDF) or
+ * text, from its MIME type (preferred) and/or filename. Media wins when the
+ * type resolves to one; otherwise it's text and the editor language is derived
+ * from the extension.
+ *
+ * Exposed so consumers can branch their own chrome (tabs, save buttons) the
+ * same way `<FileViewer>` does internally.
+ *
+ * ```ts
+ * resolveFileKind({ filename: "logo.png" });   // { kind: "media", mediaKind: "image" }
+ * resolveFileKind({ filename: "app.tsx" });     // { kind: "text", language: "typescript" }
+ * resolveFileKind({ mime: "application/pdf" }); // { kind: "media", mediaKind: "pdf" }
+ * ```
+ */
+declare function resolveFileKind({ filename, mime }: ResolveFileKindInput): FileKind;
+
+interface FileViewerProps {
+    /**
+     * File name or path — used to detect the file kind / editor language, and as
+     * a label / alt text. Pass `mime` too when you have it (it's preferred).
+     */
+    filename?: string;
+    /** MIME type — preferred over `filename` for detection. */
+    mime?: string;
+    /**
+     * Source URL for **media** files (image / video / audio / PDF) —
+     * `http(s):` / `data:` / `blob:`. Required when the file resolves to media.
+     */
+    src?: string;
+    /** Text content for **text** files. */
+    value?: string;
+    /** Called when text content changes (ignored when `readOnly`). */
+    onChange?: (value: string) => void;
+    /**
+     * Read-only. Defaults to `true` — `FileViewer` is a viewer. Media is always
+     * read-only regardless. Set `false` (with `onChange`) to edit text.
+     */
+    readOnly?: boolean;
+    /** Editor theme for text: `"light" | "dark" | "auto"` or a registered name (default `"auto"`). */
+    theme?: string;
+    /** Force the file kind, bypassing detection. */
+    fileKind?: FileKind;
+    /** Show line numbers in the text editor (default `true`). */
+    lineNumbers?: boolean;
+    /** Wrap long lines in the text editor (default `false`). */
+    wordWrap?: boolean;
+    /** Editor height bounds (px). */
+    minHeight?: number;
+    maxHeight?: number;
+    /** Extra props forwarded to `<MediaViewer>` for media files. */
+    mediaProps?: Partial<Omit<MediaViewerProps, "src" | "mime" | "alt">>;
+    className?: string;
+    style?: CSSProperties;
+}
+
+/**
+ * A unified file viewer: renders text files in a read-only `CodeEditor` (with
+ * syntax highlighting picked from the filename) and media files — image, video,
+ * audio, PDF — via react-fancy's `<MediaViewer>`. The text-vs-media decision is
+ * made by {@link resolveFileKind}; pass `fileKind` to override it, or call
+ * `resolveFileKind` yourself to branch your own chrome (tabs, save buttons).
+ *
+ * Give the container a height for media files (PDF/image/video fill their box).
+ *
+ * ```tsx
+ * // text
+ * <FileViewer filename="app.tsx" value={source} />
+ * // media
+ * <FileViewer filename="logo.png" src={url} style={{ height: 360 }} />
+ * ```
+ */
+declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
+declare namespace FileViewer {
+    var displayName: string;
+}
+
 /**
  * Tiny, dependency-free Markdown → HTML renderer for the MarkdownEditor preview
  * pane. Covers the common subset — headings, bold/italic, inline + fenced code,
@@ -309,4 +436,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 LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, renderMarkdown, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type FileKind, FileViewer, type FileViewerProps, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ResolveFileKindInput, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, languageFromFilename, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { RefObject, ReactNode } from 'react';
-import { InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
+import { RefObject, ReactNode, CSSProperties } from 'react';
+import { MediaKind, MediaViewerProps, InputTagProps, InputTagTriggers, InputTagAdapter } from '@particle-academy/react-fancy';
 
 interface ThemeColors {
     background: string;
@@ -43,6 +43,13 @@ interface UseEditorEngineReturn {
     handleInput: () => void;
     handleScroll: () => void;
     handleSelect: () => void;
+    /**
+     * Place the caret on a 1-based `line` / `column` and scroll the editor so the
+     * line is centered in view. Out-of-range positions clamp to document bounds.
+     */
+    revealLine: (line: number, column?: number, opts?: {
+        focus?: boolean;
+    }) => void;
     scrollTop: number;
     scrollLeft: number;
 }
@@ -76,6 +83,16 @@ interface CodeEditorProps {
     minHeight?: number;
     /** Maximum height in px (scrolls beyond this) */
     maxHeight?: number;
+    /**
+     * 1-based line to reveal (scroll to + place the caret on). Applied on mount
+     * and whenever it (or `cursorColumn`) changes — so opening a file *at* a line,
+     * or re-targeting an already-open file, scrolls the line into view. Does not
+     * steal focus; call the imperative `revealLine`/`setCursor` (or `focus`) for
+     * that. Out-of-range values clamp to document bounds.
+     */
+    cursorLine?: number;
+    /** 1-based column for {@link cursorLine} (default 1). */
+    cursorColumn?: number;
 }
 interface CodeEditorContextValue {
     /** Get the current document text */
@@ -88,6 +105,16 @@ interface CodeEditorContextValue {
     replaceSelection: (text: string) => void;
     /** Focus the editor */
     focus: () => void;
+    /**
+     * Scroll to + place the caret on a 1-based `line` (optional 1-based `column`),
+     * focusing the editor. Out-of-range positions clamp to document bounds.
+     */
+    revealLine: (line: number, column?: number) => void;
+    /** Place the caret at a 1-based `{ line, column }` and reveal it (focuses). */
+    setCursor: (pos: {
+        line: number;
+        column?: number;
+    }) => void;
     /** Current language name */
     language: string;
     /** Change the active language */
@@ -163,7 +190,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, }: CodeEditorProps): react.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, cursorLine, cursorColumn, }: CodeEditorProps): react.JSX.Element;
 declare namespace CodeEditorRoot {
     var displayName: string;
 }
@@ -225,6 +252,106 @@ declare namespace MarkdownEditor {
     var displayName: string;
 }
 
+/**
+ * The decision a file viewer makes about a file: render it as editable text, or
+ * hand it to a media viewer. `media` carries the resolved {@link MediaKind};
+ * `text` carries the editor language id.
+ */
+type FileKind = {
+    kind: "text";
+    language: string;
+} | {
+    kind: "media";
+    mediaKind: MediaKind;
+};
+interface ResolveFileKindInput {
+    /** File name or path — sniffed for an extension (and used for the media check). */
+    filename?: string;
+    /** MIME type — preferred over the filename when known. */
+    mime?: string;
+}
+/**
+ * Resolve the fancy-code editor language for a filename. Returns `"plaintext"`
+ * (no syntax highlighting) for unknown or extension-less files.
+ */
+declare function languageFromFilename(filename?: string): string;
+/**
+ * Decide whether a file is previewable media (image / video / audio / PDF) or
+ * text, from its MIME type (preferred) and/or filename. Media wins when the
+ * type resolves to one; otherwise it's text and the editor language is derived
+ * from the extension.
+ *
+ * Exposed so consumers can branch their own chrome (tabs, save buttons) the
+ * same way `<FileViewer>` does internally.
+ *
+ * ```ts
+ * resolveFileKind({ filename: "logo.png" });   // { kind: "media", mediaKind: "image" }
+ * resolveFileKind({ filename: "app.tsx" });     // { kind: "text", language: "typescript" }
+ * resolveFileKind({ mime: "application/pdf" }); // { kind: "media", mediaKind: "pdf" }
+ * ```
+ */
+declare function resolveFileKind({ filename, mime }: ResolveFileKindInput): FileKind;
+
+interface FileViewerProps {
+    /**
+     * File name or path — used to detect the file kind / editor language, and as
+     * a label / alt text. Pass `mime` too when you have it (it's preferred).
+     */
+    filename?: string;
+    /** MIME type — preferred over `filename` for detection. */
+    mime?: string;
+    /**
+     * Source URL for **media** files (image / video / audio / PDF) —
+     * `http(s):` / `data:` / `blob:`. Required when the file resolves to media.
+     */
+    src?: string;
+    /** Text content for **text** files. */
+    value?: string;
+    /** Called when text content changes (ignored when `readOnly`). */
+    onChange?: (value: string) => void;
+    /**
+     * Read-only. Defaults to `true` — `FileViewer` is a viewer. Media is always
+     * read-only regardless. Set `false` (with `onChange`) to edit text.
+     */
+    readOnly?: boolean;
+    /** Editor theme for text: `"light" | "dark" | "auto"` or a registered name (default `"auto"`). */
+    theme?: string;
+    /** Force the file kind, bypassing detection. */
+    fileKind?: FileKind;
+    /** Show line numbers in the text editor (default `true`). */
+    lineNumbers?: boolean;
+    /** Wrap long lines in the text editor (default `false`). */
+    wordWrap?: boolean;
+    /** Editor height bounds (px). */
+    minHeight?: number;
+    maxHeight?: number;
+    /** Extra props forwarded to `<MediaViewer>` for media files. */
+    mediaProps?: Partial<Omit<MediaViewerProps, "src" | "mime" | "alt">>;
+    className?: string;
+    style?: CSSProperties;
+}
+
+/**
+ * A unified file viewer: renders text files in a read-only `CodeEditor` (with
+ * syntax highlighting picked from the filename) and media files — image, video,
+ * audio, PDF — via react-fancy's `<MediaViewer>`. The text-vs-media decision is
+ * made by {@link resolveFileKind}; pass `fileKind` to override it, or call
+ * `resolveFileKind` yourself to branch your own chrome (tabs, save buttons).
+ *
+ * Give the container a height for media files (PDF/image/video fill their box).
+ *
+ * ```tsx
+ * // text
+ * <FileViewer filename="app.tsx" value={source} />
+ * // media
+ * <FileViewer filename="logo.png" src={url} style={{ height: 360 }} />
+ * ```
+ */
+declare function FileViewer({ filename, mime, src, value, onChange, readOnly, theme, fileKind, lineNumbers, wordWrap, minHeight, maxHeight, mediaProps, className, style, }: FileViewerProps): react.JSX.Element;
+declare namespace FileViewer {
+    var displayName: string;
+}
+
 /**
  * Tiny, dependency-free Markdown → HTML renderer for the MarkdownEditor preview
  * pane. Covers the common subset — headings, bold/italic, inline + fenced code,
@@ -309,4 +436,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 LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, renderMarkdown, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
+export { CodeEditor, type CodeEditorContextValue, CodeEditorInputTag, type CodeEditorInputTagProps, type CodeEditorPanelProps, type CodeEditorProps, type CodeEditorStatusBarProps, type CodeEditorToolbarProps, type FileKind, FileViewer, type FileViewerProps, type LanguageDefinition, MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps, type ResolveFileKindInput, type ThemeColors, type ThemeDefinition, type Token, type TokenType, type Tokenizer, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, languageFromFilename, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { createContext, useState, useCallback, useRef, useMemo, useSyncExternalStore, useEffect, useContext } from 'react';
-import { cn, useControllableState, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
+import { createContext, useState, useCallback, useRef, useEffect, useMemo, useSyncExternalStore, useContext } from 'react';
+import { cn, useControllableState, resolveMediaType, MediaViewer, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/CodeEditor/CodeEditor.tsx
@@ -1344,6 +1344,19 @@ function highlightCode(source, tokens, colors) {
   return parts.join("");
 }
 
+// src/engine/position.ts
+function lineColumnToOffset(text, line, column = 1) {
+  const lines = text.split("\n");
+  const targetLine = Math.max(1, Math.min(Math.trunc(line) || 1, lines.length));
+  let offset = 0;
+  for (let i = 0; i < targetLine - 1; i++) {
+    offset += lines[i].length + 1;
+  }
+  const lineText = lines[targetLine - 1] ?? "";
+  const col = Math.max(1, Math.min(Math.trunc(column) || 1, lineText.length + 1));
+  return offset + (col - 1);
+}
+
 // src/hooks/use-editor-engine.ts
 var DEFAULT_COLORS = {
   background: "#18181b",
@@ -1458,6 +1471,28 @@ function useEditorEngine({
     setScrollTop(ta.scrollTop);
     setScrollLeft(ta.scrollLeft);
   }, []);
+  const revealLine = useCallback(
+    (line, column = 1, opts) => {
+      const ta = textareaRef.current;
+      if (!ta) return;
+      const offset = lineColumnToOffset(ta.value, line, column);
+      if (opts?.focus) ta.focus();
+      ta.selectionStart = ta.selectionEnd = offset;
+      updateCursorInfo();
+      const panel = ta.closest("[data-fancy-code-panel]");
+      if (!panel) return;
+      const cs = getComputedStyle(ta);
+      const lineHeight = parseFloat(cs.lineHeight) || 19.5;
+      const paddingTop = parseFloat(cs.paddingTop) || 0;
+      const lineIndex = (ta.value.slice(0, offset).match(/\n/g) || []).length;
+      const textareaTopInPanel = ta.getBoundingClientRect().top - panel.getBoundingClientRect().top + panel.scrollTop;
+      const lineTop = textareaTopInPanel + paddingTop + lineIndex * lineHeight;
+      const target = lineTop - panel.clientHeight / 2 + lineHeight / 2;
+      const maxScroll = panel.scrollHeight - panel.clientHeight;
+      panel.scrollTop = Math.max(0, Math.min(target, maxScroll));
+    },
+    [updateCursorInfo]
+  );
   const handleKeyDown = useCallback(
     (e) => {
       if (readOnly) {
@@ -1544,6 +1579,7 @@ function useEditorEngine({
     handleInput,
     handleScroll,
     handleSelect,
+    revealLine,
     scrollTop,
     scrollLeft
   };
@@ -1577,7 +1613,9 @@ function CodeEditorRoot({
   tabSize: tabSizeProp = 2,
   placeholder,
   minHeight,
-  maxHeight
+  maxHeight,
+  cursorLine,
+  cursorColumn
 }) {
   const [currentValue, setCurrentValue] = useControllableState(valueProp, defaultValue, onChange);
   const isDark = useDarkMode();
@@ -1613,6 +1651,11 @@ function CodeEditorRoot({
       setSelectionLength(sel);
     }
   });
+  const { revealLine: revealLineImpl } = engineReturn;
+  useEffect(() => {
+    if (cursorLine == null) return;
+    revealLineImpl(cursorLine, cursorColumn ?? 1, { focus: false });
+  }, [cursorLine, cursorColumn, revealLineImpl]);
   const contextValue = useMemo(
     () => ({
       getValue: () => engineReturn.textareaRef.current?.value ?? currentValue,
@@ -1634,6 +1677,8 @@ function CodeEditorRoot({
         setCurrentValue(ta.value);
       },
       focus: () => engineReturn.textareaRef.current?.focus(),
+      revealLine: (line, column) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
+      setCursor: ({ line, column }) => engineReturn.revealLine(line, column ?? 1, { focus: true }),
       language: currentLanguage,
       setLanguage,
       theme: resolvedTheme,
@@ -1831,6 +1876,118 @@ 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 = resolveMediaType({ mime, src: filename });
+  if (media !== "unknown") return { kind: "media", mediaKind: media };
+  return { kind: "text", language: languageFromFilename(filename) };
+}
+function FileViewer({
+  filename,
+  mime,
+  src,
+  value = "",
+  onChange,
+  readOnly = true,
+  theme = "auto",
+  fileKind,
+  lineNumbers = true,
+  wordWrap = false,
+  minHeight,
+  maxHeight,
+  mediaProps,
+  className,
+  style
+}) {
+  const resolved = fileKind ?? resolveFileKind({ filename, mime });
+  if (resolved.kind === "media") {
+    const { className: mediaClassName, ...restMediaProps } = mediaProps ?? {};
+    const fill = resolved.mediaKind !== "audio";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-fancy-file-viewer": "",
+        "data-kind": "media",
+        "data-media-kind": resolved.mediaKind,
+        className: cn("overflow-hidden", className),
+        style,
+        children: /* @__PURE__ */ jsx(
+          MediaViewer,
+          {
+            src: src ?? "",
+            mime,
+            alt: filename,
+            kind: resolved.mediaKind,
+            className: cn(fill && "h-full w-full", mediaClassName),
+            ...restMediaProps
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-fancy-file-viewer": "",
+      "data-kind": "text",
+      className,
+      style,
+      children: /* @__PURE__ */ jsx(
+        CodeEditor,
+        {
+          value,
+          onChange: readOnly ? void 0 : onChange,
+          language: resolved.language,
+          theme,
+          readOnly,
+          lineNumbers,
+          wordWrap,
+          minHeight,
+          maxHeight,
+          children: /* @__PURE__ */ jsx(CodeEditor.Panel, {})
+        }
+      )
+    }
+  );
+}
+FileViewer.displayName = "FileViewer";
 function useCodeEditorInputTagAdapter() {
   const ctx = useCodeEditor();
   return useMemo(() => textareaAdapter(ctx.textareaRef), [ctx.textareaRef]);
@@ -1840,6 +1997,6 @@ function CodeEditorInputTag(props) {
   return /* @__PURE__ */ jsx(InputTag, { adapter, ...props });
 }
 
-export { CodeEditor, CodeEditorInputTag, MarkdownEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, registerLanguage, registerTheme, renderMarkdown, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
+export { CodeEditor, CodeEditorInputTag, FileViewer, MarkdownEditor, getLanguage, getRegisteredLanguages, getRegisteredThemes, getTheme, languageFromFilename, registerLanguage, registerTheme, renderMarkdown, resolveFileKind, tokenizeMarkdown, useCodeEditor, useCodeEditorInputTagAdapter };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map