@optilogic/core 1.0.0-beta.9 → 1.1.0

package/src/components/data-grid/DataGrid.tsx

@@ -182,7 +182,7 @@ export function DataGrid<T = Record<string, CellValue>>({
   );
 
   // Use data grid state hook
-  const { state, actions, isControlled } = useDataGridState({
+  const { state, actions, processedDataRef, isControlled } = useDataGridState({
     sorting: controlledSorting,
     filters: controlledFilters,
     columnWidths: controlledColumnWidths,
@@ -229,6 +229,9 @@ export function DataGrid<T = Record<string, CellValue>>({
     visibleColumns,
   ]);
 
+  // Keep the state hook's ref in sync so editing resolves the correct row
+  processedDataRef.current = processedData;
+
   // Use column resize manager
   const { resizingColumn, getResizeProps } = useColumnResizeManager({
     columns: visibleColumns,
@@ -671,6 +674,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                             "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
                             showColumnBorders && "border-r border-border last:border-r-0",
                             isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
+                            isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
                             column.align === "center" && "text-center",
                             column.align === "right" && "text-right"
                           )}
@@ -864,6 +868,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                         "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
                         showColumnBorders && "border-r border-border last:border-r-0",
                         isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
+                        isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
                         column.align === "center" && "text-center",
                         column.align === "right" && "text-right"
                       )}

package/src/components/data-grid/components/CellEditor.tsx

@@ -147,7 +147,7 @@ export function CellEditor<T = Record<string, CellValue>>({
       onKeyDown={handleKeyDown}
       onBlur={handleBlur}
       className={cn(
-        "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm px-2",
+        "h-full w-full border-0 rounded-none bg-background focus:ring-0 text-sm px-2",
         validationError && "ring-2 ring-destructive focus:ring-destructive",
         className
       )}
@@ -165,7 +165,7 @@ export function CellEditor<T = Record<string, CellValue>>({
       onKeyDown={handleKeyDown}
       onBlur={handleBlur}
       className={cn(
-        "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm px-2",
+        "h-full w-full border-0 rounded-none bg-background focus:ring-0 text-sm px-2",
         validationError && "ring-2 ring-destructive focus:ring-destructive",
         className
       )}
@@ -234,7 +234,7 @@ export function CellEditor<T = Record<string, CellValue>>({
         <SelectTrigger
           ref={selectRef}
           className={cn(
-            "h-full w-full border-0 rounded-none focus:ring-2 focus:ring-primary text-sm",
+            "h-full w-full border-0 rounded-none bg-background focus:ring-0 text-sm",
             validationError && "ring-2 ring-destructive focus:ring-destructive",
             className
           )}

package/src/components/data-grid/hooks/useDataGridState.ts

@@ -6,7 +6,7 @@
  * cell focus, and cell editing.
  */
 
-import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { useState, useCallback, useMemo, useRef, useEffect, type MutableRefObject } from "react";
 import type {
   SortConfig,
   FilterConfig,
@@ -64,6 +64,8 @@ export interface UseDataGridStateReturn {
     commitEdit: (value?: CellValue) => void;
     cancelEdit: () => void;
   };
+  /** Ref that DataGrid should populate with the current processedData array */
+  processedDataRef: MutableRefObject<unknown[]>;
   isControlled: {
     sorting: boolean;
     filters: boolean;
@@ -126,6 +128,10 @@ export function useDataGridState<T = Record<string, CellValue>>(
     useState<CellPosition | null>(null);
   const [editingCell, setEditingCell] = useState<EditingCell | null>(null);
 
+  // Ref populated by DataGrid with the current sorted/filtered data.
+  // Editing callbacks read from this so they resolve the correct row after sort/filter.
+  const processedDataRef = useRef<unknown[]>([]);
+
   const sorting = isControlled.sorting ? controlledSorting! : internalSorting;
   const filters = isControlled.filters ? controlledFilters! : internalFilters;
   const focusedCell = isControlled.focusedCell
@@ -276,7 +282,12 @@ export function useDataGridState<T = Record<string, CellValue>>(
       const column = columns.find((c) => c.key === columnKey);
       if (!column || !column.editable) return;
 
-      const row = data[rowIndex];
+      // Use processedData (sorted/filtered) so the rowIndex maps to the
+      // correct visual row, falling back to the raw data array.
+      const resolvedData = processedDataRef.current.length > 0
+        ? processedDataRef.current
+        : data;
+      const row = resolvedData[rowIndex] as T | undefined;
       if (!row) return;
 
       const value = getCellValue(row, column);
@@ -305,7 +316,10 @@ export function useDataGridState<T = Record<string, CellValue>>(
 
     const column = columns.find((c) => c.key === columnKey);
     if (column?.validator) {
-      const row = data[rowIndex];
+      const resolvedData = processedDataRef.current.length > 0
+        ? processedDataRef.current
+        : data;
+      const row = resolvedData[rowIndex] as T;
       const validationResult = column.validator(value, row);
       if (validationResult !== true && typeof validationResult === "string") {
         return;
@@ -341,6 +355,7 @@ export function useDataGridState<T = Record<string, CellValue>>(
       commitEdit,
       cancelEdit,
     },
+    processedDataRef,
     isControlled,
   };
 }

package/src/components/data-grid/types.ts

@@ -137,6 +137,10 @@ export interface ColumnDef<T = Record<string, CellValue>> {
   /** Accessor function to get cell value (defaults to row[key]) */
   accessor?: (row: T) => CellValue;
 
+  // Data type
+  /** Data type hint for sorting/comparison (auto-detected from values if omitted) */
+  dataType?: "string" | "number" | "date" | "boolean";
+
   // Sorting
   /** Whether this column is sortable */
   sortable?: boolean;

package/src/components/data-grid/utils/dataProcessing.ts

@@ -59,20 +59,49 @@ export function applySorting<T>(
       if (aVal == null) return sort.direction === "asc" ? 1 : -1;
       if (bVal == null) return sort.direction === "asc" ? -1 : 1;
 
-      // Compare based on type
       let comparison = 0;
 
-      if (typeof aVal === "string" && typeof bVal === "string") {
-        comparison = aVal.localeCompare(bVal);
-      } else if (typeof aVal === "number" && typeof bVal === "number") {
-        comparison = aVal - bVal;
-      } else if (aVal instanceof Date && bVal instanceof Date) {
-        comparison = aVal.getTime() - bVal.getTime();
-      } else if (typeof aVal === "boolean" && typeof bVal === "boolean") {
-        comparison = aVal === bVal ? 0 : aVal ? 1 : -1;
-      } else {
-        // Fallback: convert to string
+      // If column specifies a dataType, coerce values accordingly
+      if (column.dataType === "number") {
+        const aNum = Number(aVal);
+        const bNum = Number(bVal);
+        if (!isNaN(aNum) && !isNaN(bNum)) {
+          comparison = aNum - bNum;
+        } else {
+          comparison = String(aVal).localeCompare(String(bVal));
+        }
+      } else if (column.dataType === "date") {
+        const aDate = aVal instanceof Date ? aVal : new Date(aVal as string | number);
+        const bDate = bVal instanceof Date ? bVal : new Date(bVal as string | number);
+        const aTime = isNaN(aDate.getTime()) ? 0 : aDate.getTime();
+        const bTime = isNaN(bDate.getTime()) ? 0 : bDate.getTime();
+        comparison = aTime - bTime;
+      } else if (column.dataType === "boolean") {
+        const aBool = aVal === true || aVal === "true" || aVal === 1;
+        const bBool = bVal === true || bVal === "true" || bVal === 1;
+        comparison = aBool === bBool ? 0 : aBool ? 1 : -1;
+      } else if (column.dataType === "string") {
         comparison = String(aVal).localeCompare(String(bVal));
+      } else {
+        // No dataType specified -- auto-detect from runtime types
+        if (typeof aVal === "number" && typeof bVal === "number") {
+          comparison = aVal - bVal;
+        } else if (aVal instanceof Date && bVal instanceof Date) {
+          comparison = aVal.getTime() - bVal.getTime();
+        } else if (typeof aVal === "boolean" && typeof bVal === "boolean") {
+          comparison = aVal === bVal ? 0 : aVal ? 1 : -1;
+        } else {
+          // Try numeric parse (handles string-encoded numbers from SQL results etc.)
+          const aStr = String(aVal);
+          const bStr = String(bVal);
+          const aNum = Number(aStr);
+          const bNum = Number(bStr);
+          if (!isNaN(aNum) && !isNaN(bNum) && aStr !== "" && bStr !== "") {
+            comparison = aNum - bNum;
+          } else {
+            comparison = aStr.localeCompare(bStr);
+          }
+        }
       }
 
       return sort.direction === "asc" ? comparison : -comparison;

package/src/components/date-picker.tsx

@@ -304,8 +304,9 @@ function DatePickerInput({
           <div
             className={cn(
               "flex items-center rounded-md border border-input bg-background ring-offset-background",
+              "hover:border-input-hover",
               "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-              disabled && "opacity-50 cursor-not-allowed",
+              disabled && "opacity-50 cursor-not-allowed hover:border-input",
               sizeClasses[size]
             )}
           >

package/src/components/dropdown-menu.tsx

@@ -73,7 +73,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-[8rem] max-w-[90vw] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",

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

@@ -0,0 +1,147 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+import { useContentType } from "./hooks/useContentType";
+import { mergeRenderers, resolveRenderer } from "./utils/rendererRegistry";
+import type { FileViewProps, FileViewError, RendererRegistry } from "./types";
+
+function DefaultEmptyState({ message }: { message: string }) {
+  return (
+    <div className="flex h-full w-full items-center justify-center text-sm text-muted-foreground">
+      {message}
+    </div>
+  );
+}
+
+function DefaultLoadingState() {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex flex-col items-center gap-3">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary/20 border-t-primary" />
+        <p className="text-sm text-muted-foreground">Loading file...</p>
+      </div>
+    </div>
+  );
+}
+
+function DefaultErrorState({ error }: { error: FileViewError }) {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="flex max-w-sm flex-col items-center gap-3 text-center">
+        <p className="text-sm font-medium text-destructive">{error.message}</p>
+        {error.onRetry && (
+          <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",
+            )}
+          >
+            Retry
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * FileView
+ *
+ * A configurable file viewer that detects content type from the file name
+ * and delegates rendering to a pluggable renderer system.
+ *
+ * Built-in renderers: Code, Markdown, Image, PlainText.
+ * Users can override any renderer or add custom ones via the `renderers` prop.
+ *
+ * @example
+ * <FileView fileName="app.tsx" content={sourceCode} />
+ *
+ * @example
+ * <FileView fileName="photo.png" content={null} url={imageUrl} />
+ *
+ * @example
+ * <FileView
+ *   fileName="data.txt"
+ *   content={jsonContent}
+ *   contentType="code"
+ *   renderers={{ code: MyCustomCodeRenderer }}
+ * />
+ */
+export 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,
+}: FileViewProps) {
+  const { type: resolvedType } = useContentType({
+    fileName,
+    contentTypeOverride,
+  });
+
+  const registry = React.useMemo<RendererRegistry>(
+    () => mergeRenderers(userRenderers),
+    [userRenderers],
+  );
+
+  const Renderer = React.useMemo(
+    () => resolveRenderer(registry, resolvedType),
+    [registry, resolvedType],
+  );
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className={cn("relative h-full w-full", className)}>
+        {loadingComponent ?? <DefaultLoadingState />}
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={cn("relative h-full w-full", className)}>
+        {ErrorComponent ? (
+          <ErrorComponent error={error} />
+        ) : (
+          <DefaultErrorState error={error} />
+        )}
+      </div>
+    );
+  }
+
+  // Empty state
+  if ((content == null || content === "") && url == null) {
+    return (
+      <div className={cn("relative h-full w-full", className)}>
+        {emptyComponent ?? <DefaultEmptyState message={emptyMessage} />}
+      </div>
+    );
+  }
+
+  // Render
+  return (
+    <div className={cn("relative h-full w-full", className)}>
+      <Renderer
+        content={content}
+        url={url ?? null}
+        fileName={fileName}
+        contentType={resolvedType}
+        className={rendererClassName}
+        resolveImageUrl={resolveImageUrl}
+      />
+    </div>
+  );
+}
+
+FileView.displayName = "FileView";

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { cn } from "../../../utils/cn";
+import { useHighlightedTokens } from "../hooks/useHighlightedTokens";
+import type { FileRendererProps } from "../types";
+import { getLanguageFromFileName } from "../utils/languageMapping";
+
+/**
+ * CodeRenderer
+ *
+ * Renders text content as code with line numbers in a left gutter.
+ * Uses shiki for syntax highlighting when available, falling back to
+ * plain monospace text otherwise.
+ *
+ * Layout:
+ * ┌─────────────────────────────────────────┐
+ * │  1 │ import React from "react";         │
+ * │  2 │                                    │
+ * │  3 │ export function App() {            │
+ * │  4 │   return <div>Hello</div>;         │
+ * │  5 │ }                                  │
+ * └─────────────────────────────────────────┘
+ */
+export function CodeRenderer({
+  content,
+  fileName,
+  className,
+}: FileRendererProps) {
+  const language = React.useMemo(
+    () => getLanguageFromFileName(fileName),
+    [fileName],
+  );
+
+  const plainLines = React.useMemo(
+    () => (content ?? "").split("\n"),
+    [content],
+  );
+
+  const { lines: highlightedLines } = useHighlightedTokens(
+    content ?? "",
+    language,
+  );
+
+  const gutterWidth = React.useMemo(
+    () => `${Math.max(String(plainLines.length).length, 2) + 2}ch`,
+    [plainLines.length],
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative h-full w-full overflow-auto rounded-md border border-border bg-background",
+        "scrollbar-thin",
+        className,
+      )}
+    >
+      <pre className="m-0 p-0">
+        <code className="block font-mono text-sm leading-relaxed">
+          {highlightedLines
+            ? highlightedLines.map((tokens, index) => (
+                <div key={index} className="flex">
+                  <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 }}
+                  >
+                    {index + 1}
+                  </span>
+                  <span className="whitespace-pre px-4">
+                    {tokens.length === 0 || (tokens.length === 1 && tokens[0].content === "")
+                      ? " "
+                      : tokens.map((token, ti) => (
+                          <span key={ti} style={{ color: token.color }}>
+                            {token.content}
+                          </span>
+                        ))}
+                  </span>
+                </div>
+              ))
+            : plainLines.map((line, index) => (
+                <div key={index} className="flex">
+                  <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 }}
+                  >
+                    {index + 1}
+                  </span>
+                  <span className="whitespace-pre px-4 text-foreground">
+                    {line || " "}
+                  </span>
+                </div>
+              ))}
+        </code>
+      </pre>
+    </div>
+  );
+}
+
+CodeRenderer.displayName = "CodeRenderer";

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

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { cn } from "../../../utils/cn";
+import { DataGrid } from "../../data-grid";
+import type { ColumnDef } from "../../data-grid";
+import type { FileRendererProps } from "../types";
+
+/**
+ * Parse a CSV/TSV string into headers and row objects.
+ * Handles quoted fields and double-quote escaping.
+ */
+function parseCSV(text: string): {
+  headers: string[];
+  rows: Record<string, string>[];
+} {
+  const lines = text.split("\n");
+  if (lines.length === 0) return { headers: [], rows: [] };
+
+  // Auto-detect delimiter: if first line has tabs, treat as TSV
+  const firstLine = lines[0] ?? "";
+  const delimiter = firstLine.includes("\t") ? "\t" : ",";
+
+  function parseLine(line: string): string[] {
+    const fields: string[] = [];
+    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: Record<string, string>[] = [];
+
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i]!;
+    if (line.trim() === "") continue;
+    const values = parseLine(line);
+    const row: Record<string, string> = {};
+    for (let j = 0; j < headers.length; j++) {
+      row[headers[j]!] = values[j] ?? "";
+    }
+    rows.push(row);
+  }
+
+  return { headers, rows };
+}
+
+/**
+ * CsvRenderer
+ *
+ * Parses CSV/TSV content and renders it in a DataGrid
+ * with sorting, filtering, resizable columns, and virtualization.
+ */
+export function CsvRenderer({ content, className }: FileRendererProps) {
+  const { headers, rows } = React.useMemo(
+    () => parseCSV(content ?? ""),
+    [content],
+  );
+
+  const columns = React.useMemo<ColumnDef<Record<string, string>>[]>(
+    () =>
+      headers.map((header) => ({
+        key: header,
+        header,
+        sortable: true,
+        filterable: true,
+        filterType: "text" as const,
+      })),
+    [headers],
+  );
+
+  if (headers.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-center text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        No CSV data to display
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("h-full w-full overflow-auto", className)}>
+      <DataGrid
+        data={rows}
+        columns={columns}
+        getRowKey={(_, index) => String(index)}
+        resizableColumns
+      />
+    </div>
+  );
+}
+
+CsvRenderer.displayName = "CsvRenderer";

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

@@ -0,0 +1,24 @@
+import { cn } from "../../../utils/cn";
+import type { FileRendererProps } from "../types";
+
+/**
+ * HtmlRenderer
+ *
+ * Renders HTML content in a fully sandboxed iframe.
+ */
+export function HtmlRenderer({
+  content,
+  fileName,
+  className,
+}: FileRendererProps) {
+  return (
+    <iframe
+      srcDoc={content ?? ""}
+      sandbox="allow-scripts"
+      title={fileName}
+      className={cn("h-full w-full border-0", className)}
+    />
+  );
+}
+
+HtmlRenderer.displayName = "HtmlRenderer";

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cn } from "../../../utils/cn";
+import type { FileRendererProps } from "../types";
+
+/**
+ * ImageRenderer
+ *
+ * Renders an image from a URL, centered in its container.
+ * Handles load errors with a fallback message.
+ */
+export function ImageRenderer({
+  url,
+  fileName,
+  className,
+}: FileRendererProps) {
+  const [hasError, setHasError] = React.useState(false);
+
+  React.useEffect(() => {
+    setHasError(false);
+  }, [url]);
+
+  if (!url) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full items-center justify-center text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        No image URL provided
+      </div>
+    );
+  }
+
+  if (hasError) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full flex-col items-center justify-center gap-2 text-sm text-muted-foreground",
+          className,
+        )}
+      >
+        <span>Failed to load image</span>
+        <span className="text-xs">{fileName}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full items-center justify-center overflow-auto bg-background p-4",
+        "scrollbar-thin",
+        className,
+      )}
+    >
+      <img
+        src={url}
+        alt={fileName}
+        onError={() => setHasError(true)}
+        className="max-h-full max-w-full object-contain"
+      />
+    </div>
+  );
+}
+
+ImageRenderer.displayName = "ImageRenderer";