@optilogic/core 1.0.0-beta.15 → 1.0.0-beta.17

package/dist/index.cjs

@@ -23,6 +23,10 @@ var sonner = require('sonner');
 var reactVirtual = require('@tanstack/react-virtual');
 var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
+var ReactMarkdownImport = require('react-markdown');
+var remarkGfmImport = require('remark-gfm');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -55,6 +59,8 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
+var ReactMarkdownImport__default = /*#__PURE__*/_interopDefault(ReactMarkdownImport);
+var remarkGfmImport__default = /*#__PURE__*/_interopDefault(remarkGfmImport);
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -6801,6 +6807,848 @@ function useContextMenu() {
   };
 }
 
+// src/components/file-view/utils/contentTypeDetection.ts
+var EXTENSION_MAP = {
+  // Code / programming languages
+  ts: "code",
+  tsx: "code",
+  js: "code",
+  jsx: "code",
+  mjs: "code",
+  cjs: "code",
+  py: "code",
+  rb: "code",
+  go: "code",
+  rs: "code",
+  java: "code",
+  c: "code",
+  cpp: "code",
+  h: "code",
+  hpp: "code",
+  cs: "code",
+  php: "code",
+  swift: "code",
+  kt: "code",
+  scala: "code",
+  r: "code",
+  sql: "code",
+  sh: "code",
+  bash: "code",
+  zsh: "code",
+  ps1: "code",
+  bat: "code",
+  lua: "code",
+  perl: "code",
+  pl: "code",
+  // Config / data (code-rendered)
+  json: "code",
+  yaml: "code",
+  yml: "code",
+  toml: "code",
+  xml: "code",
+  html: "html",
+  htm: "html",
+  css: "code",
+  scss: "code",
+  sass: "code",
+  less: "code",
+  graphql: "code",
+  gql: "code",
+  // Optimization / domain-specific
+  lp: "code",
+  dat: "code",
+  // Markdown
+  md: "markdown",
+  mdx: "markdown",
+  // Images
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  svg: "image",
+  webp: "image",
+  ico: "image",
+  bmp: "image",
+  // PDF
+  pdf: "pdf",
+  // CSV
+  csv: "csv",
+  tsv: "csv",
+  // Plain text
+  txt: "plaintext",
+  log: "plaintext",
+  env: "plaintext"
+};
+var SPECIAL_FILES = {
+  dockerfile: "code",
+  makefile: "code",
+  rakefile: "code",
+  gemfile: "code",
+  procfile: "code"
+};
+function getFileExtension(fileName) {
+  if (!fileName) return null;
+  const baseName = fileName.split("/").pop() || fileName;
+  if (baseName.startsWith(".") && !baseName.slice(1).includes(".")) {
+    return baseName.slice(1).toLowerCase();
+  }
+  const lastDot = baseName.lastIndexOf(".");
+  if (lastDot === -1 || lastDot === baseName.length - 1) return null;
+  return baseName.slice(lastDot + 1).toLowerCase();
+}
+function detectContentType(fileName) {
+  const baseName = (fileName.split("/").pop() || fileName).toLowerCase();
+  const specialType = SPECIAL_FILES[baseName];
+  if (specialType) {
+    return { type: specialType, extension: baseName };
+  }
+  const extension = getFileExtension(fileName);
+  if (!extension) {
+    return { type: "unknown", extension: null };
+  }
+  const type = EXTENSION_MAP[extension] ?? "unknown";
+  return { type, extension };
+}
+function isTextContentType(contentType) {
+  return contentType === "code" || contentType === "markdown" || contentType === "plaintext" || contentType === "csv" || contentType === "html" || contentType === "unknown";
+}
+function isUrlContentType(contentType) {
+  return contentType === "image" || contentType === "pdf";
+}
+
+// src/components/file-view/hooks/useContentType.ts
+function useContentType({
+  fileName,
+  contentTypeOverride
+}) {
+  return React20.useMemo(() => {
+    if (contentTypeOverride) {
+      return {
+        type: contentTypeOverride,
+        extension: null,
+        isOverridden: true
+      };
+    }
+    const detected = detectContentType(fileName);
+    return { ...detected, isOverridden: false };
+  }, [fileName, contentTypeOverride]);
+}
+var globalHighlighter = null;
+var initPromise = null;
+async function getOrCreateHighlighter() {
+  if (globalHighlighter) return globalHighlighter;
+  if (!initPromise) {
+    initPromise = (async () => {
+      try {
+        const { createHighlighter } = await import('shiki');
+        globalHighlighter = await createHighlighter({
+          themes: ["github-light", "github-dark"],
+          langs: []
+        });
+        return globalHighlighter;
+      } catch {
+        return null;
+      }
+    })();
+  }
+  return initPromise;
+}
+function useShikiHighlighter() {
+  const [state, setState] = React20.useState({
+    highlighter: globalHighlighter,
+    isReady: globalHighlighter !== null
+  });
+  React20.useEffect(() => {
+    if (globalHighlighter) {
+      setState({ highlighter: globalHighlighter, isReady: true });
+      return;
+    }
+    let cancelled = false;
+    getOrCreateHighlighter().then((h) => {
+      if (!cancelled) {
+        setState({ highlighter: h, isReady: true });
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return state;
+}
+function getBackgroundLightness(el) {
+  const value = getComputedStyle(el).getPropertyValue("--background").trim();
+  if (!value) return null;
+  const match = value.match(/(\d+(?:\.\d+)?)%\s*$/);
+  return match ? parseFloat(match[1]) : null;
+}
+function useDarkMode() {
+  const checkDark = React20.useCallback(() => {
+    if (typeof document === "undefined") return false;
+    const lightness = getBackgroundLightness(document.documentElement);
+    if (lightness === null) {
+      return document.documentElement.classList.contains("dark");
+    }
+    return lightness < 50;
+  }, []);
+  const [isDark, setIsDark] = React20.useState(checkDark);
+  React20.useEffect(() => {
+    const el = document.documentElement;
+    const update = () => {
+      setIsDark(checkDark());
+    };
+    const observer = new MutationObserver(update);
+    observer.observe(el, {
+      attributes: true,
+      attributeFilter: ["class", "style"]
+    });
+    update();
+    return () => observer.disconnect();
+  }, [checkDark]);
+  return isDark;
+}
+
+// src/components/file-view/hooks/useHighlightedTokens.ts
+function useHighlightedTokens(code, language) {
+  const { highlighter, isReady } = useShikiHighlighter();
+  const isDark = useDarkMode();
+  const [lines, setLines] = React20.useState(null);
+  React20.useEffect(() => {
+    if (!isReady || !highlighter || !code) {
+      setLines(null);
+      return;
+    }
+    let cancelled = false;
+    const theme = isDark ? "github-dark" : "github-light";
+    (async () => {
+      try {
+        if (language !== "text") {
+          const loadedLangs = highlighter.getLoadedLanguages();
+          if (!loadedLangs.includes(language)) {
+            await highlighter.loadLanguage(language);
+          }
+        }
+      } catch {
+        if (!cancelled) setLines(null);
+        return;
+      }
+      if (cancelled) return;
+      try {
+        const result = highlighter.codeToTokens(code, {
+          lang: language,
+          theme
+        });
+        if (!cancelled) {
+          setLines(
+            result.tokens.map(
+              (line) => line.map((token) => ({
+                content: token.content,
+                color: token.color
+              }))
+            )
+          );
+        }
+      } catch {
+        if (!cancelled) setLines(null);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [highlighter, isReady, code, language, isDark]);
+  return { lines };
+}
+
+// src/components/file-view/utils/languageMapping.ts
+var EXTENSION_OVERRIDES = {
+  yml: "yaml",
+  htm: "html",
+  cjs: "javascript",
+  mjs: "javascript",
+  jsx: "jsx",
+  tsx: "tsx",
+  h: "c",
+  hpp: "cpp",
+  cs: "csharp",
+  rb: "ruby",
+  sh: "shellscript",
+  bash: "shellscript",
+  zsh: "shellscript",
+  ps1: "powershell",
+  bat: "bat",
+  kt: "kotlin",
+  rs: "rust",
+  gql: "graphql",
+  pl: "perl",
+  sass: "sass",
+  scss: "scss",
+  less: "less",
+  // Domain-specific / data formats without shiki support
+  lp: "text",
+  dat: "text",
+  env: "shellscript"
+};
+var SPECIAL_FILE_LANGUAGES = {
+  dockerfile: "dockerfile",
+  makefile: "makefile",
+  rakefile: "ruby",
+  gemfile: "ruby",
+  procfile: "yaml"
+};
+function getLanguageFromFileName(fileName) {
+  const baseName = (fileName.split("/").pop() || fileName).toLowerCase();
+  const specialLang = SPECIAL_FILE_LANGUAGES[baseName];
+  if (specialLang) return specialLang;
+  let ext = null;
+  if (baseName.startsWith(".") && !baseName.slice(1).includes(".")) {
+    ext = baseName.slice(1);
+  } else {
+    const lastDot = baseName.lastIndexOf(".");
+    if (lastDot !== -1 && lastDot !== baseName.length - 1) {
+      ext = baseName.slice(lastDot + 1);
+    }
+  }
+  if (!ext) return "text";
+  return EXTENSION_OVERRIDES[ext] ?? ext;
+}
+function CodeRenderer({
+  content,
+  fileName,
+  className
+}) {
+  const language = React20__namespace.useMemo(
+    () => getLanguageFromFileName(fileName),
+    [fileName]
+  );
+  const plainLines = React20__namespace.useMemo(
+    () => (content ?? "").split("\n"),
+    [content]
+  );
+  const { lines: highlightedLines } = useHighlightedTokens(
+    content ?? "",
+    language
+  );
+  const gutterWidth = React20__namespace.useMemo(
+    () => `${Math.max(String(plainLines.length).length, 2) + 2}ch`,
+    [plainLines.length]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "relative h-full w-full overflow-auto rounded-md border border-border bg-background",
+        "scrollbar-thin",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "m-0 p-0", children: /* @__PURE__ */ jsxRuntime.jsx("code", { className: "block font-mono text-sm leading-relaxed", children: highlightedLines ? highlightedLines.map((tokens, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "sticky left-0 shrink-0 select-none border-r border-border bg-muted px-3 text-right text-muted-foreground",
+            style: { minWidth: gutterWidth },
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-pre px-4", children: tokens.length === 0 || tokens.length === 1 && tokens[0].content === "" ? " " : tokens.map((token, ti) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: token.color }, children: token.content }, ti)) })
+      ] }, index)) : plainLines.map((line, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "sticky left-0 shrink-0 select-none border-r border-border bg-muted px-3 text-right text-muted-foreground",
+            style: { minWidth: gutterWidth },
+            children: index + 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-pre px-4 text-foreground", children: line || " " })
+      ] }, index)) }) })
+    }
+  );
+}
+CodeRenderer.displayName = "CodeRenderer";
+function HighlightedCodeBlock({
+  children,
+  className: codeClassName,
+  ...props
+}) {
+  const language = React20__namespace.useMemo(() => {
+    if (!codeClassName) return "text";
+    const match = codeClassName.match(/language-(\S+)/);
+    return match ? match[1] : "text";
+  }, [codeClassName]);
+  const code = React20__namespace.useMemo(() => {
+    const raw = String(children);
+    return raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+  }, [children]);
+  const { lines } = useHighlightedTokens(code, language);
+  if (lines) {
+    return /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn("bg-transparent p-0", codeClassName), ...props, children: lines.map((tokens, i) => /* @__PURE__ */ jsxRuntime.jsxs(React20__namespace.Fragment, { children: [
+      i > 0 && "\n",
+      tokens.map((token, ti) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: token.color }, children: token.content }, ti))
+    ] }, i)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("code", { className: cn("bg-transparent p-0", codeClassName), ...props, children });
+}
+function MarkdownImage({
+  src,
+  alt,
+  resolveImageUrl,
+  ...props
+}) {
+  const needsResolution = !!src && !!resolveImageUrl && !src.startsWith("http://") && !src.startsWith("https://") && !src.startsWith("data:");
+  const [resolvedUrl, setResolvedUrl] = React20__namespace.useState(null);
+  const [error, setError] = React20__namespace.useState(false);
+  const [loading, setLoading] = React20__namespace.useState(needsResolution);
+  React20__namespace.useEffect(() => {
+    if (!needsResolution || !src || !resolveImageUrl) return;
+    let cancelled = false;
+    let blobUrl = null;
+    setLoading(true);
+    setError(false);
+    setResolvedUrl(null);
+    Promise.resolve(resolveImageUrl(src)).then((url) => {
+      if (cancelled) {
+        if (url.startsWith("blob:")) URL.revokeObjectURL(url);
+        return;
+      }
+      if (url.startsWith("blob:")) blobUrl = url;
+      setResolvedUrl(url);
+      setLoading(false);
+    }).catch(() => {
+      if (!cancelled) {
+        setError(true);
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (blobUrl) URL.revokeObjectURL(blobUrl);
+    };
+  }, [needsResolution, src, resolveImageUrl]);
+  if (!needsResolution) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "max-w-full rounded", ...props });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "my-2 inline-block h-24 w-40 animate-pulse rounded bg-muted" });
+  }
+  if (error || !resolvedUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "max-w-full rounded", ...props });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: resolvedUrl,
+      alt,
+      className: "max-w-full rounded",
+      ...props
+    }
+  );
+}
+function MarkdownRenderer({
+  content,
+  className,
+  resolveImageUrl
+}) {
+  const markdownComponents = React20__namespace.useMemo(
+    () => ({
+      code: ({
+        children,
+        className: codeClassName,
+        ...props
+      }) => {
+        const isInline = !codeClassName;
+        if (isInline) {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "code",
+            {
+              className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[85%]",
+              ...props,
+              children
+            }
+          );
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(HighlightedCodeBlock, { className: codeClassName, ...props, children });
+      },
+      pre: ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+        "pre",
+        {
+          className: "my-4 overflow-auto rounded-md border border-border bg-muted p-4 font-mono text-sm leading-relaxed",
+          ...props,
+          children
+        }
+      ),
+      blockquote: ({
+        children,
+        ...props
+      }) => /* @__PURE__ */ jsxRuntime.jsx(
+        "blockquote",
+        {
+          className: "my-4 border-l-4 border-border pl-4 text-muted-foreground",
+          ...props,
+          children
+        }
+      ),
+      a: ({
+        children,
+        href,
+        ...props
+      }) => /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-primary hover:underline",
+          ...props,
+          children
+        }
+      ),
+      table: ({
+        children,
+        ...props
+      }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-4 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "table",
+        {
+          className: "w-full border-collapse border border-border text-sm",
+          ...props,
+          children
+        }
+      ) }),
+      th: ({
+        children,
+        ...props
+      }) => /* @__PURE__ */ jsxRuntime.jsx(
+        "th",
+        {
+          className: "border border-border bg-muted px-3 py-2 text-left font-semibold",
+          ...props,
+          children
+        }
+      ),
+      td: ({
+        children,
+        ...props
+      }) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border border-border px-3 py-2", ...props, children }),
+      img: ({
+        src,
+        alt,
+        ...props
+      }) => /* @__PURE__ */ jsxRuntime.jsx(
+        MarkdownImage,
+        {
+          src,
+          alt,
+          resolveImageUrl,
+          ...props
+        }
+      )
+    }),
+    [resolveImageUrl]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "h-full w-full overflow-auto bg-background p-6 text-sm leading-relaxed text-foreground",
+        // Heading styles
+        "[&_h1]:mb-4 [&_h1]:mt-6 [&_h1]:border-b [&_h1]:border-border [&_h1]:pb-2 [&_h1]:text-2xl [&_h1]:font-bold",
+        "[&_h2]:mb-4 [&_h2]:mt-6 [&_h2]:border-b [&_h2]:border-border [&_h2]:pb-2 [&_h2]:text-xl [&_h2]:font-semibold",
+        "[&_h3]:mb-3 [&_h3]:mt-5 [&_h3]:text-lg [&_h3]:font-semibold",
+        "[&_h4]:mb-3 [&_h4]:mt-4 [&_h4]:text-base [&_h4]:font-semibold",
+        // Paragraph and list styles
+        "[&_p]:mb-4 [&_p]:leading-relaxed",
+        "[&_ul]:mb-4 [&_ul]:list-disc [&_ul]:pl-6",
+        "[&_ol]:mb-4 [&_ol]:list-decimal [&_ol]:pl-6",
+        "[&_li]:mb-1",
+        // Horizontal rule
+        "[&_hr]:my-6 [&_hr]:border-border",
+        "scrollbar-thin",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ReactMarkdownImport__default.default,
+        {
+          remarkPlugins: [remarkGfmImport__default.default],
+          components: markdownComponents,
+          children: content ?? ""
+        }
+      )
+    }
+  );
+}
+MarkdownRenderer.displayName = "MarkdownRenderer";
+function ImageRenderer({
+  url,
+  fileName,
+  className
+}) {
+  const [hasError, setHasError] = React20__namespace.useState(false);
+  React20__namespace.useEffect(() => {
+    setHasError(false);
+  }, [url]);
+  if (!url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full items-center justify-center text-sm text-muted-foreground",
+          className
+        ),
+        children: "No image URL provided"
+      }
+    );
+  }
+  if (hasError) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full flex-col items-center justify-center gap-2 text-sm text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Failed to load image" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: fileName })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "flex h-full w-full items-center justify-center overflow-auto bg-background p-4",
+        "scrollbar-thin",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: url,
+          alt: fileName,
+          onError: () => setHasError(true),
+          className: "max-h-full max-w-full object-contain"
+        }
+      )
+    }
+  );
+}
+ImageRenderer.displayName = "ImageRenderer";
+function PlainTextRenderer({ content, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "h-full w-full overflow-auto rounded-md border border-border bg-background p-4",
+        "scrollbar-thin",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-foreground", children: content ?? "" })
+    }
+  );
+}
+PlainTextRenderer.displayName = "PlainTextRenderer";
+function parseCSV(text) {
+  const lines = text.split("\n");
+  if (lines.length === 0) return { headers: [], rows: [] };
+  const firstLine = lines[0] ?? "";
+  const delimiter = firstLine.includes("	") ? "	" : ",";
+  function parseLine(line) {
+    const fields = [];
+    let current = "";
+    let inQuotes = false;
+    let i = 0;
+    while (i < line.length) {
+      const char = line[i];
+      if (inQuotes) {
+        if (char === '"') {
+          if (i + 1 < line.length && line[i + 1] === '"') {
+            current += '"';
+            i += 2;
+          } else {
+            inQuotes = false;
+            i++;
+          }
+        } else {
+          current += char;
+          i++;
+        }
+      } else {
+        if (char === '"') {
+          inQuotes = true;
+          i++;
+        } else if (char === delimiter) {
+          fields.push(current.trim());
+          current = "";
+          i++;
+        } else {
+          current += char;
+          i++;
+        }
+      }
+    }
+    fields.push(current.trim());
+    return fields;
+  }
+  const headers = parseLine(firstLine);
+  const rows = [];
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.trim() === "") continue;
+    const values = parseLine(line);
+    const row = {};
+    for (let j = 0; j < headers.length; j++) {
+      row[headers[j]] = values[j] ?? "";
+    }
+    rows.push(row);
+  }
+  return { headers, rows };
+}
+function CsvRenderer({ content, className }) {
+  const { headers, rows } = React20__namespace.useMemo(
+    () => parseCSV(content ?? ""),
+    [content]
+  );
+  const columns = React20__namespace.useMemo(
+    () => headers.map((header) => ({
+      key: header,
+      header,
+      sortable: true,
+      filterable: true,
+      filterType: "text"
+    })),
+    [headers]
+  );
+  if (headers.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn(
+          "flex h-full w-full items-center justify-center text-sm text-muted-foreground",
+          className
+        ),
+        children: "No CSV data to display"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("h-full w-full overflow-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    DataGrid,
+    {
+      data: rows,
+      columns,
+      getRowKey: (_, index) => String(index),
+      resizableColumns: true
+    }
+  ) });
+}
+CsvRenderer.displayName = "CsvRenderer";
+function HtmlRenderer({
+  content,
+  fileName,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      srcDoc: content ?? "",
+      sandbox: "allow-scripts",
+      title: fileName,
+      className: cn("h-full w-full border-0", className)
+    }
+  );
+}
+HtmlRenderer.displayName = "HtmlRenderer";
+
+// src/components/file-view/utils/rendererRegistry.ts
+var DEFAULT_RENDERERS = {
+  code: CodeRenderer,
+  markdown: MarkdownRenderer,
+  image: ImageRenderer,
+  plaintext: PlainTextRenderer,
+  csv: CsvRenderer,
+  html: HtmlRenderer
+};
+function mergeRenderers(userRenderers) {
+  if (!userRenderers) return DEFAULT_RENDERERS;
+  return { ...DEFAULT_RENDERERS, ...userRenderers };
+}
+function resolveRenderer(registry, contentType) {
+  return registry[contentType] ?? registry["plaintext"] ?? PlainTextRenderer;
+}
+function DefaultEmptyState({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center text-sm text-muted-foreground", children: message });
+}
+function DefaultLoadingState() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-primary/20 border-t-primary" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Loading file..." })
+  ] }) });
+}
+function DefaultErrorState({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex max-w-sm flex-col items-center gap-3 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-destructive", children: error.message }),
+    error.onRetry && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: error.onRetry,
+        className: cn(
+          "rounded-md border border-border bg-background px-3 py-1.5 text-sm text-foreground",
+          "transition-colors hover:bg-muted"
+        ),
+        children: "Retry"
+      }
+    )
+  ] }) });
+}
+function FileView({
+  content,
+  url = null,
+  fileName,
+  contentType: contentTypeOverride,
+  renderers: userRenderers,
+  loading = false,
+  error = null,
+  loadingComponent,
+  emptyComponent,
+  emptyMessage = "No content to display",
+  errorComponent: ErrorComponent,
+  className,
+  rendererClassName,
+  resolveImageUrl
+}) {
+  const { type: resolvedType } = useContentType({
+    fileName,
+    contentTypeOverride
+  });
+  const registry = React20__namespace.useMemo(
+    () => mergeRenderers(userRenderers),
+    [userRenderers]
+  );
+  const Renderer = React20__namespace.useMemo(
+    () => resolveRenderer(registry, resolvedType),
+    [registry, resolvedType]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-full w-full", className), children: loadingComponent ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultLoadingState, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-full w-full", className), children: ErrorComponent ? /* @__PURE__ */ jsxRuntime.jsx(ErrorComponent, { error }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultErrorState, { error }) });
+  }
+  if ((content == null || content === "") && url == null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-full w-full", className), children: emptyComponent ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultEmptyState, { message: emptyMessage }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative h-full w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Renderer,
+    {
+      content,
+      url: url ?? null,
+      fileName,
+      contentType: resolvedType,
+      className: rendererClassName,
+      resolveImageUrl
+    }
+  ) });
+}
+FileView.displayName = "FileView";
+
 exports.ALL_THEMES = ALL_THEMES;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -6838,10 +7686,13 @@ exports.CardTitle = CardTitle;
 exports.CellEditor = CellEditor;
 exports.Checkbox = Checkbox;
 exports.Chip = Chip;
+exports.CodeRenderer = CodeRenderer;
 exports.ConfirmationModal = ConfirmationModal;
 exports.ContextMenu = ContextMenu;
 exports.CopyButton = CopyButton;
+exports.CsvRenderer = CsvRenderer;
 exports.DARK_ELEGANT_THEME = DARK_ELEGANT_THEME;
+exports.DEFAULT_RENDERERS = DEFAULT_RENDERERS;
 exports.DataGrid = DataGrid;
 exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
@@ -6863,20 +7714,25 @@ exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.FOREST_THEME = FOREST_THEME;
 exports.FUTURISTIC_THEME = FUTURISTIC_THEME;
+exports.FileView = FileView;
 exports.FilterPopover = FilterPopover;
 exports.GREEN_THEME = GREEN_THEME;
 exports.HeaderCell = HeaderCell;
+exports.HtmlRenderer = HtmlRenderer;
 exports.IconButton = IconButton;
+exports.ImageRenderer = ImageRenderer;
 exports.Input = Input;
 exports.Label = Label;
 exports.LoadingSpinner = LoadingSpinner;
 exports.MINIMALIST_LIGHT_THEME = MINIMALIST_LIGHT_THEME;
+exports.MarkdownRenderer = MarkdownRenderer;
 exports.Modal = Modal;
 exports.ModalButton = ModalButton;
 exports.NATURE_THEME = NATURE_THEME;
 exports.OCEAN_THEME = OCEAN_THEME;
 exports.OPTILOGIC_LEGACY_THEME = OPTILOGIC_LEGACY_THEME;
 exports.PRESET_THEMES = PRESET_THEMES;
+exports.PlainTextRenderer = PlainTextRenderer;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
@@ -6940,21 +7796,28 @@ exports.cardListVariants = cardListVariants;
 exports.cardVariants = cardVariants;
 exports.cloneTheme = cloneTheme;
 exports.cn = cn;
+exports.detectContentType = detectContentType;
 exports.exportTheme = exportTheme;
 exports.getCellValue = getCellValue;
 exports.getCurrentTheme = getCurrentTheme;
 exports.getDefaultTheme = getDefaultTheme;
+exports.getFileExtension = getFileExtension;
 exports.getPresetTheme = getPresetTheme;
 exports.hexToHsl = hexToHsl;
 exports.iconButtonVariants = iconButtonVariants;
 exports.importTheme = importTheme;
 exports.isPresetTheme = isPresetTheme;
+exports.isTextContentType = isTextContentType;
+exports.isUrlContentType = isUrlContentType;
 exports.labelVariants = labelVariants;
 exports.loadingSpinnerVariants = loadingSpinnerVariants;
+exports.mergeRenderers = mergeRenderers;
+exports.resolveRenderer = resolveRenderer;
 exports.themeToHsl = themeToHsl;
 exports.useColumnResize = useColumnResize;
 exports.useColumnResizeManager = useColumnResizeManager;
 exports.useConfirmation = useConfirmation;
+exports.useContentType = useContentType;
 exports.useContextMenu = useContextMenu;
 exports.useDataGridState = useDataGridState;
 exports.useKeyboardNavigation = useKeyboardNavigation;