@stsgs1980/fab-inspector 3.4.1

package/inspector-panel.tsx

@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import type { ElementInfo, SnippetData } from './types';
+import {
+  SourceSection,
+  ClassesSection,
+  TextSection,
+  CssPathSection,
+  HtmlSection,
+  StylesSection,
+  SnippetSection,
+} from './panel-sections';
+import { BoxModelSection } from './box-model-section';
+
+export function InspectorPanel({
+  elementInfo,
+  panelPos,
+  isDragging,
+  onDragStart,
+  onClose,
+  snippet,
+  snippetLoading,
+}: {
+  elementInfo: ElementInfo;
+  panelPos: { x: number; y: number };
+  isDragging: boolean;
+  onDragStart: (e: React.MouseEvent) => void;
+  onClose: () => void;
+  snippet: SnippetData | null;
+  snippetLoading: boolean;
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <motion.div
+      ref={(node) => {
+        if (node) {
+          (node as unknown as HTMLElement).setAttribute('data-se-panel', '');
+        }
+      }}
+      initial={{ opacity: 0, scale: 0.95, y: 4 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.95, y: 4 }}
+      transition={{ duration: 0.15 }}
+      className={`fixed z-[95] bg-[#161B22] rounded-lg shadow-[0_8px_32px_rgba(0,0,0,0.4)] border border-[#30363D] overflow-hidden${isDragging ? '' : ' cursor-default'}`}
+      style={{
+        top: panelPos.y,
+        left: panelPos.x,
+        width: 400,
+        maxHeight: 'calc(100vh - 32px)',
+        userSelect: isDragging ? 'none' : 'auto',
+      }}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {/* Header (drag handle) */}
+      <div
+        onMouseDown={onDragStart}
+        className={`flex items-center justify-between px-4 py-2.5 bg-[#1C2128] border-b border-[#30363D] select-none${isDragging ? ' cursor-grabbing' : ' cursor-grab'}`}
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          <span className="inline-flex items-center justify-center w-5 h-5 rounded bg-[#1F6FEB] text-[#F0F6FC] text-[10px] font-bold flex-shrink-0">
+            &lt;/&gt;
+          </span>
+          <span className="text-sm font-semibold text-[#E6EDF3] truncate">
+            {elementInfo.tag}
+            {elementInfo.id && <span className="text-[#58A6FF]">#{elementInfo.id}</span>}
+          </span>
+          {elementInfo.source && (
+            <span className="text-[11px] text-[#6E7681] font-mono truncate hidden sm:inline">
+              {elementInfo.source.file.split('/').pop()}:{elementInfo.source.line}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-0.5 flex-shrink-0">
+          {elementInfo.source && (
+            <button
+              onClick={() => {
+                const lines = [
+                  elementInfo.source ? `File: ${elementInfo.source.file}:${elementInfo.source.line}` : '',
+                  `Tag: <${elementInfo.tag}${elementInfo.id ? `#${elementInfo.id}` : ''}>`,
+                  elementInfo.text ? `Text: "${elementInfo.text}"` : '',
+                ].filter(Boolean).join('\n');
+                navigator.clipboard.writeText(lines).catch(() => {});
+              }}
+              className="p-1.5 rounded hover:bg-[#21262D] text-[#8B949E] hover:text-[#58A6FF] transition-colors cursor-pointer"
+              aria-label="Copy task context"
+              title="Copy task context (file, tag, text)"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+                <polyline points="14 2 14 8 20 8" />
+                <line x1="16" y1="13" x2="8" y2="13" />
+                <line x1="16" y1="17" x2="8" y2="17" />
+                <line x1="10" y1="9" x2="8" y2="9" />
+              </svg>
+            </button>
+          )}
+          {elementInfo.source && (
+            <button
+              onClick={() =>
+                navigator.clipboard
+                  .writeText(`${elementInfo.source!.file}:${elementInfo.source!.line}`)
+                  .catch(() => {})
+              }
+              className="p-1.5 rounded hover:bg-[#21262D] text-[#8B949E] hover:text-[#58A6FF] transition-colors cursor-pointer"
+              aria-label="Copy file path"
+              title="Copy file:line"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+              </svg>
+            </button>
+          )}
+          {/* Always-visible quick copy: tag + id + classes + text.
+              Работает без data-src — можно скопировать базу из свёрнутой панели. */}
+          <button
+            onClick={() => {
+              const parts = [
+                `<${elementInfo.tag}${elementInfo.id ? `#${elementInfo.id}` : ''}>`,
+                elementInfo.classes ? elementInfo.classes : '',
+                elementInfo.text ? `"${elementInfo.text}"` : '',
+              ].filter(Boolean);
+              navigator.clipboard.writeText(parts.join('\n')).catch(() => {});
+            }}
+            className="p-1.5 rounded hover:bg-[#21262D] text-[#8B949E] hover:text-[#58A6FF] transition-colors cursor-pointer"
+            aria-label="Скопировать информацию об элементе"
+            title="Копировать (тег + классы + текст)"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+            </svg>
+          </button>
+          <div className="w-px h-4 bg-[#30363D] mx-0.5" />
+          <button
+            onClick={() => setExpanded((v) => !v)}
+            className="p-1.5 rounded hover:bg-[#21262D] text-[#8B949E] hover:text-[#E6EDF3] transition-colors cursor-pointer"
+            aria-label={expanded ? 'Свернуть детали' : 'Развернуть детали'}
+            title={expanded ? 'Свернуть' : 'Детали'}
+          >
+            <svg
+              width="14" height="14" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
+              style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </button>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded hover:bg-[#DA3633]/20 text-[#8B949E] hover:text-[#F85149] transition-colors cursor-pointer"
+            aria-label="Закрыть панель"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {/* Collapsible content */}
+      <AnimatePresence initial={false}>
+        {expanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: 'easeInOut' }}
+            className="overflow-hidden"
+          >
+            <div className="overflow-y-auto custom-scrollbar" style={{ maxHeight: 'calc(100vh - 120px)' }}>
+              {elementInfo.source && <SourceSection source={elementInfo.source} />}
+              {elementInfo.classes && <ClassesSection classes={elementInfo.classes} />}
+              {elementInfo.text && <TextSection text={elementInfo.text} />}
+              {elementInfo.cssPath && <CssPathSection cssPath={elementInfo.cssPath} />}
+              <HtmlSection outerHTML={elementInfo.outerHTML} />
+              <StylesSection styles={elementInfo.computedStyles} />
+              {elementInfo.boxModel && <BoxModelSection boxModel={elementInfo.boxModel} />}
+              {elementInfo.source && (
+                <SnippetSection source={elementInfo.source} snippet={snippet} snippetLoading={snippetLoading} />
+              )}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@stsgs1980/fab-inspector",
+  "version": "3.4.1",
+  "description": "Visual element inspector for Next.js dev mode — GitHub Dark themed, with SyntaxHighlighter and Box-model visualization.",
+  "license": "MIT",
+  "author": "STS",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stsgs1980/FabInspector.git"
+  },
+  "keywords": [
+    "inspector",
+    "devtools",
+    "nextjs",
+    "react",
+    "element-inspector",
+    "dom-inspector",
+    "box-model",
+    "github-dark"
+  ],
+  "peerDependencies": {
+    "framer-motion": ">=11.0.0",
+    "next": ">=15.0.0",
+    "react": ">=19.0.0",
+    "react-syntax-highlighter": ">=15.0.0"
+  },
+  "scripts": {
+    "install:inspector": "bash scripts/install.sh",
+    "uninstall:inspector": "bash scripts/uninstall.sh",
+    "update:inspector": "bash scripts/update.sh",
+    "lint": "eslint . --max-warnings=0",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./types": "./types.ts",
+    "./api/source": "./api-source-route.ts",
+    "./plugins/data-src-plugin": "./plugins/data-src-plugin.ts",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "fab-inspector": "./cli/init.mjs"
+  },
+  "files": [
+    "*.ts",
+    "*.tsx",
+    "plugins/",
+    "cli/",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/panel-sections.tsx

@@ -0,0 +1,207 @@
+import type { ElementInfo, SnippetData } from './types';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+function CopyButton({ text, label }: { text: string; label?: string }) {
+  const copy = () => navigator.clipboard.writeText(text).catch(() => {});
+  return (
+    <button
+      onClick={copy}
+      className="text-[10px] text-[#58A6FF] hover:text-[#79C0FF] transition-colors cursor-pointer"
+      title={label ?? 'Копировать'}
+    >
+      {label ?? 'копировать'}
+    </button>
+  );
+}
+
+export function SourceSection({ source }: { source: NonNullable<ElementInfo['source']> }) {
+  const copy = () =>
+    navigator.clipboard.writeText(`${source.file}:${source.line}`).catch(() => {});
+  return (
+    <div className="px-4 py-2.5 bg-[#0D1117] border-b border-[#30363D]">
+      <div className="flex items-center justify-between mb-1">
+        <div className="text-[11px] font-semibold text-[#58A6FF] uppercase tracking-wider">
+          Источник
+        </div>
+        <CopyButton text={`${source.file}:${source.line}`} />
+      </div>
+      <div
+        className="font-mono text-xs text-[#E6EDF3] cursor-pointer hover:text-[#58A6FF] transition-colors break-all"
+        onClick={copy}
+        title="Кликните, чтобы скопировать"
+      >
+        {source.file}
+        <span className="text-[#58A6FF]">:{source.line}</span>
+      </div>
+    </div>
+  );
+}
+
+export function ClassesSection({ classes }: { classes: string }) {
+  const copy = () => navigator.clipboard.writeText(classes).catch(() => {});
+  return (
+    <div className="px-4 py-2.5 border-b border-[#30363D]">
+      <div className="flex items-center justify-between mb-1">
+        <div className="text-[11px] font-semibold text-[#8B949E] uppercase tracking-wider">Classes</div>
+        <CopyButton text={classes} />
+      </div>
+      <div
+        className="font-mono text-xs text-[#E6EDF3] bg-[#0D1117] rounded px-2.5 py-1.5 break-all cursor-pointer hover:bg-[#161B22] transition-colors border border-[#30363D]"
+        onClick={copy}
+        title="Кликните, чтобы скопировать"
+      >
+        {classes.length > 300 ? classes.slice(0, 300) + '...' : classes}
+      </div>
+    </div>
+  );
+}
+
+export function TextSection({ text }: { text: string }) {
+  const copy = () => navigator.clipboard.writeText(text).catch(() => {});
+  return (
+    <div className="px-4 py-2.5 border-b border-[#30363D]">
+      <div className="flex items-center justify-between mb-1">
+        <div className="text-[11px] font-semibold text-[#8B949E] uppercase tracking-wider">Text</div>
+        <CopyButton text={text} />
+      </div>
+      <div
+        className="text-xs text-[#E6EDF3] bg-[#0D1117] rounded px-2.5 py-1.5 cursor-pointer hover:bg-[#161B22] transition-colors border border-[#30363D]"
+        onClick={copy}
+        title="Кликните, чтобы скопировать текст"
+      >
+        {text}
+      </div>
+    </div>
+  );
+}
+
+export function CssPathSection({ cssPath }: { cssPath: string }) {
+  return (
+    <div className="px-4 py-2.5 border-b border-[#30363D]">
+      <div className="flex items-center justify-between mb-1">
+        <div className="text-[11px] font-semibold text-[#8B949E] uppercase tracking-wider">CSS Path</div>
+        <CopyButton text={cssPath} />
+      </div>
+      <div
+        className="font-mono text-[11px] text-[#E6EDF3] bg-[#0D1117] rounded px-2.5 py-1.5 break-all cursor-pointer hover:bg-[#161B22] transition-colors border border-[#30363D]"
+        onClick={() => navigator.clipboard.writeText(cssPath).catch(() => {})}
+        title="Кликните, чтобы скопировать CSS-путь"
+      >
+        {cssPath}
+      </div>
+    </div>
+  );
+}
+
+export function HtmlSection({ outerHTML }: { outerHTML: string }) {
+  return (
+    <div className="px-4 py-2.5 border-b border-[#30363D]">
+      <div className="flex items-center justify-between mb-1">
+        <div className="text-[11px] font-semibold text-[#8B949E] uppercase tracking-wider">HTML</div>
+        <CopyButton text={outerHTML} />
+      </div>
+      <pre
+        className="font-mono text-[11px] text-[#E6EDF3] bg-[#0D1117] rounded px-2.5 py-1.5 overflow-x-auto whitespace-pre-wrap break-all cursor-pointer hover:bg-[#161B22] transition-colors max-h-40 border border-[#30363D]"
+        onClick={() => navigator.clipboard.writeText(outerHTML).catch(() => {})}
+        title="Кликните, чтобы скопировать HTML"
+      >
+        {outerHTML}
+      </pre>
+    </div>
+  );
+}
+
+export function StylesSection({ styles }: { styles: Record<string, string> }) {
+  return (
+    <div className="px-4 py-2.5 border-b border-[#30363D]">
+      <div className="text-[11px] font-semibold text-[#8B949E] uppercase tracking-wider mb-1.5">
+        Styles
+      </div>
+      <div className="grid grid-cols-2 gap-1.5">
+        <div className="bg-[#0D1117] rounded px-2 py-1 text-[11px] font-mono text-[#E6EDF3] border border-[#30363D]">
+          {styles.width} x {styles.height}
+        </div>
+        <div className="bg-[#0D1117] rounded px-2 py-1 text-[11px] font-mono text-[#E6EDF3] border border-[#30363D]">
+          {styles.fontSize}
+        </div>
+        <div className="bg-[#0D1117] rounded px-2 py-1 text-[11px] font-mono text-[#E6EDF3] border border-[#30363D]">
+          weight: {styles.fontWeight}
+        </div>
+        <div className="bg-[#0D1117] rounded px-2 py-1 text-[11px] font-mono text-[#E6EDF3] border border-[#30363D]">
+          lh: {styles.lineHeight}
+        </div>
+      </div>
+      <div className="mt-1.5 flex items-center gap-1.5 bg-[#0D1117] rounded px-2 py-1 text-[11px] font-mono text-[#E6EDF3] border border-[#30363D]">
+        <span
+          className="inline-block w-3 h-3 rounded-sm border border-[#30363D] flex-shrink-0"
+          style={{ backgroundColor: styles.color }}
+        />
+        {styles.color}
+      </div>
+    </div>
+  );
+}
+
+export function SnippetSection({
+  source,
+  snippet,
+  snippetLoading,
+}: {
+  source: NonNullable<ElementInfo['source']>;
+  snippet: SnippetData | null;
+  snippetLoading: boolean;
+}) {
+  const ext = source.file.split('.').pop() || '';
+  const lang = ['tsx', 'jsx'].includes(ext) ? 'tsx' : 'typescript';
+
+  return (
+    <div className="px-4 py-2.5">
+      <div className="text-[11px] font-semibold text-[#8B949E] uppercase tracking-wider mb-1.5">
+        Код ({source.file.split('/').pop()})
+      </div>
+      {snippetLoading && <div className="text-xs text-[#6E7681] py-2">Загрузка...</div>}
+      {snippet && (
+        <div className="bg-[#0D1117] rounded-md overflow-hidden border border-[#30363D]">
+          <div className="flex items-center justify-between px-3 py-1.5 bg-[#161B22] border-b border-[#30363D]">
+            <span className="text-[#6E7681] text-[10px] font-mono">
+              {snippet.snippet.startLine}–{snippet.snippet.startLine + snippet.snippet.lines.length - 1} из {snippet.totalLines}
+            </span>
+            <CopyButton text={snippet.snippet.lines.join('\n')} label="копировать" />
+          </div>
+          <SyntaxHighlighter
+            language={lang}
+            style={vscDarkPlus}
+            showLineNumbers
+            startingLineNumber={snippet.snippet.startLine}
+            lineProps={(lineNumber) => ({
+              style: lineNumber === snippet.snippet.highlightLine
+                ? { background: 'rgba(56, 139, 253, 0.15)', display: 'block' }
+                : { display: 'block' },
+            })}
+            customStyle={{
+              background: 'transparent',
+              padding: '8px',
+              margin: 0,
+              fontSize: '12px',
+              lineHeight: '1.6',
+            }}
+            lineNumberStyle={{
+              color: '#484F58',
+              minWidth: '2.5em',
+              paddingRight: '1em',
+            }}
+            codeTagProps={{ style: { fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace' } }}
+          >
+            {snippet.snippet.lines.join('\n')}
+          </SyntaxHighlighter>
+        </div>
+      )}
+      {!snippetLoading && !snippet && (
+        <div className="text-xs text-[#6E7681] py-2">
+          Не удалось загрузить исходный код (только в dev-режиме)
+        </div>
+      )}
+    </div>
+  );
+}

package/plugins/data-src-plugin.ts

@@ -0,0 +1,110 @@
+/**
+ * data-src Injector Plugin for Turbopack (Next.js 15.3+)
+ *
+ * Автоматически добавляет data-src="file:line" атрибут на JSX-элементы.
+ *
+ * Подключение в next.config.ts:
+ *   import { dataSrcPlugin } from './src/components/inspector/plugins/data-src-plugin';
+ *
+ *   const nextConfig = {
+ *     experimental: {
+ *       turbo: {
+ *         plugins: [dataSrcPlugin()],
+ *       },
+ *     },
+ *   };
+ *
+ * Пропускает: node_modules, inspector/, строки с комментариями и декларациями.
+ * Только dev-режим (Next.js не вызывает turbo plugins в production build).
+ *
+ * ⚠️  API экспериментальное и может измениться в следующих версиях Next.js.
+ *     При проблемах — добавляйте data-src вручную.
+ */
+
+type TransformResult = { code: string };
+
+export const dataSrcPlugin = () => ({
+  name: 'data-src-injector',
+
+  setup(api: {
+    transform: (
+      opts: { filter: RegExp },
+      handler: (args: { code: string; resource: string }) => TransformResult,
+    ) => void;
+  }) {
+    api.transform({ filter: /\.(tsx|jsx)$/ }, ({ code, resource }) => {
+      if (
+        resource.includes('node_modules') ||
+        resource.includes('/inspector/')
+      ) {
+        return { code };
+      }
+      return injectDataSrc(code, resource);
+    });
+  },
+});
+
+function injectDataSrc(code: string, resource: string): TransformResult {
+  const lines = code.split('\n');
+  const relativePath = toRelativePath(resource);
+  const result: string[] = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNum = i + 1;
+
+    if (isJsxOpeningTag(line) && !hasDataSrc(line)) {
+      result.push(injectOnLine(line, relativePath, lineNum));
+    } else {
+      result.push(line);
+    }
+  }
+
+  return { code: result.join('\n') };
+}
+
+function injectOnLine(line: string, path: string, lineNum: number): string {
+  const attr = ` data-src="${path}:${lineNum}"`;
+  return line.replace(
+    /(<[A-Za-z][A-Za-z0-9-]*)(\s|>)/,
+    (_match, tag: string, after: string) => {
+      if (after === '>') return `${tag}${attr}>`;
+      return `${tag}${attr} `;
+    },
+  );
+}
+
+function isJsxOpeningTag(line: string): boolean {
+  const t = line.trimStart();
+  if (
+    t.startsWith('//') ||
+    t.startsWith('*') ||
+    t.startsWith('/*') ||
+    t.startsWith('import ') ||
+    t.startsWith('export ') ||
+    t.startsWith('type ') ||
+    t.startsWith('interface ') ||
+    t.startsWith('function ') ||
+    t.startsWith('const ') ||
+    t.startsWith('let ') ||
+    t.startsWith('var ') ||
+    t.startsWith('{') ||
+    t.startsWith('}') ||
+    t.startsWith('return ') ||
+    t.startsWith('if ') ||
+    t.startsWith('else')
+  ) {
+    return false;
+  }
+  return /<[A-Za-z][A-Za-z0-9-]*[\s>]/.test(t);
+}
+
+function hasDataSrc(line: string): boolean {
+  return /data-src\s*=/.test(line);
+}
+
+function toRelativePath(resource: string): string {
+  const idx = resource.indexOf('/src/');
+  if (idx !== -1) return resource.slice(idx + 1);
+  return resource.split('/').pop() || resource;
+}

package/select-element-fab.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import { AnimatePresence } from 'framer-motion';
+import { useElementInspector } from './use-element-inspector';
+import { usePanelDrag } from './use-panel-drag';
+import { HighlightOverlay } from './highlight-overlay';
+import { InspectorPanel } from './inspector-panel';
+import { InspectorFab } from './inspector-fab';
+
+// Dev-only guard: FAB не должен попасть в production-bundle.
+// Это страховка на случай, если потребитель забыл поставить пакет
+// в devDependencies или не убрал импорт из layout для прод-сборки.
+// В проде next/build подставляет NODE_ENV=production и tree-shaking
+// вырезает весь модуль целиком (sideEffects: false в package.json).
+const IS_DEV = process.env.NODE_ENV === 'development';
+
+export function SelectElementFab() {
+  const {
+    active,
+    elementInfo,
+    panelPos,
+    setPanelPos,
+    highlightBox,
+    snippet,
+    snippetLoading,
+    toggleActive,
+    closePanel,
+  } = useElementInspector();
+
+  const { isDragging, handleDragStart } = usePanelDrag(panelPos, setPanelPos);
+
+  if (!IS_DEV) return null;
+
+  return (
+    <>
+      {active && highlightBox && <HighlightOverlay highlightBox={highlightBox} />}
+
+      <AnimatePresence>
+        {active && elementInfo && (
+          <InspectorPanel
+            elementInfo={elementInfo}
+            panelPos={panelPos}
+            isDragging={isDragging}
+            onDragStart={handleDragStart}
+            onClose={closePanel}
+            snippet={snippet}
+            snippetLoading={snippetLoading}
+          />
+        )}
+      </AnimatePresence>
+
+      <InspectorFab
+        active={active}
+        onToggle={toggleActive}
+        showTooltip={active && !elementInfo}
+      />
+    </>
+  );
+}

package/types.ts

@@ -0,0 +1,45 @@
+export interface SourceInfo {
+  file: string;
+  line: number;
+}
+
+export interface BoxModel {
+  marginTop: string;
+  marginRight: string;
+  marginBottom: string;
+  marginLeft: string;
+  paddingTop: string;
+  paddingRight: string;
+  paddingBottom: string;
+  paddingLeft: string;
+  borderTop: string;
+  borderRight: string;
+  borderBottom: string;
+  borderLeft: string;
+  width: string;
+  height: string;
+}
+
+export interface ElementInfo {
+  tag: string;
+  id: string;
+  classes: string;
+  rect: DOMRect;
+  text: string;
+  outerHTML: string;
+  cssPath: string;
+  computedStyles: Record<string, string>;
+  boxModel: BoxModel | null;
+  source: SourceInfo | null;
+}
+
+export interface SnippetData {
+  file: string;
+  line: number;
+  totalLines: number;
+  snippet: {
+    startLine: number;
+    lines: string[];
+    highlightLine: number;
+  };
+}