@semcore/d3-chart 16.7.0-prerelease.3 → 16.7.0

package/lib/esm/index.mjs

@@ -1,4 +1,5 @@
 import { default as default2 } from "./Plot.mjs";
+import "./component/ChartLegend/index.mjs";
 import { default as default3 } from "./component/Chart/index.mjs";
 import { default as default4 } from "./component/StackGroupBar/StackGroupBar.mjs";
 import { SvgElement } from "./component/SvgElement.mjs";

package/lib/esm/style/axis.shadow.css

@@ -10,6 +10,9 @@ STick {
   font-size: var(--intergalactic-fs-100, 12px);
   fill: var(--intergalactic-chart-grid-text-label, oklch(0.088 0.026 147.7 / 0.583));
 }
+STick[primaryText] {
+  fill: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
+}
 
 STick[hide] {
   display: none;
@@ -69,7 +72,6 @@ STick[position='bottom'] {
 
 STick[position='right'] {
   transform: translateX(16px);
-  text-anchor: start;
   dominant-baseline: middle;
 
   tspan {

package/lib/esm/style/plot.shadow.css

@@ -1,5 +1,3 @@
-@import './var.css';
-
 SPlot {
   overflow: hidden;
 }
@@ -17,7 +15,7 @@ foreignObject[data-aria-only] {
   pointer-events: none;
 }
 
-SPlot[keyboardFocused] {
+SPlot:has(foreignObject[data-aria-only]:focus-within) {
   @mixin focus-outline-mixin;
   border-radius: var(--intergalactic-surface-rounded, calc(6px + 2px));
 }

package/lib/esm/style/plotA11yModule.shadow.css

@@ -1,12 +1,11 @@
-@import './var.css';
-
 SPlotA11yModule {
-  user-select: none;
-  pointer-events: none;
-  opacity: 0;
-}
-SPlotA11yModule:focus {
-  user-select: all;
-  pointer-events: all;
-  opacity: 1;
-}
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0,
+}

package/lib/esm/style/plotA11yView.shadow.css

@@ -1,39 +1,26 @@
-@import './var.css';
-
 SPlotA11yView {
-  user-select: none;
-  pointer-events: none;
-  opacity: 0;
+  position: relative;
+  display: block;
   background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
   border: 3px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
   font-size: var(--intergalactic-fs-50, 10px);
-  /* disable-tokens-validator */
+  z-index: var(--intergalactic-z-index-overlay, 500);
   padding: 2px;
   width: 200px;
   height: 200px;
   max-width: 80%;
   max-height: 80%;
   overflow: auto;
-}
-SPlotA11yView:focus-within,
-SPlotA11yView:focus {
-  user-select: all;
-  pointer-events: all;
-  opacity: 1;
-  z-index: var(--intergalactic-z-index-overlay, 500);
-  position: relative;
-  display: block;
-}
-SPlotA11yView a {
-  cursor: pointer;
-  text-decoration: underline;
-  margin-bottom: var(--intergalactic-spacing-2x, 8px);
-  display: block;
-}
 
-SPlotA11yView table,
-SPlotA11yView td,
-SPlotA11yView th {
-  border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  a {
+    cursor: pointer;
+    text-decoration: underline;
+    margin-bottom: var(--intergalactic-spacing-2x, 8px);
+    display: block;
+  }
+
+  table, td, th {
+    border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
+  }
 }

package/lib/esm/utils.mjs

@@ -5,7 +5,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import EventEmitter from "@semcore/core/lib/utils/eventEmitter";
 import { extent, bisector } from "d3-array";
-import { scaleSqrt, scaleQuantize, scaleBand } from "d3-scale";
+import { scaleQuantize, scaleBand, scaleSqrt } from "d3-scale";
 var eventToPoint = function eventToPoint2(event, svgRoot) {
   var node = event.currentTarget || event.target;
   var rect = svgRoot.getBoundingClientRect();
@@ -196,7 +196,7 @@ var uniqueId = function uniqueId2() {
   var prefix = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "id-";
   return "".concat(prefix).concat(idCounter++);
 };
-var interpolateValue = Symbol("intergalactic-d3-chart-line-interpolate");
+var interpolateValue = /* @__PURE__ */ Symbol("intergalactic-d3-chart-line-interpolate");
 var getChartDefaultColorName = function getChartDefaultColorName2(index) {
   index++;
   if (index < 1) index = 1;

package/lib/types/Axis.d.ts

@@ -40,6 +40,10 @@ export type AxisTicksProps = Context & {
   ticks?: any[];
   /** Enables multiline tick labels, applicable only for band scales  */
   multiline?: boolean;
+  /**
+   * Enable `--intergalactic-text-primary` color for ticks
+   */
+  primaryText?: boolean;
 };
 
 /** @deprecated */

package/lib/types/CompactHorizontalBar.d.ts

@@ -1,4 +1,4 @@
-import type { BoxProps } from '@semcore/flex-box';
+import type { BoxProps } from '@semcore/base-components';
 
 import type { BackgroundProps } from './Bar';
 import type { Context } from './context';

package/lib/types/Hover.d.ts

@@ -1,5 +1,5 @@
+import type { BoxProps } from '@semcore/base-components';
 import type { UnknownProperties, ReturnEl } from '@semcore/core';
-import type { BoxProps } from '@semcore/flex-box';
 import type React from 'react';
 
 import type { Context } from './context';

package/lib/types/Line.d.ts

@@ -1,4 +1,4 @@
-import type { FadeInOutProps } from '@semcore/animation';
+import type { FadeInOutProps } from '@semcore/base-components';
 import type { UnknownProperties } from '@semcore/core';
 import type { CurveFactory } from 'd3-shape';
 

package/lib/types/Plot.d.ts

@@ -1,5 +1,5 @@
+import type { BoxProps } from '@semcore/base-components';
 import type { UnknownProperties, Intergalactic } from '@semcore/core';
-import type { BoxProps } from '@semcore/flex-box';
 
 import type { DataStructureHints } from './a11y/hints';
 import type { Context } from './context';

package/lib/types/Radar.d.ts

@@ -1,5 +1,5 @@
+import type { BoxProps } from '@semcore/base-components';
 import type { UnknownProperties } from '@semcore/core';
-import type { BoxProps } from '@semcore/flex-box';
 import type { CurveFactory } from 'd3-shape';
 
 import type { Context } from './context';

package/lib/types/ResponsiveContainer.d.ts

@@ -1,5 +1,5 @@
+import type { BoxProps } from '@semcore/base-components';
 import type { UnknownProperties } from '@semcore/core';
-import type { BoxProps } from '@semcore/flex-box';
 
 import type { IntergalacticD3Component } from './Plot';
 

package/lib/types/Tooltip.d.ts

@@ -1,7 +1,5 @@
+import type { Popper, Box, BoxProps, PopperProps, PopperTriggerProps } from '@semcore/base-components';
 import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import type { Box, BoxProps } from '@semcore/flex-box';
-import type { PopperProps, PopperTriggerProps } from '@semcore/popper';
-import type Popper from '@semcore/popper';
 import type React from 'react';
 
 import type { Context } from './context';

package/lib/types/Venn.d.ts

@@ -1,4 +1,4 @@
-import type { FadeInOutProps } from '@semcore/animation';
+import type { FadeInOutProps } from '@semcore/base-components';
 import type { UnknownProperties } from '@semcore/core';
 
 import type { Context } from './context';

package/lib/types/a11y/PlotA11yModule.d.ts

@@ -1,12 +1,5 @@
 import React from 'react';
-import type { DataStructureHints, PartialDataSummarizationConfig } from './hints';
-export type A11yViewProps = {
-    id: string;
-    data: Record<string, unknown>[];
-    hints: DataStructureHints;
-    plotLabel: string;
-    locale: NavigatorLanguage['language'];
-    config: PartialDataSummarizationConfig;
-    plotRef: React.RefObject<HTMLElement>;
-};
-export declare function PlotA11yModule(props: A11yViewProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+import type { A11yViewProps } from './PlotA11yView';
+type A11yModuleProps = Omit<A11yViewProps, 'onBlurHandler' | 'triggerRef'>;
+export declare function PlotA11yModule(props: A11yModuleProps): React.ReactNode;
+export {};

package/lib/types/a11y/PlotA11yView.d.ts

@@ -1,3 +1,14 @@
 import React from 'react';
-import type { A11yViewProps } from './PlotA11yModule';
-export declare const PlotA11yView: React.FC<A11yViewProps>;
+import type { DataStructureHints, PartialDataSummarizationConfig } from './hints';
+export type A11yViewProps = {
+    id: string;
+    payload: Record<string, unknown>[];
+    hints: DataStructureHints;
+    plotLabel: string;
+    locale: NavigatorLanguage['language'];
+    config: PartialDataSummarizationConfig;
+    plotRef: React.RefObject<HTMLElement>;
+    triggerRef: React.RefObject<HTMLElement>;
+    onCloseHandler: () => void;
+};
+export declare function PlotA11yView({ id, payload: providedData, hints, plotLabel, triggerRef, plotRef, config: providedConfig, locale, onCloseHandler, }: A11yViewProps): React.ReactElement;

package/lib/types/a11y/translations/module/__intergalactic-dynamic-locales.d.ts

@@ -1,72 +1,72 @@
 export declare const localizedMessages: {
     de: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     en: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     es: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     fr: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     it: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     ja: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     ko: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     nl: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     pt: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     tr: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     vi: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     zh: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     pl: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
     sv: {
-        disabled: string;
         loading: string;
         failed: string;
+        "PlotA11yModule.ScreenReaderOnlyButton.Label": string;
     };
 };

package/lib/types/component/Chart/AbstractChart.d.ts

@@ -13,7 +13,7 @@ export type ChartState = {
     withTrend: boolean;
 };
 export declare const NOT_A_VALUE = "n/a";
-export declare abstract class AbstractChart<Data extends ListData | ObjectData, Props extends BaseChartProps<Data>, Enhancers extends readonly ((...args: any[]) => any)[] = [], State extends ChartState = ChartState, DefaultProps = {}> extends Component<Props, {}, State, Enhancers, DefaultProps> {
+export declare abstract class AbstractChart<Data extends ListData | ObjectData, Props extends BaseChartProps<Data>, Enhancers extends readonly ((...args: any[]) => any)[] = [], DefaultProps = {}, State extends ChartState = ChartState> extends Component<Props, Enhancers, Readonly<{}>, DefaultProps, State> {
     static style: {
         [key: string]: string;
     };

package/lib/types/component/Chart/AbstractChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { FlexProps } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { FlexProps } from '@semcore/flex-box';
 import type Icon from '@semcore/icon';
 import type React from 'react';
 import type { PatternsConfig } from '../../Pattern';

package/lib/types/component/Chart/AreaChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import type { CurveFactory } from 'd3-shape';
 import type { AriaNameProps, BaseChartProps } from './AbstractChart.type';

package/lib/types/component/Chart/BarChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import type React from 'react';
 import type { AriaNameProps, BaseChartProps } from './AbstractChart.type';

package/lib/types/component/Chart/BubbleChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 export type ScaledValues = {

package/lib/types/component/Chart/CompactHorizontalBarChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import type React from 'react';
 import type { BaseChartProps } from './AbstractChart.type';

package/lib/types/component/Chart/DonutChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear } from 'd3-scale';
 import type React from 'react';
 import type { BaseChartProps } from './AbstractChart.type';

package/lib/types/component/Chart/HistogramChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleBand, ScaleLinear, ScaleTime } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 export type HistogramChartData = Array<Record<string, number | Date>>;

package/lib/types/component/Chart/LineChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import type { CurveFactory } from 'd3-shape';
 import type { BaseChartProps } from './AbstractChart.type';

package/lib/types/component/Chart/RadarChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 export type RadarChartData = Record<string, string[] | number[]>;

package/lib/types/component/Chart/ScatterPlotChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 import type { interpolateValue } from '../../utils';

package/lib/types/component/Chart/VennChart.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type { ScaleLinear } from 'd3-scale';
 import type { BaseChartProps } from './AbstractChart.type';
 export type DataKey = string;

package/lib/types/component/ChartLegend/BaseLegend.d.ts

@@ -2,7 +2,7 @@ import { Component, type Intergalactic } from '@semcore/core';
 import type React from 'react';
 import type { LegendProps } from './BaseLegend.type';
 import { type LegendItemKey, type LegendItemProps, type ShapeType } from './LegendItem/LegendItem.type';
-export declare abstract class BaseLegend<T extends LegendProps> extends Component<T> {
+export declare abstract class BaseLegend<T extends LegendProps, E extends readonly ((...args: any[]) => any)[] = never[]> extends Component<T, E> {
     componentDidMount(): void;
     componentDidUpdate(prevProps: T): void;
     setHints(): void;

package/lib/types/component/ChartLegend/BaseLegend.type.d.ts

@@ -1,4 +1,4 @@
-import type { BoxProps, FlexProps } from '@semcore/flex-box';
+import type { BoxProps, FlexProps } from '@semcore/base-components';
 import type { LegendItem, LegendItemKey, ShapeType } from './LegendItem/LegendItem.type';
 import type { DataStructureHints } from '../../a11y/hints';
 import type { PatternsConfig } from '../../Pattern';

package/lib/types/component/ChartLegend/LegendFlex/LegendFlex.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex, FlexProps } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Flex, FlexProps } from '@semcore/flex-box';
 import type { LegendProps } from '../BaseLegend.type';
 import type { LegendItemType } from '../LegendItem/LegendItem.type';
 export type TrendProps = {

package/lib/types/component/ChartLegend/LegendItem/LegendItem.type.d.ts

@@ -1,5 +1,5 @@
+import type { Flex } from '@semcore/base-components';
 import type { Intergalactic, Root } from '@semcore/core';
-import type { Flex } from '@semcore/flex-box';
 import type Icon from '@semcore/icon';
 import type { Text } from '@semcore/typography';
 import type { PatternsConfig } from '../../../Pattern';

package/lib/types/component/ChartLegend/LegendTable/LegendTable.type.d.ts

@@ -1,5 +1,5 @@
+import type { Box } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
-import type { Box } from '@semcore/flex-box';
 import type React from 'react';
 import type { LegendProps, LSize } from '../BaseLegend.type';
 import type { LegendItem, LegendItemType } from '../LegendItem/LegendItem.type';

package/lib/types/utils.d.ts

@@ -35,14 +35,14 @@ type BubbleChartDataItem = {
     y: number;
 };
 export declare const calculateBubbleDomain: (data: Array<BubbleChartDataItem>, key: "x" | "y", range: [number, number]) => [min: number, max: number];
-interface PlotEventEmitterEmit {
-    (event: `setTooltipVisible_${string}`, visible: boolean): void;
-    (event: `setTooltipPosition_${string}`, x: number, y: number): void;
-}
-type Unsubscribe = () => void;
-interface PlotEventEmitterSubscribe {
-    (event: `setTooltipVisible_${string}`, callback: (visible: boolean) => void): Unsubscribe;
-    (event: `setTooltipPosition_${string}`, callback: (x: number, y: number) => void): Unsubscribe;
-}
-export declare const PlotEventEmitter: typeof EventEmitter<PlotEventEmitterEmit, PlotEventEmitterSubscribe>;
+type CommonEvents = {
+    setTooltipVisible: (visible: boolean) => void;
+    setTooltipPosition: (x: number, y: number) => void;
+};
+type Events = {
+    [K in keyof CommonEvents as `${K}_${string}`]: CommonEvents[K];
+};
+export declare const PlotEventEmitter: {
+    new (): EventEmitter<Events, `setTooltipVisible_${string}` | `setTooltipPosition_${string}`, ((visible: boolean) => void) | ((x: number, y: number) => void)>;
+};
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/d3-chart",
   "description": "Semrush D3 Chart Component",
-  "version": "16.7.0-prerelease.3",
+  "version": "16.7.0",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.mjs",
   "typings": "lib/types/index.d.ts",
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "@formatjs/intl": "2.3.0",
-    "@semcore/animation": "16.1.0-prerelease.3",
-    "@semcore/checkbox": "16.3.0-prerelease.3",
-    "@semcore/divider": "16.1.0-prerelease.3",
-    "@semcore/flex-box": "16.1.0-prerelease.3",
-    "@semcore/icon": "16.8.0-prerelease.3",
-    "@semcore/popper": "16.1.0-prerelease.3",
-    "@semcore/typography": "16.4.0-prerelease.3",
+    "@semcore/animation": "16.1.0",
+    "@semcore/checkbox": "16.3.0",
+    "@semcore/divider": "16.1.0",
+    "@semcore/flex-box": "16.1.0",
+    "@semcore/icon": "16.8.0",
+    "@semcore/popper": "16.1.0",
+    "@semcore/typography": "16.4.0",
     "@types/d3-shape": "^3.1.7",
     "@upsetjs/venn.js": "1.4.2",
     "d3-array": "3.1.6",
@@ -35,7 +35,7 @@
     "hoist-non-react-statics": "3.3.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.6.0-prerelease.3"
+    "@semcore/base-components": "^16.6.0"
   },
   "repository": {
     "type": "git",
@@ -47,16 +47,16 @@
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-transition": "^3.0.9",
-    "@semcore/core": "16.6.0-prerelease.3",
-    "@semcore/button": "16.1.0-prerelease.3",
-    "@semcore/icon": "16.8.0-prerelease.3",
-    "@semcore/dropdown-menu": "16.3.0-prerelease.3",
-    "@semcore/base-components": "16.6.0-prerelease.3",
-    "@semcore/divider": "16.1.0-prerelease.3",
-    "@semcore/checkbox": "16.3.0-prerelease.3",
-    "@semcore/ellipsis": "16.1.0-prerelease.3",
+    "@semcore/core": "16.6.0",
+    "@semcore/button": "16.1.0",
+    "@semcore/base-components": "16.6.0",
+    "@semcore/checkbox": "16.3.0",
+    "@semcore/dropdown-menu": "16.3.0",
+    "@semcore/ellipsis": "16.1.0",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/typography": "16.4.0-prerelease.3"
+    "@semcore/divider": "16.1.0",
+    "@semcore/typography": "16.4.0",
+    "@semcore/icon": "16.8.0"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js,ts && pnpm vite build"