foldkit 0.33.2 → 0.33.4
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.
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
declare const overlayStyles = ":host {\n --dt-bg: #1e1e2e;\n --dt-surface-selected: #282839;\n --dt-border: #585b70;\n --dt-text: #cdd6f4;\n --dt-text-muted: #9399b2;\n --dt-accent: #cba6f7;\n --dt-live: #a6e3a1;\n --dt-paused: #fab387;\n --dt-json-string: #a6e3a1;\n --dt-json-number: #89b4fa;\n --dt-json-boolean: #fab387;\n --dt-json-null: #9399b2;\n --dt-json-key: #89dceb;\n --dt-json-tag: #cba6f7;\n --dt-json-preview: #9399b2;\n --dt-json-arrow: #9399b2;\n --dt-tree-hover: #313244;\n --dt-diff-changed: #74c7ec;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\nbutton {\n font: inherit;\n color: inherit;\n}\nul {\n list-style: none;\n}\n\n.fixed {\n position: fixed;\n}\n.flex {\n display: flex;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.inline-block {\n display: inline-block;\n}\n.gap-0\\.5 {\n gap: 2px;\n}\n.gap-1\\.5 {\n gap: 6px;\n}\n.gap-2 {\n gap: 8px;\n}\n.gap-px {\n gap: 1px;\n}\n.px-1 {\n padding-left: 4px;\n padding-right: 4px;\n}\n.px-2 {\n padding-left: 8px;\n padding-right: 8px;\n}\n.px-2\\.5 {\n padding-left: 10px;\n padding-right: 10px;\n}\n.p-3 {\n padding: 12px;\n}\n.px-3 {\n padding-left: 12px;\n padding-right: 12px;\n}\n.py-0\\.5 {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n.pt-1 {\n padding-top: 4px;\n}\n.pl-1 {\n padding-left: 4px;\n}\n.py-1 {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n.py-1\\.5 {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n.py-2 {\n padding-top: 8px;\n padding-bottom: 8px;\n}\n.py-px {\n padding-top: 1px;\n padding-bottom: 1px;\n}\n.w-1\\.5 {\n width: 6px;\n}\n.h-1\\.5 {\n height: 6px;\n}\n.w-3 {\n width: 12px;\n}\n.w-5 {\n width: 20px;\n}\n.h-5 {\n height: 20px;\n}\n.w-14 {\n width: 56px;\n}\n.h-14 {\n height: 56px;\n}\n.min-w-0 {\n min-width: 0;\n}\n.min-w-5 {\n min-width: 20px;\n}\n.min-h-0 {\n min-height: 0;\n}\n/* Badge positions \u2014 flush against side edge */\n.dt-pos-br {\n bottom: 16px;\n right: 0;\n border-radius: 6px 0 0 6px;\n}\n.dt-pos-bl {\n bottom: 16px;\n left: 0;\n border-radius: 0 6px 6px 0;\n}\n.dt-pos-tr {\n top: 16px;\n right: 0;\n border-radius: 6px 0 0 6px;\n}\n.dt-pos-tl {\n top: 16px;\n left: 0;\n border-radius: 0 6px 6px 0;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n
|
|
1
|
+
declare const overlayStyles = ":host {\n --dt-bg: #1e1e2e;\n --dt-surface-selected: #282839;\n --dt-border: #585b70;\n --dt-text: #cdd6f4;\n --dt-text-muted: #9399b2;\n --dt-accent: #cba6f7;\n --dt-live: #a6e3a1;\n --dt-paused: #fab387;\n --dt-json-string: #a6e3a1;\n --dt-json-number: #89b4fa;\n --dt-json-boolean: #fab387;\n --dt-json-null: #9399b2;\n --dt-json-key: #89dceb;\n --dt-json-tag: #cba6f7;\n --dt-json-preview: #9399b2;\n --dt-json-arrow: #9399b2;\n --dt-tree-hover: #313244;\n --dt-diff-changed: #74c7ec;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\nbutton {\n font: inherit;\n color: inherit;\n}\nul {\n list-style: none;\n}\n\n.fixed {\n position: fixed;\n}\n.flex {\n display: flex;\n}\n.flex-col {\n flex-direction: column;\n}\n.flex-1 {\n flex: 1 1 0%;\n}\n.items-center {\n align-items: center;\n}\n.justify-center {\n justify-content: center;\n}\n.justify-between {\n justify-content: space-between;\n}\n.shrink-0 {\n flex-shrink: 0;\n}\n.inline-block {\n display: inline-block;\n}\n.gap-0\\.5 {\n gap: 2px;\n}\n.gap-1\\.5 {\n gap: 6px;\n}\n.gap-2 {\n gap: 8px;\n}\n.gap-px {\n gap: 1px;\n}\n.px-1 {\n padding-left: 4px;\n padding-right: 4px;\n}\n.px-2 {\n padding-left: 8px;\n padding-right: 8px;\n}\n.px-2\\.5 {\n padding-left: 10px;\n padding-right: 10px;\n}\n.p-3 {\n padding: 12px;\n}\n.px-3 {\n padding-left: 12px;\n padding-right: 12px;\n}\n.py-0\\.5 {\n padding-top: 2px;\n padding-bottom: 2px;\n}\n.pt-1 {\n padding-top: 4px;\n}\n.pl-1 {\n padding-left: 4px;\n}\n.py-1 {\n padding-top: 4px;\n padding-bottom: 4px;\n}\n.py-1\\.5 {\n padding-top: 6px;\n padding-bottom: 6px;\n}\n.py-2 {\n padding-top: 8px;\n padding-bottom: 8px;\n}\n.py-px {\n padding-top: 1px;\n padding-bottom: 1px;\n}\n.w-1\\.5 {\n width: 6px;\n}\n.h-1\\.5 {\n height: 6px;\n}\n.w-3 {\n width: 12px;\n}\n.w-5 {\n width: 20px;\n}\n.h-5 {\n height: 20px;\n}\n.w-14 {\n width: 56px;\n}\n.h-14 {\n height: 56px;\n}\n.min-w-0 {\n min-width: 0;\n}\n.min-w-5 {\n min-width: 20px;\n}\n.min-h-0 {\n min-height: 0;\n}\n/* Badge positions \u2014 flush against side edge */\n.dt-pos-br {\n bottom: 16px;\n right: 0;\n border-radius: 6px 0 0 6px;\n}\n.dt-pos-bl {\n bottom: 16px;\n left: 0;\n border-radius: 0 6px 6px 0;\n}\n.dt-pos-tr {\n top: 16px;\n right: 0;\n border-radius: 6px 0 0 6px;\n}\n.dt-pos-tl {\n top: 16px;\n left: 0;\n border-radius: 0 6px 6px 0;\n}\n.overflow-hidden {\n overflow: hidden;\n}\n.overflow-auto {\n overflow: auto;\n}\n.overflow-y-auto {\n overflow-y: auto;\n}\n\n.truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.rounded {\n border-radius: 4px;\n}\n.rounded-lg {\n border-radius: 8px;\n}\n.rounded-full {\n border-radius: 9999px;\n}\n.border {\n border-width: 1px;\n border-style: solid;\n border-color: var(--dt-border);\n}\n.border-b {\n border-bottom: 1px solid var(--dt-border);\n}\n.border-t {\n border-top: 1px solid var(--dt-border);\n}\n.border-r {\n border-right: 1px solid var(--dt-border);\n}\n.border-l {\n border-left: 1px solid var(--dt-border);\n}\n.border-none {\n border: none;\n}\n.border-l-3 {\n border-left: 3px solid transparent;\n}\n.border-dt-live {\n border-color: var(--dt-live);\n}\n.selected {\n background-color: var(--dt-surface-selected);\n}\n.dt-row:hover:not(.selected) {\n background-color: var(--dt-tree-hover);\n}\n.dt-header-button:hover {\n color: var(--dt-text);\n}\n.dt-resume-button:hover {\n opacity: 0.7;\n}\n.dt-tab-button {\n position: relative;\n background: transparent;\n border: none;\n border-right: 1px solid var(--dt-border);\n outline: none;\n flex: 1;\n}\n.dt-tab-active {\n background-color: var(--dt-surface-selected);\n}\n.dt-tab-button:not(.dt-tab-active):hover {\n color: var(--dt-text);\n background-color: rgba(49, 50, 68, 0.3);\n}\n.font-sans {\n font-family:\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n 'Segoe UI',\n Roboto,\n sans-serif;\n}\n.font-mono {\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.font-medium {\n font-weight: 500;\n}\n.font-semibold {\n font-weight: 600;\n}\n.text-xs {\n font-size: 12px;\n}\n.text-2xs {\n font-size: 10px;\n}\n.text-sm {\n font-size: 11px;\n}\n.text-base {\n font-size: 13px;\n}\n.text-md {\n font-size: 15px;\n}\n.text-lg {\n font-size: 20px;\n}\n.text-xl {\n font-size: 26px;\n}\n.italic {\n font-style: italic;\n}\n.text-right {\n text-align: right;\n}\n.tracking-wide {\n letter-spacing: 0.025em;\n}\n.tracking-wider {\n letter-spacing: 0.05em;\n}\n.leading-none {\n line-height: 1;\n}\n.leading-snug {\n line-height: 1.35;\n}\n.bg-dt-bg {\n background-color: var(--dt-bg);\n}\n.bg-dt-live {\n background-color: var(--dt-live);\n}\n.bg-transparent {\n background-color: transparent;\n}\n.text-dt {\n color: var(--dt-text);\n}\n.text-dt-muted {\n color: var(--dt-text-muted);\n}\n.text-dt-accent {\n color: var(--dt-accent);\n}\n.text-dt-live {\n color: var(--dt-live);\n}\n.text-dt-paused {\n color: var(--dt-paused);\n}\n.cursor-pointer {\n cursor: pointer;\n}\n.outline-none {\n outline: none;\n}\n.transition-colors {\n transition-property: color, background-color, border-color;\n transition-duration: 100ms;\n transition-timing-function: ease;\n}\n\n/* Panel */\n.dt-panel {\n width: 360px;\n height: 480px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);\n z-index: 99998;\n}\n/* Panel positions */\n.dt-panel-br {\n bottom: 16px;\n right: 28px;\n}\n.dt-panel-bl {\n bottom: 16px;\n left: 28px;\n}\n.dt-panel-tr {\n top: 16px;\n right: 28px;\n}\n.dt-panel-tl {\n top: 16px;\n left: 28px;\n}\n.dt-panel-wide {\n width: 720px;\n}\n.dt-message-pane {\n width: 320px;\n flex-shrink: 0;\n}\n.dt-badge {\n z-index: 99999;\n box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);\n transition: background-color 150ms ease;\n border: 1px solid var(--dt-border);\n}\n.dt-badge-accent:hover {\n background-color: #252538;\n}\n.dt-badge-paused {\n background-color: var(--dt-paused);\n color: var(--dt-bg);\n}\n.dt-badge-paused:hover {\n background-color: #e0a070;\n}\n.dt-badge.dt-pos-br,\n.dt-badge.dt-pos-tr {\n border-right: none;\n}\n.dt-badge.dt-pos-bl,\n.dt-badge.dt-pos-tl {\n border-left: none;\n}\n\n/* JSON tree */\n.tree-row {\n position: relative;\n white-space: nowrap;\n line-height: 18px;\n padding-right: 8px;\n}\n.tree-row-expandable:hover {\n background-color: var(--dt-tree-hover);\n}\n.inspector-tree {\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n}\n.json-key {\n color: var(--dt-json-key);\n}\n.json-string {\n color: var(--dt-json-string);\n}\n.json-number {\n color: var(--dt-json-number);\n}\n.json-boolean {\n color: var(--dt-json-boolean);\n}\n.json-null {\n color: var(--dt-json-null);\n}\n.json-tag {\n color: var(--dt-json-tag);\n margin-right: 4px;\n}\n.json-preview {\n color: var(--dt-json-preview);\n}\n.json-arrow {\n color: var(--dt-json-arrow);\n width: 10px;\n height: 10px;\n user-select: none;\n}\n\n/* Diff */\n.diff-changed {\n background-color: rgba(116, 199, 236, 0.06);\n}\n.diff-dot {\n position: absolute;\n left: 3px;\n width: 5px;\n height: 5px;\n border-radius: 9999px;\n background-color: var(--dt-diff-changed);\n}\n.diff-dot-inline {\n width: 5px;\n height: 5px;\n border-radius: 9999px;\n background-color: var(--dt-diff-changed);\n flex-shrink: 0;\n}\n.dot-column {\n width: 5px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.pause-column {\n width: 8px;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dt-pause-icon {\n width: 8px;\n height: 8px;\n color: var(--dt-paused);\n}\n\n/* Interaction blocker \u2014 covers the app while time-travelling */\n.dt-interaction-blocker {\n position: fixed;\n inset: 0;\n z-index: 99997;\n cursor: not-allowed;\n}\n\n/* Mobile */\n@media (max-width: 767px) {\n .dt-panel {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100%;\n height: 100%;\n border-radius: 0;\n border: none;\n }\n .dt-panel-wide {\n width: 100%;\n }\n .dt-content {\n flex-direction: column;\n }\n .dt-message-pane {\n width: 100%;\n max-height: 40%;\n border-bottom: 1px solid var(--dt-border);\n }\n .dt-inspector-pane {\n border-left: none;\n }\n}\n";
|
|
2
2
|
export { overlayStyles };
|
|
3
3
|
//# sourceMappingURL=overlay-styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../../src/devtools/overlay-styles.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../../src/devtools/overlay-styles.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,aAAa,2wQAmgBlB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -178,9 +178,7 @@ ul {
|
|
|
178
178
|
.overflow-y-auto {
|
|
179
179
|
overflow-y: auto;
|
|
180
180
|
}
|
|
181
|
-
|
|
182
|
-
overscroll-behavior: contain;
|
|
183
|
-
}
|
|
181
|
+
|
|
184
182
|
.truncate {
|
|
185
183
|
overflow: hidden;
|
|
186
184
|
text-overflow: ellipsis;
|
|
@@ -377,9 +375,7 @@ ul {
|
|
|
377
375
|
z-index: 99999;
|
|
378
376
|
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
|
|
379
377
|
transition: background-color 150ms ease;
|
|
380
|
-
|
|
381
|
-
.dt-badge-accent {
|
|
382
|
-
border: none;
|
|
378
|
+
border: 1px solid var(--dt-border);
|
|
383
379
|
}
|
|
384
380
|
.dt-badge-accent:hover {
|
|
385
381
|
background-color: #252538;
|
|
@@ -387,13 +383,17 @@ ul {
|
|
|
387
383
|
.dt-badge-paused {
|
|
388
384
|
background-color: var(--dt-paused);
|
|
389
385
|
color: var(--dt-bg);
|
|
390
|
-
border: none;
|
|
391
386
|
}
|
|
392
387
|
.dt-badge-paused:hover {
|
|
393
388
|
background-color: #e0a070;
|
|
394
389
|
}
|
|
395
|
-
.
|
|
396
|
-
|
|
390
|
+
.dt-badge.dt-pos-br,
|
|
391
|
+
.dt-badge.dt-pos-tr {
|
|
392
|
+
border-right: none;
|
|
393
|
+
}
|
|
394
|
+
.dt-badge.dt-pos-bl,
|
|
395
|
+
.dt-badge.dt-pos-tl {
|
|
396
|
+
border-left: none;
|
|
397
397
|
}
|
|
398
398
|
|
|
399
399
|
/* JSON tree */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devtools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,MAAM,EAIN,MAAM,EAQP,MAAM,QAAQ,CAAA;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/devtools/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,MAAM,EAIN,MAAM,EAQP,MAAM,QAAQ,CAAA;AAOf,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAMxE,OAAO,EAAE,KAAK,aAAa,EAA+B,MAAM,SAAS,CAAA;AAiwCzE,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,sCA4ChC,CAAA"}
|
package/dist/devtools/overlay.js
CHANGED
|
@@ -31,7 +31,8 @@ const Model = S.Struct({
|
|
|
31
31
|
startIndex: S.Number,
|
|
32
32
|
isPaused: S.Boolean,
|
|
33
33
|
pausedAtIndex: S.Number,
|
|
34
|
-
|
|
34
|
+
selectedIndex: S.Number,
|
|
35
|
+
isFollowingLatest: S.Boolean,
|
|
35
36
|
maybeInspectedModel: S.OptionFromSelf(S.Unknown),
|
|
36
37
|
maybeInspectedMessage: S.OptionFromSelf(S.Unknown),
|
|
37
38
|
expandedPaths: S.HashSetFromSelf(S.String),
|
|
@@ -227,7 +228,8 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
227
228
|
[jumpTo(index), inspectState(index)],
|
|
228
229
|
]), M.when('Inspect', () => [
|
|
229
230
|
evo(model, {
|
|
230
|
-
|
|
231
|
+
selectedIndex: () => index,
|
|
232
|
+
isFollowingLatest: () => false,
|
|
231
233
|
}),
|
|
232
234
|
[inspectState(index)],
|
|
233
235
|
]), M.exhaustive),
|
|
@@ -241,22 +243,30 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
241
243
|
],
|
|
242
244
|
ClickedClear: () => [
|
|
243
245
|
evo(model, {
|
|
244
|
-
|
|
246
|
+
selectedIndex: () => INIT_INDEX,
|
|
247
|
+
isFollowingLatest: () => true,
|
|
245
248
|
expandedPaths: () => HashSet.empty(),
|
|
246
249
|
changedPaths: () => HashSet.empty(),
|
|
247
250
|
affectedPaths: () => HashSet.empty(),
|
|
248
251
|
}),
|
|
249
252
|
[clear, inspectLatest],
|
|
250
253
|
],
|
|
251
|
-
ClickedFollowLatest: () =>
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
254
|
+
ClickedFollowLatest: () => {
|
|
255
|
+
const latestIndex = Array_.match(model.entries, {
|
|
256
|
+
onEmpty: () => INIT_INDEX,
|
|
257
|
+
onNonEmpty: () => model.startIndex + model.entries.length - 1,
|
|
258
|
+
});
|
|
259
|
+
return [
|
|
260
|
+
evo(model, {
|
|
261
|
+
selectedIndex: () => latestIndex,
|
|
262
|
+
isFollowingLatest: () => true,
|
|
263
|
+
expandedPaths: () => HashSet.empty(),
|
|
264
|
+
changedPaths: () => HashSet.empty(),
|
|
265
|
+
affectedPaths: () => HashSet.empty(),
|
|
266
|
+
}),
|
|
267
|
+
[inspectLatest, scrollToTop],
|
|
268
|
+
];
|
|
269
|
+
},
|
|
260
270
|
ReceivedInspectedState: ({ model: inspectedModel, maybeMessage, changedPaths, affectedPaths, }) => [
|
|
261
271
|
evo(model, {
|
|
262
272
|
maybeInspectedModel: () => Option.some(inspectedModel),
|
|
@@ -284,13 +294,18 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
284
294
|
[],
|
|
285
295
|
],
|
|
286
296
|
ReceivedStoreUpdate: ({ entries, startIndex, isPaused, pausedAtIndex, }) => {
|
|
287
|
-
const shouldFollowLatest = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused), M.when('Inspect', () =>
|
|
297
|
+
const shouldFollowLatest = M.value(mode).pipe(M.when('TimeTravel', () => !isPaused), M.when('Inspect', () => model.isFollowingLatest), M.exhaustive);
|
|
298
|
+
const latestIndex = Array_.match(entries, {
|
|
299
|
+
onEmpty: () => INIT_INDEX,
|
|
300
|
+
onNonEmpty: () => startIndex + entries.length - 1,
|
|
301
|
+
});
|
|
288
302
|
return [
|
|
289
303
|
evo(model, {
|
|
290
304
|
entries: () => entries,
|
|
291
305
|
startIndex: () => startIndex,
|
|
292
306
|
isPaused: () => isPaused,
|
|
293
307
|
pausedAtIndex: () => pausedAtIndex,
|
|
308
|
+
selectedIndex: current => shouldFollowLatest ? latestIndex : current,
|
|
294
309
|
}),
|
|
295
310
|
shouldFollowLatest ? [scrollToTop, inspectLatest] : [],
|
|
296
311
|
];
|
|
@@ -336,7 +351,7 @@ const PANEL_POSITION_CLASS = {
|
|
|
336
351
|
TopLeft: 'dt-panel-tl',
|
|
337
352
|
};
|
|
338
353
|
const makeView = (position, mode, maybeBanner) => {
|
|
339
|
-
const { div, header, span, ul, button, svg, path, keyed, Class, Style, OnClick, AriaHidden, Xmlns, Fill, ViewBox, StrokeWidth, Stroke, StrokeLinecap, StrokeLinejoin, D,
|
|
354
|
+
const { div, header, span, ul, button, svg, path, keyed, Class, Style, OnClick, AriaHidden, Xmlns, Fill, ViewBox, StrokeWidth, Stroke, StrokeLinecap, StrokeLinejoin, D, } = html();
|
|
340
355
|
// JSON TREE
|
|
341
356
|
const leafValueView = (value) => M.value(value).pipe(M.when(Predicate.isNull, () => span([Class('json-null italic')], ['null'])), M.when(Predicate.isUndefined, () => span([Class('json-null italic')], ['undefined'])), M.when(Predicate.isString, stringValue => span([Class('json-string')], [`"${stringValue}"`])), M.when(Predicate.isNumber, numberValue => span([Class('json-number')], [String(numberValue)])), M.when(Predicate.isBoolean, booleanValue => span([Class('json-boolean')], [String(booleanValue)])), M.orElse(unknownValue => span([Class('json-null')], [String(unknownValue)])));
|
|
342
357
|
const keyView = (key) => span([Class('json-key')], [`${key}:\u00a0`]);
|
|
@@ -423,15 +438,13 @@ const makeView = (position, mode, maybeBanner) => {
|
|
|
423
438
|
const treeView = (value, rootPath, expandedPaths, changedPaths, affectedPaths, maybeRootLabel, indentRootChildren) => {
|
|
424
439
|
const nodes = [];
|
|
425
440
|
flattenTree(value, rootPath, expandedPaths, changedPaths, affectedPaths, 0, maybeRootLabel, nodes, indentRootChildren);
|
|
426
|
-
return div([
|
|
427
|
-
Class('inspector-tree flex-1 overflow-auto overscroll-contain min-h-0 min-w-0'),
|
|
428
|
-
], nodes.map(flatNodeView));
|
|
441
|
+
return div([Class('inspector-tree flex-1 overflow-auto min-h-0 min-w-0')], nodes.map(flatNodeView));
|
|
429
442
|
};
|
|
430
443
|
const inspectedTimestamp = (model) => {
|
|
431
444
|
const lastIndex = Array_.isEmptyReadonlyArray(model.entries)
|
|
432
445
|
? INIT_INDEX
|
|
433
446
|
: model.startIndex + model.entries.length - 1;
|
|
434
|
-
const selectedIndex = M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : lastIndex), M.when('Inspect', () =>
|
|
447
|
+
const selectedIndex = M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : lastIndex), M.when('Inspect', () => model.selectedIndex), M.exhaustive);
|
|
435
448
|
if (selectedIndex === INIT_INDEX) {
|
|
436
449
|
return '0ms';
|
|
437
450
|
}
|
|
@@ -454,7 +467,7 @@ const makeView = (position, mode, maybeBanner) => {
|
|
|
454
467
|
const INSPECTOR_TABS = ['Model', 'Message'];
|
|
455
468
|
const noMessageView = div([
|
|
456
469
|
Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
|
|
457
|
-
], ['
|
|
470
|
+
], ['init — no Message']);
|
|
458
471
|
const modelTabContent = (model, inspectedModel) => treeView(inspectedModel, 'root', model.expandedPaths, model.changedPaths, model.affectedPaths, Option.none(), true);
|
|
459
472
|
const messageTabContent = (model) => Option.match(model.maybeInspectedMessage, {
|
|
460
473
|
onNone: () => noMessageView,
|
|
@@ -528,20 +541,16 @@ const makeView = (position, mode, maybeBanner) => {
|
|
|
528
541
|
}
|
|
529
542
|
: {
|
|
530
543
|
status: span([Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
|
|
531
|
-
action:
|
|
532
|
-
}), M.when('Inspect', () =>
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
: `Inspecting (${selectedIndex + 1})`,
|
|
542
|
-
]),
|
|
543
|
-
action: button([Class(actionButtonClass), OnClick(ClickedFollowLatest())], ['Follow Latest →']),
|
|
544
|
-
}),
|
|
544
|
+
action: div([], []),
|
|
545
|
+
}), M.when('Inspect', () => ({
|
|
546
|
+
status: span([Class(`${statusClass} text-dt-accent`)], [
|
|
547
|
+
model.selectedIndex === INIT_INDEX
|
|
548
|
+
? 'Inspecting (init)'
|
|
549
|
+
: `Inspecting (${model.selectedIndex + 1})`,
|
|
550
|
+
]),
|
|
551
|
+
action: model.isFollowingLatest
|
|
552
|
+
? div([], [])
|
|
553
|
+
: button([Class(actionButtonClass), OnClick(ClickedFollowLatest())], ['Follow Latest →']),
|
|
545
554
|
})), M.exhaustive);
|
|
546
555
|
return header([Class(headerClass)], [status, action, clearHistoryButton]);
|
|
547
556
|
};
|
|
@@ -552,7 +561,7 @@ const makeView = (position, mode, maybeBanner) => {
|
|
|
552
561
|
...OptionExt.when(mode === 'TimeTravel', span([Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
|
|
553
562
|
span([Class('dot-column')], []),
|
|
554
563
|
span([Class(indexClass)], []),
|
|
555
|
-
span([Class('text-base text-dt-muted font-mono')], ['
|
|
564
|
+
span([Class('text-base text-dt-muted font-mono')], ['init']),
|
|
556
565
|
]);
|
|
557
566
|
const pauseIconView = svg([
|
|
558
567
|
AriaHidden(true),
|
|
@@ -589,7 +598,7 @@ const makeView = (position, mode, maybeBanner) => {
|
|
|
589
598
|
const lastIndex = Array_.isEmptyReadonlyArray(model.entries)
|
|
590
599
|
? INIT_INDEX
|
|
591
600
|
: model.startIndex + model.entries.length - 1;
|
|
592
|
-
const selectedIndex = M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : lastIndex), M.when('Inspect', () =>
|
|
601
|
+
const selectedIndex = M.value(mode).pipe(M.when('TimeTravel', () => model.isPaused ? model.pausedAtIndex : lastIndex), M.when('Inspect', () => model.selectedIndex), M.exhaustive);
|
|
593
602
|
const isInitSelected = selectedIndex === INIT_INDEX;
|
|
594
603
|
const messageRows = pipe(model.entries, Array_.map((entry, arrayIndex) => {
|
|
595
604
|
const absoluteIndex = model.startIndex + arrayIndex;
|
|
@@ -597,7 +606,7 @@ const makeView = (position, mode, maybeBanner) => {
|
|
|
597
606
|
const isPausedHere = model.isPaused && model.pausedAtIndex === absoluteIndex;
|
|
598
607
|
return messageRowView(entry.tag, absoluteIndex, isSelected, isPausedHere, entry.timestamp - baseTimestamp, entry.isModelChanged);
|
|
599
608
|
}), Array_.reverse);
|
|
600
|
-
return ul([Class('message-list flex-1 overflow-y-auto
|
|
609
|
+
return ul([Class('message-list flex-1 overflow-y-auto min-h-0')], [
|
|
601
610
|
...messageRows,
|
|
602
611
|
initRowView(isInitSelected, model.isPaused && model.pausedAtIndex === INIT_INDEX),
|
|
603
612
|
]);
|
|
@@ -653,7 +662,8 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
|
|
|
653
662
|
{
|
|
654
663
|
isOpen: false,
|
|
655
664
|
...flags,
|
|
656
|
-
|
|
665
|
+
selectedIndex: INIT_INDEX,
|
|
666
|
+
isFollowingLatest: true,
|
|
657
667
|
maybeInspectedModel: Option.none(),
|
|
658
668
|
maybeInspectedMessage: Option.none(),
|
|
659
669
|
expandedPaths: HashSet.empty(),
|