@stsgs1980/fab-inspector 3.4.1 → 3.5.0

package/box-model-section.tsx

@@ -1,97 +0,0 @@
-import type { BoxModel } from './types';
-
-function fmt(val: string): string {
-  if (val === '0px') return '0';
-  return val;
-}
-
-function BoxRow({
-  top,
-  right,
-  bottom,
-  left,
-  color,
-  bg,
-  label,
-  inner,
-}: {
-  top: string; right: string; bottom: string; left: string;
-  color: string; bg: string; label: string;
-  inner: React.ReactNode;
-}) {
-  const allSame = top === right && right === bottom && bottom === left;
-  const display = allSame ? fmt(top) : `${fmt(top)} ${fmt(right)} ${fmt(bottom)} ${fmt(left)}`;
-
-  return (
-    <div className="flex items-center gap-2 text-[10px] font-mono">
-      <span className="w-12 text-right text-[#8B949E] flex-shrink-0">{label}</span>
-      <div className="flex-1">
-        <div
-          className="border text-center py-1 text-[#E6EDF3] rounded-sm"
-          style={{ borderColor: color, backgroundColor: bg }}
-        >
-          {allSame ? (
-            <span>{display}</span>
-          ) : (
-            <div className="flex justify-between px-1">
-              <span>{fmt(top)}</span>
-              <span>{fmt(right)}</span>
-              <span>{fmt(bottom)}</span>
-              <span>{fmt(left)}</span>
-            </div>
-          )}
-          <div className="mt-1">{inner}</div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function BoxModelSection({ boxModel }: { boxModel: BoxModel }) {
-  return (
-    <div className="px-4 py-2.5 border-b border-[#30363D]">
-      <div className="text-[11px] font-semibold text-[#8B949E] uppercase tracking-wider mb-2">
-        Box Model
-      </div>
-      <div className="flex flex-col gap-1.5">
-        <BoxRow
-          top={boxModel.marginTop}
-          right={boxModel.marginRight}
-          bottom={boxModel.marginBottom}
-          left={boxModel.marginLeft}
-          color="#D29922"
-          bg="rgba(210, 153, 34, 0.06)"
-          label="margin"
-          inner={
-            <BoxRow
-              top={boxModel.borderTop}
-              right={boxModel.borderRight}
-              bottom={boxModel.borderBottom}
-              left={boxModel.borderLeft}
-              color="#58A6FF"
-              bg="rgba(88, 166, 255, 0.06)"
-              label="border"
-              inner={
-                <BoxRow
-                  top={boxModel.paddingTop}
-                  right={boxModel.paddingRight}
-                  bottom={boxModel.paddingBottom}
-                  left={boxModel.paddingLeft}
-                  color="#3FB950"
-                  bg="rgba(63, 185, 80, 0.06)"
-                  label="padding"
-                  inner={
-                    <div className="text-center py-1 bg-[#0D1117] rounded-sm text-[#E6EDF3]">
-                      <div className="text-[9px] text-[#6E7681]">content</div>
-                      <div>{fmt(boxModel.width)} x {fmt(boxModel.height)}</div>
-                    </div>
-                  }
-                />
-              }
-            />
-          }
-        />
-      </div>
-    </div>
-  );
-}

package/highlight-overlay.tsx

@@ -1,23 +0,0 @@
-export function HighlightOverlay({
-  highlightBox,
-}: {
-  highlightBox: DOMRect;
-}) {
-  return (
-    <div
-      data-se-highlight
-      className="fixed pointer-events-none z-[90]"
-      style={{
-        top: highlightBox.top,
-        left: highlightBox.left,
-        width: highlightBox.width,
-        height: highlightBox.height,
-        border: '1px dashed #58A6FF',
-        backgroundColor: 'rgba(56, 139, 253, 0.06)',
-        borderRadius: '3px',
-        transition: 'all 0.1s ease-out',
-      }}
-      aria-hidden="true"
-    />
-  );
-}

package/index.ts

@@ -1,10 +0,0 @@
-export { SelectElementFab } from './select-element-fab';
-
-export type {
-  SourceInfo,
-  ElementInfo,
-  SnippetData,
-  BoxModel,
-} from './types';
-
-export { dataSrcPlugin } from './plugins/data-src-plugin';

package/inspector-fab.tsx

@@ -1,63 +0,0 @@
-import { motion, AnimatePresence } from 'framer-motion';
-
-export function InspectorFab({
-  active,
-  onToggle,
-  showTooltip,
-}: {
-  active: boolean;
-  onToggle: () => void;
-  showTooltip: boolean;
-}) {
-  return (
-    <>
-      <motion.button
-        data-se-fab
-        onClick={onToggle}
-        className={`
-          fixed bottom-6 right-6 z-[90] w-12 h-12 rounded-full
-          flex items-center justify-center
-          shadow-lg transition-all duration-200 cursor-pointer
-          focus:outline-none focus-visible:ring-2 focus-visible:ring-[#58A6FF] focus-visible:ring-offset-2 focus-visible:ring-offset-[#0D1117]
-          ${active
-            ? 'bg-[#1F6FEB] text-[#F0F6FC] shadow-[#1F6FEB]/30'
-            : 'bg-[#21262D] text-[#E6EDF3]/80 hover:bg-[#30363D] hover:text-[#E6EDF3] shadow-black/40'
-          }
-        `}
-        whileHover={{ scale: 1.08 }}
-        whileTap={{ scale: 0.95 }}
-        aria-label={active ? 'Закрыть инспектор элементов' : 'Открыть инспектор элементов'}
-        title={active ? 'Закрыть инспектор (Esc)' : 'Инспектор элементов'}
-      >
-        {active ? (
-          <svg width="20" height="20" 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>
-        ) : (
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-            <path d="m19 19-14-14" />
-            <path d="m5 5 14 0" />
-            <path d="m5 5 0 14" />
-          </svg>
-        )}
-        <span className="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-[#58A6FF] text-[#0D1117] text-[9px] font-bold flex items-center justify-center leading-none select-none">
-          3.4.1
-        </span>
-      </motion.button>
-
-      <AnimatePresence>
-        {showTooltip && (
-          <motion.div
-            initial={{ opacity: 0, y: 8 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: 8 }}
-            className="fixed bottom-20 right-6 z-[90] bg-[#21262D] text-[#E6EDF3] text-xs px-3 py-1.5 rounded-lg shadow-lg border border-[#30363D] whitespace-nowrap pointer-events-none"
-          >
-            Кликните на элемент для инспекции
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </>
-  );
-}

package/inspector-panel.tsx

@@ -1,190 +0,0 @@
-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/panel-sections.tsx

@@ -1,207 +0,0 @@
-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>
-  );
-}