feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

frontend/packages/studio/mockset-editor/.storybook/main.js

@@ -0,0 +1,31 @@
+import { mergeConfig } from 'vite';
+import svgr from 'vite-plugin-svgr';
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  viteFinal: config =>
+    mergeConfig(config, {
+      plugins: [
+        svgr({
+          svgrOptions: {
+            native: false,
+          },
+        }),
+      ],
+    }),
+};
+export default config;

frontend/packages/studio/mockset-editor/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/packages/studio/mockset-editor/.stylelintrc.js

@@ -0,0 +1,5 @@
+const { defineConfig } = require('@coze-arch/stylelint-config');
+
+module.exports = defineConfig({
+  extends: [],
+});

frontend/packages/studio/mockset-editor/README.md

@@ -0,0 +1,16 @@
+# @coze-studio/mockset-editor
+
+> Project template for react component with storybook.
+
+## Features
+
+- [x] eslint & ts
+- [x] esm bundle
+- [x] umd bundle
+- [x] storybook
+
+## Commands
+
+- init: `rush update`
+- dev: `npm run dev`
+- build: `npm run build`

frontend/packages/studio/mockset-editor/config/rush-project.json

@@ -0,0 +1,12 @@
+{
+  "operationSettings": [
+    {
+      "operationName": "test:cov",
+      "outputFolderNames": ["coverage"]
+    },
+    {
+      "operationName": "ts-check",
+      "outputFolderNames": ["dist"]
+    }
+  ]
+}

frontend/packages/studio/mockset-editor/eslint.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('@coze-arch/eslint-config');
+
+module.exports = defineConfig({
+  packageRoot: __dirname,
+  preset: 'web',
+  rules: {},
+});

frontend/packages/studio/mockset-editor/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@coze-studio/mockset-editor",
+  "version": "0.0.1",
+  "description": "mockset editor",
+  "license": "Apache-2.0",
+  "author": "gaoyuanhan.duty@bytedance.com",
+  "maintainers": [],
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "exit 0",
+    "lint": "eslint ./ --cache",
+    "test": "vitest --run --passWithNoTests",
+    "test:cov": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@coze-arch/bot-monaco-editor": "workspace:*",
+    "@coze-arch/bot-semi": "workspace:*",
+    "@coze-studio/mockset-shared": "workspace:*",
+    "ahooks": "^3.7.8",
+    "classnames": "^2.3.2"
+  },
+  "devDependencies": {
+    "@coze-arch/bot-typings": "workspace:*",
+    "@coze-arch/eslint-config": "workspace:*",
+    "@coze-arch/stylelint-config": "workspace:*",
+    "@coze-arch/ts-config": "workspace:*",
+    "@coze-arch/vitest-config": "workspace:*",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@vitest/coverage-v8": "~3.0.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "stylelint": "^15.11.0",
+    "vite-plugin-svgr": "~3.3.0",
+    "vitest": "~3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  }
+}
+

frontend/packages/studio/mockset-editor/src/components/mockset-editor/editor.module.less

@@ -0,0 +1,61 @@
+.editor-container {
+  position: relative;
+  height: 100%;
+}
+
+.editor {
+  height: 100%;
+  padding: 16px 0;
+
+  background-color: white;
+  border: 1px solid #eee;
+  border-radius: 8px;
+
+
+  :global {
+    .monaco-editor .scroll-decoration {
+      box-shadow: unset;
+    }
+
+    .semi-skeleton-image {
+      width: 100%;
+      height: 100px;
+      margin-bottom: 12px;
+    }
+  }
+}
+
+.editor-container_disabled {
+  :global {
+    .monaco-editor.no-user-select .view-lines {
+      /** 只读状态下 cursor 纠正为正常鼠标 **/
+
+      cursor: default;
+    }
+  }
+
+}
+
+.editor_hidden {
+  position: relative;
+  z-index: -1;
+  opacity: 0;
+}
+
+.skeleton {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  :global {
+    .semi-skeleton-image {
+      width: 100%;
+      height: 100%;
+      margin-bottom: 12px;
+    }
+  }
+}

frontend/packages/studio/mockset-editor/src/components/mockset-editor/index.tsx

@@ -0,0 +1,243 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/* eslint-disable @coze-arch/max-line-per-function */
+import {
+  type ForwardedRef,
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useEffect,
+} from 'react';
+
+import classNames from 'classnames';
+import { useDebounceFn } from 'ahooks';
+import {
+  type MockDataInfo,
+  FORMAT_SPACE_SETTING,
+  parseToolSchema,
+} from '@coze-studio/mockset-shared';
+import { Skeleton } from '@coze-arch/bot-semi';
+import type {
+  editor as monacoEditorNameSpace,
+  Monaco,
+} from '@coze-arch/bot-monaco-editor/types';
+import {
+  Editor as MonacoEditor,
+  DiffEditor,
+} from '@coze-arch/bot-monaco-editor';
+
+import lightTheme from './light-theme-editor.module.less';
+import s from './editor.module.less';
+
+export interface MockDataEditorMarkerInfo {
+  message: string;
+}
+
+export interface MockDataEditorProps {
+  mockInfo: MockDataInfo;
+  readOnly?: boolean;
+  className?: string;
+  onValidate?: (markers: MockDataEditorMarkerInfo[]) => void;
+  onEditorPaste?: () => undefined | boolean;
+  onEditorReady?: () => void;
+}
+
+export interface EditorActions {
+  getValue: () => string | undefined;
+}
+
+export const MockDataEditor = forwardRef(
+  (
+    {
+      mockInfo,
+      readOnly,
+      className,
+      onValidate,
+      onEditorPaste,
+      onEditorReady,
+    }: MockDataEditorProps,
+    ref: ForwardedRef<EditorActions>,
+  ) => {
+    const { mock, mergedResultExample, schema, incompatible } = mockInfo;
+    const [ready, setReady] = useState(false);
+
+    const editorRef =
+      useRef<monacoEditorNameSpace.IStandaloneCodeEditor | null>(null);
+    const monacoRef = useRef<Monaco | null>(null);
+
+    const validateHandler = useCallback(
+      (markers: monacoEditorNameSpace.IMarker[]) => {
+        const m = markers.map(marker => ({
+          message: marker.message,
+        }));
+        if (editorRef.current?.getValue().trim().length === 0) {
+          m.push({ message: 'no data' });
+        }
+        onValidate?.(m);
+      },
+      [onValidate],
+    );
+
+    const { run: modelDecorationsChangeHandler } = useDebounceFn(
+      () => {
+        const model = editorRef.current?.getModel();
+        if (model?.id) {
+          const markers =
+            (
+              monacoRef.current?.editor.getModelMarkers as (
+                id: string,
+              ) => monacoEditorNameSpace.IMarker[]
+            )(model.id).filter(
+              (item: monacoEditorNameSpace.IMarker) =>
+                item.resource.path === model.id.replace('$model', '/'),
+            ) || [];
+          validateHandler(markers || []);
+        }
+      },
+      {
+        wait: 200,
+      },
+    );
+
+    const editorFormatJSON = useCallback(() => {
+      editorRef.current?.trigger('editor', 'editor.action.formatDocument', {});
+    }, []);
+
+    const editorDidMountHandler = (
+      editor: monacoEditorNameSpace.IStandaloneCodeEditor,
+      monaco: Monaco,
+    ) => {
+      editorRef.current = editor;
+      monacoRef.current = monaco;
+
+      const parsedSchema = schema ? parseToolSchema(schema) : undefined;
+      const model = editor.getModel();
+      const filePath = model?.uri.toString();
+      if (parsedSchema && filePath) {
+        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+          validate: true,
+          schemaValidation: 'error',
+          schemas: [
+            {
+              // cp-disable-next-line
+              uri: `https://plugin-mock-set/tool_schema_${model?.id}`,
+              fileMatch: [filePath],
+              schema: parsedSchema,
+            },
+          ],
+        });
+      }
+
+      editor.onDidBlurEditorText(editorFormatJSON);
+      editor.onDidPaste(() => {
+        const continueProcessing = onEditorPaste?.();
+        if (continueProcessing !== false) {
+          editorFormatJSON();
+        }
+      });
+      editor.onDidChangeModelDecorations(modelDecorationsChangeHandler);
+      editor.getModel()?.updateOptions({ tabSize: FORMAT_SPACE_SETTING });
+
+      onEditorReady?.();
+      setTimeout(() => {
+        setReady(true);
+      });
+    };
+
+    const diffEditorDidMountHandler = (
+      editor: monacoEditorNameSpace.IStandaloneDiffEditor,
+      monaco: Monaco,
+    ) => {
+      const modifiedEditor = editor.getModifiedEditor();
+      editorDidMountHandler(modifiedEditor, monaco);
+    };
+
+    useImperativeHandle(ref, () => ({
+      getValue: () => editorRef.current?.getValue(),
+    }));
+
+    useEffect(() => {
+      editorFormatJSON();
+    }, [mock?.responseExpect?.responseExpectRule, mergedResultExample]);
+
+    return (
+      <div
+        className={classNames(
+          s['editor-container'],
+          readOnly ? s['editor-container_disabled'] : '',
+          lightTheme.light,
+          className,
+        )}
+      >
+        {!ready ? (
+          <Skeleton className={s.skeleton} placeholder={<Skeleton.Image />} />
+        ) : null}
+        {incompatible && !readOnly ? (
+          <DiffEditor
+            className={classNames(s.editor, !ready ? s.editor_hidden : '')}
+            theme={'vs-dark'}
+            original={mock?.responseExpect?.responseExpectRule}
+            modified={mergedResultExample}
+            language="json"
+            options={{
+              unicodeHighlight: {
+                ambiguousCharacters: false,
+              },
+              wordWrap: 'on',
+              readOnly,
+              formatOnPaste: true,
+              formatOnType: true,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              contextmenu: false,
+            }}
+            onMount={diffEditorDidMountHandler}
+            loading={null}
+          />
+        ) : (
+          <MonacoEditor
+            className={classNames(s.editor, !ready ? s.editor_hidden : '')}
+            theme={'vs-dark'}
+            language="json"
+            options={{
+              unicodeHighlight: {
+                ambiguousCharacters: false,
+              },
+              wordWrap: 'on',
+              readOnly,
+              formatOnPaste: true,
+              formatOnType: true,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              scrollbar: {
+                alwaysConsumeMouseWheel: !readOnly,
+              },
+              contextmenu: false,
+            }}
+            value={
+              mock?.responseExpect?.responseExpectRule || mergedResultExample
+            }
+            onMount={editorDidMountHandler}
+            loading={null}
+          />
+        )}
+      </div>
+    );
+  },
+);

frontend/packages/studio/mockset-editor/src/components/mockset-editor/light-theme-editor.module.less

@@ -0,0 +1,573 @@
+/* stylelint-disable selector-class-pattern */
+/* stylelint-disable declaration-no-important */
+/* stylelint-disable custom-property-pattern */
+// 解决和 workflow 页面 editor 主题冲突的问题
+.light {
+  :global {
+
+    /* stylelint-disable-next-line rule-empty-line-before */
+    .monaco-editor,
+    .monaco-diff-editor {
+      --vscode-foreground: #616161;
+      --vscode-disabledForeground: rgb(97 97 97 / 50%);
+      --vscode-errorForeground: #a1260d;
+      --vscode-descriptionForeground: #717171;
+      --vscode-icon-foreground: #424242;
+      --vscode-focusBorder: #0090f1;
+      --vscode-textSeparator-foreground: rgb(0 0 0 / 18%);
+      --vscode-textLink-foreground: #006ab1;
+      --vscode-textLink-activeForeground: #006ab1;
+      --vscode-textPreformat-foreground: #a31515;
+      --vscode-textBlockQuote-background: rgb(127 127 127 / 10%);
+      --vscode-textBlockQuote-border: rgb(0 122 204 / 50%);
+      --vscode-textCodeBlock-background: rgb(220 220 220 / 40%);
+      --vscode-widget-shadow: rgb(0 0 0 / 16%);
+      --vscode-input-background: #fff;
+      --vscode-input-foreground: #616161;
+      --vscode-inputOption-activeBorder: #007acc;
+      --vscode-inputOption-hoverBackground: rgb(184 184 184 / 31%);
+      --vscode-inputOption-activeBackground: rgb(0 144 241 / 20%);
+      --vscode-inputOption-activeForeground: #000;
+      --vscode-input-placeholderForeground: rgb(97 97 97 / 50%);
+      --vscode-inputValidation-infoBackground: #d6ecf2;
+      --vscode-inputValidation-infoBorder: #007acc;
+      --vscode-inputValidation-warningBackground: #f6f5d2;
+      --vscode-inputValidation-warningBorder: #b89500;
+      --vscode-inputValidation-errorBackground: #f2dede;
+      --vscode-inputValidation-errorBorder: #be1100;
+      --vscode-dropdown-background: #fff;
+      --vscode-dropdown-foreground: #616161;
+      --vscode-dropdown-border: #cecece;
+      --vscode-button-foreground: #fff;
+      --vscode-button-separator: rgb(255 255 255 / 40%);
+      --vscode-button-background: #007acc;
+      --vscode-button-hoverBackground: #0062a3;
+      --vscode-button-secondaryForeground: #fff;
+      --vscode-button-secondaryBackground: #5f6a79;
+      --vscode-button-secondaryHoverBackground: #4c5561;
+      --vscode-badge-background: #c4c4c4;
+      --vscode-badge-foreground: #333;
+      --vscode-scrollbar-shadow: #ddd;
+      --vscode-scrollbarSlider-background: rgb(100 100 100 / 40%);
+      --vscode-scrollbarSlider-hoverBackground: rgb(100 100 100 / 70%);
+      --vscode-scrollbarSlider-activeBackground: rgb(0 0 0 / 60%);
+      --vscode-progressBar-background: #0e70c0;
+      --vscode-editorError-foreground: #e51400;
+      --vscode-editorWarning-foreground: #bf8803;
+      --vscode-editorInfo-foreground: #1a85ff;
+      --vscode-editorHint-foreground: #6c6c6c;
+      --vscode-sash-hoverBorder: #0090f1;
+      --vscode-editor-background: #fffffe;
+      --vscode-editor-foreground: #000;
+      --vscode-editorStickyScroll-background: #fffffe;
+      --vscode-editorStickyScrollHover-background: #f0f0f0;
+      --vscode-editorWidget-background: #f3f3f3;
+      --vscode-editorWidget-foreground: #616161;
+      --vscode-editorWidget-border: #c8c8c8;
+      --vscode-quickInput-background: #f3f3f3;
+      --vscode-quickInput-foreground: #616161;
+      --vscode-quickInputTitle-background: rgb(0 0 0 / 6%);
+      --vscode-pickerGroup-foreground: #0066bf;
+      --vscode-pickerGroup-border: #cccedb;
+      --vscode-keybindingLabel-background: rgb(221 221 221 / 40%);
+      --vscode-keybindingLabel-foreground: #555;
+      --vscode-keybindingLabel-border: rgb(204 204 204 / 40%);
+      --vscode-keybindingLabel-bottomBorder: rgb(187 187 187 / 40%);
+      --vscode-editor-selectionBackground: #add6ff;
+      --vscode-editor-inactiveSelectionBackground: #e5ebf1;
+      --vscode-editor-selectionHighlightBackground: rgb(173 214 255 / 30%);
+      --vscode-editor-findMatchBackground: #a8ac94;
+      --vscode-editor-findMatchHighlightBackground: rgb(234 92 0 / 33%);
+      --vscode-editor-findRangeHighlightBackground: rgb(180 180 180 / 30%);
+      --vscode-searchEditor-findMatchBackground: rgb(234 92 0 / 22%);
+      --vscode-search-resultsInfoForeground: #616161;
+      --vscode-editor-hoverHighlightBackground: rgb(173 214 255 / 15%);
+      --vscode-editorHoverWidget-background: #f3f3f3;
+      --vscode-editorHoverWidget-foreground: #616161;
+      --vscode-editorHoverWidget-border: #c8c8c8;
+      --vscode-editorHoverWidget-statusBarBackground: #e7e7e7;
+      --vscode-editorLink-activeForeground: #00f;
+      --vscode-editorInlayHint-foreground: #969696;
+      --vscode-editorInlayHint-background: rgb(196 196 196 / 10%);
+      --vscode-editorInlayHint-typeForeground: #969696;
+      --vscode-editorInlayHint-typeBackground: rgb(196 196 196 / 10%);
+      --vscode-editorInlayHint-parameterForeground: #969696;
+      --vscode-editorInlayHint-parameterBackground: rgb(196 196 196 / 10%);
+      --vscode-editorLightBulb-foreground: #ddb100;
+      --vscode-editorLightBulbAutoFix-foreground: #007acc;
+      --vscode-diffEditor-insertedTextBackground: rgb(156 204 44 / 25%);
+      --vscode-diffEditor-removedTextBackground: rgb(255 0 0 / 20%);
+      --vscode-diffEditor-insertedLineBackground: rgb(155 185 85 / 20%);
+      --vscode-diffEditor-removedLineBackground: rgb(255 0 0 / 20%);
+      --vscode-diffEditor-diagonalFill: rgb(34 34 34 / 20%);
+      --vscode-diffEditor-unchangedRegionBackground: #e4e4e4;
+      --vscode-diffEditor-unchangedRegionForeground: #4d4c4c;
+      --vscode-diffEditor-unchangedCodeBackground: rgb(184 184 184 / 16%);
+      --vscode-list-focusOutline: #0090f1;
+      --vscode-list-activeSelectionBackground: #0060c0;
+      --vscode-list-activeSelectionForeground: #fff;
+      --vscode-list-inactiveSelectionBackground: #e4e6f1;
+      --vscode-list-hoverBackground: #f0f0f0;
+      --vscode-list-dropBackground: #d6ebff;
+      --vscode-list-highlightForeground: #0066bf;
+      --vscode-list-focusHighlightForeground: #bbe7ff;
+      --vscode-list-invalidItemForeground: #b89500;
+      --vscode-list-errorForeground: #b01011;
+      --vscode-list-warningForeground: #855f00;
+      --vscode-listFilterWidget-background: #f3f3f3;
+      --vscode-listFilterWidget-outline: rgb(0 0 0 / 0%);
+      --vscode-listFilterWidget-noMatchesOutline: #be1100;
+      --vscode-listFilterWidget-shadow: rgb(0 0 0 / 16%);
+      --vscode-list-filterMatchBackground: rgb(234 92 0 / 33%);
+      --vscode-tree-indentGuidesStroke: #a9a9a9;
+      --vscode-tree-inactiveIndentGuidesStroke: rgb(169 169 169 / 40%);
+      --vscode-tree-tableColumnsBorder: rgb(97 97 97 / 13%);
+      --vscode-tree-tableOddRowsBackground: rgb(97 97 97 / 4%);
+      --vscode-list-deemphasizedForeground: #8e8e90;
+      --vscode-checkbox-background: #fff;
+      --vscode-checkbox-selectBackground: #f3f3f3;
+      --vscode-checkbox-foreground: #616161;
+      --vscode-checkbox-border: #cecece;
+      --vscode-checkbox-selectBorder: #424242;
+      --vscode-quickInputList-focusForeground: #fff;
+      --vscode-quickInputList-focusBackground: #0060c0;
+      --vscode-menu-foreground: #616161;
+      --vscode-menu-background: #fff;
+      --vscode-menu-selectionForeground: #fff;
+      --vscode-menu-selectionBackground: #0060c0;
+      --vscode-menu-separatorBackground: #d4d4d4;
+      --vscode-toolbar-hoverBackground: rgb(184 184 184 / 31%);
+      --vscode-toolbar-activeBackground: rgb(166 166 166 / 31%);
+      --vscode-editor-snippetTabstopHighlightBackground: rgb(10 50 100 / 20%);
+      --vscode-editor-snippetFinalTabstopHighlightBorder: rgb(10 50 100 / 50%);
+      --vscode-breadcrumb-foreground: rgb(97 97 97 / 80%);
+      --vscode-breadcrumb-background: #fffffe;
+      --vscode-breadcrumb-focusForeground: #4e4e4e;
+      --vscode-breadcrumb-activeSelectionForeground: #4e4e4e;
+      --vscode-breadcrumbPicker-background: #f3f3f3;
+      --vscode-merge-currentHeaderBackground: rgb(64 200 174 / 50%);
+      --vscode-merge-currentContentBackground: rgb(64 200 174 / 20%);
+      --vscode-merge-incomingHeaderBackground: rgb(64 166 255 / 50%);
+      --vscode-merge-incomingContentBackground: rgb(64 166 255 / 20%);
+      --vscode-merge-commonHeaderBackground: rgb(96 96 96 / 40%);
+      --vscode-merge-commonContentBackground: rgb(96 96 96 / 16%);
+      --vscode-editorOverviewRuler-currentContentForeground: rgb(64 200 174 / 50%);
+      --vscode-editorOverviewRuler-incomingContentForeground: rgb(64 166 255 / 50%);
+      --vscode-editorOverviewRuler-commonContentForeground: rgb(96 96 96 / 40%);
+      --vscode-editorOverviewRuler-findMatchForeground: rgb(209 134 22 / 49%);
+      --vscode-editorOverviewRuler-selectionHighlightForeground: rgb(160 160 160 / 80%);
+      --vscode-minimap-findMatchHighlight: #d18616;
+      --vscode-minimap-selectionOccurrenceHighlight: #c9c9c9;
+      --vscode-minimap-selectionHighlight: #add6ff;
+      --vscode-minimap-errorHighlight: rgb(255 18 18 / 70%);
+      --vscode-minimap-warningHighlight: #bf8803;
+      --vscode-minimap-foregroundOpacity: #000;
+      --vscode-minimapSlider-background: rgb(100 100 100 / 20%);
+      --vscode-minimapSlider-hoverBackground: rgb(100 100 100 / 35%);
+      --vscode-minimapSlider-activeBackground: rgb(0 0 0 / 30%);
+      --vscode-problemsErrorIcon-foreground: #e51400;
+      --vscode-problemsWarningIcon-foreground: #bf8803;
+      --vscode-problemsInfoIcon-foreground: #1a85ff;
+      --vscode-charts-foreground: #616161;
+      --vscode-charts-lines: rgb(97 97 97 / 50%);
+      --vscode-charts-red: #e51400;
+      --vscode-charts-blue: #1a85ff;
+      --vscode-charts-yellow: #bf8803;
+      --vscode-charts-orange: #d18616;
+      --vscode-charts-green: #388a34;
+      --vscode-charts-purple: #652d90;
+      --vscode-diffEditor-move-border: rgb(139 139 139 / 61%);
+      --vscode-diffEditor-moveActive-border: #ffa500;
+      --vscode-symbolIcon-arrayForeground: #616161;
+      --vscode-symbolIcon-booleanForeground: #616161;
+      --vscode-symbolIcon-classForeground: #d67e00;
+      --vscode-symbolIcon-colorForeground: #616161;
+      --vscode-symbolIcon-constantForeground: #616161;
+      --vscode-symbolIcon-constructorForeground: #652d90;
+      --vscode-symbolIcon-enumeratorForeground: #d67e00;
+      --vscode-symbolIcon-enumeratorMemberForeground: #007acc;
+      --vscode-symbolIcon-eventForeground: #d67e00;
+      --vscode-symbolIcon-fieldForeground: #007acc;
+      --vscode-symbolIcon-fileForeground: #616161;
+      --vscode-symbolIcon-folderForeground: #616161;
+      --vscode-symbolIcon-functionForeground: #652d90;
+      --vscode-symbolIcon-interfaceForeground: #007acc;
+      --vscode-symbolIcon-keyForeground: #616161;
+      --vscode-symbolIcon-keywordForeground: #616161;
+      --vscode-symbolIcon-methodForeground: #652d90;
+      --vscode-symbolIcon-moduleForeground: #616161;
+      --vscode-symbolIcon-namespaceForeground: #616161;
+      --vscode-symbolIcon-nullForeground: #616161;
+      --vscode-symbolIcon-numberForeground: #616161;
+      --vscode-symbolIcon-objectForeground: #616161;
+      --vscode-symbolIcon-operatorForeground: #616161;
+      --vscode-symbolIcon-packageForeground: #616161;
+      --vscode-symbolIcon-propertyForeground: #616161;
+      --vscode-symbolIcon-referenceForeground: #616161;
+      --vscode-symbolIcon-snippetForeground: #616161;
+      --vscode-symbolIcon-stringForeground: #616161;
+      --vscode-symbolIcon-structForeground: #616161;
+      --vscode-symbolIcon-textForeground: #616161;
+      --vscode-symbolIcon-typeParameterForeground: #616161;
+      --vscode-symbolIcon-unitForeground: #616161;
+      --vscode-symbolIcon-variableForeground: #007acc;
+      --vscode-actionBar-toggledBackground: rgb(0 144 241 / 20%);
+      --vscode-editor-lineHighlightBorder: #eee;
+      --vscode-editor-rangeHighlightBackground: rgb(253 255 0 / 20%);
+      --vscode-editor-symbolHighlightBackground: rgb(234 92 0 / 33%);
+      --vscode-editorCursor-foreground: #000;
+      --vscode-editorWhitespace-foreground: rgb(51 51 51 / 20%);
+      --vscode-editorLineNumber-foreground: #237893;
+      --vscode-editorIndentGuide-background: rgb(51 51 51 / 20%);
+      --vscode-editorIndentGuide-activeBackground: rgb(51 51 51 / 20%);
+      --vscode-editorIndentGuide-background1: #d3d3d3;
+      --vscode-editorIndentGuide-background2: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-background3: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-background4: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-background5: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-background6: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-activeBackground1: #939393;
+      --vscode-editorIndentGuide-activeBackground2: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-activeBackground3: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-activeBackground4: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-activeBackground5: rgb(0 0 0 / 0%);
+      --vscode-editorIndentGuide-activeBackground6: rgb(0 0 0 / 0%);
+      --vscode-editorActiveLineNumber-foreground: #0b216f;
+      --vscode-editorLineNumber-activeForeground: #0b216f;
+      --vscode-editorRuler-foreground: #d3d3d3;
+      --vscode-editorCodeLens-foreground: #919191;
+      --vscode-editorBracketMatch-background: rgb(0 100 0 / 10%);
+      --vscode-editorBracketMatch-border: #b9b9b9;
+      --vscode-editorOverviewRuler-border: rgb(127 127 127 / 30%);
+      --vscode-editorGutter-background: #fffffe;
+      --vscode-editorUnnecessaryCode-opacity: rgb(0 0 0 / 47%);
+      --vscode-editorGhostText-foreground: rgb(0 0 0 / 47%);
+      --vscode-editorOverviewRuler-rangeHighlightForeground: rgb(0 122 204 / 60%);
+      --vscode-editorOverviewRuler-errorForeground: rgb(255 18 18 / 70%);
+      --vscode-editorOverviewRuler-warningForeground: #bf8803;
+      --vscode-editorOverviewRuler-infoForeground: #1a85ff;
+      --vscode-editorBracketHighlight-foreground1: #0431fa;
+      --vscode-editorBracketHighlight-foreground2: #319331;
+      --vscode-editorBracketHighlight-foreground3: #7b3814;
+      --vscode-editorBracketHighlight-foreground4: rgb(0 0 0 / 0%);
+      --vscode-editorBracketHighlight-foreground5: rgb(0 0 0 / 0%);
+      --vscode-editorBracketHighlight-foreground6: rgb(0 0 0 / 0%);
+      --vscode-editorBracketHighlight-unexpectedBracket-foreground: rgb(255 18 18 / 80%);
+      --vscode-editorBracketPairGuide-background1: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-background2: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-background3: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-background4: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-background5: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-background6: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-activeBackground1: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-activeBackground2: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-activeBackground3: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-activeBackground4: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-activeBackground5: rgb(0 0 0 / 0%);
+      --vscode-editorBracketPairGuide-activeBackground6: rgb(0 0 0 / 0%);
+      --vscode-editorUnicodeHighlight-border: #cea33d;
+      --vscode-editorUnicodeHighlight-background: rgb(206 163 61 / 8%);
+      --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
+      --vscode-editor-linkedEditingBackground: rgb(255 0 0 / 30%);
+      --vscode-editor-wordHighlightBackground: rgb(87 87 87 / 25%);
+      --vscode-editor-wordHighlightStrongBackground: rgb(14 99 156 / 25%);
+      --vscode-editor-wordHighlightTextBackground: rgb(87 87 87 / 25%);
+      --vscode-editorOverviewRuler-wordHighlightForeground: rgb(160 160 160 / 80%);
+      --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgb(192 160 192 / 80%);
+      --vscode-editorOverviewRuler-wordHighlightTextForeground: rgb(160 160 160 / 80%);
+      --vscode-peekViewTitle-background: #f3f3f3;
+      --vscode-peekViewTitleLabel-foreground: #000;
+      --vscode-peekViewTitleDescription-foreground: #616161;
+      --vscode-peekView-border: #1a85ff;
+      --vscode-peekViewResult-background: #f3f3f3;
+      --vscode-peekViewResult-lineForeground: #646465;
+      --vscode-peekViewResult-fileForeground: #1e1e1e;
+      --vscode-peekViewResult-selectionBackground: rgb(51 153 255 / 20%);
+      --vscode-peekViewResult-selectionForeground: #6c6c6c;
+      --vscode-peekViewEditor-background: #f2f8fc;
+      --vscode-peekViewEditorGutter-background: #f2f8fc;
+      --vscode-peekViewEditorStickyScroll-background: #f2f8fc;
+      --vscode-peekViewResult-matchHighlightBackground: rgb(234 92 0 / 30%);
+      --vscode-peekViewEditor-matchHighlightBackground: rgb(245 216 2 / 87%);
+      --vscode-editorMarkerNavigationError-background: #e51400;
+      --vscode-editorMarkerNavigationError-headerBackground: rgb(229 20 0 / 10%);
+      --vscode-editorMarkerNavigationWarning-background: #bf8803;
+      --vscode-editorMarkerNavigationWarning-headerBackground: rgb(191 136 3 / 10%);
+      --vscode-editorMarkerNavigationInfo-background: #1a85ff;
+      --vscode-editorMarkerNavigationInfo-headerBackground: rgb(26 133 255 / 10%);
+      --vscode-editorMarkerNavigation-background: #fffffe;
+      --vscode-editorHoverWidget-highlightForeground: #0066bf;
+      --vscode-editorSuggestWidget-background: #f3f3f3;
+      --vscode-editorSuggestWidget-border: #c8c8c8;
+      --vscode-editorSuggestWidget-foreground: #000;
+      --vscode-editorSuggestWidget-selectedForeground: #fff;
+      --vscode-editorSuggestWidget-selectedBackground: #0060c0;
+      --vscode-editorSuggestWidget-highlightForeground: #0066bf;
+      --vscode-editorSuggestWidget-focusHighlightForeground: #bbe7ff;
+      --vscode-editorSuggestWidgetStatus-foreground: rgb(0 0 0 / 50%);
+      --vscode-editor-foldBackground: rgb(173 214 255 / 30%);
+      --vscode-editorGutter-foldingControlForeground: #424242;
+
+      .mtk1,
+      .mtk9 {
+        color: #000;
+      }
+
+      .mtk2 {
+        color: #fffffe;
+      }
+
+      .mtk3 {
+        color: #808080;
+      }
+
+      .mtk4,
+      .mtk20 {
+        color: #a31515;
+      }
+
+      .mtk5 {
+        color: #0451a5;
+      }
+
+      .mtk6,
+      .mtk7 {
+        color: #098658;
+      }
+
+      .mtk8 {
+        color: #008000;
+      }
+
+      .mtk10 {
+        color: #383838;
+      }
+
+      .mtk11 {
+        color: #cd3131;
+      }
+
+      .mtk12 {
+        color: #863b00;
+      }
+
+      .mtk13 {
+        color: #af00db;
+      }
+
+      .mtk14 {
+        color: #800000;
+      }
+
+      .mtk15 {
+        color: #e00000;
+      }
+
+      .mtk16 {
+        color: #3030c0;
+      }
+
+      .mtk17 {
+        color: #666;
+      }
+
+      .mtk18 {
+        color: #789;
+      }
+
+      .mtk19 {
+        color: #c700c7;
+      }
+
+      .mtk21 {
+        color: #4f76ac;
+      }
+
+      .mtk22 {
+        color: #008080;
+      }
+
+      .mtk23 {
+        color: #018;
+      }
+
+      .mtk24 {
+        color: #4864aa;
+      }
+
+      .inputarea.ime-input {
+        color: #000 !important;
+        background-color: #fffffe !important;
+      }
+
+      .view-overlays .current-line {
+        border: 2px solid #eee;
+      }
+
+      .margin-view-overlays .current-line-margin {
+        border: 2px solid #eee;
+      }
+
+      .bracket-indent-guide.lvl-0,
+      .bracket-indent-guide.lvl-3,
+      .bracket-indent-guide.lvl-6,
+      .bracket-indent-guide.lvl-9 {
+        --guide-color: rgb(4 49 250 / 30%);
+        --guide-color-active: #0431fa;
+      }
+
+      .bracket-indent-guide.lvl-1,
+      .bracket-indent-guide.lvl-4,
+      .bracket-indent-guide.lvl-7,
+      .bracket-indent-guide.lvl-10 {
+        --guide-color: rgb(49 147 49 / 30%);
+        --guide-color-active: #319331;
+      }
+
+      .bracket-indent-guide.lvl-2,
+      .bracket-indent-guide.lvl-5,
+      .bracket-indent-guide.lvl-8,
+      .bracket-indent-guide.lvl-11 {
+        --guide-color: rgb(123 56 20 / 30%);
+        --guide-color-active: #7b3814;
+      }
+
+      .lines-content .core-guide.core-guide-indent[class*="lvl-"] {
+        --indent-color: #d3d3d3;
+        --indent-color-active: #939393;
+      }
+
+      .lines-content .core-guide-indent {
+        box-shadow: 1px 0 0 0 var(--indent-color) inset;
+      }
+
+      .lines-content .core-guide-indent.indent-active {
+        box-shadow: 1px 0 0 0 var(--indent-color-active) inset;
+      }
+
+      .line-numbers.dimmed-line-number {
+        color: rgb(35 120 147 / 40%);
+      }
+
+      .cursors-layer .cursor {
+        color: #fff;
+        background-color: #000;
+        border-color: #000;
+      }
+
+      .bracket-highlighting-0,
+      .bracket-highlighting-3,
+      .bracket-highlighting-6,
+      .bracket-highlighting-9,
+      .bracket-highlighting-12 {
+        color: #0431fa;
+      }
+
+      .bracket-highlighting-1,
+      .bracket-highlighting-4,
+      .bracket-highlighting-7,
+      .bracket-highlighting-10,
+      .bracket-highlighting-13 {
+        color: #319331;
+      }
+
+      .bracket-highlighting-2,
+      .bracket-highlighting-5,
+      .bracket-highlighting-8,
+      .bracket-highlighting-11,
+      .bracket-highlighting-14 {
+        color: #7b3814;
+      }
+
+      .squiggly-error {
+        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23e51400'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
+      }
+
+      .squiggly-warning {
+        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23bf8803'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
+      }
+
+      .squiggly-info {
+        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%231a85ff'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
+      }
+
+      .squiggly-hint {
+        background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%223%22%20width%3D%2212%22%3E%3Cg%20fill%3D%22%236c6c6c%22%3E%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat bottom left;
+      }
+
+      .showUnused .squiggly-inline-unnecessary {
+        opacity: 0.467;
+      }
+
+      .selectionHighlight {
+        background-color: rgb(173 214 255 / 15%);
+      }
+
+      .diagonal-fill {
+        background-image: linear-gradient(-45deg,
+            rgb(34 34 34 / 20%) 12.5%,
+            #0000 12.5%, #0000 50%,
+            rgb(34 34 34 / 20%) 50%, rgb(34 34 34 / 20%) 62.5%,
+            #0000 62.5%, #0000 100%);
+        background-size: 8px 8px;
+      }
+
+      .findMatch {
+        background-color: rgb(234 92 0 / 33%);
+      }
+
+      .currentFindMatch {
+        background-color: #a8ac94;
+      }
+
+      .findScope {
+        background-color: rgb(180 180 180 / 30%);
+      }
+
+      .find-widget {
+        color: #616161;
+        background-color: #f3f3f3;
+        border: none;
+        box-shadow: 0 0 8px 2px rgb(0 0 0 / 16%);
+      }
+
+      .find-widget.no-results .matchesCount {
+        color: #a1260d;
+      }
+
+      .find-widget .monaco-sash {
+        background-color: #c8c8c8;
+      }
+
+      .find-widget .button:not(.disabled):hover,
+      .find-widget .codicon-find-selection:hover {
+        background-color: rgb(184 184 184 / 31%) !important;
+      }
+
+      .find-widget .monaco-inputbox.synthetic-focus {
+        outline-color: #0090f1;
+      }
+
+      .monaco-hover .hover-row:not(:first-child, :empty) {
+        border-top: 1px solid rgb(200 200 200 / 50%);
+      }
+
+      .monaco-hover hr {
+        border-top: 1px solid rgb(200 200 200 / 50%);
+        border-bottom: 0 solid rgb(200 200 200 / 50%);
+      }
+
+      .marker-widget {
+        background-color: rgb(255 255 254) !important;
+      }
+
+      .peekview-title .filename {
+        color: rgb(0 0 0) !important;
+      }
+
+      .peekview-title .dirname {
+        color: rgb(97 97 97) !important;
+      }
+    }
+  }
+}

frontend/packages/studio/mockset-editor/src/index.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export {
+  type MockDataEditorMarkerInfo,
+  type MockDataEditorProps,
+  type EditorActions,
+  MockDataEditor,
+} from './components/mockset-editor';

frontend/packages/studio/mockset-editor/src/typings.d.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+/// <reference types='@coze-arch/bot-typings' />

frontend/packages/studio/mockset-editor/tsconfig.build.json

@@ -0,0 +1,42 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler",
+    "tsBuildInfoFile": "dist/tsconfig.build.tsbuildinfo"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    {
+      "path": "../../arch/bot-monaco-editor/tsconfig.build.json"
+    },
+    {
+      "path": "../../arch/bot-typings/tsconfig.build.json"
+    },
+    {
+      "path": "../../components/bot-semi/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/eslint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/stylelint-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/ts-config/tsconfig.build.json"
+    },
+    {
+      "path": "../../../config/vitest-config/tsconfig.build.json"
+    },
+    {
+      "path": "../mockset-shared/tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/studio/mockset-editor/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "exclude": ["**/*"],
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.misc.json"
+    }
+  ]
+}

frontend/packages/studio/mockset-editor/tsconfig.misc.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@coze-arch/ts-config/tsconfig.web.json",
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "./dist",
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ESNext"],
+    "module": "ESNext",
+    "target": "ES2020",
+    "moduleResolution": "bundler"
+  },
+  "include": ["__tests__", "vitest.config.ts", "stories"],
+  "exclude": ["./dist"],
+  "references": [
+    {
+      "path": "./tsconfig.build.json"
+    }
+  ]
+}

frontend/packages/studio/mockset-editor/vitest.config.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { defineConfig } from '@coze-arch/vitest-config';
+
+export default defineConfig({
+  dirname: __dirname,
+  preset: 'web',
+});