@optilogic/core 1.0.0-beta.8 → 1.0.0

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,23 +59,25 @@ 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) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground",
-        primary: "bg-accent text-accent-foreground shadow hover:shadow-md",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "bg-muted text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:text-muted-foreground",
+        primary: "bg-accent text-accent-foreground shadow hover:shadow-md disabled:opacity-50",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow-md disabled:opacity-50",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:bg-muted/20 disabled:text-muted-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 disabled:opacity-50",
+        ghost: "text-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground disabled:bg-muted/30 disabled:opacity-70",
+        link: "text-primary underline-offset-4 hover:underline disabled:opacity-50 disabled:text-muted-foreground"
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -107,7 +113,7 @@ var Input = React20__namespace.forwardRef(
       {
         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,
@@ -135,7 +141,7 @@ var Textarea = React20__namespace.forwardRef(
       "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,
@@ -223,9 +229,11 @@ var Switch = React20__namespace.forwardRef(({ className, ...props }, ref) => /*
       // 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
@@ -238,7 +246,7 @@ var Switch = React20__namespace.forwardRef(({ className, ...props }, ref) => /*
         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"
@@ -301,7 +309,7 @@ var SelectTrigger = React20__namespace.forwardRef(({ className, children, ...pro
   {
     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,
@@ -637,7 +645,7 @@ var PopoverContent = React20__namespace.forwardRef(({ className, align = "center
     align,
     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",
@@ -698,7 +706,7 @@ var DropdownMenuContent = React20__namespace.forwardRef(({ className, sideOffset
     ref,
     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",
@@ -2735,19 +2743,19 @@ function Calendar({
       className: cn("p-3", className),
       classNames: {
         months: "flex flex-col sm:flex-row gap-4",
-        month: "flex flex-col gap-4",
-        month_caption: "flex justify-center pt-1 relative items-center h-7 px-10",
+        month: "flex flex-col gap-2 relative px-8",
+        month_caption: "flex justify-center pt-1 items-center h-7",
         caption_label: "text-sm font-medium hidden",
         nav: "flex items-center gap-1",
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
+          "absolute left-1 top-1/2 -translate-y-1/2 h-6 w-6 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
         ),
         button_next: cn(
           buttonVariants({ variant: "outline" }),
-          "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
+          "absolute right-1 top-1/2 -translate-y-1/2 h-6 w-6 bg-transparent p-0 opacity-50 hover:opacity-100 z-10"
         ),
-        month_grid: "w-full border-collapse px-1",
+        month_grid: "border-collapse mx-auto",
         weekdays: "flex",
         weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         week: "flex w-full mt-2",
@@ -2772,12 +2780,12 @@ function Calendar({
       components: {
         Chevron: ({ orientation }) => {
           const Icon2 = orientation === "left" ? lucideReact.ChevronLeft : lucideReact.ChevronRight;
-          return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-4 w-4" });
+          return /* @__PURE__ */ jsxRuntime.jsx(Icon2, { className: "h-3.5 w-3.5" });
         },
         MonthCaption: ({ calendarMonth }) => {
           const month = calendarMonth.date.getMonth();
           const year = calendarMonth.date.getFullYear();
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1 px-10", children: [
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               Select,
               {
@@ -3013,8 +3021,9 @@ function DatePickerInput({
       {
         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]
         ),
         children: [
@@ -3646,7 +3655,7 @@ function CellEditor({
       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
       ),
@@ -3664,7 +3673,7 @@ function CellEditor({
       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
       ),
@@ -3734,7 +3743,7 @@ function CellEditor({
             {
               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
               ),
@@ -3879,6 +3888,7 @@ function useDataGridState(options) {
   const [internalColumnWidths, setInternalColumnWidths] = React20.useState(defaultColumnWidths);
   const [internalFocusedCell, setInternalFocusedCell] = React20.useState(null);
   const [editingCell, setEditingCell] = React20.useState(null);
+  const processedDataRef = React20.useRef([]);
   const sorting = isControlled.sorting ? controlledSorting : internalSorting;
   const filters = isControlled.filters ? controlledFilters : internalFilters;
   const focusedCell = isControlled.focusedCell ? controlledFocusedCell : internalFocusedCell;
@@ -3999,7 +4009,8 @@ function useDataGridState(options) {
       }
       const column = columns.find((c) => c.key === columnKey);
       if (!column || !column.editable) return;
-      const row = data[rowIndex];
+      const resolvedData = processedDataRef.current.length > 0 ? processedDataRef.current : data;
+      const row = resolvedData[rowIndex];
       if (!row) return;
       const value = getCellValue2(row, column);
       setEditingCell({
@@ -4021,7 +4032,8 @@ function useDataGridState(options) {
     const value = valueOverride !== void 0 ? valueOverride : editingCell.value;
     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];
       const validationResult = column.validator(value, row);
       if (validationResult !== true && typeof validationResult === "string") {
         return;
@@ -4053,6 +4065,7 @@ function useDataGridState(options) {
       commitEdit,
       cancelEdit
     },
+    processedDataRef,
     isControlled
   };
 }
@@ -4506,16 +4519,44 @@ function applySorting(data, sorting, columns) {
       if (aVal == null) return sort.direction === "asc" ? 1 : -1;
       if (bVal == null) return sort.direction === "asc" ? -1 : 1;
       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 {
+      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);
+        const bDate = bVal instanceof Date ? bVal : new Date(bVal);
+        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 {
+        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 {
+          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;
     });
@@ -4737,7 +4778,7 @@ function DataGrid({
     },
     []
   );
-  const { state, actions, isControlled } = useDataGridState({
+  const { state, actions, processedDataRef, isControlled } = useDataGridState({
     sorting: controlledSorting,
     filters: controlledFilters,
     columnWidths: controlledColumnWidths,
@@ -4776,6 +4817,7 @@ function DataGrid({
     state.sorting,
     visibleColumns
   ]);
+  processedDataRef.current = processedData;
   const { resizingColumn, getResizeProps } = useColumnResizeManager({
     columns: visibleColumns,
     columnWidths: state.columnWidths,
@@ -5111,6 +5153,7 @@ function DataGrid({
                                   "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"
                                 ),
@@ -5280,6 +5323,7 @@ function DataGrid({
                         "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"
                       ),
@@ -5535,8 +5579,9 @@ function Autocomplete({
         disabled,
         className: cn(
           "flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background",
+          "hover:border-input-hover",
           "focus:outline-none focus:ring-1 focus:ring-ring",
-          "disabled:cursor-not-allowed disabled:opacity-50",
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-input",
           !selectedOption && "text-muted-foreground",
           className
         ),
@@ -5767,11 +5812,21 @@ var GREEN_THEME = {
   border: "#243630",
   input: "#243630",
   ring: "#6FCF97",
+  toggleTrack: "#354840",
+  toggleTrackForeground: "#E6F5EC",
+  inputHover: "#6FCF97",
   chart1: "#6FCF97",
   chart2: "#8FE3B0",
   chart3: "#9DB8A8",
   chart4: "#2d4038",
   chart5: "#354840",
+  chart6: "#4CAF50",
+  chart7: "#81C784",
+  chart8: "#F2C94C",
+  chart9: "#EB5757",
+  chart10: "#56CCF2",
+  chart11: "#BB6BD9",
+  chart12: "#2D9CDB",
   radius: "0.5rem"
 };
 var OPTILOGIC_LEGACY_THEME = {
@@ -5802,13 +5857,23 @@ var OPTILOGIC_LEGACY_THEME = {
   chip: "#B8C5F9",
   chipForeground: "#0C0A5A",
   border: "#D0D0D0",
-  input: "#FFFFFF",
+  input: "#D0D0D0",
   ring: "#5766F2",
+  toggleTrack: "#D0D0D0",
+  toggleTrackForeground: "#FFFFFF",
+  inputHover: "#5766F2",
   chart1: "#78D237",
   chart2: "#F5CF47",
   chart3: "#5766F2",
   chart4: "#44BD7E",
   chart5: "#929BEF",
+  chart6: "#DB2828",
+  chart7: "#E07B39",
+  chart8: "#2BBBAD",
+  chart9: "#A5673F",
+  chart10: "#00B5AD",
+  chart11: "#6435C9",
+  chart12: "#E03997",
   radius: "0.5rem"
 };
 var FUTURISTIC_THEME = {
@@ -5841,11 +5906,21 @@ var FUTURISTIC_THEME = {
   border: "#1e293b",
   input: "#1e293b",
   ring: "#6366f1",
+  toggleTrack: "#334155",
+  toggleTrackForeground: "#e0e7ff",
+  inputHover: "#6366f1",
   chart1: "#6366f1",
   chart2: "#8b5cf6",
   chart3: "#a855f7",
   chart4: "#ec4899",
   chart5: "#f43f5e",
+  chart6: "#06b6d4",
+  chart7: "#14b8a6",
+  chart8: "#f97316",
+  chart9: "#eab308",
+  chart10: "#22c55e",
+  chart11: "#0ea5e9",
+  chart12: "#f43f5e",
   radius: "0.5rem"
 };
 var NATURE_THEME = {
@@ -5878,11 +5953,21 @@ var NATURE_THEME = {
   border: "#243824",
   input: "#243824",
   ring: "#4caf50",
+  toggleTrack: "#3d5a3d",
+  toggleTrackForeground: "#e8f5e9",
+  inputHover: "#4caf50",
   chart1: "#4caf50",
   chart2: "#66bb6a",
   chart3: "#81c784",
   chart4: "#a5d6a7",
   chart5: "#c8e6c9",
+  chart6: "#8bc34a",
+  chart7: "#cddc39",
+  chart8: "#ffb74d",
+  chart9: "#4db6ac",
+  chart10: "#7986cb",
+  chart11: "#e57373",
+  chart12: "#64b5f6",
   radius: "0.5rem"
 };
 var SCIFI_THEME = {
@@ -5915,11 +6000,21 @@ var SCIFI_THEME = {
   border: "#30363d",
   input: "#21262d",
   ring: "#00d9ff",
+  toggleTrack: "#30363d",
+  toggleTrackForeground: "#c9d1d9",
+  inputHover: "#00d9ff",
   chart1: "#00d9ff",
   chart2: "#ff00ff",
   chart3: "#00ff88",
   chart4: "#ffd93d",
   chart5: "#58a6ff",
+  chart6: "#ff6b6b",
+  chart7: "#4ecdc4",
+  chart8: "#a855f7",
+  chart9: "#fb923c",
+  chart10: "#38bdf8",
+  chart11: "#f472b6",
+  chart12: "#34d399",
   radius: "0.5rem"
 };
 var OCEAN_THEME = {
@@ -5952,11 +6047,21 @@ var OCEAN_THEME = {
   border: "#1e3a5f",
   input: "#1e3a5f",
   ring: "#2196f3",
+  toggleTrack: "#264a6e",
+  toggleTrackForeground: "#e3f2fd",
+  inputHover: "#2196f3",
   chart1: "#2196f3",
   chart2: "#00bcd4",
   chart3: "#03a9f4",
   chart4: "#0288d1",
   chart5: "#0277bd",
+  chart6: "#26c6da",
+  chart7: "#42a5f5",
+  chart8: "#66bb6a",
+  chart9: "#ffb74d",
+  chart10: "#ef5350",
+  chart11: "#ab47bc",
+  chart12: "#78909c",
   radius: "0.5rem"
 };
 var SUNSET_THEME = {
@@ -5989,11 +6094,21 @@ var SUNSET_THEME = {
   border: "#241424",
   input: "#241424",
   ring: "#ff6b35",
+  toggleTrack: "#3d2a3d",
+  toggleTrackForeground: "#ffe0e6",
+  inputHover: "#ff6b35",
   chart1: "#ff6b35",
   chart2: "#c44569",
   chart3: "#f7931e",
   chart4: "#ffb703",
   chart5: "#ff8c42",
+  chart6: "#06d6a0",
+  chart7: "#118ab2",
+  chart8: "#ef476f",
+  chart9: "#ffd166",
+  chart10: "#073b4c",
+  chart11: "#8338ec",
+  chart12: "#3a86ff",
   radius: "0.5rem"
 };
 var FOREST_THEME = {
@@ -6026,11 +6141,21 @@ var FOREST_THEME = {
   border: "#1b5e20",
   input: "#1a2e1a",
   ring: "#2e7d32",
+  toggleTrack: "#2d4a2d",
+  toggleTrackForeground: "#e8f5e9",
+  inputHover: "#2e7d32",
   chart1: "#2e7d32",
   chart2: "#388e3c",
   chart3: "#43a047",
   chart4: "#66bb6a",
   chart5: "#81c784",
+  chart6: "#a5d6a7",
+  chart7: "#c8e6c9",
+  chart8: "#ffb74d",
+  chart9: "#4db6ac",
+  chart10: "#7986cb",
+  chart11: "#e57373",
+  chart12: "#64b5f6",
   radius: "0.5rem"
 };
 var CYBERPUNK_THEME = {
@@ -6063,11 +6188,21 @@ var CYBERPUNK_THEME = {
   border: "#1a1a2e",
   input: "#16213e",
   ring: "#ff00ff",
+  toggleTrack: "#2a2a4e",
+  toggleTrackForeground: "#f0f0f0",
+  inputHover: "#ff00ff",
   chart1: "#ff00ff",
   chart2: "#00ffff",
   chart3: "#00ff88",
   chart4: "#ffd700",
   chart5: "#ff1744",
+  chart6: "#ff6b6b",
+  chart7: "#4ecdc4",
+  chart8: "#a855f7",
+  chart9: "#fb923c",
+  chart10: "#38bdf8",
+  chart11: "#84cc16",
+  chart12: "#f97316",
   radius: "0.5rem"
 };
 var MINIMALIST_LIGHT_THEME = {
@@ -6098,13 +6233,23 @@ var MINIMALIST_LIGHT_THEME = {
   chip: "#e9ecef",
   chipForeground: "#495057",
   border: "#dee2e6",
-  input: "#ffffff",
+  input: "#dee2e6",
   ring: "#000000",
+  toggleTrack: "#ced4da",
+  toggleTrackForeground: "#ffffff",
+  inputHover: "#6c757d",
   chart1: "#000000",
   chart2: "#6c757d",
   chart3: "#adb5bd",
   chart4: "#dee2e6",
   chart5: "#e9ecef",
+  chart6: "#343a40",
+  chart7: "#495057",
+  chart8: "#868e96",
+  chart9: "#5c6bc0",
+  chart10: "#26a69a",
+  chart11: "#ef5350",
+  chart12: "#ffa726",
   radius: "0.5rem"
 };
 var DARK_ELEGANT_THEME = {
@@ -6137,11 +6282,21 @@ var DARK_ELEGANT_THEME = {
   border: "#2d2d2d",
   input: "#1e1e1e",
   ring: "#bb86fc",
+  toggleTrack: "#3d3d3d",
+  toggleTrackForeground: "#e0e0e0",
+  inputHover: "#bb86fc",
   chart1: "#bb86fc",
   chart2: "#03dac6",
   chart3: "#4caf50",
   chart4: "#ff9800",
   chart5: "#cf6679",
+  chart6: "#64b5f6",
+  chart7: "#81c784",
+  chart8: "#ffb74d",
+  chart9: "#e57373",
+  chart10: "#7986cb",
+  chart11: "#4db6ac",
+  chart12: "#f06292",
   radius: "0.5rem"
 };
 var PRESET_THEMES = [OPTILOGIC_LEGACY_THEME];
@@ -6227,13 +6382,32 @@ function themeToHsl(theme) {
     border: hexToHsl(theme.border),
     input: hexToHsl(theme.input),
     ring: hexToHsl(theme.ring),
+    toggleTrack: theme.toggleTrack ? hexToHsl(theme.toggleTrack) : void 0,
+    toggleTrackForeground: theme.toggleTrackForeground ? hexToHsl(theme.toggleTrackForeground) : void 0,
+    inputHover: theme.inputHover ? hexToHsl(theme.inputHover) : void 0,
     chart1: hexToHsl(theme.chart1),
     chart2: hexToHsl(theme.chart2),
     chart3: hexToHsl(theme.chart3),
     chart4: hexToHsl(theme.chart4),
-    chart5: hexToHsl(theme.chart5)
+    chart5: hexToHsl(theme.chart5),
+    chart6: hexToHsl(theme.chart6),
+    chart7: hexToHsl(theme.chart7),
+    chart8: hexToHsl(theme.chart8),
+    chart9: hexToHsl(theme.chart9),
+    chart10: hexToHsl(theme.chart10),
+    chart11: hexToHsl(theme.chart11),
+    chart12: hexToHsl(theme.chart12)
   };
 }
+function deriveInputHoverHsl(hslTheme) {
+  const parts = hslTheme.foreground.split(/\s+/);
+  if (parts.length >= 3) {
+    const h = parts[0];
+    const s = parts[1];
+    return `${h} ${s} 50%`;
+  }
+  return hslTheme.foreground;
+}
 function applyTheme(theme, targetElement) {
   const element = targetElement || document.documentElement;
   const hslTheme = themeToHsl(theme);
@@ -6268,11 +6442,33 @@ function applyTheme(theme, targetElement) {
   element.style.setProperty("--border", hslTheme.border);
   element.style.setProperty("--input", hslTheme.input);
   element.style.setProperty("--ring", hslTheme.ring);
+  element.style.setProperty(
+    "--toggle-track",
+    hslTheme.toggleTrack ?? hslTheme.muted
+  );
+  element.style.setProperty(
+    "--toggle-track-foreground",
+    hslTheme.toggleTrackForeground ?? hslTheme.background
+  );
+  element.style.setProperty(
+    "--input-hover",
+    hslTheme.inputHover ?? deriveInputHoverHsl(hslTheme)
+  );
   element.style.setProperty("--chart-1", hslTheme.chart1);
   element.style.setProperty("--chart-2", hslTheme.chart2);
   element.style.setProperty("--chart-3", hslTheme.chart3);
   element.style.setProperty("--chart-4", hslTheme.chart4);
   element.style.setProperty("--chart-5", hslTheme.chart5);
+  element.style.setProperty("--chart-6", hslTheme.chart6);
+  element.style.setProperty("--chart-7", hslTheme.chart7);
+  element.style.setProperty("--chart-8", hslTheme.chart8);
+  element.style.setProperty("--chart-9", hslTheme.chart9);
+  element.style.setProperty("--chart-10", hslTheme.chart10);
+  element.style.setProperty("--chart-11", hslTheme.chart11);
+  element.style.setProperty("--chart-12", hslTheme.chart12);
+  if (theme.disabledOpacity) {
+    element.style.setProperty("--disabled-opacity", theme.disabledOpacity);
+  }
   if (theme.radius) {
     element.style.setProperty("--radius", theme.radius);
   }
@@ -6315,7 +6511,14 @@ function validateTheme(theme) {
     "chart2",
     "chart3",
     "chart4",
-    "chart5"
+    "chart5",
+    "chart6",
+    "chart7",
+    "chart8",
+    "chart9",
+    "chart10",
+    "chart11",
+    "chart12"
   ];
   for (const field of requiredFields) {
     if (!(field in t)) {
@@ -6363,11 +6566,21 @@ function areThemesEqual(theme1, theme2) {
     "border",
     "input",
     "ring",
+    "toggleTrack",
+    "toggleTrackForeground",
+    "inputHover",
     "chart1",
     "chart2",
     "chart3",
     "chart4",
-    "chart5"
+    "chart5",
+    "chart6",
+    "chart7",
+    "chart8",
+    "chart9",
+    "chart10",
+    "chart11",
+    "chart12"
   ];
   for (const field of colorFields) {
     if (theme1[field] !== theme2[field]) {
@@ -6801,6 +7014,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 +7893,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 +7921,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 +8003,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;