@optilogic/core 1.0.0-beta.9 → 1.0.0

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

@@ -0,0 +1,180 @@
+import type * as React from "react";
+
+// ============ CONTENT TYPES ============
+
+/**
+ * Built-in content types that FileView can render.
+ */
+export type BuiltInContentType =
+  | "code"
+  | "markdown"
+  | "image"
+  | "pdf"
+  | "csv"
+  | "html"
+  | "plaintext"
+  | "unknown";
+
+/**
+ * Content type - either a built-in type or a custom string.
+ * The `(string & {})` pattern preserves autocomplete for built-in types
+ * while accepting arbitrary strings for custom renderers.
+ */
+export type ContentType = BuiltInContentType | (string & {});
+
+// ============ IMAGE RESOLUTION ============
+
+/**
+ * Callback to resolve image `src` values to renderable URLs.
+ * Called for non-remote, non-data-URI image sources in markdown content.
+ * Can return a blob URL, data URL, or any string that works as an `<img>` src.
+ */
+export type ResolveImageUrl = (src: string) => Promise<string> | string;
+
+// ============ RENDERER TYPES ============
+
+/**
+ * Props passed to every renderer component.
+ * All renderers receive a consistent contract regardless of content type.
+ */
+export interface FileRendererProps {
+  /** Text content of the file. Null when content is binary/URL-based. */
+  content: string | null;
+  /** URL for binary content (images, PDFs). Null for text-based content. */
+  url: string | null;
+  /** The file name, used for display and language detection. */
+  fileName: string;
+  /** The resolved content type. */
+  contentType: ContentType;
+  /** Optional className for the renderer container. */
+  className?: string;
+  /** Optional callback to resolve relative image URLs in markdown content. */
+  resolveImageUrl?: ResolveImageUrl;
+}
+
+/**
+ * A renderer component that can render file content.
+ */
+export type FileRenderer = React.ComponentType<FileRendererProps>;
+
+/**
+ * Registry mapping content types to renderer components.
+ * Users can override individual renderers by providing their own map.
+ */
+export type RendererRegistry = Partial<Record<ContentType, FileRenderer>>;
+
+// ============ STATE TYPES ============
+
+/**
+ * Error information for the FileView.
+ */
+export interface FileViewError {
+  /** Error message to display. */
+  message: string;
+  /** Optional retry callback. If provided, a retry button is shown. */
+  onRetry?: () => void;
+}
+
+// ============ COMPONENT PROPS ============
+
+/**
+ * Props for the FileView component.
+ */
+export interface FileViewProps {
+  // ============ CONTENT ============
+
+  /**
+   * Text content of the file.
+   * For text-based files (code, markdown, plaintext, csv), pass the string content.
+   * For binary files (images, PDFs), pass null and use `url` instead.
+   */
+  content: string | null;
+
+  /**
+   * URL for binary content.
+   * Used for images, PDFs, and other non-text content.
+   * Can be an object URL, data URL, or HTTP URL.
+   */
+  url?: string | null;
+
+  /**
+   * The file name including extension.
+   * Used for content type detection and display context.
+   * @example "README.md", "app.tsx", "photo.png"
+   */
+  fileName: string;
+
+  // ============ CONTENT TYPE ============
+
+  /**
+   * Explicit content type override.
+   * When provided, bypasses automatic detection from fileName.
+   */
+  contentType?: ContentType;
+
+  // ============ RENDERERS ============
+
+  /**
+   * Custom renderer overrides.
+   * Merges with (and overrides) the default renderer registry.
+   * Only the types you specify are overridden; others use defaults.
+   *
+   * @example
+   * renderers={{ code: MyCustomCodeRenderer }}
+   */
+  renderers?: RendererRegistry;
+
+  // ============ STATE ============
+
+  /** Loading state. When true, shows loading indicator. */
+  loading?: boolean;
+
+  /** Error state. When provided, shows error message with optional retry. */
+  error?: FileViewError | null;
+
+  // ============ CUSTOMIZATION ============
+
+  /** Custom loading component. Replaces the default spinner. */
+  loadingComponent?: React.ReactNode;
+
+  /** Custom empty state component. Shown when content is null/empty and not loading/error. */
+  emptyComponent?: React.ReactNode;
+
+  /**
+   * Empty state message. Used when no custom emptyComponent is provided.
+   * @default "No content to display"
+   */
+  emptyMessage?: string;
+
+  /** Custom error component. Replaces the default error display. */
+  errorComponent?: React.ComponentType<{ error: FileViewError }>;
+
+  // ============ STYLING ============
+
+  /** Additional class name for the outermost container. */
+  className?: string;
+
+  /** Additional class name passed to the active renderer. */
+  rendererClassName?: string;
+
+  // ============ IMAGE RESOLUTION ============
+
+  /**
+   * Optional callback to resolve image `src` values to renderable URLs.
+   * Used by MarkdownRenderer for relative/non-remote image paths.
+   * Remote URLs (http/https) and data URIs are passed through unchanged.
+   */
+  resolveImageUrl?: ResolveImageUrl;
+}
+
+// ============ DETECTION TYPES ============
+
+/**
+ * Content type detection result.
+ */
+export interface ContentTypeDetectionResult {
+  /** The detected content type. */
+  type: ContentType;
+  /** The file extension that was matched, if any. */
+  extension: string | null;
+}

package/src/components/file-view/utils/contentTypeDetection.ts

@@ -0,0 +1,157 @@
+import type { ContentType, ContentTypeDetectionResult } from "../types";
+
+/**
+ * Extension-to-content-type mapping.
+ */
+const EXTENSION_MAP: Record<string, ContentType> = {
+  // 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",
+};
+
+/**
+ * Special file names (without extension) that map to content types.
+ */
+const SPECIAL_FILES: Record<string, ContentType> = {
+  dockerfile: "code",
+  makefile: "code",
+  rakefile: "code",
+  gemfile: "code",
+  procfile: "code",
+};
+
+/**
+ * Extract the file extension from a file name.
+ * Handles dotfiles (e.g., ".gitignore" -> "gitignore") and
+ * compound extensions (e.g., "file.test.ts" -> "ts").
+ */
+export function getFileExtension(fileName: string): string | null {
+  if (!fileName) return null;
+
+  const baseName = fileName.split("/").pop() || fileName;
+
+  // Dotfile with no other extension (e.g., ".gitignore")
+  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();
+}
+
+/**
+ * Detect content type from a file name.
+ *
+ * @example
+ * detectContentType("app.tsx")     // { type: "code", extension: "tsx" }
+ * detectContentType("README.md")   // { type: "markdown", extension: "md" }
+ * detectContentType("photo.png")   // { type: "image", extension: "png" }
+ * detectContentType("unknown.xyz") // { type: "unknown", extension: "xyz" }
+ */
+export function detectContentType(
+  fileName: string,
+): ContentTypeDetectionResult {
+  // Check special file names first
+  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 };
+}
+
+/**
+ * Check if a content type is text-based (uses `content` string).
+ */
+export function isTextContentType(contentType: ContentType): boolean {
+  return (
+    contentType === "code" ||
+    contentType === "markdown" ||
+    contentType === "plaintext" ||
+    contentType === "csv" ||
+    contentType === "html" ||
+    contentType === "unknown"
+  );
+}
+
+/**
+ * Check if a content type is URL-based (uses `url` string).
+ */
+export function isUrlContentType(contentType: ContentType): boolean {
+  return contentType === "image" || contentType === "pdf";
+}

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

@@ -0,0 +1,12 @@
+export {
+  detectContentType,
+  getFileExtension,
+  isTextContentType,
+  isUrlContentType,
+} from "./contentTypeDetection";
+
+export {
+  DEFAULT_RENDERERS,
+  mergeRenderers,
+  resolveRenderer,
+} from "./rendererRegistry";

package/src/components/file-view/utils/languageMapping.ts

@@ -0,0 +1,78 @@
+/**
+ * Maps file extensions to shiki language IDs.
+ *
+ * Most extensions work directly as shiki lang IDs. This map only
+ * contains edge-cases where the extension differs from the shiki ID.
+ */
+const EXTENSION_OVERRIDES: Record<string, string> = {
+  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",
+};
+
+/**
+ * Special file names (without extension) mapped to shiki language IDs.
+ */
+const SPECIAL_FILE_LANGUAGES: Record<string, string> = {
+  dockerfile: "dockerfile",
+  makefile: "makefile",
+  rakefile: "ruby",
+  gemfile: "ruby",
+  procfile: "yaml",
+};
+
+/**
+ * Get the shiki language ID for a given file name.
+ *
+ * @example
+ * getLanguageFromFileName("app.tsx")       // "tsx"
+ * getLanguageFromFileName("config.yml")    // "yaml"
+ * getLanguageFromFileName("Dockerfile")    // "dockerfile"
+ * getLanguageFromFileName("unknown.xyz")   // "text"
+ */
+export function getLanguageFromFileName(fileName: string): string {
+  const baseName = (fileName.split("/").pop() || fileName).toLowerCase();
+
+  // Check special file names
+  const specialLang = SPECIAL_FILE_LANGUAGES[baseName];
+  if (specialLang) return specialLang;
+
+  // Extract extension
+  let ext: string | null = 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";
+
+  // Check overrides first, then use extension directly as shiki lang ID
+  return EXTENSION_OVERRIDES[ext] ?? ext;
+}

package/src/components/file-view/utils/rendererRegistry.ts

@@ -0,0 +1,42 @@
+import type { RendererRegistry, FileRenderer } from "../types";
+import { CodeRenderer } from "../components/CodeRenderer";
+import { MarkdownRenderer } from "../components/MarkdownRenderer";
+import { ImageRenderer } from "../components/ImageRenderer";
+import { PlainTextRenderer } from "../components/PlainTextRenderer";
+import { CsvRenderer } from "../components/CsvRenderer";
+import { HtmlRenderer } from "../components/HtmlRenderer";
+
+/**
+ * Default renderer registry.
+ * Maps built-in content types to their default renderer components.
+ */
+export const DEFAULT_RENDERERS: RendererRegistry = {
+  code: CodeRenderer,
+  markdown: MarkdownRenderer,
+  image: ImageRenderer,
+  plaintext: PlainTextRenderer,
+  csv: CsvRenderer,
+  html: HtmlRenderer,
+};
+
+/**
+ * Merge user-provided renderers with defaults.
+ * User renderers override defaults for the same content type.
+ */
+export function mergeRenderers(
+  userRenderers?: RendererRegistry,
+): RendererRegistry {
+  if (!userRenderers) return DEFAULT_RENDERERS;
+  return { ...DEFAULT_RENDERERS, ...userRenderers };
+}
+
+/**
+ * Resolve a renderer for a given content type.
+ * Falls back to PlainTextRenderer if no match found.
+ */
+export function resolveRenderer(
+  registry: RendererRegistry,
+  contentType: string,
+): FileRenderer {
+  return registry[contentType] ?? registry["plaintext"] ?? PlainTextRenderer;
+}

package/src/components/input.tsx

@@ -26,7 +26,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-input-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input md:text-sm",
           className
         )}
         ref={ref}

package/src/components/popover.tsx

@@ -44,7 +44,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        "z-50 w-auto max-w-[90vw] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
         // Animation
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",

package/src/components/select.tsx

@@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground hover:border-input-hover focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input [&>span]:line-clamp-1",
       className
     )}
     {...props}

package/src/components/switch.tsx

@@ -32,9 +32,11 @@ const Switch = React.forwardRef<
       // Focus styles
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
       // Disabled styles
-      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
       // Unchecked state
-      "bg-input",
+      "bg-toggle-track",
+      // Hover
+      "hover:bg-toggle-track/80 data-[state=checked]:hover:bg-primary/80",
       // Checked state
       "data-[state=checked]:bg-primary",
       className
@@ -46,7 +48,7 @@ const Switch = React.forwardRef<
       className={cn(
         // Base styles
         "pointer-events-none block h-4 w-4 rounded-full",
-        "bg-background shadow-lg ring-0",
+        "bg-toggle-track-foreground shadow-lg ring-0",
         "transition-transform",
         // Position based on state
         "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"

package/src/components/textarea.tsx

@@ -22,7 +22,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground hover:border-input-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input md:text-sm",
           className
         )}
         ref={ref}

package/src/index.ts

@@ -321,6 +321,45 @@ export {
   type UseContextMenuResult,
 } from "./components/context-menu";
 
+// FileView - Configurable file viewer with pluggable renderers
+export {
+  // Main component
+  FileView,
+
+  // Types
+  type BuiltInContentType,
+  type ContentType,
+  type ContentTypeDetectionResult,
+  type FileRendererProps,
+  type FileRenderer,
+  type RendererRegistry,
+  type FileViewError,
+  type FileViewProps,
+  type ResolveImageUrl,
+
+  // Sub-components (for custom composition or standalone use)
+  CodeRenderer,
+  MarkdownRenderer,
+  ImageRenderer,
+  PlainTextRenderer,
+  CsvRenderer,
+  HtmlRenderer,
+
+  // Hooks
+  useContentType,
+  type UseContentTypeOptions,
+  type UseContentTypeReturn,
+
+  // Utilities
+  detectContentType,
+  getFileExtension,
+  isTextContentType,
+  isUrlContentType,
+  DEFAULT_RENDERERS,
+  mergeRenderers,
+  resolveRenderer,
+} from "./components/file-view/index";
+
 // Theme system
 export {
   // Types

package/src/styles.css

@@ -40,15 +40,26 @@
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
+    --toggle-track: var(--muted);
+    --toggle-track-foreground: var(--background);
+    --input-hover: var(--foreground);
     --divider: 214.3 31.8% 91.4%;
     --chip: 210 40% 96.1%;
     --chip-foreground: 222.2 47.4% 11.2%;
+    --disabled-opacity: 0.5;
     --radius: 0.5rem;
     --chart-1: 12 76% 61%;
     --chart-2: 173 58% 39%;
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --chart-6: 262 60% 55%;
+    --chart-7: 142 60% 45%;
+    --chart-8: 350 65% 55%;
+    --chart-9: 200 70% 50%;
+    --chart-10: 60 65% 50%;
+    --chart-11: 310 55% 50%;
+    --chart-12: 180 50% 45%;
   }
 
   .dark {
@@ -75,14 +86,25 @@
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --toggle-track: var(--muted);
+    --toggle-track-foreground: var(--background);
+    --input-hover: var(--foreground);
     --divider: 217.2 32.6% 17.5%;
     --chip: 217.2 32.6% 17.5%;
     --chip-foreground: 210 40% 98%;
+    --disabled-opacity: 0.5;
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --chart-6: 120 55% 50%;
+    --chart-7: 200 75% 55%;
+    --chart-8: 50 80% 55%;
+    --chart-9: 0 70% 55%;
+    --chart-10: 260 65% 60%;
+    --chart-11: 180 60% 50%;
+    --chart-12: 90 55% 55%;
   }
 }
 

package/src/tailwind-preset.ts

@@ -83,10 +83,19 @@ export const optiUiPreset: Partial<Config> = {
 
         // Border, input, ring
         border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
+        input: {
+          DEFAULT: "hsl(var(--input))",
+          hover: "hsl(var(--input-hover))",
+        },
         ring: "hsl(var(--ring))",
         divider: "hsl(var(--divider))",
 
+        // Toggle/switch track
+        "toggle-track": {
+          DEFAULT: "hsl(var(--toggle-track))",
+          foreground: "hsl(var(--toggle-track-foreground))",
+        },
+
         // Chip
         chip: {
           DEFAULT: "hsl(var(--chip))",
@@ -100,6 +109,13 @@ export const optiUiPreset: Partial<Config> = {
           3: "hsl(var(--chart-3))",
           4: "hsl(var(--chart-4))",
           5: "hsl(var(--chart-5))",
+          6: "hsl(var(--chart-6))",
+          7: "hsl(var(--chart-7))",
+          8: "hsl(var(--chart-8))",
+          9: "hsl(var(--chart-9))",
+          10: "hsl(var(--chart-10))",
+          11: "hsl(var(--chart-11))",
+          12: "hsl(var(--chart-12))",
         },
       },
       borderRadius: {

package/src/theme/index.ts

@@ -38,4 +38,9 @@ export {
   areThemesEqual,
   exportTheme,
   importTheme,
+  getRelativeLuminance,
+  getContrastRatio,
+  validateThemeContrast,
 } from "./utils";
+
+export type { ContrastWarning } from "./utils";