@validationcloud/fractal-ui 1.54.0 → 1.56.0

package/dist/charts.d.ts

@@ -0,0 +1,9 @@
+export { EChartsRenderer, type EChartsRendererProps, type EChartsRendererRef, type EChartsOption, } from './components/echarts-renderer/echarts-renderer';
+export { EChartsThemeOption, isEChartsThemeOption } from './components/echarts-renderer/echarts-theme-option';
+export { EChartsChartOption, isEChartsChartOption } from './components/echarts-renderer/echarts-chart-option';
+export { useChartInstance, type UseChartInstanceProps, type UseChartInstanceReturn, } from './components/echarts-renderer/use-chart-instance';
+export { MavrikChart, type MavrikChartProps } from './components/echarts-renderer/mavrik-chart';
+export { MAVRIK_THEME, MAVRIK_THEME_HORIZONTAL, selectMavrikTheme, type MavrikTheme, } from './components/echarts-renderer/mavrik-theme';
+export { hasHorizontalBars } from './components/echarts-renderer/detect-horizontal-bars';
+export { addWatermarkToOptions, WATERMARK_GRAPHIC } from './components/echarts-renderer/watermark-graphic';
+export { sanitizeChartOptionsForStaticRendering } from './components/echarts-renderer/sanitize-chart-options-for-static-rendering';

package/dist/charts.js

@@ -0,0 +1,25 @@
+import { EChartsRenderer as o } from "./src/components/echarts-renderer/echarts-renderer.js";
+import { EChartsThemeOption as a, isEChartsThemeOption as i } from "./src/components/echarts-renderer/echarts-theme-option.js";
+import { EChartsChartOption as s, isEChartsChartOption as h } from "./src/components/echarts-renderer/echarts-chart-option.js";
+import { useChartInstance as n } from "./src/components/echarts-renderer/use-chart-instance.js";
+import { MavrikChart as E } from "./src/components/echarts-renderer/mavrik-chart.js";
+import { MAVRIK_THEME as x, MAVRIK_THEME_HORIZONTAL as O, selectMavrikTheme as R } from "./src/components/echarts-renderer/mavrik-theme.js";
+import { hasHorizontalBars as M } from "./src/components/echarts-renderer/detect-horizontal-bars.js";
+import { WATERMARK_GRAPHIC as H, addWatermarkToOptions as I } from "./src/components/echarts-renderer/watermark-graphic.js";
+import { sanitizeChartOptionsForStaticRendering as _ } from "./src/components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
+export {
+  s as EChartsChartOption,
+  o as EChartsRenderer,
+  a as EChartsThemeOption,
+  x as MAVRIK_THEME,
+  O as MAVRIK_THEME_HORIZONTAL,
+  E as MavrikChart,
+  H as WATERMARK_GRAPHIC,
+  I as addWatermarkToOptions,
+  M as hasHorizontalBars,
+  h as isEChartsChartOption,
+  i as isEChartsThemeOption,
+  _ as sanitizeChartOptionsForStaticRendering,
+  R as selectMavrikTheme,
+  n as useChartInstance
+};

package/dist/components/collapsible/collapsible.d.ts

@@ -0,0 +1,14 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+import { default as React } from 'react';
+export declare const Collapsible: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * CollapsibleContent is a wrapper around Radix's Collapsible.Content component.
+ * It applies project-specific animations to the content based on the orientation.
+ * @param orientation - The orientation of the collapsible content.
+ */
+type CollapsibleContentProps = {
+    orientation?: 'horizontal' | 'vertical';
+} & React.ComponentProps<typeof CollapsiblePrimitive.Content>;
+export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsibleContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/echarts-renderer/mavrik-theme-horizontal.json.d.ts

@@ -270,6 +270,21 @@ declare const _default: {
         "color": "#FFFFFF"
       }
     }
+  },
+  "tooltip": {
+    "backgroundColor": "transparent",
+    "padding": 10,
+    "borderRadius": 8,
+    "borderColor": "#50525A",
+    "borderWidth": 1,
+    "textStyle": {
+      "color": "#FCFCFC",
+      "fontFamily": "Poppins, sans-serif",
+      "fontSize": 11,
+      "fontStyle": "normal",
+      "fontWeight": 500
+    },
+    "extraCssText": "letter-spacing: 0.22px; box-shadow: 0 14px 11px -4px rgba(0, 0, 0, 0.30), 0 -4px 4px 0 rgba(0, 0, 0, 0.04) inset; background: radial-gradient(ellipse at 25% 0%, rgba(217, 217, 217, 0.12) 0%, transparent 60%), #1A1D1F;"
   }
 }
 ;

package/dist/components/echarts-renderer/mavrik-theme.d.ts

@@ -229,6 +229,21 @@ export declare const MAVRIK_THEME: {
                 };
             };
         };
+        tooltip: {
+            backgroundColor: string;
+            padding: number;
+            borderRadius: number;
+            borderColor: string;
+            borderWidth: number;
+            textStyle: {
+                color: string;
+                fontFamily: string;
+                fontSize: number;
+                fontStyle: string;
+                fontWeight: number;
+            };
+            extraCssText: string;
+        };
     };
 };
 /** Mavrik theme variant with horizontal gradients (for horizontal bar charts) */
@@ -461,6 +476,21 @@ export declare const MAVRIK_THEME_HORIZONTAL: {
                 };
             };
         };
+        tooltip: {
+            backgroundColor: string;
+            padding: number;
+            borderRadius: number;
+            borderColor: string;
+            borderWidth: number;
+            textStyle: {
+                color: string;
+                fontFamily: string;
+                fontSize: number;
+                fontStyle: string;
+                fontWeight: number;
+            };
+            extraCssText: string;
+        };
     };
 };
 export type MavrikTheme = typeof MAVRIK_THEME | typeof MAVRIK_THEME_HORIZONTAL;

package/dist/components/echarts-renderer/mavrik-theme.json.d.ts

@@ -270,6 +270,21 @@ declare const _default: {
         "color": "#FFFFFF"
       }
     }
+  },
+  "tooltip": {
+    "backgroundColor": "transparent",
+    "padding": 10,
+    "borderRadius": 8,
+    "borderColor": "#50525A",
+    "borderWidth": 1,
+    "textStyle": {
+      "color": "#FCFCFC",
+      "fontFamily": "Poppins, sans-serif",
+      "fontSize": 11,
+      "fontStyle": "normal",
+      "fontWeight": 500
+    },
+    "extraCssText": "letter-spacing: 0.22px; box-shadow: 0 14px 11px -4px rgba(0, 0, 0, 0.30), 0 -4px 4px 0 rgba(0, 0, 0, 0.04) inset; background: radial-gradient(ellipse at 25% 0%, rgba(217, 217, 217, 0.12) 0%, transparent 60%), #1A1D1F;"
   }
 }
 ;

package/dist/components/echarts-renderer/sanitize-chart-options-for-static-rendering.d.ts

@@ -0,0 +1,9 @@
+import { EChartsOption } from 'echarts';
+/**
+ * Removes interactive components from chart options for static/image rendering.
+ * Also disables animation since it's not useful in static images.
+ *
+ * Use this function when rendering charts to static images (PNG, SVG exports)
+ * either server-side with skia-canvas or for client-side image exports.
+ */
+export declare function sanitizeChartOptionsForStaticRendering(option: EChartsOption): EChartsOption;

package/dist/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/index.d.ts

@@ -2,13 +2,8 @@ export { AnimatedLoader } from './components/animated-loader/animated-loader';
 export { Badge } from './components/badge/badge';
 export { Box } from './components/box/box';
 export { Button } from './components/button/button';
-export { EChartsRenderer, type EChartsRendererProps, type EChartsRendererRef, type EChartsOption, } from './components/echarts-renderer/echarts-renderer';
-export { EChartsThemeOption, isEChartsThemeOption } from './components/echarts-renderer/echarts-theme-option';
-export { EChartsChartOption, isEChartsChartOption } from './components/echarts-renderer/echarts-chart-option';
-export { useChartInstance, type UseChartInstanceProps, type UseChartInstanceReturn, } from './components/echarts-renderer/use-chart-instance';
-export { MavrikChart, type MavrikChartProps } from './components/echarts-renderer/mavrik-chart';
-export { MAVRIK_THEME, MAVRIK_THEME_HORIZONTAL } from './components/echarts-renderer/mavrik-theme';
 export { ClientModal } from './components/client-modal/client-modal';
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/collapsible/collapsible';
 export { CopyButton } from './components/copy-button/copy-button';
 export { DecoratedIcon } from './components/decorated-icon/decorated-icon';
 export { DropdownMenu, DropdownMenuItem } from './components/dropdown-menu/dropdown-menu';

package/dist/index.js

@@ -1,75 +1,64 @@
-import { AnimatedLoader as t } from "./src/components/animated-loader/animated-loader.js";
+import { AnimatedLoader as e } from "./src/components/animated-loader/animated-loader.js";
 import { Badge as p } from "./src/components/badge/badge.js";
 import { Box as x } from "./src/components/box/box.js";
 import { Button as n } from "./src/components/button/button.js";
-import { EChartsRenderer as i } from "./src/components/echarts-renderer/echarts-renderer.js";
-import { EChartsThemeOption as u, isEChartsThemeOption as h } from "./src/components/echarts-renderer/echarts-theme-option.js";
-import { EChartsChartOption as c, isEChartsChartOption as s } from "./src/components/echarts-renderer/echarts-chart-option.js";
-import { useChartInstance as I } from "./src/components/echarts-renderer/use-chart-instance.js";
-import { MavrikChart as T } from "./src/components/echarts-renderer/mavrik-chart.js";
-import { MAVRIK_THEME as B, MAVRIK_THEME_HORIZONTAL as S } from "./src/components/echarts-renderer/mavrik-theme.js";
-import { ClientModal as w } from "./src/components/client-modal/client-modal.js";
-import { CopyButton as A } from "./src/components/copy-button/copy-button.js";
-import { DecoratedIcon as P } from "./src/components/decorated-icon/decorated-icon.js";
-import { DropdownMenu as v, DropdownMenuItem as H } from "./src/components/dropdown-menu/dropdown-menu.js";
-import { ErrorBoundary as _ } from "./src/components/error-boundary/error-boundary.js";
-import { ScrollArea as y } from "./src/components/scroll-area/index.js";
-import { Icon as N } from "./src/components/icon/icon.js";
-import { IconButton as V } from "./src/components/icon-button/icon-button.js";
-import { InputButton as F } from "./src/components/input-button/input-button.js";
-import { MountSvgSprite as j } from "./src/components/mount-svg-sprite/mount-svg-sprite.js";
-import { NotFoundComponent as z } from "./src/components/not-found-component/not-found-component.js";
-import { PagePadding as J } from "./src/components/page-padding/page-padding.js";
-import { ProtocolLogo as W } from "./src/components/protocol-logo/protocol-logo.js";
-import { Select as Y, SelectItem as $ } from "./src/components/select/select.js";
-import { Skeleton as ro } from "./src/components/skeleton/skeleton.js";
-import { Switch as eo } from "./src/components/switch/switch.js";
-import { TextInput as mo } from "./src/components/text-input/text-input.js";
-import { Tooltip as fo } from "./src/components/tooltip/tooltip.js";
-import { TooltipProvider as ao } from "./src/components/tooltip-provider/tooltip-provider.js";
-import { TouchTarget as uo } from "./src/components/touch-target/touch-target.js";
-import { twMerge as lo } from "./src/lib/tailwind-merge.js";
-import { UserDropdown as so } from "./src/components/user-dropdown/user-dropdown.js";
-import { UserDropdownMobile as Io } from "./src/components/user-dropdown-mobile/user-dropdown-mobile.js";
-import { useScrollToBottom as To } from "./src/hooks/use-scroll-to-bottom.js";
+import { ClientModal as d } from "./src/components/client-modal/client-modal.js";
+import { Collapsible as i, CollapsibleContent as u, CollapsibleTrigger as c } from "./src/components/collapsible/collapsible.js";
+import { CopyButton as B } from "./src/components/copy-button/copy-button.js";
+import { DecoratedIcon as C } from "./src/components/decorated-icon/decorated-icon.js";
+import { DropdownMenu as T, DropdownMenuItem as s } from "./src/components/dropdown-menu/dropdown-menu.js";
+import { ErrorBoundary as M } from "./src/components/error-boundary/error-boundary.js";
+import { ScrollArea as b } from "./src/components/scroll-area/index.js";
+import { Icon as h } from "./src/components/icon/icon.js";
+import { IconButton as y } from "./src/components/icon-button/icon-button.js";
+import { InputButton as L } from "./src/components/input-button/input-button.js";
+import { MountSvgSprite as k } from "./src/components/mount-svg-sprite/mount-svg-sprite.js";
+import { NotFoundComponent as F } from "./src/components/not-found-component/not-found-component.js";
+import { PagePadding as j } from "./src/components/page-padding/page-padding.js";
+import { ProtocolLogo as z } from "./src/components/protocol-logo/protocol-logo.js";
+import { Select as H, SelectItem as J } from "./src/components/select/select.js";
+import { Skeleton as O } from "./src/components/skeleton/skeleton.js";
+import { Switch as R } from "./src/components/switch/switch.js";
+import { TextInput as W } from "./src/components/text-input/text-input.js";
+import { Tooltip as Y } from "./src/components/tooltip/tooltip.js";
+import { TooltipProvider as _ } from "./src/components/tooltip-provider/tooltip-provider.js";
+import { TouchTarget as oo } from "./src/components/touch-target/touch-target.js";
+import { twMerge as eo } from "./src/lib/tailwind-merge.js";
+import { UserDropdown as po } from "./src/components/user-dropdown/user-dropdown.js";
+import { UserDropdownMobile as xo } from "./src/components/user-dropdown-mobile/user-dropdown-mobile.js";
+import { useScrollToBottom as no } from "./src/hooks/use-scroll-to-bottom.js";
 export {
-  t as AnimatedLoader,
+  e as AnimatedLoader,
   p as Badge,
   x as Box,
   n as Button,
-  w as ClientModal,
-  A as CopyButton,
-  P as DecoratedIcon,
-  v as DropdownMenu,
-  H as DropdownMenuItem,
-  c as EChartsChartOption,
-  i as EChartsRenderer,
-  u as EChartsThemeOption,
-  _ as ErrorBoundary,
-  N as Icon,
-  V as IconButton,
-  F as InputButton,
-  B as MAVRIK_THEME,
-  S as MAVRIK_THEME_HORIZONTAL,
-  T as MavrikChart,
-  j as MountSvgSprite,
-  z as NotFoundComponent,
-  J as PagePadding,
-  W as ProtocolLogo,
-  y as ScrollArea,
-  Y as Select,
-  $ as SelectItem,
-  ro as Skeleton,
-  eo as Switch,
-  mo as TextInput,
-  fo as Tooltip,
-  ao as TooltipProvider,
-  uo as TouchTarget,
-  so as UserDropdown,
-  Io as UserDropdownMobile,
-  s as isEChartsChartOption,
-  h as isEChartsThemeOption,
-  lo as twMerge,
-  I as useChartInstance,
-  To as useScrollToBottom
+  d as ClientModal,
+  i as Collapsible,
+  u as CollapsibleContent,
+  c as CollapsibleTrigger,
+  B as CopyButton,
+  C as DecoratedIcon,
+  T as DropdownMenu,
+  s as DropdownMenuItem,
+  M as ErrorBoundary,
+  h as Icon,
+  y as IconButton,
+  L as InputButton,
+  k as MountSvgSprite,
+  F as NotFoundComponent,
+  j as PagePadding,
+  z as ProtocolLogo,
+  b as ScrollArea,
+  H as Select,
+  J as SelectItem,
+  O as Skeleton,
+  R as Switch,
+  W as TextInput,
+  Y as Tooltip,
+  _ as TooltipProvider,
+  oo as TouchTarget,
+  po as UserDropdown,
+  xo as UserDropdownMobile,
+  eo as twMerge,
+  no as useScrollToBottom
 };

package/dist/lib/get-echarts-module.d.ts

@@ -0,0 +1 @@
+export declare function getEChartsModule(): typeof import('echarts');

package/dist/lib/render-chart-to-image.d.ts

@@ -1,6 +1,26 @@
+import { EChartsInitOpts } from 'echarts';
+/**
+ * Minimal ECharts interface for server-side rendering.
+ * Only includes the methods needed by renderChartToImage.
+ */
+export interface EChartsModule {
+    registerTheme: (name: string, theme: Record<string, unknown>) => void;
+    init: (dom?: any, theme?: string | Record<string, unknown> | null, opts?: EChartsInitOpts) => EChartsInstance;
+}
+interface EChartsInstance {
+    setOption: (option: unknown) => void;
+    dispose: () => void;
+}
 export interface RenderChartToImageOptions {
     option: unknown;
     theme?: Record<string, unknown>;
+    /**
+     * Adds Validation Cloud watermark graphic to the chart option before rendering.
+     *
+     * Note: The default is `false` because some server-side image backends can be
+     * inconsistent when decoding SVG images.
+     */
+    includeWatermark?: boolean;
     width?: number;
     height?: number;
     devicePixelRatio?: number;
@@ -25,4 +45,5 @@ export interface RenderChartToImageOptions {
  * });
  * ```
  */
-export declare function renderChartToImage({ option, theme, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;
+export declare function renderChartToImage({ option, theme, includeWatermark, width, height, devicePixelRatio, }: RenderChartToImageOptions): Buffer;
+export {};

package/dist/lib/render-mavrik-chart-to-image.d.ts

@@ -1,6 +1,7 @@
 import { EChartsOption } from 'echarts';
 export interface RenderMavrikChartToImageOptions {
     option: EChartsOption;
+    includeWatermark?: boolean;
     width?: number;
     height?: number;
     devicePixelRatio?: number;
@@ -30,4 +31,4 @@ export interface RenderMavrikChartToImageOptions {
  * });
  * ```
  */
-export declare function renderMavrikChartToImage({ option, width, height, devicePixelRatio, }: RenderMavrikChartToImageOptions): Buffer;
+export declare function renderMavrikChartToImage({ option, includeWatermark, width, height, devicePixelRatio, }: RenderMavrikChartToImageOptions): Buffer;

package/dist/server.d.ts

@@ -1 +1,3 @@
 export { renderChartToImage, type RenderChartToImageOptions } from './lib/render-chart-to-image';
+export { renderMavrikChartToImage, type RenderMavrikChartToImageOptions } from './lib/render-mavrik-chart-to-image';
+export { sanitizeChartOptionsForStaticRendering } from './components/echarts-renderer/sanitize-chart-options-for-static-rendering';

package/dist/server.js

@@ -1,4 +1,8 @@
 import { renderChartToImage as o } from "./src/lib/render-chart-to-image.js";
+import { renderMavrikChartToImage as a } from "./src/lib/render-mavrik-chart-to-image.js";
+import { sanitizeChartOptionsForStaticRendering as n } from "./src/components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
 export {
-  o as renderChartToImage
+  o as renderChartToImage,
+  a as renderMavrikChartToImage,
+  n as sanitizeChartOptionsForStaticRendering
 };

package/dist/src/components/collapsible/collapsible.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Collapsible as t } from "radix-ui";
+import { forwardRef as s } from "react";
+import { twMerge as r } from "../../lib/tailwind-merge.js";
+const p = s(
+  ({ className: a, ...e }, l) => /* @__PURE__ */ o(t.Root, { ref: l, className: r(a), ...e })
+);
+p.displayName = "Collapsible";
+const n = s(({ className: a, ...e }, l) => /* @__PURE__ */ o(t.Trigger, { ref: l, className: r(a), ...e }));
+n.displayName = "CollapsibleTrigger";
+const m = s(({ className: a, orientation: e = "vertical", ...l }, i) => /* @__PURE__ */ o(
+  t.Content,
+  {
+    ref: i,
+    className: r(
+      "overflow-hidden",
+      e === "vertical" && "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+      e === "horizontal" && "data-[state=closed]:animate-collapsible-in data-[state=open]:animate-collapsible-out",
+      a
+    ),
+    ...l
+  }
+));
+m.displayName = "CollapsibleContent";
+export {
+  p as Collapsible,
+  m as CollapsibleContent,
+  n as CollapsibleTrigger
+};

package/dist/src/components/echarts-renderer/mavrik-theme-horizontal.json.js

@@ -1,33 +1,35 @@
-const o = [{ type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#C14E64" }, { offset: 1, color: "#DF687D" }] }, { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#FFFFFF" }] }, { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#1E6FDA" }, { offset: 1, color: "#3F8CFF" }] }], e = "#242731", t = { fontFamily: "Poppins, sans-serif", fontWeight: 500 }, l = { top: 32, left: 32, textStyle: { color: "#FFFFFF", fontSize: 16, fontWeight: 600 }, subtextStyle: { color: "#A7A9AD" } }, r = { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, areaStyle: { opacity: 0.15 }, showSymbol: !1, symbolSize: 5, symbol: "circle", smooth: !1, sampling: "lttb" }, i = { barGap: "25%", barCategoryGap: "25%" }, a = { axisLine: { show: !0, lineStyle: { color: "#3A3D46", type: "dashed" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, s = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, n = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, c = { axisLine: { show: !0, lineStyle: { color: "#3A3D46" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, d = { top: 82, left: "auto", right: 32, icon: "circle", itemGap: 22, itemWidth: 12, itemHeight: 12, textStyle: { color: "#A7A9AD", fontSize: 11 } }, h = { top: 132, left: 32, right: 32, bottom: 32, outerBoundsMode: "same", outerBoundsContain: "axisLabel" }, A = { backgroundColor: "rgba(36, 39, 49, 0)", borderColor: "#3A3D46", borderRadius: 4, dataBackground: { lineStyle: { color: "#606060", width: 1 }, areaStyle: { color: "rgba(96, 96, 96, 0.3)" } }, selectedDataBackground: { lineStyle: { color: "#b36674", width: 1 }, areaStyle: { color: "rgba(164, 91, 105, 0.5)" } }, fillerColor: "rgba(82, 45, 52, 0.35)", handleStyle: { color: "#C14E64", borderColor: "#C14E64" }, moveHandleStyle: { color: "#b36674" }, brushStyle: { color: "rgba(95, 58, 65, 0.2)" }, emphasis: { handleStyle: { color: "rgb(209, 123, 140)", borderColor: "rgb(209, 123, 140)" } }, handleSize: "100%", textStyle: { color: "#A7A9AD" } }, y = { label: { color: "#A7A9AD" }, emphasis: { label: { color: "#FFFFFF" } } }, f = {
+const o = [{ type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#C14E64" }, { offset: 1, color: "#DF687D" }] }, { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#FFFFFF" }] }, { type: "linear", x: 0, y: 0, x2: 1, y2: 0, colorStops: [{ offset: 0, color: "#1E6FDA" }, { offset: 1, color: "#3F8CFF" }] }], e = "#242731", t = { fontFamily: "Poppins, sans-serif", fontWeight: 500 }, l = { top: 32, left: 32, textStyle: { color: "#FFFFFF", fontSize: 16, fontWeight: 600 }, subtextStyle: { color: "#A7A9AD" } }, r = { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, areaStyle: { opacity: 0.15 }, showSymbol: !1, symbolSize: 5, symbol: "circle", smooth: !1, sampling: "lttb" }, a = { barGap: "25%", barCategoryGap: "25%" }, i = { axisLine: { show: !0, lineStyle: { color: "#3A3D46", type: "dashed" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, s = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, n = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, c = { axisLine: { show: !0, lineStyle: { color: "#3A3D46" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, d = { top: 82, left: "auto", right: 32, icon: "circle", itemGap: 22, itemWidth: 12, itemHeight: 12, textStyle: { color: "#A7A9AD", fontSize: 11 } }, h = { top: 132, left: 32, right: 32, bottom: 32, outerBoundsMode: "same", outerBoundsContain: "axisLabel" }, A = { backgroundColor: "rgba(36, 39, 49, 0)", borderColor: "#3A3D46", borderRadius: 4, dataBackground: { lineStyle: { color: "#606060", width: 1 }, areaStyle: { color: "rgba(96, 96, 96, 0.3)" } }, selectedDataBackground: { lineStyle: { color: "#b36674", width: 1 }, areaStyle: { color: "rgba(164, 91, 105, 0.5)" } }, fillerColor: "rgba(82, 45, 52, 0.35)", handleStyle: { color: "#C14E64", borderColor: "#C14E64" }, moveHandleStyle: { color: "#b36674" }, brushStyle: { color: "rgba(95, 58, 65, 0.2)" }, emphasis: { handleStyle: { color: "rgb(209, 123, 140)", borderColor: "rgb(209, 123, 140)" } }, handleSize: "100%", textStyle: { color: "#A7A9AD" } }, f = { label: { color: "#A7A9AD" }, emphasis: { label: { color: "#FFFFFF" } } }, y = { backgroundColor: "transparent", padding: 10, borderRadius: 8, borderColor: "#50525A", borderWidth: 1, textStyle: { color: "#FCFCFC", fontFamily: "Poppins, sans-serif", fontSize: 11, fontStyle: "normal", fontWeight: 500 }, extraCssText: "letter-spacing: 0.22px; box-shadow: 0 14px 11px -4px rgba(0, 0, 0, 0.30), 0 -4px 4px 0 rgba(0, 0, 0, 0.04) inset; background: radial-gradient(ellipse at 25% 0%, rgba(217, 217, 217, 0.12) 0%, transparent 60%), #1A1D1F;" }, p = {
   color: o,
   backgroundColor: e,
   textStyle: t,
   title: l,
   line: r,
-  bar: i,
-  categoryAxis: a,
+  bar: a,
+  categoryAxis: i,
   valueAxis: s,
   logAxis: n,
   timeAxis: c,
   legend: d,
   grid: h,
   dataZoom: A,
-  markPoint: y
+  markPoint: f,
+  tooltip: y
 };
 export {
   e as backgroundColor,
-  i as bar,
-  a as categoryAxis,
+  a as bar,
+  i as categoryAxis,
   o as color,
   A as dataZoom,
-  f as default,
+  p as default,
   h as grid,
   d as legend,
   r as line,
   n as logAxis,
-  y as markPoint,
+  f as markPoint,
   t as textStyle,
   c as timeAxis,
   l as title,
+  y as tooltip,
   s as valueAxis
 };

package/dist/src/components/echarts-renderer/mavrik-theme.js

@@ -1,23 +1,25 @@
-import { hasHorizontalBars as t } from "./detect-horizontal-bars.js";
-import { isEChartsThemeOption as o } from "./echarts-theme-option.js";
+import { hasHorizontalBars as e } from "./detect-horizontal-bars.js";
+import { isEChartsThemeOption as m } from "./echarts-theme-option.js";
 import r from "./mavrik-theme-horizontal.json.js";
 import i from "./mavrik-theme.json.js";
-if (!o(i))
-  throw new Error("Invalid mavrik theme configuration");
-if (!o(r))
-  throw new Error("Invalid mavrik horizontal theme configuration");
-const e = {
+function t(o, n) {
+  if (!m(n))
+    throw new Error(`Invalid ECharts theme configuration JSON: ${o}`);
+}
+t("mavrik-theme.json", i);
+t("mavrik-theme-horizontal.json", r);
+const a = {
   name: "mavrik",
   config: i
-}, m = {
+}, h = {
   name: "mavrik-horizontal",
   config: r
 };
-function l(n) {
-  return t(n) ? m : e;
+function E(o) {
+  return e(o) ? h : a;
 }
 export {
-  e as MAVRIK_THEME,
-  m as MAVRIK_THEME_HORIZONTAL,
-  l as selectMavrikTheme
+  a as MAVRIK_THEME,
+  h as MAVRIK_THEME_HORIZONTAL,
+  E as selectMavrikTheme
 };

package/dist/src/components/echarts-renderer/mavrik-theme.json.js

@@ -1,33 +1,35 @@
-const o = [{ type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#C14E64" }, { offset: 1, color: "#DF687D" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#FFFFFF" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#1E6FDA" }, { offset: 1, color: "#3F8CFF" }] }], e = "#242731", t = { fontFamily: "Poppins, sans-serif", fontWeight: 500 }, l = { top: 32, left: 32, textStyle: { color: "#FFFFFF", fontSize: 16, fontWeight: 600 }, subtextStyle: { color: "#A7A9AD" } }, r = { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, areaStyle: { opacity: 0.15 }, showSymbol: !1, symbolSize: 5, symbol: "circle", smooth: !1, sampling: "lttb" }, i = { barGap: "25%", barCategoryGap: "25%" }, a = { axisLine: { show: !0, lineStyle: { color: "#3A3D46", type: "dashed" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, s = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, n = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, c = { axisLine: { show: !0, lineStyle: { color: "#3A3D46" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, d = { top: 82, left: "auto", right: 32, icon: "circle", itemGap: 22, itemWidth: 12, itemHeight: 12, textStyle: { color: "#A7A9AD", fontSize: 11 } }, h = { top: 132, left: 32, right: 32, bottom: 32, outerBoundsMode: "same", outerBoundsContain: "axisLabel" }, A = { backgroundColor: "rgba(36, 39, 49, 0)", borderColor: "#3A3D46", borderRadius: 4, dataBackground: { lineStyle: { color: "#606060", width: 1 }, areaStyle: { color: "rgba(96, 96, 96, 0.3)" } }, selectedDataBackground: { lineStyle: { color: "#b36674", width: 1 }, areaStyle: { color: "rgba(164, 91, 105, 0.5)" } }, fillerColor: "rgba(82, 45, 52, 0.35)", handleStyle: { color: "#C14E64", borderColor: "#C14E64" }, moveHandleStyle: { color: "#b36674" }, brushStyle: { color: "rgba(95, 58, 65, 0.2)" }, emphasis: { handleStyle: { color: "rgb(209, 123, 140)", borderColor: "rgb(209, 123, 140)" } }, handleSize: "100%", textStyle: { color: "#A7A9AD" } }, y = { label: { color: "#A7A9AD" }, emphasis: { label: { color: "#FFFFFF" } } }, f = {
+const o = [{ type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#C14E64" }, { offset: 1, color: "#DF687D" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#FFFFFF" }, { offset: 1, color: "#FFFFFF" }] }, { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: "#1E6FDA" }, { offset: 1, color: "#3F8CFF" }] }], e = "#242731", t = { fontFamily: "Poppins, sans-serif", fontWeight: 500 }, l = { top: 32, left: 32, textStyle: { color: "#FFFFFF", fontSize: 16, fontWeight: 600 }, subtextStyle: { color: "#A7A9AD" } }, r = { itemStyle: { borderWidth: 1 }, lineStyle: { width: 2 }, areaStyle: { opacity: 0.15 }, showSymbol: !1, symbolSize: 5, symbol: "circle", smooth: !1, sampling: "lttb" }, a = { barGap: "25%", barCategoryGap: "25%" }, i = { axisLine: { show: !0, lineStyle: { color: "#3A3D46", type: "dashed" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, s = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, n = { axisLine: { show: !1 }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !0, lineStyle: { color: ["#3A3D46"], type: "dashed" } } }, c = { axisLine: { show: !0, lineStyle: { color: "#3A3D46" } }, axisTick: { show: !1 }, axisLabel: { show: !0, color: "#A7A9AD", hideOverlap: !0 }, nameLocation: "middle", nameTextStyle: { color: "#A7A9AD", fontSize: 11, fontWeight: 400 }, splitLine: { show: !1 } }, d = { top: 82, left: "auto", right: 32, icon: "circle", itemGap: 22, itemWidth: 12, itemHeight: 12, textStyle: { color: "#A7A9AD", fontSize: 11 } }, h = { top: 132, left: 32, right: 32, bottom: 32, outerBoundsMode: "same", outerBoundsContain: "axisLabel" }, A = { backgroundColor: "rgba(36, 39, 49, 0)", borderColor: "#3A3D46", borderRadius: 4, dataBackground: { lineStyle: { color: "#606060", width: 1 }, areaStyle: { color: "rgba(96, 96, 96, 0.3)" } }, selectedDataBackground: { lineStyle: { color: "#b36674", width: 1 }, areaStyle: { color: "rgba(164, 91, 105, 0.5)" } }, fillerColor: "rgba(82, 45, 52, 0.35)", handleStyle: { color: "#C14E64", borderColor: "#C14E64" }, moveHandleStyle: { color: "#b36674" }, brushStyle: { color: "rgba(95, 58, 65, 0.2)" }, emphasis: { handleStyle: { color: "rgb(209, 123, 140)", borderColor: "rgb(209, 123, 140)" } }, handleSize: "100%", textStyle: { color: "#A7A9AD" } }, f = { label: { color: "#A7A9AD" }, emphasis: { label: { color: "#FFFFFF" } } }, y = { backgroundColor: "transparent", padding: 10, borderRadius: 8, borderColor: "#50525A", borderWidth: 1, textStyle: { color: "#FCFCFC", fontFamily: "Poppins, sans-serif", fontSize: 11, fontStyle: "normal", fontWeight: 500 }, extraCssText: "letter-spacing: 0.22px; box-shadow: 0 14px 11px -4px rgba(0, 0, 0, 0.30), 0 -4px 4px 0 rgba(0, 0, 0, 0.04) inset; background: radial-gradient(ellipse at 25% 0%, rgba(217, 217, 217, 0.12) 0%, transparent 60%), #1A1D1F;" }, p = {
   color: o,
   backgroundColor: e,
   textStyle: t,
   title: l,
   line: r,
-  bar: i,
-  categoryAxis: a,
+  bar: a,
+  categoryAxis: i,
   valueAxis: s,
   logAxis: n,
   timeAxis: c,
   legend: d,
   grid: h,
   dataZoom: A,
-  markPoint: y
+  markPoint: f,
+  tooltip: y
 };
 export {
   e as backgroundColor,
-  i as bar,
-  a as categoryAxis,
+  a as bar,
+  i as categoryAxis,
   o as color,
   A as dataZoom,
-  f as default,
+  p as default,
   h as grid,
   d as legend,
   r as line,
   n as logAxis,
-  y as markPoint,
+  f as markPoint,
   t as textStyle,
   c as timeAxis,
   l as title,
+  y as tooltip,
   s as valueAxis
 };

package/dist/src/components/echarts-renderer/sanitize-chart-options-for-static-rendering.js

@@ -0,0 +1,21 @@
+const n = /* @__PURE__ */ new Set([
+  "aria",
+  // Tries to set DOM attributes (not supported by skia-canvas)
+  "toolbox",
+  // Export/zoom/reset buttons
+  "dataZoom",
+  // Interactive range slider
+  "brush",
+  // Selection tool
+  "axisPointer"
+  // Crosshair on hover
+]);
+function o(e) {
+  const t = Object.fromEntries(
+    Object.entries(e).filter(([i]) => !n.has(i))
+  );
+  return t.animation = !1, t;
+}
+export {
+  o as sanitizeChartOptionsForStaticRendering
+};

package/dist/src/lib/get-echarts-module.js

@@ -0,0 +1,8 @@
+import { createRequire as e } from "node:module";
+let r;
+function i() {
+  return r || (r = e(import.meta.url)("echarts"), r);
+}
+export {
+  i as getEChartsModule
+};

package/dist/src/lib/render-chart-to-image.js

@@ -1,9 +1,40 @@
-import { createCanvas as u } from "canvas";
-import { randomUUID as l } from "node:crypto";
-import { createRequire as d } from "node:module";
-import { calculateTitleLayout as O } from "../components/echarts-renderer/calculate-title-layout.js";
-import { addWatermarkToOptions as y } from "../components/echarts-renderer/watermark-graphic.js";
-const T = d(import.meta.url), b = /* @__PURE__ */ new Set([
+import { randomUUID as y } from "node:crypto";
+import e from "node:path";
+import { fileURLToPath as g } from "node:url";
+import { Image as h, Canvas as O, FontLibrary as b } from "skia-canvas";
+import { calculateTitleLayout as j } from "../components/echarts-renderer/calculate-title-layout.js";
+import { addWatermarkToOptions as P } from "../components/echarts-renderer/watermark-graphic.js";
+import { getEChartsModule as T } from "./get-echarts-module.js";
+globalThis.Image = h;
+let s = !1;
+function C() {
+  if (!s)
+    try {
+      const t = e.dirname(g(import.meta.url)), r = [
+        // dist/src/lib -> dist/fonts (packaged) OR src/lib -> src/fonts (dev)
+        e.resolve(t, "../../fonts"),
+        // dist/lib -> dist/fonts (packaged)
+        e.resolve(t, "../fonts")
+      ];
+      let n;
+      for (const o of r)
+        try {
+          b.use("Poppins", [
+            e.join(o, "Poppins-Regular.ttf"),
+            e.join(o, "Poppins-Medium.ttf"),
+            e.join(o, "Poppins-SemiBold.ttf"),
+            e.join(o, "Poppins-Bold.ttf")
+          ]), s = !0;
+          return;
+        } catch (a) {
+          n = a;
+        }
+      throw n;
+    } catch (t) {
+      console.warn("Failed to register Poppins fonts, charts will use fallback font:", t), s = !0;
+    }
+}
+const E = /* @__PURE__ */ new Set([
   "aria",
   // Tries to set DOM attributes which node-canvas doesn't implement
   "toolbox",
@@ -15,37 +46,39 @@ const T = d(import.meta.url), b = /* @__PURE__ */ new Set([
   "axisPointer"
   // Crosshair on hover
 ]);
-function j(r) {
-  if (!r || typeof r != "object" || Array.isArray(r))
+function I(t) {
+  if (!t || typeof t != "object" || Array.isArray(t))
     return { animation: !1 };
-  const t = Object.fromEntries(
-    Object.entries(r).filter(([e]) => !b.has(e))
+  const r = Object.fromEntries(
+    Object.entries(t).filter(([n]) => !E.has(n))
   );
-  return t.animation = !1, t;
+  return r.animation = !1, r;
 }
-function g({
-  option: r,
-  theme: t,
-  width: e = 800,
-  height: o = 600,
-  devicePixelRatio: c = 2
+function w({
+  option: t,
+  theme: r,
+  includeWatermark: n = !1,
+  width: o = 800,
+  height: a = 600,
+  devicePixelRatio: m = 2
 }) {
-  const n = T("echarts");
-  let a;
-  t && typeof t == "object" && (a = `theme-${l()}`, n.registerTheme(a, t));
-  const i = u(e, o), s = n.init(i, a, {
+  const f = T();
+  C();
+  let i;
+  r && typeof r == "object" && (i = `theme-${y()}`, f.registerTheme(i, r));
+  const c = new O(o, a), l = f.init(c, i, {
     renderer: "canvas",
-    devicePixelRatio: c,
-    width: e,
-    height: o
+    devicePixelRatio: m,
+    width: o,
+    height: a
   });
   try {
-    const m = j(r), f = O(m, e, t), p = y(f);
-    return s.setOption(p), i.toBuffer("image/png");
+    const u = I(t), p = j(u, o, r), d = n ? P(p) : p;
+    return l.setOption(d), c.toBufferSync("png");
   } finally {
-    s.dispose();
+    l.dispose();
   }
 }
 export {
-  g as renderChartToImage
+  w as renderChartToImage
 };

package/dist/src/lib/render-mavrik-chart-to-image.js

@@ -0,0 +1,22 @@
+import { selectMavrikTheme as n } from "../components/echarts-renderer/mavrik-theme.js";
+import { renderChartToImage as f } from "./render-chart-to-image.js";
+function c({
+  option: e,
+  includeWatermark: r = !1,
+  width: t = 800,
+  height: m = 600,
+  devicePixelRatio: o = 2
+}) {
+  const a = n(e);
+  return f({
+    option: e,
+    theme: a.config,
+    includeWatermark: r,
+    width: t,
+    height: m,
+    devicePixelRatio: o
+  });
+}
+export {
+  c as renderMavrikChartToImage
+};

package/dist/styles/animation.css

@@ -8,6 +8,10 @@
   --animate-tooltip-enter: fade-in 150ms ease-out, scale-up-50 100ms cubic-bezier(0.16, 1, 0.3, 1);
   --animate-tooltip-delayed-enter: fade-in 150ms ease-out, scale-up-50 400ms cubic-bezier(0.16, 1, 0.3, 1);
   --animate-tooltip-exit: fade-out 100ms ease-in, scale-down-50 100ms ease-in;
+  --animate-collapsible-down: collapsible-slide-down 150ms ease-out;
+  --animate-collapsible-up: collapsible-slide-up 150ms ease-out;
+  --animate-collapsible-in: collapsible-slide-in 150ms ease-out;
+  --animate-collapsible-out: collapsible-slide-out 150ms ease-out;
 }
 
 @keyframes fade-in {
@@ -81,3 +85,39 @@
     transform: translateX(100%);
   }
 }
+
+@keyframes collapsible-slide-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-slide-up {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-slide-in {
+  from {
+    width: var(--radix-collapsible-content-width);
+  }
+  to {
+    width: 0;
+  }
+}
+
+@keyframes collapsible-slide-out {
+  from {
+    width: 0;
+  }
+  to {
+    width: var(--radix-collapsible-content-width);
+  }
+}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.54.0",
+  "version": "1.56.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "dist/fonts"
   ],
   "license": "MIT",
   "repository": {
@@ -34,6 +35,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./charts": {
+      "types": "./dist/charts.d.ts",
+      "import": "./dist/charts.js"
+    },
     "./server": {
       "types": "./dist/server.d.ts",
       "import": "./dist/server.js"
@@ -46,6 +51,7 @@
   },
   "dependencies": {
     "@radix-ui/react-select": "^2.1.7",
+    "echarts": "^6",
     "radix-ui": "^1",
     "react": "^19",
     "react-dom": "^19",
@@ -66,9 +72,8 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.2",
-    "canvas": "^3.2.0",
+    "skia-canvas": "^3.0.8",
     "culori": "^4.0.2",
-    "echarts": "^6.0.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -92,8 +97,7 @@
   },
   "peerDependencies": {
     "@radix-ui/react-compose-refs": "^1",
-    "canvas": "^3",
-    "echarts": "^6",
+    "skia-canvas": "^3",
     "radix-ui": "^1",
     "react": "^19",
     "react-dom": "^19",
@@ -102,10 +106,7 @@
     "zod": "^4"
   },
   "peerDependenciesMeta": {
-    "canvas": {
-      "optional": true
-    },
-    "echarts": {
+    "skia-canvas": {
       "optional": true
     }
   }