react-dev-panel 0.2.0 → 0.2.1
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/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.cjs
CHANGED
|
@@ -6,7 +6,7 @@ var Stack = require('@mui/material/Stack');
|
|
|
6
6
|
var Tooltip2 = require('@mui/material/Tooltip');
|
|
7
7
|
var Collapse = require('@mui/material/Collapse');
|
|
8
8
|
var TextField = require('@mui/material/TextField');
|
|
9
|
-
var
|
|
9
|
+
var Typography3 = require('@mui/material/Typography');
|
|
10
10
|
var IconButton = require('@mui/material/IconButton');
|
|
11
11
|
var ToggleButton = require('@mui/material/ToggleButton');
|
|
12
12
|
var styles = require('@mui/material/styles');
|
|
@@ -31,7 +31,7 @@ var Stack__default = /*#__PURE__*/_interopDefault(Stack);
|
|
|
31
31
|
var Tooltip2__default = /*#__PURE__*/_interopDefault(Tooltip2);
|
|
32
32
|
var Collapse__default = /*#__PURE__*/_interopDefault(Collapse);
|
|
33
33
|
var TextField__default = /*#__PURE__*/_interopDefault(TextField);
|
|
34
|
-
var
|
|
34
|
+
var Typography3__default = /*#__PURE__*/_interopDefault(Typography3);
|
|
35
35
|
var IconButton__default = /*#__PURE__*/_interopDefault(IconButton);
|
|
36
36
|
var ToggleButton__default = /*#__PURE__*/_interopDefault(ToggleButton);
|
|
37
37
|
var InputAdornment__default = /*#__PURE__*/_interopDefault(InputAdornment);
|
|
@@ -613,7 +613,7 @@ function SectionBlock({ section }) {
|
|
|
613
613
|
return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
|
|
614
614
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1, py: 0.25, gap: 0.5, flexWrap: "wrap" }, children: [
|
|
615
615
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.75, sx: { minWidth: 0 }, children: [
|
|
616
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
616
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4 }, children: section.label }),
|
|
617
617
|
showTabs && /* @__PURE__ */ jsxRuntime.jsx(ToggleButtonGroup__default.default, { size: "small", exclusive: true, value: activeTab.key, onChange: (_, next) => next && setActiveTabKey(next), sx: TOGGLE_SX, children: section.tabs.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToggleButton__default.default, { value: t.key, children: t.label }, t.key)) })
|
|
618
618
|
] }),
|
|
619
619
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.5, children: [
|
|
@@ -684,7 +684,7 @@ function LogRow({ entry, showPath }) {
|
|
|
684
684
|
),
|
|
685
685
|
/* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
686
686
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
687
|
-
|
|
687
|
+
Typography3__default.default,
|
|
688
688
|
{
|
|
689
689
|
variant: "body2",
|
|
690
690
|
sx: {
|
|
@@ -698,8 +698,8 @@ function LogRow({ entry, showPath }) {
|
|
|
698
698
|
}
|
|
699
699
|
),
|
|
700
700
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 1, sx: { mt: 0.25 }, children: [
|
|
701
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
702
|
-
showPath && entry.path && /* @__PURE__ */ jsxRuntime.jsx(
|
|
701
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace" }, children: formatTime(entry.timestamp) }),
|
|
702
|
+
showPath && entry.path && /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace", wordBreak: "break-all" }, children: entry.path })
|
|
703
703
|
] })
|
|
704
704
|
] }),
|
|
705
705
|
expandable && /* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { flexShrink: 0, color: "text.disabled", transform: open ? "rotate(180deg)" : "none", transition: "transform 0.15s", mt: 0.25 }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuChevronDown, { size: 14 }) })
|
|
@@ -753,7 +753,7 @@ function DevLogsPanel({ onClose }) {
|
|
|
753
753
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider", flexShrink: 0 }, children: [
|
|
754
754
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
755
755
|
/* @__PURE__ */ jsxRuntime.jsx(lu.LuBug, { size: 16 }),
|
|
756
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
756
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Developer Logs" }),
|
|
757
757
|
/* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: `${filtered.length}/${logs.length}`, size: "small", variant: "soft", sx: { height: 18, fontSize: "0.65rem" } })
|
|
758
758
|
] }),
|
|
759
759
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 0.5, children: [
|
|
@@ -783,7 +783,7 @@ function DevLogsPanel({ onClose }) {
|
|
|
783
783
|
}
|
|
784
784
|
)
|
|
785
785
|
] }),
|
|
786
|
-
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { flex: 1, overflowY: "auto", p: 1 }, children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
786
|
+
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { flex: 1, overflowY: "auto", p: 1 }, children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { 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__ */ jsxRuntime.jsx(Stack__default.default, { spacing: 0.75, children: filtered.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(LogRow, { entry, showPath: !thisPageOnly }, entry.id)) }) })
|
|
787
787
|
]
|
|
788
788
|
}
|
|
789
789
|
);
|
|
@@ -879,12 +879,12 @@ function PagePerformancePanel({ onClose }) {
|
|
|
879
879
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: [
|
|
880
880
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
881
881
|
/* @__PURE__ */ jsxRuntime.jsx(lu.LuGauge, { size: 16 }),
|
|
882
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
882
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Page Performance" })
|
|
883
883
|
] }),
|
|
884
884
|
/* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { size: 16 }) })
|
|
885
885
|
] }),
|
|
886
886
|
/* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, overflowY: "auto", p: 1.5 }, children: [
|
|
887
|
-
order.every((k) => !data[k]) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
887
|
+
order.every((k) => !data[k]) && /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "body2", sx: { color: "text.disabled" }, children: "Collecting Web Vitals\u2026 interact with the page (INP needs an interaction)." }),
|
|
888
888
|
order.map((key) => {
|
|
889
889
|
const m = data[key];
|
|
890
890
|
if (!m) return null;
|
|
@@ -900,13 +900,13 @@ function PagePerformancePanel({ onClose }) {
|
|
|
900
900
|
sx: { height: 20, fontSize: "0.65rem", fontWeight: 700 }
|
|
901
901
|
}
|
|
902
902
|
),
|
|
903
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
903
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Typography3__default.default, { variant: "body2", sx: { fontFamily: "monospace", fontWeight: 700 }, children: [
|
|
904
904
|
m.unit === "ms" ? Math.round(m.value) : m.value.toFixed(3),
|
|
905
905
|
m.unit
|
|
906
906
|
] }),
|
|
907
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
907
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: `${RATING_COLOR[m.rating]}.main`, ml: "auto" }, children: m.rating })
|
|
908
908
|
] }),
|
|
909
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
909
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.25 }, children: HINTS[key] })
|
|
910
910
|
] }, key);
|
|
911
911
|
})
|
|
912
912
|
] })
|
|
@@ -947,36 +947,43 @@ function GraphSearch({
|
|
|
947
947
|
}
|
|
948
948
|
);
|
|
949
949
|
}
|
|
950
|
+
var EDITORS = [
|
|
951
|
+
{ key: "vscode", label: "VS Code" },
|
|
952
|
+
{ key: "cursor", label: "Cursor" },
|
|
953
|
+
{ key: "webstorm", label: "WebStorm" }
|
|
954
|
+
];
|
|
950
955
|
function Chips({ names, onSelect }) {
|
|
951
956
|
return /* @__PURE__ */ jsxRuntime.jsx(Stack__default.default, { direction: "row", spacing: 0.5, useFlexGap: true, sx: { flexWrap: "wrap" }, children: names.map((n) => /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: n, size: "small", variant: "outlined", onClick: () => onSelect(n), sx: { height: 18, fontSize: "0.62rem", fontFamily: "monospace" } }, n)) });
|
|
952
957
|
}
|
|
953
958
|
function Row({ label, children }) {
|
|
954
959
|
return /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 1, sx: { mt: 0.5 }, children: [
|
|
955
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
960
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { minWidth: 56, color: "text.disabled", fontWeight: 600, flexShrink: 0 }, children: label }),
|
|
956
961
|
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { minWidth: 0, flex: 1 }, children })
|
|
957
962
|
] });
|
|
958
963
|
}
|
|
959
964
|
function NodeDetails({
|
|
960
965
|
selected,
|
|
966
|
+
editor,
|
|
961
967
|
onOpen,
|
|
968
|
+
onOpenEditor,
|
|
962
969
|
onCopyInfo,
|
|
963
970
|
onCopyPath,
|
|
964
971
|
onSelectName
|
|
965
972
|
}) {
|
|
966
973
|
if (!selected) {
|
|
967
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
974
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { 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." });
|
|
968
975
|
}
|
|
969
976
|
return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: (t) => ({ p: 1.25, borderRadius: 1.5, border: "1px solid", borderColor: "divider", bgcolor: styles.alpha(t.palette.grey[500], 0.06) }), children: [
|
|
970
977
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.75, children: [
|
|
971
978
|
/* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: selected.componentName, size: "small", color: "primary", variant: "soft", sx: { height: 20, fontSize: "0.68rem", fontWeight: 700 } }),
|
|
972
|
-
selected.domTag && /* @__PURE__ */ jsxRuntime.jsx(
|
|
979
|
+
selected.domTag && /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", fontFamily: "monospace" }, children: `<${selected.domTag}>` })
|
|
973
980
|
] }),
|
|
974
|
-
selected.filePath ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
981
|
+
selected.filePath ? /* @__PURE__ */ jsxRuntime.jsxs(Typography3__default.default, { variant: "caption", sx: { display: "block", mt: 0.75, fontFamily: "monospace", fontSize: "0.68rem", wordBreak: "break-all", color: "text.secondary" }, children: [
|
|
975
982
|
selected.filePath,
|
|
976
983
|
selected.line ? `:${selected.line}` : "",
|
|
977
984
|
selected.line && selected.column ? `:${selected.column}` : ""
|
|
978
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
979
|
-
selected.route && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Route", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
985
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { 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." }),
|
|
986
|
+
selected.route && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Route", children: /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { fontFamily: "monospace" }, children: selected.route }) }),
|
|
980
987
|
selected.parent && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Parent", children: /* @__PURE__ */ jsxRuntime.jsx(Chips, { names: [selected.parent], onSelect: onSelectName }) }),
|
|
981
988
|
selected.children.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Renders", children: /* @__PURE__ */ jsxRuntime.jsx(Chips, { names: selected.children, onSelect: onSelectName }) }),
|
|
982
989
|
selected.imports.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Row, { label: "Imports", children: /* @__PURE__ */ jsxRuntime.jsx(Chips, { names: selected.imports, onSelect: onSelectName }) }),
|
|
@@ -986,6 +993,21 @@ function NodeDetails({
|
|
|
986
993
|
p.value
|
|
987
994
|
] }, p.name)) }) }),
|
|
988
995
|
/* @__PURE__ */ jsxRuntime.jsx(Button__default.default, { fullWidth: true, variant: "contained", startIcon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuFileCode, { size: 14 }), onClick: onOpen, sx: { textTransform: "none", fontSize: "0.72rem", py: 0.4, mt: 1.25 }, children: "Open in editor" }),
|
|
996
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.5, useFlexGap: true, sx: { flexWrap: "wrap", mt: 0.75 }, children: [
|
|
997
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled" }, children: "force:" }),
|
|
998
|
+
EDITORS.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
999
|
+
Button__default.default,
|
|
1000
|
+
{
|
|
1001
|
+
size: "small",
|
|
1002
|
+
variant: opt.key === editor ? "contained" : "text",
|
|
1003
|
+
startIcon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuLink, { size: 12 }),
|
|
1004
|
+
onClick: () => onOpenEditor(opt.key),
|
|
1005
|
+
sx: { textTransform: "none", fontSize: "0.66rem", py: 0.1, minWidth: 0 },
|
|
1006
|
+
children: opt.label
|
|
1007
|
+
},
|
|
1008
|
+
opt.key
|
|
1009
|
+
))
|
|
1010
|
+
] }),
|
|
989
1011
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 1, sx: { mt: 1 }, children: [
|
|
990
1012
|
/* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Copy component info", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onCopyInfo, sx: { border: "1px solid", borderColor: "divider", borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuClipboardCopy, { size: 15 }) }) }),
|
|
991
1013
|
/* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Copy file path", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onCopyPath, disabled: !selected.filePath && !selected.absFilePath, sx: { border: "1px solid", borderColor: "divider", borderRadius: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuCopy, { size: 15 }) }) }) })
|
|
@@ -1257,7 +1279,7 @@ function formatForCopy(s) {
|
|
|
1257
1279
|
}
|
|
1258
1280
|
var MAX_DEPTH = 6;
|
|
1259
1281
|
function Label({ children }) {
|
|
1260
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1282
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { display: "block", mt: 1, mb: 0.25, color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4, fontSize: "0.6rem" }, children });
|
|
1261
1283
|
}
|
|
1262
1284
|
function RowActions({ node, onOpen, onCopy }) {
|
|
1263
1285
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -1298,7 +1320,7 @@ function RowShell({
|
|
|
1298
1320
|
children: [
|
|
1299
1321
|
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { width: 16, display: "grid", placeItems: "center", color: "text.disabled" }, children: caret }),
|
|
1300
1322
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1301
|
-
|
|
1323
|
+
Typography3__default.default,
|
|
1302
1324
|
{
|
|
1303
1325
|
onClick: onLabel,
|
|
1304
1326
|
variant: "caption",
|
|
@@ -1366,7 +1388,7 @@ function ComponentGraphTree(p) {
|
|
|
1366
1388
|
},
|
|
1367
1389
|
node.id
|
|
1368
1390
|
)),
|
|
1369
|
-
results.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1391
|
+
results.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", pl: 1 }, children: [
|
|
1370
1392
|
"No components match \u201C",
|
|
1371
1393
|
search,
|
|
1372
1394
|
"\u201D."
|
|
@@ -1374,7 +1396,7 @@ function ComponentGraphTree(p) {
|
|
|
1374
1396
|
] });
|
|
1375
1397
|
}
|
|
1376
1398
|
if (!selected) {
|
|
1377
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1399
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "body2", sx: { color: "text.disabled", px: 0.5, py: 1 }, children: "Lock a component (hover + click) or search above to explore the tree." });
|
|
1378
1400
|
}
|
|
1379
1401
|
return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
|
|
1380
1402
|
selected.parents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
@@ -1401,7 +1423,7 @@ function ComponentGraphTree(p) {
|
|
|
1401
1423
|
selected.children.length,
|
|
1402
1424
|
")"
|
|
1403
1425
|
] }),
|
|
1404
|
-
selected.children.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1426
|
+
selected.children.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", pl: 1.5 }, children: "No child components detected." }) : selected.children.map((c) => /* @__PURE__ */ jsxRuntime.jsx(Branch, { name: c, depth: 0, trail: new Set(selected.nodeId ? [selected.nodeId] : []), p }, `c:${c}`)),
|
|
1405
1427
|
selected.imports.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1406
1428
|
/* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
|
|
1407
1429
|
"Imports (",
|
|
@@ -1448,13 +1470,13 @@ function ComponentGraphPageList({
|
|
|
1448
1470
|
};
|
|
1449
1471
|
}, [scan, route]);
|
|
1450
1472
|
if (!graph) {
|
|
1451
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1473
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { 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." });
|
|
1452
1474
|
}
|
|
1453
1475
|
const q = query.trim().toLowerCase();
|
|
1454
1476
|
const filtered = q ? items.filter((i) => i.name.toLowerCase().includes(q) || i.node.filePath.toLowerCase().includes(q)) : items;
|
|
1455
1477
|
return /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
|
|
1456
1478
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 0.5 }, children: [
|
|
1457
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1479
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Typography3__default.default, { variant: "caption", sx: { color: "text.secondary" }, children: [
|
|
1458
1480
|
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { component: "span", sx: { fontFamily: "monospace", color: "info.main" }, children: route ?? "/" }),
|
|
1459
1481
|
" ",
|
|
1460
1482
|
"\xB7 ",
|
|
@@ -1465,7 +1487,7 @@ function ComponentGraphPageList({
|
|
|
1465
1487
|
/* @__PURE__ */ jsxRuntime.jsx(Button__default.default, { size: "small", startIcon: /* @__PURE__ */ jsxRuntime.jsx(lu.LuRefreshCw, { size: 13 }), onClick: scan, sx: { textTransform: "none", fontSize: "0.7rem", py: 0.25 }, children: "Rescan" })
|
|
1466
1488
|
] }),
|
|
1467
1489
|
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mb: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(GraphSearch, { value: query, onChange: setQuery, placeholder: "Filter components on this page\u2026" }) }),
|
|
1468
|
-
items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1490
|
+
items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { 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__ */ jsxRuntime.jsxs(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", pl: 0.5 }, children: [
|
|
1469
1491
|
"No components match \u201C",
|
|
1470
1492
|
query,
|
|
1471
1493
|
"\u201D."
|
|
@@ -1488,10 +1510,10 @@ function ComponentGraphPageList({
|
|
|
1488
1510
|
children: [
|
|
1489
1511
|
/* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
1490
1512
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 0.5, children: [
|
|
1491
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1513
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { fontFamily: "monospace", fontWeight: 600, fontSize: "0.72rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: name }),
|
|
1492
1514
|
count > 1 && /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: `\xD7${count}`, size: "small", variant: "soft", sx: { height: 15, fontSize: "0.55rem", "& .MuiChip-label": { px: 0.5 } } })
|
|
1493
1515
|
] }),
|
|
1494
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1516
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { display: "block", color: "text.disabled", fontSize: "0.62rem", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: node.filePath })
|
|
1495
1517
|
] }),
|
|
1496
1518
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 0.25, className: "rdp-row-actions", sx: { opacity: 0, transition: "opacity 120ms" }, children: [
|
|
1497
1519
|
/* @__PURE__ */ jsxRuntime.jsx(Tooltip2__default.default, { title: "Open in editor", placement: "top", children: /* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", sx: { p: 0.25 }, onClick: (e) => {
|
|
@@ -1622,10 +1644,10 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1622
1644
|
const route = config.getRoute();
|
|
1623
1645
|
const { enabled, mode, selected, graph, status, search, expanded } = state2;
|
|
1624
1646
|
const openLoc = react.useCallback(
|
|
1625
|
-
async (sel) => {
|
|
1647
|
+
async (sel, editor) => {
|
|
1626
1648
|
const file = sel?.absFilePath ?? sel?.filePath;
|
|
1627
1649
|
if (!file) return showToast({ message: "No source path available", tone: "error" });
|
|
1628
|
-
const ok = await config.openInEditor?.({ file, line: sel?.line, column: sel?.column }, config.editor);
|
|
1650
|
+
const ok = await config.openInEditor?.({ file, line: sel?.line, column: sel?.column }, editor ?? config.editor);
|
|
1629
1651
|
showToast(ok === false ? { message: "Editor unavailable \u2014 path copied", tone: "info" } : { message: "Opening in your editor\u2026", tone: "success" });
|
|
1630
1652
|
},
|
|
1631
1653
|
[config]
|
|
@@ -1655,7 +1677,18 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1655
1677
|
if (status === "empty") return "Graph not generated \u2014 run `npx dev-panel-graph` (or add an adapter)";
|
|
1656
1678
|
return "Graph endpoint unavailable.";
|
|
1657
1679
|
}, [status, graph]);
|
|
1658
|
-
const details = /* @__PURE__ */ jsxRuntime.jsx(
|
|
1680
|
+
const details = /* @__PURE__ */ jsxRuntime.jsx(
|
|
1681
|
+
NodeDetails,
|
|
1682
|
+
{
|
|
1683
|
+
selected,
|
|
1684
|
+
editor: config.editor,
|
|
1685
|
+
onOpen: () => void openLoc(selected),
|
|
1686
|
+
onOpenEditor: (editor) => void openLoc(selected, editor),
|
|
1687
|
+
onCopyInfo: copyInfo,
|
|
1688
|
+
onCopyPath: () => copyPath(selected),
|
|
1689
|
+
onSelectName: selectName
|
|
1690
|
+
}
|
|
1691
|
+
);
|
|
1659
1692
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1660
1693
|
Box6__default.default,
|
|
1661
1694
|
{
|
|
@@ -1680,7 +1713,7 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1680
1713
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider", flexShrink: 0 }, children: [
|
|
1681
1714
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", spacing: 1, children: [
|
|
1682
1715
|
/* @__PURE__ */ jsxRuntime.jsx(lu.LuWorkflow, { size: 16 }),
|
|
1683
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1716
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "subtitle2", sx: { fontWeight: 700 }, children: "Component Graph Inspector" }),
|
|
1684
1717
|
enabled && /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { label: "ON", size: "small", color: "success", variant: "soft", sx: { height: 18, fontSize: "0.6rem", fontWeight: 700 } })
|
|
1685
1718
|
] }),
|
|
1686
1719
|
/* @__PURE__ */ jsxRuntime.jsx(IconButton__default.default, { size: "small", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuX, { size: 16 }) })
|
|
@@ -1698,8 +1731,8 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1698
1731
|
},
|
|
1699
1732
|
children: /* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [
|
|
1700
1733
|
/* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
|
|
1701
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1702
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1734
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "body2", sx: { fontWeight: 700 }, children: "Inspect mode" }),
|
|
1735
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.secondary" }, children: enabled ? "Hover the UI, click to lock \xB7 Esc to exit" : "Enable, then hover the UI" })
|
|
1703
1736
|
] }),
|
|
1704
1737
|
/* @__PURE__ */ jsxRuntime.jsx(Switch__default.default, { checked: enabled, onChange: () => toggleInspector(config.graphEndpoint) })
|
|
1705
1738
|
] })
|
|
@@ -1726,11 +1759,11 @@ function ComponentGraphPanel({ onClose }) {
|
|
|
1726
1759
|
),
|
|
1727
1760
|
/* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 1.5 } }),
|
|
1728
1761
|
mode === "hover" && /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
|
|
1729
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1762
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.disabled", fontWeight: 700, textTransform: "uppercase", letterSpacing: 0.4 }, children: "Last locked component" }),
|
|
1730
1763
|
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mt: 0.5 }, children: details })
|
|
1731
1764
|
] }),
|
|
1732
1765
|
mode === "graph" && /* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { children: [
|
|
1733
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1766
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { display: "block", mb: 0.5, color: status === "ready" ? "success.main" : "text.disabled" }, children: statusText }),
|
|
1734
1767
|
(status === "empty" || status === "error") && /* @__PURE__ */ jsxRuntime.jsx(Chip__default.default, { size: "small", variant: "outlined", label: "Retry graph load", onClick: () => loadGraph(config.graphEndpoint, true), sx: { mb: 1, height: 22, fontSize: "0.65rem" } }),
|
|
1735
1768
|
/* @__PURE__ */ jsxRuntime.jsx(GraphSearch, { value: search, onChange: setSearch }),
|
|
1736
1769
|
/* @__PURE__ */ jsxRuntime.jsx(Box6__default.default, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(ComponentGraphTree, { graph, selected, search, expanded, onSelect: selectNode, onToggle: toggleExpanded, onOpen: openNode, onCopy: copyNode }) }),
|
|
@@ -1871,11 +1904,11 @@ function ComponentGraphOverlay() {
|
|
|
1871
1904
|
sx: { height: 18, fontWeight: 700, fontSize: "0.65rem", color: "#fff", bgcolor: styles.alpha(theme.palette.primary.main, 0.5) }
|
|
1872
1905
|
}
|
|
1873
1906
|
),
|
|
1874
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1907
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: styles.alpha(theme.palette.common.white, 0.6), fontFamily: "monospace" }, children: `<${hover.domTag}>` })
|
|
1875
1908
|
] }),
|
|
1876
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1877
|
-
hover.route && /* @__PURE__ */ jsxRuntime.jsx(
|
|
1878
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1909
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { display: "block", fontFamily: "monospace", fontSize: "0.68rem", wordBreak: "break-all", color: hover.filePath ? styles.alpha(theme.palette.common.white, 0.85) : styles.alpha(theme.palette.warning.light, 0.9) }, children: hover.filePath ? `${hover.filePath}${hover.line ? `:${hover.line}` : ""}` : "source resolved from graph on lock" }),
|
|
1910
|
+
hover.route && /* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { display: "block", fontSize: "0.62rem", color: styles.alpha(theme.palette.common.white, 0.45) }, children: hover.route }),
|
|
1911
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { display: "block", mt: 0.5, fontSize: "0.6rem", color: styles.alpha(theme.palette.common.white, 0.5) }, children: "click to lock \xB7 \u2318/Ctrl + click to open \xB7 Esc to exit" })
|
|
1879
1912
|
]
|
|
1880
1913
|
}
|
|
1881
1914
|
),
|
|
@@ -1897,7 +1930,7 @@ function ComponentGraphOverlay() {
|
|
|
1897
1930
|
boxShadow: "0 8px 28px rgba(0,0,0,0.45)"
|
|
1898
1931
|
},
|
|
1899
1932
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1900
|
-
|
|
1933
|
+
Typography3__default.default,
|
|
1901
1934
|
{
|
|
1902
1935
|
variant: "caption",
|
|
1903
1936
|
sx: { fontWeight: 600, color: state2.toast.tone === "success" ? "success.light" : state2.toast.tone === "error" ? "error.light" : "common.white" },
|
|
@@ -2096,8 +2129,8 @@ function Launcher({ tools: tools2, onOpenTool }) {
|
|
|
2096
2129
|
children: [
|
|
2097
2130
|
/* @__PURE__ */ jsxRuntime.jsx(ToolTile, { color: "primary", size: 34, children: /* @__PURE__ */ jsxRuntime.jsx(lu.LuWrench, { size: 17 }) }),
|
|
2098
2131
|
/* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { minWidth: 0 }, children: [
|
|
2099
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2100
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2132
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "subtitle2", sx: { fontWeight: 700, lineHeight: 1.2 }, children: "Developer Tools" }),
|
|
2133
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.secondary" }, children: "Internal utilities" })
|
|
2101
2134
|
] })
|
|
2102
2135
|
]
|
|
2103
2136
|
}
|
|
@@ -2115,8 +2148,8 @@ function Launcher({ tools: tools2, onOpenTool }) {
|
|
|
2115
2148
|
children: [
|
|
2116
2149
|
/* @__PURE__ */ jsxRuntime.jsx(ToolTile, { color: tool.color ?? "primary", children: tool.icon }),
|
|
2117
2150
|
/* @__PURE__ */ jsxRuntime.jsxs(Box6__default.default, { sx: { flex: 1, minWidth: 0 }, children: [
|
|
2118
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2119
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2151
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "subtitle2", sx: { fontWeight: 600, lineHeight: 1.3 }, children: tool.title }),
|
|
2152
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography3__default.default, { variant: "caption", sx: { color: "text.secondary", display: "block" }, children: tool.subtitle })
|
|
2120
2153
|
] }),
|
|
2121
2154
|
/* @__PURE__ */ jsxRuntime.jsxs(Stack__default.default, { direction: "row", spacing: 0.5, alignItems: "center", sx: { mt: 0.25 }, children: [
|
|
2122
2155
|
/* @__PURE__ */ jsxRuntime.jsx(ToolBadge, { tool }),
|