@particle-academy/fancy-code 0.5.1 → 0.6.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;
@@ -225,6 +225,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 +409,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;
@@ -225,6 +225,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 +409,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 { cn, useControllableState, resolveMediaType, MediaViewer, textareaAdapter, InputTag } from '@particle-academy/react-fancy';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/CodeEditor/CodeEditor.tsx
@@ -1831,6 +1831,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 +1952,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