@arronqzy/abuilder 1.1.4 → 1.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -5
- package/dist/index.cjs +7 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +8 -4
- package/dist/index.js.map +1 -1
- package/dist/styles.css +715 -58
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
# @arronqzy/abuilder
|
|
2
2
|
|
|
3
|
-
Abuilder
|
|
3
|
+
Abuilder **一站式可视化编辑器** npm 包。安装后在 React 应用中引入 `App` 即可渲染完整应用（视图画布 + 蓝图 + 工作区 + 在线预览）。
|
|
4
|
+
|
|
5
|
+
## 功能概览
|
|
6
|
+
|
|
7
|
+
- **视图编辑**：拖拽物料、图层、缩放平移、多选、图表与 Scope 配置
|
|
8
|
+
- **蓝图编辑**：节点连线、调试执行、蓝图库与执行日志
|
|
9
|
+
- **工作区**：多项目、IndexedDB 持久化、导入导出
|
|
10
|
+
- **在线预览**：独立预览页，支持 URL 参数打开指定工作区
|
|
4
11
|
|
|
5
12
|
## 安装
|
|
6
13
|
|
|
@@ -27,27 +34,49 @@ createRoot(document.getElementById("root")!).render(<App />);
|
|
|
27
34
|
className="h-screen"
|
|
28
35
|
defaultTheme="dark"
|
|
29
36
|
initialZoom={1}
|
|
37
|
+
locale="zh-CN" // 或 "en-US"；省略则按 localStorage / 浏览器语言 / zh-CN
|
|
30
38
|
/>
|
|
31
39
|
```
|
|
32
40
|
|
|
41
|
+
编辑器顶栏「设置 → 语言」可运行时切换中文 / English（写入 `localStorage` key `abuilder.locale`）。
|
|
42
|
+
|
|
33
43
|
### 在线预览
|
|
34
44
|
|
|
35
|
-
URL 带 `?preview=online&projectId=<工作区ID>`
|
|
45
|
+
URL 带 `?preview=online&projectId=<工作区ID>` 时自动进入预览模式：
|
|
36
46
|
|
|
37
47
|
```tsx
|
|
38
48
|
<App previewSearch="?preview=online&projectId=xxx" />
|
|
39
49
|
```
|
|
40
50
|
|
|
41
|
-
|
|
51
|
+
### 高级导出
|
|
42
52
|
|
|
43
|
-
除 `App`
|
|
53
|
+
除 `App` 外，也可单独使用底层组件：
|
|
44
54
|
|
|
45
55
|
```tsx
|
|
46
|
-
import {
|
|
56
|
+
import {
|
|
57
|
+
ReactViewPanel,
|
|
58
|
+
ReactViewOnlinePreview,
|
|
59
|
+
} from "@arronqzy/abuilder";
|
|
47
60
|
```
|
|
48
61
|
|
|
62
|
+
## Monorepo 包结构
|
|
63
|
+
|
|
64
|
+
| 包 | 职责 |
|
|
65
|
+
|----|------|
|
|
66
|
+
| `@arronqzy/abuilder` | 聚合入口（本包） |
|
|
67
|
+
| `@arronqzy/i18n` | 共享中英文本 |
|
|
68
|
+
| `@arronqzy/react-view` | 视图画布与工作区 |
|
|
69
|
+
| `@arronqzy/react-blueprint` | 蓝图编辑器 UI |
|
|
70
|
+
| `@arronqzy/blueprint-dsl` | 蓝图 DSL 与运行时 |
|
|
71
|
+
| `@arronqzy/rx-store` | 画布状态与 Undo/Redo |
|
|
72
|
+
| `@arronqzy/ui` | 共享 UI 组件 |
|
|
73
|
+
|
|
49
74
|
## 宿主应用要求
|
|
50
75
|
|
|
51
76
|
- React 18+
|
|
52
77
|
- 构建工具需支持 CSS 导入（Vite / Webpack 5 等）
|
|
53
78
|
- 根节点容器建议 `height: 100%`（样式已包含 `#root` / `#app` 规则）
|
|
79
|
+
|
|
80
|
+
## 许可证
|
|
81
|
+
|
|
82
|
+
MIT
|
package/dist/index.cjs
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var react = require('react');
|
|
4
4
|
var ui = require('@arronqzy/ui');
|
|
5
|
+
var react$1 = require('@arronqzy/i18n/react');
|
|
5
6
|
var reactView = require('@arronqzy/react-view');
|
|
6
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
8
|
|
|
@@ -10,8 +11,11 @@ function App({
|
|
|
10
11
|
className,
|
|
11
12
|
initialZoom,
|
|
12
13
|
defaultTheme = "dark",
|
|
14
|
+
locale = null,
|
|
13
15
|
previewSearch
|
|
14
16
|
}) {
|
|
17
|
+
const [localeState, setLocaleState] = react.useState(locale);
|
|
18
|
+
const effectiveLocale = locale ?? localeState;
|
|
15
19
|
const search = previewSearch ?? (typeof window !== "undefined" ? window.location.search : "");
|
|
16
20
|
const previewParams = react.useMemo(
|
|
17
21
|
() => reactView.parseOnlinePreviewSearchParams(search),
|
|
@@ -23,7 +27,7 @@ function App({
|
|
|
23
27
|
document.documentElement.classList.add("light");
|
|
24
28
|
document.documentElement.dataset.theme = "light";
|
|
25
29
|
}
|
|
26
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
30
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
31
|
"div",
|
|
28
32
|
{
|
|
29
33
|
className: "light min-h-[100vh] w-full bg-white text-gray-900",
|
|
@@ -36,9 +40,9 @@ function App({
|
|
|
36
40
|
}
|
|
37
41
|
)
|
|
38
42
|
}
|
|
39
|
-
);
|
|
43
|
+
) });
|
|
40
44
|
}
|
|
41
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsxRuntime.jsx(reactView.ReactViewPanel, { className, initialZoom }) });
|
|
45
|
+
return /* @__PURE__ */ jsxRuntime.jsx(react$1.I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsxRuntime.jsx(reactView.ReactViewPanel, { className, initialZoom }) }) });
|
|
42
46
|
}
|
|
43
47
|
|
|
44
48
|
Object.defineProperty(exports, "ReactViewOnlinePreview", {
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/App.tsx"],"names":["useMemo","parseOnlinePreviewSearchParams","jsx","ReactViewOnlinePreview","ThemeProvider","ReactViewPanel"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/App.tsx"],"names":["useState","useMemo","parseOnlinePreviewSearchParams","jsx","I18nProvider","ReactViewOnlinePreview","ThemeProvider","ReactViewPanel"],"mappings":";;;;;;;;;AA0BO,SAAS,GAAI,CAAA;AAAA,EAClB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAe,GAAA,MAAA;AAAA,EACf,MAAS,GAAA,IAAA;AAAA,EACT;AACF,CAAqB,EAAA;AACnB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAwB,MAAM,CAAA;AACpE,EAAA,MAAM,kBAAkB,MAAU,IAAA,WAAA;AAElC,EAAA,MAAM,SACJ,aACC,KAAA,OAAO,WAAW,WAAc,GAAA,MAAA,CAAO,SAAS,MAAS,GAAA,EAAA,CAAA;AAE5D,EAAA,MAAM,aAAgB,GAAAC,aAAA;AAAA,IACpB,MAAMC,yCAA+B,MAAM,CAAA;AAAA,IAC3C,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAA,OAAO,aAAa,WAAa,EAAA;AACnC,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,MAAA,CAAO,MAAM,CAAA;AAChD,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,GAAA,CAAI,OAAO,CAAA;AAC9C,MAAS,QAAA,CAAA,eAAA,CAAgB,QAAQ,KAAQ,GAAA,OAAA;AAAA;AAG3C,IAAA,uBACGC,cAAA,CAAAC,oBAAA,EAAA,EAAa,MAAQ,EAAA,eAAA,EAAiB,gBAAgB,cACrD,EAAA,QAAA,kBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,mDAAA;AAAA,QACV,YAAW,EAAA,OAAA;AAAA,QAEX,QAAA,kBAAAA,cAAA;AAAA,UAACE,gCAAA;AAAA,UAAA;AAAA,YACC,WAAW,aAAc,CAAA,SAAA;AAAA,YACzB,mBAAmB,aAAc,CAAA;AAAA;AAAA;AACnC;AAAA,KAEJ,EAAA,CAAA;AAAA;AAIJ,EAAA,sCACGD,oBAAa,EAAA,EAAA,MAAA,EAAQ,eAAiB,EAAA,cAAA,EAAgB,gBACrD,QAAC,kBAAAD,cAAA,CAAAG,gBAAA,EAAA,EAAc,YAA4B,EAAA,YAAA,EAAc,OACvD,QAAC,kBAAAH,cAAA,CAAAI,wBAAA,EAAA,EAAe,SAAsB,EAAA,WAAA,EAA0B,GAClE,CACF,EAAA,CAAA;AAEJ","file":"index.cjs","sourcesContent":["import { useMemo, useState } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\nimport { I18nProvider } from \"@arronqzy/i18n/react\";\nimport type { Locale } from \"@arronqzy/i18n\";\nimport {\n ReactViewOnlinePreview,\n ReactViewPanel,\n parseOnlinePreviewSearchParams,\n} from \"@arronqzy/react-view\";\n\nexport type AbuilderAppProps = {\n className?: string;\n initialZoom?: number;\n /** 编辑器默认主题 */\n defaultTheme?: \"dark\" | \"light\";\n /**\n * 界面语言。省略时按 localStorage → 浏览器语言 → zh-CN 解析。\n */\n locale?: Locale | null;\n /**\n * 在线预览模式的 URL 查询串。\n * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。\n */\n previewSearch?: string;\n};\n\nexport function App({\n className,\n initialZoom,\n defaultTheme = \"dark\",\n locale = null,\n previewSearch,\n}: AbuilderAppProps) {\n const [localeState, setLocaleState] = useState<Locale | null>(locale);\n const effectiveLocale = locale ?? localeState;\n\n const search =\n previewSearch ??\n (typeof window !== \"undefined\" ? window.location.search : \"\");\n\n const previewParams = useMemo(\n () => parseOnlinePreviewSearchParams(search),\n [search]\n );\n\n if (previewParams) {\n if (typeof document !== \"undefined\") {\n document.documentElement.classList.remove(\"dark\");\n document.documentElement.classList.add(\"light\");\n document.documentElement.dataset.theme = \"light\";\n }\n\n return (\n <I18nProvider locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <div\n className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n data-theme=\"light\"\n >\n <ReactViewOnlinePreview\n projectId={previewParams.projectId}\n previewInstanceId={previewParams.previewInstanceId}\n />\n </div>\n </I18nProvider>\n );\n }\n\n return (\n <I18nProvider locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n <ReactViewPanel className={className} initialZoom={initialZoom} />\n </ThemeProvider>\n </I18nProvider>\n );\n}\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Locale } from '@arronqzy/i18n';
|
|
3
|
+
export { Locale } from '@arronqzy/i18n';
|
|
2
4
|
export { ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
3
5
|
|
|
4
6
|
type AbuilderAppProps = {
|
|
@@ -6,12 +8,16 @@ type AbuilderAppProps = {
|
|
|
6
8
|
initialZoom?: number;
|
|
7
9
|
/** 编辑器默认主题 */
|
|
8
10
|
defaultTheme?: "dark" | "light";
|
|
11
|
+
/**
|
|
12
|
+
* 界面语言。省略时按 localStorage → 浏览器语言 → zh-CN 解析。
|
|
13
|
+
*/
|
|
14
|
+
locale?: Locale | null;
|
|
9
15
|
/**
|
|
10
16
|
* 在线预览模式的 URL 查询串。
|
|
11
17
|
* 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。
|
|
12
18
|
*/
|
|
13
19
|
previewSearch?: string;
|
|
14
20
|
};
|
|
15
|
-
declare function App({ className, initialZoom, defaultTheme, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
16
22
|
|
|
17
23
|
export { type AbuilderAppProps, App };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Locale } from '@arronqzy/i18n';
|
|
3
|
+
export { Locale } from '@arronqzy/i18n';
|
|
2
4
|
export { ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
3
5
|
|
|
4
6
|
type AbuilderAppProps = {
|
|
@@ -6,12 +8,16 @@ type AbuilderAppProps = {
|
|
|
6
8
|
initialZoom?: number;
|
|
7
9
|
/** 编辑器默认主题 */
|
|
8
10
|
defaultTheme?: "dark" | "light";
|
|
11
|
+
/**
|
|
12
|
+
* 界面语言。省略时按 localStorage → 浏览器语言 → zh-CN 解析。
|
|
13
|
+
*/
|
|
14
|
+
locale?: Locale | null;
|
|
9
15
|
/**
|
|
10
16
|
* 在线预览模式的 URL 查询串。
|
|
11
17
|
* 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。
|
|
12
18
|
*/
|
|
13
19
|
previewSearch?: string;
|
|
14
20
|
};
|
|
15
|
-
declare function App({ className, initialZoom, defaultTheme, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
declare function App({ className, initialZoom, defaultTheme, locale, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
|
|
16
22
|
|
|
17
23
|
export { type AbuilderAppProps, App };
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { useMemo } from 'react';
|
|
1
|
+
import { useState, useMemo } from 'react';
|
|
2
2
|
import { ThemeProvider } from '@arronqzy/ui';
|
|
3
|
+
import { I18nProvider } from '@arronqzy/i18n/react';
|
|
3
4
|
import { parseOnlinePreviewSearchParams, ReactViewOnlinePreview, ReactViewPanel } from '@arronqzy/react-view';
|
|
4
5
|
export { ReactViewOnlinePreview, ReactViewPanel, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
|
|
5
6
|
import { jsx } from 'react/jsx-runtime';
|
|
@@ -9,8 +10,11 @@ function App({
|
|
|
9
10
|
className,
|
|
10
11
|
initialZoom,
|
|
11
12
|
defaultTheme = "dark",
|
|
13
|
+
locale = null,
|
|
12
14
|
previewSearch
|
|
13
15
|
}) {
|
|
16
|
+
const [localeState, setLocaleState] = useState(locale);
|
|
17
|
+
const effectiveLocale = locale ?? localeState;
|
|
14
18
|
const search = previewSearch ?? (typeof window !== "undefined" ? window.location.search : "");
|
|
15
19
|
const previewParams = useMemo(
|
|
16
20
|
() => parseOnlinePreviewSearchParams(search),
|
|
@@ -22,7 +26,7 @@ function App({
|
|
|
22
26
|
document.documentElement.classList.add("light");
|
|
23
27
|
document.documentElement.dataset.theme = "light";
|
|
24
28
|
}
|
|
25
|
-
return /* @__PURE__ */ jsx(
|
|
29
|
+
return /* @__PURE__ */ jsx(I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsx(
|
|
26
30
|
"div",
|
|
27
31
|
{
|
|
28
32
|
className: "light min-h-[100vh] w-full bg-white text-gray-900",
|
|
@@ -35,9 +39,9 @@ function App({
|
|
|
35
39
|
}
|
|
36
40
|
)
|
|
37
41
|
}
|
|
38
|
-
);
|
|
42
|
+
) });
|
|
39
43
|
}
|
|
40
|
-
return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsx(ReactViewPanel, { className, initialZoom }) });
|
|
44
|
+
return /* @__PURE__ */ jsx(I18nProvider, { locale: effectiveLocale, onLocaleChange: setLocaleState, children: /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsx(ReactViewPanel, { className, initialZoom }) }) });
|
|
41
45
|
}
|
|
42
46
|
|
|
43
47
|
export { App };
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/App.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/App.tsx"],"names":[],"mappings":";;;;;;;;AA0BO,SAAS,GAAI,CAAA;AAAA,EAClB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAe,GAAA,MAAA;AAAA,EACf,MAAS,GAAA,IAAA;AAAA,EACT;AACF,CAAqB,EAAA;AACnB,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAwB,MAAM,CAAA;AACpE,EAAA,MAAM,kBAAkB,MAAU,IAAA,WAAA;AAElC,EAAA,MAAM,SACJ,aACC,KAAA,OAAO,WAAW,WAAc,GAAA,MAAA,CAAO,SAAS,MAAS,GAAA,EAAA,CAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,MAAM,+BAA+B,MAAM,CAAA;AAAA,IAC3C,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAA,OAAO,aAAa,WAAa,EAAA;AACnC,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,MAAA,CAAO,MAAM,CAAA;AAChD,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,GAAA,CAAI,OAAO,CAAA;AAC9C,MAAS,QAAA,CAAA,eAAA,CAAgB,QAAQ,KAAQ,GAAA,OAAA;AAAA;AAG3C,IAAA,uBACG,GAAA,CAAA,YAAA,EAAA,EAAa,MAAQ,EAAA,eAAA,EAAiB,gBAAgB,cACrD,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,mDAAA;AAAA,QACV,YAAW,EAAA,OAAA;AAAA,QAEX,QAAA,kBAAA,GAAA;AAAA,UAAC,sBAAA;AAAA,UAAA;AAAA,YACC,WAAW,aAAc,CAAA,SAAA;AAAA,YACzB,mBAAmB,aAAc,CAAA;AAAA;AAAA;AACnC;AAAA,KAEJ,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACG,YAAa,EAAA,EAAA,MAAA,EAAQ,eAAiB,EAAA,cAAA,EAAgB,gBACrD,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,YAA4B,EAAA,YAAA,EAAc,OACvD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,SAAsB,EAAA,WAAA,EAA0B,GAClE,CACF,EAAA,CAAA;AAEJ","file":"index.js","sourcesContent":["import { useMemo, useState } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\nimport { I18nProvider } from \"@arronqzy/i18n/react\";\nimport type { Locale } from \"@arronqzy/i18n\";\nimport {\n ReactViewOnlinePreview,\n ReactViewPanel,\n parseOnlinePreviewSearchParams,\n} from \"@arronqzy/react-view\";\n\nexport type AbuilderAppProps = {\n className?: string;\n initialZoom?: number;\n /** 编辑器默认主题 */\n defaultTheme?: \"dark\" | \"light\";\n /**\n * 界面语言。省略时按 localStorage → 浏览器语言 → zh-CN 解析。\n */\n locale?: Locale | null;\n /**\n * 在线预览模式的 URL 查询串。\n * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。\n */\n previewSearch?: string;\n};\n\nexport function App({\n className,\n initialZoom,\n defaultTheme = \"dark\",\n locale = null,\n previewSearch,\n}: AbuilderAppProps) {\n const [localeState, setLocaleState] = useState<Locale | null>(locale);\n const effectiveLocale = locale ?? localeState;\n\n const search =\n previewSearch ??\n (typeof window !== \"undefined\" ? window.location.search : \"\");\n\n const previewParams = useMemo(\n () => parseOnlinePreviewSearchParams(search),\n [search]\n );\n\n if (previewParams) {\n if (typeof document !== \"undefined\") {\n document.documentElement.classList.remove(\"dark\");\n document.documentElement.classList.add(\"light\");\n document.documentElement.dataset.theme = \"light\";\n }\n\n return (\n <I18nProvider locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <div\n className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n data-theme=\"light\"\n >\n <ReactViewOnlinePreview\n projectId={previewParams.projectId}\n previewInstanceId={previewParams.previewInstanceId}\n />\n </div>\n </I18nProvider>\n );\n }\n\n return (\n <I18nProvider locale={effectiveLocale} onLocaleChange={setLocaleState}>\n <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n <ReactViewPanel className={className} initialZoom={initialZoom} />\n </ThemeProvider>\n </I18nProvider>\n );\n}\n"]}
|