@nice-code/state 0.5.4 → 0.5.5
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/build/devtools/browser/index.js +315 -313
- package/package.json +1 -1
|
@@ -490,7 +490,7 @@ function formatScalar(value) {
|
|
|
490
490
|
}
|
|
491
491
|
|
|
492
492
|
// src/devtools/browser/components/JsonView.tsx
|
|
493
|
-
import {
|
|
493
|
+
import { jsx } from "react/jsx-runtime";
|
|
494
494
|
var JSON_TOKEN_RE = /("(?:\\.|[^"\\])*")(\s*:)?|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)|(\btrue\b|\bfalse\b|\bnull\b|\bundefined\b)|([{}[\],])/g;
|
|
495
495
|
function renderColoredJson(text) {
|
|
496
496
|
const nodes = [];
|
|
@@ -503,35 +503,35 @@ function renderColoredJson(text) {
|
|
|
503
503
|
const [, str, colon, num, kw, punct] = m;
|
|
504
504
|
if (str != null) {
|
|
505
505
|
if (colon != null) {
|
|
506
|
-
nodes.push(/* @__PURE__ */
|
|
506
|
+
nodes.push(/* @__PURE__ */ jsx("span", {
|
|
507
507
|
style: { color: DEVTOOL_JSON_KEY },
|
|
508
508
|
children: str
|
|
509
|
-
}, i
|
|
510
|
-
nodes.push(/* @__PURE__ */
|
|
509
|
+
}, i++));
|
|
510
|
+
nodes.push(/* @__PURE__ */ jsx("span", {
|
|
511
511
|
style: { color: DEVTOOL_JSON_PUNCTUATION },
|
|
512
512
|
children: colon
|
|
513
|
-
}, i
|
|
513
|
+
}, i++));
|
|
514
514
|
} else {
|
|
515
|
-
nodes.push(/* @__PURE__ */
|
|
515
|
+
nodes.push(/* @__PURE__ */ jsx("span", {
|
|
516
516
|
style: { color: DEVTOOL_JSON_STRING },
|
|
517
517
|
children: str
|
|
518
|
-
}, i
|
|
518
|
+
}, i++));
|
|
519
519
|
}
|
|
520
520
|
} else if (num != null) {
|
|
521
|
-
nodes.push(/* @__PURE__ */
|
|
521
|
+
nodes.push(/* @__PURE__ */ jsx("span", {
|
|
522
522
|
style: { color: DEVTOOL_JSON_NUMBER },
|
|
523
523
|
children: num
|
|
524
|
-
}, i
|
|
524
|
+
}, i++));
|
|
525
525
|
} else if (kw != null) {
|
|
526
|
-
nodes.push(/* @__PURE__ */
|
|
526
|
+
nodes.push(/* @__PURE__ */ jsx("span", {
|
|
527
527
|
style: { color: DEVTOOL_JSON_KEYWORD },
|
|
528
528
|
children: kw
|
|
529
|
-
}, i
|
|
529
|
+
}, i++));
|
|
530
530
|
} else if (punct != null) {
|
|
531
|
-
nodes.push(/* @__PURE__ */
|
|
531
|
+
nodes.push(/* @__PURE__ */ jsx("span", {
|
|
532
532
|
style: { color: DEVTOOL_JSON_PUNCTUATION },
|
|
533
533
|
children: punct
|
|
534
|
-
}, i
|
|
534
|
+
}, i++));
|
|
535
535
|
}
|
|
536
536
|
last = JSON_TOKEN_RE.lastIndex;
|
|
537
537
|
}
|
|
@@ -545,7 +545,7 @@ function JsonView({
|
|
|
545
545
|
style
|
|
546
546
|
}) {
|
|
547
547
|
const text = safeStringify(value, indent);
|
|
548
|
-
return /* @__PURE__ */
|
|
548
|
+
return /* @__PURE__ */ jsx("pre", {
|
|
549
549
|
style: {
|
|
550
550
|
margin: 0,
|
|
551
551
|
padding: "8px 10px",
|
|
@@ -560,11 +560,11 @@ function JsonView({
|
|
|
560
560
|
...style
|
|
561
561
|
},
|
|
562
562
|
children: renderColoredJson(text)
|
|
563
|
-
}
|
|
563
|
+
});
|
|
564
564
|
}
|
|
565
565
|
|
|
566
566
|
// src/devtools/browser/components/DiffView.tsx
|
|
567
|
-
import {
|
|
567
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
568
568
|
var ADDED_BG = "rgba(163, 230, 53, 0.08)";
|
|
569
569
|
var REMOVED_BG = "rgba(255, 92, 92, 0.08)";
|
|
570
570
|
var INLINE_MAX = 40;
|
|
@@ -575,7 +575,7 @@ function DiffView({
|
|
|
575
575
|
}) {
|
|
576
576
|
const entries = computeDiff(before, after);
|
|
577
577
|
if (entries.length === 0) {
|
|
578
|
-
return /* @__PURE__ */
|
|
578
|
+
return /* @__PURE__ */ jsx2("div", {
|
|
579
579
|
style: {
|
|
580
580
|
padding: "10px",
|
|
581
581
|
borderRadius: "4px",
|
|
@@ -585,16 +585,16 @@ function DiffView({
|
|
|
585
585
|
fontStyle: "italic"
|
|
586
586
|
},
|
|
587
587
|
children: "No differences — before and after are structurally equal."
|
|
588
|
-
}
|
|
588
|
+
});
|
|
589
589
|
}
|
|
590
590
|
const roots = [...buildTree(entries).children.values()].map(collapseChains);
|
|
591
|
-
return /* @__PURE__ */
|
|
591
|
+
return /* @__PURE__ */ jsx2("div", {
|
|
592
592
|
style: { display: "flex", flexDirection: "column", gap: "6px" },
|
|
593
|
-
children: roots.map((node) => /* @__PURE__ */
|
|
593
|
+
children: roots.map((node) => /* @__PURE__ */ jsx2(DiffNode, {
|
|
594
594
|
node,
|
|
595
595
|
latestFirst
|
|
596
|
-
}, node.key
|
|
597
|
-
}
|
|
596
|
+
}, node.key))
|
|
597
|
+
});
|
|
598
598
|
}
|
|
599
599
|
function buildTree(entries) {
|
|
600
600
|
const root = { key: "", children: new Map };
|
|
@@ -629,19 +629,19 @@ function collapseChains(node) {
|
|
|
629
629
|
}
|
|
630
630
|
function DiffNode({ node, latestFirst }) {
|
|
631
631
|
if (node.entry != null && node.children.size === 0) {
|
|
632
|
-
return /* @__PURE__ */
|
|
632
|
+
return /* @__PURE__ */ jsx2(DiffLeaf, {
|
|
633
633
|
label: node.key,
|
|
634
634
|
entry: node.entry,
|
|
635
635
|
latestFirst
|
|
636
|
-
}
|
|
636
|
+
});
|
|
637
637
|
}
|
|
638
|
-
return /* @__PURE__ */
|
|
638
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
639
639
|
children: [
|
|
640
|
-
/* @__PURE__ */
|
|
640
|
+
/* @__PURE__ */ jsx2("div", {
|
|
641
641
|
style: { color: DEVTOOL_JSON_KEY, fontFamily: MONO_FONT, fontSize: "10px", fontWeight: 600 },
|
|
642
642
|
children: node.key
|
|
643
|
-
}
|
|
644
|
-
/* @__PURE__ */
|
|
643
|
+
}),
|
|
644
|
+
/* @__PURE__ */ jsx2("div", {
|
|
645
645
|
style: {
|
|
646
646
|
marginTop: "4px",
|
|
647
647
|
marginLeft: "5px",
|
|
@@ -651,13 +651,13 @@ function DiffNode({ node, latestFirst }) {
|
|
|
651
651
|
flexDirection: "column",
|
|
652
652
|
gap: "5px"
|
|
653
653
|
},
|
|
654
|
-
children: [...node.children.values()].map((child) => /* @__PURE__ */
|
|
654
|
+
children: [...node.children.values()].map((child) => /* @__PURE__ */ jsx2(DiffNode, {
|
|
655
655
|
node: child,
|
|
656
656
|
latestFirst
|
|
657
|
-
}, child.key
|
|
658
|
-
}
|
|
657
|
+
}, child.key))
|
|
658
|
+
})
|
|
659
659
|
]
|
|
660
|
-
}
|
|
660
|
+
});
|
|
661
661
|
}
|
|
662
662
|
function DiffLeaf({
|
|
663
663
|
label,
|
|
@@ -666,58 +666,58 @@ function DiffLeaf({
|
|
|
666
666
|
}) {
|
|
667
667
|
const showRemoved = entry.kind === "removed" || entry.kind === "changed";
|
|
668
668
|
const showAdded = entry.kind === "added" || entry.kind === "changed";
|
|
669
|
-
const removed = showRemoved && /* @__PURE__ */
|
|
669
|
+
const removed = showRemoved && /* @__PURE__ */ jsx2(InlineValue, {
|
|
670
670
|
sign: "−",
|
|
671
671
|
color: DEVTOOL_COLOR_SEMANTIC_ERROR,
|
|
672
672
|
background: REMOVED_BG,
|
|
673
673
|
value: entry.before
|
|
674
|
-
}
|
|
675
|
-
const added = showAdded && /* @__PURE__ */
|
|
674
|
+
});
|
|
675
|
+
const added = showAdded && /* @__PURE__ */ jsx2(InlineValue, {
|
|
676
676
|
sign: "+",
|
|
677
677
|
color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
|
|
678
678
|
background: ADDED_BG,
|
|
679
679
|
value: entry.after
|
|
680
|
-
}
|
|
681
|
-
const removedLine = showRemoved && /* @__PURE__ */
|
|
680
|
+
});
|
|
681
|
+
const removedLine = showRemoved && /* @__PURE__ */ jsx2(DiffLine, {
|
|
682
682
|
sign: "−",
|
|
683
683
|
color: DEVTOOL_COLOR_SEMANTIC_ERROR,
|
|
684
684
|
background: REMOVED_BG,
|
|
685
685
|
value: entry.before
|
|
686
|
-
}
|
|
687
|
-
const addedLine = showAdded && /* @__PURE__ */
|
|
686
|
+
});
|
|
687
|
+
const addedLine = showAdded && /* @__PURE__ */ jsx2(DiffLine, {
|
|
688
688
|
sign: "+",
|
|
689
689
|
color: DEVTOOL_COLOR_SEMANTIC_SUCCESS,
|
|
690
690
|
background: ADDED_BG,
|
|
691
691
|
value: entry.after
|
|
692
|
-
}
|
|
692
|
+
});
|
|
693
693
|
if (isInlineLeaf(entry)) {
|
|
694
|
-
return /* @__PURE__ */
|
|
694
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
695
695
|
style: { display: "flex", flexWrap: "wrap", alignItems: "baseline", gap: "6px" },
|
|
696
696
|
children: [
|
|
697
|
-
/* @__PURE__ */
|
|
697
|
+
/* @__PURE__ */ jsxs("span", {
|
|
698
698
|
style: { color: DEVTOOL_JSON_KEY, fontFamily: MONO_FONT, fontSize: "11px" },
|
|
699
699
|
children: [
|
|
700
700
|
label,
|
|
701
701
|
":"
|
|
702
702
|
]
|
|
703
|
-
}
|
|
703
|
+
}),
|
|
704
704
|
latestFirst ? added : removed,
|
|
705
|
-
entry.kind === "changed" && /* @__PURE__ */
|
|
705
|
+
entry.kind === "changed" && /* @__PURE__ */ jsx2("span", {
|
|
706
706
|
style: { color: DEVTOOL_COLOR_TEXT_MUTED },
|
|
707
707
|
children: latestFirst ? "←" : "→"
|
|
708
|
-
}
|
|
708
|
+
}),
|
|
709
709
|
latestFirst ? removed : added
|
|
710
710
|
]
|
|
711
|
-
}
|
|
711
|
+
});
|
|
712
712
|
}
|
|
713
|
-
return /* @__PURE__ */
|
|
713
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
714
714
|
style: {
|
|
715
715
|
borderRadius: "4px",
|
|
716
716
|
overflow: "hidden",
|
|
717
717
|
border: `1px solid ${DEVTOOL_SECTION_STRING_BACKGROUND}`
|
|
718
718
|
},
|
|
719
719
|
children: [
|
|
720
|
-
/* @__PURE__ */
|
|
720
|
+
/* @__PURE__ */ jsx2("div", {
|
|
721
721
|
style: {
|
|
722
722
|
padding: "3px 8px",
|
|
723
723
|
background: DEVTOOL_SECTION_STRING_BACKGROUND,
|
|
@@ -726,11 +726,11 @@ function DiffLeaf({
|
|
|
726
726
|
fontSize: "10px"
|
|
727
727
|
},
|
|
728
728
|
children: label
|
|
729
|
-
}
|
|
729
|
+
}),
|
|
730
730
|
latestFirst ? addedLine : removedLine,
|
|
731
731
|
latestFirst ? removedLine : addedLine
|
|
732
732
|
]
|
|
733
|
-
}
|
|
733
|
+
});
|
|
734
734
|
}
|
|
735
735
|
function InlineValue({
|
|
736
736
|
sign,
|
|
@@ -738,7 +738,7 @@ function InlineValue({
|
|
|
738
738
|
background,
|
|
739
739
|
value
|
|
740
740
|
}) {
|
|
741
|
-
return /* @__PURE__ */
|
|
741
|
+
return /* @__PURE__ */ jsxs("span", {
|
|
742
742
|
style: {
|
|
743
743
|
display: "inline-flex",
|
|
744
744
|
alignItems: "baseline",
|
|
@@ -752,15 +752,15 @@ function InlineValue({
|
|
|
752
752
|
wordBreak: "break-word"
|
|
753
753
|
},
|
|
754
754
|
children: [
|
|
755
|
-
/* @__PURE__ */
|
|
755
|
+
/* @__PURE__ */ jsx2("span", {
|
|
756
756
|
style: { color, fontWeight: 700, userSelect: "none" },
|
|
757
757
|
children: sign
|
|
758
|
-
}
|
|
759
|
-
/* @__PURE__ */
|
|
758
|
+
}),
|
|
759
|
+
/* @__PURE__ */ jsx2("span", {
|
|
760
760
|
children: renderColoredJson(compactStringify(value))
|
|
761
|
-
}
|
|
761
|
+
})
|
|
762
762
|
]
|
|
763
|
-
}
|
|
763
|
+
});
|
|
764
764
|
}
|
|
765
765
|
function DiffLine({
|
|
766
766
|
sign,
|
|
@@ -768,14 +768,14 @@ function DiffLine({
|
|
|
768
768
|
background,
|
|
769
769
|
value
|
|
770
770
|
}) {
|
|
771
|
-
return /* @__PURE__ */
|
|
771
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
772
772
|
style: { display: "flex", gap: "6px", padding: "3px 8px", background },
|
|
773
773
|
children: [
|
|
774
|
-
/* @__PURE__ */
|
|
774
|
+
/* @__PURE__ */ jsx2("span", {
|
|
775
775
|
style: { color, fontWeight: 700, flexShrink: 0, userSelect: "none" },
|
|
776
776
|
children: sign
|
|
777
|
-
}
|
|
778
|
-
/* @__PURE__ */
|
|
777
|
+
}),
|
|
778
|
+
/* @__PURE__ */ jsx2("span", {
|
|
779
779
|
style: {
|
|
780
780
|
flex: 1,
|
|
781
781
|
minWidth: 0,
|
|
@@ -786,9 +786,9 @@ function DiffLine({
|
|
|
786
786
|
wordBreak: "break-word"
|
|
787
787
|
},
|
|
788
788
|
children: renderColoredJson(safeStringify(value, 2))
|
|
789
|
-
}
|
|
789
|
+
})
|
|
790
790
|
]
|
|
791
|
-
}
|
|
791
|
+
});
|
|
792
792
|
}
|
|
793
793
|
function isInlineLeaf(entry) {
|
|
794
794
|
const sides = [];
|
|
@@ -810,7 +810,7 @@ function compactStringify(value) {
|
|
|
810
810
|
}
|
|
811
811
|
|
|
812
812
|
// src/devtools/browser/components/JsonDiffView.tsx
|
|
813
|
-
import {
|
|
813
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
814
814
|
var ADDED_BG2 = "rgba(163, 230, 53, 0.13)";
|
|
815
815
|
var REMOVED_BG2 = "rgba(255, 92, 92, 0.13)";
|
|
816
816
|
var SURFACE_STYLE = {
|
|
@@ -824,7 +824,7 @@ var SURFACE_STYLE = {
|
|
|
824
824
|
overflowX: "auto"
|
|
825
825
|
};
|
|
826
826
|
function emptyNotice(text) {
|
|
827
|
-
return /* @__PURE__ */
|
|
827
|
+
return /* @__PURE__ */ jsx3("div", {
|
|
828
828
|
style: {
|
|
829
829
|
padding: "10px",
|
|
830
830
|
borderRadius: "4px",
|
|
@@ -834,22 +834,22 @@ function emptyNotice(text) {
|
|
|
834
834
|
fontStyle: "italic"
|
|
835
835
|
},
|
|
836
836
|
children: text
|
|
837
|
-
}
|
|
837
|
+
});
|
|
838
838
|
}
|
|
839
839
|
function Line({ sign, color, background, text }) {
|
|
840
|
-
return /* @__PURE__ */
|
|
840
|
+
return /* @__PURE__ */ jsxs2("div", {
|
|
841
841
|
style: { display: "flex", background, padding: "0 10px", whiteSpace: "pre" },
|
|
842
842
|
children: [
|
|
843
|
-
/* @__PURE__ */
|
|
843
|
+
/* @__PURE__ */ jsx3("span", {
|
|
844
844
|
style: { width: "12px", flexShrink: 0, color, fontWeight: 700, userSelect: "none" },
|
|
845
845
|
children: sign
|
|
846
|
-
}
|
|
847
|
-
/* @__PURE__ */
|
|
846
|
+
}),
|
|
847
|
+
/* @__PURE__ */ jsx3("span", {
|
|
848
848
|
style: { flex: 1, minWidth: 0 },
|
|
849
849
|
children: renderColoredJson(text)
|
|
850
|
-
}
|
|
850
|
+
})
|
|
851
851
|
]
|
|
852
|
-
}
|
|
852
|
+
});
|
|
853
853
|
}
|
|
854
854
|
function JsonDiffView({
|
|
855
855
|
before,
|
|
@@ -858,26 +858,26 @@ function JsonDiffView({
|
|
|
858
858
|
latestFirst = false
|
|
859
859
|
}) {
|
|
860
860
|
if (compress) {
|
|
861
|
-
return /* @__PURE__ */
|
|
861
|
+
return /* @__PURE__ */ jsx3(CompressedDiffView, {
|
|
862
862
|
before,
|
|
863
863
|
after,
|
|
864
864
|
side: "unified",
|
|
865
865
|
latestFirst
|
|
866
|
-
}
|
|
866
|
+
});
|
|
867
867
|
}
|
|
868
868
|
const ops = orderLineDiffOps(computeLineDiff(safeStringify(before, 2), safeStringify(after, 2)), latestFirst);
|
|
869
869
|
if (!ops.some((op) => op.kind !== "common")) {
|
|
870
870
|
return emptyNotice("No differences — before and after are structurally equal.");
|
|
871
871
|
}
|
|
872
|
-
return /* @__PURE__ */
|
|
872
|
+
return /* @__PURE__ */ jsx3("pre", {
|
|
873
873
|
style: SURFACE_STYLE,
|
|
874
|
-
children: ops.map((op, i) => /* @__PURE__ */
|
|
874
|
+
children: ops.map((op, i) => /* @__PURE__ */ jsx3(Line, {
|
|
875
875
|
sign: op.kind === "removed" ? "−" : op.kind === "added" ? "+" : " ",
|
|
876
876
|
color: op.kind === "removed" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS,
|
|
877
877
|
background: op.kind === "removed" ? REMOVED_BG2 : op.kind === "added" ? ADDED_BG2 : "transparent",
|
|
878
878
|
text: op.text
|
|
879
|
-
}, i
|
|
880
|
-
}
|
|
879
|
+
}, i))
|
|
880
|
+
});
|
|
881
881
|
}
|
|
882
882
|
function CompressedDiffView({
|
|
883
883
|
before,
|
|
@@ -889,47 +889,47 @@ function CompressedDiffView({
|
|
|
889
889
|
if (!lines.some((line) => line.tone === "added" || line.tone === "removed")) {
|
|
890
890
|
return emptyNotice("No differences — before and after are structurally equal.");
|
|
891
891
|
}
|
|
892
|
-
return /* @__PURE__ */
|
|
892
|
+
return /* @__PURE__ */ jsx3("pre", {
|
|
893
893
|
style: SURFACE_STYLE,
|
|
894
|
-
children: lines.map((line, i) => /* @__PURE__ */
|
|
894
|
+
children: lines.map((line, i) => /* @__PURE__ */ jsx3(CompressedLine, {
|
|
895
895
|
line
|
|
896
|
-
}, i
|
|
897
|
-
}
|
|
896
|
+
}, i))
|
|
897
|
+
});
|
|
898
898
|
}
|
|
899
899
|
function CompressedLine({ line }) {
|
|
900
900
|
const indent = " ".repeat(line.depth);
|
|
901
901
|
if (line.tone === "placeholder") {
|
|
902
|
-
return /* @__PURE__ */
|
|
902
|
+
return /* @__PURE__ */ jsxs2("div", {
|
|
903
903
|
style: { display: "flex", padding: "0 10px", whiteSpace: "pre" },
|
|
904
904
|
children: [
|
|
905
|
-
/* @__PURE__ */
|
|
905
|
+
/* @__PURE__ */ jsx3("span", {
|
|
906
906
|
style: { width: "12px", flexShrink: 0 }
|
|
907
|
-
}
|
|
908
|
-
/* @__PURE__ */
|
|
907
|
+
}),
|
|
908
|
+
/* @__PURE__ */ jsxs2("span", {
|
|
909
909
|
style: { flex: 1, minWidth: 0, color: DEVTOOL_COLOR_TEXT_MUTED, fontStyle: "italic" },
|
|
910
910
|
children: [
|
|
911
911
|
indent,
|
|
912
912
|
line.text
|
|
913
913
|
]
|
|
914
|
-
}
|
|
914
|
+
})
|
|
915
915
|
]
|
|
916
|
-
}
|
|
916
|
+
});
|
|
917
917
|
}
|
|
918
918
|
const background = line.tone === "removed" ? REMOVED_BG2 : line.tone === "added" ? ADDED_BG2 : "transparent";
|
|
919
919
|
const color = line.tone === "removed" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS;
|
|
920
|
-
return /* @__PURE__ */
|
|
920
|
+
return /* @__PURE__ */ jsxs2("div", {
|
|
921
921
|
style: { display: "flex", background, padding: "0 10px", whiteSpace: "pre" },
|
|
922
922
|
children: [
|
|
923
|
-
/* @__PURE__ */
|
|
923
|
+
/* @__PURE__ */ jsx3("span", {
|
|
924
924
|
style: { width: "12px", flexShrink: 0, color, fontWeight: 700, userSelect: "none" },
|
|
925
925
|
children: line.sign
|
|
926
|
-
}
|
|
927
|
-
/* @__PURE__ */
|
|
926
|
+
}),
|
|
927
|
+
/* @__PURE__ */ jsx3("span", {
|
|
928
928
|
style: { flex: 1, minWidth: 0 },
|
|
929
929
|
children: renderColoredJson(`${indent}${line.text}`)
|
|
930
|
-
}
|
|
930
|
+
})
|
|
931
931
|
]
|
|
932
|
-
}
|
|
932
|
+
});
|
|
933
933
|
}
|
|
934
934
|
function HighlightedJsonView({
|
|
935
935
|
before,
|
|
@@ -938,36 +938,36 @@ function HighlightedJsonView({
|
|
|
938
938
|
compress = false
|
|
939
939
|
}) {
|
|
940
940
|
if (compress)
|
|
941
|
-
return /* @__PURE__ */
|
|
941
|
+
return /* @__PURE__ */ jsx3(CompressedDiffView, {
|
|
942
942
|
before,
|
|
943
943
|
after,
|
|
944
944
|
side
|
|
945
|
-
}
|
|
945
|
+
});
|
|
946
946
|
const ops = computeLineDiff(safeStringify(before, 2), safeStringify(after, 2));
|
|
947
947
|
const dropKind = side === "before" ? "added" : "removed";
|
|
948
948
|
const highlightKind = side === "before" ? "removed" : "added";
|
|
949
949
|
const background = side === "before" ? REMOVED_BG2 : ADDED_BG2;
|
|
950
950
|
const color = side === "before" ? DEVTOOL_COLOR_SEMANTIC_ERROR : DEVTOOL_COLOR_SEMANTIC_SUCCESS;
|
|
951
951
|
const visible = ops.filter((op) => op.kind !== dropKind);
|
|
952
|
-
return /* @__PURE__ */
|
|
952
|
+
return /* @__PURE__ */ jsx3("pre", {
|
|
953
953
|
style: SURFACE_STYLE,
|
|
954
954
|
children: visible.map((op, i) => {
|
|
955
955
|
const changed = op.kind === highlightKind;
|
|
956
|
-
return /* @__PURE__ */
|
|
956
|
+
return /* @__PURE__ */ jsx3(Line, {
|
|
957
957
|
sign: changed ? side === "before" ? "−" : "+" : " ",
|
|
958
958
|
color,
|
|
959
959
|
background: changed ? background : "transparent",
|
|
960
960
|
text: op.text
|
|
961
|
-
}, i
|
|
961
|
+
}, i);
|
|
962
962
|
})
|
|
963
|
-
}
|
|
963
|
+
});
|
|
964
964
|
}
|
|
965
965
|
|
|
966
966
|
// src/devtools/browser/components/PanelChrome.tsx
|
|
967
967
|
import {
|
|
968
968
|
useState
|
|
969
969
|
} from "react";
|
|
970
|
-
import {
|
|
970
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
971
971
|
var DOCKED_SIZE_MIN = 160;
|
|
972
972
|
var POSITION_GRID = [
|
|
973
973
|
{ key: "tl", pos: null },
|
|
@@ -1002,7 +1002,7 @@ function PanelHeader({
|
|
|
1002
1002
|
openOthers,
|
|
1003
1003
|
children
|
|
1004
1004
|
}) {
|
|
1005
|
-
return /* @__PURE__ */
|
|
1005
|
+
return /* @__PURE__ */ jsxs3("div", {
|
|
1006
1006
|
style: {
|
|
1007
1007
|
display: "flex",
|
|
1008
1008
|
alignItems: "center",
|
|
@@ -1014,10 +1014,10 @@ function PanelHeader({
|
|
|
1014
1014
|
flexShrink: 0
|
|
1015
1015
|
},
|
|
1016
1016
|
children: [
|
|
1017
|
-
/* @__PURE__ */
|
|
1017
|
+
/* @__PURE__ */ jsxs3("div", {
|
|
1018
1018
|
style: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 },
|
|
1019
1019
|
children: [
|
|
1020
|
-
/* @__PURE__ */
|
|
1020
|
+
/* @__PURE__ */ jsx4("span", {
|
|
1021
1021
|
style: {
|
|
1022
1022
|
color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
|
|
1023
1023
|
fontWeight: "bold",
|
|
@@ -1025,8 +1025,8 @@ function PanelHeader({
|
|
|
1025
1025
|
whiteSpace: "nowrap"
|
|
1026
1026
|
},
|
|
1027
1027
|
children: "\uD83E\uDDE9 state"
|
|
1028
|
-
}
|
|
1029
|
-
openOthers?.map((item) => /* @__PURE__ */
|
|
1028
|
+
}),
|
|
1029
|
+
openOthers?.map((item) => /* @__PURE__ */ jsxs3("button", {
|
|
1030
1030
|
onClick: item.onOpen,
|
|
1031
1031
|
title: `Open ${item.label} devtools`,
|
|
1032
1032
|
style: {
|
|
@@ -1044,40 +1044,40 @@ function PanelHeader({
|
|
|
1044
1044
|
whiteSpace: "nowrap"
|
|
1045
1045
|
},
|
|
1046
1046
|
children: [
|
|
1047
|
-
/* @__PURE__ */
|
|
1047
|
+
/* @__PURE__ */ jsx4("span", {
|
|
1048
1048
|
children: item.icon
|
|
1049
|
-
}
|
|
1050
|
-
/* @__PURE__ */
|
|
1049
|
+
}),
|
|
1050
|
+
/* @__PURE__ */ jsx4("span", {
|
|
1051
1051
|
children: item.label
|
|
1052
|
-
}
|
|
1053
|
-
item.badge != null && /* @__PURE__ */
|
|
1052
|
+
}),
|
|
1053
|
+
item.badge != null && /* @__PURE__ */ jsx4("span", {
|
|
1054
1054
|
style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
|
|
1055
1055
|
children: item.badge
|
|
1056
|
-
}
|
|
1056
|
+
})
|
|
1057
1057
|
]
|
|
1058
|
-
}, item.id
|
|
1058
|
+
}, item.id))
|
|
1059
1059
|
]
|
|
1060
|
-
}
|
|
1061
|
-
/* @__PURE__ */
|
|
1060
|
+
}),
|
|
1061
|
+
/* @__PURE__ */ jsxs3("div", {
|
|
1062
1062
|
style: { display: "flex", gap: "10px", alignItems: "center" },
|
|
1063
1063
|
children: [
|
|
1064
1064
|
children,
|
|
1065
|
-
/* @__PURE__ */
|
|
1065
|
+
/* @__PURE__ */ jsx4("button", {
|
|
1066
1066
|
onClick: onTogglePause,
|
|
1067
1067
|
title: paused ? "Resume recording" : "Pause recording",
|
|
1068
1068
|
style: chromeButtonStyle(paused ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_MUTED),
|
|
1069
1069
|
children: paused ? "▶ resume" : "⏸ pause"
|
|
1070
|
-
}
|
|
1071
|
-
onClear != null && /* @__PURE__ */
|
|
1070
|
+
}),
|
|
1071
|
+
onClear != null && /* @__PURE__ */ jsx4("button", {
|
|
1072
1072
|
onClick: onClear,
|
|
1073
1073
|
style: chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
|
|
1074
1074
|
children: "clear"
|
|
1075
|
-
}
|
|
1076
|
-
/* @__PURE__ */
|
|
1075
|
+
}),
|
|
1076
|
+
/* @__PURE__ */ jsx4(PositionPicker, {
|
|
1077
1077
|
position,
|
|
1078
1078
|
onChange: onPositionChange
|
|
1079
|
-
}
|
|
1080
|
-
/* @__PURE__ */
|
|
1079
|
+
}),
|
|
1080
|
+
/* @__PURE__ */ jsx4("button", {
|
|
1081
1081
|
onClick: onClose,
|
|
1082
1082
|
style: {
|
|
1083
1083
|
...chromeButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
|
|
@@ -1085,11 +1085,11 @@ function PanelHeader({
|
|
|
1085
1085
|
lineHeight: "1"
|
|
1086
1086
|
},
|
|
1087
1087
|
children: "×"
|
|
1088
|
-
}
|
|
1088
|
+
})
|
|
1089
1089
|
]
|
|
1090
|
-
}
|
|
1090
|
+
})
|
|
1091
1091
|
]
|
|
1092
|
-
}
|
|
1092
|
+
});
|
|
1093
1093
|
}
|
|
1094
1094
|
function chromeButtonStyle(color) {
|
|
1095
1095
|
return {
|
|
@@ -1107,17 +1107,17 @@ function PositionPicker({
|
|
|
1107
1107
|
position,
|
|
1108
1108
|
onChange
|
|
1109
1109
|
}) {
|
|
1110
|
-
return /* @__PURE__ */
|
|
1110
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
1111
1111
|
title: "Move / dock panel",
|
|
1112
1112
|
style: { display: "grid", gridTemplateColumns: "repeat(3, 9px)", gap: "2px", padding: "2px" },
|
|
1113
1113
|
children: POSITION_GRID.map(({ key, pos }) => {
|
|
1114
1114
|
if (pos == null)
|
|
1115
|
-
return /* @__PURE__ */
|
|
1115
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
1116
1116
|
style: { width: "9px", height: "9px" }
|
|
1117
|
-
}, key
|
|
1117
|
+
}, key);
|
|
1118
1118
|
const isTopBottom = pos === "dock-top" || pos === "dock-bottom";
|
|
1119
1119
|
const isActive = pos === position;
|
|
1120
|
-
return /* @__PURE__ */
|
|
1120
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
1121
1121
|
title: pos,
|
|
1122
1122
|
onClick: () => onChange(pos),
|
|
1123
1123
|
style: {
|
|
@@ -1128,17 +1128,17 @@ function PositionPicker({
|
|
|
1128
1128
|
justifyContent: "center",
|
|
1129
1129
|
cursor: "pointer"
|
|
1130
1130
|
},
|
|
1131
|
-
children: /* @__PURE__ */
|
|
1131
|
+
children: /* @__PURE__ */ jsx4("div", {
|
|
1132
1132
|
style: {
|
|
1133
1133
|
width: isTopBottom ? "9px" : "3px",
|
|
1134
1134
|
height: isTopBottom ? "3px" : "9px",
|
|
1135
1135
|
borderRadius: "1px",
|
|
1136
1136
|
background: isActive ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT
|
|
1137
1137
|
}
|
|
1138
|
-
}
|
|
1139
|
-
}, key
|
|
1138
|
+
})
|
|
1139
|
+
}, key);
|
|
1140
1140
|
})
|
|
1141
|
-
}
|
|
1141
|
+
});
|
|
1142
1142
|
}
|
|
1143
1143
|
function ResizeHandle({
|
|
1144
1144
|
dockSide,
|
|
@@ -1164,10 +1164,10 @@ function ResizeHandle({
|
|
|
1164
1164
|
window.addEventListener("mouseup", onUp);
|
|
1165
1165
|
};
|
|
1166
1166
|
const edgeStyle = dockSide === "bottom" ? { top: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "top" ? { bottom: 0, left: 0, right: 0, height: "5px", cursor: "ns-resize" } : dockSide === "right" ? { top: 0, bottom: 0, left: 0, width: "5px", cursor: "ew-resize" } : { top: 0, bottom: 0, right: 0, width: "5px", cursor: "ew-resize" };
|
|
1167
|
-
return /* @__PURE__ */
|
|
1167
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
1168
1168
|
onMouseDown,
|
|
1169
1169
|
style: { position: "absolute", zIndex: 10, background: "transparent", ...edgeStyle }
|
|
1170
|
-
}
|
|
1170
|
+
});
|
|
1171
1171
|
}
|
|
1172
1172
|
var SPLIT_RATIO_MIN = 0.15;
|
|
1173
1173
|
var SPLIT_RATIO_MAX = 0.85;
|
|
@@ -1193,7 +1193,7 @@ function SplitHandle({
|
|
|
1193
1193
|
window.addEventListener("mousemove", onMove);
|
|
1194
1194
|
window.addEventListener("mouseup", onUp);
|
|
1195
1195
|
};
|
|
1196
|
-
return /* @__PURE__ */
|
|
1196
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
1197
1197
|
onMouseDown,
|
|
1198
1198
|
onMouseEnter: () => setHovered(true),
|
|
1199
1199
|
onMouseLeave: () => setHovered(false),
|
|
@@ -1205,14 +1205,14 @@ function SplitHandle({
|
|
|
1205
1205
|
opacity: hovered ? 0.6 : 1,
|
|
1206
1206
|
zIndex: 5
|
|
1207
1207
|
}
|
|
1208
|
-
}
|
|
1208
|
+
});
|
|
1209
1209
|
}
|
|
1210
1210
|
function SegmentedControl({
|
|
1211
1211
|
options,
|
|
1212
1212
|
value,
|
|
1213
1213
|
onChange
|
|
1214
1214
|
}) {
|
|
1215
|
-
return /* @__PURE__ */
|
|
1215
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
1216
1216
|
style: {
|
|
1217
1217
|
display: "flex",
|
|
1218
1218
|
border: `1px solid ${DEVTOOL_COLOR_TEXT_FAINT}`,
|
|
@@ -1221,7 +1221,7 @@ function SegmentedControl({
|
|
|
1221
1221
|
},
|
|
1222
1222
|
children: options.map((opt) => {
|
|
1223
1223
|
const active = opt.value === value;
|
|
1224
|
-
return /* @__PURE__ */
|
|
1224
|
+
return /* @__PURE__ */ jsx4("button", {
|
|
1225
1225
|
onClick: () => onChange(opt.value),
|
|
1226
1226
|
style: {
|
|
1227
1227
|
background: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : "transparent",
|
|
@@ -1234,12 +1234,12 @@ function SegmentedControl({
|
|
|
1234
1234
|
fontFamily: SANS_FONT
|
|
1235
1235
|
},
|
|
1236
1236
|
children: opt.label
|
|
1237
|
-
}, opt.value
|
|
1237
|
+
}, opt.value);
|
|
1238
1238
|
})
|
|
1239
|
-
}
|
|
1239
|
+
});
|
|
1240
1240
|
}
|
|
1241
1241
|
function DevtoolsLauncher({ items }) {
|
|
1242
|
-
return /* @__PURE__ */
|
|
1242
|
+
return /* @__PURE__ */ jsx4("div", {
|
|
1243
1243
|
style: {
|
|
1244
1244
|
position: "fixed",
|
|
1245
1245
|
bottom: "16px",
|
|
@@ -1249,7 +1249,7 @@ function DevtoolsLauncher({ items }) {
|
|
|
1249
1249
|
fontFamily: MONO_FONT,
|
|
1250
1250
|
fontSize: "12px"
|
|
1251
1251
|
},
|
|
1252
|
-
children: /* @__PURE__ */
|
|
1252
|
+
children: /* @__PURE__ */ jsx4("div", {
|
|
1253
1253
|
style: {
|
|
1254
1254
|
display: "flex",
|
|
1255
1255
|
background: DEVTOOL_SECTION_BACKGROUND,
|
|
@@ -1258,7 +1258,7 @@ function DevtoolsLauncher({ items }) {
|
|
|
1258
1258
|
overflow: "hidden",
|
|
1259
1259
|
boxShadow: "0 8px 24px rgba(0,0,0,0.35)"
|
|
1260
1260
|
},
|
|
1261
|
-
children: items.map((item, i) => /* @__PURE__ */
|
|
1261
|
+
children: items.map((item, i) => /* @__PURE__ */ jsxs3("button", {
|
|
1262
1262
|
onClick: item.onOpen,
|
|
1263
1263
|
style: {
|
|
1264
1264
|
display: "flex",
|
|
@@ -1275,24 +1275,24 @@ function DevtoolsLauncher({ items }) {
|
|
|
1275
1275
|
lineHeight: "1.5"
|
|
1276
1276
|
},
|
|
1277
1277
|
children: [
|
|
1278
|
-
/* @__PURE__ */
|
|
1278
|
+
/* @__PURE__ */ jsx4("span", {
|
|
1279
1279
|
children: item.icon
|
|
1280
|
-
}
|
|
1281
|
-
/* @__PURE__ */
|
|
1280
|
+
}),
|
|
1281
|
+
/* @__PURE__ */ jsx4("span", {
|
|
1282
1282
|
children: item.label
|
|
1283
|
-
}
|
|
1284
|
-
item.badge != null && /* @__PURE__ */
|
|
1283
|
+
}),
|
|
1284
|
+
item.badge != null && /* @__PURE__ */ jsx4("span", {
|
|
1285
1285
|
style: { color: DEVTOOL_COLOR_SEMANTIC_SYSTEM },
|
|
1286
1286
|
children: item.badge
|
|
1287
|
-
}
|
|
1287
|
+
})
|
|
1288
1288
|
]
|
|
1289
|
-
}, item.id
|
|
1290
|
-
}
|
|
1291
|
-
}
|
|
1289
|
+
}, item.id))
|
|
1290
|
+
})
|
|
1291
|
+
});
|
|
1292
1292
|
}
|
|
1293
1293
|
|
|
1294
1294
|
// src/devtools/browser/components/ChangeDetailPanel.tsx
|
|
1295
|
-
import {
|
|
1295
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1296
1296
|
function ChangeDetailPanel({
|
|
1297
1297
|
change,
|
|
1298
1298
|
onRevert,
|
|
@@ -1306,7 +1306,7 @@ function ChangeDetailPanel({
|
|
|
1306
1306
|
const canRevert = change.inversePatches.length > 0;
|
|
1307
1307
|
const showCompressToggle = view !== "props";
|
|
1308
1308
|
const showOrderToggle = view === "props" || view === "diff";
|
|
1309
|
-
return /* @__PURE__ */
|
|
1309
|
+
return /* @__PURE__ */ jsxs4("div", {
|
|
1310
1310
|
style: {
|
|
1311
1311
|
flex: 1,
|
|
1312
1312
|
display: "flex",
|
|
@@ -1316,7 +1316,7 @@ function ChangeDetailPanel({
|
|
|
1316
1316
|
background: DEVTOOL_DETAIL_BASE_BACKGROUND
|
|
1317
1317
|
},
|
|
1318
1318
|
children: [
|
|
1319
|
-
/* @__PURE__ */
|
|
1319
|
+
/* @__PURE__ */ jsxs4("div", {
|
|
1320
1320
|
style: {
|
|
1321
1321
|
padding: "8px 12px",
|
|
1322
1322
|
background: DEVTOOL_DETAIL_HEADER_BACKGROUND,
|
|
@@ -1327,7 +1327,7 @@ function ChangeDetailPanel({
|
|
|
1327
1327
|
flexShrink: 0
|
|
1328
1328
|
},
|
|
1329
1329
|
children: [
|
|
1330
|
-
/* @__PURE__ */
|
|
1330
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1331
1331
|
style: {
|
|
1332
1332
|
color: DEVTOOL_COLOR_TEXT_EMPHASIS,
|
|
1333
1333
|
fontWeight: 600,
|
|
@@ -1338,8 +1338,8 @@ function ChangeDetailPanel({
|
|
|
1338
1338
|
whiteSpace: "nowrap"
|
|
1339
1339
|
},
|
|
1340
1340
|
children: change.storeLabel
|
|
1341
|
-
}
|
|
1342
|
-
/* @__PURE__ */
|
|
1341
|
+
}),
|
|
1342
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1343
1343
|
style: {
|
|
1344
1344
|
padding: "1px 7px",
|
|
1345
1345
|
borderRadius: "999px",
|
|
@@ -1351,15 +1351,15 @@ function ChangeDetailPanel({
|
|
|
1351
1351
|
fontFamily: SANS_FONT
|
|
1352
1352
|
},
|
|
1353
1353
|
children: SOURCE_LABEL[change.source]
|
|
1354
|
-
}
|
|
1355
|
-
/* @__PURE__ */
|
|
1354
|
+
}),
|
|
1355
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1356
1356
|
style: { flex: 1 }
|
|
1357
|
-
}
|
|
1358
|
-
/* @__PURE__ */
|
|
1357
|
+
}),
|
|
1358
|
+
/* @__PURE__ */ jsx5("span", {
|
|
1359
1359
|
style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "10px", fontFamily: MONO_FONT },
|
|
1360
1360
|
children: formatTimestamp(change.timestamp)
|
|
1361
|
-
}
|
|
1362
|
-
/* @__PURE__ */
|
|
1361
|
+
}),
|
|
1362
|
+
/* @__PURE__ */ jsx5("button", {
|
|
1363
1363
|
onClick: () => onRevert(change),
|
|
1364
1364
|
disabled: !canRevert,
|
|
1365
1365
|
title: canRevert ? "Apply this change's inverse patches to undo it" : "No inverse patches available to revert",
|
|
@@ -1375,16 +1375,16 @@ function ChangeDetailPanel({
|
|
|
1375
1375
|
flexShrink: 0
|
|
1376
1376
|
},
|
|
1377
1377
|
children: "⟲ revert"
|
|
1378
|
-
}
|
|
1378
|
+
})
|
|
1379
1379
|
]
|
|
1380
|
-
}
|
|
1381
|
-
/* @__PURE__ */
|
|
1380
|
+
}),
|
|
1381
|
+
/* @__PURE__ */ jsx5("div", {
|
|
1382
1382
|
style: {
|
|
1383
1383
|
padding: "6px 12px",
|
|
1384
1384
|
borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`,
|
|
1385
1385
|
flexShrink: 0
|
|
1386
1386
|
},
|
|
1387
|
-
children: /* @__PURE__ */
|
|
1387
|
+
children: /* @__PURE__ */ jsx5(SegmentedControl, {
|
|
1388
1388
|
options: [
|
|
1389
1389
|
{ value: "diff", label: "Diff View" },
|
|
1390
1390
|
{ value: "props", label: "Diff Props" },
|
|
@@ -1393,9 +1393,9 @@ function ChangeDetailPanel({
|
|
|
1393
1393
|
],
|
|
1394
1394
|
value: view,
|
|
1395
1395
|
onChange: onViewChange
|
|
1396
|
-
}
|
|
1397
|
-
}
|
|
1398
|
-
/* @__PURE__ */
|
|
1396
|
+
})
|
|
1397
|
+
}),
|
|
1398
|
+
/* @__PURE__ */ jsxs4("div", {
|
|
1399
1399
|
style: {
|
|
1400
1400
|
flex: 1,
|
|
1401
1401
|
overflowY: "auto",
|
|
@@ -1403,7 +1403,7 @@ function ChangeDetailPanel({
|
|
|
1403
1403
|
padding: "10px 12px"
|
|
1404
1404
|
},
|
|
1405
1405
|
children: [
|
|
1406
|
-
(showCompressToggle || showOrderToggle) && /* @__PURE__ */
|
|
1406
|
+
(showCompressToggle || showOrderToggle) && /* @__PURE__ */ jsxs4("div", {
|
|
1407
1407
|
style: {
|
|
1408
1408
|
display: "flex",
|
|
1409
1409
|
flexWrap: "wrap",
|
|
@@ -1412,47 +1412,47 @@ function ChangeDetailPanel({
|
|
|
1412
1412
|
marginBottom: "8px"
|
|
1413
1413
|
},
|
|
1414
1414
|
children: [
|
|
1415
|
-
showCompressToggle && /* @__PURE__ */
|
|
1415
|
+
showCompressToggle && /* @__PURE__ */ jsx5(ToggleCheckbox, {
|
|
1416
1416
|
checked: compress,
|
|
1417
1417
|
onChange: onCompressChange,
|
|
1418
1418
|
label: "Compress to changed paths only",
|
|
1419
1419
|
title: "Collapse unchanged branches, showing only the address of what changed"
|
|
1420
|
-
}
|
|
1421
|
-
showOrderToggle && /* @__PURE__ */
|
|
1420
|
+
}),
|
|
1421
|
+
showOrderToggle && /* @__PURE__ */ jsx5(ToggleCheckbox, {
|
|
1422
1422
|
checked: latestFirst,
|
|
1423
1423
|
onChange: onLatestFirstChange,
|
|
1424
1424
|
label: "Latest (+) change first",
|
|
1425
1425
|
title: "Show the new value (+) above the previous value (−); off shows previous first"
|
|
1426
|
-
}
|
|
1426
|
+
})
|
|
1427
1427
|
]
|
|
1428
|
-
}
|
|
1429
|
-
view === "diff" && /* @__PURE__ */
|
|
1428
|
+
}),
|
|
1429
|
+
view === "diff" && /* @__PURE__ */ jsx5(JsonDiffView, {
|
|
1430
1430
|
before: change.prevSnapshot,
|
|
1431
1431
|
after: change.snapshot,
|
|
1432
1432
|
compress,
|
|
1433
1433
|
latestFirst
|
|
1434
|
-
}
|
|
1435
|
-
view === "props" && /* @__PURE__ */
|
|
1434
|
+
}),
|
|
1435
|
+
view === "props" && /* @__PURE__ */ jsx5(DiffView, {
|
|
1436
1436
|
before: change.prevSnapshot,
|
|
1437
1437
|
after: change.snapshot,
|
|
1438
1438
|
latestFirst
|
|
1439
|
-
}
|
|
1440
|
-
view === "before" && /* @__PURE__ */
|
|
1439
|
+
}),
|
|
1440
|
+
view === "before" && /* @__PURE__ */ jsx5(HighlightedJsonView, {
|
|
1441
1441
|
before: change.prevSnapshot,
|
|
1442
1442
|
after: change.snapshot,
|
|
1443
1443
|
side: "before",
|
|
1444
1444
|
compress
|
|
1445
|
-
}
|
|
1446
|
-
view === "after" && /* @__PURE__ */
|
|
1445
|
+
}),
|
|
1446
|
+
view === "after" && /* @__PURE__ */ jsx5(HighlightedJsonView, {
|
|
1447
1447
|
before: change.prevSnapshot,
|
|
1448
1448
|
after: change.snapshot,
|
|
1449
1449
|
side: "after",
|
|
1450
1450
|
compress
|
|
1451
|
-
}
|
|
1451
|
+
})
|
|
1452
1452
|
]
|
|
1453
|
-
}
|
|
1453
|
+
})
|
|
1454
1454
|
]
|
|
1455
|
-
}
|
|
1455
|
+
});
|
|
1456
1456
|
}
|
|
1457
1457
|
function ToggleCheckbox({
|
|
1458
1458
|
checked,
|
|
@@ -1460,7 +1460,7 @@ function ToggleCheckbox({
|
|
|
1460
1460
|
label,
|
|
1461
1461
|
title
|
|
1462
1462
|
}) {
|
|
1463
|
-
return /* @__PURE__ */
|
|
1463
|
+
return /* @__PURE__ */ jsxs4("label", {
|
|
1464
1464
|
style: {
|
|
1465
1465
|
display: "flex",
|
|
1466
1466
|
alignItems: "center",
|
|
@@ -1473,19 +1473,19 @@ function ToggleCheckbox({
|
|
|
1473
1473
|
},
|
|
1474
1474
|
title,
|
|
1475
1475
|
children: [
|
|
1476
|
-
/* @__PURE__ */
|
|
1476
|
+
/* @__PURE__ */ jsx5("input", {
|
|
1477
1477
|
type: "checkbox",
|
|
1478
1478
|
checked,
|
|
1479
1479
|
onChange: (e) => onChange(e.target.checked),
|
|
1480
1480
|
style: { cursor: "pointer", margin: 0 }
|
|
1481
|
-
}
|
|
1481
|
+
}),
|
|
1482
1482
|
label
|
|
1483
1483
|
]
|
|
1484
|
-
}
|
|
1484
|
+
});
|
|
1485
1485
|
}
|
|
1486
1486
|
|
|
1487
1487
|
// src/devtools/browser/components/ChangeList.tsx
|
|
1488
|
-
import {
|
|
1488
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1489
1489
|
function ChangeList({
|
|
1490
1490
|
groups,
|
|
1491
1491
|
selectedCuid,
|
|
@@ -1494,7 +1494,7 @@ function ChangeList({
|
|
|
1494
1494
|
style
|
|
1495
1495
|
}) {
|
|
1496
1496
|
if (groups.length === 0) {
|
|
1497
|
-
return /* @__PURE__ */
|
|
1497
|
+
return /* @__PURE__ */ jsx6("div", {
|
|
1498
1498
|
style: {
|
|
1499
1499
|
padding: "24px",
|
|
1500
1500
|
textAlign: "center",
|
|
@@ -1503,18 +1503,18 @@ function ChangeList({
|
|
|
1503
1503
|
...style
|
|
1504
1504
|
},
|
|
1505
1505
|
children: "No changes recorded yet. Mutate a store to see it here."
|
|
1506
|
-
}
|
|
1506
|
+
});
|
|
1507
1507
|
}
|
|
1508
|
-
return /* @__PURE__ */
|
|
1508
|
+
return /* @__PURE__ */ jsx6("div", {
|
|
1509
1509
|
style,
|
|
1510
|
-
children: groups.map((group) => /* @__PURE__ */
|
|
1510
|
+
children: groups.map((group) => /* @__PURE__ */ jsx6(ChangeRow, {
|
|
1511
1511
|
change: group.representative,
|
|
1512
1512
|
count: group.count,
|
|
1513
1513
|
selected: group.oldest.cuid === selectedCuid,
|
|
1514
1514
|
onClick: () => onSelect(group.oldest.cuid),
|
|
1515
1515
|
showStore
|
|
1516
|
-
}, group.oldest.cuid
|
|
1517
|
-
}
|
|
1516
|
+
}, group.oldest.cuid))
|
|
1517
|
+
});
|
|
1518
1518
|
}
|
|
1519
1519
|
function ChangeRow({
|
|
1520
1520
|
change,
|
|
@@ -1524,7 +1524,7 @@ function ChangeRow({
|
|
|
1524
1524
|
showStore
|
|
1525
1525
|
}) {
|
|
1526
1526
|
const sourceColor = SOURCE_COLOR[change.source];
|
|
1527
|
-
return /* @__PURE__ */
|
|
1527
|
+
return /* @__PURE__ */ jsxs5("div", {
|
|
1528
1528
|
onClick,
|
|
1529
1529
|
style: {
|
|
1530
1530
|
display: "flex",
|
|
@@ -1537,10 +1537,10 @@ function ChangeRow({
|
|
|
1537
1537
|
background: selected ? DEVTOOL_LIST_SELECTED_BACKGROUND : DEVTOOL_LIST_BASE_BACKGROUND
|
|
1538
1538
|
},
|
|
1539
1539
|
children: [
|
|
1540
|
-
/* @__PURE__ */
|
|
1540
|
+
/* @__PURE__ */ jsxs5("div", {
|
|
1541
1541
|
style: { display: "flex", alignItems: "center", gap: "6px" },
|
|
1542
1542
|
children: [
|
|
1543
|
-
/* @__PURE__ */
|
|
1543
|
+
/* @__PURE__ */ jsx6("span", {
|
|
1544
1544
|
style: {
|
|
1545
1545
|
color: DEVTOOL_COLOR_TEXT_MUTED,
|
|
1546
1546
|
fontSize: "10px",
|
|
@@ -1548,12 +1548,12 @@ function ChangeRow({
|
|
|
1548
1548
|
flexShrink: 0
|
|
1549
1549
|
},
|
|
1550
1550
|
children: formatTimestamp(change.timestamp)
|
|
1551
|
-
}
|
|
1552
|
-
/* @__PURE__ */
|
|
1551
|
+
}),
|
|
1552
|
+
/* @__PURE__ */ jsx6(Badge, {
|
|
1553
1553
|
color: sourceColor,
|
|
1554
1554
|
children: SOURCE_LABEL[change.source]
|
|
1555
|
-
}
|
|
1556
|
-
count > 1 && /* @__PURE__ */
|
|
1555
|
+
}),
|
|
1556
|
+
count > 1 && /* @__PURE__ */ jsxs5("span", {
|
|
1557
1557
|
title: `${count} consecutive identical updates`,
|
|
1558
1558
|
style: {
|
|
1559
1559
|
flexShrink: 0,
|
|
@@ -1569,8 +1569,8 @@ function ChangeRow({
|
|
|
1569
1569
|
"×",
|
|
1570
1570
|
count
|
|
1571
1571
|
]
|
|
1572
|
-
}
|
|
1573
|
-
showStore && /* @__PURE__ */
|
|
1572
|
+
}),
|
|
1573
|
+
showStore && /* @__PURE__ */ jsx6("span", {
|
|
1574
1574
|
style: {
|
|
1575
1575
|
color: DEVTOOL_COLOR_SEMANTIC_SYSTEM,
|
|
1576
1576
|
fontSize: "10px",
|
|
@@ -1580,21 +1580,21 @@ function ChangeRow({
|
|
|
1580
1580
|
whiteSpace: "nowrap"
|
|
1581
1581
|
},
|
|
1582
1582
|
children: change.storeLabel
|
|
1583
|
-
}
|
|
1584
|
-
/* @__PURE__ */
|
|
1583
|
+
}),
|
|
1584
|
+
/* @__PURE__ */ jsx6("span", {
|
|
1585
1585
|
style: { flex: 1 }
|
|
1586
|
-
}
|
|
1587
|
-
change.patches.length > 0 && /* @__PURE__ */
|
|
1586
|
+
}),
|
|
1587
|
+
change.patches.length > 0 && /* @__PURE__ */ jsxs5("span", {
|
|
1588
1588
|
style: { color: DEVTOOL_COLOR_TEXT_FAINT, fontSize: "10px", flexShrink: 0 },
|
|
1589
1589
|
children: [
|
|
1590
1590
|
change.patches.length,
|
|
1591
1591
|
" patch",
|
|
1592
1592
|
change.patches.length === 1 ? "" : "es"
|
|
1593
1593
|
]
|
|
1594
|
-
}
|
|
1594
|
+
})
|
|
1595
1595
|
]
|
|
1596
|
-
}
|
|
1597
|
-
/* @__PURE__ */
|
|
1596
|
+
}),
|
|
1597
|
+
/* @__PURE__ */ jsx6("div", {
|
|
1598
1598
|
style: {
|
|
1599
1599
|
color: DEVTOOL_COLOR_TEXT_SECONDARY,
|
|
1600
1600
|
fontSize: "11px",
|
|
@@ -1604,12 +1604,12 @@ function ChangeRow({
|
|
|
1604
1604
|
whiteSpace: "nowrap"
|
|
1605
1605
|
},
|
|
1606
1606
|
children: summarizeChange(change)
|
|
1607
|
-
}
|
|
1607
|
+
})
|
|
1608
1608
|
]
|
|
1609
|
-
}
|
|
1609
|
+
});
|
|
1610
1610
|
}
|
|
1611
1611
|
function Badge({ color, children }) {
|
|
1612
|
-
return /* @__PURE__ */
|
|
1612
|
+
return /* @__PURE__ */ jsx6("span", {
|
|
1613
1613
|
style: {
|
|
1614
1614
|
flexShrink: 0,
|
|
1615
1615
|
padding: "1px 6px",
|
|
@@ -1622,19 +1622,19 @@ function Badge({ color, children }) {
|
|
|
1622
1622
|
fontFamily: SANS_FONT
|
|
1623
1623
|
},
|
|
1624
1624
|
children
|
|
1625
|
-
}
|
|
1625
|
+
});
|
|
1626
1626
|
}
|
|
1627
1627
|
|
|
1628
1628
|
// src/devtools/browser/components/StateInspector.tsx
|
|
1629
1629
|
import { useEffect, useState as useState2 } from "react";
|
|
1630
1630
|
|
|
1631
1631
|
// src/devtools/browser/components/SectionLabel.tsx
|
|
1632
|
-
import {
|
|
1632
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
1633
1633
|
function SectionLabel({
|
|
1634
1634
|
label,
|
|
1635
1635
|
color = DEVTOOL_COLOR_SEMANTIC_SYSTEM
|
|
1636
1636
|
}) {
|
|
1637
|
-
return /* @__PURE__ */
|
|
1637
|
+
return /* @__PURE__ */ jsx7("div", {
|
|
1638
1638
|
style: {
|
|
1639
1639
|
color,
|
|
1640
1640
|
fontSize: "0.85em",
|
|
@@ -1645,11 +1645,11 @@ function SectionLabel({
|
|
|
1645
1645
|
textAlign: "left"
|
|
1646
1646
|
},
|
|
1647
1647
|
children: label
|
|
1648
|
-
}
|
|
1648
|
+
});
|
|
1649
1649
|
}
|
|
1650
1650
|
|
|
1651
1651
|
// src/devtools/browser/components/StateInspector.tsx
|
|
1652
|
-
import {
|
|
1652
|
+
import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1653
1653
|
function StateInspector({
|
|
1654
1654
|
store,
|
|
1655
1655
|
onApply
|
|
@@ -1689,7 +1689,7 @@ function StateInspector({
|
|
|
1689
1689
|
setDirty(false);
|
|
1690
1690
|
setError(null);
|
|
1691
1691
|
};
|
|
1692
|
-
return /* @__PURE__ */
|
|
1692
|
+
return /* @__PURE__ */ jsxs6("div", {
|
|
1693
1693
|
style: {
|
|
1694
1694
|
flex: 1,
|
|
1695
1695
|
display: "flex",
|
|
@@ -1699,7 +1699,7 @@ function StateInspector({
|
|
|
1699
1699
|
background: DEVTOOL_DETAIL_BASE_BACKGROUND
|
|
1700
1700
|
},
|
|
1701
1701
|
children: [
|
|
1702
|
-
/* @__PURE__ */
|
|
1702
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
1703
1703
|
style: {
|
|
1704
1704
|
flex: 1,
|
|
1705
1705
|
minHeight: 0,
|
|
@@ -1708,19 +1708,19 @@ function StateInspector({
|
|
|
1708
1708
|
padding: "10px 12px 8px"
|
|
1709
1709
|
},
|
|
1710
1710
|
children: [
|
|
1711
|
-
/* @__PURE__ */
|
|
1711
|
+
/* @__PURE__ */ jsx8(SectionLabel, {
|
|
1712
1712
|
label: "Current state"
|
|
1713
|
-
}
|
|
1714
|
-
/* @__PURE__ */
|
|
1713
|
+
}),
|
|
1714
|
+
/* @__PURE__ */ jsx8("div", {
|
|
1715
1715
|
style: { flex: 1, minHeight: 0, overflow: "auto" },
|
|
1716
|
-
children: /* @__PURE__ */
|
|
1716
|
+
children: /* @__PURE__ */ jsx8(JsonView, {
|
|
1717
1717
|
value: store.currentState,
|
|
1718
1718
|
style: { minHeight: "100%" }
|
|
1719
|
-
}
|
|
1720
|
-
}
|
|
1719
|
+
})
|
|
1720
|
+
})
|
|
1721
1721
|
]
|
|
1722
|
-
}
|
|
1723
|
-
/* @__PURE__ */
|
|
1722
|
+
}),
|
|
1723
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
1724
1724
|
style: {
|
|
1725
1725
|
flex: 1,
|
|
1726
1726
|
minHeight: 0,
|
|
@@ -1730,7 +1730,7 @@ function StateInspector({
|
|
|
1730
1730
|
borderTop: `1px solid ${DEVTOOL_PANEL_DIVIDER_BORDER}`
|
|
1731
1731
|
},
|
|
1732
1732
|
children: [
|
|
1733
|
-
/* @__PURE__ */
|
|
1733
|
+
/* @__PURE__ */ jsxs6("div", {
|
|
1734
1734
|
style: {
|
|
1735
1735
|
display: "flex",
|
|
1736
1736
|
alignItems: "center",
|
|
@@ -1738,18 +1738,18 @@ function StateInspector({
|
|
|
1738
1738
|
marginBottom: "3px"
|
|
1739
1739
|
},
|
|
1740
1740
|
children: [
|
|
1741
|
-
/* @__PURE__ */
|
|
1741
|
+
/* @__PURE__ */ jsx8(SectionLabel, {
|
|
1742
1742
|
label: "Edit & apply",
|
|
1743
1743
|
color: DEVTOOL_COLOR_SEMANTIC_WARNING
|
|
1744
|
-
}
|
|
1745
|
-
dirty && /* @__PURE__ */
|
|
1744
|
+
}),
|
|
1745
|
+
dirty && /* @__PURE__ */ jsx8("button", {
|
|
1746
1746
|
onClick: reload,
|
|
1747
1747
|
style: linkButtonStyle(DEVTOOL_COLOR_TEXT_MUTED),
|
|
1748
1748
|
children: "reload from store"
|
|
1749
|
-
}
|
|
1749
|
+
})
|
|
1750
1750
|
]
|
|
1751
|
-
}
|
|
1752
|
-
/* @__PURE__ */
|
|
1751
|
+
}),
|
|
1752
|
+
/* @__PURE__ */ jsx8("textarea", {
|
|
1753
1753
|
value: draft,
|
|
1754
1754
|
spellCheck: false,
|
|
1755
1755
|
onChange: (e) => onEdit(e.target.value),
|
|
@@ -1768,8 +1768,8 @@ function StateInspector({
|
|
|
1768
1768
|
fontSize: "11px",
|
|
1769
1769
|
lineHeight: 1.5
|
|
1770
1770
|
}
|
|
1771
|
-
}
|
|
1772
|
-
error != null && /* @__PURE__ */
|
|
1771
|
+
}),
|
|
1772
|
+
error != null && /* @__PURE__ */ jsx8("div", {
|
|
1773
1773
|
style: {
|
|
1774
1774
|
marginTop: "6px",
|
|
1775
1775
|
padding: "6px 8px",
|
|
@@ -1781,10 +1781,10 @@ function StateInspector({
|
|
|
1781
1781
|
flexShrink: 0
|
|
1782
1782
|
},
|
|
1783
1783
|
children: error
|
|
1784
|
-
}
|
|
1785
|
-
/* @__PURE__ */
|
|
1784
|
+
}),
|
|
1785
|
+
/* @__PURE__ */ jsx8("div", {
|
|
1786
1786
|
style: { display: "flex", gap: "8px", marginTop: "8px", flexShrink: 0 },
|
|
1787
|
-
children: /* @__PURE__ */
|
|
1787
|
+
children: /* @__PURE__ */ jsx8("button", {
|
|
1788
1788
|
onClick: apply,
|
|
1789
1789
|
disabled: !dirty,
|
|
1790
1790
|
style: {
|
|
@@ -1799,12 +1799,12 @@ function StateInspector({
|
|
|
1799
1799
|
fontFamily: SANS_FONT
|
|
1800
1800
|
},
|
|
1801
1801
|
children: "Apply to store"
|
|
1802
|
-
}
|
|
1803
|
-
}
|
|
1802
|
+
})
|
|
1803
|
+
})
|
|
1804
1804
|
]
|
|
1805
|
-
}
|
|
1805
|
+
})
|
|
1806
1806
|
]
|
|
1807
|
-
}
|
|
1807
|
+
});
|
|
1808
1808
|
}
|
|
1809
1809
|
function linkButtonStyle(color) {
|
|
1810
1810
|
return {
|
|
@@ -1819,14 +1819,14 @@ function linkButtonStyle(color) {
|
|
|
1819
1819
|
}
|
|
1820
1820
|
|
|
1821
1821
|
// src/devtools/browser/components/StoreTabs.tsx
|
|
1822
|
-
import {
|
|
1822
|
+
import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1823
1823
|
function StoreTabs({
|
|
1824
1824
|
stores,
|
|
1825
1825
|
selectedStoreId,
|
|
1826
1826
|
onSelect,
|
|
1827
1827
|
includeAll = true
|
|
1828
1828
|
}) {
|
|
1829
|
-
return /* @__PURE__ */
|
|
1829
|
+
return /* @__PURE__ */ jsxs7("div", {
|
|
1830
1830
|
style: {
|
|
1831
1831
|
display: "flex",
|
|
1832
1832
|
gap: "6px",
|
|
@@ -1837,23 +1837,23 @@ function StoreTabs({
|
|
|
1837
1837
|
flexShrink: 0
|
|
1838
1838
|
},
|
|
1839
1839
|
children: [
|
|
1840
|
-
includeAll && /* @__PURE__ */
|
|
1840
|
+
includeAll && /* @__PURE__ */ jsx9(Pill, {
|
|
1841
1841
|
active: selectedStoreId == null,
|
|
1842
1842
|
onClick: () => onSelect(null),
|
|
1843
1843
|
label: "all"
|
|
1844
|
-
}
|
|
1845
|
-
stores.length === 0 && /* @__PURE__ */
|
|
1844
|
+
}),
|
|
1845
|
+
stores.length === 0 && /* @__PURE__ */ jsx9("span", {
|
|
1846
1846
|
style: { color: DEVTOOL_COLOR_TEXT_MUTED, fontSize: "11px", padding: "2px 0" },
|
|
1847
1847
|
children: "no stores registered"
|
|
1848
|
-
}
|
|
1849
|
-
stores.map((store) => /* @__PURE__ */
|
|
1848
|
+
}),
|
|
1849
|
+
stores.map((store) => /* @__PURE__ */ jsx9(Pill, {
|
|
1850
1850
|
active: selectedStoreId === store.id,
|
|
1851
1851
|
onClick: () => onSelect(store.id),
|
|
1852
1852
|
label: store.label,
|
|
1853
1853
|
count: store.changeCount
|
|
1854
|
-
}, store.id
|
|
1854
|
+
}, store.id))
|
|
1855
1855
|
]
|
|
1856
|
-
}
|
|
1856
|
+
});
|
|
1857
1857
|
}
|
|
1858
1858
|
function Pill({
|
|
1859
1859
|
active,
|
|
@@ -1861,7 +1861,7 @@ function Pill({
|
|
|
1861
1861
|
label,
|
|
1862
1862
|
count
|
|
1863
1863
|
}) {
|
|
1864
|
-
return /* @__PURE__ */
|
|
1864
|
+
return /* @__PURE__ */ jsxs7("button", {
|
|
1865
1865
|
onClick,
|
|
1866
1866
|
style: {
|
|
1867
1867
|
display: "flex",
|
|
@@ -1880,15 +1880,15 @@ function Pill({
|
|
|
1880
1880
|
},
|
|
1881
1881
|
children: [
|
|
1882
1882
|
label,
|
|
1883
|
-
count != null && count > 0 && /* @__PURE__ */
|
|
1883
|
+
count != null && count > 0 && /* @__PURE__ */ jsx9("span", {
|
|
1884
1884
|
style: {
|
|
1885
1885
|
color: active ? DEVTOOL_COLOR_SEMANTIC_SYSTEM : DEVTOOL_COLOR_TEXT_FAINT,
|
|
1886
1886
|
fontSize: "10px"
|
|
1887
1887
|
},
|
|
1888
1888
|
children: count
|
|
1889
|
-
}
|
|
1889
|
+
})
|
|
1890
1890
|
]
|
|
1891
|
-
}
|
|
1891
|
+
});
|
|
1892
1892
|
}
|
|
1893
1893
|
|
|
1894
1894
|
// src/devtools/browser/devtools_dock.ts
|
|
@@ -1999,7 +1999,7 @@ function getDevtoolsDockCoordinator() {
|
|
|
1999
1999
|
}
|
|
2000
2000
|
|
|
2001
2001
|
// src/devtools/browser/NiceStateDevtools.tsx
|
|
2002
|
-
import {
|
|
2002
|
+
import { jsx as jsx10, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
|
|
2003
2003
|
if (typeof document !== "undefined" && !document.getElementById("__nice-state-devtools-styles")) {
|
|
2004
2004
|
const style = document.createElement("style");
|
|
2005
2005
|
style.id = "__nice-state-devtools-styles";
|
|
@@ -2058,10 +2058,12 @@ function writePrefs(prefs) {
|
|
|
2058
2058
|
}
|
|
2059
2059
|
var EMPTY_SNAPSHOT = { stores: [], changes: [], paused: false };
|
|
2060
2060
|
function NiceStateDevtools({ forceEnable, ...props }) {
|
|
2061
|
-
if (!forceEnable &&
|
|
2062
|
-
|
|
2061
|
+
if (!forceEnable && process["env"]["NODE_ENV"] !== "development") {
|
|
2062
|
+
return null;
|
|
2063
|
+
}
|
|
2064
|
+
return /* @__PURE__ */ jsx10(NiceStateDevtools_Panel, {
|
|
2063
2065
|
...props
|
|
2064
|
-
}
|
|
2066
|
+
});
|
|
2065
2067
|
}
|
|
2066
2068
|
function NiceStateDevtools_Panel({
|
|
2067
2069
|
core,
|
|
@@ -2153,9 +2155,9 @@ function NiceStateDevtools_Panel({
|
|
|
2153
2155
|
};
|
|
2154
2156
|
if (!isOpen) {
|
|
2155
2157
|
if (view.isPrimary && !view.anyOpen) {
|
|
2156
|
-
return /* @__PURE__ */
|
|
2158
|
+
return /* @__PURE__ */ jsx10(DevtoolsLauncher, {
|
|
2157
2159
|
items: view.devtools
|
|
2158
|
-
}
|
|
2160
|
+
});
|
|
2159
2161
|
}
|
|
2160
2162
|
return null;
|
|
2161
2163
|
}
|
|
@@ -2194,16 +2196,16 @@ function NiceStateDevtools_Panel({
|
|
|
2194
2196
|
borderRadius: view.stacked ? "0" : "8px 0 0 8px"
|
|
2195
2197
|
}
|
|
2196
2198
|
};
|
|
2197
|
-
return /* @__PURE__ */
|
|
2199
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
2198
2200
|
id: "__nice-state-devtools-panel",
|
|
2199
2201
|
style: panelStyle,
|
|
2200
2202
|
children: [
|
|
2201
|
-
/* @__PURE__ */
|
|
2203
|
+
/* @__PURE__ */ jsx10(ResizeHandle, {
|
|
2202
2204
|
dockSide,
|
|
2203
2205
|
dockedSize,
|
|
2204
2206
|
onChange: (size) => setPrefs(isHorizDock ? { dockedHeight: size } : { dockedWidth: size })
|
|
2205
|
-
}
|
|
2206
|
-
/* @__PURE__ */
|
|
2207
|
+
}),
|
|
2208
|
+
/* @__PURE__ */ jsx10(PanelHeader, {
|
|
2207
2209
|
position,
|
|
2208
2210
|
onPositionChange: (p) => setPrefs({ position: p }),
|
|
2209
2211
|
onClose: () => setPrefs({ isOpen: false }),
|
|
@@ -2214,27 +2216,27 @@ function NiceStateDevtools_Panel({
|
|
|
2214
2216
|
paused,
|
|
2215
2217
|
onTogglePause: () => core.togglePaused(),
|
|
2216
2218
|
openOthers: view.otherClosed,
|
|
2217
|
-
children: /* @__PURE__ */
|
|
2219
|
+
children: /* @__PURE__ */ jsx10(SegmentedControl, {
|
|
2218
2220
|
options: [
|
|
2219
2221
|
{ value: "timeline", label: "Timeline" },
|
|
2220
2222
|
{ value: "state", label: "State" }
|
|
2221
2223
|
],
|
|
2222
2224
|
value: mode,
|
|
2223
2225
|
onChange: setMode
|
|
2224
|
-
}
|
|
2225
|
-
}
|
|
2226
|
-
/* @__PURE__ */
|
|
2226
|
+
})
|
|
2227
|
+
}),
|
|
2228
|
+
/* @__PURE__ */ jsx10(StoreTabs, {
|
|
2227
2229
|
stores,
|
|
2228
2230
|
selectedStoreId: mode === "state" ? activeStore?.id ?? null : storeFilter,
|
|
2229
2231
|
onSelect: setStoreFilter,
|
|
2230
2232
|
includeAll: mode === "timeline"
|
|
2231
|
-
}
|
|
2232
|
-
mode === "state" ? activeStore != null ? /* @__PURE__ */
|
|
2233
|
+
}),
|
|
2234
|
+
mode === "state" ? activeStore != null ? /* @__PURE__ */ jsx10(StateInspector, {
|
|
2233
2235
|
store: activeStore,
|
|
2234
2236
|
onApply: (id, next) => core.applyEdit(id, next)
|
|
2235
|
-
}
|
|
2237
|
+
}) : /* @__PURE__ */ jsx10(EmptyMessage, {
|
|
2236
2238
|
children: "No stores registered. Call core.registerStore(...)."
|
|
2237
|
-
}
|
|
2239
|
+
}) : /* @__PURE__ */ jsxs8("div", {
|
|
2238
2240
|
style: {
|
|
2239
2241
|
flex: 1,
|
|
2240
2242
|
display: "flex",
|
|
@@ -2243,7 +2245,7 @@ function NiceStateDevtools_Panel({
|
|
|
2243
2245
|
minHeight: 0
|
|
2244
2246
|
},
|
|
2245
2247
|
children: [
|
|
2246
|
-
/* @__PURE__ */
|
|
2248
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
2247
2249
|
style: {
|
|
2248
2250
|
flexGrow: selectedChange != null ? 1 - detailRatio : 1,
|
|
2249
2251
|
flexShrink: 1,
|
|
@@ -2255,7 +2257,7 @@ function NiceStateDevtools_Panel({
|
|
|
2255
2257
|
overflow: "hidden"
|
|
2256
2258
|
},
|
|
2257
2259
|
children: [
|
|
2258
|
-
/* @__PURE__ */
|
|
2260
|
+
/* @__PURE__ */ jsx10(TimelineFollowToggles, {
|
|
2259
2261
|
stayOnLatest,
|
|
2260
2262
|
onStayOnLatestChange: (next) => setPrefs({ stayOnLatest: next }),
|
|
2261
2263
|
followLatestOnSelect,
|
|
@@ -2266,10 +2268,10 @@ function NiceStateDevtools_Panel({
|
|
|
2266
2268
|
setPrefs({ followLatestOnSelect: next });
|
|
2267
2269
|
}
|
|
2268
2270
|
}
|
|
2269
|
-
}
|
|
2270
|
-
/* @__PURE__ */
|
|
2271
|
+
}),
|
|
2272
|
+
/* @__PURE__ */ jsx10("div", {
|
|
2271
2273
|
style: { flex: 1, minHeight: 0, overflowY: "auto" },
|
|
2272
|
-
children: /* @__PURE__ */
|
|
2274
|
+
children: /* @__PURE__ */ jsx10(ChangeList, {
|
|
2273
2275
|
groups,
|
|
2274
2276
|
selectedCuid: selectedChangeCuid,
|
|
2275
2277
|
onSelect: (cuid) => {
|
|
@@ -2283,17 +2285,17 @@ function NiceStateDevtools_Panel({
|
|
|
2283
2285
|
setSelectedChangeCuid(next);
|
|
2284
2286
|
},
|
|
2285
2287
|
showStore: storeFilter == null
|
|
2286
|
-
}
|
|
2287
|
-
}
|
|
2288
|
+
})
|
|
2289
|
+
})
|
|
2288
2290
|
]
|
|
2289
|
-
}
|
|
2290
|
-
selectedChange != null && /* @__PURE__ */
|
|
2291
|
+
}),
|
|
2292
|
+
selectedChange != null && /* @__PURE__ */ jsxs8(Fragment, {
|
|
2291
2293
|
children: [
|
|
2292
|
-
/* @__PURE__ */
|
|
2294
|
+
/* @__PURE__ */ jsx10(SplitHandle, {
|
|
2293
2295
|
horizontal: isHorizDock,
|
|
2294
2296
|
onRatioChange: (ratio) => setPrefs({ detailRatio: ratio })
|
|
2295
|
-
}
|
|
2296
|
-
/* @__PURE__ */
|
|
2297
|
+
}),
|
|
2298
|
+
/* @__PURE__ */ jsx10("div", {
|
|
2297
2299
|
style: {
|
|
2298
2300
|
flexGrow: detailRatio,
|
|
2299
2301
|
flexShrink: 1,
|
|
@@ -2311,7 +2313,7 @@ function NiceStateDevtools_Panel({
|
|
|
2311
2313
|
boxShadow: "inset 0 18px 36px -14px rgba(0,0,0,0.8)"
|
|
2312
2314
|
}
|
|
2313
2315
|
},
|
|
2314
|
-
children: /* @__PURE__ */
|
|
2316
|
+
children: /* @__PURE__ */ jsx10(ChangeDetailPanel, {
|
|
2315
2317
|
change: selectedChange,
|
|
2316
2318
|
onRevert: (c) => core.revertChange(c),
|
|
2317
2319
|
view: detailView,
|
|
@@ -2320,14 +2322,14 @@ function NiceStateDevtools_Panel({
|
|
|
2320
2322
|
onCompressChange: (v) => setPrefs({ compressDiff: v }),
|
|
2321
2323
|
latestFirst: diffLatestFirst,
|
|
2322
2324
|
onLatestFirstChange: (v) => setPrefs({ diffLatestFirst: v })
|
|
2323
|
-
}
|
|
2324
|
-
}
|
|
2325
|
+
})
|
|
2326
|
+
})
|
|
2325
2327
|
]
|
|
2326
|
-
}
|
|
2328
|
+
})
|
|
2327
2329
|
]
|
|
2328
|
-
}
|
|
2330
|
+
})
|
|
2329
2331
|
]
|
|
2330
|
-
}
|
|
2332
|
+
});
|
|
2331
2333
|
}
|
|
2332
2334
|
function TimelineFollowToggles({
|
|
2333
2335
|
stayOnLatest,
|
|
@@ -2335,7 +2337,7 @@ function TimelineFollowToggles({
|
|
|
2335
2337
|
followLatestOnSelect,
|
|
2336
2338
|
onFollowLatestOnSelectChange
|
|
2337
2339
|
}) {
|
|
2338
|
-
return /* @__PURE__ */
|
|
2340
|
+
return /* @__PURE__ */ jsxs8("div", {
|
|
2339
2341
|
style: {
|
|
2340
2342
|
display: "flex",
|
|
2341
2343
|
flexDirection: "column",
|
|
@@ -2345,16 +2347,16 @@ function TimelineFollowToggles({
|
|
|
2345
2347
|
borderBottom: `1px solid ${DEVTOOL_LIST_BASE_BACKGROUND}`
|
|
2346
2348
|
},
|
|
2347
2349
|
children: [
|
|
2348
|
-
/* @__PURE__ */
|
|
2350
|
+
/* @__PURE__ */ jsx10(ToggleLabel, {
|
|
2349
2351
|
title: "Auto-select the most recent change so the detail pane keeps showing the latest as new changes land",
|
|
2350
2352
|
checked: stayOnLatest,
|
|
2351
2353
|
onChange: onStayOnLatestChange,
|
|
2352
2354
|
children: "Follow latest"
|
|
2353
|
-
}
|
|
2354
|
-
/* @__PURE__ */
|
|
2355
|
+
}),
|
|
2356
|
+
/* @__PURE__ */ jsxs8("div", {
|
|
2355
2357
|
style: { display: "flex", alignItems: "center", paddingLeft: "12px", marginTop: "-4px" },
|
|
2356
2358
|
children: [
|
|
2357
|
-
/* @__PURE__ */
|
|
2359
|
+
/* @__PURE__ */ jsx10("span", {
|
|
2358
2360
|
"aria-hidden": true,
|
|
2359
2361
|
style: {
|
|
2360
2362
|
color: DEVTOOL_COLOR_TEXT_MUTED,
|
|
@@ -2363,17 +2365,17 @@ function TimelineFollowToggles({
|
|
|
2363
2365
|
lineHeight: 1
|
|
2364
2366
|
},
|
|
2365
2367
|
children: "└"
|
|
2366
|
-
}
|
|
2367
|
-
/* @__PURE__ */
|
|
2368
|
+
}),
|
|
2369
|
+
/* @__PURE__ */ jsx10(ToggleLabel, {
|
|
2368
2370
|
title: "When you click the latest change, turn 'Follow latest' back on so the view resumes tracking new changes. Turn this off to pin exactly to the change you click instead.",
|
|
2369
2371
|
checked: followLatestOnSelect,
|
|
2370
2372
|
onChange: onFollowLatestOnSelectChange,
|
|
2371
2373
|
children: "clicking latest re-follows"
|
|
2372
|
-
}
|
|
2374
|
+
})
|
|
2373
2375
|
]
|
|
2374
|
-
}
|
|
2376
|
+
})
|
|
2375
2377
|
]
|
|
2376
|
-
}
|
|
2378
|
+
});
|
|
2377
2379
|
}
|
|
2378
2380
|
function ToggleLabel({
|
|
2379
2381
|
checked,
|
|
@@ -2381,7 +2383,7 @@ function ToggleLabel({
|
|
|
2381
2383
|
title,
|
|
2382
2384
|
children
|
|
2383
2385
|
}) {
|
|
2384
|
-
return /* @__PURE__ */
|
|
2386
|
+
return /* @__PURE__ */ jsxs8("label", {
|
|
2385
2387
|
title,
|
|
2386
2388
|
style: {
|
|
2387
2389
|
display: "flex",
|
|
@@ -2395,18 +2397,18 @@ function ToggleLabel({
|
|
|
2395
2397
|
fontFamily: SANS_FONT
|
|
2396
2398
|
},
|
|
2397
2399
|
children: [
|
|
2398
|
-
/* @__PURE__ */
|
|
2400
|
+
/* @__PURE__ */ jsx10("input", {
|
|
2399
2401
|
type: "checkbox",
|
|
2400
2402
|
checked,
|
|
2401
2403
|
onChange: (e) => onChange(e.target.checked),
|
|
2402
2404
|
style: { accentColor: DEVTOOL_COLOR_SEMANTIC_SYSTEM, cursor: "pointer", margin: 0 }
|
|
2403
|
-
}
|
|
2405
|
+
}),
|
|
2404
2406
|
children
|
|
2405
2407
|
]
|
|
2406
|
-
}
|
|
2408
|
+
});
|
|
2407
2409
|
}
|
|
2408
2410
|
function EmptyMessage({ children }) {
|
|
2409
|
-
return /* @__PURE__ */
|
|
2411
|
+
return /* @__PURE__ */ jsx10("div", {
|
|
2410
2412
|
style: {
|
|
2411
2413
|
flex: 1,
|
|
2412
2414
|
display: "flex",
|
|
@@ -2418,7 +2420,7 @@ function EmptyMessage({ children }) {
|
|
|
2418
2420
|
fontSize: "11px"
|
|
2419
2421
|
},
|
|
2420
2422
|
children
|
|
2421
|
-
}
|
|
2423
|
+
});
|
|
2422
2424
|
}
|
|
2423
2425
|
export {
|
|
2424
2426
|
StateDevtoolsCore,
|