@foldkit/devtools 0.113.1 → 0.114.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/overlay-styles.d.ts +1 -1
- package/dist/overlay-styles.d.ts.map +1 -1
- package/dist/overlay-styles.js +2 -4
- package/dist/overlay.d.ts +7 -3
- package/dist/overlay.d.ts.map +1 -1
- package/dist/overlay.js +70 -48
- package/package.json +3 -3
package/dist/overlay-styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const overlayStyles = ":host {\n position: relative;\n z-index: 2147483647;\n\n --dt-bg: #1e1e2e;\n --dt-surface-selected: #282839;\n --dt-border: #45475a;\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-3 {\n gap: 12px;\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.overscroll-none {\n overscroll-behavior: none;\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.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-scroll-pill {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n flex-shrink: 0;\n padding: 4px 12px;\n background-color: var(--dt-surface-selected);\n border: none;\n border-bottom: 1px solid var(--dt-border);\n color: var(--dt-accent);\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n font-size: 13px;\n cursor: pointer;\n}\n.dt-scroll-pill-icon {\n width: 12px;\n height: 12px;\n}\n.dt-scroll-pill-text {\n margin-top: 1px;\n}\n.dt-scroll-pill:hover {\n background-color: var(--dt-tree-hover);\n}\n.dt-scroll-pill:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: -1px;\n}\n.dt-filter-wrapper {\n position: relative;\n flex-shrink: 0;\n border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-button {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 12px;\n background: transparent;\n border: none;\n color: var(--dt-text-muted);\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n}\n.dt-filter-button:hover {\n color: var(--dt-text);\n background-color: var(--dt-tree-hover);\n}\n.dt-filter-button:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: -1px;\n}\n.dt-filter-button[data-open] {\n color: var(--dt-text);\n background-color: var(--dt-surface-selected);\n}\n.dt-filter-button[data-open]:hover {\n background-color: var(--dt-tree-hover);\n}\n.dt-filter-button[data-open] .json-arrow {\n transform: rotate(180deg);\n}\n.dt-filter-items {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background-color: var(--dt-bg);\n border-top: 1px solid var(--dt-border);\n border-bottom: 1px solid var(--dt-border);\n z-index: 10;\n max-height: 200px;\n overflow-y: auto;\n outline: none;\n}\n.dt-filter-item {\n padding: 6px 12px;\n color: var(--dt-text-muted);\n cursor: pointer;\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n font-size: 13px;\n border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-item:last-child {\n border-bottom: none;\n}\n.dt-filter-item[data-active] {\n background-color: var(--dt-tree-hover);\n color: var(--dt-text);\n}\n.dt-filter-item[data-selected] {\n color: var(--dt-accent);\n}\n.dt-filter-check {\n width: 12px;\n height: 12px;\n visibility: hidden;\n}\n.dt-filter-item[data-selected] .dt-filter-check {\n visibility: visible;\n color: var(--dt-accent);\n}\n.dt-filter-backdrop {\n position: fixed;\n inset: 0;\n pointer-events: none;\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-button:last-child {\n border-right: none;\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-bg {\n color: var(--dt-bg);\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 border: none;\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/* Scrubber */\n.dt-scrubber-row {\n background-color: var(--dt-bg);\n}\n.dt-scrubber-control {\n position: relative;\n height: 16px;\n width: 100%;\n padding: 0 7px;\n display: flex;\n align-items: center;\n}\n.dt-scrubber-track {\n width: 100%;\n height: 4px;\n background-color: var(--dt-border);\n border-radius: 9999px;\n cursor: pointer;\n}\n.dt-scrubber-track[data-disabled] {\n cursor: not-allowed;\n}\n.dt-scrubber-fill {\n height: 100%;\n background-color: var(--dt-accent);\n border-radius: 9999px;\n}\n.dt-scrubber-thumb {\n width: 14px;\n height: 14px;\n border-radius: 9999px;\n background-color: var(--dt-accent);\n border: 2px solid var(--dt-bg);\n cursor: grab;\n outline: none;\n top: 50%;\n margin-top: -7px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n.dt-scrubber-thumb:focus-visible {\n outline: 2px solid var(--dt-text);\n outline-offset: 2px;\n}\n.dt-scrubber-thumb[data-dragging] {\n cursor: grabbing;\n}\n.dt-scrubber-position {\n width: 72px;\n padding-left: 12px;\n border-left: 1px solid var(--dt-border);\n align-self: stretch;\n margin-top: -8px;\n margin-bottom: -8px;\n display: flex;\n align-items: center;\n justify-content: center;\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 .message-list > :last-child {\n border-bottom: none;\n }\n .dt-inspector-pane {\n border-left: none;\n }\n .dt-badge.dt-pos-br,\n .dt-badge.dt-pos-bl {\n bottom: 44px;\n }\n}\n";
|
|
1
|
+
export declare const overlayStyles = ":host {\n position: relative;\n z-index: 2147483647;\n\n --dt-bg: #1e1e2e;\n --dt-surface-selected: #282839;\n --dt-border: #45475a;\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-3 {\n gap: 12px;\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.overscroll-none {\n overscroll-behavior: none;\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.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-scroll-pill {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n flex-shrink: 0;\n padding: 4px 12px;\n background-color: var(--dt-surface-selected);\n border: none;\n border-bottom: 1px solid var(--dt-border);\n color: var(--dt-accent);\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n font-size: 13px;\n cursor: pointer;\n}\n.dt-scroll-pill-icon {\n width: 12px;\n height: 12px;\n}\n.dt-scroll-pill-text {\n margin-top: 1px;\n}\n.dt-scroll-pill:hover {\n background-color: var(--dt-tree-hover);\n}\n.dt-scroll-pill:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: -1px;\n}\n.dt-filter-wrapper {\n position: relative;\n flex-shrink: 0;\n border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-button {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 12px;\n background: transparent;\n border: none;\n color: var(--dt-text-muted);\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n font-size: 13px;\n cursor: pointer;\n text-align: left;\n}\n.dt-filter-button:hover {\n color: var(--dt-text);\n background-color: var(--dt-tree-hover);\n}\n.dt-filter-button:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: -1px;\n}\n.dt-filter-button[data-open] {\n color: var(--dt-text);\n background-color: var(--dt-surface-selected);\n}\n.dt-filter-button[data-open]:hover {\n background-color: var(--dt-tree-hover);\n}\n.dt-filter-button[data-open] .json-arrow {\n transform: rotate(180deg);\n}\n.dt-filter-items {\n position: absolute;\n width: var(--button-width);\n background-color: var(--dt-bg);\n border-top: 1px solid var(--dt-border);\n border-bottom: 1px solid var(--dt-border);\n z-index: 100000;\n max-height: 200px;\n overflow-y: auto;\n outline: none;\n}\n.dt-filter-item {\n padding: 6px 12px;\n color: var(--dt-text-muted);\n cursor: pointer;\n font-family:\n ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;\n font-size: 13px;\n border-bottom: 1px solid var(--dt-border);\n}\n.dt-filter-item:last-child {\n border-bottom: none;\n}\n.dt-filter-item[data-active] {\n background-color: var(--dt-tree-hover);\n color: var(--dt-text);\n}\n.dt-filter-item[data-selected] {\n color: var(--dt-accent);\n}\n.dt-filter-check {\n width: 12px;\n height: 12px;\n visibility: hidden;\n}\n.dt-filter-item[data-selected] .dt-filter-check {\n visibility: visible;\n color: var(--dt-accent);\n}\n.dt-filter-backdrop {\n position: fixed;\n inset: 0;\n pointer-events: none;\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-button:last-child {\n border-right: none;\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-bg {\n color: var(--dt-bg);\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 border: none;\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/* Scrubber */\n.dt-scrubber-row {\n background-color: var(--dt-bg);\n}\n.dt-scrubber-control {\n position: relative;\n height: 16px;\n width: 100%;\n padding: 0 7px;\n display: flex;\n align-items: center;\n}\n.dt-scrubber-track {\n width: 100%;\n height: 4px;\n background-color: var(--dt-border);\n border-radius: 9999px;\n cursor: pointer;\n}\n.dt-scrubber-track[data-disabled] {\n cursor: not-allowed;\n}\n.dt-scrubber-fill {\n height: 100%;\n background-color: var(--dt-accent);\n border-radius: 9999px;\n}\n.dt-scrubber-thumb {\n width: 14px;\n height: 14px;\n border-radius: 9999px;\n background-color: var(--dt-accent);\n border: 2px solid var(--dt-bg);\n cursor: grab;\n outline: none;\n top: 50%;\n margin-top: -7px;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);\n}\n.dt-scrubber-thumb:focus-visible {\n outline: 2px solid var(--dt-text);\n outline-offset: 2px;\n}\n.dt-scrubber-thumb[data-dragging] {\n cursor: grabbing;\n}\n.dt-scrubber-position {\n width: 72px;\n padding-left: 12px;\n border-left: 1px solid var(--dt-border);\n align-self: stretch;\n margin-top: -8px;\n margin-bottom: -8px;\n display: flex;\n align-items: center;\n justify-content: center;\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 .message-list > :last-child {\n border-bottom: none;\n }\n .dt-inspector-pane {\n border-left: none;\n }\n .dt-badge.dt-pos-br,\n .dt-badge.dt-pos-bl {\n bottom: 44px;\n }\n}\n";
|
|
2
2
|
//# sourceMappingURL=overlay-styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,40YA8rBzB,CAAA"}
|
package/dist/overlay-styles.js
CHANGED
|
@@ -304,13 +304,11 @@ ul {
|
|
|
304
304
|
}
|
|
305
305
|
.dt-filter-items {
|
|
306
306
|
position: absolute;
|
|
307
|
-
|
|
308
|
-
left: 0;
|
|
309
|
-
right: 0;
|
|
307
|
+
width: var(--button-width);
|
|
310
308
|
background-color: var(--dt-bg);
|
|
311
309
|
border-top: 1px solid var(--dt-border);
|
|
312
310
|
border-bottom: 1px solid var(--dt-border);
|
|
313
|
-
z-index:
|
|
311
|
+
z-index: 100000;
|
|
314
312
|
max-height: 200px;
|
|
315
313
|
overflow-y: auto;
|
|
316
314
|
outline: none;
|
package/dist/overlay.d.ts
CHANGED
|
@@ -15,7 +15,7 @@ declare const StoreService_base: Context.ServiceClass<StoreService, "foldkit/Dev
|
|
|
15
15
|
changedPaths: HashSet.HashSet<string>;
|
|
16
16
|
affectedPaths: HashSet.HashSet<string>;
|
|
17
17
|
}>>;
|
|
18
|
-
jumpTo: (index: number) => Effect.Effect<
|
|
18
|
+
jumpTo: (index: number) => Effect.Effect<unknown>;
|
|
19
19
|
resume: Effect.Effect<void>;
|
|
20
20
|
clear: Effect.Effect<void>;
|
|
21
21
|
stateRef: SubscriptionRef.SubscriptionRef<StoreState>;
|
|
@@ -31,10 +31,14 @@ export declare const LockScroll: Command.CommandDefinitionNoArgs<"LockScroll", E
|
|
|
31
31
|
export declare const UnlockScroll: Command.CommandDefinitionNoArgs<"UnlockScroll", Effect.Effect<{
|
|
32
32
|
readonly _tag: "UnlockedScroll";
|
|
33
33
|
}, never, never>>;
|
|
34
|
-
export declare const
|
|
34
|
+
export declare const JumpToAndInspect: Command.CommandDefinitionWithArgs<"JumpToAndInspect", {
|
|
35
35
|
index: S.Number;
|
|
36
36
|
}, Effect.Effect<{
|
|
37
|
-
readonly _tag: "
|
|
37
|
+
readonly _tag: "ReceivedInspectedState";
|
|
38
|
+
readonly model: unknown;
|
|
39
|
+
readonly maybeMessage: Option.Option<unknown>;
|
|
40
|
+
readonly changedPaths: HashSet.HashSet<string>;
|
|
41
|
+
readonly affectedPaths: HashSet.HashSet<string>;
|
|
38
42
|
}, never, StoreService>>;
|
|
39
43
|
export declare const InspectState: Command.CommandDefinitionWithArgs<"InspectState", {
|
|
40
44
|
index: S.Number;
|
package/dist/overlay.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFA2D/B,CAAC;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAKN,MAAM,IAAI,CAAC,EAGX,eAAe,EAEhB,MAAM,QAAQ,CAAA;AACf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;oFA2D/B,CAAC;;;;;;;;;;;;;;;;;AAoPvC,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGsB,CAAA;AAE7C,eAAO,MAAM,YAAY;;iBAGwB,CAAA;AAuBjD,eAAO,MAAM,gBAAgB;;;;;;;;wBAU5B,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;wBAIqB,CAAA;AAE9C,eAAO,MAAM,aAAa;;;;;;wBASzB,CAAA;AAED,eAAO,MAAM,MAAM;;wBASlB,CAAA;AAED,eAAO,MAAM,KAAK;;wBASjB,CAAA;AAED,eAAO,MAAM,WAAW;;6BAYvB,CAAA;AAitDD,eAAO,MAAM,aAAa,GACxB,OAAO,aAAa,EACpB,UAAU,gBAAgB,EAC1B,MAAM,YAAY,EAClB,aAAa,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAwEhC,CAAA"}
|
package/dist/overlay.js
CHANGED
|
@@ -81,6 +81,7 @@ const Model = S.Struct({
|
|
|
81
81
|
expandedPaths: S.HashSet(S.String),
|
|
82
82
|
changedPaths: S.HashSet(S.String),
|
|
83
83
|
affectedPaths: S.HashSet(S.String),
|
|
84
|
+
maybePendingScrubIndex: S.Option(S.Number),
|
|
84
85
|
inspectorTabs: InspectorTabsModel,
|
|
85
86
|
// NOTE: empirically, inlining `Slider.Model` here throws
|
|
86
87
|
// "Cannot read properties of undefined (reading 'ast')" when running slider
|
|
@@ -106,7 +107,6 @@ const ClickedToggle = m('ClickedToggle');
|
|
|
106
107
|
const ClickedRow = m('ClickedRow', { index: S.Number });
|
|
107
108
|
const ClickedResume = m('ClickedResume');
|
|
108
109
|
const ClickedClear = m('ClickedClear');
|
|
109
|
-
const CompletedJump = m('CompletedJump');
|
|
110
110
|
const CompletedResume = m('CompletedResume');
|
|
111
111
|
const ClickedFollowLatest = m('ClickedFollowLatest');
|
|
112
112
|
const ClickedScrollToTopPill = m('ClickedScrollToTopPill');
|
|
@@ -125,6 +125,7 @@ const ReceivedInspectedState = m('ReceivedInspectedState', {
|
|
|
125
125
|
affectedPaths: S.HashSet(S.String),
|
|
126
126
|
});
|
|
127
127
|
const ToggledTreeNode = m('ToggledTreeNode', { path: S.String });
|
|
128
|
+
const TickedScrubFrame = m('TickedScrubFrame');
|
|
128
129
|
const GotInspectorTabsMessage = m('GotInspectorTabsMessage', {
|
|
129
130
|
message: S.Unknown,
|
|
130
131
|
});
|
|
@@ -151,7 +152,6 @@ const Message = S.Union([
|
|
|
151
152
|
ClickedFollowLatest,
|
|
152
153
|
ClickedScrollToTopPill,
|
|
153
154
|
ScrolledMessageList,
|
|
154
|
-
CompletedJump,
|
|
155
155
|
CompletedResume,
|
|
156
156
|
CompletedClear,
|
|
157
157
|
LockedScroll,
|
|
@@ -160,6 +160,7 @@ const Message = S.Union([
|
|
|
160
160
|
CrossedMobileBreakpoint,
|
|
161
161
|
ReceivedInspectedState,
|
|
162
162
|
ToggledTreeNode,
|
|
163
|
+
TickedScrubFrame,
|
|
163
164
|
GotInspectorTabsMessage,
|
|
164
165
|
ReceivedStoreUpdate,
|
|
165
166
|
GotSubmodelFilterMessage,
|
|
@@ -232,17 +233,27 @@ class ShadowRootService extends Context.Service()('foldkit/DevToolsShadowRoot')
|
|
|
232
233
|
}
|
|
233
234
|
export const LockScroll = Command.define('LockScroll', LockedScroll)(lockScroll.pipe(Effect.as(LockedScroll())));
|
|
234
235
|
export const UnlockScroll = Command.define('UnlockScroll', UnlockedScroll)(unlockScroll.pipe(Effect.as(UnlockedScroll())));
|
|
235
|
-
const
|
|
236
|
+
const buildInspectionFromModel = (index, model) => Effect.gen(function* () {
|
|
236
237
|
const store = yield* StoreService;
|
|
237
|
-
const model = yield* store.getModelAtIndex(index);
|
|
238
238
|
const maybeMessage = yield* store.getMessageAtIndex(index);
|
|
239
239
|
const diff = yield* store.getDiffAtIndex(index);
|
|
240
240
|
return ReceivedInspectedState({ model, maybeMessage, ...diff });
|
|
241
241
|
});
|
|
242
|
-
|
|
242
|
+
const buildInspectionEffect = (index) => Effect.gen(function* () {
|
|
243
|
+
const store = yield* StoreService;
|
|
244
|
+
const model = yield* store.getModelAtIndex(index);
|
|
245
|
+
return yield* buildInspectionFromModel(index, model);
|
|
246
|
+
});
|
|
247
|
+
// NOTE: jump and inspect both need the model at `index`. Resolving it twice
|
|
248
|
+
// (once to render the host, once to feed the inspector) replays the segment
|
|
249
|
+
// from the nearest keyframe twice for a mid-segment jump. `store.jumpTo`
|
|
250
|
+
// returns the model it resolved so the inspector reuses that single
|
|
251
|
+
// resolution. Inspect-only navigation (no host pause) still uses
|
|
252
|
+
// `InspectState`, which resolves once on its own.
|
|
253
|
+
export const JumpToAndInspect = Command.define('JumpToAndInspect', { index: S.Number }, ReceivedInspectedState)(({ index }) => Effect.gen(function* () {
|
|
243
254
|
const store = yield* StoreService;
|
|
244
|
-
yield* store.jumpTo(index);
|
|
245
|
-
return
|
|
255
|
+
const model = yield* store.jumpTo(index);
|
|
256
|
+
return yield* buildInspectionFromModel(index, model);
|
|
246
257
|
}));
|
|
247
258
|
export const InspectState = Command.define('InspectState', { index: S.Number }, ReceivedInspectedState)(({ index }) => buildInspectionEffect(index));
|
|
248
259
|
export const InspectLatest = Command.define('InspectLatest', ReceivedInspectedState)(Effect.gen(function* () {
|
|
@@ -274,7 +285,7 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
274
285
|
const resume = Command.mapEffect(Resume(), provideContext);
|
|
275
286
|
const clear = Command.mapEffect(Clear(), provideContext);
|
|
276
287
|
const scrollToTop = Command.mapEffect(ScrollToTop(), provideContext);
|
|
277
|
-
const
|
|
288
|
+
const jumpToAndInspect = (index) => Command.mapEffect(JumpToAndInspect({ index }), provideContext);
|
|
278
289
|
const inspectState = (index) => Command.mapEffect(InspectState({ index }), provideContext);
|
|
279
290
|
const toggleScrollLock = (shouldLock) => shouldLock ? LockScroll() : UnlockScroll();
|
|
280
291
|
return (model, message) => M.value(message).pipe(M.withReturnType(), M.tags({
|
|
@@ -289,10 +300,7 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
289
300
|
evo(model, { isMobile: () => isMobile }),
|
|
290
301
|
OptionExt.when(model.isOpen, toggleScrollLock(isMobile)).pipe(Option.toArray),
|
|
291
302
|
],
|
|
292
|
-
ClickedRow: ({ index }) => M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => [
|
|
293
|
-
model,
|
|
294
|
-
[jumpTo(index), inspectState(index)],
|
|
295
|
-
]), M.when('Inspect', () => [
|
|
303
|
+
ClickedRow: ({ index }) => M.value(mode).pipe(M.withReturnType(), M.when('TimeTravel', () => [model, [jumpToAndInspect(index)]]), M.when('Inspect', () => [
|
|
296
304
|
evo(model, {
|
|
297
305
|
selectedIndex: () => index,
|
|
298
306
|
isFollowingLatest: () => false,
|
|
@@ -438,21 +446,34 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
438
446
|
GotScrubberSliderMessage: ({ message: sliderMessage }) => {
|
|
439
447
|
const [nextSlider, sliderCommands, maybeOutMessage] = Slider.update(model.scrubberSlider, sliderMessage);
|
|
440
448
|
const mappedSliderCommands = Command.mapMessages(sliderCommands, innerMessage => GotScrubberSliderMessage({ message: innerMessage }));
|
|
441
|
-
|
|
442
|
-
|
|
449
|
+
// NOTE: the thumb tracks every pointermove (cheap, model-only via
|
|
450
|
+
// `nextSlider`), but the heavy jump-plus-inspect is coalesced to one
|
|
451
|
+
// navigation per animation frame. Each `ChangedValue` overwrites the
|
|
452
|
+
// pending host index; the `TickedScrubFrame` subscription flushes the
|
|
453
|
+
// latest on the next frame, so a fast drag can't enqueue jumps faster
|
|
454
|
+
// than they complete.
|
|
455
|
+
const nextMaybePendingScrubIndex = Option.match(maybeOutMessage, {
|
|
456
|
+
onNone: () => model.maybePendingScrubIndex,
|
|
443
457
|
onSome: outMessage => M.value(outMessage).pipe(M.tagsExhaustive({
|
|
444
|
-
ChangedValue: ({ value }) =>
|
|
445
|
-
const hostIndex = sliderValueToHostIndex(value, model.startIndex);
|
|
446
|
-
return [jumpTo(hostIndex), inspectState(hostIndex)];
|
|
447
|
-
},
|
|
458
|
+
ChangedValue: ({ value }) => Option.some(sliderValueToHostIndex(value, model.startIndex)),
|
|
448
459
|
})),
|
|
449
460
|
});
|
|
450
461
|
return [
|
|
451
|
-
evo(model, {
|
|
452
|
-
|
|
462
|
+
evo(model, {
|
|
463
|
+
scrubberSlider: () => nextSlider,
|
|
464
|
+
maybePendingScrubIndex: () => nextMaybePendingScrubIndex,
|
|
465
|
+
}),
|
|
466
|
+
mappedSliderCommands,
|
|
453
467
|
];
|
|
454
468
|
},
|
|
455
|
-
|
|
469
|
+
TickedScrubFrame: () => Option.match(model.maybePendingScrubIndex, {
|
|
470
|
+
onNone: () => [model, []],
|
|
471
|
+
onSome: (hostIndex) => [
|
|
472
|
+
evo(model, { maybePendingScrubIndex: () => Option.none() }),
|
|
473
|
+
[jumpToAndInspect(hostIndex)],
|
|
474
|
+
],
|
|
475
|
+
}),
|
|
476
|
+
}), M.tag('CompletedResume', 'CompletedClear', 'LockedScroll', 'UnlockedScroll', 'ScrolledToTop', () => [model, []]), M.exhaustive);
|
|
456
477
|
};
|
|
457
478
|
// SUBSCRIPTION
|
|
458
479
|
const makeOverlaySubscriptions = (store, shadow) => {
|
|
@@ -465,6 +486,10 @@ const makeOverlaySubscriptions = (store, shadow) => {
|
|
|
465
486
|
toParentMessage: message => GotScrubberSliderMessage({ message }),
|
|
466
487
|
});
|
|
467
488
|
const ownSubscriptions = Subscription.make()(_entry => ({
|
|
489
|
+
scrubFrame: Subscription.animationFrame({
|
|
490
|
+
isActive: model => Option.isSome(model.maybePendingScrubIndex),
|
|
491
|
+
toMessage: () => TickedScrubFrame(),
|
|
492
|
+
}),
|
|
468
493
|
storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => ReceivedStoreUpdate(toDisplayState(state))))), Stream.map(SubscriptionRef.changes(store.stateRef), state => ReceivedStoreUpdate(toDisplayState(state))))),
|
|
469
494
|
mobileBreakpoint: Subscription.persistent(Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
|
|
470
495
|
const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
|
|
@@ -529,8 +554,8 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
529
554
|
], []),
|
|
530
555
|
]);
|
|
531
556
|
const tagLabelView = (tag) => h.span([h.Key('tag'), h.Class('json-tag')], [tag]);
|
|
532
|
-
const diffDotView =
|
|
533
|
-
const inlineDiffDotView =
|
|
557
|
+
const diffDotView = h.span([h.Key('diffdot'), h.Class('diff-dot')], []);
|
|
558
|
+
const inlineDiffDotView = h.span([h.Class('diff-dot-inline')], []);
|
|
534
559
|
const flattenTree = ({ value, treePath, depth, key, ...shared }) => {
|
|
535
560
|
const { rootPath, expandedPaths, changedPaths, affectedPaths, accumulator, indentRootChildren, } = shared;
|
|
536
561
|
const isRoot = treePath === rootPath;
|
|
@@ -583,7 +608,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
583
608
|
})),
|
|
584
609
|
indent,
|
|
585
610
|
], [
|
|
586
|
-
...(hasDiffDot ? [diffDotView
|
|
611
|
+
...(hasDiffDot ? [diffDotView] : []),
|
|
587
612
|
...(String_.isNonEmpty(key) ? [keyView(key)] : []),
|
|
588
613
|
leafValueView(value),
|
|
589
614
|
]);
|
|
@@ -603,7 +628,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
603
628
|
...(isRoot ? [] : [h.OnClick(ToggledTreeNode({ path: treePath }))]),
|
|
604
629
|
], [
|
|
605
630
|
...(isRoot ? [] : [arrowView(isExpanded)]),
|
|
606
|
-
...(!isRoot && hasDiffDot ? [diffDotView
|
|
631
|
+
...(!isRoot && hasDiffDot ? [diffDotView] : []),
|
|
607
632
|
...(String_.isNonEmpty(key) ? [keyView(key)] : []),
|
|
608
633
|
...(String_.isNonEmpty(tag) ? [tagLabelView(tag)] : []),
|
|
609
634
|
h.span([h.Key('value'), h.Class('json-preview')], [preview]),
|
|
@@ -657,10 +682,10 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
657
682
|
: `+${remainingMs.toFixed(1)}ms`;
|
|
658
683
|
}), Option.getOrElse(() => ''));
|
|
659
684
|
};
|
|
660
|
-
const emptyInspectorView =
|
|
685
|
+
const emptyInspectorView = h.div([
|
|
661
686
|
h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
|
|
662
687
|
], ['Click a message to inspect']);
|
|
663
|
-
const noMessageView = h.div([
|
|
688
|
+
const noMessageView = () => h.div([
|
|
664
689
|
h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
|
|
665
690
|
], ['init: no Message']);
|
|
666
691
|
const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true);
|
|
@@ -688,7 +713,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
688
713
|
return current;
|
|
689
714
|
};
|
|
690
715
|
const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, expandedPaths, timestamp) => Option.match(maybeInspectedMessage, {
|
|
691
|
-
onNone:
|
|
716
|
+
onNone: noMessageView,
|
|
692
717
|
onSome: rawMessage => {
|
|
693
718
|
const message = unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
|
|
694
719
|
return h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
|
|
@@ -860,7 +885,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
860
885
|
: [h.Style({ display: 'none' })]),
|
|
861
886
|
], [
|
|
862
887
|
Option.match(model.maybeInspectedModel, {
|
|
863
|
-
onNone: () => emptyInspectorView
|
|
888
|
+
onNone: () => emptyInspectorView,
|
|
864
889
|
onSome: inspectedModel => inspectorTabContent(model, tab.value, inspectedModel),
|
|
865
890
|
}),
|
|
866
891
|
])),
|
|
@@ -898,10 +923,10 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
898
923
|
const headerClass = 'flex items-center justify-between px-3 py-1.5 border-b shrink-0';
|
|
899
924
|
const actionButtonClass = 'dt-resume-button bg-transparent border-none text-dt-live cursor-pointer text-base font-mono font-medium';
|
|
900
925
|
const statusClass = 'text-base font-mono';
|
|
901
|
-
const clearHistoryButton = h.button([h.Class(headerButtonClass), h.OnClick(ClickedClear())], ['Clear history']);
|
|
926
|
+
const clearHistoryButton = () => h.button([h.Class(headerButtonClass), h.OnClick(ClickedClear())], ['Clear history']);
|
|
902
927
|
const submodelLabel = (tag) => pipe(tag, String_.replace(/^Got/, ''), String_.replace(/Message$/, ''));
|
|
903
928
|
const CHECK_ICON = 'M4.5 12.75l6 6 9-13.5';
|
|
904
|
-
const checkIconView =
|
|
929
|
+
const checkIconView = h.svg([
|
|
905
930
|
h.AriaHidden(true),
|
|
906
931
|
h.Class('dt-filter-check shrink-0'),
|
|
907
932
|
h.Xmlns('http://www.w3.org/2000/svg'),
|
|
@@ -910,15 +935,11 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
910
935
|
h.StrokeWidth('2'),
|
|
911
936
|
h.Stroke('currentColor'),
|
|
912
937
|
], [
|
|
913
|
-
h.path([
|
|
914
|
-
h.D(CHECK_ICON),
|
|
915
|
-
h.StrokeLinecap('round'),
|
|
916
|
-
h.StrokeLinejoin('round'),
|
|
917
|
-
], []),
|
|
938
|
+
h.path([h.D(CHECK_ICON), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
|
|
918
939
|
]);
|
|
919
940
|
const filterItemLabel = (item) => String_.isNonEmpty(item) ? submodelLabel(item) : 'All Messages';
|
|
920
941
|
const ARROW_UP = 'M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18';
|
|
921
|
-
const arrowUpIconView =
|
|
942
|
+
const arrowUpIconView = h.svg([
|
|
922
943
|
h.AriaHidden(true),
|
|
923
944
|
h.Class('dt-scroll-pill-icon shrink-0'),
|
|
924
945
|
h.Xmlns('http://www.w3.org/2000/svg'),
|
|
@@ -929,12 +950,12 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
929
950
|
], [
|
|
930
951
|
h.path([h.D(ARROW_UP), h.StrokeLinecap('round'), h.StrokeLinejoin('round')], []),
|
|
931
952
|
]);
|
|
932
|
-
const scrollToTopPillView = h.button([
|
|
953
|
+
const scrollToTopPillView = () => h.button([
|
|
933
954
|
h.Key('scroll-pill'),
|
|
934
955
|
h.Class('dt-scroll-pill'),
|
|
935
956
|
h.OnClick(ClickedScrollToTopPill()),
|
|
936
957
|
], [
|
|
937
|
-
arrowUpIconView
|
|
958
|
+
arrowUpIconView,
|
|
938
959
|
h.span([h.Class('dt-scroll-pill-text')], ['Jump to top']),
|
|
939
960
|
]);
|
|
940
961
|
const submodelFilterView = (model) => {
|
|
@@ -950,7 +971,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
950
971
|
items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
|
|
951
972
|
itemToConfig: item => ({
|
|
952
973
|
className: 'dt-filter-item',
|
|
953
|
-
content: h.div([h.Class('flex items-center gap-2')], [checkIconView
|
|
974
|
+
content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
|
|
954
975
|
}),
|
|
955
976
|
buttonContent: h.span([h.Class('flex flex-1 items-center justify-between')], [
|
|
956
977
|
h.span([], [buttonLabel]),
|
|
@@ -1000,7 +1021,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
1000
1021
|
]),
|
|
1001
1022
|
maybeAction: OptionExt.when(!model.isFollowingLatest, h.button([h.Class(actionButtonClass), h.OnClick(ClickedFollowLatest())], ['Follow Latest →'])),
|
|
1002
1023
|
})), M.exhaustive);
|
|
1003
|
-
const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton);
|
|
1024
|
+
const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton());
|
|
1004
1025
|
return h.header([h.Class(headerClass)], [
|
|
1005
1026
|
status,
|
|
1006
1027
|
...Option.toArray(maybeAction),
|
|
@@ -1011,12 +1032,12 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
1011
1032
|
h.Class(clsx(ROW_BASE, { selected: isSelected })),
|
|
1012
1033
|
h.OnClick(ClickedRow({ index: INIT_INDEX })),
|
|
1013
1034
|
], [
|
|
1014
|
-
...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView
|
|
1035
|
+
...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
|
|
1015
1036
|
h.span([h.Class('dot-column')], []),
|
|
1016
1037
|
h.span([h.Class(indexClass)], []),
|
|
1017
1038
|
h.span([h.Class('text-base text-dt-muted font-mono')], ['init']),
|
|
1018
1039
|
]);
|
|
1019
|
-
const pauseIconView =
|
|
1040
|
+
const pauseIconView = h.svg([
|
|
1020
1041
|
h.AriaHidden(true),
|
|
1021
1042
|
h.Class('dt-pause-icon'),
|
|
1022
1043
|
h.Xmlns('http://www.w3.org/2000/svg'),
|
|
@@ -1035,8 +1056,8 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
1035
1056
|
h.Class(clsx(ROW_BASE, { selected: isSelected })),
|
|
1036
1057
|
h.OnClick(ClickedRow({ index: absoluteIndex })),
|
|
1037
1058
|
], [
|
|
1038
|
-
...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView
|
|
1039
|
-
h.span([h.Class('dot-column')], isModelChanged ? [inlineDiffDotView
|
|
1059
|
+
...OptionExt.when(mode === 'TimeTravel', h.span([h.Class('pause-column')], isPausedHere ? [pauseIconView] : [])).pipe(Option.toArray),
|
|
1060
|
+
h.span([h.Class('dot-column')], isModelChanged ? [inlineDiffDotView] : []),
|
|
1040
1061
|
h.span([h.Class(indexClass)], [String(absoluteIndex + 1)]),
|
|
1041
1062
|
h.span([h.Class('text-base text-dt font-mono flex-1 truncate')], [tag]),
|
|
1042
1063
|
h.span([
|
|
@@ -1144,16 +1165,16 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
1144
1165
|
onEmpty: () => [],
|
|
1145
1166
|
onNonEmpty: () => [submodelFilterView(model)],
|
|
1146
1167
|
}),
|
|
1147
|
-
...OptionExt.when(!model.isFollowingTop, scrollToTopPillView).pipe(Option.toArray),
|
|
1168
|
+
...OptionExt.when(!model.isFollowingTop, scrollToTopPillView()).pipe(Option.toArray),
|
|
1148
1169
|
messageListView(model),
|
|
1149
1170
|
]),
|
|
1150
1171
|
inspectorPaneView(model),
|
|
1151
1172
|
]),
|
|
1152
1173
|
...OptionExt.when(isScrubberVisible, scrubberView(model)).pipe(Option.toArray),
|
|
1153
1174
|
]);
|
|
1154
|
-
const interactionBlocker = h.div([h.Class('dt-interaction-blocker')], []);
|
|
1175
|
+
const interactionBlocker = () => h.div([h.Class('dt-interaction-blocker')], []);
|
|
1155
1176
|
return (model) => h.div([], [
|
|
1156
|
-
...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker).pipe(Option.toArray),
|
|
1177
|
+
...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker()).pipe(Option.toArray),
|
|
1157
1178
|
...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
|
|
1158
1179
|
badgeView(model),
|
|
1159
1180
|
]);
|
|
@@ -1218,6 +1239,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => Effect.gen(
|
|
|
1218
1239
|
expandedPaths: HashSet.empty(),
|
|
1219
1240
|
changedPaths: HashSet.empty(),
|
|
1220
1241
|
affectedPaths: HashSet.empty(),
|
|
1242
|
+
maybePendingScrubIndex: Option.none(),
|
|
1221
1243
|
inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
|
|
1222
1244
|
scrubberSlider: Slider.init({
|
|
1223
1245
|
id: SCRUBBER_SLIDER_ID,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foldkit/devtools",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.114.1",
|
|
4
4
|
"description": "In-browser DevTools overlay for Foldkit applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,8 +28,8 @@
|
|
|
28
28
|
"effect": "4.0.0-beta.83",
|
|
29
29
|
"rimraf": "^6.1.3",
|
|
30
30
|
"typescript": "^6.0.3",
|
|
31
|
-
"@foldkit/ui": "0.
|
|
32
|
-
"foldkit": "0.
|
|
31
|
+
"@foldkit/ui": "0.114.1",
|
|
32
|
+
"foldkit": "0.114.1"
|
|
33
33
|
},
|
|
34
34
|
"keywords": [
|
|
35
35
|
"foldkit",
|