dumi 2.0.0-beta.15 → 2.0.0-beta.16

package/dist/client/theme-api/types.d.ts

@@ -78,6 +78,8 @@ export interface IRouteMeta {
             cols?: number;
             tocDepth?: number;
         };
+        atomId?: string;
+        [key: string]: any;
     };
     toc: {
         id: string;
@@ -110,7 +112,6 @@ export interface IRouteMeta {
             [key: string]: any;
         };
     }[];
-    [key: string]: any;
 }
 declare type IBasicLocale = {
     id: string;

package/dist/constants.d.ts

@@ -11,3 +11,4 @@ export declare const PICKED_PKG_FIELDS: {
     author: string;
     authors: string;
 };
+export declare const CLIENT_DEPS: string[];

package/dist/constants.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/constants.ts
 var constants_exports = {};
 __export(constants_exports, {
+  CLIENT_DEPS: () => CLIENT_DEPS,
   LOCAL_DUMI_DIR: () => LOCAL_DUMI_DIR,
   LOCAL_THEME_DIR: () => LOCAL_THEME_DIR,
   PICKED_PKG_FIELDS: () => PICKED_PKG_FIELDS,
@@ -39,8 +40,22 @@ var PICKED_PKG_FIELDS = {
   author: "",
   authors: ""
 };
+var CLIENT_DEPS = [
+  "@ant-design/icons-svg",
+  "@makotot/ghostui",
+  "deepmerge",
+  "highlight-words-core",
+  "lodash.throttle",
+  "prism-react-renderer",
+  "prismjs",
+  "rc-tabs",
+  "react-copy-to-clipboard",
+  "react-helmet",
+  "react-intl"
+];
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CLIENT_DEPS,
   LOCAL_DUMI_DIR,
   LOCAL_THEME_DIR,
   PICKED_PKG_FIELDS,

package/dist/features/assets.d.ts

@@ -1,10 +1,14 @@
 import type { IApi } from "../types";
-import type { ExampleAsset } from 'dumi-assets-types';
+import type { AtomAsset, ExampleAsset } from 'dumi-assets-types';
 declare const examples: ExampleAsset[];
 /**
  * internal function to add example assets
  */
 export declare function addExampleAssets(data: typeof examples): void;
+/**
+ * internal function to add meta for atom
+ */
+export declare function addAtomMeta(atomId: string, data: Partial<AtomAsset>): void;
 /**
  * plugin for generate assets.json
  */

package/dist/features/assets.js

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/features/assets.ts
 var assets_exports = {};
 __export(assets_exports, {
+  addAtomMeta: () => addAtomMeta,
   addExampleAssets: () => addExampleAssets,
   default: () => assets_default
 });
@@ -30,9 +31,13 @@ var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 var examples = [];
+var atomsMeta = {};
 function addExampleAssets(data) {
   examples.push(...data);
 }
+function addAtomMeta(atomId, data) {
+  atomsMeta[atomId] = import_plugin_utils.lodash.pick(data, ["title", "keywords", "deprecated"]);
+}
 var assets_default = (api) => {
   api.describe({
     config: {
@@ -53,7 +58,7 @@ var assets_default = (api) => {
         homepage: api.pkg.homepage,
         repository: api.pkg.repository,
         assets: {
-          atoms: Object.values(components),
+          atoms: Object.values(components).map((atom) => Object.assign(atom, atomsMeta[atom.id] || {})),
           examples: import_plugin_utils.lodash.uniqBy(examples, "id")
         }
       }
@@ -63,5 +68,6 @@ var assets_default = (api) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  addAtomMeta,
   addExampleAssets
 });

package/dist/features/autoAlias.d.ts

@@ -0,0 +1,3 @@
+import type { IApi } from "../types";
+declare const _default: (api: IApi) => void;
+export default _default;

package/dist/features/autoAlias.js

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/features/autoAlias.ts
+var autoAlias_exports = {};
+__export(autoAlias_exports, {
+  default: () => autoAlias_default
+});
+module.exports = __toCommonJS(autoAlias_exports);
+var import_utils = require("../utils");
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var autoAlias_default = (api) => {
+  api.describe({
+    key: "autoAlias",
+    config: {
+      schema: (Joi) => Joi.bool()
+    },
+    enableBy: ({ userConfig }) => userConfig.autoAlias !== false
+  });
+  api.modifyDefaultConfig(async (memo) => {
+    var _a;
+    let entryDir = "";
+    if ((_a = api.userConfig.resolve) == null ? void 0 : _a.entryFile) {
+      entryDir = import_path.default.resolve(api.cwd, api.userConfig.resolve.entryFile);
+    } else if (import_fs.default.existsSync(import_path.default.join(api.cwd, "src"))) {
+      entryDir = import_path.default.join(api.cwd, "src");
+    }
+    if (entryDir && api.pkg.name) {
+      const fatherConfigs = await (0, import_utils.tryFatherBuildConfigs)(api.cwd);
+      fatherConfigs.sort((a, b) => {
+        var _a2, _b;
+        const aLevel = (((_a2 = a.output) == null ? void 0 : _a2.path) || a.output).split("/").length;
+        const bLevel = (((_b = b.output) == null ? void 0 : _b.path) || b.output).split("/").length;
+        return bLevel - aLevel;
+      });
+      fatherConfigs.forEach((item) => {
+        var _a2;
+        memo.alias[`${api.pkg.name}/${((_a2 = item.output) == null ? void 0 : _a2.path) || item.output}`] = import_path.default.join(api.cwd, item.entry || item.input);
+      });
+      memo.alias[api.pkg.name] = entryDir;
+    }
+    return memo;
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/features/compile.js

@@ -44,7 +44,7 @@ var compile_default = (api) => {
       techStacks,
       cwd: api.cwd,
       alias: api.config.alias,
-      codeBlockMode: api.config.resolve.codeBlockMode,
+      resolve: api.config.resolve,
       extraRemarkPlugins: api.config.extraRemarkPlugins,
       extraRehypePlugins: api.config.extraRehypePlugins
     };
@@ -58,7 +58,8 @@ var compile_default = (api) => {
           return ret;
         }, []);
         (0, import_assets.addExampleAssets)(assets);
-      }
+      },
+      onResolveAtomMeta: import_assets.addAtomMeta
     }).end().end().oneOf("md").use("babel-loader").loader(babelInUmi.loader).options(babelInUmi.options).end().use("md-loader").loader(loaderPath).options({
       ...loaderBaseOpts,
       builtins: api.service.themeData.builtins

package/dist/features/derivative.js

@@ -27,11 +27,14 @@ __export(derivative_exports, {
 });
 module.exports = __toCommonJS(derivative_exports);
 var import_constants = require("../constants");
+var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
 function safeExcludeInMFSU(api, excludes) {
   if (api.userConfig.mfsu !== false) {
     api.modifyDefaultConfig((memo) => {
+      if (memo.mfsu === false)
+        return memo;
       memo.mfsu ?? (memo.mfsu = {});
       memo.mfsu.exclude = (0, import_plugin_utils.deepmerge)(memo.mfsu.exclude || [], excludes);
       memo.extraBabelIncludes ?? (memo.extraBabelIncludes = []);
@@ -55,8 +58,17 @@ var derivative_default = (api) => {
   safeExcludeInMFSU(api, [new RegExp("dumi/dist/client")]);
   api.modifyDefaultConfig((memo) => {
     if (api.userConfig.mfsu !== false) {
-      memo.mfsu.strategy = "normal";
+      if (import_fs.default.existsSync(import_path.default.join(api.cwd, "node_modules", ".pnpm"))) {
+        memo.mfsu = false;
+      } else {
+        memo.mfsu.strategy = "normal";
+        import_constants.CLIENT_DEPS.forEach((pkg) => {
+          memo.alias ?? (memo.alias = {});
+          memo.alias[pkg] = (0, import_plugin_utils.winPath)(import_path.default.dirname(require.resolve(`${pkg}/package.json`)));
+        });
+      }
     }
+    memo.hash = true;
     return memo;
   });
   api.modifyAppData((memo) => {

package/dist/loaders/markdown/index.d.ts

@@ -7,6 +7,7 @@ interface IMdLoaderDefaultModeOptions extends Omit<IMdTransformerOptions, 'fileA
 interface IMdLoaderDemosModeOptions extends Omit<IMdLoaderDefaultModeOptions, 'builtins' | 'mode'> {
     mode: 'meta';
     onResolveDemos?: (demos: NonNullable<IMdTransformerResult['meta']['demos']>) => void;
+    onResolveAtomMeta?: (atomId: string, meta: IMdTransformerResult['meta']['frontmatter']) => void;
 }
 export declare type IMdLoaderOptions = IMdLoaderDefaultModeOptions | IMdLoaderDemosModeOptions;
 export default function mdLoader(this: any, content: string): void;

package/dist/loaders/markdown/index.js

@@ -38,6 +38,9 @@ function emit(opts, ret) {
     if (demos && opts.onResolveDemos) {
       opts.onResolveDemos(demos);
     }
+    if (frontmatter.atomId && opts.onResolveAtomMeta) {
+      opts.onResolveAtomMeta(frontmatter.atomId, frontmatter);
+    }
     return import_plugin_utils.Mustache.render(`import React from 'react';
 
 export const demos = {

package/dist/loaders/markdown/transformer/index.d.ts

@@ -37,7 +37,7 @@ export interface IMdTransformerOptions {
     alias: object;
     parentAbsPath?: string;
     techStacks: IDumiTechStack[];
-    codeBlockMode: IDumiConfig['resolve']['codeBlockMode'];
+    resolve: IDumiConfig['resolve'];
     extraRemarkPlugins?: IDumiConfig['extraRemarkPlugins'];
     extraRehypePlugins?: IDumiConfig['extraRehypePlugins'];
 }

package/dist/loaders/markdown/transformer/index.js

@@ -57,7 +57,11 @@ var transformer_default = async (raw, opts) => {
     extensions: [".js", ".jsx", ".ts", ".tsx"],
     alias: opts.alias
   });
-  const processor = unified().use(remarkParse).use(import_remarkEmbed.default, { fileAbsPath: opts.fileAbsPath, alias: opts.alias }).use(remarkFrontmatter).use(import_remarkMeta.default, { fileAbsPath: opts.fileAbsPath }).use(remarkBreaks).use(remarkGfm);
+  const processor = unified().use(remarkParse).use(import_remarkEmbed.default, { fileAbsPath: opts.fileAbsPath, alias: opts.alias }).use(remarkFrontmatter).use(import_remarkMeta.default, {
+    cwd: opts.cwd,
+    fileAbsPath: opts.fileAbsPath,
+    resolve: opts.resolve
+  }).use(remarkBreaks).use(remarkGfm);
   (_a = opts.extraRemarkPlugins) == null ? void 0 : _a.forEach((plugin) => applyUnifiedPlugin({
     plugin,
     processor,
@@ -67,7 +71,7 @@ var transformer_default = async (raw, opts) => {
     techStacks: opts.techStacks,
     cwd: opts.cwd,
     fileAbsPath: opts.fileAbsPath,
-    codeBlockMode: opts.codeBlockMode,
+    resolve: opts.resolve,
     resolver
   }).use(import_rehypeSlug.default).use(rehypeAutolinkHeadings).use(import_rehypeIsolation.default).use(import_rehypeEnhancedTag.default).use(import_rehypeText.default);
   (_b = opts.extraRehypePlugins) == null ? void 0 : _b.forEach((plugin) => applyUnifiedPlugin({

package/dist/loaders/markdown/transformer/rehypeDemo.d.ts

@@ -5,7 +5,7 @@ import type { IMdTransformerOptions } from '.';
 export declare const DEMO_PROP_VALUE_KEY = "$demo-prop-value-key";
 export declare const DUMI_DEMO_TAG = "DumiDemo";
 export declare const DUMI_DEMO_GRID_TAG = "DumiDemoGrid";
-declare type IRehypeDemoOptions = Pick<IMdTransformerOptions, 'techStacks' | 'cwd' | 'fileAbsPath' | 'codeBlockMode'> & {
+declare type IRehypeDemoOptions = Pick<IMdTransformerOptions, 'techStacks' | 'cwd' | 'fileAbsPath' | 'resolve'> & {
     resolver: typeof sync;
 };
 export default function rehypeDemo(opts: IRehypeDemoOptions): Transformer<Root>;

package/dist/loaders/markdown/transformer/rehypeDemo.js

@@ -51,7 +51,7 @@ function getCodeLang(node, opts) {
   if (typeof ((_a = node.properties) == null ? void 0 : _a.src) === "string") {
     node.properties.src = opts.resolver(import_path.default.dirname(opts.fileAbsPath), node.properties.src);
     lang = import_path.default.extname(node.properties.src).slice(1);
-  } else if (Array.isArray((_b = node.properties) == null ? void 0 : _b.className) && (opts.codeBlockMode === "passive" ? / demo/.test(String((_c = node.data) == null ? void 0 : _c.meta)) : !/ pure/.test(String((_d = node.data) == null ? void 0 : _d.meta)))) {
+  } else if (Array.isArray((_b = node.properties) == null ? void 0 : _b.className) && (opts.resolve.codeBlockMode === "passive" ? / demo/.test(String((_c = node.data) == null ? void 0 : _c.meta)) : !/ pure/.test(String((_d = node.data) == null ? void 0 : _d.meta)))) {
     lang = String(node.properties.className[0]).replace("language-", "");
   }
   return lang;
@@ -131,7 +131,7 @@ function rehypeDemo(opts) {
             const codeValue = toString(codeNode).trim();
             const parseOpts = {
               id: "",
-              refAtomIds: [],
+              refAtomIds: vFile.data.frontmatter.atomId ? [vFile.data.frontmatter.atomId] : [],
               fileAbsPath: "",
               entryPointCode: codeType === "external" ? void 0 : codeValue,
               resolver: opts.resolver

package/dist/loaders/markdown/transformer/remarkMeta.d.ts

@@ -1,5 +1,6 @@
 import type { Root } from 'mdast';
 import type { Transformer } from 'unified';
-export default function remarkMeta(opts: {
-    fileAbsPath: string;
-}): Transformer<Root>;
+import type { IMdTransformerOptions } from '.';
+declare type IRemarkMetaOpts = Pick<IMdTransformerOptions, 'cwd' | 'fileAbsPath' | 'resolve'>;
+export default function remarkMeta(opts: IRemarkMetaOpts): Transformer<Root>;
+export {};

package/dist/loaders/markdown/transformer/remarkMeta.js

@@ -26,6 +26,7 @@ __export(remarkMeta_exports, {
 });
 module.exports = __toCommonJS(remarkMeta_exports);
 var import_tabs = require("../../../features/tabs");
+var import_fs = __toESM(require("fs"));
 var import_js_yaml = __toESM(require("js-yaml"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
@@ -35,12 +36,27 @@ var toString;
   ({ visit } = await import("unist-util-visit"));
   ({ toString } = await import("mdast-util-to-string"));
 })();
+function getGuessAtomId(opts) {
+  const parsed = import_path.default.parse(opts.fileAbsPath);
+  const clearFileName = parsed.name.replace(/(?:\.$tab-[^.]+)?(?:\.[^.]+)?(\.[^.]+)$/, "$1");
+  const atomFile = [".tsx", ".jsx"].map((ext) => import_path.default.join(parsed.dir, `${clearFileName}${ext}`)).find(import_fs.default.existsSync);
+  if (atomFile) {
+    const atomAbsDir = opts.resolve.atomDirs.map(({ dir }) => import_path.default.resolve(opts.cwd, dir)).sort((a, b) => b.split("/").length - a.split("/").length).find((dir) => atomFile.startsWith(dir));
+    if (atomAbsDir) {
+      return import_path.default.relative(atomAbsDir, atomFile).replace(/((^|\/)index)?\.\w+$/, "");
+    }
+  }
+}
 function remarkMeta(opts) {
   return (tree, vFile) => {
-    vFile.data.frontmatter = { title: "" };
+    const guessAtomId = getGuessAtomId(opts);
+    vFile.data.frontmatter = {
+      title: "",
+      ...guessAtomId && { atomId: guessAtomId }
+    };
     visit(tree, "yaml", (node) => {
       try {
-        vFile.data.frontmatter = import_js_yaml.default.load(node.value);
+        Object.assign(vFile.data.frontmatter, import_js_yaml.default.load(node.value));
       } catch {
       }
     });

package/dist/preset.js

@@ -44,6 +44,7 @@ var preset_default = (api) => {
     plugins: [
       require.resolve("./registerMethods"),
       require.resolve("./features/configPlugins"),
+      require.resolve("./features/autoAlias"),
       require.resolve("./features/derivative"),
       require.resolve("./features/sideEffects"),
       require.resolve("./features/exports"),

package/dist/types.d.ts

@@ -30,6 +30,7 @@ export interface IDumiConfig extends IUmiConfig {
     };
     locales: ILocalesConfig;
     themeConfig: IThemeConfig;
+    autoAlias?: boolean;
     /**
      * extra unified plugins
      */

package/dist/utils.d.ts

@@ -26,4 +26,8 @@ export declare function parseCodeFrontmatter(raw: string): {
  */
 declare const caches: Record<string, ReturnType<typeof Cache>>;
 export declare function getCache(ns: string): typeof caches['0'];
+/**
+ * try to get father config
+ */
+export declare function tryFatherBuildConfigs(cwd: string): Promise<any[]>;
 export {};

package/dist/utils.js

@@ -26,7 +26,8 @@ __export(utils_exports, {
   getFileContentByRegExp: () => getFileContentByRegExp,
   getFileRangeLines: () => getFileRangeLines,
   getRoutePathFromFsPath: () => getRoutePathFromFsPath,
-  parseCodeFrontmatter: () => parseCodeFrontmatter
+  parseCodeFrontmatter: () => parseCodeFrontmatter,
+  tryFatherBuildConfigs: () => tryFatherBuildConfigs
 });
 module.exports = __toCommonJS(utils_exports);
 var import_file_system_cache = __toESM(require("file-system-cache"));
@@ -78,11 +79,34 @@ function getCache(ns) {
   }
   return caches[ns] ?? (caches[ns] = (0, import_file_system_cache.default)({ basePath: import_path.default.join(CACHE_PATH, ns) }));
 }
+async function tryFatherBuildConfigs(cwd) {
+  let configs = [];
+  const APP_ROOT = process.env.APP_ROOT;
+  process.env.APP_ROOT = cwd;
+  try {
+    const { Service: FatherSvc } = await import("father/dist/service/service.js");
+    const { normalizeUserConfig: getBuildConfig } = await import("father/dist/builder/config.js");
+    const svc = new FatherSvc();
+    svc.commands.empty = {
+      name: "empty",
+      fn() {
+      },
+      configResolveMode: "loose",
+      plugin: { id: "empty" }
+    };
+    await svc.run({ name: "empty" });
+    configs = getBuildConfig(svc.config, svc.pkg);
+  } catch {
+  }
+  process.env.APP_ROOT = APP_ROOT;
+  return configs;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getCache,
   getFileContentByRegExp,
   getFileRangeLines,
   getRoutePathFromFsPath,
-  parseCodeFrontmatter
+  parseCodeFrontmatter,
+  tryFatherBuildConfigs
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.0-beta.15",
+  "version": "2.0.0-beta.16",
   "description": "Framework for developing UI components",
   "keywords": [],
   "license": "MIT",

package/theme-default/builtins/Previewer/index.js

@@ -1,78 +1,14 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-import { ReactComponent as IconCodeSandbox } from '@ant-design/icons-svg/inline-svg/outlined/code-sandbox.svg';
-import { ReactComponent as IconCodePen } from '@ant-design/icons-svg/inline-svg/outlined/codepen.svg';
-import { useIntl, useLocation } from 'dumi';
-import SourceCode from 'dumi/theme/builtins/SourceCode';
-import Tabs from 'rc-tabs';
-import React, { useState } from 'react';
+import { useLocation } from 'dumi';
+import PreviewerActions from 'dumi/theme/slots/PreviewerActions';
+import React from 'react';
 import "./index.less";
 
-var IconCode = function IconCode() {
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 200 117"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Zm-75.938-45c-4.062-1.563-9.062.937-10.937 5l-34.063 95c-1.562 4.062.938 9.062 5 10.937.938 0 1.563.938 2.5.938 3.438 0 6.563-2.5 7.5-5.938l35-95.937c1.563-4.063-.937-9.063-5-10Z"
-  }));
-};
-
-var IconCodeExpand = function IconCodeExpand() {
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 200 117"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Z"
-  }));
-};
-
-var IconExternalLink = function IconExternalLink() {
-  return /*#__PURE__*/React.createElement("svg", {
-    viewBox: "0 0 1024 1024"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"
-  }));
-};
-
 var Previewer = function Previewer(props) {
-  var _files$activeKey$0$ma;
-
-  var intl = useIntl();
-
   var _useLocation = useLocation(),
       hash = _useLocation.hash;
 
-  var files = Object.entries(props.asset.dependencies).filter(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        type = _ref2[1].type;
-
-    return type === 'FILE';
-  });
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      activeKey = _useState2[0],
-      setActiveKey = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showCode = _useState4[0],
-      setShowCode = _useState4[1];
-
-  var isSingleFile = files.length === 1;
-  var lang = ((_files$activeKey$0$ma = files[activeKey][0].match(/\.([^.]+)$/)) === null || _files$activeKey$0$ma === void 0 ? void 0 : _files$activeKey$0$ma[1]) || 'text';
   var link = "#".concat(props.asset.id);
   return /*#__PURE__*/React.createElement("div", {
     id: props.asset.id,
@@ -103,61 +39,7 @@ var Previewer = function Previewer(props) {
     dangerouslySetInnerHTML: {
       __html: props.description
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "dumi-default-previewer-actions"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "dumi-default-previewer-action-btn",
-    type: "button",
-    "data-dumi-tooltip": intl.formatMessage({
-      id: 'previewer.actions.codesandbox'
-    })
-  }, /*#__PURE__*/React.createElement(IconCodeSandbox, null)), /*#__PURE__*/React.createElement("button", {
-    className: "dumi-default-previewer-action-btn",
-    type: "button",
-    "data-dumi-tooltip": intl.formatMessage({
-      id: 'previewer.actions.codepen'
-    })
-  }, /*#__PURE__*/React.createElement(IconCodePen, null)), /*#__PURE__*/React.createElement("a", {
-    target: "_blank",
-    rel: "noreferrer",
-    href: props.demoUrl,
-    className: "dumi-default-previewer-action-btn",
-    "data-dumi-tooltip": intl.formatMessage({
-      id: 'previewer.actions.separate'
-    })
-  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement("button", {
-    className: "dumi-default-previewer-action-btn",
-    type: "button",
-    onClick: function onClick() {
-      return setShowCode(function (prev) {
-        return !prev;
-      });
-    },
-    "data-dumi-tooltip": intl.formatMessage({
-      id: "previewer.actions.code.".concat(showCode ? 'shrink' : 'expand')
-    })
-  }, showCode ? /*#__PURE__*/React.createElement(IconCodeExpand, null) : /*#__PURE__*/React.createElement(IconCode, null))), showCode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "dumi-default-previewer-sources"
-  }, !isSingleFile && /*#__PURE__*/React.createElement(Tabs, {
-    className: "dumi-default-previewer-tabs",
-    prefixCls: "dumi-default-tabs",
-    moreIcon: "\xB7\xB7\xB7",
-    defaultActiveKey: String(activeKey),
-    onChange: function onChange(key) {
-      return setActiveKey(Number(key));
-    },
-    items: files.map(function (_ref3, i) {
-      var _ref4 = _slicedToArray(_ref3, 1),
-          filename = _ref4[0];
-
-      return {
-        key: String(i),
-        label: filename
-      };
-    })
-  })), /*#__PURE__*/React.createElement(SourceCode, {
-    lang: lang
-  }, files[activeKey][1].value))));
+  })), /*#__PURE__*/React.createElement(PreviewerActions, props)));
 };
 
 export default Previewer;

package/theme-default/builtins/Previewer/index.less

@@ -1,5 +1,4 @@
 @import (reference) '../../styles/variables.less';
-@import '../../styles/utils.less';
 
 .@{prefix}-previewer {
   margin: 24px 0 32px;
@@ -116,59 +115,6 @@
       }
     }
   }
-
-  &-actions {
-    display: flex;
-    height: 32px;
-    align-items: center;
-    justify-content: center;
-
-    &:not(:last-child) {
-      border-bottom: 1px dashed @c-border-light;
-    }
-  }
-
-  &-action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-
-    > svg {
-      width: 16px;
-      fill: darken(@c-border, 20%);
-      transition: fill 0.2s;
-    }
-
-    &:hover > svg {
-      fill: darken(@c-border, 30%);
-    }
-
-    &:not(:last-child) {
-      margin-right: 4px;
-    }
-  }
-
-  &-tabs {
-    position: relative;
-    padding: 0 12px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 0;
-      border-bottom: 1px dashed @c-border-light;
-    }
-  }
-
   // active
   &[data-active] {
     box-shadow: 0 0 0 4px fade(@c-primary, 10%);
@@ -184,114 +130,3 @@
     }
   }
 }
-
-.@{prefix}-tabs {
-  overflow: hidden;
-
-  &-top {
-    flex-direction: column;
-
-    .@{prefix}-tabs-ink-bar {
-      bottom: 0;
-    }
-  }
-
-  &-nav {
-    display: flex;
-
-    &-wrap {
-      display: flex;
-      white-space: nowrap;
-      overflow: hidden;
-
-      &&-ping-left {
-        box-shadow: 5px 0 5px -5px rgb(0 0 0 / 10%) inset;
-      }
-
-      &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
-        box-shadow: 0 0 5px rgb(0 0 0 / 10%);
-      }
-    }
-
-    &-list {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      transition: transform 0.2s;
-    }
-
-    &-more {
-      height: 100%;
-      cursor: pointer;
-      background: none;
-      border: 0;
-      transition: box-shadow 0.2s;
-    }
-  }
-
-  &-tab {
-    display: flex;
-    margin: 0 12px;
-
-    &-btn {
-      padding: 0;
-      color: @c-text-secondary;
-      font-size: 14px;
-      line-height: 36px;
-      border: 0;
-      outline: none;
-      background: transparent;
-      box-sizing: border-box;
-      cursor: pointer;
-      transition: all 0.2s;
-
-      &:hover {
-        color: @c-text;
-      }
-    }
-
-    &-active &-btn {
-      color: @c-text;
-    }
-  }
-
-  &-ink-bar {
-    position: absolute;
-    height: 1px;
-    background: @c-primary;
-    transition: left 0.2s, width 0.2s;
-    pointer-events: none;
-  }
-
-  &-dropdown {
-    position: absolute;
-    background: #fff;
-    border: 1px solid @c-border;
-    max-height: 200px;
-    overflow: auto;
-
-    > ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      > li {
-        padding: 4px 12px;
-        font-size: 14px;
-        cursor: pointer;
-
-        &:hover {
-          color: @c-primary;
-        }
-
-        &:not(:last-child) {
-          border-bottom: 1px dashed @c-border;
-        }
-      }
-    }
-
-    &-hidden {
-      display: none;
-    }
-  }
-}

package/theme-default/slots/PreviewerActions/index.d.ts

@@ -0,0 +1,11 @@
+import { type IPreviewerProps } from 'dumi';
+import { type FC } from 'react';
+import './index.less';
+export interface IPreviewerActionsProps extends IPreviewerProps {
+    /**
+     * disabled actions
+     */
+    disabledActions?: ('CSB' | 'CODEPEN' | 'EXTERNAL')[];
+}
+declare const PreviewerActions: FC<IPreviewerActionsProps>;
+export default PreviewerActions;

package/theme-default/slots/PreviewerActions/index.js

@@ -0,0 +1,128 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import { ReactComponent as IconCodeSandbox } from '@ant-design/icons-svg/inline-svg/outlined/code-sandbox.svg';
+import { ReactComponent as IconCodePen } from '@ant-design/icons-svg/inline-svg/outlined/codepen.svg';
+import { useIntl } from 'dumi';
+import SourceCode from 'dumi/theme/builtins/SourceCode';
+import PreviewerActionsExtra from 'dumi/theme/slots/PreviewerActionsExtra';
+import Tabs from 'rc-tabs';
+import React, { useState } from 'react';
+import "./index.less";
+
+var IconCode = function IconCode() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 200 117"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Zm-75.938-45c-4.062-1.563-9.062.937-10.937 5l-34.063 95c-1.562 4.062.938 9.062 5 10.937.938 0 1.563.938 2.5.938 3.438 0 6.563-2.5 7.5-5.938l35-95.937c1.563-4.063-.937-9.063-5-10Z"
+  }));
+};
+
+var IconCodeExpand = function IconCodeExpand() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 200 117"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M59.688 2.578c-3.438-3.437-8.438-3.437-11.563 0L3.75 48.516c-5 5.937-5 14.062 0 19.062l44.063 45.938c1.562 1.562 4.062 2.5 5.937 2.5s4.063-.938 5.938-2.5c3.437-3.438 3.437-8.438 0-11.563l-42.5-43.437 42.5-44.063c3.437-3.437 3.437-8.437 0-11.875Zm135.937 45.938L151.25 2.578c-3.438-3.437-8.438-3.437-11.563 0-3.125 3.438-3.437 8.438 0 11.563l42.5 44.375-42.5 44.062c-3.437 3.438-3.437 8.438 0 11.563 1.563 1.562 3.438 2.5 5.938 2.5 2.5 0 4.063-.938 5.938-2.5l44.062-45.938c5.625-5.625 5.625-13.75 0-19.687Z"
+  }));
+};
+
+var IconExternalLink = function IconExternalLink() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"
+  }));
+};
+
+var PreviewerActions = function PreviewerActions(props) {
+  var _files$activeKey$0$ma, _props$disabledAction, _props$disabledAction2, _props$disabledAction3;
+
+  var intl = useIntl();
+  var files = Object.entries(props.asset.dependencies).filter(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        type = _ref2[1].type;
+
+    return type === 'FILE';
+  });
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeKey = _useState2[0],
+      setActiveKey = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showCode = _useState4[0],
+      setShowCode = _useState4[1];
+
+  var isSingleFile = files.length === 1;
+  var lang = ((_files$activeKey$0$ma = files[activeKey][0].match(/\.([^.]+)$/)) === null || _files$activeKey$0$ma === void 0 ? void 0 : _files$activeKey$0$ma[1]) || 'text';
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-actions"
+  }, !((_props$disabledAction = props.disabledActions) !== null && _props$disabledAction !== void 0 && _props$disabledAction.includes('CSB')) && /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.codesandbox'
+    })
+  }, /*#__PURE__*/React.createElement(IconCodeSandbox, null)), !((_props$disabledAction2 = props.disabledActions) !== null && _props$disabledAction2 !== void 0 && _props$disabledAction2.includes('CODEPEN')) && /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.codepen'
+    })
+  }, /*#__PURE__*/React.createElement(IconCodePen, null)), !((_props$disabledAction3 = props.disabledActions) !== null && _props$disabledAction3 !== void 0 && _props$disabledAction3.includes('EXTERNAL')) && /*#__PURE__*/React.createElement("a", {
+    target: "_blank",
+    rel: "noreferrer",
+    href: props.demoUrl,
+    className: "dumi-default-previewer-action-btn",
+    "data-dumi-tooltip": intl.formatMessage({
+      id: 'previewer.actions.separate'
+    })
+  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement(PreviewerActionsExtra, props), /*#__PURE__*/React.createElement("button", {
+    className: "dumi-default-previewer-action-btn",
+    type: "button",
+    onClick: function onClick() {
+      return setShowCode(function (prev) {
+        return !prev;
+      });
+    },
+    "data-dumi-tooltip": intl.formatMessage({
+      id: "previewer.actions.code.".concat(showCode ? 'shrink' : 'expand')
+    })
+  }, showCode ? /*#__PURE__*/React.createElement(IconCodeExpand, null) : /*#__PURE__*/React.createElement(IconCode, null))), showCode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "dumi-default-previewer-sources"
+  }, !isSingleFile && /*#__PURE__*/React.createElement(Tabs, {
+    className: "dumi-default-previewer-tabs",
+    prefixCls: "dumi-default-tabs",
+    moreIcon: "\xB7\xB7\xB7",
+    defaultActiveKey: String(activeKey),
+    onChange: function onChange(key) {
+      return setActiveKey(Number(key));
+    },
+    items: files.map(function (_ref3, i) {
+      var _ref4 = _slicedToArray(_ref3, 1),
+          filename = _ref4[0];
+
+      return {
+        key: String(i),
+        label: filename
+      };
+    })
+  })), /*#__PURE__*/React.createElement(SourceCode, {
+    lang: lang
+  }, files[activeKey][1].value)));
+};
+
+export default PreviewerActions;

package/theme-default/slots/PreviewerActions/index.less

@@ -0,0 +1,168 @@
+@import (reference) '../../styles/variables.less';
+@import '../../styles/utils.less';
+
+.@{prefix}-previewer{
+    &-actions {
+        display: flex;
+        height: 32px;
+        align-items: center;
+        justify-content: center;
+    
+        &:not(:last-child) {
+          border-bottom: 1px dashed @c-border-light;
+        }
+      }
+    
+      &-action-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+    
+        > svg {
+          width: 16px;
+          fill: darken(@c-border, 20%);
+          transition: fill 0.2s;
+        }
+    
+        &:hover > svg {
+          fill: darken(@c-border, 30%);
+        }
+    
+        &:not(:last-child) {
+          margin-right: 4px;
+        }
+      }
+    
+      &-tabs {
+        position: relative;
+        padding: 0 12px;
+    
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          height: 0;
+          border-bottom: 1px dashed @c-border-light;
+        }
+      }
+}
+
+.@{prefix}-tabs {
+    overflow: hidden;
+  
+    &-top {
+      flex-direction: column;
+  
+      .@{prefix}-tabs-ink-bar {
+        bottom: 0;
+      }
+    }
+  
+    &-nav {
+      display: flex;
+  
+      &-wrap {
+        display: flex;
+        white-space: nowrap;
+        overflow: hidden;
+  
+        &&-ping-left {
+          box-shadow: 5px 0 5px -5px rgb(0 0 0 / 10%) inset;
+        }
+  
+        &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
+          box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+        }
+      }
+  
+      &-list {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        transition: transform 0.2s;
+      }
+  
+      &-more {
+        height: 100%;
+        cursor: pointer;
+        background: none;
+        border: 0;
+        transition: box-shadow 0.2s;
+      }
+    }
+  
+    &-tab {
+      display: flex;
+      margin: 0 12px;
+  
+      &-btn {
+        padding: 0;
+        color: @c-text-secondary;
+        font-size: 14px;
+        line-height: 36px;
+        border: 0;
+        outline: none;
+        background: transparent;
+        box-sizing: border-box;
+        cursor: pointer;
+        transition: all 0.2s;
+  
+        &:hover {
+          color: @c-text;
+        }
+      }
+  
+      &-active &-btn {
+        color: @c-text;
+      }
+    }
+  
+    &-ink-bar {
+      position: absolute;
+      height: 1px;
+      background: @c-primary;
+      transition: left 0.2s, width 0.2s;
+      pointer-events: none;
+    }
+  
+    &-dropdown {
+      position: absolute;
+      background: #fff;
+      border: 1px solid @c-border;
+      max-height: 200px;
+      overflow: auto;
+  
+      > ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+  
+        > li {
+          padding: 4px 12px;
+          font-size: 14px;
+          cursor: pointer;
+  
+          &:hover {
+            color: @c-primary;
+          }
+  
+          &:not(:last-child) {
+            border-bottom: 1px dashed @c-border;
+          }
+        }
+      }
+  
+      &-hidden {
+        display: none;
+      }
+    }
+  }
+  

package/theme-default/slots/PreviewerActionsExtra/index.d.ts

@@ -0,0 +1,4 @@
+import type { IPreviewerProps } from 'dumi';
+import { type FC } from 'react';
+declare const PreviewerActionsExtra: FC<IPreviewerProps>;
+export default PreviewerActionsExtra;

package/theme-default/slots/PreviewerActionsExtra/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+var PreviewerActionsExtra = function PreviewerActionsExtra() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+
+export default PreviewerActionsExtra;