@validationcloud/fractal-ui 1.55.0 → 1.57.0

package/dist/index.js

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

@@ -1,6 +1,13 @@
 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 +32,4 @@ 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;

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

@@ -0,0 +1,83 @@
+import * as p from "echarts";
+import { randomUUID as y } from "node:crypto";
+import e from "node:path";
+import { fileURLToPath as O } from "node:url";
+import { Image as b, Canvas as g, FontLibrary as h } 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";
+globalThis.Image = b;
+let s = !1;
+function T() {
+  if (!s)
+    try {
+      const t = e.dirname(O(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 {
+          h.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 I = /* @__PURE__ */ new Set([
+  "aria",
+  // Tries to set DOM attributes which node-canvas doesn't implement
+  "toolbox",
+  // Export/zoom/reset buttons - not useful in static image
+  "dataZoom",
+  // Interactive range slider
+  "brush",
+  // Selection tool
+  "axisPointer"
+  // Crosshair on hover
+]);
+function v(t) {
+  if (!t || typeof t != "object" || Array.isArray(t))
+    return { animation: !1 };
+  const r = Object.fromEntries(
+    Object.entries(t).filter(([n]) => !I.has(n))
+  );
+  return r.animation = !1, r;
+}
+function S({
+  option: t,
+  theme: r,
+  includeWatermark: n = !1,
+  width: o = 800,
+  height: a = 600,
+  devicePixelRatio: m = 2
+}) {
+  T();
+  let i;
+  r && typeof r == "object" && (i = `theme-${y()}`, p.registerTheme(i, r));
+  const f = new g(o, a), c = p.init(f, i, {
+    renderer: "canvas",
+    devicePixelRatio: m,
+    width: o,
+    height: a
+  });
+  try {
+    const u = v(t), l = j(u, o, r), d = n ? P(l) : l;
+    return c.setOption(d), f.toBufferSync("png");
+  } finally {
+    c.dispose();
+  }
+}
+export {
+  S as renderChartToImage
+};

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/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/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 { renderChartToImage as o } from "./lib/render-chart-to-image.js";
+import { renderMavrikChartToImage as a } from "./lib/render-mavrik-chart-to-image.js";
+import { sanitizeChartOptionsForStaticRendering as n } from "./components/echarts-renderer/sanitize-chart-options-for-static-rendering.js";
 export {
-  o as renderChartToImage
+  o as renderChartToImage,
+  a as renderMavrikChartToImage,
+  n as sanitizeChartOptionsForStaticRendering
 };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.55.0",
+  "version": "1.57.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "dist/fonts"
   ],
   "license": "MIT",
   "repository": {
@@ -27,13 +28,17 @@
     "typecheck": "tsc -b --noEmit",
     "test": "vitest run",
     "prepublishOnly": "pnpm build",
-    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts"
+    "generate:theme": "node --experimental-transform-types scripts/generate-mavrik-theme.ts && prettier --write src/components/echarts-renderer/mavrik-theme*.json"
   },
   "exports": {
     ".": {
       "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"
@@ -45,7 +50,6 @@
     "node": ">=22.14.0"
   },
   "dependencies": {
-    "@radix-ui/react-select": "^2.1.7",
     "radix-ui": "^1",
     "react": "^19",
     "react-dom": "^19",
@@ -66,9 +70,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 +95,8 @@
   },
   "peerDependencies": {
     "@radix-ui/react-compose-refs": "^1",
-    "canvas": "^3",
     "echarts": "^6",
+    "skia-canvas": "^3",
     "radix-ui": "^1",
     "react": "^19",
     "react-dom": "^19",
@@ -102,10 +105,7 @@
     "zod": "^4"
   },
   "peerDependenciesMeta": {
-    "canvas": {
-      "optional": true
-    },
-    "echarts": {
+    "skia-canvas": {
       "optional": true
     }
   }