@lark-apaas/miaoda-inspector 1.0.7 → 1.0.8

package/dist/es/Inspector/utils/fiber.mjs

@@ -6,7 +6,7 @@ const isReactSymbolFiber = (fiber) => {
 };
 const isForwardRef = (fiber) => {
   var _a;
-  return ((_a = fiber == null ? void 0 : fiber.type) == null ? void 0 : _a.$$typeof) === Symbol.for("react.forward_ref");
+  return ((_a = fiber == null ? void 0 : fiber.type) == null ? void 0 : _a.$$typeof) === /* @__PURE__ */ Symbol.for("react.forward_ref");
 };
 const getElementFiber = (element) => {
   const fiberKey = Object.keys(element).find(

package/dist/es/MiaodaInspector/MiaodaInspector.mjs

@@ -622,7 +622,7 @@ function MiaodaInspector(props) {
     postMessage({
       type: "PageMounted",
       data: {
-        version: "1.0.7",
+        version: "1.0.8",
         feature: {
           selectParent: true,
           reverseSelect: true

package/dist/es/utils/color.mjs

@@ -0,0 +1,46 @@
+import "../chunk-I4E63NIC.mjs";
+import {
+  parse,
+  to,
+  serialize,
+  ColorSpace,
+  sRGB,
+  HSL,
+  HWB,
+  Lab,
+  LCH,
+  OKLab,
+  OKLCH,
+  P3,
+  REC_2020,
+  A98RGB,
+  ProPhoto
+} from "colorjs.io/fn";
+[
+  // sRGB 系 (rgb/hsl/hwb → rgb())
+  sRGB,
+  HSL,
+  HWB,
+  // Lab 系 (保留原格式)
+  Lab,
+  LCH,
+  OKLab,
+  OKLCH,
+  // 宽色域 (color() 函数)
+  P3,
+  REC_2020,
+  A98RGB,
+  ProPhoto
+].forEach((space) => ColorSpace.register(space));
+function toHex(colorString) {
+  try {
+    const color = parse(colorString);
+    const srgbColor = to(color, "srgb");
+    return serialize(srgbColor, { format: "hex", collapse: false });
+  } catch (e) {
+    return colorString;
+  }
+}
+export {
+  toHex
+};

package/dist/es/utils/style-calculator.mjs

@@ -2,28 +2,8 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-I4E63NIC.mjs";
+import { toHex } from "./color";
 import { isAntdText, isNativeElementName } from "./element-guards";
-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) {
   if (!element || !componentName || !canUseNewInspector || element instanceof SVGElement) {
     return false;
@@ -66,7 +46,7 @@ function calculateStyleProperty(element, config) {
   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 normalizedColor = toHex(currentValue);
     const colorValue = config.transformValue ? config.transformValue(normalizedColor) : normalizedColor;
     tailwindClassName = config.map[colorValue] || `raw:${normalizedColor}`;
   } else {
@@ -129,6 +109,5 @@ export {
   calculateMarginInfo,
   calculatePaddingInfo,
   calculateStyle,
-  calculateTextAlignInfo,
-  rgbaToHex
+  calculateTextAlignInfo
 };

package/dist/lib/Inspector/utils/fiber.js

@@ -34,7 +34,7 @@ const isReactSymbolFiber = (fiber) => {
 };
 const isForwardRef = (fiber) => {
   var _a;
-  return ((_a = fiber == null ? void 0 : fiber.type) == null ? void 0 : _a.$$typeof) === Symbol.for("react.forward_ref");
+  return ((_a = fiber == null ? void 0 : fiber.type) == null ? void 0 : _a.$$typeof) === /* @__PURE__ */ Symbol.for("react.forward_ref");
 };
 const getElementFiber = (element) => {
   const fiberKey = Object.keys(element).find(

package/dist/lib/MiaodaInspector/MiaodaInspector.js

@@ -640,7 +640,7 @@ function MiaodaInspector(props) {
     (0, import_utils2.postMessage)({
       type: "PageMounted",
       data: {
-        version: "1.0.7",
+        version: "1.0.8",
         feature: {
           selectParent: true,
           reverseSelect: true

package/dist/lib/utils/color.js

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to2, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to2, key) && key !== except)
+        __defProp(to2, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to2;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_exports = {};
+__export(color_exports, {
+  toHex: () => toHex
+});
+module.exports = __toCommonJS(color_exports);
+var import_fn = require("colorjs.io/fn");
+[
+  // sRGB 系 (rgb/hsl/hwb → rgb())
+  import_fn.sRGB,
+  import_fn.HSL,
+  import_fn.HWB,
+  // Lab 系 (保留原格式)
+  import_fn.Lab,
+  import_fn.LCH,
+  import_fn.OKLab,
+  import_fn.OKLCH,
+  // 宽色域 (color() 函数)
+  import_fn.P3,
+  import_fn.REC_2020,
+  import_fn.A98RGB,
+  import_fn.ProPhoto
+].forEach((space) => import_fn.ColorSpace.register(space));
+function toHex(colorString) {
+  try {
+    const color = (0, import_fn.parse)(colorString);
+    const srgbColor = (0, import_fn.to)(color, "srgb");
+    return (0, import_fn.serialize)(srgbColor, { format: "hex", collapse: false });
+  } catch (e) {
+    return colorString;
+  }
+}

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

@@ -45,32 +45,11 @@ __export(style_calculator_exports, {
   calculateMarginInfo: () => calculateMarginInfo,
   calculatePaddingInfo: () => calculatePaddingInfo,
   calculateStyle: () => calculateStyle,
-  calculateTextAlignInfo: () => calculateTextAlignInfo,
-  rgbaToHex: () => rgbaToHex
+  calculateTextAlignInfo: () => calculateTextAlignInfo
 });
 module.exports = __toCommonJS(style_calculator_exports);
+var import_color = require("./color");
 var import_element_guards = require("./element-guards");
-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) {
   if (!element || !componentName || !canUseNewInspector || element instanceof SVGElement) {
     return false;
@@ -113,7 +92,7 @@ function calculateStyleProperty(element, config) {
   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 normalizedColor = (0, import_color.toHex)(currentValue);
     const colorValue = config.transformValue ? config.transformValue(normalizedColor) : normalizedColor;
     tailwindClassName = config.map[colorValue] || `raw:${normalizedColor}`;
   } else {

package/dist/types/utils/color.d.ts

@@ -0,0 +1,3 @@
+declare function toHex(colorString: string): string;
+
+export { toHex };

package/dist/types/utils/style-calculator.d.ts

@@ -6,7 +6,6 @@ interface StyleCalculationResult {
     inherited: boolean;
     tailwindClassName: string;
 }
-declare function rgbaToHex(rgba: string): string;
 declare function calculateStyle(styleName: string, element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>): StyleCalculationResult | null;
 declare const calculateFontSizeInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
 declare const calculateFontWeightInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
@@ -19,4 +18,4 @@ declare const calculateColorInfo: (element: HTMLElement, componentName: string,
 declare const calculateBackgroundColorInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
 declare const calculateBorderColorInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
 
-export { calculateBackgroundColorInfo, calculateBorderColorInfo, calculateBorderRadiusInfo, calculateBorderWidthInfo, calculateColorInfo, calculateFontSizeInfo, calculateFontWeightInfo, calculateMarginInfo, calculatePaddingInfo, calculateStyle, calculateTextAlignInfo, rgbaToHex };
+export { calculateBackgroundColorInfo, calculateBorderColorInfo, calculateBorderRadiusInfo, calculateBorderWidthInfo, calculateColorInfo, calculateFontSizeInfo, calculateFontWeightInfo, calculateMarginInfo, calculatePaddingInfo, calculateStyle, calculateTextAlignInfo };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/miaoda-inspector",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Inspector for Lark Apaas",
   "sideEffects": [
     "*.css"
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "clsx": "~2.0.0",
+    "colorjs.io": "^0.5.2",
     "hotkeys-js": "^3.8.1",
     "picocolors": "1.0.0",
     "react-dev-utils": "12.0.1",