foldkit 0.33.1 → 0.33.3
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/devtools/overlay-styles.d.ts +1 -1
- package/dist/devtools/overlay-styles.d.ts.map +1 -1
- package/dist/devtools/overlay-styles.js +1 -3
- package/dist/devtools/overlay.d.ts.map +1 -1
- package/dist/devtools/overlay.js +45 -35
- package/dist/task/scrollLock.d.ts.map +1 -1
- package/dist/task/scrollLock.js +6 -1
- package/package.json +1 -1
|
@@ -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}\n.dt-badge-accent {\n border: none;\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 border: none;\n}\n.dt-badge-paused:hover {\n background-color: #e0a070;\n}\n.message-list > :last-child {\n border-bottom: 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,0sQAigBlB,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -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
|
}
|
|
@@ -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
|
};
|
|
@@ -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(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scrollLock.d.ts","sourceRoot":"","sources":["../../src/task/scrollLock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAU,MAAM,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"scrollLock.d.ts","sourceRoot":"","sources":["../../src/task/scrollLock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAU,MAAM,QAAQ,CAAA;AA6CvC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAwBzC,CAAA;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAW3C,CAAA"}
|
package/dist/task/scrollLock.js
CHANGED
|
@@ -26,8 +26,13 @@ const findScrollableParent = (target) => {
|
|
|
26
26
|
}
|
|
27
27
|
return null;
|
|
28
28
|
};
|
|
29
|
+
const touchTarget = (event) => {
|
|
30
|
+
const composed = event.composedPath()[0];
|
|
31
|
+
return composed instanceof Element ? composed : null;
|
|
32
|
+
};
|
|
29
33
|
const handleTouchMove = (event) => {
|
|
30
|
-
|
|
34
|
+
const target = touchTarget(event);
|
|
35
|
+
if (target && !findScrollableParent(target)) {
|
|
31
36
|
event.preventDefault();
|
|
32
37
|
}
|
|
33
38
|
};
|