@optilogic/core 1.1.0 → 1.2.1

package/dist/styles.css

@@ -17,94 +17,98 @@
 
 @layer base {
   :root {
+    /* Matches OPTILOGIC_LEGACY_THEME */
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --foreground: 243 82% 20%;
+    --card: 0 0% 98%;
+    --card-foreground: 243 82% 20%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --toggle-track: var(--muted);
-    --toggle-track-foreground: var(--background);
-    --input-hover: var(--foreground);
-    --divider: 214.3 31.8% 91.4%;
-    --chip: 210 40% 96.1%;
-    --chip-foreground: 222.2 47.4% 11.2%;
+    --popover-foreground: 243 82% 20%;
+    --primary: 243 82% 20%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 234 86% 67%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 216 27% 92%;
+    --muted-foreground: 0 1% 45%;
+    --accent: 229 87% 90%;
+    --accent-foreground: 243 82% 20%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 151 48% 50%;
+    --success-foreground: 0 0% 100%;
+    --warning: 45 90% 62%;
+    --warning-foreground: 243 82% 20%;
+    --border: 0 0% 82%;
+    --input: 0 0% 82%;
+    --ring: 234 86% 67%;
+    --popover-border: var(--border);
+    --toggle-track: 0 0% 82%;
+    --toggle-track-foreground: 0 0% 100%;
+    --input-hover: 234 86% 67%;
+    --divider: 0 0% 82%;
+    --chip: 227 88% 85%;
+    --chip-foreground: 243 82% 20%;
     --disabled-opacity: 0.5;
     --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --chart-6: 262 60% 55%;
-    --chart-7: 142 60% 45%;
-    --chart-8: 350 65% 55%;
-    --chart-9: 200 70% 50%;
-    --chart-10: 60 65% 50%;
-    --chart-11: 310 55% 50%;
-    --chart-12: 180 50% 45%;
+    --chart-1: 100 63% 51%;
+    --chart-2: 45 90% 62%;
+    --chart-3: 234 86% 67%;
+    --chart-4: 151 48% 50%;
+    --chart-5: 233 80% 76%;
+    --chart-6: 0 72% 51%;
+    --chart-7: 24 73% 55%;
+    --chart-8: 170 69% 46%;
+    --chart-9: 25 38% 44%;
+    --chart-10: 174 100% 34%;
+    --chart-11: 266 54% 50%;
+    --chart-12: 326 72% 55%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --success: 142 76% 36%;
-    --success-foreground: 210 40% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 222.2 47.4% 11.2%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --toggle-track: var(--muted);
-    --toggle-track-foreground: var(--background);
-    --input-hover: var(--foreground);
-    --divider: 217.2 32.6% 17.5%;
-    --chip: 217.2 32.6% 17.5%;
-    --chip-foreground: 210 40% 98%;
+    /* Matches MODERN_DARK_THEME */
+    --background: 240 6% 4%;
+    --foreground: 0 0% 98%;
+    --card: 240 6% 10%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 6% 10%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 4% 16%;
+    --muted-foreground: 240 5% 65%;
+    --accent: 240 4% 16%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 142 71% 45%;
+    --success-foreground: 0 0% 100%;
+    --warning: 48 96% 53%;
+    --warning-foreground: 240 6% 4%;
+    --border: 240 4% 26%;
+    --input: 240 4% 26%;
+    --ring: 217 91% 60%;
+    --popover-border: 240 4% 34%;
+    --toggle-track: 240 4% 26%;
+    --toggle-track-foreground: 0 0% 98%;
+    --input-hover: 217 91% 60%;
+    --divider: 240 4% 26%;
+    --chip: 240 4% 16%;
+    --chip-foreground: 240 5% 83%;
     --disabled-opacity: 0.5;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --chart-6: 120 55% 50%;
-    --chart-7: 200 75% 55%;
-    --chart-8: 50 80% 55%;
-    --chart-9: 0 70% 55%;
-    --chart-10: 260 65% 60%;
-    --chart-11: 180 60% 50%;
-    --chart-12: 90 55% 55%;
+    --chart-1: 217 91% 60%;
+    --chart-2: 142 71% 45%;
+    --chart-3: 38 92% 50%;
+    --chart-4: 0 84% 60%;
+    --chart-5: 270 60% 60%;
+    --chart-6: 174 60% 50%;
+    --chart-7: 24 95% 53%;
+    --chart-8: 330 80% 60%;
+    --chart-9: 199 89% 48%;
+    --chart-10: 48 96% 53%;
+    --chart-11: 162 63% 41%;
+    --chart-12: 292 84% 61%;
   }
 }
 

package/dist/tailwind-preset.cjs

@@ -58,6 +58,7 @@ var optiUiPreset = {
         },
         // Border, input, ring
         border: "hsl(var(--border))",
+        "popover-border": "hsl(var(--popover-border))",
         input: {
           DEFAULT: "hsl(var(--input))",
           hover: "hsl(var(--input-hover))"

package/dist/tailwind-preset.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.cjs","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n *   presets: [optiUiPreset],\n *   content: [\n *     './src/**\\/*.{js,ts,jsx,tsx}',\n *     './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n *   ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n  darkMode: [\"class\"],\n  theme: {\n    extend: {\n      colors: {\n        // Background colors\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n\n        // Card\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n\n        // Popover\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n\n        // Primary\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n\n        // Secondary\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n\n        // Muted\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n\n        // Accent\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n\n        // Destructive\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n\n        // Success\n        success: {\n          DEFAULT: \"hsl(var(--success))\",\n          foreground: \"hsl(var(--success-foreground))\",\n        },\n\n        // Warning\n        warning: {\n          DEFAULT: \"hsl(var(--warning))\",\n          foreground: \"hsl(var(--warning-foreground))\",\n        },\n\n        // Border, input, ring\n        border: \"hsl(var(--border))\",\n        input: {\n          DEFAULT: \"hsl(var(--input))\",\n          hover: \"hsl(var(--input-hover))\",\n        },\n        ring: \"hsl(var(--ring))\",\n        divider: \"hsl(var(--divider))\",\n\n        // Toggle/switch track\n        \"toggle-track\": {\n          DEFAULT: \"hsl(var(--toggle-track))\",\n          foreground: \"hsl(var(--toggle-track-foreground))\",\n        },\n\n        // Chip\n        chip: {\n          DEFAULT: \"hsl(var(--chip))\",\n          foreground: \"hsl(var(--chip-foreground))\",\n        },\n\n        // Chart colors\n        chart: {\n          1: \"hsl(var(--chart-1))\",\n          2: \"hsl(var(--chart-2))\",\n          3: \"hsl(var(--chart-3))\",\n          4: \"hsl(var(--chart-4))\",\n          5: \"hsl(var(--chart-5))\",\n          6: \"hsl(var(--chart-6))\",\n          7: \"hsl(var(--chart-7))\",\n          8: \"hsl(var(--chart-8))\",\n          9: \"hsl(var(--chart-9))\",\n          10: \"hsl(var(--chart-10))\",\n          11: \"hsl(var(--chart-11))\",\n          12: \"hsl(var(--chart-12))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default optiUiPreset;\n"]}
+{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.cjs","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n *   presets: [optiUiPreset],\n *   content: [\n *     './src/**\\/*.{js,ts,jsx,tsx}',\n *     './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n *   ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n  darkMode: [\"class\"],\n  theme: {\n    extend: {\n      colors: {\n        // Background colors\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n\n        // Card\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n\n        // Popover\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n\n        // Primary\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n\n        // Secondary\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n\n        // Muted\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n\n        // Accent\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n\n        // Destructive\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n\n        // Success\n        success: {\n          DEFAULT: \"hsl(var(--success))\",\n          foreground: \"hsl(var(--success-foreground))\",\n        },\n\n        // Warning\n        warning: {\n          DEFAULT: \"hsl(var(--warning))\",\n          foreground: \"hsl(var(--warning-foreground))\",\n        },\n\n        // Border, input, ring\n        border: \"hsl(var(--border))\",\n        \"popover-border\": \"hsl(var(--popover-border))\",\n        input: {\n          DEFAULT: \"hsl(var(--input))\",\n          hover: \"hsl(var(--input-hover))\",\n        },\n        ring: \"hsl(var(--ring))\",\n        divider: \"hsl(var(--divider))\",\n\n        // Toggle/switch track\n        \"toggle-track\": {\n          DEFAULT: \"hsl(var(--toggle-track))\",\n          foreground: \"hsl(var(--toggle-track-foreground))\",\n        },\n\n        // Chip\n        chip: {\n          DEFAULT: \"hsl(var(--chip))\",\n          foreground: \"hsl(var(--chip-foreground))\",\n        },\n\n        // Chart colors\n        chart: {\n          1: \"hsl(var(--chart-1))\",\n          2: \"hsl(var(--chart-2))\",\n          3: \"hsl(var(--chart-3))\",\n          4: \"hsl(var(--chart-4))\",\n          5: \"hsl(var(--chart-5))\",\n          6: \"hsl(var(--chart-6))\",\n          7: \"hsl(var(--chart-7))\",\n          8: \"hsl(var(--chart-8))\",\n          9: \"hsl(var(--chart-9))\",\n          10: \"hsl(var(--chart-10))\",\n          11: \"hsl(var(--chart-11))\",\n          12: \"hsl(var(--chart-12))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default optiUiPreset;\n"]}

package/dist/tailwind-preset.js

@@ -54,6 +54,7 @@ var optiUiPreset = {
         },
         // Border, input, ring
         border: "hsl(var(--border))",
+        "popover-border": "hsl(var(--popover-border))",
         input: {
           DEFAULT: "hsl(var(--input))",
           hover: "hsl(var(--input-hover))"

package/dist/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.js","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n *   presets: [optiUiPreset],\n *   content: [\n *     './src/**\\/*.{js,ts,jsx,tsx}',\n *     './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n *   ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n  darkMode: [\"class\"],\n  theme: {\n    extend: {\n      colors: {\n        // Background colors\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n\n        // Card\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n\n        // Popover\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n\n        // Primary\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n\n        // Secondary\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n\n        // Muted\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n\n        // Accent\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n\n        // Destructive\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n\n        // Success\n        success: {\n          DEFAULT: \"hsl(var(--success))\",\n          foreground: \"hsl(var(--success-foreground))\",\n        },\n\n        // Warning\n        warning: {\n          DEFAULT: \"hsl(var(--warning))\",\n          foreground: \"hsl(var(--warning-foreground))\",\n        },\n\n        // Border, input, ring\n        border: \"hsl(var(--border))\",\n        input: {\n          DEFAULT: \"hsl(var(--input))\",\n          hover: \"hsl(var(--input-hover))\",\n        },\n        ring: \"hsl(var(--ring))\",\n        divider: \"hsl(var(--divider))\",\n\n        // Toggle/switch track\n        \"toggle-track\": {\n          DEFAULT: \"hsl(var(--toggle-track))\",\n          foreground: \"hsl(var(--toggle-track-foreground))\",\n        },\n\n        // Chip\n        chip: {\n          DEFAULT: \"hsl(var(--chip))\",\n          foreground: \"hsl(var(--chip-foreground))\",\n        },\n\n        // Chart colors\n        chart: {\n          1: \"hsl(var(--chart-1))\",\n          2: \"hsl(var(--chart-2))\",\n          3: \"hsl(var(--chart-3))\",\n          4: \"hsl(var(--chart-4))\",\n          5: \"hsl(var(--chart-5))\",\n          6: \"hsl(var(--chart-6))\",\n          7: \"hsl(var(--chart-7))\",\n          8: \"hsl(var(--chart-8))\",\n          9: \"hsl(var(--chart-9))\",\n          10: \"hsl(var(--chart-10))\",\n          11: \"hsl(var(--chart-11))\",\n          12: \"hsl(var(--chart-12))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default optiUiPreset;\n"]}
+{"version":3,"sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"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","file":"tailwind-preset.js","sourcesContent":["import type { Config } from \"tailwindcss\";\n\n/**\n * opti-ui Tailwind CSS preset\n *\n * This preset provides the theme configuration required for opti-ui components.\n * Consumers should extend their Tailwind config with this preset.\n *\n * @example\n * // tailwind.config.js\n * import { optiUiPreset } from '@optilogic/core/tailwind-preset';\n *\n * export default {\n *   presets: [optiUiPreset],\n *   content: [\n *     './src/**\\/*.{js,ts,jsx,tsx}',\n *     './node_modules/@optilogic/core/dist/**\\/*.{js,mjs}'\n *   ]\n * }\n */\nexport const optiUiPreset: Partial<Config> = {\n  darkMode: [\"class\"],\n  theme: {\n    extend: {\n      colors: {\n        // Background colors\n        background: \"hsl(var(--background))\",\n        foreground: \"hsl(var(--foreground))\",\n\n        // Card\n        card: {\n          DEFAULT: \"hsl(var(--card))\",\n          foreground: \"hsl(var(--card-foreground))\",\n        },\n\n        // Popover\n        popover: {\n          DEFAULT: \"hsl(var(--popover))\",\n          foreground: \"hsl(var(--popover-foreground))\",\n        },\n\n        // Primary\n        primary: {\n          DEFAULT: \"hsl(var(--primary))\",\n          foreground: \"hsl(var(--primary-foreground))\",\n        },\n\n        // Secondary\n        secondary: {\n          DEFAULT: \"hsl(var(--secondary))\",\n          foreground: \"hsl(var(--secondary-foreground))\",\n        },\n\n        // Muted\n        muted: {\n          DEFAULT: \"hsl(var(--muted))\",\n          foreground: \"hsl(var(--muted-foreground))\",\n        },\n\n        // Accent\n        accent: {\n          DEFAULT: \"hsl(var(--accent))\",\n          foreground: \"hsl(var(--accent-foreground))\",\n        },\n\n        // Destructive\n        destructive: {\n          DEFAULT: \"hsl(var(--destructive))\",\n          foreground: \"hsl(var(--destructive-foreground))\",\n        },\n\n        // Success\n        success: {\n          DEFAULT: \"hsl(var(--success))\",\n          foreground: \"hsl(var(--success-foreground))\",\n        },\n\n        // Warning\n        warning: {\n          DEFAULT: \"hsl(var(--warning))\",\n          foreground: \"hsl(var(--warning-foreground))\",\n        },\n\n        // Border, input, ring\n        border: \"hsl(var(--border))\",\n        \"popover-border\": \"hsl(var(--popover-border))\",\n        input: {\n          DEFAULT: \"hsl(var(--input))\",\n          hover: \"hsl(var(--input-hover))\",\n        },\n        ring: \"hsl(var(--ring))\",\n        divider: \"hsl(var(--divider))\",\n\n        // Toggle/switch track\n        \"toggle-track\": {\n          DEFAULT: \"hsl(var(--toggle-track))\",\n          foreground: \"hsl(var(--toggle-track-foreground))\",\n        },\n\n        // Chip\n        chip: {\n          DEFAULT: \"hsl(var(--chip))\",\n          foreground: \"hsl(var(--chip-foreground))\",\n        },\n\n        // Chart colors\n        chart: {\n          1: \"hsl(var(--chart-1))\",\n          2: \"hsl(var(--chart-2))\",\n          3: \"hsl(var(--chart-3))\",\n          4: \"hsl(var(--chart-4))\",\n          5: \"hsl(var(--chart-5))\",\n          6: \"hsl(var(--chart-6))\",\n          7: \"hsl(var(--chart-7))\",\n          8: \"hsl(var(--chart-8))\",\n          9: \"hsl(var(--chart-9))\",\n          10: \"hsl(var(--chart-10))\",\n          11: \"hsl(var(--chart-11))\",\n          12: \"hsl(var(--chart-12))\",\n        },\n      },\n      borderRadius: {\n        lg: \"var(--radius)\",\n        md: \"calc(var(--radius) - 2px)\",\n        sm: \"calc(var(--radius) - 4px)\",\n      },\n      keyframes: {\n        \"accordion-down\": {\n          from: { height: \"0\" },\n          to: { height: \"var(--radix-accordion-content-height)\" },\n        },\n        \"accordion-up\": {\n          from: { height: \"var(--radix-accordion-content-height)\" },\n          to: { height: \"0\" },\n        },\n      },\n      animation: {\n        \"accordion-down\": \"accordion-down 0.2s ease-out\",\n        \"accordion-up\": \"accordion-up 0.2s ease-out\",\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default optiUiPreset;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/calendar.tsx

@@ -143,14 +143,19 @@ function Calendar({
           "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",

package/src/components/context-menu.tsx

@@ -217,7 +217,7 @@ function MenuItem({ item, onClose, depth = 0 }: MenuItemProps) {
         <div
           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",
@@ -337,7 +337,7 @@ export 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",

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

@@ -756,7 +756,7 @@ export function DataGrid<T = Record<string, CellValue>>({
         {/* Tooltip for long content */}
         {hoveredCell && (
           <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`,

package/src/components/dropdown-menu.tsx

@@ -50,7 +50,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     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",
@@ -73,7 +73,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={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",

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

@@ -1,22 +1,128 @@
+import * as React from "react";
 import { cn } from "../../../utils/cn";
 import type { FileRendererProps } from "../types";
 
+/**
+ * Strict CSP applied at two layers:
+ *
+ * 1. `csp` attribute on the <iframe> — browser-enforced, cannot be
+ *    overridden or loosened by anything inside the document.
+ *    (Supported in Chromium-based browsers.)
+ *
+ * 2. <meta http-equiv="Content-Security-Policy"> in the <head> of the
+ *    srcdoc — fallback for browsers that don't support the `csp` attr.
+ *    Safe from injection: content is placed in <body>, and per the
+ *    HTML5 spec CSP meta tags are only honoured in <head>. Multiple
+ *    CSP policies are additive (can only restrict, never loosen).
+ */
+const CSP_POLICY = [
+  "default-src 'none'",
+  "script-src 'unsafe-inline'",
+  "style-src 'unsafe-inline'",
+  "img-src data: blob:",
+].join("; ");
+
+/**
+ * All Permissions-Policy features explicitly denied. Prevents sandboxed
+ * content from accessing device APIs even if a future browser grants
+ * them by default.
+ */
+const 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: string): string {
+  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>`;
+}
+
 /**
  * HtmlRenderer
  *
- * Renders HTML content in a fully sandboxed iframe.
+ * Renders HTML content in a triple-locked iframe:
+ *
+ * Layer 1 — `sandbox="allow-scripts"` (no allow-same-origin):
+ *   Opaque origin. No access to parent DOM, cookies, localStorage,
+ *   sessionStorage, or IndexedDB. No form submission, popups,
+ *   top-navigation, or pointer-lock.
+ *
+ * Layer 2 — Content-Security-Policy (iframe `csp` attr + meta fallback):
+ *   Blocks ALL network requests (fetch, XHR, WebSocket, sendBeacon,
+ *   image pings, external scripts/styles/fonts). Only inline scripts,
+ *   inline styles, and data:/blob: images are allowed.
+ *
+ * Layer 3 — Permissions-Policy via `allow` attribute:
+ *   Explicitly denies every device/sensor API (camera, microphone,
+ *   geolocation, payment, USB, display-capture, etc.).
+ *
+ * Additional hardening:
+ *   - referrerpolicy="no-referrer" — no URL leakage to embedded content
  */
 export function HtmlRenderer({
   content,
   fileName,
   className,
 }: FileRendererProps) {
+  const srcDoc = React.useMemo(
+    () => buildSandboxedHtml(content ?? ""),
+    [content],
+  );
+
+  // The `csp` attribute is a valid HTML attribute for iframes (enforces CSP
+  // at the browser level, cannot be overridden by document content) but is
+  // not yet in React's type definitions. We spread it to avoid a TS error.
+  const iframeProps = { csp: CSP_POLICY } as React.IframeHTMLAttributes<HTMLIFrameElement>;
+
   return (
     <iframe
-      srcDoc={content ?? ""}
+      srcDoc={srcDoc}
       sandbox="allow-scripts"
       title={fileName}
+      referrerPolicy="no-referrer"
+      allow={PERMISSIONS_POLICY}
       className={cn("h-full w-full border-0", className)}
+      {...iframeProps}
     />
   );
 }

package/src/components/popover.tsx

@@ -44,7 +44,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={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",

package/src/components/select.tsx

@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={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

package/src/components/tooltip.tsx

@@ -53,11 +53,11 @@ const TooltipContent = React.forwardRef<
         "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",

package/src/index.ts

@@ -380,16 +380,11 @@ export {
   type ThemeHSL,
   type ColorFieldConfig,
   // Presets
-  GREEN_THEME,
   OPTILOGIC_LEGACY_THEME,
-  FUTURISTIC_THEME,
-  NATURE_THEME,
-  SCIFI_THEME,
-  OCEAN_THEME,
-  SUNSET_THEME,
-  FOREST_THEME,
-  CYBERPUNK_THEME,
+  OPTILOGIC_DARK_THEME,
+  MODERN_LIGHT_THEME,
   MINIMALIST_LIGHT_THEME,
+  MODERN_DARK_THEME,
   DARK_ELEGANT_THEME,
   PRESET_THEMES,
   ALL_THEMES,