@nocobase/plugin-theme-editor 0.11.1-alpha.1

package/lib/client/antd-token-previewer/component-panel/index.js

@@ -0,0 +1,298 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.antdComponents = void 0;
+function _icons() {
+  const data = require("@ant-design/icons");
+  _icons = function _icons() {
+    return data;
+  };
+  return data;
+}
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function _classnames() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _makeStyle = _interopRequireDefault(require("../utils/makeStyle"));
+var _statistic = require("../utils/statistic");
+var _ComponentCard = require("./ComponentCard");
+var _ComponentDemoGroup = _interopRequireDefault(require("./ComponentDemoGroup"));
+var _ComponentTree = _interopRequireDefault(require("./ComponentTree"));
+const _excluded = ["themes", "selectedTokens", "filterMode", "className", "onTokenClick"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const BREADCRUMB_HEIGHT = 40;
+const useStyle = (0, _makeStyle.default)('ComponentPanel', token => ({
+  '.component-panel': {
+    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.05), 0 1px 2px 0 rgba(25,15,15,0.07), 0 0 1px 0 rgba(0,0,0,0.08)',
+    backgroundColor: '#fff',
+    display: 'flex',
+    borderRadius: 6,
+    height: '100%',
+    overflow: 'hidden',
+    '.component-panel-main': {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      width: 0,
+      '.component-panel-head': {
+        padding: `${token.paddingSM}px ${token.paddingSM}px`,
+        flex: 'none',
+        backgroundColor: token.colorBgContainer,
+        display: 'flex',
+        alignItems: 'center',
+        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBgContainer}`,
+        '> *:not(:first-child)': {
+          marginInlineStart: token.margin
+        },
+        [`${token.rootCls}-segmented-item`]: {
+          minWidth: 52
+        }
+      },
+      '.component-panel-toggle-side-icon': {
+        flex: 'none',
+        cursor: 'pointer',
+        marginInlineEnd: token.marginXS,
+        '.anticon': {
+          color: token.colorIcon,
+          transition: `color ${token.motionDurationMid}`,
+          '&:hover': {
+            color: token.colorIconHover
+          }
+        }
+      }
+    },
+    '.component-panel-side': {
+      flex: 'none',
+      width: 200,
+      overflow: 'hidden',
+      transition: `transform ${token.motionDurationMid}, width ${token.motionDurationMid}`
+    },
+    '.component-panel-side.component-panel-side-hidden': {
+      width: 0,
+      transform: 'translateX(-200px)'
+    },
+    '.component-demos-wrapper': {
+      display: 'flex',
+      flex: 1,
+      height: 0,
+      position: 'relative',
+      '.component-demos-breadcrumb-wrapper': {
+        position: 'absolute',
+        top: 0,
+        insetInlineStart: 0,
+        width: '100%',
+        height: BREADCRUMB_HEIGHT,
+        zIndex: 20,
+        backgroundColor: token.colorBgContainer,
+        padding: '8px 16px',
+        transition: 'opacity 0.3s',
+        background: 'rgba(255, 255, 255, .6)',
+        backdropFilter: 'blur(10px)',
+        borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBgContainer}`
+      }
+    },
+    '.component-demos': {
+      height: '100%',
+      overflow: 'auto',
+      flex: 1
+    }
+  }
+}));
+const antdComponents = {
+  General: ['Button', 'Icon', 'Typography'],
+  Layout: ['Divider', 'Grid', 'Space'],
+  Navigation: ['Breadcrumb', 'Dropdown', 'Menu', 'Pagination', 'Steps'],
+  'Date Entry': ['AutoComplete', 'Cascader', 'Checkbox', 'DatePicker', 'Form', 'Input', 'InputNumber', 'Mentions', 'Radio', 'Rate', 'Select', 'Slider', 'Switch', 'TimePicker', 'Transfer', 'TreeSelect', 'Upload'],
+  'Data Display': ['Avatar', 'Badge', 'Calendar', 'Card', 'Carousel', 'Collapse', 'Descriptions', 'Empty', 'Image', 'List', 'Popover', 'Segmented', 'Statistic', 'Table', 'Tabs', 'Tag', 'Timeline', 'Tooltip', 'Tree'],
+  Feedback: ['Alert', 'Drawer', 'Message', 'Modal', 'Notification', 'Popconfirm', 'Progress', 'Result', 'Skeleton', 'Spin'],
+  Other: ['Anchor']
+};
+exports.antdComponents = antdComponents;
+const Index = _ref => {
+  var _Object$entries$find2;
+  let themes = _ref.themes,
+    selectedTokens = _ref.selectedTokens,
+    filterMode = _ref.filterMode,
+    className = _ref.className,
+    onTokenClick = _ref.onTokenClick,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const _useStyle = useStyle(),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  const _useState = (0, _react().useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showSide = _useState2[0],
+    setShowSide = _useState2[1];
+  const demosRef = (0, _react().useRef)(null);
+  const _useState3 = (0, _react().useState)('middle'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    componentSize = _useState4[0],
+    setComponentSize = _useState4[1];
+  const _useState5 = (0, _react().useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    componentDisabled = _useState6[0],
+    setComponentDisabled = _useState6[1];
+  const _useState7 = (0, _react().useState)(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    activeComponent = _useState8[0],
+    setActiveComponent = _useState8[1];
+  const _useState9 = (0, _react().useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    showBreadcrumb = _useState10[0],
+    setShowBreadcrumb = _useState10[1];
+  const relatedComponents = (0, _react().useMemo)(() => {
+    return selectedTokens ? (0, _statistic.getRelatedComponents)(selectedTokens) : [];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTokens]);
+  (0, _react().useEffect)(() => {
+    setShowSide(true);
+  }, [selectedTokens]);
+  (0, _react().useEffect)(() => {
+    var _demosRef$current;
+    const handleScroll = () => {
+      if (demosRef.current) {
+        setShowBreadcrumb(demosRef.current.scrollTop > 10);
+        for (let i = 0; i < demosRef.current.children.length; i++) {
+          if (demosRef.current.children[i].getBoundingClientRect().top + demosRef.current.children[i].clientHeight - demosRef.current.getBoundingClientRect().top > BREADCRUMB_HEIGHT) {
+            var _demosRef$current$chi;
+            setActiveComponent((_demosRef$current$chi = demosRef.current.children[i]) === null || _demosRef$current$chi === void 0 ? void 0 : _demosRef$current$chi.id.split('-').pop());
+            break;
+          }
+        }
+      }
+    };
+    (_demosRef$current = demosRef.current) === null || _demosRef$current === void 0 ? void 0 : _demosRef$current.addEventListener('scroll', handleScroll);
+    const demosWrapper = demosRef.current;
+    return () => {
+      demosWrapper === null || demosWrapper === void 0 ? void 0 : demosWrapper.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+  const scrollToComponent = component => {
+    var _demosRef$current2, _demosRef$current3, _demosRef$current3$qu;
+    (_demosRef$current2 = demosRef.current) === null || _demosRef$current2 === void 0 ? void 0 : _demosRef$current2.scrollTo({
+      top: (((_demosRef$current3 = demosRef.current) === null || _demosRef$current3 === void 0 ? void 0 : (_demosRef$current3$qu = _demosRef$current3.querySelector(`#${(0, _ComponentCard.getComponentDemoId)(component)}`)) === null || _demosRef$current3$qu === void 0 ? void 0 : _demosRef$current3$qu.offsetTop) || 0) - 38,
+      behavior: 'smooth'
+    });
+  };
+  const activeComponentCategory = (0, _react().useMemo)(() => {
+    var _Object$entries$find;
+    if (!activeComponent) {
+      return undefined;
+    }
+    const key = (_Object$entries$find = Object.entries(antdComponents).find(([, value]) => value.includes(activeComponent))) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0];
+    if (key) {
+      return antdComponents[key];
+    } else {
+      return undefined;
+    }
+  }, [activeComponent]);
+  const demoGroup = (0, _react().useMemo)(() => _react().default.createElement(_ComponentDemoGroup.default, {
+    themes: themes,
+    components: antdComponents,
+    size: componentSize,
+    disabled: componentDisabled,
+    activeComponents: filterMode === 'highlight' ? undefined : relatedComponents,
+    selectedTokens: selectedTokens,
+    onTokenClick: onTokenClick
+  }), [themes, componentSize, componentDisabled, filterMode, relatedComponents, selectedTokens, onTokenClick]);
+  return wrapSSR(_react().default.createElement("div", _objectSpread({
+    className: (0, _classnames().default)('component-panel', hashId, className)
+  }, rest), _react().default.createElement("div", {
+    className: (0, _classnames().default)('component-panel-side', {
+      'component-panel-side-hidden': !showSide
+    })
+  }, _react().default.createElement(_ComponentTree.default, {
+    activeComponent: activeComponent,
+    filterMode: filterMode,
+    selectedTokens: selectedTokens,
+    components: antdComponents,
+    onSelect: component => {
+      if (component.startsWith('type-')) {
+        scrollToComponent(antdComponents[component.split('-')[1]][0]);
+      } else {
+        scrollToComponent(component);
+      }
+    }
+  })), _react().default.createElement("div", {
+    className: "component-panel-main"
+  }, _react().default.createElement("div", {
+    className: "component-panel-head"
+  }, _react().default.createElement("div", {
+    className: "component-panel-toggle-side-icon",
+    onClick: () => setShowSide(prev => !prev)
+  }, showSide ? _react().default.createElement(_icons().MenuFoldOutlined, null) : _react().default.createElement(_icons().MenuUnfoldOutlined, null)), _react().default.createElement("div", null, _react().default.createElement("span", {
+    style: {
+      marginRight: 8
+    }
+  }, "\u7EC4\u4EF6\u5C3A\u5BF8\uFF1A"), _react().default.createElement(_antd().Segmented, {
+    value: componentSize,
+    onChange: value => setComponentSize(value),
+    options: [{
+      label: '大',
+      value: 'large'
+    }, {
+      label: '中',
+      value: 'middle'
+    }, {
+      label: '小',
+      value: 'small'
+    }]
+  })), _react().default.createElement("div", null, _react().default.createElement("span", {
+    style: {
+      marginRight: 8,
+      verticalAlign: 'middle'
+    }
+  }, "\u7981\u7528\uFF1A"), _react().default.createElement(_antd().Switch, {
+    checked: componentDisabled,
+    onChange: checked => setComponentDisabled(checked)
+  }))), _react().default.createElement("div", {
+    className: "component-demos-wrapper"
+  }, activeComponent && _react().default.createElement("div", {
+    className: "component-demos-breadcrumb-wrapper",
+    style: {
+      opacity: showBreadcrumb ? 1 : 0
+    }
+  }, _react().default.createElement(_antd().Breadcrumb, null, _react().default.createElement(_antd().Breadcrumb.Item, null, _react().default.createElement("a", {
+    onClick: () => activeComponentCategory && scrollToComponent(activeComponentCategory === null || activeComponentCategory === void 0 ? void 0 : activeComponentCategory[0])
+  }, (_Object$entries$find2 = Object.entries(antdComponents).find(([, value]) => value.includes(activeComponent))) === null || _Object$entries$find2 === void 0 ? void 0 : _Object$entries$find2[0])), _react().default.createElement(_antd().Breadcrumb.Item, null, activeComponent))), _react().default.createElement("div", {
+    className: "component-demos",
+    ref: demosRef
+  }, demoGroup)))));
+};
+var _default = Index;
+exports.default = _default;

package/lib/client/antd-token-previewer/hooks/useControlledTheme.d.ts

@@ -0,0 +1,18 @@
+import type { DerivativeFunc } from '@ant-design/cssinjs';
+import type { MutableTheme, Theme } from '../interface';
+export type ThemeCode = 'default' | 'dark' | 'compact';
+export declare const themeMap: Record<ThemeCode, DerivativeFunc<any, any>>;
+export type SetThemeState = (theme: Theme, modifiedPath: string[], updated?: boolean) => void;
+export type UseControlledTheme = (options: {
+    theme?: Theme;
+    defaultTheme: Theme;
+    onChange?: (theme: Theme) => void;
+    darkAlgorithm?: DerivativeFunc<any, any>;
+}) => {
+    theme: MutableTheme;
+    infoFollowPrimary: boolean;
+    onInfoFollowPrimaryChange: (value: boolean) => void;
+    updateRef: () => void;
+};
+declare const useControlledTheme: UseControlledTheme;
+export default useControlledTheme;

package/lib/client/antd-token-previewer/hooks/useControlledTheme.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeMap = exports.default = void 0;
+function _antd() {
+  const data = require("antd");
+  _antd = function _antd() {
+    return data;
+  };
+  return data;
+}
+function _react() {
+  const data = require("react");
+  _react = function _react() {
+    return data;
+  };
+  return data;
+}
+var _deepUpdateObj = _interopRequireDefault(require("../utils/deepUpdateObj"));
+var _getDesignToken = _interopRequireDefault(require("../utils/getDesignToken"));
+var _getValueByPath = _interopRequireDefault(require("../utils/getValueByPath"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+const defaultDark = _antd().theme.darkAlgorithm,
+  compactAlgorithm = _antd().theme.compactAlgorithm,
+  defaultAlgorithm = _antd().theme.defaultAlgorithm;
+const themeMap = {
+  dark: defaultDark,
+  compact: compactAlgorithm,
+  default: defaultAlgorithm
+};
+exports.themeMap = themeMap;
+const useControlledTheme = ({
+  theme: customTheme,
+  defaultTheme,
+  onChange
+}) => {
+  var _themeRef$current4;
+  const _useState = (0, _react().useState)(customTheme !== null && customTheme !== void 0 ? customTheme : defaultTheme),
+    _useState2 = _slicedToArray(_useState, 2),
+    theme = _useState2[0],
+    setTheme = _useState2[1];
+  const _useState3 = (0, _react().useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    infoFollowPrimary = _useState4[0],
+    setInfoFollowPrimary = _useState4[1];
+  const themeRef = (0, _react().useRef)(theme);
+  const _useState5 = (0, _react().useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    setRenderHolder = _useState6[1];
+  const forceUpdate = () => setRenderHolder(prev => prev + 1);
+  const getNewTheme = (newTheme, force) => {
+    const newToken = _objectSpread({}, newTheme.config.token);
+    if (infoFollowPrimary || force) {
+      newToken.colorInfo = (0, _getDesignToken.default)(newTheme.config).colorPrimary;
+    }
+    return _objectSpread(_objectSpread({}, newTheme), {}, {
+      config: _objectSpread(_objectSpread({}, newTheme.config), {}, {
+        token: newToken
+      })
+    });
+  };
+  const handleSetTheme = newTheme => {
+    if (customTheme) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(getNewTheme(newTheme));
+    } else {
+      setTheme(getNewTheme(newTheme));
+    }
+  };
+  const handleResetTheme = path => {
+    var _themeRef$current;
+    let newConfig = _objectSpread({}, theme.config);
+    newConfig = (0, _deepUpdateObj.default)(newConfig, path, (0, _getValueByPath.default)((_themeRef$current = themeRef.current) === null || _themeRef$current === void 0 ? void 0 : _themeRef$current.config, path));
+    if (path[1] === 'colorSettings') {
+      var _themeRef$current2, _themeRef$current3;
+      newConfig = (0, _deepUpdateObj.default)(newConfig, ['token', 'colorBgSettingsHover'], (0, _getValueByPath.default)((_themeRef$current2 = themeRef.current) === null || _themeRef$current2 === void 0 ? void 0 : _themeRef$current2.config, ['token', 'colorBgSettingsHover']));
+      newConfig = (0, _deepUpdateObj.default)(newConfig, ['token', 'colorBorderSettingsHover'], (0, _getValueByPath.default)((_themeRef$current3 = themeRef.current) === null || _themeRef$current3 === void 0 ? void 0 : _themeRef$current3.config, ['token', 'colorBorderSettingsHover']));
+    }
+    handleSetTheme(_objectSpread(_objectSpread({}, theme), {}, {
+      config: newConfig
+    }), path);
+  };
+  const getCanReset = (origin, current) => path => {
+    return (0, _getValueByPath.default)(origin, path) !== (0, _getValueByPath.default)(current, path);
+  };
+  // Controlled theme change
+  (0, _react().useEffect)(() => {
+    if (customTheme) {
+      setTheme(customTheme);
+    }
+  }, [customTheme]);
+  const handleInfoFollowPrimaryChange = value => {
+    setInfoFollowPrimary(value);
+    if (value) {
+      setTheme(getNewTheme(theme, true));
+    }
+  };
+  return {
+    theme: _objectSpread(_objectSpread({}, theme), {}, {
+      onThemeChange: (config, path) => handleSetTheme(_objectSpread(_objectSpread({}, theme), {}, {
+        config
+      }), path),
+      onReset: handleResetTheme,
+      getCanReset: getCanReset((_themeRef$current4 = themeRef.current) === null || _themeRef$current4 === void 0 ? void 0 : _themeRef$current4.config, theme.config)
+    }),
+    infoFollowPrimary,
+    onInfoFollowPrimaryChange: handleInfoFollowPrimaryChange,
+    updateRef: () => {
+      themeRef.current = theme;
+      forceUpdate();
+    }
+  };
+};
+var _default = useControlledTheme;
+exports.default = _default;

package/lib/client/antd-token-previewer/icons/Arrow.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/lib/client/antd-token-previewer/icons/Arrow.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function React() {
+  const data = _interopRequireWildcard(require("react"));
+  React = function React() {
+    return data;
+  };
+  return data;
+}
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function Arrow(props) {
+  return /*#__PURE__*/React().createElement('svg', Object.assign({
+    width: '1em',
+    height: '1em',
+    viewBox: '0 0 16 16',
+    xmlns: 'http://www.w3.org/2000/svg',
+    xmlnsXlink: 'http://www.w3.org/1999/xlink'
+  }, props, {
+    style: Object.assign({
+      verticalAlign: '-0.125em'
+    }, props.style),
+    className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' ')
+  }), /*#__PURE__*/React().createElement('g', {
+    id: 'Arrow-\u9875\u9762-1',
+    stroke: 'none',
+    strokeWidth: 1,
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Arrow-\u4E3B\u9898\u9884\u89C8\u5668---\u7EC4\u4EF6\u9884\u89C8',
+    transform: 'translate(-335.000000, -153.000000)',
+    fill: 'currentColor',
+    fillRule: 'nonzero'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Arrow-\u7F16\u7EC4-18',
+    transform: 'translate(0.000000, 70.000000)'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Arrow-\u7F16\u7EC4-13',
+    transform: 'translate(331.000000, 79.000000)'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Arrow-\u6298\u53E0\u7BAD\u5934_Black@2x',
+    transform: 'translate(12.000000, 12.000000) rotate(90.000000) translate(-12.000000, -12.000000) translate(4.000000, 4.000000)'
+  }, /*#__PURE__*/React().createElement('rect', {
+    id: 'Arrow-\u77E9\u5F62',
+    opacity: 0,
+    x: 0,
+    y: 0,
+    width: 16,
+    height: 16
+  }), /*#__PURE__*/React().createElement('path', {
+    d: 'M8.576,10.6224 C8.46400007,10.7357654 8.31136002,10.7997014 8.152,10.8 L7.848,10.8 C7.68897547,10.7980619 7.53693306,10.7343763 7.424,10.6224 L3.3184,6.4672 C3.16044703,6.30862179 3.16044703,6.05217821 3.3184,5.8936 L3.8864,5.3192 C3.95991079,5.24354153 4.06091047,5.20085176 4.1664,5.20085176 C4.27188953,5.20085176 4.37288921,5.24354153 4.4464,5.3192 L8,8.9168 L11.5536,5.3192 C11.6284927,5.24307539 11.7308111,5.20020394 11.8376,5.20020394 C11.9443889,5.20020394 12.0467073,5.24307539 12.1216,5.3192 L12.6816,5.8936 C12.839553,6.05217821 12.839553,6.30862179 12.6816,6.4672 L8.576,10.6224 Z',
+    id: 'Arrow-\u8DEF\u5F84'
+  })))))));
+}
+var _default = Arrow;
+exports.default = _default;

package/lib/client/antd-token-previewer/icons/Brush.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/lib/client/antd-token-previewer/icons/Brush.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function React() {
+  const data = _interopRequireWildcard(require("react"));
+  React = function React() {
+    return data;
+  };
+  return data;
+}
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function Brush(props) {
+  return /*#__PURE__*/React().createElement('svg', Object.assign({
+    width: '1em',
+    height: '1em',
+    viewBox: '0 0 14 18',
+    xmlns: 'http://www.w3.org/2000/svg',
+    xmlnsXlink: 'http://www.w3.org/1999/xlink'
+  }, props, {
+    style: Object.assign({
+      verticalAlign: '-0.125em'
+    }, props.style),
+    className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' ')
+  }), /*#__PURE__*/React().createElement('g', {
+    id: 'Brush-\u9875\u9762-1',
+    stroke: 'none',
+    strokeWidth: 1,
+    fill: 'none',
+    fillRule: 'evenodd',
+    fillOpacity: 0.649999976
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Brush-\u4E3B\u9898\u7F16\u8F91\u5668---\u591A\u4E3B\u9898',
+    transform: 'translate(-17.000000, -121.000000)',
+    fill: 'currentColor',
+    fillRule: 'nonzero'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Brush-brush',
+    transform: 'translate(14.000000, 120.000000)'
+  }, /*#__PURE__*/React().createElement('path', {
+    d: 'M8.20652175,3.2826087 L8.20652175,4.10326086 C8.20652175,4.55649455 7.83910325,4.92391304 7.38586957,4.92391304 C6.93263588,4.92391304 6.56521738,4.55649455 6.56521738,4.10326086 L6.56521738,3.2826087 L4.92391304,3.2826087 L4.92391304,8.20652175 L14.7717391,8.20652175 L14.7717391,3.2826087 L13.1304348,3.2826087 L13.1304348,5.74456522 C13.1304348,6.19779891 12.7630163,6.5652174 12.3097826,6.5652174 C11.8565489,6.5652174 11.4891304,6.19779891 11.4891304,5.74456522 L11.4891304,3.2826087 L8.20652175,3.2826087 Z M4.92391304,9.84782609 L4.92391304,11.4891304 L7.72233695,11.4891304 C8.08431263,11.4890155 8.42799204,11.6482243 8.66197039,11.9244136 C8.89594874,12.2006029 8.99650752,12.5657753 8.93690217,12.9228098 L8.60043479,14.9399728 C8.51784643,15.435105 8.73592476,15.9322123 9.15616576,16.2067558 C9.57640676,16.4812994 10.1192454,16.4812994 10.5394864,16.2067558 C10.9597274,15.9322123 11.1778057,15.435105 11.0952174,14.9399728 L10.75875,12.9228098 C10.6991446,12.5657753 10.7997034,12.2006029 11.0336818,11.9244136 C11.2676601,11.6482243 11.6113395,11.4890155 11.9733152,11.4891304 L14.7717391,11.4891304 L14.7717391,9.84782609 L4.92391304,9.84782609 Z M12.7143641,14.6699783 C12.9035912,15.807501 12.4022968,16.9492894 11.4368082,17.5798421 C10.4713197,18.2103948 9.2243325,18.2103948 8.25884395,17.5798421 C7.2933554,16.9492894 6.79206095,15.807501 6.98128804,14.6699783 L7.23815217,13.1304348 L4.92391304,13.1304348 C4.48861206,13.1304348 4.07113988,12.9575121 3.76333561,12.6497079 C3.45553133,12.3419036 3.2826087,11.9244314 3.2826087,11.4891304 L3.2826087,3.2826087 C3.2826087,2.84730772 3.45553133,2.42983554 3.76333561,2.12203126 C4.07113988,1.81422698 4.48861206,1.64130434 4.92391304,1.64130434 L14.7717391,1.64130434 C15.2070401,1.64130434 15.6245123,1.81422698 15.9323166,2.12203126 C16.2401208,2.42983554 16.4130435,2.84730772 16.4130435,3.2826087 L16.4130435,11.4891304 C16.4130435,11.9244314 16.2401208,12.3419036 15.9323166,12.6497079 C15.6245123,12.9575121 15.2070401,13.1304348 14.7717391,13.1304348 L12.4575,13.1304348 L12.7143641,14.6699783 L12.7143641,14.6699783 Z',
+    id: 'Brush-\u5F62\u72B6'
+  })))));
+}
+var _default = Brush;
+exports.default = _default;

package/lib/client/antd-token-previewer/icons/Compact.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;

package/lib/client/antd-token-previewer/icons/Compact.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function React() {
+  const data = _interopRequireWildcard(require("react"));
+  React = function React() {
+    return data;
+  };
+  return data;
+}
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function Compact(props) {
+  return /*#__PURE__*/React().createElement('svg', Object.assign({
+    width: '1em',
+    height: '1em',
+    viewBox: '0 0 17 16',
+    xmlns: 'http://www.w3.org/2000/svg',
+    xmlnsXlink: 'http://www.w3.org/1999/xlink'
+  }, props, {
+    style: Object.assign({
+      verticalAlign: '-0.125em'
+    }, props.style),
+    className: ['nanqu-token-panel-icon', props.className].filter(Boolean).join(' ')
+  }), /*#__PURE__*/React().createElement('g', {
+    id: 'Compact-\u9875\u9762-1',
+    stroke: 'none',
+    strokeWidth: 1,
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Compact-\u9ED8\u8BA4',
+    transform: 'translate(-9.000000, -82.500000)',
+    fill: 'currentColor',
+    fillRule: 'nonzero'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Compact-\u9009\u9879\u4E00',
+    transform: 'translate(9.268811, 79.500000)'
+  }, /*#__PURE__*/React().createElement('g', {
+    id: 'Compact-smaller',
+    transform: 'translate(0.000000, 3.000000)'
+  }, /*#__PURE__*/React().createElement('rect', {
+    id: 'Compact-\u77E9\u5F62',
+    opacity: 0,
+    x: 0,
+    y: 0,
+    width: 16,
+    height: 16
+  }), /*#__PURE__*/React().createElement('path', {
+    d: 'M10,14 L10,12 C10,10.8666667 10.8666667,10 12,10 L14,10 C14.4,10 14.6666667,10.2666667 14.6666667,10.6666667 C14.6666667,11.0666667 14.4,11.3333333 14,11.3333333 L12,11.3333333 C11.6,11.3333333 11.3333333,11.6 11.3333333,12 L11.3333333,14 C11.3333333,14.4 11.0666667,14.6666667 10.6666667,14.6666667 C10.2666667,14.6666667 10,14.4 10,14 L10,14 Z M4.66666667,14 L4.66666667,12 C4.66666667,11.6 4.4,11.3333333 4,11.3333333 L2,11.3333333 C1.6,11.3333333 1.33333333,11.0666667 1.33333333,10.6666667 C1.33333333,10.2666667 1.6,10 2,10 L4,10 C5.13333333,10 6,10.8666667 6,12 L6,14 C6,14.4 5.73333333,14.6666667 5.33333333,14.6666667 C4.93333333,14.6666667 4.66666666,14.4 4.66666667,14 L4.66666667,14 Z M12,6 C10.8666667,6 10,5.13333333 10,4 L10,2 C10,1.6 10.2666667,1.33333333 10.6666667,1.33333333 C11.0666667,1.33333333 11.3333333,1.6 11.3333333,2 L11.3333333,4 C11.3333333,4.4 11.6,4.66666667 12,4.66666667 L14,4.66666667 C14.4,4.66666667 14.6666667,4.93333334 14.6666667,5.33333333 C14.6666667,5.73333331 14.4,6 14,6 L12,6 L12,6 Z M2,6 C1.6,6 1.33333333,5.73333333 1.33333333,5.33333333 C1.33333333,4.93333333 1.6,4.66666666 2,4.66666667 L4,4.66666667 C4.4,4.66666667 4.66666667,4.4 4.66666667,4 L4.66666667,2 C4.66666667,1.6 4.93333334,1.33333333 5.33333333,1.33333333 C5.73333331,1.33333333 6,1.6 6,2 L6,4 C6,5.13333333 5.13333333,6 4,6 L2,6 Z',
+    id: 'Compact-\u5F62\u72B6'
+  }))))));
+}
+var _default = Compact;
+exports.default = _default;

package/lib/client/antd-token-previewer/icons/Control.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+
+declare const res: React.FC<React.SVGProps<SVGSVGElement>>;
+export default res;