@optilogic/core 1.1.0 → 1.2.1

package/dist/index.js

@@ -314,7 +314,7 @@ var SelectContent = React20.forwardRef(({ className, children, position = "poppe
   {
     ref,
     className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-popover-border bg-popover text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -544,11 +544,11 @@ var TooltipContent = React20.forwardRef(({ className, sideOffset = 6, ...props }
       "px-2.5 py-1.5 rounded-md",
       // Colors
       "bg-popover text-popover-foreground",
-      "border border-border",
+      "border border-popover-border",
       // Typography
       "text-xs font-medium",
       // Shadow
-      "shadow-md",
+      "shadow-lg",
       // Animation
       "animate-in fade-in-0 zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
@@ -608,7 +608,7 @@ var PopoverContent = React20.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     className: cn(
-      "z-50 w-auto max-w-[90vw] 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-popover-border bg-popover p-4 text-popover-foreground shadow-lg 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",
@@ -651,7 +651,7 @@ var DropdownMenuSubContent = React20.forwardRef(({ className, ...props }, ref) =
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-popover-border bg-popover p-1 text-popover-foreground shadow-lg",
       "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",
@@ -669,7 +669,7 @@ var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, ...pr
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] max-w-[90vw] 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-popover-border bg-popover p-1 text-popover-foreground shadow-lg",
       "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",
@@ -2723,12 +2723,17 @@ function Calendar({
         weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         week: "flex w-full mt-2",
         day: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20",
+          "[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          // Override the button's ghost text color when day is selected (data-selected is on the td, not the button)
+          "[&[data-selected]>button]:bg-primary [&[data-selected]>button]:text-primary-foreground",
+          "[&[data-selected]>button]:hover:bg-primary/90 [&[data-selected]>button]:hover:text-primary-foreground",
+          "[&[data-selected]>button]:focus:bg-primary [&[data-selected]>button]:focus:text-primary-foreground",
           props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md"
         ),
         day_button: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal"
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",
@@ -5188,7 +5193,7 @@ function DataGrid({
           hoveredCell && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "fixed z-[200] p-3 bg-popover text-popover-foreground border border-border rounded-md shadow-xl max-w-md break-words text-sm pointer-events-none",
+              className: "fixed z-[200] p-3 bg-popover text-popover-foreground border border-popover-border rounded-md shadow-xl max-w-md break-words text-sm pointer-events-none",
               style: {
                 left: `${hoveredCell.x}px`,
                 top: `${hoveredCell.y}px`
@@ -5745,53 +5750,6 @@ function CopyButton({ content, className, size = "md" }) {
 }
 
 // src/theme/presets.ts
-var GREEN_THEME = {
-  id: "green-theme",
-  name: "Green Theme",
-  description: "A green theme with natural, earthy tones",
-  author: "Leapfrog",
-  background: "#1a2820",
-  foreground: "#E6F5EC",
-  card: "#2d4038",
-  cardForeground: "#E6F5EC",
-  popover: "#243630",
-  popoverForeground: "#E6F5EC",
-  primary: "#6FCF97",
-  primaryForeground: "#1a2820",
-  accent: "#6FCF97",
-  accentForeground: "#1a2820",
-  secondary: "#1f3329",
-  secondaryForeground: "#E6F5EC",
-  muted: "#354840",
-  mutedForeground: "#9DB8A8",
-  destructive: "#EB5757",
-  destructiveForeground: "#E6F5EC",
-  success: "#6FCF97",
-  successForeground: "#1a2820",
-  warning: "#F2C94C",
-  warningForeground: "#1a2820",
-  chip: "#3a5045",
-  chipForeground: "#C5E3D1",
-  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 = {
   id: "optilogic-legacy",
   name: "Optilogic Legacy",
@@ -5822,6 +5780,8 @@ var OPTILOGIC_LEGACY_THEME = {
   border: "#D0D0D0",
   input: "#D0D0D0",
   ring: "#5766F2",
+  popoverBorder: "#D0D0D0",
+  divider: "#D0D0D0",
   toggleTrack: "#D0D0D0",
   toggleTrackForeground: "#FFFFFF",
   inputHover: "#5766F2",
@@ -5839,443 +5799,211 @@ var OPTILOGIC_LEGACY_THEME = {
   chart12: "#E03997",
   radius: "0.5rem"
 };
-var FUTURISTIC_THEME = {
-  id: "futuristic",
-  name: "Futuristic",
-  description: "Neon cyberpunk aesthetic with electric blues and purples",
-  author: "Leapfrog",
-  background: "#0a0e27",
-  foreground: "#e0e7ff",
-  card: "#1a1f3a",
-  cardForeground: "#e0e7ff",
-  popover: "#1a1f3a",
-  popoverForeground: "#e0e7ff",
-  primary: "#6366f1",
-  primaryForeground: "#ffffff",
-  accent: "#8b5cf6",
-  accentForeground: "#ffffff",
-  secondary: "#1e293b",
-  secondaryForeground: "#e0e7ff",
-  muted: "#1e293b",
-  mutedForeground: "#94a3b8",
-  destructive: "#ef4444",
-  destructiveForeground: "#ffffff",
-  success: "#10b981",
-  successForeground: "#ffffff",
-  warning: "#f59e0b",
-  warningForeground: "#ffffff",
-  chip: "#312e81",
-  chipForeground: "#c7d2fe",
-  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 = {
-  id: "nature",
-  name: "Nature Inspired",
-  description: "Earthy greens and browns inspired by forests and meadows",
-  author: "Leapfrog",
-  background: "#1a2e1a",
-  foreground: "#e8f5e9",
-  card: "#2d4a2d",
-  cardForeground: "#e8f5e9",
-  popover: "#243824",
-  popoverForeground: "#e8f5e9",
-  primary: "#4caf50",
-  primaryForeground: "#1a2e1a",
-  accent: "#66bb6a",
-  accentForeground: "#1a2e1a",
-  secondary: "#2d4a2d",
-  secondaryForeground: "#e8f5e9",
-  muted: "#3d5a3d",
-  mutedForeground: "#a5d6a7",
-  destructive: "#e57373",
-  destructiveForeground: "#ffffff",
-  success: "#66bb6a",
-  successForeground: "#1a2e1a",
-  warning: "#ffb74d",
-  warningForeground: "#1a2e1a",
-  chip: "#3d5a3d",
-  chipForeground: "#c8e6c9",
-  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 = {
-  id: "scifi",
-  name: "Sci-Fi",
-  description: "Deep space aesthetic with vibrant cyan and magenta accents",
-  author: "Leapfrog",
-  background: "#0d1117",
-  foreground: "#c9d1d9",
-  card: "#161b22",
-  cardForeground: "#c9d1d9",
-  popover: "#161b22",
-  popoverForeground: "#c9d1d9",
-  primary: "#00d9ff",
-  primaryForeground: "#0d1117",
-  accent: "#ff00ff",
-  accentForeground: "#ffffff",
-  secondary: "#1c2128",
-  secondaryForeground: "#c9d1d9",
-  muted: "#21262d",
-  mutedForeground: "#8b949e",
-  destructive: "#ff6b6b",
-  destructiveForeground: "#ffffff",
-  success: "#00ff88",
-  successForeground: "#0d1117",
-  warning: "#ffd93d",
-  warningForeground: "#0d1117",
-  chip: "#1c2128",
-  chipForeground: "#58a6ff",
-  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 = {
-  id: "ocean",
-  name: "Ocean",
-  description: "Calming blues and teals inspired by the deep sea",
-  author: "Leapfrog",
-  background: "#0a1929",
-  foreground: "#e3f2fd",
-  card: "#132f4c",
-  cardForeground: "#e3f2fd",
-  popover: "#0f2540",
-  popoverForeground: "#e3f2fd",
-  primary: "#2196f3",
-  primaryForeground: "#ffffff",
-  accent: "#00bcd4",
-  accentForeground: "#0a1929",
-  secondary: "#1565c0",
-  secondaryForeground: "#ffffff",
-  muted: "#1e3a5f",
-  mutedForeground: "#90caf9",
-  destructive: "#f44336",
-  destructiveForeground: "#ffffff",
-  success: "#4caf50",
-  successForeground: "#ffffff",
-  warning: "#ff9800",
-  warningForeground: "#ffffff",
-  chip: "#1565c0",
-  chipForeground: "#bbdefb",
-  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 = {
-  id: "sunset",
-  name: "Sunset",
-  description: "Warm oranges and purples like a beautiful sunset",
-  author: "Leapfrog",
-  background: "#1a0d1a",
-  foreground: "#ffe0e6",
-  card: "#2d1a2d",
-  cardForeground: "#ffe0e6",
-  popover: "#241424",
-  popoverForeground: "#ffe0e6",
-  primary: "#ff6b35",
-  primaryForeground: "#ffffff",
-  accent: "#c44569",
-  accentForeground: "#ffffff",
-  secondary: "#f7931e",
-  secondaryForeground: "#1a0d1a",
-  muted: "#3d2a3d",
-  mutedForeground: "#ffb3c1",
-  destructive: "#e63946",
-  destructiveForeground: "#ffffff",
-  success: "#06d6a0",
-  successForeground: "#1a0d1a",
-  warning: "#ffb703",
-  warningForeground: "#1a0d1a",
-  chip: "#3d2a3d",
-  chipForeground: "#ffb3c1",
-  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 = {
-  id: "forest",
-  name: "Forest",
-  description: "Deep greens and browns like an ancient forest",
-  author: "Leapfrog",
-  background: "#0d1b0d",
-  foreground: "#e8f5e9",
-  card: "#1a2e1a",
-  cardForeground: "#e8f5e9",
-  popover: "#152515",
-  popoverForeground: "#e8f5e9",
-  primary: "#2e7d32",
-  primaryForeground: "#ffffff",
-  accent: "#558b2f",
-  accentForeground: "#ffffff",
-  secondary: "#1b5e20",
-  secondaryForeground: "#e8f5e9",
-  muted: "#2d4a2d",
-  mutedForeground: "#a5d6a7",
-  destructive: "#c62828",
-  destructiveForeground: "#ffffff",
-  success: "#4caf50",
-  successForeground: "#ffffff",
-  warning: "#f57c00",
-  warningForeground: "#ffffff",
-  chip: "#2d4a2d",
-  chipForeground: "#c8e6c9",
-  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",
+var OPTILOGIC_DARK_THEME = {
+  id: "optilogic-dark",
+  name: "Optilogic Dark",
+  description: "Optilogic branded dark theme with signature green",
+  author: "Optilogic",
+  background: "#042926",
+  foreground: "#E0E7E6",
+  card: "#0A3F34",
+  cardForeground: "#E0E7E6",
+  popover: "#0A3F34",
+  popoverForeground: "#E0E7E6",
+  primary: "#23EF6A",
+  primaryForeground: "#042926",
+  accent: "#23EF6A",
+  accentForeground: "#042926",
+  secondary: "#0D4D3F",
+  secondaryForeground: "#E0E7E6",
+  muted: "#0D4D3F",
+  mutedForeground: "#9CB5B0",
+  destructive: "#EF4444",
+  destructiveForeground: "#FFFFFF",
+  success: "#23EF6A",
+  successForeground: "#042926",
+  warning: "#FBBF24",
+  warningForeground: "#042926",
+  chip: "#0D4D3F",
+  chipForeground: "#A7D5CA",
+  border: "#1A5C4C",
+  input: "#1A5C4C",
+  ring: "#23EF6A",
+  popoverBorder: "#237A64",
+  divider: "#1A5C4C",
+  toggleTrack: "#1A5C4C",
+  toggleTrackForeground: "#E0E7E6",
+  inputHover: "#23EF6A",
+  chart1: "#23EF6A",
+  chart2: "#3B82F6",
+  chart3: "#FBBF24",
+  chart4: "#F97316",
+  chart5: "#A78BFA",
+  chart6: "#EF4444",
+  chart7: "#06B6D4",
+  chart8: "#EC4899",
+  chart9: "#84CC16",
+  chart10: "#14B8A6",
+  chart11: "#F59E0B",
+  chart12: "#8B5CF6",
   radius: "0.5rem"
 };
-var CYBERPUNK_THEME = {
-  id: "cyberpunk",
-  name: "Cyberpunk",
-  description: "Neon pinks and cyans with high contrast",
-  author: "Leapfrog",
-  background: "#0a0a0f",
-  foreground: "#f0f0f0",
-  card: "#1a1a2e",
-  cardForeground: "#f0f0f0",
-  popover: "#16213e",
-  popoverForeground: "#f0f0f0",
-  primary: "#ff00ff",
-  primaryForeground: "#ffffff",
-  accent: "#00ffff",
-  accentForeground: "#0a0a0f",
-  secondary: "#16213e",
-  secondaryForeground: "#f0f0f0",
-  muted: "#1a1a2e",
-  mutedForeground: "#a0a0a0",
-  destructive: "#ff1744",
-  destructiveForeground: "#ffffff",
-  success: "#00ff88",
-  successForeground: "#0a0a0f",
-  warning: "#ffd700",
-  warningForeground: "#0a0a0f",
-  chip: "#16213e",
-  chipForeground: "#ff00ff",
-  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",
+var MODERN_LIGHT_THEME = {
+  id: "modern-light",
+  name: "Modern Light",
+  description: "Clean and modern light theme with blue accents",
+  author: "opti-ui",
+  background: "#FFFFFF",
+  foreground: "#1A1A1A",
+  card: "#F8F9FA",
+  cardForeground: "#1A1A1A",
+  popover: "#FFFFFF",
+  popoverForeground: "#1A1A1A",
+  primary: "#2563EB",
+  primaryForeground: "#FFFFFF",
+  accent: "#E9ECEF",
+  accentForeground: "#1A1A1A",
+  secondary: "#F1F3F5",
+  secondaryForeground: "#1A1A1A",
+  muted: "#E9ECEF",
+  mutedForeground: "#6C757D",
+  destructive: "#DC3545",
+  destructiveForeground: "#FFFFFF",
+  success: "#28A745",
+  successForeground: "#FFFFFF",
+  warning: "#FFC107",
+  warningForeground: "#1A1A1A",
+  chip: "#E9ECEF",
+  chipForeground: "#495057",
+  border: "#DEE2E6",
+  input: "#DEE2E6",
+  ring: "#2563EB",
+  popoverBorder: "#DEE2E6",
+  divider: "#DEE2E6",
+  toggleTrack: "#CED4DA",
+  toggleTrackForeground: "#FFFFFF",
+  inputHover: "#6C757D",
+  chart1: "#2563EB",
+  chart2: "#16A34A",
+  chart3: "#EA580C",
+  chart4: "#9333EA",
+  chart5: "#DC2626",
+  chart6: "#0891B2",
+  chart7: "#CA8A04",
+  chart8: "#DB2777",
+  chart9: "#4F46E5",
+  chart10: "#059669",
+  chart11: "#D97706",
+  chart12: "#7C3AED",
   radius: "0.5rem"
 };
-var MINIMALIST_LIGHT_THEME = {
-  id: "minimalist-light",
-  name: "Minimalist Light",
-  description: "Clean and simple light theme with subtle grays",
-  author: "Leapfrog",
-  background: "#ffffff",
-  foreground: "#1a1a1a",
-  card: "#f8f9fa",
-  cardForeground: "#1a1a1a",
-  popover: "#ffffff",
-  popoverForeground: "#1a1a1a",
-  primary: "#000000",
-  primaryForeground: "#ffffff",
-  accent: "#e9ecef",
-  accentForeground: "#1a1a1a",
-  secondary: "#f1f3f5",
-  secondaryForeground: "#1a1a1a",
-  muted: "#e9ecef",
-  mutedForeground: "#6c757d",
-  destructive: "#dc3545",
-  destructiveForeground: "#ffffff",
-  success: "#28a745",
-  successForeground: "#ffffff",
-  warning: "#ffc107",
-  warningForeground: "#1a1a1a",
-  chip: "#e9ecef",
-  chipForeground: "#495057",
-  border: "#dee2e6",
-  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",
+var MINIMALIST_LIGHT_THEME = MODERN_LIGHT_THEME;
+var MODERN_DARK_THEME = {
+  id: "modern-dark",
+  name: "Modern Dark",
+  description: "Clean, neutral dark theme with blue accents",
+  author: "opti-ui",
+  background: "#09090B",
+  foreground: "#FAFAFA",
+  card: "#18181B",
+  cardForeground: "#FAFAFA",
+  popover: "#18181B",
+  popoverForeground: "#FAFAFA",
+  primary: "#3B82F6",
+  primaryForeground: "#FFFFFF",
+  accent: "#27272A",
+  accentForeground: "#FAFAFA",
+  secondary: "#27272A",
+  secondaryForeground: "#FAFAFA",
+  muted: "#27272A",
+  mutedForeground: "#A1A1AA",
+  destructive: "#EF4444",
+  destructiveForeground: "#FFFFFF",
+  success: "#22C55E",
+  successForeground: "#FFFFFF",
+  warning: "#EAB308",
+  warningForeground: "#09090B",
+  chip: "#27272A",
+  chipForeground: "#D4D4D8",
+  border: "#3F3F46",
+  input: "#3F3F46",
+  ring: "#3B82F6",
+  popoverBorder: "#52525B",
+  divider: "#3F3F46",
+  toggleTrack: "#3F3F46",
+  toggleTrackForeground: "#FAFAFA",
+  inputHover: "#3B82F6",
+  chart1: "#3B82F6",
+  chart2: "#22C55E",
+  chart3: "#F59E0B",
+  chart4: "#EF4444",
+  chart5: "#A855F7",
+  chart6: "#14B8A6",
+  chart7: "#F97316",
+  chart8: "#EC4899",
+  chart9: "#0EA5E9",
+  chart10: "#EAB308",
+  chart11: "#10B981",
+  chart12: "#C084FC",
   radius: "0.5rem"
 };
 var DARK_ELEGANT_THEME = {
   id: "dark-elegant",
   name: "Dark Elegant",
   description: "Sophisticated dark mode with refined colors",
-  author: "Leapfrog",
+  author: "opti-ui",
   background: "#121212",
-  foreground: "#e0e0e0",
-  card: "#1e1e1e",
-  cardForeground: "#e0e0e0",
-  popover: "#1e1e1e",
-  popoverForeground: "#e0e0e0",
-  primary: "#bb86fc",
+  foreground: "#E0E0E0",
+  card: "#1E1E1E",
+  cardForeground: "#E0E0E0",
+  popover: "#1E1E1E",
+  popoverForeground: "#E0E0E0",
+  primary: "#BB86FC",
   primaryForeground: "#121212",
-  accent: "#03dac6",
+  accent: "#03DAC6",
   accentForeground: "#121212",
-  secondary: "#2d2d2d",
-  secondaryForeground: "#e0e0e0",
-  muted: "#2d2d2d",
-  mutedForeground: "#9e9e9e",
-  destructive: "#cf6679",
-  destructiveForeground: "#ffffff",
-  success: "#4caf50",
-  successForeground: "#ffffff",
-  warning: "#ff9800",
-  warningForeground: "#ffffff",
-  chip: "#2d2d2d",
-  chipForeground: "#b39ddb",
-  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",
+  secondary: "#2D2D2D",
+  secondaryForeground: "#E0E0E0",
+  muted: "#2D2D2D",
+  mutedForeground: "#9E9E9E",
+  destructive: "#CF6679",
+  destructiveForeground: "#FFFFFF",
+  success: "#4CAF50",
+  successForeground: "#FFFFFF",
+  warning: "#FF9800",
+  warningForeground: "#121212",
+  chip: "#2D2D2D",
+  chipForeground: "#B39DDB",
+  border: "#404040",
+  input: "#404040",
+  ring: "#BB86FC",
+  popoverBorder: "#525252",
+  divider: "#404040",
+  toggleTrack: "#404040",
+  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];
-var ALL_THEMES = [
+var PRESET_THEMES = [
   OPTILOGIC_LEGACY_THEME,
-  FUTURISTIC_THEME,
-  NATURE_THEME,
-  SCIFI_THEME,
-  OCEAN_THEME,
-  SUNSET_THEME,
-  FOREST_THEME,
-  CYBERPUNK_THEME,
-  MINIMALIST_LIGHT_THEME,
-  DARK_ELEGANT_THEME,
-  GREEN_THEME
+  OPTILOGIC_DARK_THEME,
+  MODERN_LIGHT_THEME,
+  MODERN_DARK_THEME,
+  DARK_ELEGANT_THEME
 ];
+var ALL_THEMES = PRESET_THEMES;
 function getPresetTheme(id) {
   return ALL_THEMES.find((theme) => theme.id === id);
 }
@@ -6345,6 +6073,8 @@ function themeToHsl(theme) {
     border: hexToHsl(theme.border),
     input: hexToHsl(theme.input),
     ring: hexToHsl(theme.ring),
+    popoverBorder: theme.popoverBorder ? hexToHsl(theme.popoverBorder) : void 0,
+    divider: theme.divider ? hexToHsl(theme.divider) : void 0,
     toggleTrack: theme.toggleTrack ? hexToHsl(theme.toggleTrack) : void 0,
     toggleTrackForeground: theme.toggleTrackForeground ? hexToHsl(theme.toggleTrackForeground) : void 0,
     inputHover: theme.inputHover ? hexToHsl(theme.inputHover) : void 0,
@@ -6405,6 +6135,14 @@ 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(
+    "--popover-border",
+    hslTheme.popoverBorder ?? hslTheme.border
+  );
+  element.style.setProperty(
+    "--divider",
+    hslTheme.divider ?? hslTheme.border
+  );
   element.style.setProperty(
     "--toggle-track",
     hslTheme.toggleTrack ?? hslTheme.muted
@@ -6529,6 +6267,8 @@ function areThemesEqual(theme1, theme2) {
     "border",
     "input",
     "ring",
+    "popoverBorder",
+    "divider",
     "toggleTrack",
     "toggleTrackForeground",
     "inputHover",
@@ -6853,7 +6593,7 @@ function MenuItem({ item, onClose, depth = 0 }) {
       {
         className: cn(
           "fixed z-[60] min-w-[180px] max-w-[280px]",
-          "rounded-md border border-border",
+          "rounded-md border border-popover-border",
           "bg-popover text-popover-foreground",
           "shadow-lg",
           "animate-in fade-in-0 zoom-in-95",
@@ -6936,7 +6676,7 @@ function ContextMenu({
       ref: menuRef,
       className: cn(
         "fixed z-50 min-w-[180px] max-w-[280px]",
-        "rounded-md border border-border",
+        "rounded-md border border-popover-border",
         "bg-popover text-popover-foreground",
         "shadow-lg",
         "animate-in fade-in-0 zoom-in-95",
@@ -7710,18 +7450,80 @@ function CsvRenderer({ content, className }) {
   ) });
 }
 CsvRenderer.displayName = "CsvRenderer";
+var CSP_POLICY = [
+  "default-src 'none'",
+  "script-src 'unsafe-inline'",
+  "style-src 'unsafe-inline'",
+  "img-src data: blob:"
+].join("; ");
+var PERMISSIONS_POLICY = [
+  "camera=()",
+  "microphone=()",
+  "geolocation=()",
+  "payment=()",
+  "usb=()",
+  "display-capture=()",
+  "fullscreen=()",
+  "autoplay=()",
+  "web-share=()",
+  "screen-wake-lock=()",
+  "xr-spatial-tracking=()",
+  "magnetometer=()",
+  "gyroscope=()",
+  "accelerometer=()"
+].join(", ");
+function buildSandboxedHtml(content) {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Security-Policy" content="${CSP_POLICY}">
+<script>
+// Neutralise APIs that the sandbox + CSP can't fully block.
+// This runs in <head> before any user content in <body>.
+// Uses Object.defineProperty to make overrides non-configurable
+// so user scripts cannot restore the original via prototype tricks.
+(function(){
+  // postMessage: iframe can message parent even without allow-same-origin.
+  // Kill it so content can't probe or spam any future parent listeners.
+  // Also kill parent/top refs as an extra layer.
+  var noop = function(){};
+  try { Object.defineProperty(window, 'postMessage', { value: noop, writable: false, configurable: false }); } catch(e) {}
+  try { Object.defineProperty(window, 'parent', { value: window, writable: false, configurable: false }); } catch(e) {}
+  try { Object.defineProperty(window, 'top', { value: window, writable: false, configurable: false }); } catch(e) {}
+  try { Object.defineProperty(window, 'opener', { value: null, writable: false, configurable: false }); } catch(e) {}
+
+  // RTCPeerConnection: not governed by CSP; could contact a STUN server
+  // over UDP to leak the user's IP. Kill all browser-prefixed variants.
+  var rtcNames = ['RTCPeerConnection', 'webkitRTCPeerConnection', 'mozRTCPeerConnection'];
+  for (var i = 0; i < rtcNames.length; i++) {
+    try { Object.defineProperty(window, rtcNames[i], { value: undefined, writable: false, configurable: false }); } catch(e) {}
+  }
+})();
+</script>
+</head>
+<body>${content}</body>
+</html>`;
+}
 function HtmlRenderer({
   content,
   fileName,
   className
 }) {
+  const srcDoc = React20.useMemo(
+    () => buildSandboxedHtml(content ?? ""),
+    [content]
+  );
+  const iframeProps = { csp: CSP_POLICY };
   return /* @__PURE__ */ jsx(
     "iframe",
     {
-      srcDoc: content ?? "",
+      srcDoc,
       sandbox: "allow-scripts",
       title: fileName,
-      className: cn("h-full w-full border-0", className)
+      referrerPolicy: "no-referrer",
+      allow: PERMISSIONS_POLICY,
+      className: cn("h-full w-full border-0", className),
+      ...iframeProps
     }
   );
 }
@@ -8085,6 +7887,6 @@ var DataStarIcon = forwardRef(
 );
 DataStarIcon.displayName = "DataStarIcon";
 
-export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Board, BoardContent, BoardHeader, Button, CYBERPUNK_THEME, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardImage, CardList, CardTitle, CellEditor, Checkbox, Chip, CodeRenderer, ConfirmationModal, ContextMenu, CopyButton, CosmicFrogIcon, CsvRenderer, DARK_ELEGANT_THEME, DEFAULT_RENDERERS, DataGrid, DataStarIcon, DataTable, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FOREST_THEME, FUTURISTIC_THEME, FileView, FilterPopover, GREEN_THEME, HeaderCell, HtmlRenderer, IconButton, ImageRenderer, Input, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, MarkdownRenderer, Modal, ModalButton, NATURE_THEME, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, OptilogicLogo, OptilogicLogoWithText, PRESET_THEMES, PlainTextRenderer, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, SCIFI_THEME, SUNSET_THEME, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, boardVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, detectContentType, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getFileExtension, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, isTextContentType, isUrlContentType, labelVariants, loadingSpinnerVariants, mergeRenderers, resolveRenderer, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContentType, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
+export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Board, BoardContent, BoardHeader, Button, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardImage, CardList, CardTitle, CellEditor, Checkbox, Chip, CodeRenderer, ConfirmationModal, ContextMenu, CopyButton, CosmicFrogIcon, CsvRenderer, DARK_ELEGANT_THEME, DEFAULT_RENDERERS, DataGrid, DataStarIcon, DataTable, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileView, FilterPopover, HeaderCell, HtmlRenderer, IconButton, ImageRenderer, Input, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, MODERN_DARK_THEME, MODERN_LIGHT_THEME, MarkdownRenderer, Modal, ModalButton, OPTILOGIC_DARK_THEME, OPTILOGIC_LEGACY_THEME, OptilogicLogo, OptilogicLogoWithText, PRESET_THEMES, PlainTextRenderer, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, boardVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, detectContentType, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getFileExtension, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, isTextContentType, isUrlContentType, labelVariants, loadingSpinnerVariants, mergeRenderers, resolveRenderer, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContentType, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map