feat: add "right-click to show list" tips message on Inspector Overlay

- theme dark mode support media query with prefers-color-scheme
- add chosen editor params to Inspector callbacks

packages/inspector/src/Inspector/Inspector.tsx

@@ -47,8 +47,18 @@ export interface InspectParams<Element = DOMElement> {
   codeInfo?: CodeInfo;
   /** react component name for dom element */
   name?: string;
+  /**
+   * user chosen prefer editor
+   *
+   * > add in version `v2.1.0`
+   */
+  editor?: TrustedEditor;
 }
 
+type OnInspectElementParams<Element> =
+  & Omit<Required<InspectParams<Element>>, 'editor'>
+  & Pick<InspectParams<Element>, 'editor'>
+
 export interface InspectorProps<Element> {
   /**
    * Inspector Component toggle hotkeys,
@@ -123,7 +133,7 @@ export interface InspectorProps<Element> {
    *
    * > add in version `v2.0.0`
    */
-  onInspectElement?: (params: Required<InspectParams<Element>>) => void;
+  onInspectElement?: (params: OnInspectElementParams<Element>) => void;
 
   /** Callback when hovering on an element */
   onHoverElement?: (params: InspectParams<Element>) => void;
@@ -417,6 +427,7 @@ export const Inspector = function<Element = unknown>(props: InspectorProps<Eleme
       fiber,
       codeInfo,
       name: nameInfo?.name,
+      editor,
     })
 
     if (fiber && codeInfo) {
@@ -425,6 +436,7 @@ export const Inspector = function<Element = unknown>(props: InspectorProps<Eleme
         fiber,
         codeInfo,
         name: nameInfo?.name ?? '',
+        editor,
       })
     }
 

packages/inspector/src/Inspector/types.ts

@@ -56,6 +56,8 @@ export interface Pointer {
  *   and its target element  (like DOM, Three.js etc.)
  * - collect inspection info from its element  (like name, code source position etc.)
  * - show/hide indicator UI on element  (like highlight element, show tooltip for name or code position etc.)
+ *
+ * > add in version `v2.1.0`
  */
 export interface InspectAgent<Element> {
   /**

packages/web-components/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Preview } from 'storybook-solidjs'
 import { withThemeByClassName } from '@storybook/addon-themes'
-import '../src/tailwind.css'
+import '../src/tailwind.less'
 import './storybook.css'
 
 const preview: Preview = {

packages/web-components/src/InspectContextPanel/InspectContextPanel.stories.tsx

@@ -77,12 +77,60 @@ const demoItems: ElementItemProps['item'][] = [
     title: '',
     tags: [
       {
-        label: 'Tag1',
-        background: 'hsl(var(--error))',
+        label: 'gray',
+        background: 'var(--color-tag-gray-1)',
       },
       {
-        label: 'Tag2',
-        background: 'hsl(var(--error))',
+        label: 'red',
+        background: 'var(--color-tag-red-1)',
+      },
+      {
+        label: 'pink',
+        background: 'var(--color-tag-pink-1)',
+      },
+      {
+        label: 'orange',
+        background: 'var(--color-tag-orange-1)',
+      },
+      {
+        label: 'amber',
+        background: 'var(--color-tag-amber-1)',
+      },
+      {
+        label: 'yellow',
+        background: 'var(--color-tag-yellow-1)',
+      },
+      {
+        label: 'lime',
+        background: 'var(--color-tag-lime-1)',
+      },
+      {
+        label: 'green',
+        background: 'var(--color-tag-green-1)',
+      },
+      {
+        label: 'cyan',
+        background: 'var(--color-tag-cyan-1)',
+      },
+      {
+        label: 'lightblue',
+        background: 'var(--color-tag-lightblue-1)',
+      },
+      {
+        label: 'blue',
+        background: 'var(--color-tag-blue-1)',
+      },
+      {
+        label: 'indigo',
+        background: 'var(--color-tag-indigo-1)',
+      },
+      {
+        label: 'violet',
+        background: 'var(--color-tag-violet-1)',
+      },
+      {
+        label: 'purple',
+        background: 'var(--color-tag-purple-1)',
       },
     ],
   },

packages/web-components/src/InspectContextPanel/InspectContextPanel.ts

@@ -15,6 +15,7 @@ import {
 } from '#components'
 import {
   InspectContextPanelRoot,
+  InspectContextPanelTagName,
   type InspectContextPanelElement,
   type InspectContextPanelShowParams,
 } from './InspectContextPanelRoot'
@@ -27,13 +28,13 @@ export class InspectContextPanel<Item extends ItemInfo = ItemInfo> {
 
   constructor() {
     // ensure register with no-side-effect tree-shaking
-    customElement('inspect-context-panel', InspectContextPanelRoot)
+    customElement(InspectContextPanelTagName, InspectContextPanelRoot)
 
     // Find the root window, because overlays are positioned relative to it.
     const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window
 
     const doc = currentWindow.document
-    this.#panel = document.createElement('inspect-context-panel')
+    this.#panel = document.createElement(InspectContextPanelTagName)
     // this.#panel!.setAttribute('popover', '')
     doc.body.appendChild(this.#panel!)
   }

packages/web-components/src/InspectContextPanel/InspectContextPanelRoot.tsx

@@ -15,7 +15,7 @@ import {
   css,
   createStore,
 } from '#utils'
-import tailwindRoot from '../tailwind.css'
+import tailwindRoot from '../tailwind.less'
 import {
   InspectPanel,
   type InspectPanelProps,
@@ -123,8 +123,10 @@ const hostStyles = css`
   }
 `
 
+export const InspectContextPanelTagName = 'inspect-context-panel'
+
 /**
  * that's also no-side-effect for tree-shaking,
  * because it will call again in `ContextPanel` constructor
  */
-customElement('inspect-context-panel', InspectContextPanelRoot)
+customElement(InspectContextPanelTagName, InspectContextPanelRoot)

packages/web-components/src/InspectContextPanel/index.ts

@@ -1,5 +1,6 @@
 export {
   InspectContextPanelRoot,
+  InspectContextPanelTagName,
   type InspectContextPanelElement,
   type InspectContextPanelExpose,
   type InspectContextPanelShowParams,

packages/web-components/src/Overlay/InspectorOverlay.tsx

@@ -11,6 +11,9 @@ import type {
   Rect,
   BoxSizing,
 } from '#floating'
+import {
+  InspectContextPanelTagName,
+} from '../InspectContextPanel'
 import {
   InspectorOverlayRect,
 } from './OverlayRect'
@@ -41,6 +44,10 @@ export const InspectorOverlay: ComponentType<Record<string, never>> = (_props, {
     boundingRect?: Rect;
     /** target element margin/border/padding */
     boxSizing?: BoxSizing;
+    /**
+     * only show OverlayTips's corner hint message when no opened InspectContextPanel
+     */
+    hasInspectContextPanel?: boolean;
   }>({
     display: 'none',
     title: '',
@@ -68,13 +75,15 @@ export const InspectorOverlay: ComponentType<Record<string, never>> = (_props, {
 
     const boxSizing = getBoxSizing(element)
     const boundingRect = getBoundingRect(element)
+    const hasInspectContextPanel = document.getElementsByTagName(InspectContextPanelTagName).length > 0
 
     setInspectInfo({
       display: 'block',
       title,
       info,
       boundingRect,
       boxSizing,
+      hasInspectContextPanel,
     })
   }
 
@@ -109,6 +118,7 @@ export const InspectorOverlay: ComponentType<Record<string, never>> = (_props, {
         info={inspectInfo().info}
         boundingRect={inspectInfo().boundingRect}
         boxSizing={inspectInfo().boxSizing}
+        showCornerHint={!inspectInfo().hasInspectContextPanel}
       />
       <style>
         {hostStyles}
@@ -127,8 +137,10 @@ const hostStyles = css`
   }
 `
 
+export const InspectorOverlayTagName = 'inspector-overlay'
+
 /**
  * that's also no-side-effect for tree-shaking,
  * because it will call again in `Overlay` constructor
  */
-customElement('inspector-overlay', InspectorOverlay)
+customElement(InspectorOverlayTagName, InspectorOverlay)

packages/web-components/src/Overlay/Overlay.stories.tsx

@@ -149,7 +149,7 @@ export const CornerItems = () => {
     <For
       each={positions()}
     >
-      {position => {
+      {(position, index) => {
         const boundingRect: Rect = {
           ...position,
           width: itemSize,
@@ -163,9 +163,10 @@ export const CornerItems = () => {
               boxSizing={boxSizing}
             />
             <InspectorOverlayTip
-              title='div in <Card>'
+              title={(index() % 2) ? 'div in <Card>' : 'p'}
               boundingRect={boundingRect}
               boxSizing={boxSizing}
+              showCornerHint
             />
           </>
         )
@@ -275,7 +276,8 @@ export const MoveableDragItem: StoryFn<{ itemSize: 'normal' | 'full' | 'large' }
       />
       <InspectorOverlayTip
         title='div in <Card>'
-        info='relative/path/to/packages/component.tsx'
+        info='longlonglonglonglonglonglonglong/relative/path/to/packages/component.tsx'
+        showCornerHint
         {...sizing()}
       />
     </div>

packages/web-components/src/Overlay/Overlay.ts

@@ -11,6 +11,7 @@ import {
 } from './utils'
 import {
   InspectorOverlay,
+  InspectorOverlayTagName,
   type InspectorOverlayElement,
 } from './InspectorOverlay'
 
@@ -21,14 +22,14 @@ export class Overlay {
 
   constructor() {
     // ensure register with no-side-effect tree-shaking
-    customElement('inspector-overlay', InspectorOverlay)
+    customElement(InspectorOverlayTagName, InspectorOverlay)
 
     // Find the root window, because overlays are positioned relative to it.
     const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window
     this.window = currentWindow
 
     const doc = currentWindow.document
-    this.overlay = document.createElement('inspector-overlay')
+    this.overlay = document.createElement(InspectorOverlayTagName)
     // this.overlay.setAttribute('popover', '')
     doc.body.appendChild(this.overlay)
   }