@visulima/vite-overlay 1.3.7 → 2.0.0-alpha.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## @visulima/vite-overlay [2.0.0-alpha.1](https://github.com/visulima/visulima/compare/@visulima/vite-overlay@1.3.7...@visulima/vite-overlay@2.0.0-alpha.1) (2025-12-07)
+
+### ⚠ BREAKING CHANGES
+
+* change min node version to 22.13
+
+### Bug Fixes
+
+* add new package image, fixed readme rendering on npm, fixed building of packages ([b790ba2](https://github.com/visulima/visulima/commit/b790ba253ea07fef83528fd822a678facf021b5f))
+* update Node.js engine version requirement to >=22.13 in multiple package.json files for improved compatibility ([b828e9a](https://github.com/visulima/visulima/commit/b828e9aeaebfc798eecddccd90e6ec7560c6d36a))
+
+### Miscellaneous Chores
+
+* moved all packages into groups ([0615e9d](https://github.com/visulima/visulima/commit/0615e9d14a8a886e11da529ce150cf31ca973c10))
+* update @anolilab/semantic-release-pnpm and @anolilab/semantic-release-preset to versions 3.2.2 and 12.1.2 across multiple package.json files for improved compatibility ([3921626](https://github.com/visulima/visulima/commit/3921626141fe5da398749bf0ba675f1596f18afb))
+* update dependencies across multiple packages to improve compatibility and performance, including upgrading `@anolilab/semantic-release-pnpm` and `@anolilab/semantic-release-preset` to versions 3.2.0 and 12.1.0 respectively, and updating `react`, `react-dom`, and `next` versions to 19.2.1 and 16.0.7 in various package.json files ([aee8fcd](https://github.com/visulima/visulima/commit/aee8fcd796ae9b8d055903260e7150996ea9f53d))
+
+
+### Dependencies
+
+* **@visulima/error:** upgraded to 6.0.0-alpha.1
+
 ## @visulima/vite-overlay [1.3.7](https://github.com/visulima/visulima/compare/@visulima/vite-overlay@1.3.6...@visulima/vite-overlay@1.3.7) (2025-11-13)
 
 ### Bug Fixes

package/README.md

@@ -1,15 +1,24 @@
-<div align="center">
-  <h3>Enhanced Error Overlay for Vite</h3>
-  <p>
-    A powerful development tool that provides rich error displays with source mapping, cause chain navigation, and intelligent solutions for Vite applications.
-  </p>
-</div>
+<!-- START_PACKAGE_OG_IMAGE_PLACEHOLDER -->
+
+<a href="https://www.anolilab.com/open-source" align="center">
+
+  <img src="__assets__/package-og.svg" alt="vite-overlay" />
+
+</a>
+
+<h3 align="center">Improved vite overlay</h3>
+
+<!-- END_PACKAGE_OG_IMAGE_PLACEHOLDER -->
 
 <br />
 
 <div align="center">
 
-[![typescript-image]][typescript-url] [![npm-image]][npm-url] [![license-image]][license-url]
+[![typescript-image][typescript-badge]][typescript-url]
+[![mit licence][license-badge]][license]
+[![npm downloads][npm-downloads-badge]][npm-downloads]
+[![Chat][chat-badge]][chat]
+[![PRs Welcome][prs-welcome-badge]][prs-welcome]
 
 </div>
 
@@ -93,6 +102,30 @@ export default defineConfig({
             // Whether to show the balloon button in the overlay (default: true)
             showBallonButton: true,
 
+            // Overlay configuration (optional)
+            overlay: {
+                // Balloon button configuration
+                balloon: {
+                    enabled: true,
+                    position: "bottom-right", // "top-left" | "top-right" | "bottom-left" | "bottom-right"
+                    icon: "", // Optional custom icon URL
+                    // Style can be a string or CSS.Properties object
+                    style: {
+                        background: "#ff4628",
+                        color: "#ffffff",
+                    },
+                    // Or as a string:
+                    // style: "background: #ff4628; color: #ffffff;",
+                },
+                // Custom CSS to inject for styling customization
+                // Can be a string or CSS.Properties object
+                customCSS: `
+                    #__v_o__balloon {
+                        border-radius: 20px;
+                    }
+                `,
+            },
+
             // Custom solution finder functions (optional)
             solutionFinders: [],
 
@@ -105,15 +138,19 @@ export default defineConfig({
 
 #### Options
 
-| Option                    | Type               | Default     | Description                                                              |
-| ------------------------- | ------------------ | ----------- | ------------------------------------------------------------------------ |
-| `forwardConsole`          | `boolean`          | `true`      | Enable/disable client-side runtime error logging and overlay display     |
-| `forwardedConsoleMethods` | `string[]`         | `["error"]` | Array of console method names to intercept and forward to overlay        |
-| `reactPluginName`         | `string`           | `undefined` | Custom React plugin name for detection (useful for custom React plugins) |
-| `vuePluginName`           | `string`           | `undefined` | Custom Vue plugin name for detection (useful for custom Vue plugins)     |
-| `showBallonButton`        | `boolean`          | `true`      | Whether to show the floating balloon button for error navigation         |
-| `solutionFinders`         | `SolutionFinder[]` | `[]`        | Array of custom solution finder functions for enhanced error analysis    |
-| `logClientRuntimeError`   | `boolean`          | `undefined` | **@deprecated** Use `forwardConsole` instead                             |
+| Option                    | Type                       | Default     | Description                                                                      |
+| ------------------------- | -------------------------- | ----------- | -------------------------------------------------------------------------------- |
+| `forwardConsole`          | `boolean`                  | `true`      | Enable/disable client-side runtime error logging and overlay display             |
+| `forwardedConsoleMethods` | `string[]`                 | `["error"]` | Array of console method names to intercept and forward to overlay                |
+| `reactPluginName`         | `string`                   | `undefined` | Custom React plugin name for detection (useful for custom React plugins)         |
+| `vuePluginName`           | `string`                   | `undefined` | Custom Vue plugin name for detection (useful for custom Vue plugins)             |
+| `showBallonButton`        | `boolean`                  | `true`      | Whether to show the floating balloon button for error navigation                 |
+| `overlay`                 | `OverlayConfig`            | `undefined` | Overlay configuration options                                                    |
+| `overlay.balloon`         | `BalloonConfig`            | `undefined` | Balloon button configuration                                                     |
+| `overlay.balloon.style`   | `string \| CSS.Properties` | `undefined` | Balloon button styles (string or CSS.Properties object)                          |
+| `overlay.customCSS`       | `string \| CSS.Properties` | `undefined` | Custom CSS to inject for styling customization (string or CSS.Properties object) |
+| `solutionFinders`         | `SolutionFinder[]`         | `[]`        | Array of custom solution finder functions for enhanced error analysis            |
+| `logClientRuntimeError`   | `boolean`                  | `undefined` | **@deprecated** Use `forwardConsole` instead                                     |
 
 ## Error Handling
 
@@ -253,6 +290,133 @@ The error overlay uses a custom design system with CSS custom properties:
 --ono-v-text: #c9d1d9;
 ```
 
+### Custom CSS Injection
+
+You can inject custom CSS to override the default styles of the overlay and button elements. The `overlay.customCSS` option accepts a CSS string (recommended) or a `CSS.Properties` object:
+
+```typescript
+export default defineConfig({
+    plugins: [
+        errorOverlay({
+            overlay: {
+                customCSS: `
+                    /* Customize the balloon button */
+                    #__v_o__balloon {
+                        border-radius: 20px;
+                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+                    }
+
+                    /* Customize the overlay panel */
+                    #__v_o__panel {
+                        border-radius: 12px;
+                    }
+
+                    /* Customize the backdrop */
+                    #__v_o__backdrop {
+                        background-color: rgba(0, 0, 0, 0.7);
+                    }
+                `,
+            },
+        }),
+    ],
+});
+```
+
+**Note:** For `customCSS`, using a CSS string is recommended since you need CSS selectors. `CSS.Properties` objects are mainly useful for inline styles (like `balloon.style`).
+
+### Balloon Button Styling
+
+The `balloon.style` option supports both string and `CSS.Properties` object. Using `CSS.Properties` provides type safety and autocomplete:
+
+```typescript
+import type * as CSS from "csstype";
+
+export default defineConfig({
+    plugins: [
+        errorOverlay({
+            overlay: {
+                balloon: {
+                    // Using CSS.Properties object (type-safe with autocomplete)
+                    style: {
+                        background: "#ff4628",
+                        color: "#ffffff",
+                        borderRadius: "20px",
+                    } as CSS.Properties,
+                    // Or using a string:
+                    // style: "background: #ff4628; color: #ffffff; border-radius: 20px;",
+                },
+            },
+        }),
+    ],
+});
+```
+
+**Note:** When using `CSS.Properties`, property names should be in camelCase (e.g., `borderRadius`), and they will be automatically converted to kebab-case CSS properties (e.g., `border-radius`) when applied.
+
+#### Available Element IDs for Customization
+
+The following element IDs can be targeted in your custom CSS:
+
+**Main Overlay Elements:**
+
+- `__v_o__root` - Root container element
+- `__v_o__backdrop` - Backdrop element behind the overlay
+- `__v_o__notch` - Notch container at the top of the overlay
+- `__v_o__panel` - Main panel container
+- `__v_o__overlay` - Overlay content container
+
+**Navigation & Pagination:**
+
+- `__v_o__error-overlay-pagination-previous` - Previous error button
+- `__v_o__error-overlay-pagination-next` - Next error button
+- `__v_o__error-overlay_pagination_count` - Pagination count container
+- `__v_o__pagination_current` - Current page number display
+- `__v_o__pagination_total` - Total page number display
+
+**History:**
+
+- `__v_o__history_toggle` - History toggle button
+- `__v_o__history_indicator` - History indicator container
+- `__v_o__history_count` - History count display
+- `__v_o__history_total` - History total display
+- `__v_o__history_timestamp` - History timestamp display
+- `__v_o__history_layer_depth` - History layer depth container
+- `__v_o__history_layer_depth_1` - History layer depth level 1
+- `__v_o__history_layer_depth_2` - History layer depth level 2
+
+**Header Elements:**
+
+- `__v_o__header` - Header container
+- `__v_o__header_loader` - Header loader skeleton
+- `__v_o__title` - Title container
+- `__v_o__heading` - Error heading/name
+- `__v_o__filelink` - File link button
+- `__v_o__mode` - Mode switch container (original/compiled)
+- `__v_o__copy_error` - Copy error button
+- `__v_o__close` - Close button
+
+**Balloon Button:**
+
+- `__v_o__balloon` - Floating balloon button
+- `__v_o__balloon_count` - Error count badge in balloon
+- `__v_o__balloon_text` - Text label in balloon
+
+**Message & Content:**
+
+- `__v_o__message_loader` - Message loader skeleton
+- `__v_o__message` - Error message container
+- `__v_o__body` - Body container
+- `__v_o__body_loader` - Body loader skeleton
+- `__v_o__solutions` - Solutions container
+- `__v_o__solutions_container` - Solutions content container
+- `__v_o__stacktrace` - Stack trace details element
+
+**Other:**
+
+- `__v_o__editor` - Editor selector container
+- `editor-selector` - Editor selector dropdown
+- `v-o-theme-switch` - Theme switch container
+
 ## Browser Support
 
 The error overlay is designed to work in all modern browsers with at least 1% global market share. This includes:
@@ -303,13 +467,10 @@ pnpm install
 - [Daniel Bannert](https://github.com/prisis)
 - [All Contributors](https://github.com/visulima/visulima/graphs/contributors)
 
+## Made with ❤️ at Anolilab
+
+This is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Anolilab](https://www.anolilab.com/open-source) is a Development and AI Studio. Contact us at [hello@anolilab.com](mailto:hello@anolilab.com) if you need any help with these technologies or just want to say hi!
+
 ## License
 
 This project is licensed under the MIT License - see the [MIT][license-url] file for details.
-
-[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
-[typescript-url]: https://www.typescriptlang.org/ "TypeScript"
-[license-image]: https://img.shields.io/npm/l/@visulima/vite-overlay?color=blueviolet&style=for-the-badge
-[license-url]: LICENSE.md "license"
-[npm-image]: https://img.shields.io/npm/v/@visulima/vite-overlay/latest.svg?style=for-the-badge&logo=npm
-[npm-url]: https://www.npmjs.com/package/@visulima/vite-overlay/v/latest "npm"