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

package/src/components/file-view/components/MarkdownRenderer.tsx

@@ -0,0 +1,304 @@
+import * as React from "react";
+import ReactMarkdownImport from "react-markdown";
+import remarkGfmImport from "remark-gfm";
+import { cn } from "../../../utils/cn";
+import { useHighlightedTokens } from "../hooks/useHighlightedTokens";
+import type { FileRendererProps, ResolveImageUrl } from "../types";
+
+/**
+ * Renders a fenced code block with shiki syntax highlighting.
+ * Falls back to plain text if shiki is unavailable or the language isn't supported.
+ */
+function HighlightedCodeBlock({
+  children,
+  className: codeClassName,
+  ...props
+}: React.HTMLAttributes<HTMLElement>) {
+  // Extract language from className (e.g., "language-javascript" -> "javascript")
+  const language = React.useMemo(() => {
+    if (!codeClassName) return "text";
+    const match = codeClassName.match(/language-(\S+)/);
+    return match ? match[1] : "text";
+  }, [codeClassName]);
+
+  const code = React.useMemo(() => {
+    const raw = String(children);
+    // react-markdown adds a trailing newline to code blocks — strip it
+    return raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+  }, [children]);
+
+  const { lines } = useHighlightedTokens(code, language);
+
+  if (lines) {
+    return (
+      <code className={cn("bg-transparent p-0", codeClassName)} {...props}>
+        {lines.map((tokens, i) => (
+          <React.Fragment key={i}>
+            {i > 0 && "\n"}
+            {tokens.map((token, ti) => (
+              <span key={ti} style={{ color: token.color }}>
+                {token.content}
+              </span>
+            ))}
+          </React.Fragment>
+        ))}
+      </code>
+    );
+  }
+
+  return (
+    <code className={cn("bg-transparent p-0", codeClassName)} {...props}>
+      {children}
+    </code>
+  );
+}
+
+/**
+ * Renders an image in markdown, with optional async URL resolution
+ * for relative paths via the `resolveImageUrl` callback.
+ *
+ * - Remote URLs (http/https) and data URIs render directly.
+ * - If no `resolveImageUrl` is provided, renders the src as-is.
+ * - Otherwise, calls `resolveImageUrl(src)` and manages loading/error/resolved states.
+ * - Cleans up blob URLs on unmount.
+ */
+function MarkdownImage({
+  src,
+  alt,
+  resolveImageUrl,
+  ...props
+}: React.ImgHTMLAttributes<HTMLImageElement> & {
+  resolveImageUrl?: ResolveImageUrl;
+}) {
+  const needsResolution =
+    !!src &&
+    !!resolveImageUrl &&
+    !src.startsWith("http://") &&
+    !src.startsWith("https://") &&
+    !src.startsWith("data:");
+
+  const [resolvedUrl, setResolvedUrl] = React.useState<string | null>(null);
+  const [error, setError] = React.useState(false);
+  const [loading, setLoading] = React.useState(needsResolution);
+
+  React.useEffect(() => {
+    if (!needsResolution || !src || !resolveImageUrl) return;
+
+    let cancelled = false;
+    let blobUrl: string | null = null;
+
+    setLoading(true);
+    setError(false);
+    setResolvedUrl(null);
+
+    Promise.resolve(resolveImageUrl(src))
+      .then((url) => {
+        if (cancelled) {
+          // Revoke immediately if we're already unmounted/stale
+          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]);
+
+  // No resolution needed — render directly (current behavior)
+  if (!needsResolution) {
+    return (
+      <img src={src} alt={alt} className="max-w-full rounded" {...props} />
+    );
+  }
+
+  // Loading
+  if (loading) {
+    return (
+      <span className="my-2 inline-block h-24 w-40 animate-pulse rounded bg-muted" />
+    );
+  }
+
+  // Error — fall back to raw src (browser's broken image)
+  if (error || !resolvedUrl) {
+    return (
+      <img src={src} alt={alt} className="max-w-full rounded" {...props} />
+    );
+  }
+
+  // Resolved
+  return (
+    <img
+      src={resolvedUrl}
+      alt={alt}
+      className="max-w-full rounded"
+      {...props}
+    />
+  );
+}
+
+/**
+ * MarkdownRenderer
+ *
+ * Renders markdown content using react-markdown + remark-gfm.
+ * Fenced code blocks use shiki syntax highlighting when available.
+ * Styled with Tailwind using semantic CSS variables for theme support.
+ *
+ * Requires `react-markdown` and `remark-gfm` as peer dependencies of @optilogic/core.
+ */
+export function MarkdownRenderer({
+  content,
+  className,
+  resolveImageUrl,
+}: FileRendererProps) {
+  const markdownComponents = React.useMemo(
+    () => ({
+      code: ({
+        children,
+        className: codeClassName,
+        ...props
+      }: React.HTMLAttributes<HTMLElement> & {
+        inline?: boolean;
+        node?: unknown;
+      }) => {
+        // Detect inline vs block: block code is wrapped in <pre> by react-markdown
+        const isInline = !codeClassName;
+        if (isInline) {
+          return (
+            <code
+              className="rounded bg-muted px-1.5 py-0.5 font-mono text-[85%]"
+              {...props}
+            >
+              {children}
+            </code>
+          );
+        }
+        return (
+          <HighlightedCodeBlock className={codeClassName} {...props}>
+            {children}
+          </HighlightedCodeBlock>
+        );
+      },
+      pre: ({ children, ...props }: React.HTMLAttributes<HTMLPreElement>) => (
+        <pre
+          className="my-4 overflow-auto rounded-md border border-border bg-muted p-4 font-mono text-sm leading-relaxed"
+          {...props}
+        >
+          {children}
+        </pre>
+      ),
+      blockquote: ({
+        children,
+        ...props
+      }: React.HTMLAttributes<HTMLQuoteElement>) => (
+        <blockquote
+          className="my-4 border-l-4 border-border pl-4 text-muted-foreground"
+          {...props}
+        >
+          {children}
+        </blockquote>
+      ),
+      a: ({
+        children,
+        href,
+        ...props
+      }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+        <a
+          href={href}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-primary hover:underline"
+          {...props}
+        >
+          {children}
+        </a>
+      ),
+      table: ({
+        children,
+        ...props
+      }: React.HTMLAttributes<HTMLTableElement>) => (
+        <div className="my-4 overflow-auto">
+          <table
+            className="w-full border-collapse border border-border text-sm"
+            {...props}
+          >
+            {children}
+          </table>
+        </div>
+      ),
+      th: ({
+        children,
+        ...props
+      }: React.HTMLAttributes<HTMLTableCellElement>) => (
+        <th
+          className="border border-border bg-muted px-3 py-2 text-left font-semibold"
+          {...props}
+        >
+          {children}
+        </th>
+      ),
+      td: ({
+        children,
+        ...props
+      }: React.HTMLAttributes<HTMLTableCellElement>) => (
+        <td className="border border-border px-3 py-2" {...props}>
+          {children}
+        </td>
+      ),
+      img: ({
+        src,
+        alt,
+        ...props
+      }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+        <MarkdownImage
+          src={src}
+          alt={alt}
+          resolveImageUrl={resolveImageUrl}
+          {...props}
+        />
+      ),
+    }),
+    [resolveImageUrl],
+  );
+
+  return (
+    <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,
+      )}
+    >
+      <ReactMarkdownImport
+        remarkPlugins={[remarkGfmImport]}
+        components={markdownComponents}
+      >
+        {content ?? ""}
+      </ReactMarkdownImport>
+    </div>
+  );
+}
+
+MarkdownRenderer.displayName = "MarkdownRenderer";

package/src/components/file-view/components/PlainTextRenderer.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { cn } from "../../../utils/cn";
+import type { FileRendererProps } from "../types";
+
+/**
+ * PlainTextRenderer
+ *
+ * Renders plain text content without line numbers.
+ * Used for .txt, .log, and as the ultimate fallback renderer.
+ */
+export function PlainTextRenderer({ content, className }: FileRendererProps) {
+  return (
+    <div
+      className={cn(
+        "h-full w-full overflow-auto rounded-md border border-border bg-background p-4",
+        "scrollbar-thin",
+        className,
+      )}
+    >
+      <pre className="m-0 whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-foreground">
+        {content ?? ""}
+      </pre>
+    </div>
+  );
+}
+
+PlainTextRenderer.displayName = "PlainTextRenderer";

package/src/components/file-view/components/index.ts

@@ -0,0 +1,4 @@
+export { CodeRenderer } from "./CodeRenderer";
+export { MarkdownRenderer } from "./MarkdownRenderer";
+export { ImageRenderer } from "./ImageRenderer";
+export { PlainTextRenderer } from "./PlainTextRenderer";

package/src/components/file-view/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useContentType } from "./useContentType";
+export type {
+  UseContentTypeOptions,
+  UseContentTypeReturn,
+} from "./useContentType";

package/src/components/file-view/hooks/useContentType.ts

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import type { ContentType, ContentTypeDetectionResult } from "../types";
+import { detectContentType } from "../utils/contentTypeDetection";
+
+export interface UseContentTypeOptions {
+  fileName: string;
+  contentTypeOverride?: ContentType;
+}
+
+export interface UseContentTypeReturn extends ContentTypeDetectionResult {
+  /** Whether the type was explicitly overridden. */
+  isOverridden: boolean;
+}
+
+/**
+ * Hook to determine the content type for a file.
+ * Uses explicit override if provided, otherwise auto-detects from fileName.
+ */
+export function useContentType({
+  fileName,
+  contentTypeOverride,
+}: UseContentTypeOptions): UseContentTypeReturn {
+  return useMemo(() => {
+    if (contentTypeOverride) {
+      return {
+        type: contentTypeOverride,
+        extension: null,
+        isOverridden: true,
+      };
+    }
+    const detected = detectContentType(fileName);
+    return { ...detected, isOverridden: false };
+  }, [fileName, contentTypeOverride]);
+}

package/src/components/file-view/hooks/useDarkMode.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback } from "react";
+
+/**
+ * Parse the lightness percentage from a `--background` CSS variable value.
+ * Expects HSL format like `"222 84% 5%"` or `"0 0% 100%"`.
+ * Returns the lightness as a number (0-100), or `null` if unparseable.
+ */
+function getBackgroundLightness(el: HTMLElement): number | null {
+  const value = getComputedStyle(el).getPropertyValue("--background").trim();
+  if (!value) return null;
+
+  // Match the last percentage in the HSL string (lightness)
+  const match = value.match(/(\d+(?:\.\d+)?)%\s*$/);
+  return match ? parseFloat(match[1]) : null;
+}
+
+/**
+ * Detects whether the current theme is "dark" by examining the
+ * `--background` CSS variable's lightness.
+ *
+ * Works with:
+ * - The theme system (`applyTheme` sets `--background` as inline style)
+ * - The `.dark` class (which also changes `--background` via CSS)
+ * - Any mechanism that updates `--background`
+ *
+ * SSR-safe: defaults to `false` when `document` is unavailable.
+ */
+export function useDarkMode(): boolean {
+  const checkDark = useCallback((): boolean => {
+    if (typeof document === "undefined") return false;
+    const lightness = getBackgroundLightness(document.documentElement);
+    // If we can't read the variable, fall back to checking .dark class
+    if (lightness === null) {
+      return document.documentElement.classList.contains("dark");
+    }
+    return lightness < 50;
+  }, []);
+
+  const [isDark, setIsDark] = useState(checkDark);
+
+  useEffect(() => {
+    const el = document.documentElement;
+
+    const update = () => {
+      setIsDark(checkDark());
+    };
+
+    // Watch both class and style attribute changes
+    const observer = new MutationObserver(update);
+    observer.observe(el, {
+      attributes: true,
+      attributeFilter: ["class", "style"],
+    });
+
+    // Sync in case the value changed between render and effect
+    update();
+
+    return () => observer.disconnect();
+  }, [checkDark]);
+
+  return isDark;
+}

package/src/components/file-view/hooks/useHighlightedTokens.ts

@@ -0,0 +1,83 @@
+import { useState, useEffect } from "react";
+import { useShikiHighlighter } from "./useShikiHighlighter";
+import { useDarkMode } from "./useDarkMode";
+
+export interface HighlightToken {
+  content: string;
+  color?: string;
+}
+
+export interface UseHighlightedTokensResult {
+  lines: HighlightToken[][] | null;
+}
+
+/**
+ * Combines the shiki highlighter + dark mode detection to produce
+ * highlighted tokens for a given code string and language.
+ *
+ * - Loads the language on demand (with try/catch for unsupported languages)
+ * - Returns `null` while loading or if shiki is unavailable (signals "use plain text")
+ * - Re-tokenizes when dark mode toggles
+ */
+export function useHighlightedTokens(
+  code: string,
+  language: string,
+): UseHighlightedTokensResult {
+  const { highlighter, isReady } = useShikiHighlighter();
+  const isDark = useDarkMode();
+  const [lines, setLines] = useState<HighlightToken[][] | null>(null);
+
+  useEffect(() => {
+    if (!isReady || !highlighter || !code) {
+      setLines(null);
+      return;
+    }
+
+    let cancelled = false;
+    const theme = isDark ? "github-dark" : "github-light";
+
+    (async () => {
+      try {
+        // Load language on demand — skip if it's plaintext
+        if (language !== "text") {
+          const loadedLangs = highlighter.getLoadedLanguages();
+          if (!loadedLangs.includes(language as never)) {
+            await highlighter.loadLanguage(language as Parameters<typeof highlighter.loadLanguage>[0]);
+          }
+        }
+      } catch {
+        // Language not supported by shiki — fall back to plain text
+        if (!cancelled) setLines(null);
+        return;
+      }
+
+      if (cancelled) return;
+
+      try {
+        const result = highlighter.codeToTokens(code, {
+          lang: language as Parameters<typeof highlighter.codeToTokens>[1]["lang"],
+          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 };
+}

package/src/components/file-view/hooks/useShikiHighlighter.ts

@@ -0,0 +1,69 @@
+import { useState, useEffect } from "react";
+
+type Highlighter = Awaited<ReturnType<typeof import("shiki")["createHighlighter"]>>;
+
+interface ShikiHighlighterState {
+  highlighter: Highlighter | null;
+  isReady: boolean;
+}
+
+/** Singleton: one global highlighter instance shared across all components. */
+let globalHighlighter: Highlighter | null = null;
+let initPromise: Promise<Highlighter | null> | null = null;
+
+async function getOrCreateHighlighter(): Promise<Highlighter | null> {
+  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 {
+        // shiki not installed or failed to load — fall back to plain text
+        return null;
+      }
+    })();
+  }
+
+  return initPromise;
+}
+
+/**
+ * Singleton async initialization of the shiki highlighter.
+ *
+ * - Dynamically imports shiki so it's an optional peer dependency
+ * - Creates one global `Highlighter` instance with github-light and github-dark themes
+ * - Languages are loaded on demand per-highlight call (not at init)
+ * - Returns `{ highlighter, isReady }`
+ */
+export function useShikiHighlighter(): ShikiHighlighterState {
+  const [state, setState] = useState<ShikiHighlighterState>({
+    highlighter: globalHighlighter,
+    isReady: globalHighlighter !== null,
+  });
+
+  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;
+}

package/src/components/file-view/index.ts

@@ -0,0 +1,47 @@
+/**
+ * FileView Module
+ *
+ * A configurable file viewer with pluggable renderers.
+ */
+
+// Main component
+export { FileView } from "./FileView";
+
+// Types
+export type {
+  BuiltInContentType,
+  ContentType,
+  ContentTypeDetectionResult,
+  FileRendererProps,
+  FileRenderer,
+  RendererRegistry,
+  FileViewError,
+  FileViewProps,
+  ResolveImageUrl,
+} from "./types";
+
+// Sub-components (for custom composition or standalone use)
+export { CodeRenderer } from "./components/CodeRenderer";
+export { MarkdownRenderer } from "./components/MarkdownRenderer";
+export { ImageRenderer } from "./components/ImageRenderer";
+export { PlainTextRenderer } from "./components/PlainTextRenderer";
+export { CsvRenderer } from "./components/CsvRenderer";
+export { HtmlRenderer } from "./components/HtmlRenderer";
+
+// Hooks
+export { useContentType } from "./hooks/useContentType";
+export type {
+  UseContentTypeOptions,
+  UseContentTypeReturn,
+} from "./hooks/useContentType";
+
+// Utilities
+export {
+  detectContentType,
+  getFileExtension,
+  isTextContentType,
+  isUrlContentType,
+  DEFAULT_RENDERERS,
+  mergeRenderers,
+  resolveRenderer,
+} from "./utils";