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

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

@@ -0,0 +1,71 @@
+/**
+ * mirror from https://github.com/facebook/react/blob/v16.13.1/packages/react-devtools-shared/src/backend/views/utils.js
+ */
+import { type Rect, type BoxSizing } from './utils';
+interface Box {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+declare class OverlayRect {
+  node: HTMLElement;
+  border: HTMLElement;
+  padding: HTMLElement;
+  content: HTMLElement;
+  constructor(doc: Document, container: HTMLElement);
+  remove(): void;
+  update(box: Rect, dims: BoxSizing): void;
+}
+declare class ClickOverlayRect {
+  node: HTMLElement;
+  border: HTMLElement;
+  constructor(doc: Document, container: HTMLElement);
+  remove(): void;
+  update(box: Rect, dims: BoxSizing): void;
+}
+declare class OverlayTip {
+  tip: HTMLElement;
+  nameSpan: HTMLElement;
+  titleDiv: HTMLElement;
+  constructor(doc: Document, container: HTMLElement);
+  remove(): void;
+  updateText(name: string): void;
+  updatePosition(dims: Box, bounds: Box): void;
+  invisible(): void;
+}
+export declare class Overlay {
+  window: Window;
+  tipBoundsWindow: Window;
+  container: HTMLElement;
+  tip: OverlayTip;
+  rects: Array<OverlayRect>;
+  removeCallback: (this: Overlay) => void;
+  handleCodeInfo?: (name: string, info?: string) => [string, string];
+  resizeObserver: ResizeObserver;
+  currentElements?: HTMLElement[];
+  currentName?: string;
+  constructor(handleCodeInfo?: (name: string, info?: string) => [string, string]);
+  remove(): void;
+  setRemoveCallback(callback: () => void): void;
+  inspect(nodes: Array<HTMLElement>, name?: string, info?: string): void;
+  updatePositions(nodes: Array<HTMLElement>, name?: string, info?: string): void;
+  clearRect(): void;
+}
+export declare class ClickOverlay {
+  window: Window;
+  container: HTMLElement;
+  rect: ClickOverlayRect | null;
+  tip: OverlayTip;
+  tipBoundsWindow: Window;
+  resizeObserver: ResizeObserver;
+  currentElement: HTMLElement | null;
+  currentName: string | undefined;
+  positionUpdate?: () => void;
+  constructor(positionUpdate?: () => void);
+  remove(): void;
+  highlight(element: HTMLElement, name?: string): void;
+  updatePosition(element: HTMLElement): void;
+  clearRect(): void;
+}
+export {};

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

@@ -0,0 +1,3 @@
+export * from './use-layout-effect';
+export * from './use-effect-event';
+export * from './use-mouse';

package/dist/types/Inspector/hooks/use-effect-event.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Simple but not robust implement of React18 experimental hook `useEffectEvent`,
+ *   to keep compatible with other React versions.
+ *
+ * for some more robust implements, you can see:
+ * - `useEvent` in https://github.com/scottrippey/react-use-event-hook
+ * - `useMemoizedFn` in https://github.com/alibaba/hooks
+ */
+export declare const useEffectEvent: <T extends (...args: any[]) => any>(callback?: T | undefined) => T;

package/dist/types/Inspector/hooks/use-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect as _useLayoutEffect } from 'react';
+export declare const useLayoutEffect: typeof _useLayoutEffect;

package/dist/types/Inspector/hooks/use-mouse.d.ts

@@ -0,0 +1,9 @@
+import { type MutableRefObject } from 'react';
+export declare const useMousePosition: ({
+  disable
+}: {
+  disable?: boolean | undefined;
+}) => MutableRefObject<{
+  x: number;
+  y: number;
+}>;

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

@@ -0,0 +1 @@
+export { Inspector } from './Inspector';

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

@@ -0,0 +1,34 @@
+import type { Fiber } from 'react-reconciler';
+/**
+ * only native html tag fiber's type will be string,
+ * all the others (component / functional component / context) type will be function or object
+ */
+export declare const isNativeTagFiber: (fiber?: Fiber) => boolean;
+/**
+ * react fiber symbol types see:
+ * https://github.com/facebook/react/blob/v17.0.0/packages/shared/ReactSymbols.js#L39-L58
+ */
+export declare const isReactSymbolFiber: (fiber?: Fiber) => boolean;
+export declare const isForwardRef: (fiber?: Fiber) => boolean;
+type FiberHTMLElement = HTMLElement & {
+  [fiberKey: string]: Fiber | undefined;
+};
+/**
+ * https://stackoverflow.com/questions/29321742/react-getting-a-component-from-a-dom-element-for-debugging
+ */
+export declare const getElementFiber: (element: FiberHTMLElement) => Fiber | undefined;
+export declare const getElementFiberUpward: (element: HTMLElement | null) => Fiber | undefined;
+/**
+ * find first parent of native html tag or react component,
+ * skip react Provider / Context / ForwardRef / Fragment etc.
+ */
+export declare const getDirectParentFiber: (child: Fiber) => Fiber | null;
+/**
+ * The displayName property is not guaranteed to be a string.
+ * It's only safe to use for our purposes if it's a string.
+ * github.com/facebook/react-devtools/issues/803
+ *
+ * https://github.com/facebook/react/blob/v17.0.0/packages/react-devtools-shared/src/utils.js#L90-L112
+ */
+export declare const getFiberName: (fiber?: Fiber) => string | undefined;
+export {};

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

@@ -0,0 +1,8 @@
+/**
+ * mirror from https://github.com/facebook/react/blob/v16.13.1/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+ */
+export type StopFunction = () => void;
+export declare function setupHighlighter(handlers: {
+  onPointerOver?: (element: HTMLElement) => void;
+  onClick?: (element: HTMLElement) => void;
+}): StopFunction;

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

@@ -0,0 +1,3 @@
+export * from './highlight';
+export * from './inspect';
+export * from './overlay';

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

@@ -0,0 +1,110 @@
+import type { Fiber } from 'react-reconciler';
+export interface CodeInfo {
+  name?: string;
+  lineNumber: string;
+  columnNumber: string;
+  /**
+   * code source file relative path to dev-server cwd(current working directory)
+   * need use with `react-dev-inspector/plugins/babel`
+   */
+  relativePath?: string;
+  /**
+   * code source file absolute path
+   * just need use with `@babel/plugin-transform-react-jsx-source` which auto set by most framework
+   */
+  absolutePath?: string;
+  /**
+   * metadata information from babel plugin
+   */
+  metadata?: {
+    elementStart: number;
+    elementEnd: number;
+    tagStart: number;
+    tagEnd: number;
+    classNameLiteral: boolean;
+  };
+}
+/**
+ * props that injected into react nodes
+ *
+ * like <div data-inspector-line="2" data-inspector-column="3" data-inspector-relative-path="xxx/ooo" />
+ * this props will be record in fiber
+ */
+export interface CodeDataAttribute {
+  'data-miaoda-line': string;
+  'data-miaoda-column': string;
+  'data-miaoda-relative-path': string;
+  'data-miaoda-component-name'?: string;
+  'data-miaoda-metadata'?: string;
+}
+/**
+ * react fiber property `_debugSource` created by `@babel/plugin-transform-react-jsx-source`
+ *     https://github.com/babel/babel/blob/v7.16.4/packages/babel-plugin-transform-react-jsx-source/src/index.js
+ *
+ * and injected `__source` property used by `React.createElement`, then pass to `ReactElement`
+ *     https://github.com/facebook/react/blob/v18.0.0/packages/react/src/ReactElement.js#L189
+ *     https://github.com/facebook/react/blob/v18.0.0/packages/react/src/ReactElement.js#L389
+ *     https://github.com/facebook/react/blob/v18.0.0/packages/react/src/ReactElement.js#L447
+ *
+ * finally, used by `createFiberFromElement` to become a fiber property `_debugSource`.
+ *     https://github.com/facebook/react/blob/v18.0.0/packages/react-reconciler/src/ReactFiber.new.js#L648-L649
+ */
+export declare const getCodeInfoFromDebugSource: (fiber?: Fiber) => CodeInfo | undefined;
+/**
+ * code location data-attribute props inject by `react-dev-inspector/plugins/babel`
+ */
+export declare const getCodeInfoFromProps: (fiber?: Fiber) => CodeInfo | undefined;
+export declare const getCodeInfoFromFiber: (fiber?: Fiber) => CodeInfo | undefined;
+/**
+ * give a `base` dom fiber,
+ * and will try to get the human friendly react component `reference` fiber from it;
+ *
+ * rules and examples see below:
+ * *******************************************************
+ *
+ * if parent is html native tag, `reference` is considered to be as same as `base`
+ *
+ *  div                                       div
+ *    └─ h1                                     └─ h1  (<--base) <--reference
+ *      └─ span  (<--base) <--reference           └─ span
+ *
+ * *******************************************************
+ *
+ * if parent is NOT html native tag,
+ *   and parent ONLY have one child (the `base` itself),
+ *   then `reference` is considered to be the parent.
+ *
+ *  Title  <--reference                       Title
+ *    └─ h1  (<--base)                          └─ h1  (<--base) <--reference
+ *      └─ span                                 └─ span
+ *                                              └─ div
+ *
+ * *******************************************************
+ *
+ * while follow the last one,
+ *   "parent" is considered to skip continuous Provider/Customer/ForwardRef components
+ *
+ *  Title  <- reference                       Title  <- reference
+ *    └─ TitleName [ForwardRef]                 └─ TitleName [ForwardRef]
+ *      └─ Context.Customer                       └─ Context.Customer
+ *         └─ Context.Customer                      └─ Context.Customer
+ *          └─ h1  (<- base)                          └─ h1  (<- base)
+ *            └─ span                             └─ span
+ *                                                └─ div
+ *
+ *  Title
+ *    └─ TitleName [ForwardRef]
+ *      └─ Context.Customer
+ *         └─ Context.Customer
+ *          └─ h1  (<- base) <- reference
+ *    └─ span
+ *    └─ div
+ */
+export declare const getReferenceFiber: (baseFiber?: Fiber) => Fiber | undefined;
+export declare const getElementCodeInfo: (element: HTMLElement) => CodeInfo | undefined;
+export declare const getNamedFiber: (baseFiber?: Fiber) => Fiber | undefined;
+export declare const getElementInspect: (element: HTMLElement) => {
+  fiber?: Fiber | undefined;
+  name?: string | undefined;
+  title: string;
+};

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

@@ -0,0 +1,30 @@
+/**
+ * mirror from https://github.com/facebook/react/blob/v16.13.1/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+ *
+ * remove all process for iframe, because iframe only need to think in chrome extension app,
+ * which will deal multiple levels of nesting iframe.
+ */
+export interface Rect {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+}
+export interface BoxSizing {
+  borderTop: number;
+  borderBottom: number;
+  borderLeft: number;
+  borderRight: number;
+  paddingTop: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  paddingRight: number;
+  marginTop: number;
+  marginBottom: number;
+  marginLeft: number;
+  marginRight: number;
+}
+export declare function getNestedBoundingClientRect(node: HTMLElement, boundaryWindow: Window | HTMLElement): Rect;
+export declare function getElementDimensions(domElement: Element): BoxSizing;

package/dist/types/MiaodaInspector/MiaodaInspector.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { type InspectorUIConfig } from '../config/ui-config';
+import './MiaodaInspector.css';
+interface IThemeMeta {
+  themeColors: {
+    title: string;
+    options: {
+      value: string;
+      color: string;
+    }[];
+  };
+  themeRadius: {
+    title: string;
+    options: {
+      value: {
+        pixel: string;
+        rem: string;
+      };
+      iconUrl: string;
+      size: string;
+    }[];
+  };
+  themeSpaces: {
+    title: string;
+    options: {
+      value: {
+        pixel: string;
+        rem: string;
+      };
+      iconUrl: string;
+      size: string;
+    }[];
+  };
+}
+interface MiaodaInspectorProps {
+  cwd: string;
+  theme: {
+    themeColorTokenMap: {
+      light: Record<string, string>;
+      dark: Record<string, string>;
+    };
+    themeMetaOptions: Omit<IThemeMeta, 'colorPrimary' | 'borderRadius' | 'spacing'>;
+    themeToken: InspectorUIConfig;
+  };
+}
+export declare function MiaodaInspector(props: MiaodaInspectorProps): React.JSX.Element;
+export {};

package/dist/types/MiaodaInspector/index.d.ts

@@ -0,0 +1 @@
+export { MiaodaInspector } from './MiaodaInspector';

package/dist/types/config/ui-config.d.ts

@@ -0,0 +1,49 @@
+export interface SelectOption {
+  label: string;
+  value: string;
+  rawValue: string;
+}
+export interface SelectUIConfig {
+  type: 'select';
+  options: SelectOption[];
+}
+export interface SpacingUIConfig {
+  type: 'spacing';
+  options: SelectOption[];
+}
+interface Color {
+  label: string;
+  value: string;
+  type?: 'tailwind' | 'style';
+  rawValue?: string;
+}
+export interface ColorPickerUIConfig {
+  type: 'color-picker';
+  recommendColors: {
+    title: string;
+    options: Color[];
+  }[];
+}
+export interface IconPickerUIConfig {
+  type: 'icon-picker';
+}
+export type UIComponentConfig = SelectUIConfig | ColorPickerUIConfig | IconPickerUIConfig | SpacingUIConfig;
+export interface InspectorUIConfig {
+  version: string;
+  common: {
+    fontSize: UIComponentConfig;
+    fontWeight: UIComponentConfig;
+    borderRadius: UIComponentConfig;
+    borderWidth: UIComponentConfig;
+    textAlign: UIComponentConfig;
+    padding: UIComponentConfig;
+    margin: UIComponentConfig;
+    color: UIComponentConfig;
+    borderColor: UIComponentConfig;
+    backgroundColor: UIComponentConfig;
+  };
+  components?: Record<string, Record<string, UIComponentConfig>>;
+  tokens: Record<string, string>;
+}
+export declare const defaultUIConfig: InspectorUIConfig;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export { MiaodaInspector } from './MiaodaInspector';
+export type { InitConfigMessage, ClearSelectedMessage, EditTextMessage, EditStyleMessage, EditClassNameMessage, PageMountedMessage, TextUpdateMessage, SelectInspectorElementMessage, InspectorInfo, IncomingMessage } from './types';
+export { isOutgoingMessage } from './utils';
+export type { InspectorUIConfig } from './config/ui-config';

package/dist/types/types/iframe-events.d.ts

@@ -0,0 +1,155 @@
+import { type InspectorUIConfig } from '../config/ui-config';
+/**
+ * Iframe message event types for inspector communication
+ */
+export interface IframeMessage<T = unknown> {
+  type: string;
+  data: T;
+}
+export interface EditClassNameMessage extends IframeMessage<{
+  elementId: string;
+  className: string;
+}> {
+  type: 'EditClassName';
+}
+export type IncomingMessage = InitConfigMessage | ClearSelectedMessage | EditTextMessage | EditStyleMessage | EditClassNameMessage;
+export interface InitConfigMessage extends IframeMessage<{
+  inspectorActive?: boolean;
+  userToken?: string;
+  appId?: string;
+  inspectorVersion?: string;
+}> {
+  type: 'InitConfig';
+}
+export interface ClearSelectedMessage extends IframeMessage<{
+  keepModifications?: boolean;
+}> {
+  type: 'ClearSelected';
+}
+export interface EditTextMessage extends IframeMessage<{
+  elementId: string;
+  textContent: string;
+}> {
+  type: 'EditText';
+}
+export interface EditStyleMessage extends IframeMessage<{
+  elementId: string;
+  styles: Record<string, string>;
+}> {
+  type: 'EditStyle';
+}
+export interface PageMountedMessage extends IframeMessage<{
+  version?: string;
+}> {
+  type: 'PageMounted';
+}
+export interface TextUpdateMessage extends IframeMessage<{
+  elementId: string;
+  textContent: string | null;
+}> {
+  type: 'TextUpdate';
+}
+export interface PageScrollMessage extends IframeMessage<Record<string, never>> {
+  type: 'PageScroll';
+}
+export interface ElementResizeMessage extends IframeMessage<{
+  elementId: string;
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+}> {
+  type: 'ElementResize';
+}
+export interface InspectorInfo {
+  columnNumber: string;
+  lineNumber: string;
+  relativePath: string;
+  tagName: string;
+  componentName: string;
+  className: string;
+  x?: number;
+  y?: number;
+  top?: number;
+  bottom?: number;
+  right?: number;
+  left?: number;
+  width?: number;
+  height?: number;
+  textContent?: string;
+  elementId: string;
+  fontSize?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  fontWeight?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  borderRadius?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  borderWidth?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  textAlign?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  padding?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  margin?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  color?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  backgroundColor?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  borderColor?: {
+    value: string;
+    inherited: boolean;
+    tailwindClassName: string;
+  };
+  /**
+   * metadata information from babel plugin
+   */
+  metadata?: {
+    elementStart: number;
+    elementEnd: number;
+    tagStart: number;
+    tagEnd: number;
+    classNameLiteral: boolean;
+  };
+}
+export interface SelectInspectorElementMessage extends IframeMessage<InspectorInfo> {
+  type: 'SelectInspectorElement';
+}
+export interface InspectorUIConfigMessage extends IframeMessage<InspectorUIConfig> {
+  type: 'InspectorUIConfig';
+}
+export type OutgoingMessage = PageMountedMessage | TextUpdateMessage | PageScrollMessage | ElementResizeMessage | SelectInspectorElementMessage | InspectorUIConfigMessage;
+declare global {
+  interface WindowEventMap {
+    message: MessageEvent<IframeMessage>;
+  }
+}

package/dist/types/types/index.d.ts

@@ -0,0 +1 @@
+export { InitConfigMessage, ClearSelectedMessage, EditTextMessage, EditStyleMessage, EditClassNameMessage, OutgoingMessage, PageMountedMessage, TextUpdateMessage, SelectInspectorElementMessage, IncomingMessage, InspectorInfo } from './iframe-events';

package/dist/types/utils/config-mapper.d.ts

@@ -0,0 +1,12 @@
+import type { InspectorUIConfig } from '../config/ui-config';
+export interface StyleCalculationConfig {
+  cssProperty: string;
+  tailwindPrefix: string;
+  map: Record<string | number, string>;
+  defaultValue?: string;
+  transformValue?: (value: string) => string | number;
+  tolerance?: number;
+  skipTailwind?: boolean;
+}
+export declare function getStyleCalculationConfig(config: InspectorUIConfig, propertyName: keyof InspectorUIConfig['common']): StyleCalculationConfig;
+export declare function getAllStyleConfigs(config: InspectorUIConfig): Record<string, StyleCalculationConfig>;

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

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cx(...args: ClassValue[]): string;

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

@@ -0,0 +1,3 @@
+export { getPreviewParentOrigin, postMessage, isIncomingMessage, isOutgoingMessage } from './origin';
+export { cx } from './css';
+export { calculateFontSizeInfo, calculateFontWeightInfo, calculateBorderRadiusInfo, calculateBorderWidthInfo, calculateTextAlignInfo, calculatePaddingInfo, calculateMarginInfo, calculateColorInfo, calculateBackgroundColorInfo, calculateBorderColorInfo } from './style-calculator';

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

@@ -0,0 +1,9 @@
+import { type OutgoingMessage, type IncomingMessage } from '../types';
+export declare function getPreviewParentOrigin(): string;
+export declare function postMessage<T extends OutgoingMessage>(message: T, targetOrigin?: string): void;
+export declare function isOutgoingMessage<T extends OutgoingMessage['type']>(msg: OutgoingMessage, type: T): msg is Extract<OutgoingMessage, {
+  type: T;
+}>;
+export declare function isIncomingMessage<T extends IncomingMessage['type']>(msg: IncomingMessage, type: T): msg is Extract<IncomingMessage, {
+  type: T;
+}>;

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

@@ -0,0 +1,19 @@
+import type { StyleCalculationConfig } from './config-mapper';
+interface StyleCalculationResult {
+  value: string;
+  inherited: boolean;
+  tailwindClassName: string;
+}
+export declare function rgbaToHex(rgba: string): string;
+export declare function calculateStyle(styleName: string, element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>): StyleCalculationResult | null;
+export declare const calculateFontSizeInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateFontWeightInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateBorderRadiusInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateBorderWidthInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateTextAlignInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculatePaddingInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateMarginInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateColorInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateBackgroundColorInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export declare const calculateBorderColorInfo: (element: HTMLElement, componentName: string, canUseNewInspector: boolean, styleConfigs: Record<string, StyleCalculationConfig>) => StyleCalculationResult | null;
+export {};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@lark-apaas/miaoda-inspector",
+  "version": "0.1.0-alpha.1",
+  "description": "Inspector for Lark Apaas",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/lib",
+  "module": "./dist/es",
+  "types": "./dist/types",
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "edenx build --tsconfig tsconfig.build.json",
+    "check-type": "rush check-type",
+    "lint": "eslint . --quiet",
+    "start": "rush storybook",
+    "test": "vitest",
+    "test:cov": "vitest run --coverage",
+    "test:update": "vitest run -u"
+  },
+  "dependencies": {
+    "clsx": "~2.0.0",
+    "hotkeys-js": "^3.8.1",
+    "picocolors": "1.0.0",
+    "react-dev-utils": "12.0.1",
+    "tailwind-merge": "~2.0.0"
+  },
+  "devDependencies": {
+    "@types/react-reconciler": ">=0.26.6",
+    "@edenx/module-tools": "~1.35.1",
+    "@testing-library/react": "^12",
+    "@testing-library/react-hooks": "^8",
+    "@types/node": "^18.17.18",
+    "@types/react": "^17",
+    "eslint": "^8",
+    "react": "^18",
+    "typescript": "^4"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  }
+}