@vmscloud/moz-ui-chart-react 0.1.1

package/README.md

@@ -0,0 +1,69 @@
+# @vmscloud/moz-ui-chart-react
+
+`@vmscloud/moz-ui-chart-core` 의 React 18+ 어댑터. Vue 어댑터와 외관·동작이 같습니다.
+
+## 설치
+
+```bash
+pnpm add @vmscloud/moz-ui-chart-react react react-dom
+```
+
+npmjs 공개 패키지라 레지스트리 설정이나 토큰 없이 설치됩니다.
+
+```ts
+import '@vmscloud/moz-ui-chart-react/style.css';
+```
+
+## 사용
+
+```tsx
+import { EChart, DataType, Aggregate, type EChartHandle } from '@vmscloud/moz-ui-chart-react';
+
+const ref = useRef<EChartHandle>(null);
+const [chartDef, setChartDef] = useState({});
+const [viewDef, setViewDef] = useState(initialViewDef);
+const [filterDef, setFilterDef] = useState([]);
+
+<EChart
+  ref={ref}
+  id="sales"
+  itemsSource={rows}
+  chartDef={chartDef}
+  onChartDefChange={setChartDef}
+  viewDef={viewDef}
+  onViewDefChange={setViewDef}
+  filterDef={filterDef}
+  onFilterDefChange={setFilterDef}
+  toolLeft={<span>매출 차트</span>}
+  onOpenPopup={(payload, key) => window.open(`/chart-popup/${key}`)} // 선택 — 없으면 /chartPopup/<key> 를 연다
+/>;
+
+ref.current?.openOptionModal();
+```
+
+### 팝업 창 페이지
+
+```tsx
+const { ready, itemsSource, chartDef, viewDef, filterDef, chartDefTemplate } = useEChartPopupView();
+return ready ? <EChart id="popup" itemsSource={itemsSource} chartDef={chartDef} viewDef={viewDef} filterDef={filterDef} chartDefTemplate={chartDefTemplate} useToolBox={false} /> : null;
+```
+
+### 로케일
+
+```tsx
+<ChartLocaleProvider locale={enUS}>...</ChartLocaleProvider>
+```
+
+`chartDef` 는 controlled 입니다. `onChartDefChange` 로 받은 정의(`key` 포함)를 그대로 되돌려주면 차트를 다시 만들지 않습니다.
+
+### 참조 안정성 (중요)
+
+`itemsSource`·`viewDef`·`filterDef`·`chartDefTemplate` 은 **참조가 바뀌면** 차트를 다시 만듭니다. 렌더마다 새 배열/객체 리터럴을 넘기면
+`onChartDefChange → setState → 재렌더 → 새 참조 → 재생성` 이 반복되므로 `useState`/`useMemo` 로 참조를 고정하세요.
+
+```tsx
+const rows = useMemo(() => buildRows(raw), [raw]); // ✅
+<EChart itemsSource={[{ a: 1 }]} />                 // ❌ 매 렌더 재생성
+```
+
+`toolLeft`/`toolItems`/`toolItemsAfter` 는 마운트 뒤에 값이 생겨도 렌더됩니다(세 슬롯을 항상 등록).

package/dist/EChart.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactNode } from 'react';
+import { ChartChrome, ChartDefinition, ChartDefinitionWithoutData, ChartPopupPayload, FilterDef, MozEChart, MozEChartOptions, MozEChartTemplateOptions, ViewDef } from '@vmscloud/moz-ui-chart-core';
+export interface EChartProps {
+    id: string;
+    itemsSource?: Record<string, any>[];
+    /** controlled — 코어가 내보낸 정의(key 포함)를 그대로 돌려주면 재생성하지 않는다 */
+    chartDef?: MozEChartOptions;
+    onChartDefChange?: (definition: ChartDefinitionWithoutData) => void;
+    viewDef?: ViewDef;
+    onViewDefChange?: (viewDef: ViewDef) => void;
+    filterDef?: FilterDef[];
+    onFilterDefChange?: (filterDef: FilterDef[]) => void;
+    chartDefTemplate?: MozEChartTemplateOptions;
+    isFetching?: boolean;
+    useToolBox?: boolean;
+    useChartSetting?: boolean;
+    useChartPopupIcon?: boolean;
+    chartPopupTitle?: string;
+    useStackBarHover?: boolean;
+    onInitialized?: (mozEChart: MozEChart) => void;
+    /** 툴바 슬롯 (Vue tool-left / tool-items / tool-items-after 대응) */
+    toolLeft?: ReactNode;
+    toolItems?: ReactNode;
+    toolItemsAfter?: ReactNode;
+    /** 팝업 버튼 클릭 — 지정하면 창 열기를 소비자가 맡는다 */
+    onOpenPopup?: (payload: ChartPopupPayload, key: string, title?: string) => void;
+    /** onOpenPopup 이 없을 때 새 창 주소를 만든다. 기본 `/chartPopup/<key>` */
+    popupPath?: (key: string) => string;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface EChartHandle {
+    chrome: ChartChrome | null;
+    mozEChart: MozEChart | undefined;
+    state: ChartDefinition | undefined;
+    chartKey: string | undefined;
+    chartOptionModal: boolean;
+    chartFilterModel: boolean;
+    openOptionModal(): void;
+    closeOptionModal(): void;
+    openFilter(): void;
+    closeFilter(): void;
+    initializeDefinition(initial?: boolean): void;
+    clickChartPopup(): void;
+    getDefinition(): ChartDefinitionWithoutData | undefined;
+    importDefinition(preset: Record<string, any>): void;
+}
+export declare const EChart: import('react').ForwardRefExoticComponent<EChartProps & import('react').RefAttributes<EChartHandle>>;

package/dist/bridge/ReactRenderer.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, ReactNode } from 'react';
+export type ContextWrapper = (children: ReactNode) => ReactNode;
+export declare class ReactRenderer {
+    private contextWrapper;
+    private roots;
+    setContextWrapper(wrapper: ContextWrapper | null): void;
+    mountInstance(container: HTMLElement, component: ComponentType<any>, initialProps: Record<string, unknown>): {
+        update: (props: Record<string, unknown>) => void;
+        destroy: () => void;
+    };
+    unmountAll(): void;
+    get size(): number;
+}

package/dist/echarts-stat.cjs

@@ -0,0 +1 @@
+"use strict";const t=require("@vmscloud/moz-ui-chart-core/echarts-stat");module.exports=t;

package/dist/echarts-stat.d.ts

@@ -0,0 +1 @@
+export { default } from "@vmscloud/moz-ui-chart-core/echarts-stat";

package/dist/echarts-stat.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "@vmscloud/moz-ui-chart-core/echarts-stat";
+export {
+  default2 as default
+};

package/dist/echarts.charts.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vmscloud/moz-ui-chart-core/echarts/charts");Object.keys(e).forEach(t=>{"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:()=>e[t]})});

package/dist/echarts.charts.d.ts

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/charts";

package/dist/echarts.charts.js

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/charts";

package/dist/echarts.cjs

@@ -0,0 +1 @@
+"use strict";function e(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const r in e)if("default"!==r){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}return t.default=e,Object.freeze(t)}const t=e(require("@vmscloud/moz-ui-chart-core/echarts"));module.exports=t;

package/dist/echarts.components.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vmscloud/moz-ui-chart-core/echarts/components");Object.keys(e).forEach(t=>{"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:()=>e[t]})});

package/dist/echarts.components.d.ts

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/components";

package/dist/echarts.components.js

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/components";

package/dist/echarts.core.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vmscloud/moz-ui-chart-core/echarts/core");Object.keys(e).forEach(t=>{"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:()=>e[t]})});

package/dist/echarts.core.d.ts

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/core";

package/dist/echarts.core.js

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/core";

package/dist/echarts.d.ts

@@ -0,0 +1,2 @@
+import * as echarts from "@vmscloud/moz-ui-chart-core/echarts";
+export default echarts;

package/dist/echarts.js

@@ -0,0 +1,4 @@
+import * as echarts from "@vmscloud/moz-ui-chart-core/echarts";
+export {
+  echarts as default
+};

package/dist/echarts.renderers.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vmscloud/moz-ui-chart-core/echarts/renderers");Object.keys(e).forEach(r=>{"default"===r||Object.prototype.hasOwnProperty.call(exports,r)||Object.defineProperty(exports,r,{enumerable:!0,get:()=>e[r]})});

package/dist/echarts.renderers.d.ts

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/renderers";

package/dist/echarts.renderers.js

@@ -0,0 +1 @@
+export * from "@vmscloud/moz-ui-chart-core/echarts/renderers";

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=Object.defineProperty,t=(t,r,o)=>((t,r,o)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[r]=o)(t,"symbol"!=typeof r?r+"":r,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),n=require("@vmscloud/moz-ui-chart-core"),a=require("react-dom/client"),l=new Set;let u=null;function i(e){l.add(e),null==u&&(u=setTimeout(()=>{u=null;const e=Array.from(l);l.clear();for(const t of e)t.unmount()},0))}class c{constructor(){t(this,"contextWrapper",null),t(this,"roots",new Set)}setContextWrapper(e){this.contextWrapper=e}mountInstance(e,t,r){const n=a.createRoot(e);this.roots.add(n);const l=e=>{const r=o.createElement(t,e);n.render(this.contextWrapper?this.contextWrapper(r):r)};return l(r),{update:e=>l(e),destroy:()=>{this.roots.delete(n),i(n)}}}unmountAll(){for(const e of this.roots)i(e);this.roots.clear()}get size(){return this.roots.size}}const s=o.createContext(n.koKR);function p(){return o.useContext(s)}const f=[["tool-left","toolLeft"],["tool-items","toolItems"],["tool-items-after","toolItemsAfter"]],h=({node:e})=>r.jsx(r.Fragment,{children:e??null}),d=o.forwardRef(function(e,t){const a=o.useRef(null),l=o.useRef(null),u=o.useRef(new c),i=o.useRef(new Map),s=o.useRef(null),d=o.useRef(e);d.current=e;const m=p(),g=()=>({id:e.id,itemsSource:e.itemsSource??[],chartDef:e.chartDef,viewDef:e.viewDef,filterDef:e.filterDef,chartDefTemplate:e.chartDefTemplate,isFetching:e.isFetching,useToolBox:e.useToolBox,useChartSetting:e.useChartSetting,useChartPopupIcon:e.useChartPopupIcon,chartPopupTitle:e.chartPopupTitle,useStackBarHover:e.useStackBarHover,onInitialized:e.onInitialized});return o.useLayoutEffect(()=>{const e=a.current;if(!e)return;const t=u.current,r={};for(const[n,a]of f)r[n]=e=>{const r=t.mountInstance(e,h,{node:d.current[a]});return i.current.set(n,r),{update:()=>r.update({node:d.current[a]}),dispose:()=>{i.current.delete(n),r.destroy()}}};const o=new n.ChartChrome(e,g(),{locale:m,slots:r,onOpenPopup:(e,t,r)=>{var a;const l=d.current;if(l.onOpenPopup)return void l.onOpenPopup(e,t,r);null==(a=s.current)||a.close();const u=(l.popupPath??(e=>`/chartPopup/${e}`))(t);s.current=n.openChartPopupWindow({href:u,name:t,payload:e,title:r??o.locale.Chart.chartPopup,onBlocked:()=>n.showMessage(o.locale.Chart.errorMessage,!1)})}});return o.on("chartDef:change",e=>{var t,r;return null==(r=(t=d.current).onChartDefChange)?void 0:r.call(t,e)}),o.on("viewDef:change",e=>{var t,r;return null==(r=(t=d.current).onViewDefChange)?void 0:r.call(t,{...e})}),o.on("filterDef:change",e=>{var t,r;return null==(r=(t=d.current).onFilterDefChange)?void 0:r.call(t,[...e])}),l.current=o,o.mount(),()=>{var e;null==(e=s.current)||e.close(),o.destroy(),l.current=null,t.unmountAll()}},[]),o.useEffect(()=>{var e;null==(e=l.current)||e.update(g())},[e.id,e.itemsSource,e.chartDef,e.viewDef,e.filterDef,e.chartDefTemplate,e.isFetching,e.useToolBox,e.useChartSetting,e.useChartPopupIcon,e.chartPopupTitle,e.useStackBarHover,e.onInitialized]),o.useEffect(()=>{var t;for(const[r,o]of f)null==(t=i.current.get(r))||t.update({node:e[o]})},[e.toolLeft,e.toolItems,e.toolItemsAfter]),o.useEffect(()=>{var e;null==(e=l.current)||e.setLocale(m)},[m]),o.useImperativeHandle(t,()=>({get chrome(){return l.current},get mozEChart(){var e;return null==(e=l.current)?void 0:e.mozEChart},get state(){var e;return null==(e=l.current)?void 0:e.state},get chartKey(){var e;return null==(e=l.current)?void 0:e.chartKey},get chartOptionModal(){var e;return!!(null==(e=l.current)?void 0:e.optionModalOpen)},set chartOptionModal(e){l.current&&(l.current.optionModalOpen=e)},get chartFilterModel(){var e;return!!(null==(e=l.current)?void 0:e.filterModalOpen)},set chartFilterModel(e){l.current&&(l.current.filterModalOpen=e)},openOptionModal:()=>{l.current&&(l.current.optionModalOpen=!0)},closeOptionModal:()=>{l.current&&(l.current.optionModalOpen=!1)},openFilter:()=>{l.current&&(l.current.filterModalOpen=!0)},closeFilter:()=>{l.current&&(l.current.filterModalOpen=!1)},initializeDefinition:e=>{var t;return null==(t=l.current)?void 0:t.initializeDefinition(e)},clickChartPopup:()=>{var e;return null==(e=l.current)?void 0:e.clickChartPopup()},getDefinition:()=>{var e;return null==(e=l.current)?void 0:e.getDefinitionWithoutData()},importDefinition:e=>{var t;return null==(t=l.current)?void 0:t.importDefinition(e)}}),[]),r.jsx("div",{ref:a,className:["mzch-react-echart-host",e.className].filter(Boolean).join(" "),style:{width:"100%",height:"100%",minHeight:0,...e.style},"data-chart-id":e.id})}),m={itemsSource:[],chartDef:{},viewDef:{fields:[],rowFields:[],columnFields:[],valueFields:[]},filterDef:[],chartDefTemplate:{},chartPopupTitle:"",ready:!1};Object.defineProperty(exports,"Aggregate",{enumerable:!0,get:()=>n.Aggregate}),Object.defineProperty(exports,"ChartChrome",{enumerable:!0,get:()=>n.ChartChrome}),Object.defineProperty(exports,"DataType",{enumerable:!0,get:()=>n.DataType}),Object.defineProperty(exports,"MozEChart",{enumerable:!0,get:()=>n.MozEChart}),Object.defineProperty(exports,"RENDER_LIMIT",{enumerable:!0,get:()=>n.RENDER_LIMIT}),Object.defineProperty(exports,"enUS",{enumerable:!0,get:()=>n.enUS}),Object.defineProperty(exports,"jaJP",{enumerable:!0,get:()=>n.jaJP}),Object.defineProperty(exports,"koKR",{enumerable:!0,get:()=>n.koKR}),Object.defineProperty(exports,"showConfirm",{enumerable:!0,get:()=>n.showConfirm}),Object.defineProperty(exports,"showDialog",{enumerable:!0,get:()=>n.showDialog}),Object.defineProperty(exports,"showMessage",{enumerable:!0,get:()=>n.showMessage}),Object.defineProperty(exports,"zhCN",{enumerable:!0,get:()=>n.zhCN}),exports.ChartLocaleContext=s,exports.ChartLocaleProvider=function({locale:e,children:t}){return r.jsx(s.Provider,{value:e??n.koKR,children:t})},exports.EChart=d,exports.useChartLocale=p,exports.useEChartPopupView=function(){const[e,t]=o.useState(m);return o.useEffect(()=>n.listenChartPopupPayload(e=>{t({itemsSource:e.itemsSource,chartDef:e.chartDef,viewDef:e.viewDef,filterDef:e.filterDef,chartDefTemplate:e.chartDefTemplate??{},chartPopupTitle:e.title??"",ready:!0})}),[]),e};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { EChart } from './EChart';
+export type { EChartProps, EChartHandle } from './EChart';
+export { useEChartPopupView } from './useEChartPopupView';
+export type { EChartPopupViewState } from './useEChartPopupView';
+export * from './locale';
+export { MozEChart, DataType, Aggregate, ChartChrome, showConfirm, showDialog, showMessage, RENDER_LIMIT } from '@vmscloud/moz-ui-chart-core';
+export type { ChartCategory, ChartType, MozEChartOptions, MozEChartTemplateOptions, ChartField, ViewDef, ChartDefinition, FilterDef, ChartPopupPayload, ChartChromeProps, ChartDefinitionWithoutData, } from '@vmscloud/moz-ui-chart-core';

package/dist/index.js

@@ -0,0 +1,295 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, Fragment } from "react/jsx-runtime";
+import { createElement, createContext, useContext, forwardRef, useRef, useLayoutEffect, useEffect, useImperativeHandle, useState } from "react";
+import { koKR, ChartChrome, openChartPopupWindow, showMessage, listenChartPopupPayload } from "@vmscloud/moz-ui-chart-core";
+import { Aggregate, ChartChrome as ChartChrome2, DataType, MozEChart, RENDER_LIMIT, enUS, jaJP, koKR as koKR2, showConfirm, showDialog, showMessage as showMessage2, zhCN } from "@vmscloud/moz-ui-chart-core";
+import { createRoot } from "react-dom/client";
+const pendingUnmounts = /* @__PURE__ */ new Set();
+let unmountTimer = null;
+function deferUnmount(root) {
+  pendingUnmounts.add(root);
+  if (unmountTimer != null) return;
+  unmountTimer = setTimeout(() => {
+    unmountTimer = null;
+    const batch = Array.from(pendingUnmounts);
+    pendingUnmounts.clear();
+    for (const r of batch) r.unmount();
+  }, 0);
+}
+class ReactRenderer {
+  constructor() {
+    __publicField(this, "contextWrapper", null);
+    __publicField(this, "roots", /* @__PURE__ */ new Set());
+  }
+  setContextWrapper(wrapper) {
+    this.contextWrapper = wrapper;
+  }
+  mountInstance(container, component, initialProps) {
+    const root = createRoot(container);
+    this.roots.add(root);
+    const renderProps = (props) => {
+      const element = createElement(component, props);
+      root.render(this.contextWrapper ? this.contextWrapper(element) : element);
+    };
+    renderProps(initialProps);
+    return {
+      update: (props) => renderProps(props),
+      destroy: () => {
+        this.roots.delete(root);
+        deferUnmount(root);
+      }
+    };
+  }
+  unmountAll() {
+    for (const root of this.roots) deferUnmount(root);
+    this.roots.clear();
+  }
+  get size() {
+    return this.roots.size;
+  }
+}
+const ChartLocaleContext = createContext(koKR);
+function useChartLocale() {
+  return useContext(ChartLocaleContext);
+}
+function ChartLocaleProvider({ locale, children }) {
+  return /* @__PURE__ */ jsx(ChartLocaleContext.Provider, { value: locale ?? koKR, children });
+}
+const SLOT_PROPS = [
+  ["tool-left", "toolLeft"],
+  ["tool-items", "toolItems"],
+  ["tool-items-after", "toolItemsAfter"]
+];
+const SlotContent = ({ node }) => /* @__PURE__ */ jsx(Fragment, { children: node ?? null });
+const EChart = forwardRef(function EChart2(props, ref) {
+  const hostRef = useRef(null);
+  const chromeRef = useRef(null);
+  const rendererRef = useRef(new ReactRenderer());
+  const slotHandles = useRef(/* @__PURE__ */ new Map());
+  const popupHandle = useRef(null);
+  const propsRef = useRef(props);
+  propsRef.current = props;
+  const locale = useChartLocale();
+  const coreProps = () => ({
+    id: props.id,
+    itemsSource: props.itemsSource ?? [],
+    chartDef: props.chartDef,
+    viewDef: props.viewDef,
+    filterDef: props.filterDef,
+    chartDefTemplate: props.chartDefTemplate,
+    isFetching: props.isFetching,
+    useToolBox: props.useToolBox,
+    useChartSetting: props.useChartSetting,
+    useChartPopupIcon: props.useChartPopupIcon,
+    chartPopupTitle: props.chartPopupTitle,
+    useStackBarHover: props.useStackBarHover,
+    onInitialized: props.onInitialized
+  });
+  useLayoutEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const renderer = rendererRef.current;
+    const slots = {};
+    for (const [slotName, propName] of SLOT_PROPS) {
+      slots[slotName] = (el) => {
+        const handle = renderer.mountInstance(el, SlotContent, { node: propsRef.current[propName] });
+        slotHandles.current.set(slotName, handle);
+        return {
+          update: () => handle.update({ node: propsRef.current[propName] }),
+          dispose: () => {
+            slotHandles.current.delete(slotName);
+            handle.destroy();
+          }
+        };
+      };
+    }
+    const chrome = new ChartChrome(host, coreProps(), {
+      locale,
+      slots,
+      onOpenPopup: (payload, key, title) => {
+        var _a;
+        const p = propsRef.current;
+        if (p.onOpenPopup) {
+          p.onOpenPopup(payload, key, title);
+          return;
+        }
+        (_a = popupHandle.current) == null ? void 0 : _a.close();
+        const href = (p.popupPath ?? ((k) => `/chartPopup/${k}`))(key);
+        popupHandle.current = openChartPopupWindow({
+          href,
+          name: key,
+          payload,
+          title: title ?? chrome.locale.Chart.chartPopup,
+          onBlocked: () => showMessage(chrome.locale.Chart.errorMessage, false)
+        });
+      }
+    });
+    chrome.on("chartDef:change", (def) => {
+      var _a, _b;
+      return (_b = (_a = propsRef.current).onChartDefChange) == null ? void 0 : _b.call(_a, def);
+    });
+    chrome.on("viewDef:change", (v) => {
+      var _a, _b;
+      return (_b = (_a = propsRef.current).onViewDefChange) == null ? void 0 : _b.call(_a, { ...v });
+    });
+    chrome.on("filterDef:change", (f) => {
+      var _a, _b;
+      return (_b = (_a = propsRef.current).onFilterDefChange) == null ? void 0 : _b.call(_a, [...f]);
+    });
+    chromeRef.current = chrome;
+    chrome.mount();
+    return () => {
+      var _a;
+      (_a = popupHandle.current) == null ? void 0 : _a.close();
+      chrome.destroy();
+      chromeRef.current = null;
+      renderer.unmountAll();
+    };
+  }, []);
+  useEffect(() => {
+    var _a;
+    (_a = chromeRef.current) == null ? void 0 : _a.update(coreProps());
+  }, [
+    props.id,
+    props.itemsSource,
+    props.chartDef,
+    props.viewDef,
+    props.filterDef,
+    props.chartDefTemplate,
+    props.isFetching,
+    props.useToolBox,
+    props.useChartSetting,
+    props.useChartPopupIcon,
+    props.chartPopupTitle,
+    props.useStackBarHover,
+    props.onInitialized
+  ]);
+  useEffect(() => {
+    var _a;
+    for (const [slotName, propName] of SLOT_PROPS) (_a = slotHandles.current.get(slotName)) == null ? void 0 : _a.update({ node: props[propName] });
+  }, [props.toolLeft, props.toolItems, props.toolItemsAfter]);
+  useEffect(() => {
+    var _a;
+    (_a = chromeRef.current) == null ? void 0 : _a.setLocale(locale);
+  }, [locale]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      get chrome() {
+        return chromeRef.current;
+      },
+      get mozEChart() {
+        var _a;
+        return (_a = chromeRef.current) == null ? void 0 : _a.mozEChart;
+      },
+      get state() {
+        var _a;
+        return (_a = chromeRef.current) == null ? void 0 : _a.state;
+      },
+      get chartKey() {
+        var _a;
+        return (_a = chromeRef.current) == null ? void 0 : _a.chartKey;
+      },
+      get chartOptionModal() {
+        var _a;
+        return !!((_a = chromeRef.current) == null ? void 0 : _a.optionModalOpen);
+      },
+      set chartOptionModal(v) {
+        if (chromeRef.current) chromeRef.current.optionModalOpen = v;
+      },
+      get chartFilterModel() {
+        var _a;
+        return !!((_a = chromeRef.current) == null ? void 0 : _a.filterModalOpen);
+      },
+      set chartFilterModel(v) {
+        if (chromeRef.current) chromeRef.current.filterModalOpen = v;
+      },
+      openOptionModal: () => {
+        if (chromeRef.current) chromeRef.current.optionModalOpen = true;
+      },
+      closeOptionModal: () => {
+        if (chromeRef.current) chromeRef.current.optionModalOpen = false;
+      },
+      openFilter: () => {
+        if (chromeRef.current) chromeRef.current.filterModalOpen = true;
+      },
+      closeFilter: () => {
+        if (chromeRef.current) chromeRef.current.filterModalOpen = false;
+      },
+      initializeDefinition: (initial) => {
+        var _a;
+        return (_a = chromeRef.current) == null ? void 0 : _a.initializeDefinition(initial);
+      },
+      clickChartPopup: () => {
+        var _a;
+        return (_a = chromeRef.current) == null ? void 0 : _a.clickChartPopup();
+      },
+      getDefinition: () => {
+        var _a;
+        return (_a = chromeRef.current) == null ? void 0 : _a.getDefinitionWithoutData();
+      },
+      importDefinition: (preset) => {
+        var _a;
+        return (_a = chromeRef.current) == null ? void 0 : _a.importDefinition(preset);
+      }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: hostRef,
+      className: ["mzch-react-echart-host", props.className].filter(Boolean).join(" "),
+      style: { width: "100%", height: "100%", minHeight: 0, ...props.style },
+      "data-chart-id": props.id
+    }
+  );
+});
+const EMPTY = {
+  itemsSource: [],
+  chartDef: {},
+  viewDef: { fields: [], rowFields: [], columnFields: [], valueFields: [] },
+  filterDef: [],
+  chartDefTemplate: {},
+  chartPopupTitle: "",
+  ready: false
+};
+function useEChartPopupView() {
+  const [state, setState] = useState(EMPTY);
+  useEffect(() => {
+    const stop = listenChartPopupPayload((data) => {
+      setState({
+        itemsSource: data.itemsSource,
+        chartDef: data.chartDef,
+        viewDef: data.viewDef,
+        filterDef: data.filterDef,
+        chartDefTemplate: data.chartDefTemplate ?? {},
+        chartPopupTitle: data.title ?? "",
+        ready: true
+      });
+    });
+    return stop;
+  }, []);
+  return state;
+}
+export {
+  Aggregate,
+  ChartChrome2 as ChartChrome,
+  ChartLocaleContext,
+  ChartLocaleProvider,
+  DataType,
+  EChart,
+  MozEChart,
+  RENDER_LIMIT,
+  enUS,
+  jaJP,
+  koKR2 as koKR,
+  showConfirm,
+  showDialog,
+  showMessage2 as showMessage,
+  useChartLocale,
+  useEChartPopupView,
+  zhCN
+};

package/dist/locale/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ChartLocaleMessages } from '@vmscloud/moz-ui-chart-core';
+export declare const ChartLocaleContext: import('react').Context<ChartLocaleMessages>;
+export declare function useChartLocale(): ChartLocaleMessages;
+export declare function ChartLocaleProvider({ locale, children }: {
+    locale?: ChartLocaleMessages;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { koKR, enUS, zhCN, jaJP } from '@vmscloud/moz-ui-chart-core';
+export type { ChartLocaleMessages } from '@vmscloud/moz-ui-chart-core';

package/dist/style.css

@@ -0,0 +1 @@
+@charset "UTF-8";@layer mzch{:root{--mzch-color-accent: var(--moz-color-accent, #4568e0);--mzch-color-accent-strong: var(--moz-color-accent-strong, #3e5dc9);--mzch-color-accent-subtle: var(--moz-color-accent-subtle, #e2e7fa);--mzch-color-danger: var(--moz-color-danger, #dc5a5a);--mzch-color-warning: var(--moz-color-warning, #fa9e23);--mzch-color-success: var(--moz-color-success, #357e63);--mzch-color-surface: var(--moz-color-surface, #ffffff);--mzch-color-on-accent: var(--moz-color-on-accent, #ffffff);--mzch-color-surface-subtle: var(--moz-color-surface-subtle, #f4f4f9);--mzch-color-surface-muted: var(--moz-color-surface-muted, #f8f8fd);--mzch-color-border: var(--moz-color-border, #bac6d4);--mzch-color-border-subtle: var(--moz-color-border-subtle, #e1e3f0);--mzch-color-text: var(--moz-color-text, #28364e);--mzch-color-text-secondary: var(--moz-color-text-secondary, #6a7184);--mzch-color-text-subtle: var(--moz-color-text-subtle, #96a5be);--mzch-color-text-muted: var(--moz-color-text-muted, #a7b1bc);--mzch-color-disabled: var(--moz-color-disabled, #e0e1ec);--mzch-color-inverse-surface: var(--mzch-color-text);--mzch-color-inverse-text: var(--mzch-color-surface);--mzch-color-accent-ring: color-mix(in srgb, var(--mzch-color-accent) 20%, transparent);--mzch-color-accent-ring-strong: color-mix(in srgb, var(--mzch-color-accent) 30%, transparent);--mzch-color-accent-soft: color-mix(in srgb, var(--mzch-color-accent) 16%, transparent);--mzch-color-accent-ghost: color-mix(in srgb, var(--mzch-color-accent) 9%, transparent);--mzch-color-danger-ring: color-mix(in srgb, var(--mzch-color-danger) 20%, transparent);--mzch-color-danger-ghost: color-mix(in srgb, var(--mzch-color-danger) 13%, transparent);--mzch-color-muted-soft: color-mix(in srgb, var(--mzch-color-text-subtle) 16%, transparent);--mzch-color-shadow: var(--moz-color-shadow, rgb(57 55 122 / .1));--mzch-color-shadow-weak: var(--moz-color-shadow-weak, rgb(0 0 0 / .05));--mzch-color-scrim: var(--moz-color-scrim, rgb(0 0 0 / .3));--mzch-color-scrim-strong: var(--moz-color-scrim-strong, rgb(66 72 83 / .5))}}@layer mzch{:root{--mzch-radius-xs: var(--moz-radius-xs, 2px);--mzch-radius-control: var(--moz-radius-control, 4px);--mzch-radius-surface: var(--moz-radius-surface, 6px);--mzch-radius-panel: var(--moz-radius-panel, 10px);--mzch-radius-chip: var(--moz-radius-chip, 10px);--mzch-radius-pill: var(--moz-radius-pill, 999px);--mzch-radius-circle: var(--moz-radius-circle, 50%)}}@layer mzch{@keyframes moz-spin{to{transform:rotate(360deg)}}.mzch-circle-loader{display:flex;justify-content:center;align-items:center;width:14px;height:14px;color:var(--mzch-color-surface);animation:moz-spin 1s linear infinite}.mzch-button{display:flex;justify-content:center;align-items:center;text-align:center;height:30px;border:1px solid var(--mzch-color-accent);border-radius:var(--mzch-radius-control);background-color:var(--mzch-color-surface);font-size:.875rem;padding:0 14px;gap:8px}.mzch-button .text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-user-select:none;user-select:none;display:flex;justify-content:center;align-items:center;font-size:.875rem;line-height:normal}.mzch-button:disabled{cursor:not-allowed}.mzch-button:focus{border-color:var(--mzch-color-accent);box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-button.loading{width:var(--mzch-btn-loading-width)}.mzch-button.loading .spinner{font-size:0}.mzch-button.loading span.text{display:none}.mzch-button.mzch-default-button{background-color:var(--mzch-color-accent);color:var(--mzch-color-surface);border-color:var(--mzch-color-accent);padding:0 .6875rem;font-weight:300}.mzch-button.mzch-default-button:hover{background-color:var(--mzch-color-accent-strong);border-color:var(--mzch-color-accent-strong)}.mzch-button.mzch-default-button:disabled{background-color:var(--mzch-color-disabled);border-color:var(--mzch-color-disabled);color:var(--mzch-color-text-muted)}.mzch-button.mzch-default-button:disabled .mozart-icons:before{color:var(--mzch-color-text-muted)}.mzch-button.mzch-icon-text-button{padding:0 12px}.mzch-button.mzch-text-button{min-width:unset;background-color:transparent;color:var(--mzch-color-accent);border-color:transparent;gap:5px;padding:0}.mzch-button.mzch-text-button .text{font-weight:400}.mzch-button.mzch-text-button:disabled{color:var(--mzch-color-text-muted)}.mzch-button.mzch-text-button:disabled:hover{background-color:transparent;cursor:not-allowed}.mzch-button.mzch-icon-button{display:flex;justify-content:center;align-items:center;padding:0;background-color:transparent;color:var(--mzch-color-surface);min-width:26px;min-height:26px;width:26px;height:26px;border-color:transparent;font-weight:300}.mzch-button.mzch-icon-button.small{min-width:20px;min-height:20px;width:20px;height:20px}.mzch-button.mzch-icon-button:hover{background-color:var(--mzch-color-muted-soft)}.mzch-button.mzch-icon-button:disabled{background-color:transparent;color:var(--mzch-color-surface)}.mzch-button.mzch-icon-button.mzch-icon-accent-button{background-color:var(--mzch-color-accent)}.mzch-button.mzch-icon-button.mzch-icon-accent-button:hover{background-color:var(--mzch-color-accent-strong);color:var(--mzch-color-surface)}.mzch-button.mzch-icon-button.mzch-icon-accent-button:disabled{background-color:var(--mzch-color-disabled)}.mzch-button.mzch-outline-button{background-color:transparent;border-color:var(--mzch-color-accent);color:var(--mzch-color-accent);font-weight:400}.mzch-button.mzch-outline-button:hover{border-color:var(--mzch-color-accent-strong);color:var(--mzch-color-accent-strong)}.mzch-button.mzch-outline-button:disabled{border-color:var(--mzch-color-text-muted);color:var(--mzch-color-text-muted)}.mzch-button.mzch-no-interaction-button:hover{background-color:transparent}.mzch-button.mzch-no-interaction-button:focus{box-shadow:none}}@layer mzch{.mzch-label{-webkit-user-select:none;user-select:none;font-size:.75rem;color:var(--mzch-color-text-secondary);font-weight:500;line-height:12px;text-align:left}.mzch-label.disabled{pointer-events:none;color:var(--mzch-color-text-muted)}.mzch-label.read-only{pointer-events:none;color:var(--mzch-color-text-secondary)}.mzch-label .require-mark{padding-left:.1875rem;color:var(--mzch-color-danger)}}@layer mzch{.mzch-switch{width:100%;box-sizing:border-box;height:1.75rem;display:flex;align-items:center;gap:6px}.mzch-switch .label-left,.mzch-switch .label-right{cursor:pointer}.mzch-switch .mzch-switch-box{width:36px;height:20px;padding:2px;box-sizing:border-box;border-radius:var(--mzch-radius-pill);background-color:var(--mzch-color-accent-ring-strong);transition:background-color .2s ease-in;position:relative}.mzch-switch .mzch-switch-box.active{background-color:var(--mzch-color-accent)}.mzch-switch .mzch-switch-box.disabled{background-color:var(--mzch-color-disabled)}.mzch-switch .mzch-switch-box.active.disabled{background-color:var(--mzch-color-border)}.mzch-switch .mzch-switch-box:focus-within{box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-switch .mzch-switch-box .mzch-switch-input{width:100%;height:100%;position:absolute;left:0;top:0;margin:0;cursor:pointer;z-index:2;opacity:0}.mzch-switch .mzch-switch-box .mzch-switch-input:disabled{cursor:not-allowed}.mzch-switch .mzch-switch-box .mzch-switch-handler{width:16px;height:16px;border-radius:var(--mzch-radius-pill);background-color:var(--mzch-color-surface);transition:transform .2s cubic-bezier(.65,.05,.36,1)}.mzch-switch .mzch-switch-box .mzch-switch-handler.active{transform:translate(16px)}.mzch-switch .mzch-switch-box .mzch-switch-handler.disabled{background-color:var(--mzch-color-surface-subtle)}}@layer mzch{.mzch-checkbox{-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;flex-direction:row!important;position:relative}.mzch-checkbox.disabled{cursor:not-allowed}.mzch-checkbox:hover:not(.disabled) .check-icon path:last-of-type{stroke:var(--mzch-color-accent-strong)}.mzch-checkbox:hover:not(.disabled) .checked-icon path{fill:var(--mzch-color-accent-strong)}.mzch-checkbox:focus{outline:none}.mzch-checkbox .checkbox-icon-wrapper{position:relative;height:12px;min-height:12px;width:12px;min-width:12px}.mzch-checkbox .checkbox-input{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;margin:0;height:100%;width:100%;border-radius:var(--mzch-radius-xs);opacity:0}.mzch-checkbox .checkbox-visual{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:var(--mzch-radius-xs);transition:box-shadow .15s ease-in-out}.mzch-checkbox .checkbox-visual.focused{box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-checkbox .mzch-checkbox-label{font-weight:500;line-height:.75rem;font-size:.75rem;display:flex;align-items:center;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}}@layer mzch{.mzch-input-wrapper{display:flex;flex-direction:column;position:relative}.mzch-input-wrapper .input-wrapper{display:flex;flex-direction:column;gap:3px;height:100%}.mzch-input-wrapper .input-label{display:flex;align-items:center}.mzch-input-wrapper .mzch-input{height:1.875rem;padding:0 .625rem;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control);background-color:var(--mzch-color-surface);box-sizing:border-box;color:var(--mzch-color-text);font-size:.8125rem;font-family:inherit;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mzch-input-wrapper .mzch-input:hover{border-color:var(--mzch-color-accent)}.mzch-input-wrapper .mzch-input:focus{border-color:var(--mzch-color-accent);box-shadow:0 0 0 3px var(--mzch-color-accent-ring);outline:none}.mzch-input-wrapper .mzch-input::placeholder{color:var(--mzch-color-text-subtle);font-size:.8125rem}.mzch-input-wrapper .mzch-input.has-inside-message{padding-right:50%}.mzch-input-wrapper .mzch-input.has-invalid-icon{padding-right:1.875rem}.mzch-input-wrapper .mzch-input.disabled{-webkit-user-select:none;user-select:none;color:var(--mzch-color-text-muted);border:1px solid var(--mzch-color-text-muted);background:var(--mzch-color-surface-subtle);cursor:not-allowed}.mzch-input-wrapper .mzch-input.disabled::placeholder{color:var(--mzch-color-text-muted)}.mzch-input-wrapper .mzch-input.disabled:hover{border:1px solid var(--mzch-color-text-muted)}.mzch-input-wrapper .mzch-input.read-only{-webkit-user-select:none;user-select:none;border:1px solid var(--mzch-color-border);background:var(--mzch-color-surface-muted);cursor:not-allowed;border-color:var(--mzch-color-border)}.mzch-input-wrapper .mzch-input.read-only::placeholder{color:var(--mzch-color-text-muted)}.mzch-input-wrapper.is-invalid .mzch-input{border-color:var(--mzch-color-danger);box-shadow:0 0 0 3px var(--mzch-color-danger-ring)}.mzch-input-wrapper .mzch-input-invalid-message{color:var(--mzch-color-danger);font-size:.75rem;font-weight:500;cursor:default}.mzch-input-wrapper .mzch-input-invalid-message.position-outside{position:absolute;bottom:calc((.75rem + 7px)*-1);left:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mzch-input-wrapper .mzch-input-invalid-message.position-inside{position:absolute;top:50%;right:2px;transform:translateY(-50%);white-space:nowrap;padding:0 2px;pointer-events:auto;max-width:50%;overflow:hidden;text-overflow:ellipsis;z-index:1}.mzch-input-wrapper .mzch-input-invalid-icon-v2{position:absolute;bottom:0;right:0;width:1.875rem;height:1.875rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}}@layer mzch{.mzch-number-input-container{display:flex;flex-direction:column;align-items:flex-start;margin:0;gap:6px}.mzch-number-input-container span.require-mark{color:var(--mzch-color-danger)}.mzch-number-input-container .mzch-number-input-wrapper{display:flex;align-items:center}.mzch-number-input-container .mzch-number-input-wrapper:hover .mzch-number-input,.mzch-number-input-container .mzch-number-input-wrapper:focus .mzch-number-input,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .mzch-number-input{border-color:var(--mzch-color-accent)}.mzch-number-input-container .mzch-number-input-wrapper:hover .mzch-number-input .mzch-number-input-btn-icon path,.mzch-number-input-container .mzch-number-input-wrapper:focus .mzch-number-input .mzch-number-input-btn-icon path,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .mzch-number-input .mzch-number-input-btn-icon path{fill:var(--mzch-color-accent)}.mzch-number-input-container .mzch-number-input-wrapper:hover .num-change-btn.disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus .num-change-btn.disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .num-change-btn.disabled{border-color:var(--mzch-color-text-muted)}.mzch-number-input-container .mzch-number-input-wrapper:hover .num-change-btn.disabled.min-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus .num-change-btn.disabled.min-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .num-change-btn.disabled.min-disabled{border-right-color:var(--mzch-color-text-muted)}.mzch-number-input-container .mzch-number-input-wrapper:hover .num-change-btn.disabled.max-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus .num-change-btn.disabled.max-disabled,.mzch-number-input-container .mzch-number-input-wrapper:focus-within .num-change-btn.disabled.max-disabled{border-left-color:var(--mzch-color-text-muted)}.mzch-number-input-container .mzch-number-input-wrapper .num-change-btn{box-sizing:border-box;width:30px;height:30px;min-width:30px;padding:4px}.mzch-number-input-container .mzch-number-input-wrapper .num-change-btn.disabled{border:1px solid var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container .mzch-number-input-wrapper .num-change-btn:focus{box-shadow:0 0 0 3px var(--mzch-color-accent-ring);z-index:2}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input{display:flex;box-sizing:border-box;flex-grow:1;min-height:30px;height:30px;border:1px solid var(--mzch-color-border);border-left:none;border-right:none;background-color:var(--mzch-color-surface);overflow:hidden}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input::-webkit-outer-spin-button,.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input[type=number]{-moz-appearance:textfield}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input input{min-height:100%;height:100%;width:100%;font-size:.8125rem;color:var(--mzch-color-text);border:none;outline:none;box-sizing:border-box;text-align:center;background-color:transparent}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input:focus-within{box-shadow:0 0 0 3px var(--mzch-color-accent-ring);z-index:2}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input-btn{display:flex;flex-direction:column;justify-content:space-between;border-style:none}.mzch-number-input-container .mzch-number-input-wrapper .mzch-number-input-btn-icon{display:flex;align-items:center;justify-content:center;margin-top:1px;margin-bottom:1px;cursor:pointer}.mzch-number-input-container .mzch-number-input-wrapper .input-border{border:1px solid var(--mzch-color-border);width:100%}.mzch-number-input-container .mzch-number-input-wrapper .input-border input{text-align:left;padding:5px 0 5px 7px}.mzch-number-input-container .mzch-number-input-wrapper .input-border .mzch-number-input-btn{margin-left:9px;margin-right:9px}.mzch-number-input-container.disabled .mzch-number-input-wrapper .num-change-btn{border:1px solid var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container.disabled .mzch-number-input-wrapper .num-change-btn:hover{background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container.disabled .mzch-number-input-wrapper .mzch-number-input{border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-number-input-container.disabled .mzch-number-input-wrapper .mzch-number-input input{cursor:not-allowed;color:var(--mzch-color-text-muted)}.mzch-number-input-container.disabled:hover,.mzch-number-input-container.disabled:focus,.mzch-number-input-container.disabled:focus-within{border-color:var(--mzch-color-text-muted)}.mzch-number-input-container.disabled:hover .mzch-date-input,.mzch-number-input-container.disabled:focus .mzch-date-input,.mzch-number-input-container.disabled:focus-within .mzch-date-input{border-color:var(--mzch-color-text-muted)}}@layer mzch{.mzch-calendar-container{box-sizing:border-box;width:20.9375rem;overflow:hidden;padding:.625rem;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-surface);background-color:var(--mzch-color-surface);box-shadow:0 3px 4px 0 var(--mzch-color-shadow);-webkit-user-select:none;user-select:none}.mzch-calendar-header{display:flex;height:26px;min-width:19rem;flex-shrink:0;flex-grow:0;align-items:center;justify-content:space-between;margin-bottom:.5rem}.mzch-calendar-header__spacer{flex-grow:1}.mzch-calendar-select{display:flex;margin:.375rem .375rem .375rem .25rem;cursor:pointer;align-items:center;font-size:.875rem;font-weight:700}.mzch-calendar-select__text{margin-left:.25rem}.mzch-calendar-select__text:hover{color:var(--mzch-color-accent)}.mzch-calendar-select-btn{margin-left:.625rem;cursor:pointer;padding-top:.125rem;color:var(--mzch-color-text-subtle)}.mzch-calendar-select-btn:hover{color:var(--mzch-color-accent)}.mzch-calendar-select-btn-group{display:flex;align-items:center}.mzch-calendar-row{display:flex;align-items:center;justify-content:center;font-size:.875rem}.mzch-calendar-row--wrap{flex-wrap:wrap;overflow-y:auto}.mzch-calendar-column{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--mzch-radius-control);border:1px solid transparent;color:var(--mzch-color-text)}.mzch-calendar-column--hoverable:hover{background-color:var(--mzch-color-accent-ghost)}.mzch-calendar-column-day{cursor:default;color:var(--mzch-color-text-subtle)}.mzch-calendar-column-otherMonth{color:var(--mzch-color-text-subtle)}.mzch-calendar-selected{border-color:var(--mzch-color-accent);background-color:var(--mzch-color-accent-soft);font-weight:500;color:var(--mzch-color-accent)}.date-disable{cursor:not-allowed!important;color:var(--mzch-color-text-muted)}}@layer mzch{.mzch-date-input-container{margin:0;display:flex;cursor:pointer;flex-direction:column;gap:.375rem}.mzch-date-input-container.disabled{cursor:default}.mzch-date-input-container.disabled:hover .mzch-date-input{border-color:var(--mzch-color-text-muted)}.mzch-date-input-container.disabled:hover .mzch-date-input__icon{color:var(--mzch-color-text-muted)}.mzch-date-input-container:hover .mzch-date-input{border-color:var(--mzch-color-accent)}.mzch-date-input-container:focus-within .mzch-date-input{border-color:var(--mzch-color-accent)}.mzch-date-input-container:hover .mzch-date-input__icon{color:var(--mzch-color-accent)}.mzch-date-input-container:focus-within .mzch-date-input__icon{color:var(--mzch-color-accent)}.mzch-date-input-container .require-mark{color:var(--mzch-color-danger)}.mzch-date-input-wrapper{display:flex;align-items:center}.date-move-btn{height:1.875rem;min-height:1.875rem;width:1.875rem;min-width:1.875rem;padding:.25rem}.date-move-btn--left{border-radius:var(--mzch-radius-control) 0 0 var(--mzch-radius-control)}.date-move-btn--right{border-radius:0 var(--mzch-radius-control) var(--mzch-radius-control) 0}.date-move-btn--disabled{border:1px solid var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-date-input-container .mzch-date-input-wrapper .date-move-btn{width:1.875rem;min-width:1.875rem;height:1.875rem;min-height:1.875rem;padding:.25rem}.mzch-date-input{box-sizing:border-box;display:flex;height:1.875rem;min-height:1.875rem;width:100%;overflow:hidden;border:1px solid var(--mzch-color-border);background-color:var(--mzch-color-surface)}.mzch-date-input--radius{border-radius:var(--mzch-radius-control)}.mzch-date-input--no-lr-border{border-right:0;border-left:0}.mzch-date-input--disabled{flex-grow:1;border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.mzch-date-input:focus-within{z-index:2;box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-date-input__field{height:100%;min-height:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8125rem;color:var(--mzch-color-text);box-sizing:border-box;border:none;background-color:transparent;outline:none;padding-right:0;padding-left:.625rem}.mzch-date-input__field--disabled{cursor:not-allowed;color:var(--mzch-color-text-muted)}.mzch-date-input__icon-container{display:flex;align-items:center;border:none;margin-right:.625rem}.mzch-date-input__icon{color:var(--mzch-color-text-subtle)}.mzch-date-input__icon--disabled{color:var(--mzch-color-text-muted)}.calendar-container{position:fixed;z-index:1000;margin-top:.1875rem;margin-bottom:.1875rem}.calendar-container .mzch-calendar-container{position:static!important}}@layer mzch{.mzch-popup-container{position:fixed;top:0;left:0;z-index:1000;height:100dvh;width:100dvw;overflow:hidden}.mzch-popup-backdrop{height:100%;width:100%;background-color:var(--mzch-color-scrim-strong)}.mzch-popup{pointer-events:auto;position:absolute;display:flex;flex-direction:column;overflow:hidden;font-weight:500;border-radius:var(--mzch-radius-panel);background-color:var(--mzch-color-surface)}.mzch-popup-title{display:flex;height:2.8125rem;min-height:2.8125rem;align-items:center;justify-content:space-between;line-height:2.8125rem;font-size:1rem;font-weight:500;color:var(--mzch-color-text);box-sizing:border-box;border-bottom:1px solid var(--mzch-color-border-subtle);padding:0 16px}.mzch-popup-title.draggable{cursor:move}.mzch-popup-title .close-button{cursor:pointer}.mzch-popup-description{padding:8px 16px 0;font-size:.8125rem;line-height:1.4;color:var(--mzch-color-text-secondary)}.mzch-popup-body{height:100%;overflow-y:auto;font-weight:400;color:var(--mzch-color-text);box-sizing:content-box}.mzch-dialog-body{display:flex;align-items:center;gap:16px;font-size:.875rem;line-height:normal;word-break:keep-all}.mzch-dialog-body .dialog-icon{margin-left:4px;min-width:30px}.mzch-dialog-body .dialog-message{white-space:pre-wrap}.mzch-popup-footer{box-sizing:border-box;width:100%;display:flex;justify-content:flex-end;gap:6px;padding:16px;font-weight:400;border:none}.mzch-popup-footer.with-border{border-top:1px solid var(--mzch-color-border-subtle)}.mzch-popup-footer .preset-btn{width:5rem;min-width:5rem;padding:0!important}.resize-handler{position:absolute;right:0;bottom:0;height:15px;width:15px;cursor:nwse-resize}.mzch-popup-footer .mzch-button{min-width:80px}.mzch-popup-side .mzch-popup{border-radius:0;max-width:100dvw;max-height:100dvh;animation:moz-popup-slide-in .2s ease-out}.mzch-popup-side-right .mzch-popup,.mzch-popup-side-left .mzch-popup{top:0;bottom:0;height:100dvh;width:20rem}.mzch-popup-side-right .mzch-popup{right:0;left:auto;--mzch-popup-slide-from: translateX(100%)}.mzch-popup-side-left .mzch-popup{left:0;--mzch-popup-slide-from: translateX(-100%)}.mzch-popup-side-top .mzch-popup,.mzch-popup-side-bottom .mzch-popup{left:0;right:0;width:100dvw;height:20rem}.mzch-popup-side-top .mzch-popup{top:0;--mzch-popup-slide-from: translateY(-100%)}.mzch-popup-side-bottom .mzch-popup{bottom:0;top:auto;--mzch-popup-slide-from: translateY(100%)}.mzch-popup-no-backdrop{pointer-events:none}.mzch-popup-no-backdrop .mzch-popup{pointer-events:auto}@keyframes moz-popup-slide-in{0%{transform:var(--mzch-popup-slide-from, none)}to{transform:none}}}@layer mzch{.mzch-select{position:relative;margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem}.mzch-select.is-invalid .select-input-container,.mzch-select.is-invalid .mzch-input-container{border-color:var(--mzch-color-danger);box-shadow:0 0 0 3px var(--mzch-color-danger-ring)}.mzch-select.is-open .select-input-container,.mzch-select.is-open .mzch-input-container{border-color:var(--mzch-color-accent)}.mzch-select.disabled{cursor:not-allowed}.mzch-select.disabled .select-input-container,.mzch-select.disabled .mzch-input-container{pointer-events:none;border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle)}.input-wrapper{display:flex;width:100%;flex-direction:column;gap:.375rem}.mzch-input-container.select-input-container{box-sizing:border-box;display:flex;height:1.875rem;min-height:1.875rem;cursor:pointer;overflow:hidden;border-radius:var(--mzch-radius-control);border:1px solid var(--mzch-color-border);background-color:var(--mzch-color-surface)}.mzch-input-container.select-input-container:focus-within{border-color:var(--mzch-color-accent);box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-input-container.select-input-container:hover{border-color:var(--mzch-color-accent)}.input-container-wrapper{display:flex;width:100%;cursor:text;align-items:center;padding-top:.1875rem;padding-bottom:.1875rem;padding-right:0;padding-left:.625rem;font-size:.8125rem;color:var(--mzch-color-text)}.input-container-wrapper--disabled{cursor:not-allowed;color:var(--mzch-color-text-muted)}.input-container-wrapper--disabled::placeholder{color:var(--mzch-color-text-muted)}.icon-container{display:flex;height:100%;width:2.125rem;min-width:2.125rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;justify-content:center;border:none;background-color:transparent;padding:0;outline:none}.icon-container:disabled{cursor:not-allowed}.select-display-input{box-sizing:border-box;height:100%;min-height:100%;width:100%;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none;background-color:transparent;padding-top:.1875rem;padding-bottom:.1875rem;padding-right:0;padding-left:.625rem;font-size:.8125rem;color:var(--mzch-color-text);outline:none}.select-display-input::placeholder{color:var(--mzch-color-text-subtle)}.select-display-input--disabled{cursor:not-allowed;color:var(--mzch-color-text-muted)}.select-display-input--disabled::placeholder{color:var(--mzch-color-text-muted)}.mzch-input-invalid-message{position:absolute;bottom:-.625rem;font-size:.75rem;font-weight:500;color:var(--mzch-color-danger)}.list-box{position:fixed;z-index:1000;margin-top:.3125rem;margin-bottom:.3125rem;box-sizing:border-box;max-height:250px;overflow:hidden;border-radius:var(--mzch-radius-control);border:1px solid var(--mzch-color-border);background-color:var(--mzch-color-surface);box-shadow:0 3px 4px 0 var(--mzch-color-shadow)}.filter-input{position:relative;box-sizing:border-box;display:flex;height:1.8125rem;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;border-width:0;border-bottom-width:1px;border-style:solid;border-color:var(--mzch-color-border)}.filter-input .filter-input__field{width:100%;border:none;background-color:transparent;color:var(--mzch-color-text);padding:.125rem .625rem;font-size:.8125rem;outline:none}.filter-input .filter-input__field::placeholder{color:var(--mzch-color-text-subtle)}.search-icon{display:flex;min-width:1.75rem;align-items:center;justify-content:center}.list-box-container{max-height:250px;overflow-y:auto;padding-top:.1875rem;padding-bottom:.1875rem}.list-box-container--with-filter{max-height:222px}.inner-container{position:relative}.list-box-item{box-sizing:border-box;display:flex;min-height:1.5rem;align-items:center;justify-content:space-between;padding-left:.625rem;padding-right:.625rem;font-size:.8125rem;line-height:1.5rem;color:var(--mzch-color-text)}.list-box-item.virtual-row{position:absolute;width:100%;cursor:pointer;gap:.375rem;outline:none}.list-box-item.virtual-row:hover,.list-box-item.virtual-row:focus{background-color:var(--mzch-color-accent-ghost)}.list-box-item.loading.not-hover{cursor:default;color:var(--mzch-color-text-subtle)}.highlight-container{display:inline-block;flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.highlight{font-weight:700;color:var(--mzch-color-accent)}.icon-check{min-width:.75rem}}@layer mzch{.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list{position:relative;inset:auto;width:100%;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;z-index:auto}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .filter-input{height:32px;margin:12px 16px 8px;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control)}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .filter-input:focus-within{border-color:var(--mzch-color-accent)}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .list-box-container{height:var(--mzch-multiselect-list-height, 224px);max-height:min(var(--mzch-multiselect-list-height, 224px),40vh);padding:0;overscroll-behavior:contain}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .list-box-item{padding-inline:16px}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list .multi-select-all{margin:0 0 6px}.mzch-multi-select.mzch-multi-select-inline>.list-box.mzch-multiselect-inline-list [aria-disabled=true]{cursor:not-allowed;opacity:.5}.mzch-multi-select{align-items:flex-start;flex-direction:column;margin:0;display:flex;position:relative}.mzch-multi-select span.require-mark{color:var(--mzch-color-danger)}.mzch-multi-select .mzch-input-container{width:100%;min-height:30px;height:30px;box-sizing:border-box;border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control);background-color:var(--mzch-color-surface);overflow:hidden;display:flex}.mzch-multi-select .mzch-input-container input{width:100%;min-height:100%;height:100%;font-size:.813rem;color:var(--mzch-color-text);border:none;outline:none;box-sizing:border-box;padding:.375rem .625rem;padding-right:0;background-color:transparent}.mzch-multi-select .mzch-input-container input::placeholder{color:var(--mzch-color-text-subtle)}.mzch-multi-select .mzch-input-container .icon-container{width:34px;min-width:34px;height:100%;-webkit-appearance:button;background-color:transparent;background-image:none;border:none;padding:0;display:flex;justify-content:center;align-items:center}.mzch-multi-select.disabled{cursor:not-allowed}.mzch-multi-select.disabled .mzch-input-container{border-color:var(--mzch-color-text-muted);background-color:var(--mzch-color-surface-subtle);pointer-events:none}.mzch-multi-select.disabled input{color:var(--mzch-color-text-muted)}.mzch-multi-select.disabled input::placeholder{color:var(--mzch-color-text-muted)}.mzch-multi-select.disabled:hover,.mzch-multi-select.disabled:focus,.mzch-multi-select.disabled:focus-within,.mzch-multi-select.disabled.is-open{border-color:var(--mzch-color-text-muted)}.mzch-multi-select.disabled:hover .mzch-input-container,.mzch-multi-select.disabled:focus .mzch-input-container,.mzch-multi-select.disabled:focus-within .mzch-input-container,.mzch-multi-select.disabled.is-open .mzch-input-container{border-color:var(--mzch-color-text-muted)}.mzch-multi-select:hover .mzch-input-container,.mzch-multi-select:focus-within .mzch-input-container,.mzch-multi-select.is-open .mzch-input-container{border-color:var(--mzch-color-accent)}.mzch-multi-select:focus-within .mzch-input-container{box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}.mzch-multi-select .input-wrapper{width:100%;display:flex;flex-direction:column;gap:.375rem}.mzch-multi-select.is-invalid .mzch-input-container{border-color:var(--mzch-color-danger);box-shadow:0 0 0 3px var(--mzch-color-danger-ring)}.mzch-multi-select .mzch-input-invalid-message{position:absolute;bottom:-1rem;color:var(--mzch-color-danger);font-size:.688rem;font-weight:500}.list-box{position:fixed;background-color:var(--mzch-color-surface);box-shadow:0 3px 4px 0 var(--mzch-color-shadow);border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-control);z-index:1000;max-height:250px;box-sizing:border-box;margin:.25rem 0}.list-box:not(.show-top){top:48px}.list-box.show-top{transform:translateY(calc(-100% - 19px))}.list-box.no-label:not(.show-top){top:34px}.list-box.no-label.show-top{transform:translateY(calc(-100% - 4px)))}.list-box .mzch-checkbox:focus{box-shadow:0 0 0 3px var(--mzch-color-accent-ring);border-color:var(--mzch-color-accent);border-radius:var(--mzch-radius-xs)}.list-box .search-icon{display:flex;justify-content:center;align-items:center;margin-right:10px}.list-box .list-box-container{max-height:250px;overflow-y:auto;padding:.375rem 0}.list-box:has(.multi-select-all) .multi-select-all{justify-content:space-between;margin-top:.375rem}.list-box:has(.multi-select-all) .multi-select-all.is-scrolled{box-shadow:0 3px 4px 0 var(--mzch-color-shadow)}.list-box:has(.multi-select-all) .list-box-container{max-height:188px;padding-top:0}.list-box .filter-input{border-bottom:1px solid var(--mzch-color-border);position:relative;height:29px;box-sizing:border-box;display:flex;border-radius:var(--mzch-radius-control) var(--mzch-radius-control) 0 0;overflow:hidden}.list-box .filter-input input{width:100%;background-color:transparent;color:var(--mzch-color-text);font-size:.813rem;padding:.131rem .625rem;border:none;outline:none}.list-box .filter-input input::placeholder{color:var(--mzch-color-text-subtle)}.list-box .list-box-item{font-size:.813rem;min-height:24px;line-height:24px;padding:0 .625rem;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--mzch-color-text);gap:.375rem}.list-box .list-box-item.loading.not-hover{cursor:default;color:var(--mzch-color-text-subtle)}.list-box .list-box-item span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.list-box .list-box-item .item-only{font-size:.688rem;color:var(--mzch-color-text-secondary);cursor:pointer;padding:0;display:none;word-break:keep-all;height:15px;line-height:12px;background:transparent;border:none}.list-box .list-box-item .item-only:focus{outline:1px solid var(--mzch-color-accent);outline-offset:1px;border-radius:var(--mzch-radius-xs)}.list-box .list-box-item:hover:not(.not-hover),.list-box .list-box-item:focus-within:not(.not-hover){background-color:var(--mzch-color-accent-ghost)}.list-box .list-box-item:hover:not(.not-hover) .item-only,.list-box .list-box-item:focus-within:not(.not-hover) .item-only{display:block}.list-box .list-box-item.mzch-multi-focus{background-color:var(--mzch-color-accent-ghost)}.list-box .list-box-item.multi-select-item{justify-content:flex-start;-webkit-user-select:none;user-select:none}.highlight-container{display:inline-block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;flex-grow:1}.highlight-container span{text-overflow:initial;overflow:initial;white-space:inherit}.highlight-container .highlight{color:var(--mzch-color-accent);font-weight:700}.inner-container{position:relative}.virtual-row{position:absolute;width:100%}input[type=checkbox].mzch-checkbox{position:relative;opacity:1;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;background-color:var(--mzch-color-surface);border:1px solid var(--mzch-color-border);border-radius:var(--mzch-radius-xs);width:12px;height:12px;min-width:12px;min-height:12px;margin:0}input[type=checkbox].mzch-checkbox:hover:not(:disabled){border-color:var(--mzch-color-accent-strong)}input[type=checkbox].mzch-checkbox:focus-visible{outline:none;box-shadow:0 0 0 3px var(--mzch-color-accent-ring)}input[type=checkbox].mzch-checkbox:checked,input[type=checkbox].mzch-checkbox.is-indeterminate{background-color:var(--mzch-color-accent);border-color:var(--mzch-color-accent)}input[type=checkbox].mzch-checkbox:checked:hover:not(:disabled),input[type=checkbox].mzch-checkbox.is-indeterminate:hover:not(:disabled){background-color:var(--mzch-color-accent-strong)}input[type=checkbox].mzch-checkbox:checked:after,input[type=checkbox].mzch-checkbox.is-indeterminate:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;background-color:var(--mzch-color-on-accent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.276 6.142 4.667 8.294 9.723 3.469' fill='none' stroke='currentColor' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.276 6.142 4.667 8.294 9.723 3.469' fill='none' stroke='currentColor' stroke-width='1.33' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}input[type=checkbox].mzch-checkbox.is-indeterminate:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6H9' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6H9' stroke='currentColor' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}input[type=checkbox].mzch-checkbox:disabled{cursor:not-allowed;background-color:var(--mzch-color-disabled);border-color:var(--mzch-color-text-muted)}input[type=checkbox].mzch-checkbox:checked:disabled,input[type=checkbox].mzch-checkbox.is-indeterminate:disabled{background-color:var(--mzch-color-text-muted)}}@layer mzch{.mzch-toast{display:inline-flex;align-items:center;border-radius:var(--mzch-radius-pill);padding:.875rem 1.25rem;margin:.5rem 0;gap:.875rem;box-shadow:0 1px 2px 0 var(--mzch-color-shadow-weak);color:var(--mzch-color-surface);pointer-events:auto;cursor:pointer}.mzch-toast.bg-success{background-color:var(--mzch-color-success)}.mzch-toast.bg-error{background-color:var(--mzch-color-danger)}.mzch-toast.bg-info{background-color:var(--mzch-color-accent)}.mzch-toast.bg-warning{background-color:var(--mzch-color-warning)}.mzch-toast.position-center{align-self:center}.mzch-toast.position-end{align-self:flex-end}.mzch-toast.position-start{align-self:flex-start}.mzch-toast.mzch-toast-composed{position:relative;display:flex;align-items:flex-start;cursor:default;margin:0;color:inherit}.mzch-toast.mzch-toast-composed .mzch-toast-icon{flex-shrink:0}.mzch-toast.mzch-toast-composed .mzch-toast-content{flex:1 1 auto;min-width:0}.mzch-toast.mzch-toast-composed .mzch-toast-heading,.mzch-toast.mzch-toast-composed .mzch-toast-description,.mzch-toast.mzch-toast-composed .mzch-toast-actions{display:contents}.mzch-toast.mzch-toast-composed .mzch-toast-close{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:var(--mzch-radius-control)}.mzch-toast.mzch-toast-composed .mzch-toast-progress{position:absolute;top:0;left:0;right:0;height:4px;overflow:hidden}.mzch-toast.mzch-toast-composed .mzch-toast-progress-bar{height:100%;background-color:currentColor}.toast-message{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.mzch-toast-body{position:fixed;display:flex;top:0;right:0;bottom:0;left:0;padding:1.25rem;overflow:hidden;z-index:2000;pointer-events:none}.mzch-toast-body--top{flex-direction:column}.mzch-toast-body--bottom{flex-direction:column-reverse}.mzch-toast-body>.mzch-overlay-portal{display:contents}}@layer mzch{.mzch-chart-container{height:100%;border:1px solid #bbc6d9;background-color:var(--mzch-color-surface);display:flex;flex-direction:column;box-sizing:border-box;gap:10px;overflow:hidden;position:relative}.mzch-chart-container .mzch-chart-content-container{flex:1;display:flex;position:relative;min-height:0}.mzch-chart-container .mzch-chart-header-container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;height:50px;min-height:50px;border-bottom:1px solid #bbc6d9;box-sizing:border-box}.mzch-chart-container .mzch-chart-header-container .mzch-chart-header{display:flex;align-items:center;gap:8px;min-width:0}.mzch-chart-container .mzch-chart-header-container .mzch-chart-option-button-wrapper{position:relative;display:flex;align-items:center;gap:4px}.mzch-chart-container .mzch-chart-option-button{cursor:pointer;width:24px;height:24px;display:flex;justify-content:center;align-items:center;border-radius:4px;border:0;padding:0;background:transparent}.mzch-chart-container .mzch-chart-option-button:hover{background-color:#e9edf4}.mzch-chart-container .mzch-chart-option-button.is-active{background-color:#8998b529}.mzch-chart-container .mzch-chart-option-button:focus-visible{outline:2px solid var(--mzch-color-accent-ring)}.mzch-chart-container .mzch-chart-svg-container{height:100%;width:100%;padding:10px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;position:relative;min-height:0}.mzch-chart-container .mzch-chart-canvas{width:100%;height:100%;min-height:0}.mzch-chart-container .mzch-chart-warning{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--mzch-color-text-secondary);font-size:13px}.mzch-chart-container .mzch-chart-icon-container{position:absolute;top:8px;right:8px}.mzch-chart-container .mzch-chart-icon-container .mzch-chart-icon-wrapper{cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}.mzch-chart-container .mzch-chart-icon-container .mzch-chart-icon-wrapper:hover{background-color:#e9edf4}.mzch-chart-container .mzch-chart-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#fff9;z-index:5}.mzch-chart-container .mzch-chart-spinner{width:28px;height:28px;border-radius:var(--mzch-radius-circle);border:3px solid var(--mzch-color-accent-subtle);border-top-color:var(--mzch-color-accent);animation:mzch-chart-spin .8s linear infinite}@keyframes mzch-chart-spin{to{transform:rotate(360deg)}}.mzch-chart-option-modal-popup .mzch-popup-body{padding:0!important}.mzch-chart-option-modal{width:755px;height:570px;display:flex}.mzch-chart-option-modal .mzch-chart-option-wrapper{padding:36px 16px;width:286px;box-sizing:border-box}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-chart-option-item{margin:6px 0;display:grid;grid-template-columns:45% 55%;align-items:center}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-chart-option-item>span{font-size:13px;color:var(--mzch-color-text)}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-chart-zoom-toggles{display:flex;justify-content:space-between}.mzch-chart-option-modal .mzch-chart-option-wrapper .mzch-option-item-divider{margin-top:8px!important;margin-bottom:8px!important}.mzch-chart-option-modal .mzch-divider{width:.5px;height:100%;background-color:#bbc6d9}.mzch-chart-option-modal .mzch-chart-pivot-processor-wrapper{flex:1;padding:24px 16px;box-sizing:border-box;min-width:0}.mzch-popup-container.mzch-filter-popup .mzch-filters-wrapper{display:flex;flex-direction:column;gap:8px}.mzch-popup-container.mzch-filter-popup .mzch-filter-row{align-items:center;display:grid;grid-template-columns:75px 130px 65px minmax(0,1fr) 20px;gap:10px}.mzch-popup-container.mzch-filter-popup .mzch-filter-row.minify-width{grid-template-columns:130px 65px minmax(0,1fr) 20px}.mzch-popup-container.mzch-filter-popup .mzch-remove-row{cursor:pointer;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;display:flex;justify-content:center;align-items:center;border:0;padding:0;background:transparent;border-radius:4px}.mzch-popup-container.mzch-filter-popup .mzch-remove-row:focus-visible{box-shadow:0 0 0 3px #4568e033,0 0 0 .5px #4568e0}.mzch-popup-container.mzch-filter-popup .mzch-add-row{display:flex;justify-content:space-between;color:var(--mzch-color-accent);font-size:12px;padding-top:0;width:100%}.mzch-filter-operation-row{display:flex;flex-direction:row}.mzch-filter-operation-row td{font-family:Roboto,sans-serif;white-space:pre;overflow:hidden;text-overflow:ellipsis}.mzch-filter-operation-row td.symbol{width:14px;margin-right:20px;text-align:center}.mzch-filter-operation-row td.desc{width:100px;color:var(--mzch-color-text-subtle)}.mzch-view-def-processor-wrapper{min-width:400px;min-height:500px;display:flex;gap:16px}.mzch-view-def-processor-desc{color:var(--mzch-color-text-secondary);font-weight:500;font-size:12px;margin:0}.mzch-view-def-processor-label{font-size:12px;font-weight:500;color:var(--mzch-color-text-secondary)}.mzch-view-def-processor-left{height:100%;flex:1;display:flex;flex-direction:column;gap:6px;overflow:hidden}.mzch-view-def-processor-left.disabled{opacity:.4;pointer-events:none}.mzch-view-def-processor-fields-source-wrapper{height:100%;overflow:hidden}.mzch-view-def-processor-right{height:100%;flex:1;display:flex;flex-direction:column;gap:16px;overflow:hidden}.mzch-view-def-processor-applied-fields-wrapper{height:100%;display:flex;flex-direction:column;gap:16px}.mzch-view-def-processor-applied-fields-inner-wrapper{flex:1;display:flex;flex-direction:column;gap:6px;height:100%;overflow:hidden}.mzch-view-def-processor-applied-fields-inner-wrapper.disabled{opacity:.4;pointer-events:none;display:none}.mzch-fields-source-section{height:100%;border:1px solid #bbc6d9;padding:6px 5px 0;overflow:auto;box-sizing:border-box}.mzch-fields-source-section .mzch-fields-source-item{padding:0 0 0 6px;height:22px;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:6px}.mzch-fields-source-section .mzch-fields-source-item:hover{background-color:#4568e017}.mzch-fields-source-section .mzch-fields-source-item .mzch-fields-source-label{color:var(--mzch-color-text);font-weight:400;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px;cursor:pointer}.mzch-applied-fields-section{flex:1;border:1px dashed var(--mzch-color-accent);background-color:var(--mzch-color-surface-muted);padding:12px;display:flex;flex-direction:column;gap:6px;overflow:auto}.mzch-applied-fields-section .mzch-fields-applied-item{cursor:pointer;height:26px!important;border-radius:4px;border:1px solid var(--mzch-color-accent);color:var(--mzch-color-accent);background-color:var(--mzch-color-accent-subtle)!important;display:flex;align-items:center;padding-left:6px;padding-right:7px;font-size:13px;line-height:100%;overflow:hidden;box-sizing:border-box}.mzch-applied-fields-section .mzch-fields-applied-item .mzch-drag-handle{display:inline-flex;margin-right:4px}.mzch-applied-fields-section .mzch-fields-applied-item .mzch-applied-field-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mzch-applied-fields-section .mzch-drag-item{position:relative}.mzch-applied-fields-section .mzch-drag-item.on-drag-over-top:before,.mzch-applied-fields-section .mzch-drag-item.on-drag-over-bottom:before{content:"";width:100%;height:4px;position:absolute;background-color:#a2b3ef;left:0}.mzch-applied-fields-section .mzch-drag-item.on-drag-over-top:before{top:-5px}.mzch-applied-fields-section .mzch-drag-item.on-drag-over-bottom:before{top:calc(100% + 1px)}.mzch-dragging-container{display:flex;flex-direction:column;gap:6px}.mzch-value-field{display:flex;justify-content:space-between}.mzch-value-field .mzch-value-field-left{display:flex;overflow:hidden;align-items:center}.mzch-value-field .mzch-value-field-left .mzch-drag-handle{margin-right:2px}.mzch-value-field .mzch-value-field-left .mzch-value-field-summary{color:var(--mzch-color-text-secondary);font-weight:500;line-height:100%;position:relative;font-size:12px;display:flex;align-items:center}.mzch-value-field .mzch-value-field-left .mzch-value-field-summary:after{position:relative;right:-4px;content:"l";color:var(--mzch-color-text-muted);margin-right:7px;display:flex;line-height:100%}.mzch-value-field .mzch-value-field-option-button{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;cursor:pointer}.mzch-value-field-option-modal{pointer-events:none}.mzch-value-field-option-modal .mzch-popup-backdrop{display:none}.mzch-value-field-option-modal .mzch-popup{box-shadow:0 2px 8px #0000001f;border:1px solid var(--mzch-color-border)}.mzch-value-field-option-modal .mzch-popup .mzch-popup-body{padding:9px 16px!important}.mzch-value-field-option-modal .mzch-view-def-panel-option-item{margin:4px 0;display:grid;grid-template-columns:45% 55%;align-items:center}.mzch-value-field-option-modal .mzch-view-def-panel-option-item>span{font-size:13px;color:var(--mzch-color-text)}}

package/dist/useEChartPopupView.d.ts

@@ -0,0 +1,11 @@
+import { FilterDef, ViewDef } from '@vmscloud/moz-ui-chart-core';
+export interface EChartPopupViewState {
+    itemsSource: any[];
+    chartDef: Record<string, any>;
+    viewDef: ViewDef;
+    filterDef: FilterDef[];
+    chartDefTemplate: Record<string, any>;
+    chartPopupTitle: string;
+    ready: boolean;
+}
+export declare function useEChartPopupView(): EChartPopupViewState;

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@vmscloud/moz-ui-chart-react",
+  "version": "0.1.1",
+  "license": "ISC",
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "./dist/index.js",
+    "./dist/index.cjs"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "description": "React 18+ adapter for @vmscloud/moz-ui-chart-core (EChart, useEChartPopupView, ChartLocaleProvider)",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./echarts": {
+      "types": "./dist/echarts.d.ts",
+      "import": "./dist/echarts.js",
+      "require": "./dist/echarts.cjs"
+    },
+    "./echarts/core": {
+      "types": "./dist/echarts.core.d.ts",
+      "import": "./dist/echarts.core.js",
+      "require": "./dist/echarts.core.cjs"
+    },
+    "./echarts/charts": {
+      "types": "./dist/echarts.charts.d.ts",
+      "import": "./dist/echarts.charts.js",
+      "require": "./dist/echarts.charts.cjs"
+    },
+    "./echarts/components": {
+      "types": "./dist/echarts.components.d.ts",
+      "import": "./dist/echarts.components.js",
+      "require": "./dist/echarts.components.cjs"
+    },
+    "./echarts/renderers": {
+      "types": "./dist/echarts.renderers.d.ts",
+      "import": "./dist/echarts.renderers.js",
+      "require": "./dist/echarts.renderers.cjs"
+    },
+    "./echarts-stat": {
+      "types": "./dist/echarts-stat.d.ts",
+      "import": "./dist/echarts-stat.js",
+      "require": "./dist/echarts-stat.cjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vmscloud/mozart-cloud.git",
+    "directory": "components/frontend/moz-ui-chart-react"
+  },
+  "dependencies": {
+    "@vmscloud/moz-ui-chart-core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^27.4.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.0",
+    "terser": "^5.44.0",
+    "typescript": "^5.3.3",
+    "vite": "^6.3.3",
+    "vite-plugin-dts": "^4.0.3",
+    "vitest": "^3.0.9"
+  },
+  "scripts": {
+    "build": "tsc --noEmit && vite build --config vite.config.lib.ts",
+    "build:lib": "vite build --config vite.config.lib.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}