@lark-apaas/miaoda-inspector 0.1.0-alpha.1

package/dist/lib/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  MiaodaInspector: function() {
+    return _MiaodaInspector.MiaodaInspector;
+  },
+  isOutgoingMessage: function() {
+    return _utils.isOutgoingMessage;
+  }
+});
+const _MiaodaInspector = require("./MiaodaInspector");
+const _utils = require("./utils");

package/dist/lib/types/iframe-events.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/lib/types/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  InitConfigMessage: function() {
+    return _iframeevents.InitConfigMessage;
+  },
+  ClearSelectedMessage: function() {
+    return _iframeevents.ClearSelectedMessage;
+  },
+  EditTextMessage: function() {
+    return _iframeevents.EditTextMessage;
+  },
+  EditStyleMessage: function() {
+    return _iframeevents.EditStyleMessage;
+  },
+  EditClassNameMessage: function() {
+    return _iframeevents.EditClassNameMessage;
+  },
+  OutgoingMessage: function() {
+    return _iframeevents.OutgoingMessage;
+  },
+  PageMountedMessage: function() {
+    return _iframeevents.PageMountedMessage;
+  },
+  TextUpdateMessage: function() {
+    return _iframeevents.TextUpdateMessage;
+  },
+  SelectInspectorElementMessage: function() {
+    return _iframeevents.SelectInspectorElementMessage;
+  },
+  IncomingMessage: function() {
+    return _iframeevents.IncomingMessage;
+  },
+  InspectorInfo: function() {
+    return _iframeevents.InspectorInfo;
+  }
+});
+const _iframeevents = require("./iframe-events");

package/dist/lib/utils/config-mapper.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  getStyleCalculationConfig: function() {
+    return getStyleCalculationConfig;
+  },
+  getAllStyleConfigs: function() {
+    return getAllStyleConfigs;
+  }
+});
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys2 = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  source = source != null ? source : {};
+  if (Object.getOwnPropertyDescriptors) {
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  } else {
+    ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function getColorStyleCalculationConfig(config, propertyName) {
+  const prefixMap = {
+    color: "text",
+    backgroundColor: "bg",
+    borderColor: "border"
+  };
+  const prefix = prefixMap[propertyName];
+  if (!prefix) {
+    throw new Error(`Unsupported color property: ${propertyName}`);
+  }
+  const map = {};
+  for (const [tokenName, colorValue] of Object.entries(config.tokens)) {
+    if (!tokenName.includes("-") || !colorValue.startsWith("#")) {
+      continue;
+    }
+    const tailwindClass = `${prefix}-${tokenName}`;
+    map[colorValue.toLowerCase()] = tailwindClass;
+  }
+  const colorConfig = config.common[propertyName];
+  if (colorConfig.type === "color-picker") {
+    for (const colorGroup of colorConfig.recommendColors) {
+      for (const colorOption of colorGroup.options) {
+        if (colorOption.type === "tailwind" && colorOption.rawValue) {
+          map[colorOption.rawValue.toLowerCase()] = colorOption.value;
+        }
+      }
+    }
+  }
+  let cssProperty;
+  if (propertyName === "color") {
+    cssProperty = "color";
+  } else if (propertyName === "backgroundColor") {
+    cssProperty = "backgroundColor";
+  } else {
+    cssProperty = "borderColor";
+  }
+  return {
+    cssProperty,
+    tailwindPrefix: prefix,
+    map,
+    transformValue: (value) => value.toLowerCase()
+  };
+}
+function getStyleCalculationConfig(config, propertyName) {
+  const uiComponent = config.common[propertyName];
+  if (uiComponent.type === "color-picker") {
+    return getColorStyleCalculationConfig(config, propertyName);
+  }
+  if (uiComponent.type !== "select" && uiComponent.type !== "spacing") {
+    throw new Error(`Unsupported UI component type: ${uiComponent.type} for property: ${propertyName}`);
+  }
+  const map = {};
+  for (const option of uiComponent.options) {
+    const numericValue = parseInt(option.rawValue, 10);
+    if (!Number.isNaN(numericValue)) {
+      map[numericValue] = option.value;
+    } else {
+      map[option.rawValue] = option.value;
+    }
+  }
+  const configMap = {
+    fontSize: {
+      cssProperty: "fontSize",
+      tailwindPrefix: "text",
+      tolerance: 2
+    },
+    fontWeight: {
+      cssProperty: "fontWeight",
+      tailwindPrefix: "font",
+      transformValue: (value) => parseInt(value, 10)
+    },
+    borderRadius: {
+      cssProperty: "borderRadius",
+      tailwindPrefix: "rounded"
+    },
+    borderWidth: {
+      cssProperty: "borderWidth",
+      tailwindPrefix: "border"
+    },
+    textAlign: {
+      cssProperty: "textAlign",
+      tailwindPrefix: "text",
+      transformValue: (value) => value
+    },
+    padding: {
+      cssProperty: "padding",
+      tailwindPrefix: "p",
+      skipTailwind: true
+    },
+    margin: {
+      cssProperty: "margin",
+      tailwindPrefix: "m",
+      skipTailwind: true
+    }
+  };
+  const baseConfig = configMap[propertyName];
+  if (!baseConfig) {
+    throw new Error(`Unknown property: ${propertyName}`);
+  }
+  return _object_spread_props(_object_spread({}, baseConfig), {
+    map
+  });
+}
+function getAllStyleConfigs(config) {
+  const result = {};
+  const keys = Object.keys(config.common);
+  for (const key of keys) {
+    result[key] = getStyleCalculationConfig(config, key);
+  }
+  return result;
+}

package/dist/lib/utils/css.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "cx", {
+  enumerable: true,
+  get: function() {
+    return cx;
+  }
+});
+const _clsx = /* @__PURE__ */ _interop_require_default(require("clsx"));
+const _tailwindmerge = require("tailwind-merge");
+function _interop_require_default(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+}
+function cx(...args) {
+  return (0, _tailwindmerge.twMerge)((0, _clsx.default)(...args));
+}

package/dist/lib/utils/index.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  getPreviewParentOrigin: function() {
+    return _origin.getPreviewParentOrigin;
+  },
+  postMessage: function() {
+    return _origin.postMessage;
+  },
+  isIncomingMessage: function() {
+    return _origin.isIncomingMessage;
+  },
+  isOutgoingMessage: function() {
+    return _origin.isOutgoingMessage;
+  },
+  cx: function() {
+    return _css.cx;
+  },
+  calculateFontSizeInfo: function() {
+    return _stylecalculator.calculateFontSizeInfo;
+  },
+  calculateFontWeightInfo: function() {
+    return _stylecalculator.calculateFontWeightInfo;
+  },
+  calculateBorderRadiusInfo: function() {
+    return _stylecalculator.calculateBorderRadiusInfo;
+  },
+  calculateBorderWidthInfo: function() {
+    return _stylecalculator.calculateBorderWidthInfo;
+  },
+  calculateTextAlignInfo: function() {
+    return _stylecalculator.calculateTextAlignInfo;
+  },
+  calculatePaddingInfo: function() {
+    return _stylecalculator.calculatePaddingInfo;
+  },
+  calculateMarginInfo: function() {
+    return _stylecalculator.calculateMarginInfo;
+  },
+  calculateColorInfo: function() {
+    return _stylecalculator.calculateColorInfo;
+  },
+  calculateBackgroundColorInfo: function() {
+    return _stylecalculator.calculateBackgroundColorInfo;
+  },
+  calculateBorderColorInfo: function() {
+    return _stylecalculator.calculateBorderColorInfo;
+  }
+});
+const _origin = require("./origin");
+const _css = require("./css");
+const _stylecalculator = require("./style-calculator");

package/dist/lib/utils/origin.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  getPreviewParentOrigin: function() {
+    return getPreviewParentOrigin;
+  },
+  postMessage: function() {
+    return postMessage;
+  },
+  isOutgoingMessage: function() {
+    return isOutgoingMessage;
+  },
+  isIncomingMessage: function() {
+    return isIncomingMessage;
+  }
+});
+function getPreviewParentOrigin() {
+  const { origin } = window.location;
+  if (origin.includes("feishuapp.cn")) {
+    return "https://miaoda.feishu.cn";
+  }
+  if (origin.includes("fsapp.kundou.cn")) {
+    return "https://miaoda.feishu-pre.cn";
+  }
+  return "https://miaoda.feishu-boe.cn";
+}
+function postMessage(message, targetOrigin) {
+  window.parent.postMessage(message, targetOrigin !== null && targetOrigin !== void 0 ? targetOrigin : getPreviewParentOrigin());
+}
+function isOutgoingMessage(msg, type) {
+  return msg.type === type;
+}
+function isIncomingMessage(msg, type) {
+  return msg.type === type;
+}

package/dist/lib/utils/style-calculator.js

@@ -0,0 +1,207 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  rgbaToHex: function() {
+    return rgbaToHex;
+  },
+  calculateStyle: function() {
+    return calculateStyle;
+  },
+  calculateFontSizeInfo: function() {
+    return calculateFontSizeInfo;
+  },
+  calculateFontWeightInfo: function() {
+    return calculateFontWeightInfo;
+  },
+  calculateBorderRadiusInfo: function() {
+    return calculateBorderRadiusInfo;
+  },
+  calculateBorderWidthInfo: function() {
+    return calculateBorderWidthInfo;
+  },
+  calculateTextAlignInfo: function() {
+    return calculateTextAlignInfo;
+  },
+  calculatePaddingInfo: function() {
+    return calculatePaddingInfo;
+  },
+  calculateMarginInfo: function() {
+    return calculateMarginInfo;
+  },
+  calculateColorInfo: function() {
+    return calculateColorInfo;
+  },
+  calculateBackgroundColorInfo: function() {
+    return calculateBackgroundColorInfo;
+  },
+  calculateBorderColorInfo: function() {
+    return calculateBorderColorInfo;
+  }
+});
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys2 = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) {
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  source = source != null ? source : {};
+  if (Object.getOwnPropertyDescriptors) {
+    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+  } else {
+    ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+function rgbaToHex(rgba) {
+  const match = rgba.match(/rgba?\(([^)]+)\)/);
+  if (!match)
+    return rgba;
+  const values = match[1].split(",").map((v) => v.trim());
+  const r = parseInt(values[0], 10);
+  const g = parseInt(values[1], 10);
+  const b = parseInt(values[2], 10);
+  const toHex = (n) => {
+    const hex = n.toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  if (values.length === 4) {
+    const a = parseFloat(values[3]);
+    if (!Number.isNaN(a) && a < 1) {
+      const alphaHex = Math.round(a * 255).toString(16);
+      const alphaHexStr = alphaHex.length === 1 ? `0${alphaHex}` : alphaHex;
+      return `#${toHex(r)}${toHex(g)}${toHex(b)}${alphaHexStr}`;
+    }
+  }
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function isValidElement(element, componentName, canUseNewInspector) {
+  return !!(element && componentName && componentName[0] !== componentName[0].toUpperCase() && canUseNewInspector && !(element instanceof SVGElement));
+}
+function isValidElementWithComponent(element, componentName, canUseNewInspector) {
+  return !!(element && componentName && canUseNewInspector && !(element instanceof SVGElement));
+}
+function shouldBeInherited(element, cssProperty, tailwindPattern) {
+  const hasDirectStyle = element.style[cssProperty] !== "";
+  const hasTailwindClass = element.className.match(tailwindPattern);
+  return !hasDirectStyle && !hasTailwindClass;
+}
+function findClosestMatch(value, map, tolerance = 2) {
+  let closestClass = Object.values(map)[0];
+  let minDiff = Infinity;
+  for (const [px, className] of Object.entries(map)) {
+    const diff = Math.abs(value - Number(px));
+    if (diff < minDiff) {
+      minDiff = diff;
+      closestClass = className;
+    }
+  }
+  return {
+    className: minDiff <= tolerance ? closestClass : `raw:${value}`,
+    isExact: minDiff <= tolerance
+  };
+}
+function calculateStyleProperty(element, config) {
+  const computedStyle = window.getComputedStyle(element);
+  const currentValue = computedStyle[config.cssProperty];
+  if (!currentValue) {
+    return null;
+  }
+  let tailwindClassName;
+  if (config.cssProperty === "textAlign" || config.skipTailwind) {
+    tailwindClassName = config.map[currentValue] || `raw:${currentValue}`;
+  } else if (config.cssProperty === "color" || config.cssProperty === "backgroundColor" || config.cssProperty === "borderColor") {
+    const normalizedColor = rgbaToHex(currentValue);
+    const colorValue = config.transformValue ? config.transformValue(normalizedColor) : normalizedColor;
+    tailwindClassName = config.map[colorValue] || `raw:${normalizedColor}`;
+  } else {
+    const numericValue = config.transformValue ? config.transformValue(currentValue) : parseFloat(currentValue);
+    const { className } = findClosestMatch(numericValue, config.map, config.tolerance);
+    tailwindClassName = className;
+  }
+  const inherited = config.tailwindPattern ? shouldBeInherited(element, config.cssProperty, config.tailwindPattern) : false;
+  return {
+    value: currentValue,
+    inherited,
+    tailwindClassName
+  };
+}
+function calculateStyle(styleName, element, componentName, canUseNewInspector, styleConfigs) {
+  if ((styleName === "fontSize" || styleName === "fontWeight" || styleName === "color" || styleName === "textAlign") && !isValidElement(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  const config = styleConfigs[styleName];
+  const tailwindPattern = new RegExp(`\\b${config.tailwindPrefix}-(${Object.keys(config.map).join("|")})\\b`);
+  return calculateStyleProperty(element, _object_spread_props(_object_spread({}, config), {
+    tailwindPattern
+  }));
+}
+const calculateFontSizeInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("fontSize", element, componentName, canUseNewInspector, styleConfigs);
+const calculateFontWeightInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("fontWeight", element, componentName, canUseNewInspector, styleConfigs);
+const calculateBorderRadiusInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderRadius", element, componentName, canUseNewInspector, styleConfigs);
+const calculateBorderWidthInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderWidth", element, componentName, canUseNewInspector, styleConfigs);
+const calculateTextAlignInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("textAlign", element, componentName, canUseNewInspector, styleConfigs);
+const calculatePaddingInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  return calculateStyleProperty(element, styleConfigs.padding);
+};
+const calculateMarginInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
+  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
+    return null;
+  }
+  return calculateStyleProperty(element, styleConfigs.margin);
+};
+const calculateColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("color", element, componentName, canUseNewInspector, styleConfigs);
+const calculateBackgroundColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("backgroundColor", element, componentName, canUseNewInspector, styleConfigs);
+const calculateBorderColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderColor", element, componentName, canUseNewInspector, styleConfigs);

package/dist/types/Inspector/Inspector.d.ts

@@ -0,0 +1,102 @@
+import { type ReactNode } from 'react';
+import type { Fiber } from 'react-reconciler';
+import { type CodeInfo } from './utils';
+/**
+ * the inspect meta info that is sent to the callback when an element is hovered over or clicked.
+ */
+export interface InspectParams {
+  /** hover / click event target dom element */
+  element: HTMLElement;
+  /** nearest named react component fiber for dom element */
+  fiber?: Fiber;
+  /** source file line / column / path info for react component */
+  codeInfo?: CodeInfo;
+  /** react component name for dom element */
+  name?: string;
+  title?: string;
+}
+/**
+ * `v2.0.0` changes:
+ *   - make 'Ctrl + Shift + Alt + C' as default shortcut on Windows/Linux
+ *   - export `defaultHotkeys`
+ */
+export declare const defaultHotkeys: () => string[];
+export interface InspectorProps {
+  /**
+   * Inspector Component toggle hotkeys,
+   *
+   * supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys
+   *
+   * @default - `['Ctrl', 'Shift', 'Command', 'C']` on macOS, `['Ctrl', 'Shift', 'Alt', 'C']` on other platforms.
+   *
+   * Setting `keys={null}` explicitly means that disable use hotkeys to trigger it.
+   */
+  keys?: string[] | null;
+  /**
+   * If setting `active` prop, the Inspector will be a Controlled React Component,
+   *   you need to control the `true`/`false` state to active the Inspector.
+   *
+   * If not setting `active` prop, this only a Uncontrolled component that
+   *   will activate/deactivate by hotkeys.
+   *
+   * > add in version `v2.0.0`
+   */
+  active?: boolean;
+  /**
+   * Trigger by `active` state change, includes:
+   * - hotkeys toggle, before activate/deactivate Inspector
+   * - Escape / Click, before deactivate Inspector
+   *
+   * will NOT trigger by `active` prop change.
+   *
+   * > add in version `v2.0.0`
+   */
+  onActiveChange?: (active: boolean) => void;
+  /**
+   * Whether to disable all behavior include hotkeys listening or trigger,
+   * will automatically disable in production environment by default.
+   *
+   * @default `true` if `NODE_ENV` is 'production', otherwise is `false`.
+   * > add in version `v2.0.0`
+   */
+  disable?: boolean;
+  /**
+   * Callback when left-clicking on an element, with ensuring the source code info is found.
+   *
+   * By setting the `onInspectElement` prop, the default behavior ("open local IDE") will be disabled,
+   *   that means you want to manually handle the source info, or handle how to goto editor by yourself.
+   *
+   * You can also use builtin `gotoServerEditor` utils in `onInspectElement` to get origin behavior ("open local IDE on server-side"),
+   *   it looks like:
+   *
+   * ```tsx
+   * import { Inspector, gotoServerEditor } from 'react-dev-inspector'
+   *
+   * <Inspector
+   *   onInspectElement={({ codeInfo }) => {
+   *     ...; // your processing
+   *     gotoServerEditor(codeInfo)
+   *   }}
+   * </Inspector>
+   * ```
+   *
+   * > add in version `v2.0.0`
+   */
+  onInspectElement?: (params: Required<InspectParams>) => void;
+  /** Callback when hovering on an element */
+  onHoverElement?: (params: InspectParams) => void;
+  /**
+   * Callback when left-clicking on an element.
+   */
+  onClickElement?: (params: InspectParams) => void;
+  /** any children of react nodes */
+  children?: ReactNode;
+  /**
+   * custom handler for component name and info display
+   * @param name component name
+   * @param info component info (file path)
+   * @returns [displayName, displayInfo] tuple for display
+   */
+  handleCodeInfo?: (name: string, info?: string) => [string, string];
+}
+export declare const Inspector: (props: InspectorProps) => JSX.Element;