react-dev-panel 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +270 -68
- package/dist/index.cjs +79 -46
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +79 -46
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/dist/index.js
CHANGED
|
@@ -5,14 +5,14 @@ import Stack from '@mui/material/Stack';
|
|
|
5
5
|
import Tooltip2 from '@mui/material/Tooltip';
|
|
6
6
|
import Collapse from '@mui/material/Collapse';
|
|
7
7
|
import TextField from '@mui/material/TextField';
|
|
8
|
-
import
|
|
8
|
+
import Typography3 from '@mui/material/Typography';
|
|
9
9
|
import IconButton from '@mui/material/IconButton';
|
|
10
10
|
import ToggleButton from '@mui/material/ToggleButton';
|
|
11
11
|
import { useTheme, alpha } from '@mui/material/styles';
|
|
12
12
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
13
13
|
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
|
14
14
|
import { createContext, useContext, useMemo, useState, useEffect, useSyncExternalStore, useCallback, useRef } from 'react';
|
|
15
|
-
import { LuBug, LuTrash2, LuX, LuSearch, LuGauge, LuWorkflow, LuWrench, LuChevronRight, LuChevronDown,
|
|
15
|
+
import { LuBug, LuTrash2, LuX, LuSearch, LuGauge, LuWorkflow, LuWrench, LuChevronRight, LuChevronDown, LuFileCode, LuLink, LuClipboardCopy, LuCopy, LuMousePointerClick, LuLayers, LuFile, LuArrowUp, LuRefreshCw, LuCheck } from 'react-icons/lu';
|
|
16
16
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
17
17
|
import { onLCP, onCLS, onINP, onFCP, onTTFB } from 'web-vitals';
|
|
18
18
|
import Switch from '@mui/material/Switch';
|
|
@@ -590,7 +590,7 @@ function SectionBlock({ section }) {
|
|
|
590
590
|
return /* @__PURE__ */ jsxs(Box6, { children: [
|
|
591
591
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1, py: 0.25, gap: 0.5, flexWrap: "wrap" }, children: [
|
|
592
592
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.75, sx: { minWidth: 0 }, children: [
|
|
593
|
-
/* @__PURE__ */ jsx(
|
|
593
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4 }, children: section.label }),
|
|
594
594
|
showTabs && /* @__PURE__ */ jsx(ToggleButtonGroup, { size: "small", exclusive: true, value: activeTab.key, onChange: (_, next) => next && setActiveTabKey(next), sx: TOGGLE_SX, children: section.tabs.map((t) => /* @__PURE__ */ jsx(ToggleButton, { value: t.key, children: t.label }, t.key)) })
|
|
595
595
|
] }),
|
|
596
596
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
|
|
@@ -661,7 +661,7 @@ function LogRow({ entry, showPath }) {
|
|
|
661
661
|
),
|
|
662
662
|
/* @__PURE__ */ jsxs(Box6, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
663
663
|
/* @__PURE__ */ jsx(
|
|
664
|
-
|
|
664
|
+
Typography3,
|
|
665
665
|
{
|
|
666
666
|
variant: "body2",
|
|
667
667
|
sx: {
|
|
@@ -675,8 +675,8 @@ function LogRow({ entry, showPath }) {
|
|
|
675
675
|
}
|
|
676
676
|
),
|
|
677
677
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 0.25 }, children: [
|
|
678
|
-
/* @__PURE__ */ jsx(
|
|
679
|
-
showPath && entry.path && /* @__PURE__ */ jsx(
|
|
678
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace" }, children: formatTime(entry.timestamp) }),
|
|
679
|
+
showPath && entry.path && /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace", wordBreak: "break-all" }, children: entry.path })
|
|
680
680
|
] })
|
|
681
681
|
] }),
|
|
682
682
|
expandable && /* @__PURE__ */ jsx(Box6, { sx: { flexShrink: 0, color: "text.disabled", transform: open ? "rotate(180deg)" : "none", transition: "transform 0.15s", mt: 0.25 }, children: /* @__PURE__ */ jsx(LuChevronDown, { size: 14 }) })
|
|
@@ -730,7 +730,7 @@ function DevLogsPanel({ onClose }) {
|
|
|
730
730
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider", flexShrink: 0 }, children: [
|
|
731
731
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
732
732
|
/* @__PURE__ */ jsx(LuBug, { size: 16 }),
|
|
733
|
-
/* @__PURE__ */ jsx(
|
|
733
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Developer Logs" }),
|
|
734
734
|
/* @__PURE__ */ jsx(Chip, { label: `${filtered.length}/${logs.length}`, size: "small", variant: "soft", sx: { height: 18, fontSize: "0.65rem" } })
|
|
735
735
|
] }),
|
|
736
736
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, children: [
|
|
@@ -760,7 +760,7 @@ function DevLogsPanel({ onClose }) {
|
|
|
760
760
|
}
|
|
761
761
|
)
|
|
762
762
|
] }),
|
|
763
|
-
/* @__PURE__ */ jsx(Box6, { sx: { flex: 1, overflowY: "auto", p: 1 }, children: filtered.length === 0 ? /* @__PURE__ */ jsx(
|
|
763
|
+
/* @__PURE__ */ jsx(Box6, { sx: { flex: 1, overflowY: "auto", p: 1 }, children: filtered.length === 0 ? /* @__PURE__ */ jsx(Typography3, { variant: "body2", sx: { color: "text.disabled", textAlign: "center", py: 4 }, children: logs.length === 0 ? "No activity captured this session." : "No logs match the current filters." }) : /* @__PURE__ */ jsx(Stack, { spacing: 0.75, children: filtered.map((entry) => /* @__PURE__ */ jsx(LogRow, { entry, showPath: !thisPageOnly }, entry.id)) }) })
|
|
764
764
|
]
|
|
765
765
|
}
|
|
766
766
|
);
|
|
@@ -856,12 +856,12 @@ function PagePerformancePanel({ onClose }) {
|
|
|
856
856
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: [
|
|
857
857
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
858
858
|
/* @__PURE__ */ jsx(LuGauge, { size: 16 }),
|
|
859
|
-
/* @__PURE__ */ jsx(
|
|
859
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Page Performance" })
|
|
860
860
|
] }),
|
|
861
861
|
/* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsx(LuX, { size: 16 }) })
|
|
862
862
|
] }),
|
|
863
863
|
/* @__PURE__ */ jsxs(Box6, { sx: { flex: 1, overflowY: "auto", p: 1.5 }, children: [
|
|
864
|
-
order.every((k) => !data[k]) && /* @__PURE__ */ jsx(
|
|
864
|
+
order.every((k) => !data[k]) && /* @__PURE__ */ jsx(Typography3, { variant: "body2", sx: { color: "text.disabled" }, children: "Collecting Web Vitals\u2026 interact with the page (INP needs an interaction)." }),
|
|
865
865
|
order.map((key) => {
|
|
866
866
|
const m = data[key];
|
|
867
867
|
if (!m) return null;
|
|
@@ -877,13 +877,13 @@ function PagePerformancePanel({ onClose }) {
|
|
|
877
877
|
sx: { height: 20, fontSize: "0.65rem", fontWeight: 700 }
|
|
878
878
|
}
|
|
879
879
|
),
|
|
880
|
-
/* @__PURE__ */ jsxs(
|
|
880
|
+
/* @__PURE__ */ jsxs(Typography3, { variant: "body2", sx: { fontFamily: "monospace", fontWeight: 700 }, children: [
|
|
881
881
|
m.unit === "ms" ? Math.round(m.value) : m.value.toFixed(3),
|
|
882
882
|
m.unit
|
|
883
883
|
] }),
|
|
884
|
-
/* @__PURE__ */ jsx(
|
|
884
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: `${RATING_COLOR[m.rating]}.main`, ml: "auto" }, children: m.rating })
|
|
885
885
|
] }),
|
|
886
|
-
/* @__PURE__ */ jsx(
|
|
886
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.25 }, children: HINTS[key] })
|
|
887
887
|
] }, key);
|
|
888
888
|
})
|
|
889
889
|
] })
|
|
@@ -924,36 +924,43 @@ function GraphSearch({
|
|
|
924
924
|
}
|
|
925
925
|
);
|
|
926
926
|
}
|
|
927
|
+
var EDITORS = [
|
|
928
|
+
{ key: "vscode", label: "VS Code" },
|
|
929
|
+
{ key: "cursor", label: "Cursor" },
|
|
930
|
+
{ key: "webstorm", label: "WebStorm" }
|
|
931
|
+
];
|
|
927
932
|
function Chips({ names, onSelect }) {
|
|
928
933
|
return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0.5, useFlexGap: true, sx: { flexWrap: "wrap" }, children: names.map((n) => /* @__PURE__ */ jsx(Chip, { label: n, size: "small", variant: "outlined", onClick: () => onSelect(n), sx: { height: 18, fontSize: "0.62rem", fontFamily: "monospace" } }, n)) });
|
|
929
934
|
}
|
|
930
935
|
function Row({ label, children }) {
|
|
931
936
|
return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 0.5 }, children: [
|
|
932
|
-
/* @__PURE__ */ jsx(
|
|
937
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { minWidth: 56, color: "text.disabled", fontWeight: 600, flexShrink: 0 }, children: label }),
|
|
933
938
|
/* @__PURE__ */ jsx(Box6, { sx: { minWidth: 0, flex: 1 }, children })
|
|
934
939
|
] });
|
|
935
940
|
}
|
|
936
941
|
function NodeDetails({
|
|
937
942
|
selected,
|
|
943
|
+
editor,
|
|
938
944
|
onOpen,
|
|
945
|
+
onOpenEditor,
|
|
939
946
|
onCopyInfo,
|
|
940
947
|
onCopyPath,
|
|
941
948
|
onSelectName
|
|
942
949
|
}) {
|
|
943
950
|
if (!selected) {
|
|
944
|
-
return /* @__PURE__ */ jsx(
|
|
951
|
+
return /* @__PURE__ */ jsx(Typography3, { variant: "body2", sx: { color: "text.disabled", px: 0.5, py: 1 }, children: "Nothing selected. Enable inspect mode and click a component, or pick one from the tree." });
|
|
945
952
|
}
|
|
946
953
|
return /* @__PURE__ */ jsxs(Box6, { sx: (t) => ({ p: 1.25, borderRadius: 1.5, border: "1px solid", borderColor: "divider", bgcolor: alpha(t.palette.grey[500], 0.06) }), children: [
|
|
947
954
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.75, children: [
|
|
948
955
|
/* @__PURE__ */ jsx(Chip, { label: selected.componentName, size: "small", color: "primary", variant: "soft", sx: { height: 20, fontSize: "0.68rem", fontWeight: 700 } }),
|
|
949
|
-
selected.domTag && /* @__PURE__ */ jsx(
|
|
956
|
+
selected.domTag && /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace" }, children: `<${selected.domTag}>` })
|
|
950
957
|
] }),
|
|
951
|
-
selected.filePath ? /* @__PURE__ */ jsxs(
|
|
958
|
+
selected.filePath ? /* @__PURE__ */ jsxs(Typography3, { variant: "caption", sx: { display: "block", mt: 0.75, fontFamily: "monospace", fontSize: "0.68rem", wordBreak: "break-all", color: "text.secondary" }, children: [
|
|
952
959
|
selected.filePath,
|
|
953
960
|
selected.line ? `:${selected.line}` : "",
|
|
954
961
|
selected.line && selected.column ? `:${selected.column}` : ""
|
|
955
|
-
] }) : /* @__PURE__ */ jsx(
|
|
956
|
-
selected.route && /* @__PURE__ */ jsx(Row, { label: "Route", children: /* @__PURE__ */ jsx(
|
|
962
|
+
] }) : /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { display: "block", mt: 0.75, color: "warning.main" }, children: "No source path \u2014 run the graph generator (npx dev-panel-graph) or mount an adapter." }),
|
|
963
|
+
selected.route && /* @__PURE__ */ jsx(Row, { label: "Route", children: /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { fontFamily: "monospace" }, children: selected.route }) }),
|
|
957
964
|
selected.parent && /* @__PURE__ */ jsx(Row, { label: "Parent", children: /* @__PURE__ */ jsx(Chips, { names: [selected.parent], onSelect: onSelectName }) }),
|
|
958
965
|
selected.children.length > 0 && /* @__PURE__ */ jsx(Row, { label: "Renders", children: /* @__PURE__ */ jsx(Chips, { names: selected.children, onSelect: onSelectName }) }),
|
|
959
966
|
selected.imports.length > 0 && /* @__PURE__ */ jsx(Row, { label: "Imports", children: /* @__PURE__ */ jsx(Chips, { names: selected.imports, onSelect: onSelectName }) }),
|
|
@@ -963,6 +970,21 @@ function NodeDetails({
|
|
|
963
970
|
p.value
|
|
964
971
|
] }, p.name)) }) }),
|
|
965
972
|
/* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "contained", startIcon: /* @__PURE__ */ jsx(LuFileCode, { size: 14 }), onClick: onOpen, sx: { textTransform: "none", fontSize: "0.72rem", py: 0.4, mt: 1.25 }, children: "Open in editor" }),
|
|
973
|
+
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, useFlexGap: true, sx: { flexWrap: "wrap", mt: 0.75 }, children: [
|
|
974
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled" }, children: "force:" }),
|
|
975
|
+
EDITORS.map((opt) => /* @__PURE__ */ jsx(
|
|
976
|
+
Button,
|
|
977
|
+
{
|
|
978
|
+
size: "small",
|
|
979
|
+
variant: opt.key === editor ? "contained" : "text",
|
|
980
|
+
startIcon: /* @__PURE__ */ jsx(LuLink, { size: 12 }),
|
|
981
|
+
onClick: () => onOpenEditor(opt.key),
|
|
982
|
+
sx: { textTransform: "none", fontSize: "0.66rem", py: 0.1, minWidth: 0 },
|
|
983
|
+
children: opt.label
|
|
984
|
+
},
|
|
985
|
+
opt.key
|
|
986
|
+
))
|
|
987
|
+
] }),
|
|
966
988
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [
|
|
967
989
|
/* @__PURE__ */ jsx(Tooltip2, { title: "Copy component info", placement: "top", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onCopyInfo, sx: { border: "1px solid", borderColor: "divider", borderRadius: 1 }, children: /* @__PURE__ */ jsx(LuClipboardCopy, { size: 15 }) }) }),
|
|
968
990
|
/* @__PURE__ */ jsx(Tooltip2, { title: "Copy file path", placement: "top", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onCopyPath, disabled: !selected.filePath && !selected.absFilePath, sx: { border: "1px solid", borderColor: "divider", borderRadius: 1 }, children: /* @__PURE__ */ jsx(LuCopy, { size: 15 }) }) }) })
|
|
@@ -1234,7 +1256,7 @@ function formatForCopy(s) {
|
|
|
1234
1256
|
}
|
|
1235
1257
|
var MAX_DEPTH = 6;
|
|
1236
1258
|
function Label({ children }) {
|
|
1237
|
-
return /* @__PURE__ */ jsx(
|
|
1259
|
+
return /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { display: "block", mt: 1, mb: 0.25, color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4, fontSize: "0.6rem" }, children });
|
|
1238
1260
|
}
|
|
1239
1261
|
function RowActions({ node, onOpen, onCopy }) {
|
|
1240
1262
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1275,7 +1297,7 @@ function RowShell({
|
|
|
1275
1297
|
children: [
|
|
1276
1298
|
/* @__PURE__ */ jsx(Box6, { sx: { width: 16, display: "grid", placeItems: "center", color: "text.disabled" }, children: caret }),
|
|
1277
1299
|
/* @__PURE__ */ jsx(
|
|
1278
|
-
|
|
1300
|
+
Typography3,
|
|
1279
1301
|
{
|
|
1280
1302
|
onClick: onLabel,
|
|
1281
1303
|
variant: "caption",
|
|
@@ -1343,7 +1365,7 @@ function ComponentGraphTree(p) {
|
|
|
1343
1365
|
},
|
|
1344
1366
|
node.id
|
|
1345
1367
|
)),
|
|
1346
|
-
results.length === 0 && /* @__PURE__ */ jsxs(
|
|
1368
|
+
results.length === 0 && /* @__PURE__ */ jsxs(Typography3, { variant: "caption", sx: { color: "text.disabled", pl: 1 }, children: [
|
|
1347
1369
|
"No components match \u201C",
|
|
1348
1370
|
search,
|
|
1349
1371
|
"\u201D."
|
|
@@ -1351,7 +1373,7 @@ function ComponentGraphTree(p) {
|
|
|
1351
1373
|
] });
|
|
1352
1374
|
}
|
|
1353
1375
|
if (!selected) {
|
|
1354
|
-
return /* @__PURE__ */ jsx(
|
|
1376
|
+
return /* @__PURE__ */ jsx(Typography3, { variant: "body2", sx: { color: "text.disabled", px: 0.5, py: 1 }, children: "Lock a component (hover + click) or search above to explore the tree." });
|
|
1355
1377
|
}
|
|
1356
1378
|
return /* @__PURE__ */ jsxs(Box6, { children: [
|
|
1357
1379
|
selected.parents.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1378,7 +1400,7 @@ function ComponentGraphTree(p) {
|
|
|
1378
1400
|
selected.children.length,
|
|
1379
1401
|
")"
|
|
1380
1402
|
] }),
|
|
1381
|
-
selected.children.length === 0 ? /* @__PURE__ */ jsx(
|
|
1403
|
+
selected.children.length === 0 ? /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled", pl: 1.5 }, children: "No child components detected." }) : selected.children.map((c) => /* @__PURE__ */ jsx(Branch, { name: c, depth: 0, trail: new Set(selected.nodeId ? [selected.nodeId] : []), p }, `c:${c}`)),
|
|
1382
1404
|
selected.imports.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1383
1405
|
/* @__PURE__ */ jsxs(Label, { children: [
|
|
1384
1406
|
"Imports (",
|
|
@@ -1425,13 +1447,13 @@ function ComponentGraphPageList({
|
|
|
1425
1447
|
};
|
|
1426
1448
|
}, [scan, route]);
|
|
1427
1449
|
if (!graph) {
|
|
1428
|
-
return /* @__PURE__ */ jsx(
|
|
1450
|
+
return /* @__PURE__ */ jsx(Typography3, { variant: "body2", sx: { color: "text.disabled", px: 0.5, py: 1 }, children: "Load the component graph (Graph tab) to map mounted components to source files." });
|
|
1429
1451
|
}
|
|
1430
1452
|
const q = query.trim().toLowerCase();
|
|
1431
1453
|
const filtered = q ? items.filter((i) => i.name.toLowerCase().includes(q) || i.node.filePath.toLowerCase().includes(q)) : items;
|
|
1432
1454
|
return /* @__PURE__ */ jsxs(Box6, { children: [
|
|
1433
1455
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 0.5 }, children: [
|
|
1434
|
-
/* @__PURE__ */ jsxs(
|
|
1456
|
+
/* @__PURE__ */ jsxs(Typography3, { variant: "caption", sx: { color: "text.secondary" }, children: [
|
|
1435
1457
|
/* @__PURE__ */ jsx(Box6, { component: "span", sx: { fontFamily: "monospace", color: "info.main" }, children: route ?? "/" }),
|
|
1436
1458
|
" ",
|
|
1437
1459
|
"\xB7 ",
|
|
@@ -1442,7 +1464,7 @@ function ComponentGraphPageList({
|
|
|
1442
1464
|
/* @__PURE__ */ jsx(Button, { size: "small", startIcon: /* @__PURE__ */ jsx(LuRefreshCw, { size: 13 }), onClick: scan, sx: { textTransform: "none", fontSize: "0.7rem", py: 0.25 }, children: "Rescan" })
|
|
1443
1465
|
] }),
|
|
1444
1466
|
/* @__PURE__ */ jsx(Box6, { sx: { mb: 1 }, children: /* @__PURE__ */ jsx(GraphSearch, { value: query, onChange: setQuery, placeholder: "Filter components on this page\u2026" }) }),
|
|
1445
|
-
items.length === 0 ? /* @__PURE__ */ jsx(
|
|
1467
|
+
items.length === 0 ? /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled", pl: 0.5 }, children: "No graph components detected in the live tree. Try Rescan, or regenerate the graph." }) : filtered.length === 0 ? /* @__PURE__ */ jsxs(Typography3, { variant: "caption", sx: { color: "text.disabled", pl: 0.5 }, children: [
|
|
1446
1468
|
"No components match \u201C",
|
|
1447
1469
|
query,
|
|
1448
1470
|
"\u201D."
|
|
@@ -1465,10 +1487,10 @@ function ComponentGraphPageList({
|
|
|
1465
1487
|
children: [
|
|
1466
1488
|
/* @__PURE__ */ jsxs(Box6, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
1467
1489
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
|
|
1468
|
-
/* @__PURE__ */ jsx(
|
|
1490
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { fontFamily: "monospace", fontWeight: 600, fontSize: "0.72rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: name }),
|
|
1469
1491
|
count > 1 && /* @__PURE__ */ jsx(Chip, { label: `\xD7${count}`, size: "small", variant: "soft", sx: { height: 15, fontSize: "0.55rem", "& .MuiChip-label": { px: 0.5 } } })
|
|
1470
1492
|
] }),
|
|
1471
|
-
/* @__PURE__ */ jsx(
|
|
1493
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { display: "block", color: "text.disabled", fontSize: "0.62rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: node.filePath })
|
|
1472
1494
|
] }),
|
|
1473
1495
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.25, className: "rdp-row-actions", sx: { opacity: 0, transition: "opacity 120ms" }, children: [
|
|
1474
1496
|
/* @__PURE__ */ jsx(Tooltip2, { title: "Open in editor", placement: "top", children: /* @__PURE__ */ jsx(IconButton, { size: "small", sx: { p: 0.25 }, onClick: (e) => {
|
|
@@ -1599,10 +1621,10 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1599
1621
|
const route = config.getRoute();
|
|
1600
1622
|
const { enabled, mode, selected, graph, status, search, expanded } = state2;
|
|
1601
1623
|
const openLoc = useCallback(
|
|
1602
|
-
async (sel) => {
|
|
1624
|
+
async (sel, editor) => {
|
|
1603
1625
|
const file = sel?.absFilePath ?? sel?.filePath;
|
|
1604
1626
|
if (!file) return showToast({ message: "No source path available", tone: "error" });
|
|
1605
|
-
const ok = await config.openInEditor?.({ file, line: sel?.line, column: sel?.column }, config.editor);
|
|
1627
|
+
const ok = await config.openInEditor?.({ file, line: sel?.line, column: sel?.column }, editor ?? config.editor);
|
|
1606
1628
|
showToast(ok === false ? { message: "Editor unavailable \u2014 path copied", tone: "info" } : { message: "Opening in your editor\u2026", tone: "success" });
|
|
1607
1629
|
},
|
|
1608
1630
|
[config]
|
|
@@ -1632,7 +1654,18 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1632
1654
|
if (status === "empty") return "Graph not generated \u2014 run `npx dev-panel-graph` (or add an adapter)";
|
|
1633
1655
|
return "Graph endpoint unavailable.";
|
|
1634
1656
|
}, [status, graph]);
|
|
1635
|
-
const details = /* @__PURE__ */ jsx(
|
|
1657
|
+
const details = /* @__PURE__ */ jsx(
|
|
1658
|
+
NodeDetails,
|
|
1659
|
+
{
|
|
1660
|
+
selected,
|
|
1661
|
+
editor: config.editor,
|
|
1662
|
+
onOpen: () => void openLoc(selected),
|
|
1663
|
+
onOpenEditor: (editor) => void openLoc(selected, editor),
|
|
1664
|
+
onCopyInfo: copyInfo,
|
|
1665
|
+
onCopyPath: () => copyPath(selected),
|
|
1666
|
+
onSelectName: selectName
|
|
1667
|
+
}
|
|
1668
|
+
);
|
|
1636
1669
|
return /* @__PURE__ */ jsxs(
|
|
1637
1670
|
Box6,
|
|
1638
1671
|
{
|
|
@@ -1657,7 +1690,7 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1657
1690
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider", flexShrink: 0 }, children: [
|
|
1658
1691
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
1659
1692
|
/* @__PURE__ */ jsx(LuWorkflow, { size: 16 }),
|
|
1660
|
-
/* @__PURE__ */ jsx(
|
|
1693
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Component Graph Inspector" }),
|
|
1661
1694
|
enabled && /* @__PURE__ */ jsx(Chip, { label: "ON", size: "small", color: "success", variant: "soft", sx: { height: 18, fontSize: "0.6rem", fontWeight: 700 } })
|
|
1662
1695
|
] }),
|
|
1663
1696
|
/* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx(LuX, { size: 16 }) })
|
|
@@ -1675,8 +1708,8 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1675
1708
|
},
|
|
1676
1709
|
children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
|
|
1677
1710
|
/* @__PURE__ */ jsxs(Box6, { children: [
|
|
1678
|
-
/* @__PURE__ */ jsx(
|
|
1679
|
-
/* @__PURE__ */ jsx(
|
|
1711
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "body2", sx: { fontWeight: 700 }, children: "Inspect mode" }),
|
|
1712
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.secondary" }, children: enabled ? "Hover the UI, click to lock \xB7 Esc to exit" : "Enable, then hover the UI" })
|
|
1680
1713
|
] }),
|
|
1681
1714
|
/* @__PURE__ */ jsx(Switch, { checked: enabled, onChange: () => toggleInspector(config.graphEndpoint) })
|
|
1682
1715
|
] })
|
|
@@ -1703,11 +1736,11 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1703
1736
|
),
|
|
1704
1737
|
/* @__PURE__ */ jsx(Divider, { sx: { my: 1.5 } }),
|
|
1705
1738
|
mode === "hover" && /* @__PURE__ */ jsxs(Box6, { children: [
|
|
1706
|
-
/* @__PURE__ */ jsx(
|
|
1739
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4 }, children: "Last locked component" }),
|
|
1707
1740
|
/* @__PURE__ */ jsx(Box6, { sx: { mt: 0.5 }, children: details })
|
|
1708
1741
|
] }),
|
|
1709
1742
|
mode === "graph" && /* @__PURE__ */ jsxs(Box6, { children: [
|
|
1710
|
-
/* @__PURE__ */ jsx(
|
|
1743
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { display: "block", mb: 0.5, color: status === "ready" ? "success.main" : "text.disabled" }, children: statusText }),
|
|
1711
1744
|
(status === "empty" || status === "error") && /* @__PURE__ */ jsx(Chip, { size: "small", variant: "outlined", label: "Retry graph load", onClick: () => loadGraph(config.graphEndpoint, true), sx: { mb: 1, height: 22, fontSize: "0.65rem" } }),
|
|
1712
1745
|
/* @__PURE__ */ jsx(GraphSearch, { value: search, onChange: setSearch }),
|
|
1713
1746
|
/* @__PURE__ */ jsx(Box6, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(ComponentGraphTree, { graph, selected, search, expanded, onSelect: selectNode, onToggle: toggleExpanded, onOpen: openNode, onCopy: copyNode }) }),
|
|
@@ -1848,11 +1881,11 @@ function ComponentGraphOverlay() {
|
|
|
1848
1881
|
sx: { height: 18, fontWeight: 700, fontSize: "0.65rem", color: "#fff", bgcolor: alpha(theme.palette.primary.main, 0.5) }
|
|
1849
1882
|
}
|
|
1850
1883
|
),
|
|
1851
|
-
/* @__PURE__ */ jsx(
|
|
1884
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: alpha(theme.palette.common.white, 0.6), fontFamily: "monospace" }, children: `<${hover.domTag}>` })
|
|
1852
1885
|
] }),
|
|
1853
|
-
/* @__PURE__ */ jsx(
|
|
1854
|
-
hover.route && /* @__PURE__ */ jsx(
|
|
1855
|
-
/* @__PURE__ */ jsx(
|
|
1886
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { display: "block", fontFamily: "monospace", fontSize: "0.68rem", wordBreak: "break-all", color: hover.filePath ? alpha(theme.palette.common.white, 0.85) : alpha(theme.palette.warning.light, 0.9) }, children: hover.filePath ? `${hover.filePath}${hover.line ? `:${hover.line}` : ""}` : "source resolved from graph on lock" }),
|
|
1887
|
+
hover.route && /* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { display: "block", fontSize: "0.62rem", color: alpha(theme.palette.common.white, 0.45) }, children: hover.route }),
|
|
1888
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { display: "block", mt: 0.5, fontSize: "0.6rem", color: alpha(theme.palette.common.white, 0.5) }, children: "click to lock \xB7 \u2318/Ctrl + click to open \xB7 Esc to exit" })
|
|
1856
1889
|
]
|
|
1857
1890
|
}
|
|
1858
1891
|
),
|
|
@@ -1874,7 +1907,7 @@ function ComponentGraphOverlay() {
|
|
|
1874
1907
|
boxShadow: "0 8px 28px rgba(0,0,0,0.45)"
|
|
1875
1908
|
},
|
|
1876
1909
|
children: /* @__PURE__ */ jsx(
|
|
1877
|
-
|
|
1910
|
+
Typography3,
|
|
1878
1911
|
{
|
|
1879
1912
|
variant: "caption",
|
|
1880
1913
|
sx: { fontWeight: 600, color: state2.toast.tone === "success" ? "success.light" : state2.toast.tone === "error" ? "error.light" : "common.white" },
|
|
@@ -2073,8 +2106,8 @@ function Launcher({ tools: tools2, onOpenTool }) {
|
|
|
2073
2106
|
children: [
|
|
2074
2107
|
/* @__PURE__ */ jsx(ToolTile, { color: "primary", size: 34, children: /* @__PURE__ */ jsx(LuWrench, { size: 17 }) }),
|
|
2075
2108
|
/* @__PURE__ */ jsxs(Box6, { sx: { minWidth: 0 }, children: [
|
|
2076
|
-
/* @__PURE__ */ jsx(
|
|
2077
|
-
/* @__PURE__ */ jsx(
|
|
2109
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "subtitle2", sx: { fontWeight: 700, lineHeight: 1.2 }, children: "Developer Tools" }),
|
|
2110
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.secondary" }, children: "Internal utilities" })
|
|
2078
2111
|
] })
|
|
2079
2112
|
]
|
|
2080
2113
|
}
|
|
@@ -2092,8 +2125,8 @@ function Launcher({ tools: tools2, onOpenTool }) {
|
|
|
2092
2125
|
children: [
|
|
2093
2126
|
/* @__PURE__ */ jsx(ToolTile, { color: tool.color ?? "primary", children: tool.icon }),
|
|
2094
2127
|
/* @__PURE__ */ jsxs(Box6, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
2095
|
-
/* @__PURE__ */ jsx(
|
|
2096
|
-
/* @__PURE__ */ jsx(
|
|
2128
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "subtitle2", sx: { fontWeight: 600, lineHeight: 1.3 }, children: tool.title }),
|
|
2129
|
+
/* @__PURE__ */ jsx(Typography3, { variant: "caption", sx: { color: "text.secondary", display: "block" }, children: tool.subtitle })
|
|
2097
2130
|
] }),
|
|
2098
2131
|
/* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: 0.25 }, children: [
|
|
2099
2132
|
/* @__PURE__ */ jsx(ToolBadge, { tool }),
|