@foldkit/devtools 0.166.0-canary.085b787da0a5 → 0.166.0-canary.6bd9ee8e728c
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 +0 -47
- package/dist/overlay.d.ts +0 -21
- package/dist/overlay.d.ts.map +1 -1
- package/dist/overlay.js +95 -261
- package/package.json +6 -6
package/dist/overlay-styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const overlayStyles = ":host {\n /* The host spans the viewport so it has real bounds to snapshot: it carries a\n `view-transition-name` (set in `overlay.ts`, see the note there) to stay\n out of an application's View Transitions, and a name on a zero-size element\n captures nothing. The box itself is inert; the panels inside opt back into\n hit-testing through `.fixed`. */\n position: fixed;\n inset: 0;\n pointer-events: none;\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/* The host is `pointer-events: none` so its viewport-spanning box cannot\n swallow clicks meant for the application, and everything the shadow root\n renders opts back in here. The boundary is the shadow root's children rather\n than any one panel class: content arrives by routes a class list does not\n cover, including the portal root `@foldkit/ui` prepends for anchored\n dropdowns, and a surface that misses the opt-in is silently unclickable.\n These wrappers are zero-height, so granting them hit-testing costs nothing;\n descendants that must stay transparent, like the listbox backdrop, set\n `pointer-events: none` on themselves. */\n:host > * {\n pointer-events: auto;\n}\n\n.fixed {\n position: fixed;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.flex {\n display: flex;\n}\n.contents {\n display: contents;\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-copy-control {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.dt-copy-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 6px;\n background: transparent;\n border: none;\n color: var(--dt-text-muted);\n cursor: pointer;\n border-radius: 4px;\n transition: color 100ms ease;\n}\n.dt-copy-button:hover {\n color: var(--dt-text);\n}\n.dt-copy-button[aria-disabled='true'] {\n cursor: default;\n}\n.dt-copy-button.dt-copy-success,\n.dt-copy-button.dt-copy-success:hover {\n color: var(--dt-live);\n}\n.dt-copy-button:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: -1px;\n}\n.dt-copy-icon {\n width: 12px;\n height: 12px;\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-settings-button {\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n margin: -8px 0 -8px -12px;\n padding: 0 12px;\n background: transparent;\n border: none;\n border-right: 1px solid var(--dt-border);\n color: var(--dt-text-muted);\n cursor: pointer;\n flex-shrink: 0;\n}\n.dt-settings-button:hover {\n color: var(--dt-text);\n background-color: var(--dt-tree-hover);\n}\n.dt-settings-button:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: -1px;\n}\n.dt-settings-button-active {\n color: var(--dt-accent);\n background-color: var(--dt-surface-selected);\n}\n.dt-settings-button-active:hover {\n background-color: var(--dt-tree-hover);\n}\n.dt-settings-icon {\n width: 14px;\n height: 14px;\n}\n.dt-settings-section-title {\n padding: 10px 12px 4px;\n color: var(--dt-text-muted);\n font-size: 10px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n.dt-settings-row {\n display: flex;\n align-items: center;\n gap: 20px;\n padding: 8px 12px;\n}\n.dt-settings-row-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n.dt-settings-row-label {\n color: var(--dt-text);\n font-size: 13px;\n cursor: pointer;\n}\n.dt-settings-row-description {\n color: var(--dt-text-muted);\n font-size: 10px;\n}\n.dt-switch {\n position: relative;\n width: 36px;\n height: 20px;\n border-radius: 9999px;\n background-color: var(--dt-border);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n background-color 100ms ease,\n filter 100ms ease;\n}\n.dt-switch:hover {\n filter: brightness(1.2);\n}\n.dt-switch:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: 2px;\n}\n.dt-switch[data-checked] {\n background-color: var(--dt-accent);\n}\n.dt-switch-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n border-radius: 9999px;\n background-color: var(--dt-text-muted);\n transition:\n transform 100ms ease,\n background-color 100ms ease;\n}\n.dt-switch[data-checked] .dt-switch-thumb {\n transform: translateX(16px);\n background-color: var(--dt-bg);\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.dt-payload-list .tree-row {\n align-items: flex-start;\n flex-wrap: wrap;\n min-width: 0;\n white-space: normal;\n}\n.dt-payload-list .tree-row span {\n min-width: 0;\n overflow-wrap: anywhere;\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/* Footer */\n.dt-footer {\n background-color: var(--dt-bg);\n height: 33px;\n}\n\n/* Scrubber */\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 /* The host spans the viewport so it has real bounds to snapshot: it carries a\n `view-transition-name` (set in `overlay.ts`, see the note there) to stay\n out of an application's View Transitions, and a name on a zero-size element\n captures nothing. The box itself is inert; the panels inside opt back into\n hit-testing through `.fixed`. */\n position: fixed;\n inset: 0;\n pointer-events: none;\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/* The host is `pointer-events: none` so its viewport-spanning box cannot\n swallow clicks meant for the application, and everything the shadow root\n renders opts back in here. The boundary is the shadow root's children rather\n than any one panel class: content arrives by routes a class list does not\n cover, including the portal root `@foldkit/ui` prepends for anchored\n dropdowns, and a surface that misses the opt-in is silently unclickable.\n These wrappers are zero-height, so granting them hit-testing costs nothing;\n descendants that must stay transparent, like the listbox backdrop, set\n `pointer-events: none` on themselves. */\n:host > * {\n pointer-events: auto;\n}\n\n.fixed {\n position: fixed;\n}\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}\n.flex {\n display: flex;\n}\n.contents {\n display: contents;\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-settings-button {\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n margin: -8px 0 -8px -12px;\n padding: 0 12px;\n background: transparent;\n border: none;\n border-right: 1px solid var(--dt-border);\n color: var(--dt-text-muted);\n cursor: pointer;\n flex-shrink: 0;\n}\n.dt-settings-button:hover {\n color: var(--dt-text);\n background-color: var(--dt-tree-hover);\n}\n.dt-settings-button:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: -1px;\n}\n.dt-settings-button-active {\n color: var(--dt-accent);\n background-color: var(--dt-surface-selected);\n}\n.dt-settings-button-active:hover {\n background-color: var(--dt-tree-hover);\n}\n.dt-settings-icon {\n width: 14px;\n height: 14px;\n}\n.dt-settings-section-title {\n padding: 10px 12px 4px;\n color: var(--dt-text-muted);\n font-size: 10px;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n.dt-settings-row {\n display: flex;\n align-items: center;\n gap: 20px;\n padding: 8px 12px;\n}\n.dt-settings-row-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n.dt-settings-row-label {\n color: var(--dt-text);\n font-size: 13px;\n cursor: pointer;\n}\n.dt-settings-row-description {\n color: var(--dt-text-muted);\n font-size: 10px;\n}\n.dt-switch {\n position: relative;\n width: 36px;\n height: 20px;\n border-radius: 9999px;\n background-color: var(--dt-border);\n cursor: pointer;\n flex-shrink: 0;\n transition:\n background-color 100ms ease,\n filter 100ms ease;\n}\n.dt-switch:hover {\n filter: brightness(1.2);\n}\n.dt-switch:focus-visible {\n outline: 1px solid var(--dt-accent);\n outline-offset: 2px;\n}\n.dt-switch[data-checked] {\n background-color: var(--dt-accent);\n}\n.dt-switch-thumb {\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n border-radius: 9999px;\n background-color: var(--dt-text-muted);\n transition:\n transform 100ms ease,\n background-color 100ms ease;\n}\n.dt-switch[data-checked] .dt-switch-thumb {\n transform: translateX(16px);\n background-color: var(--dt-bg);\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/* Footer */\n.dt-footer {\n background-color: var(--dt-bg);\n height: 33px;\n}\n\n/* Scrubber */\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,yxfAs0BzB,CAAA"}
|
package/dist/overlay-styles.js
CHANGED
|
@@ -265,43 +265,6 @@ ul {
|
|
|
265
265
|
.dt-header-button:hover {
|
|
266
266
|
color: var(--dt-text);
|
|
267
267
|
}
|
|
268
|
-
.dt-copy-control {
|
|
269
|
-
display: inline-flex;
|
|
270
|
-
align-items: center;
|
|
271
|
-
justify-content: center;
|
|
272
|
-
}
|
|
273
|
-
.dt-copy-button {
|
|
274
|
-
display: flex;
|
|
275
|
-
align-items: center;
|
|
276
|
-
justify-content: center;
|
|
277
|
-
width: 24px;
|
|
278
|
-
height: 24px;
|
|
279
|
-
padding: 6px;
|
|
280
|
-
background: transparent;
|
|
281
|
-
border: none;
|
|
282
|
-
color: var(--dt-text-muted);
|
|
283
|
-
cursor: pointer;
|
|
284
|
-
border-radius: 4px;
|
|
285
|
-
transition: color 100ms ease;
|
|
286
|
-
}
|
|
287
|
-
.dt-copy-button:hover {
|
|
288
|
-
color: var(--dt-text);
|
|
289
|
-
}
|
|
290
|
-
.dt-copy-button[aria-disabled='true'] {
|
|
291
|
-
cursor: default;
|
|
292
|
-
}
|
|
293
|
-
.dt-copy-button.dt-copy-success,
|
|
294
|
-
.dt-copy-button.dt-copy-success:hover {
|
|
295
|
-
color: var(--dt-live);
|
|
296
|
-
}
|
|
297
|
-
.dt-copy-button:focus-visible {
|
|
298
|
-
outline: 1px solid var(--dt-accent);
|
|
299
|
-
outline-offset: -1px;
|
|
300
|
-
}
|
|
301
|
-
.dt-copy-icon {
|
|
302
|
-
width: 12px;
|
|
303
|
-
height: 12px;
|
|
304
|
-
}
|
|
305
268
|
.dt-resume-button:hover {
|
|
306
269
|
opacity: 0.7;
|
|
307
270
|
}
|
|
@@ -695,16 +658,6 @@ ul {
|
|
|
695
658
|
line-height: 18px;
|
|
696
659
|
padding-right: 8px;
|
|
697
660
|
}
|
|
698
|
-
.dt-payload-list .tree-row {
|
|
699
|
-
align-items: flex-start;
|
|
700
|
-
flex-wrap: wrap;
|
|
701
|
-
min-width: 0;
|
|
702
|
-
white-space: normal;
|
|
703
|
-
}
|
|
704
|
-
.dt-payload-list .tree-row span {
|
|
705
|
-
min-width: 0;
|
|
706
|
-
overflow-wrap: anywhere;
|
|
707
|
-
}
|
|
708
661
|
.tree-row-expandable:hover {
|
|
709
662
|
background-color: var(--dt-tree-hover);
|
|
710
663
|
}
|
package/dist/overlay.d.ts
CHANGED
|
@@ -69,27 +69,6 @@ export declare const Resume: Command.CommandDefinitionNoArgs<"Resume", Effect.Ef
|
|
|
69
69
|
export declare const Clear: Command.CommandDefinitionNoArgs<"Clear", Effect.Effect<{
|
|
70
70
|
readonly _tag: "CompletedClear";
|
|
71
71
|
}, never, StoreService>>;
|
|
72
|
-
export declare const CopyPayloadToClipboard: Command.CommandDefinitionWithArgs<"CopyPayloadToClipboard", {
|
|
73
|
-
targetId: Schema.String;
|
|
74
|
-
requestId: Schema.Number;
|
|
75
|
-
payload: Schema.Unknown;
|
|
76
|
-
}, Effect.Effect<{
|
|
77
|
-
readonly _tag: "SucceededCopyPayloadToClipboard";
|
|
78
|
-
readonly targetId: string;
|
|
79
|
-
readonly requestId: number;
|
|
80
|
-
} | {
|
|
81
|
-
readonly _tag: "FailedCopyPayloadToClipboard";
|
|
82
|
-
readonly targetId: string;
|
|
83
|
-
readonly requestId: number;
|
|
84
|
-
}, never, never>>;
|
|
85
|
-
export declare const WaitBeforeHidingCopyIndicator: Command.CommandDefinitionWithArgs<"WaitBeforeHidingCopyIndicator", {
|
|
86
|
-
targetId: Schema.String;
|
|
87
|
-
requestId: Schema.Number;
|
|
88
|
-
}, Effect.Effect<{
|
|
89
|
-
readonly _tag: "CompletedWaitBeforeHidingCopyIndicator";
|
|
90
|
-
readonly targetId: string;
|
|
91
|
-
readonly requestId: number;
|
|
92
|
-
}, never, never>>;
|
|
93
72
|
export declare const ScrollToTop: Command.CommandDefinitionNoArgs<"ScrollToTop", Effect.Effect<{
|
|
94
73
|
readonly _tag: "CompletedScrollToTop";
|
|
95
74
|
}, never, ShadowRootService>>;
|
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,
|
|
1
|
+
{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAEN,OAAO,EAGP,MAAM,EAKN,MAAM,EAGN,eAAe,EAEhB,MAAM,QAAQ,CAAA;AAGf,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EACL,KAAK,aAAa,EAElB,KAAK,aAAa,EAGlB,KAAK,WAAW,EAChB,KAAK,UAAU,EAKhB,MAAM,uBAAuB,CAAA;AAU9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;;;;;;;;;;;;;;;;;;;AA6WrE,cAAM,YAAa,SAAQ,iBAE1B;CAAG;;AAEJ,cAAM,iBAAkB,SAAQ,sBAGC;CAAG;AAEpC,eAAO,MAAM,UAAU;;iBAGrB,CAAA;AAEF,eAAO,MAAM,YAAY;;iBAGvB,CAAA;AAoCF,eAAO,MAAM,oBAAoB;;;;;iBAkB/B,CAAA;AAuBF,eAAO,MAAM,gBAAgB;;;;;;;;wBAS3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;wBAIvB,CAAA;AAEF,eAAO,MAAM,aAAa;;;;;;wBAOxB,CAAA;AAEF,eAAO,MAAM,MAAM;;wBAOjB,CAAA;AAEF,eAAO,MAAM,KAAK;;wBAOhB,CAAA;AAEF,eAAO,MAAM,WAAW;;6BAUtB,CAAA;AAw8DF,eAAO,MAAM,aAAa,UACjB,aAAa,YACV,gBAAgB,QACpB,YAAY,eACL,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAmFhC,CAAA"}
|
package/dist/overlay.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import { Array, Context, Effect, Function,
|
|
3
|
+
import { Array, Context, Effect, Function, HashSet, Match, Number, Option, Order, Predicate, Queue, Record, Schema, Stream, String, SubscriptionRef, pipe, } from 'effect';
|
|
4
4
|
import { KeyValueStore } from 'effect/persistence';
|
|
5
5
|
import { Update } from 'foldkit';
|
|
6
6
|
import * as Command from 'foldkit/command';
|
|
@@ -40,10 +40,6 @@ const DisplayEntry = Schema.Struct({
|
|
|
40
40
|
timestamp: Schema.Number,
|
|
41
41
|
isModelChanged: Schema.Boolean,
|
|
42
42
|
});
|
|
43
|
-
const CopyState = defineTaggedUnion({
|
|
44
|
-
Copying: { requestId: Schema.Number },
|
|
45
|
-
Copied: { requestId: Schema.Number },
|
|
46
|
-
});
|
|
47
43
|
const INSPECTOR_TABS_ID = 'dt-inspector';
|
|
48
44
|
const SUBMODEL_FILTER_ID = 'dt-submodel-filter';
|
|
49
45
|
const FLATTEN_SWITCH_ID = 'dt-flatten-switch';
|
|
@@ -86,8 +82,6 @@ const Model = Schema.Struct({
|
|
|
86
82
|
expandedPaths: Schema.HashSet(Schema.String),
|
|
87
83
|
changedPaths: Schema.HashSet(Schema.String),
|
|
88
84
|
affectedPaths: Schema.HashSet(Schema.String),
|
|
89
|
-
copyStates: Schema.HashMap(Schema.String, CopyState),
|
|
90
|
-
nextCopyRequestId: Schema.Number,
|
|
91
85
|
maybePendingScrubIndex: Schema.Option(Schema.Number),
|
|
92
86
|
inspectorTabs: Tabs.Model,
|
|
93
87
|
activeInspectorTab: InspectorTab,
|
|
@@ -139,19 +133,6 @@ const Message = defineMessageUnion({
|
|
|
139
133
|
affectedPaths: Schema.HashSet(Schema.String),
|
|
140
134
|
},
|
|
141
135
|
ToggledTreeNode: { path: Schema.String },
|
|
142
|
-
ClickedCopyPayload: { targetId: Schema.String, payload: Schema.Unknown },
|
|
143
|
-
SucceededCopyPayloadToClipboard: {
|
|
144
|
-
targetId: Schema.String,
|
|
145
|
-
requestId: Schema.Number,
|
|
146
|
-
},
|
|
147
|
-
FailedCopyPayloadToClipboard: {
|
|
148
|
-
targetId: Schema.String,
|
|
149
|
-
requestId: Schema.Number,
|
|
150
|
-
},
|
|
151
|
-
CompletedWaitBeforeHidingCopyIndicator: {
|
|
152
|
-
targetId: Schema.String,
|
|
153
|
-
requestId: Schema.Number,
|
|
154
|
-
},
|
|
155
136
|
TickedScrubFrame: {},
|
|
156
137
|
GotInspectorTabsMessage: { message: Tabs.Message },
|
|
157
138
|
ReceivedStoreUpdate: {
|
|
@@ -173,7 +154,6 @@ const MOBILE_BREAKPOINT = 767;
|
|
|
173
154
|
const MOBILE_BREAKPOINT_QUERY = `(max-width: ${MOBILE_BREAKPOINT}px)`;
|
|
174
155
|
const TREE_INDENT_PX = 12;
|
|
175
156
|
const MAX_PREVIEW_KEYS = 3;
|
|
176
|
-
const JSON_INDENT = 2;
|
|
177
157
|
const ALL_MESSAGES_VALUE = '';
|
|
178
158
|
const DEVTOOLS_STORAGE_KEY = 'foldkit-devtools';
|
|
179
159
|
const NO_COMMANDS = [];
|
|
@@ -233,20 +213,6 @@ const objectPreview = (value) => __foldkitBrandViewResult((pipe(value, Record.ke
|
|
|
233
213
|
},
|
|
234
214
|
}))), "@foldkit/devtools/overlay.js#objectPreview");
|
|
235
215
|
const collapsedPreview = (value) => __foldkitBrandViewResult((Match.value(value).pipe(Match.when(globalThis.Array.isArray, array => __foldkitBrandViewResult((`(${array.length})`), "@foldkit/devtools/overlay.js#anonymous~11")), Match.when(Predicate.isObject, objectPreview), Match.orElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~12")))), "@foldkit/devtools/overlay.js#collapsedPreview");
|
|
236
|
-
const serializePayload = (value) => __foldkitBrandViewResult((Effect.try({
|
|
237
|
-
try: () => {
|
|
238
|
-
const serialized = JSON.stringify(toInspectableValue(value), null, JSON_INDENT);
|
|
239
|
-
if (serialized === undefined) {
|
|
240
|
-
throw new Error('Payload cannot be represented as JSON');
|
|
241
|
-
}
|
|
242
|
-
return __foldkitBrandViewResult((serialized), "@foldkit/devtools/overlay.js#try");
|
|
243
|
-
},
|
|
244
|
-
catch: () => __foldkitBrandViewResult((new Error('Failed to serialize payload')), "@foldkit/devtools/overlay.js#catch"),
|
|
245
|
-
})), "@foldkit/devtools/overlay.js#serializePayload");
|
|
246
|
-
const taggedPayload = (name, args) => __foldkitBrandViewResult((Option.match(args, {
|
|
247
|
-
onNone: () => (__foldkitBrandViewResult(({ _tag: name }), "@foldkit/devtools/overlay.js#onNone")),
|
|
248
|
-
onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: name }), "@foldkit/devtools/overlay.js#onSome")),
|
|
249
|
-
})), "@foldkit/devtools/overlay.js#taggedPayload");
|
|
250
216
|
const foldInspectorTabsOutMessage = Tabs.OutMessage.match({
|
|
251
217
|
Selected: ({ value }) => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
|
|
252
218
|
model: modifyFields(model, { activeInspectorTab: () => __foldkitBrandViewResult((value), "@foldkit/devtools/overlay.js#activeInspectorTab") }),
|
|
@@ -389,34 +355,6 @@ export const Clear = Command.define('Clear', {
|
|
|
389
355
|
return __foldkitBrandViewResult((Message.CompletedClear()), "@foldkit/devtools/overlay.js#anonymous~25");
|
|
390
356
|
}),
|
|
391
357
|
});
|
|
392
|
-
export const CopyPayloadToClipboard = Command.define('CopyPayloadToClipboard', {
|
|
393
|
-
args: {
|
|
394
|
-
targetId: Schema.String,
|
|
395
|
-
requestId: Schema.Number,
|
|
396
|
-
payload: Schema.Unknown,
|
|
397
|
-
},
|
|
398
|
-
messages: [
|
|
399
|
-
Message.SucceededCopyPayloadToClipboard,
|
|
400
|
-
Message.FailedCopyPayloadToClipboard,
|
|
401
|
-
],
|
|
402
|
-
execute: ({ targetId, requestId, payload }) => __foldkitBrandViewResult((Effect.gen(function* () {
|
|
403
|
-
const text = yield* serializePayload(payload);
|
|
404
|
-
yield* Effect.tryPromise({
|
|
405
|
-
try: () => __foldkitBrandViewResult((navigator.clipboard.writeText(text)), "@foldkit/devtools/overlay.js#try~2"),
|
|
406
|
-
catch: () => __foldkitBrandViewResult((new Error('Failed to copy payload to clipboard')), "@foldkit/devtools/overlay.js#catch~2"),
|
|
407
|
-
});
|
|
408
|
-
return __foldkitBrandViewResult((Message.SucceededCopyPayloadToClipboard({ targetId, requestId })), "@foldkit/devtools/overlay.js#anonymous~26");
|
|
409
|
-
}).pipe(Effect.catch(() => __foldkitBrandViewResult((Effect.succeed(Message.FailedCopyPayloadToClipboard({ targetId, requestId }))), "@foldkit/devtools/overlay.js#anonymous~27")))), "@foldkit/devtools/overlay.js#execute~4"),
|
|
410
|
-
});
|
|
411
|
-
const COPY_INDICATOR_DURATION = '1 second';
|
|
412
|
-
export const WaitBeforeHidingCopyIndicator = Command.define('WaitBeforeHidingCopyIndicator', {
|
|
413
|
-
args: { targetId: Schema.String, requestId: Schema.Number },
|
|
414
|
-
messages: [Message.CompletedWaitBeforeHidingCopyIndicator],
|
|
415
|
-
execute: ({ targetId, requestId }) => __foldkitBrandViewResult((Effect.sleep(COPY_INDICATOR_DURATION).pipe(Effect.as(Message.CompletedWaitBeforeHidingCopyIndicator({
|
|
416
|
-
targetId,
|
|
417
|
-
requestId,
|
|
418
|
-
})))), "@foldkit/devtools/overlay.js#execute~5"),
|
|
419
|
-
});
|
|
420
358
|
export const ScrollToTop = Command.define('ScrollToTop', {
|
|
421
359
|
messages: [Message.CompletedScrollToTop],
|
|
422
360
|
execute: Effect.gen(function* () {
|
|
@@ -425,7 +363,7 @@ export const ScrollToTop = Command.define('ScrollToTop', {
|
|
|
425
363
|
if (messageList instanceof HTMLElement) {
|
|
426
364
|
messageList.scrollTop = 0;
|
|
427
365
|
}
|
|
428
|
-
return __foldkitBrandViewResult((Message.CompletedScrollToTop()), "@foldkit/devtools/overlay.js#anonymous~
|
|
366
|
+
return __foldkitBrandViewResult((Message.CompletedScrollToTop()), "@foldkit/devtools/overlay.js#anonymous~26");
|
|
429
367
|
}),
|
|
430
368
|
});
|
|
431
369
|
const makeUpdate = (store, shadow, mode) => {
|
|
@@ -452,7 +390,7 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
452
390
|
},
|
|
453
391
|
ClickedSettingsToggle: () => (__foldkitBrandViewResult(({
|
|
454
392
|
model: modifyFields(model, {
|
|
455
|
-
screen: currentScreen => __foldkitBrandViewResult((Match.value(currentScreen).pipe(Match.withReturnType(), Match.when('Messages', () => __foldkitBrandViewResult(('Settings'), "@foldkit/devtools/overlay.js#anonymous~
|
|
393
|
+
screen: currentScreen => __foldkitBrandViewResult((Match.value(currentScreen).pipe(Match.withReturnType(), Match.when('Messages', () => __foldkitBrandViewResult(('Settings'), "@foldkit/devtools/overlay.js#anonymous~28")), Match.when('Settings', () => __foldkitBrandViewResult(('Messages'), "@foldkit/devtools/overlay.js#anonymous~29")), Match.exhaustive)), "@foldkit/devtools/overlay.js#screen"),
|
|
456
394
|
}),
|
|
457
395
|
}), "@foldkit/devtools/overlay.js#ClickedSettingsToggle")),
|
|
458
396
|
ToggledFlatten: ({ isFlattened }) => (__foldkitBrandViewResult(({
|
|
@@ -466,13 +404,13 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
466
404
|
ClickedRow: ({ index }) => __foldkitBrandViewResult((Match.value(mode).pipe(Match.withReturnType(), Match.when('TimeTravel', () => (__foldkitBrandViewResult(({
|
|
467
405
|
model,
|
|
468
406
|
commands: [jumpToAndInspect(index)],
|
|
469
|
-
}), "@foldkit/devtools/overlay.js#anonymous~
|
|
407
|
+
}), "@foldkit/devtools/overlay.js#anonymous~30"))), Match.when('Inspect', () => (__foldkitBrandViewResult(({
|
|
470
408
|
model: modifyFields(model, {
|
|
471
409
|
selectedIndex: () => __foldkitBrandViewResult((index), "@foldkit/devtools/overlay.js#selectedIndex"),
|
|
472
410
|
isFollowingLatest: () => __foldkitBrandViewResult((false), "@foldkit/devtools/overlay.js#isFollowingLatest"),
|
|
473
411
|
}),
|
|
474
412
|
commands: [inspectState(index)],
|
|
475
|
-
}), "@foldkit/devtools/overlay.js#anonymous~
|
|
413
|
+
}), "@foldkit/devtools/overlay.js#anonymous~31"))), Match.exhaustive)), "@foldkit/devtools/overlay.js#ClickedRow"),
|
|
476
414
|
ClickedResume: () => (__foldkitBrandViewResult(({
|
|
477
415
|
model: modifyFields(model, {
|
|
478
416
|
isFollowingTop: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingTop"),
|
|
@@ -491,7 +429,6 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
491
429
|
expandedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#expandedPaths~2"),
|
|
492
430
|
changedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#changedPaths~2"),
|
|
493
431
|
affectedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#affectedPaths~2"),
|
|
494
|
-
copyStates: () => __foldkitBrandViewResult((HashMap.empty()), "@foldkit/devtools/overlay.js#copyStates"),
|
|
495
432
|
}),
|
|
496
433
|
commands: [clear, inspectLatest, scrollToTop],
|
|
497
434
|
}), "@foldkit/devtools/overlay.js#ClickedClear")),
|
|
@@ -540,28 +477,15 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
540
477
|
: HashSet.add(paths, path)), "@foldkit/devtools/overlay.js#expandedPaths~4"),
|
|
541
478
|
}),
|
|
542
479
|
}), "@foldkit/devtools/overlay.js#ToggledTreeNode")),
|
|
543
|
-
ClickedCopyPayload: ({ targetId, payload }) => {
|
|
544
|
-
if (Option.isSome(HashMap.get(model.copyStates, targetId))) {
|
|
545
|
-
return __foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#ClickedCopyPayload");
|
|
546
|
-
}
|
|
547
|
-
const requestId = model.nextCopyRequestId;
|
|
548
|
-
return __foldkitBrandViewResult(({
|
|
549
|
-
model: modifyFields(model, {
|
|
550
|
-
copyStates: states => __foldkitBrandViewResult((HashMap.set(states, targetId, CopyState.Copying({ requestId }))), "@foldkit/devtools/overlay.js#copyStates~2"),
|
|
551
|
-
nextCopyRequestId: current => __foldkitBrandViewResult((current + 1), "@foldkit/devtools/overlay.js#nextCopyRequestId"),
|
|
552
|
-
}),
|
|
553
|
-
commands: [CopyPayloadToClipboard({ targetId, requestId, payload })],
|
|
554
|
-
}), "@foldkit/devtools/overlay.js#ClickedCopyPayload");
|
|
555
|
-
},
|
|
556
480
|
ReceivedStoreUpdate: ({ entries, initCommands, initMountStarts, startIndex, isPaused, pausedAtIndex, }) => {
|
|
557
|
-
const shouldFollowSelection = Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused), "@foldkit/devtools/overlay.js#anonymous~
|
|
558
|
-
const shouldFollowScroll = Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused && model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~
|
|
481
|
+
const shouldFollowSelection = Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused), "@foldkit/devtools/overlay.js#anonymous~32")), Match.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingLatest), "@foldkit/devtools/overlay.js#anonymous~33")), Match.exhaustive);
|
|
482
|
+
const shouldFollowScroll = Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused && model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~34")), Match.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~35")), Match.exhaustive);
|
|
559
483
|
const latestIndex = Array.match(entries, {
|
|
560
484
|
onEmpty: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#onEmpty~3"),
|
|
561
485
|
onNonEmpty: () => __foldkitBrandViewResult((startIndex + entries.length - 1), "@foldkit/devtools/overlay.js#onNonEmpty~3"),
|
|
562
486
|
});
|
|
563
487
|
const nextSubmodelTags = computeSubmodelTags(entries);
|
|
564
|
-
const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => __foldkitBrandViewResult((!Array.contains(nextSubmodelTags, filterTag)), "@foldkit/devtools/overlay.js#anonymous~
|
|
488
|
+
const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => __foldkitBrandViewResult((!Array.contains(nextSubmodelTags, filterTag)), "@foldkit/devtools/overlay.js#anonymous~36"));
|
|
565
489
|
const sliderMax = entries.length;
|
|
566
490
|
const targetSliderValue = isPaused
|
|
567
491
|
? hostIndexToSliderValue(pausedAtIndex, startIndex)
|
|
@@ -578,7 +502,7 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
578
502
|
maybeSubmodelFilter: current => __foldkitBrandViewResult((isFilterStale ? Option.none() : current), "@foldkit/devtools/overlay.js#maybeSubmodelFilter~3"),
|
|
579
503
|
selectedIndex: current => __foldkitBrandViewResult((shouldFollowSelection ? latestIndex : current), "@foldkit/devtools/overlay.js#selectedIndex~4"),
|
|
580
504
|
scrubberSlider: current => __foldkitBrandViewResult((Slider.reflectRange(current, { min: 0, max: sliderMax })), "@foldkit/devtools/overlay.js#scrubberSlider~2"),
|
|
581
|
-
scrubberValue: current => __foldkitBrandViewResult((Match.value(model.scrubberSlider.dragState).pipe(Match.tag('Dragging', () => __foldkitBrandViewResult((Slider.snapAndClamp(current, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~
|
|
505
|
+
scrubberValue: current => __foldkitBrandViewResult((Match.value(model.scrubberSlider.dragState).pipe(Match.tag('Dragging', () => __foldkitBrandViewResult((Slider.snapAndClamp(current, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~37")), Match.orElse(() => __foldkitBrandViewResult((Slider.snapAndClamp(targetSliderValue, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~38")))), "@foldkit/devtools/overlay.js#scrubberValue~2"),
|
|
582
506
|
}),
|
|
583
507
|
commands: [
|
|
584
508
|
...(shouldFollowSelection ? [inspectLatest] : []),
|
|
@@ -589,13 +513,13 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
589
513
|
GotSubmodelFilterMessage: ({ message: listboxMessage }) => __foldkitBrandViewResult((foldSubmodelFilter(model, listboxMessage)), "@foldkit/devtools/overlay.js#GotSubmodelFilterMessage"),
|
|
590
514
|
GotScrubberSliderMessage: ({ message: sliderMessage }) => __foldkitBrandViewResult((foldScrubberSlider(model, sliderMessage)), "@foldkit/devtools/overlay.js#GotScrubberSliderMessage"),
|
|
591
515
|
TickedScrubFrame: () => __foldkitBrandViewResult((Option.match(model.maybePendingScrubIndex, {
|
|
592
|
-
onNone: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#onNone
|
|
516
|
+
onNone: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#onNone")),
|
|
593
517
|
onSome: (hostIndex) => (__foldkitBrandViewResult(({
|
|
594
518
|
model: modifyFields(model, {
|
|
595
519
|
maybePendingScrubIndex: () => __foldkitBrandViewResult((Option.none()), "@foldkit/devtools/overlay.js#maybePendingScrubIndex~2"),
|
|
596
520
|
}),
|
|
597
521
|
commands: [jumpToAndInspect(hostIndex)],
|
|
598
|
-
}), "@foldkit/devtools/overlay.js#onSome
|
|
522
|
+
}), "@foldkit/devtools/overlay.js#onSome")),
|
|
599
523
|
})), "@foldkit/devtools/overlay.js#TickedScrubFrame"),
|
|
600
524
|
CompletedResume: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedResume")),
|
|
601
525
|
CompletedClear: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedClear")),
|
|
@@ -603,33 +527,11 @@ const makeUpdate = (store, shadow, mode) => {
|
|
|
603
527
|
CompletedLockScroll: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedLockScroll")),
|
|
604
528
|
CompletedUnlockScroll: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedUnlockScroll")),
|
|
605
529
|
CompletedScrollToTop: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedScrollToTop")),
|
|
606
|
-
|
|
607
|
-
? {
|
|
608
|
-
model: modifyFields(model, {
|
|
609
|
-
copyStates: states => __foldkitBrandViewResult((HashMap.set(states, targetId, CopyState.Copied({ requestId }))), "@foldkit/devtools/overlay.js#copyStates~3"),
|
|
610
|
-
}),
|
|
611
|
-
commands: [
|
|
612
|
-
WaitBeforeHidingCopyIndicator({ targetId, requestId }),
|
|
613
|
-
],
|
|
614
|
-
}
|
|
615
|
-
: { model }), "@foldkit/devtools/overlay.js#SucceededCopyPayloadToClipboard"),
|
|
616
|
-
FailedCopyPayloadToClipboard: ({ targetId, requestId }) => (__foldkitBrandViewResult(({
|
|
617
|
-
model: Option.exists(HashMap.get(model.copyStates, targetId), state => __foldkitBrandViewResult((state._tag === 'Copying' && state.requestId === requestId), "@foldkit/devtools/overlay.js#anonymous~42"))
|
|
618
|
-
? modifyFields(model, { copyStates: HashMap.remove(targetId) })
|
|
619
|
-
: model,
|
|
620
|
-
}), "@foldkit/devtools/overlay.js#FailedCopyPayloadToClipboard")),
|
|
621
|
-
CompletedWaitBeforeHidingCopyIndicator: ({ targetId, requestId }) => (__foldkitBrandViewResult(({
|
|
622
|
-
model: Option.exists(HashMap.get(model.copyStates, targetId), state => __foldkitBrandViewResult((state._tag === 'Copied' && state.requestId === requestId), "@foldkit/devtools/overlay.js#anonymous~43"))
|
|
623
|
-
? modifyFields(model, {
|
|
624
|
-
copyStates: HashMap.remove(targetId),
|
|
625
|
-
})
|
|
626
|
-
: model,
|
|
627
|
-
}), "@foldkit/devtools/overlay.js#CompletedWaitBeforeHidingCopyIndicator")),
|
|
628
|
-
})), "@foldkit/devtools/overlay.js#anonymous~29")), "@foldkit/devtools/overlay.js#makeUpdate");
|
|
530
|
+
})), "@foldkit/devtools/overlay.js#anonymous~27")), "@foldkit/devtools/overlay.js#makeUpdate");
|
|
629
531
|
};
|
|
630
532
|
// SUBSCRIPTION
|
|
631
533
|
const makeOverlaySubscriptions = (store, shadow) => {
|
|
632
|
-
const sliderSubscriptions = Slider.subscriptionsForRoot(() => __foldkitBrandViewResult((shadow), "@foldkit/devtools/overlay.js#anonymous~
|
|
534
|
+
const sliderSubscriptions = Slider.subscriptionsForRoot(() => __foldkitBrandViewResult((shadow), "@foldkit/devtools/overlay.js#anonymous~39"));
|
|
633
535
|
const scrubberSubscriptions = Subscription.lift({
|
|
634
536
|
scrubberPointer: sliderSubscriptions.dragPointer,
|
|
635
537
|
scrubberEscape: sliderSubscriptions.dragEscape,
|
|
@@ -642,16 +544,16 @@ const makeOverlaySubscriptions = (store, shadow) => {
|
|
|
642
544
|
isActive: model => __foldkitBrandViewResult((Option.isSome(model.maybePendingScrubIndex)), "@foldkit/devtools/overlay.js#isActive"),
|
|
643
545
|
toMessage: () => __foldkitBrandViewResult((Message.TickedScrubFrame()), "@foldkit/devtools/overlay.js#toMessage"),
|
|
644
546
|
}),
|
|
645
|
-
storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~
|
|
547
|
+
storeUpdates: Subscription.persistent(Stream.concat(Stream.fromEffect(SubscriptionRef.get(store.stateRef).pipe(Effect.map(state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~41")))), Stream.map(SubscriptionRef.changes(store.stateRef), state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~42")))),
|
|
646
548
|
mobileBreakpoint: Subscription.persistent(Stream.callback(queue => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
|
|
647
549
|
const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
|
|
648
550
|
const handler = (event) => {
|
|
649
551
|
Queue.offerUnsafe(queue, Message.CrossedMobileBreakpoint({ isMobile: event.matches }));
|
|
650
552
|
};
|
|
651
553
|
mediaQuery.addEventListener('change', handler);
|
|
652
|
-
return __foldkitBrandViewResult(({ mediaQuery, handler }), "@foldkit/devtools/overlay.js#anonymous~
|
|
653
|
-
}), ({ mediaQuery, handler }) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((mediaQuery.removeEventListener('change', handler)), "@foldkit/devtools/overlay.js#anonymous~
|
|
654
|
-
}), "@foldkit/devtools/overlay.js#anonymous~
|
|
554
|
+
return __foldkitBrandViewResult(({ mediaQuery, handler }), "@foldkit/devtools/overlay.js#anonymous~44");
|
|
555
|
+
}), ({ mediaQuery, handler }) => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((mediaQuery.removeEventListener('change', handler)), "@foldkit/devtools/overlay.js#anonymous~46"))), "@foldkit/devtools/overlay.js#anonymous~45")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@foldkit/devtools/overlay.js#anonymous~47")))), "@foldkit/devtools/overlay.js#anonymous~43"))),
|
|
556
|
+
}), "@foldkit/devtools/overlay.js#anonymous~40")));
|
|
655
557
|
return __foldkitBrandViewResult((Subscription.aggregate(ownSubscriptions, scrubberSubscriptions)), "@foldkit/devtools/overlay.js#makeOverlaySubscriptions");
|
|
656
558
|
};
|
|
657
559
|
// VIEW
|
|
@@ -685,7 +587,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
|
|
|
685
587
|
let viewWithBuilder;
|
|
686
588
|
return __foldkitBrandViewResult(((model, h) => {
|
|
687
589
|
viewWithBuilder ??= buildOverlayView(position, mode, shadow, maybeBanner, h);
|
|
688
|
-
return __foldkitBrandViewResult((viewWithBuilder(model)), "@foldkit/devtools/overlay.js#anonymous~
|
|
590
|
+
return __foldkitBrandViewResult((viewWithBuilder(model)), "@foldkit/devtools/overlay.js#anonymous~48");
|
|
689
591
|
}), "@foldkit/devtools/overlay.js#makeView");
|
|
690
592
|
};
|
|
691
593
|
const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
@@ -695,12 +597,10 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
695
597
|
const lazyMessageList = createLazy();
|
|
696
598
|
// JSON TREE
|
|
697
599
|
const leafSpan = (className, text) => __foldkitBrandViewResult((h.span([h.Class(className)], [text])), "@foldkit/devtools/overlay.js#leafSpan");
|
|
698
|
-
const leafValueView = (value) => __foldkitBrandViewResult((Match.value(value).pipe(Match.when(Predicate.isNull, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'null')), "@foldkit/devtools/overlay.js#anonymous~
|
|
600
|
+
const leafValueView = (value) => __foldkitBrandViewResult((Match.value(value).pipe(Match.when(Predicate.isNull, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'null')), "@foldkit/devtools/overlay.js#anonymous~49")), Match.when(Predicate.isUndefined, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'undefined')), "@foldkit/devtools/overlay.js#anonymous~50")), Match.when(Predicate.isString, stringValue => __foldkitBrandViewResult((leafSpan('json-string', `"${stringValue}"`)), "@foldkit/devtools/overlay.js#anonymous~51")), Match.when(Predicate.isNumber, numberValue => __foldkitBrandViewResult((leafSpan('json-number', globalThis.String(numberValue))), "@foldkit/devtools/overlay.js#anonymous~52")), Match.when(Predicate.isBoolean, booleanValue => __foldkitBrandViewResult((leafSpan('json-boolean', globalThis.String(booleanValue))), "@foldkit/devtools/overlay.js#anonymous~53")), Match.orElse(unknownValue => __foldkitBrandViewResult((leafSpan('json-null', globalThis.String(unknownValue))), "@foldkit/devtools/overlay.js#anonymous~54")))), "@foldkit/devtools/overlay.js#leafValueView");
|
|
699
601
|
const keyView = (key) => __foldkitBrandViewResult((h.span([h.Class('json-key')], [`${key}:\u00a0`])), "@foldkit/devtools/overlay.js#keyView");
|
|
700
602
|
const CHEVRON_RIGHT = 'M8.25 4.5l7.5 7.5-7.5 7.5';
|
|
701
603
|
const CHEVRON_DOWN = 'M19.5 8.25l-7.5 7.5-7.5-7.5';
|
|
702
|
-
const COPY_ICON = 'M8 8h10a2 2 0 012 2v8a2 2 0 01-2 2h-8a2 2 0 01-2-2V8Zm8 0V6a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2';
|
|
703
|
-
const COPY_SUCCESS_ICON = 'M4.5 12.75l6 6 9-13.5';
|
|
704
604
|
const arrowView = (isExpanded) => __foldkitBrandViewResult((h.svg([
|
|
705
605
|
h.AriaHidden(true),
|
|
706
606
|
h.Class('json-arrow shrink-0'),
|
|
@@ -717,47 +617,6 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
717
617
|
]),
|
|
718
618
|
])), "@foldkit/devtools/overlay.js#arrowView");
|
|
719
619
|
const tagLabelView = (tag) => __foldkitBrandViewResult((h.span([h.Class('json-tag')], [tag])), "@foldkit/devtools/overlay.js#tagLabelView");
|
|
720
|
-
const copyPayloadButtonView = (payload, targetId, copyStates, subject) => {
|
|
721
|
-
const maybeCopyState = HashMap.get(copyStates, targetId);
|
|
722
|
-
const isCopying = Option.exists(maybeCopyState, state => __foldkitBrandViewResult((state._tag === 'Copying'), "@foldkit/devtools/overlay.js#anonymous~60"));
|
|
723
|
-
const isCopied = Option.exists(maybeCopyState, state => __foldkitBrandViewResult((state._tag === 'Copied'), "@foldkit/devtools/overlay.js#anonymous~61"));
|
|
724
|
-
const ariaLabel = Option.match(maybeCopyState, {
|
|
725
|
-
onNone: () => __foldkitBrandViewResult((`Copy ${subject} as JSON`), "@foldkit/devtools/overlay.js#onNone~3"),
|
|
726
|
-
onSome: CopyState.match({
|
|
727
|
-
Copying: () => __foldkitBrandViewResult((`Copying ${subject} as JSON`), "@foldkit/devtools/overlay.js#Copying"),
|
|
728
|
-
Copied: () => __foldkitBrandViewResult((`Copied ${subject} as JSON`), "@foldkit/devtools/overlay.js#Copied"),
|
|
729
|
-
}),
|
|
730
|
-
});
|
|
731
|
-
return __foldkitBrandViewResult((h.span([h.Class('dt-copy-control shrink-0')], [
|
|
732
|
-
h.button([
|
|
733
|
-
h.Class(clsx('dt-copy-button', isCopied && 'dt-copy-success')),
|
|
734
|
-
h.Type('button'),
|
|
735
|
-
h.AriaLabel(ariaLabel),
|
|
736
|
-
h.AriaDisabled(isCopying || isCopied),
|
|
737
|
-
h.Title(isCopied ? 'Copied' : 'Copy as JSON'),
|
|
738
|
-
...(Option.isNone(maybeCopyState)
|
|
739
|
-
? [h.OnClick(Message.ClickedCopyPayload({ targetId, payload }))]
|
|
740
|
-
: []),
|
|
741
|
-
], [
|
|
742
|
-
h.svg([
|
|
743
|
-
h.AriaHidden(true),
|
|
744
|
-
h.Class('dt-copy-icon'),
|
|
745
|
-
h.Xmlns('http://www.w3.org/2000/svg'),
|
|
746
|
-
h.Fill('none'),
|
|
747
|
-
h.ViewBox('0 0 24 24'),
|
|
748
|
-
h.StrokeWidth(isCopied ? '2' : '1.5'),
|
|
749
|
-
h.Stroke('currentColor'),
|
|
750
|
-
], [
|
|
751
|
-
h.path([
|
|
752
|
-
h.StrokeLinecap('round'),
|
|
753
|
-
h.StrokeLinejoin('round'),
|
|
754
|
-
h.D(isCopied ? COPY_SUCCESS_ICON : COPY_ICON),
|
|
755
|
-
]),
|
|
756
|
-
]),
|
|
757
|
-
]),
|
|
758
|
-
h.span([h.Role('status'), h.AriaLive('polite'), h.Class('sr-only')], [isCopied ? 'Copied to clipboard' : '']),
|
|
759
|
-
])), "@foldkit/devtools/overlay.js#copyPayloadButtonView");
|
|
760
|
-
};
|
|
761
620
|
const previewView = (preview) => __foldkitBrandViewResult((h.span([h.Class('json-preview')], [preview])), "@foldkit/devtools/overlay.js#previewView");
|
|
762
621
|
const diffDotView = h.span([h.Class('diff-dot')]);
|
|
763
622
|
const inlineDiffDotView = h.span([h.Class('diff-dot-inline')]);
|
|
@@ -806,16 +665,16 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
806
665
|
treePath: `${treePath}.${arrayIndex}`,
|
|
807
666
|
depth: childDepth,
|
|
808
667
|
key: globalThis.String(arrayIndex),
|
|
809
|
-
})), "@foldkit/devtools/overlay.js#anonymous~
|
|
668
|
+
})), "@foldkit/devtools/overlay.js#anonymous~55"));
|
|
810
669
|
}
|
|
811
670
|
else if (Predicate.isObject(value)) {
|
|
812
|
-
pipe(value, Record.toEntries, Array.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~
|
|
671
|
+
pipe(value, Record.toEntries, Array.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~56")), Array.forEach(([entryKey, childValue]) => __foldkitBrandViewResult((flattenTree({
|
|
813
672
|
...shared,
|
|
814
673
|
value: childValue,
|
|
815
674
|
treePath: `${treePath}.${entryKey}`,
|
|
816
675
|
depth: childDepth,
|
|
817
676
|
key: entryKey,
|
|
818
|
-
})), "@foldkit/devtools/overlay.js#anonymous~
|
|
677
|
+
})), "@foldkit/devtools/overlay.js#anonymous~57")));
|
|
819
678
|
}
|
|
820
679
|
};
|
|
821
680
|
const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, isRoot, tag) => {
|
|
@@ -835,7 +694,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
835
694
|
'diff-changed': isChanged,
|
|
836
695
|
})),
|
|
837
696
|
indent,
|
|
838
|
-
], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~
|
|
697
|
+
], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~58")))), "@foldkit/devtools/overlay.js#flatNodeView");
|
|
839
698
|
}
|
|
840
699
|
const preview = isExpanded
|
|
841
700
|
? globalThis.Array.isArray(value)
|
|
@@ -859,7 +718,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
859
718
|
...(isRoot
|
|
860
719
|
? []
|
|
861
720
|
: [h.OnClick(Message.ToggledTreeNode({ path: treePath }))]),
|
|
862
|
-
], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~
|
|
721
|
+
], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~59")))), "@foldkit/devtools/overlay.js#flatNodeView");
|
|
863
722
|
};
|
|
864
723
|
const renderFlatNode = (node) => __foldkitBrandViewResult((lazyTreeNode(node.treePath, flatNodeView, [
|
|
865
724
|
node.value,
|
|
@@ -883,7 +742,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
883
742
|
changedPaths,
|
|
884
743
|
affectedPaths,
|
|
885
744
|
depth: 0,
|
|
886
|
-
key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~
|
|
745
|
+
key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~60")),
|
|
887
746
|
accumulator: nodes,
|
|
888
747
|
indentRootChildren,
|
|
889
748
|
});
|
|
@@ -897,8 +756,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
897
756
|
return __foldkitBrandViewResult(('0ms'), "@foldkit/devtools/overlay.js#inspectedTimestamp");
|
|
898
757
|
}
|
|
899
758
|
const baseTimestamp = pipe(model.entries, Array.head, Option.match({
|
|
900
|
-
onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~
|
|
901
|
-
onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~
|
|
759
|
+
onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~2"),
|
|
760
|
+
onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~2"),
|
|
902
761
|
}));
|
|
903
762
|
return __foldkitBrandViewResult((pipe(Array.get(model.entries, selectedIndex - model.startIndex), Option.map(entry => {
|
|
904
763
|
const delta = entry.timestamp - baseTimestamp;
|
|
@@ -906,8 +765,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
906
765
|
const remainingMs = delta % MILLIS_PER_SECOND;
|
|
907
766
|
return __foldkitBrandViewResult((seconds > 0
|
|
908
767
|
? `+${seconds}s ${remainingMs.toFixed(1)}ms`
|
|
909
|
-
: `+${remainingMs.toFixed(1)}ms`), "@foldkit/devtools/overlay.js#anonymous~
|
|
910
|
-
}), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~
|
|
768
|
+
: `+${remainingMs.toFixed(1)}ms`), "@foldkit/devtools/overlay.js#anonymous~61");
|
|
769
|
+
}), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~62")))), "@foldkit/devtools/overlay.js#inspectedTimestamp");
|
|
911
770
|
};
|
|
912
771
|
const emptyInspectorView = h.div([
|
|
913
772
|
h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
|
|
@@ -915,16 +774,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
915
774
|
const noMessageView = () => __foldkitBrandViewResult((h.div([
|
|
916
775
|
h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
|
|
917
776
|
], ['init: no Message'])), "@foldkit/devtools/overlay.js#noMessageView");
|
|
918
|
-
const
|
|
919
|
-
h.Class('flex items-center justify-between px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
|
|
920
|
-
], [
|
|
921
|
-
h.span([], [label]),
|
|
922
|
-
copyPayloadButtonView(payload, targetId, copyStates, `${label} payload`),
|
|
923
|
-
])), "@foldkit/devtools/overlay.js#payloadHeaderView");
|
|
924
|
-
const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths, selectedIndex, copyStates) => __foldkitBrandViewResult((h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
|
|
925
|
-
payloadHeaderView('Model', inspectedModel, `Model:${selectedIndex}`, copyStates),
|
|
926
|
-
treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true),
|
|
927
|
-
])), "@foldkit/devtools/overlay.js#modelTabContent");
|
|
777
|
+
const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => __foldkitBrandViewResult((treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true)), "@foldkit/devtools/overlay.js#modelTabContent");
|
|
928
778
|
const unwrapToLeaf = (message) => {
|
|
929
779
|
if (isTagged(message) &&
|
|
930
780
|
GOT_MESSAGE_PATTERN.test(message._tag) &&
|
|
@@ -959,7 +809,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
959
809
|
}
|
|
960
810
|
return __foldkitBrandViewResult((current), "@foldkit/devtools/overlay.js#unwrapIfFiltered");
|
|
961
811
|
};
|
|
962
|
-
const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, isFlattened, expandedPaths, timestamp
|
|
812
|
+
const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, isFlattened, expandedPaths, timestamp) => __foldkitBrandViewResult((Option.match(maybeInspectedMessage, {
|
|
963
813
|
onNone: noMessageView,
|
|
964
814
|
onSome: rawMessage => {
|
|
965
815
|
const message = isFlattened
|
|
@@ -967,15 +817,12 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
967
817
|
: unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
|
|
968
818
|
return __foldkitBrandViewResult((h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
|
|
969
819
|
h.div([
|
|
970
|
-
h.Class('
|
|
971
|
-
], [
|
|
972
|
-
h.span([], [timestamp]),
|
|
973
|
-
copyPayloadButtonView(message, `Message:${selectedIndex}:${isFlattened}:${Option.getOrElse(maybeSubmodelFilter, () => __foldkitBrandViewResult(('All'), "@foldkit/devtools/overlay.js#anonymous~70"))}`, copyStates, 'Message payload'),
|
|
974
|
-
]),
|
|
820
|
+
h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
|
|
821
|
+
], [timestamp]),
|
|
975
822
|
h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0 pt-1 pl-1')], [
|
|
976
823
|
treeView(message, 'root', expandedPaths, HashSet.empty(), HashSet.empty(), Option.none(), false),
|
|
977
824
|
]),
|
|
978
|
-
])), "@foldkit/devtools/overlay.js#onSome~
|
|
825
|
+
])), "@foldkit/devtools/overlay.js#onSome~3");
|
|
979
826
|
},
|
|
980
827
|
})), "@foldkit/devtools/overlay.js#messageTabContent");
|
|
981
828
|
const selectedHistoryIndex = (model) => {
|
|
@@ -983,7 +830,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
983
830
|
onEmpty: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#onEmpty~4"),
|
|
984
831
|
onNonEmpty: () => __foldkitBrandViewResult((model.startIndex + model.entries.length - 1), "@foldkit/devtools/overlay.js#onNonEmpty~4"),
|
|
985
832
|
});
|
|
986
|
-
return __foldkitBrandViewResult((Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((model.isPaused ? model.pausedAtIndex : lastIndex), "@foldkit/devtools/overlay.js#anonymous~
|
|
833
|
+
return __foldkitBrandViewResult((Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((model.isPaused ? model.pausedAtIndex : lastIndex), "@foldkit/devtools/overlay.js#anonymous~63")), Match.when('Inspect', () => __foldkitBrandViewResult((model.selectedIndex), "@foldkit/devtools/overlay.js#anonymous~64")), Match.exhaustive)), "@foldkit/devtools/overlay.js#selectedHistoryIndex");
|
|
987
834
|
};
|
|
988
835
|
const selectedCommands = (model) => {
|
|
989
836
|
const selectedIndex = selectedHistoryIndex(model);
|
|
@@ -991,11 +838,14 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
991
838
|
return __foldkitBrandViewResult((model.initCommands), "@foldkit/devtools/overlay.js#selectedCommands");
|
|
992
839
|
}
|
|
993
840
|
else {
|
|
994
|
-
return __foldkitBrandViewResult((pipe(model.entries, Array.get(selectedIndex - model.startIndex), Option.map(entry => __foldkitBrandViewResult((entry.commands), "@foldkit/devtools/overlay.js#anonymous~
|
|
841
|
+
return __foldkitBrandViewResult((pipe(model.entries, Array.get(selectedIndex - model.startIndex), Option.map(entry => __foldkitBrandViewResult((entry.commands), "@foldkit/devtools/overlay.js#anonymous~65")), Option.getOrElse(() => __foldkitBrandViewResult((NO_COMMANDS), "@foldkit/devtools/overlay.js#anonymous~66")))), "@foldkit/devtools/overlay.js#selectedCommands");
|
|
995
842
|
}
|
|
996
843
|
};
|
|
997
844
|
const flattenCommand = (command, index, expandedPaths) => {
|
|
998
|
-
const taggedValue =
|
|
845
|
+
const taggedValue = Option.match(command.args, {
|
|
846
|
+
onNone: () => (__foldkitBrandViewResult(({ _tag: command.name }), "@foldkit/devtools/overlay.js#onNone~3")),
|
|
847
|
+
onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: command.name }), "@foldkit/devtools/overlay.js#onSome~4")),
|
|
848
|
+
});
|
|
999
849
|
const rootPath = `command-${index}`;
|
|
1000
850
|
const nodes = [];
|
|
1001
851
|
flattenTree({
|
|
@@ -1012,12 +862,12 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1012
862
|
});
|
|
1013
863
|
return __foldkitBrandViewResult((nodes), "@foldkit/devtools/overlay.js#flattenCommand");
|
|
1014
864
|
};
|
|
1015
|
-
const commandsTabContent = (commands, expandedPaths
|
|
865
|
+
const commandsTabContent = (commands, expandedPaths) => __foldkitBrandViewResult((Array.match(commands, {
|
|
1016
866
|
onEmpty: () => __foldkitBrandViewResult((h.div([
|
|
1017
867
|
h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
|
|
1018
868
|
], ['No Commands returned'])), "@foldkit/devtools/overlay.js#onEmpty~5"),
|
|
1019
869
|
onNonEmpty: commandList => __foldkitBrandViewResult((h.div([
|
|
1020
|
-
h.Class('
|
|
870
|
+
h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
|
|
1021
871
|
], Array.map(commandList, (command, index) => __foldkitBrandViewResult((h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
|
|
1022
872
|
h.span([h.Class(indexClass)], [globalThis.String(index + 1)]),
|
|
1023
873
|
h.div([h.Class('flex flex-col flex-1 min-w-0')], [
|
|
@@ -1027,7 +877,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1027
877
|
h.span([h.AriaHidden(true)], ['…']),
|
|
1028
878
|
h.span([h.Class('sr-only')], ['Destination pending']),
|
|
1029
879
|
]),
|
|
1030
|
-
]), "@foldkit/devtools/overlay.js#onNone~
|
|
880
|
+
]), "@foldkit/devtools/overlay.js#onNone~4"),
|
|
1031
881
|
onSome: submodelPath => __foldkitBrandViewResult((Array.match(submodelPath, {
|
|
1032
882
|
onEmpty: () => __foldkitBrandViewResult(([]), "@foldkit/devtools/overlay.js#onEmpty~6"),
|
|
1033
883
|
onNonEmpty: submodelPath => __foldkitBrandViewResult(([
|
|
@@ -1039,8 +889,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1039
889
|
}),
|
|
1040
890
|
...Array.map(flattenCommand(command, index, expandedPaths), renderFlatNode),
|
|
1041
891
|
]),
|
|
1042
|
-
|
|
1043
|
-
])), "@foldkit/devtools/overlay.js#anonymous~75")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
|
|
892
|
+
])), "@foldkit/devtools/overlay.js#anonymous~67")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
|
|
1044
893
|
})), "@foldkit/devtools/overlay.js#commandsTabContent");
|
|
1045
894
|
const selectedMountActivity = (model) => {
|
|
1046
895
|
const selectedIndex = selectedHistoryIndex(model);
|
|
@@ -1049,7 +898,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1049
898
|
}
|
|
1050
899
|
else {
|
|
1051
900
|
return __foldkitBrandViewResult((pipe(model.entries, Array.get(selectedIndex - model.startIndex), Option.match({
|
|
1052
|
-
onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~
|
|
901
|
+
onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~5")),
|
|
1053
902
|
onSome: entry => (__foldkitBrandViewResult(({
|
|
1054
903
|
starts: entry.mountStarts,
|
|
1055
904
|
ends: entry.mountEnds,
|
|
@@ -1058,7 +907,10 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1058
907
|
}
|
|
1059
908
|
};
|
|
1060
909
|
const flattenMount = (mount, sectionLabel, index, expandedPaths) => {
|
|
1061
|
-
const taggedValue =
|
|
910
|
+
const taggedValue = Option.match(mount.args, {
|
|
911
|
+
onNone: () => (__foldkitBrandViewResult(({ _tag: mount.name }), "@foldkit/devtools/overlay.js#onNone~6")),
|
|
912
|
+
onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: mount.name }), "@foldkit/devtools/overlay.js#onSome~7")),
|
|
913
|
+
});
|
|
1062
914
|
const rootPath = `mount-${sectionLabel}-${index}`;
|
|
1063
915
|
const nodes = [];
|
|
1064
916
|
flattenTree({
|
|
@@ -1075,17 +927,16 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1075
927
|
});
|
|
1076
928
|
return __foldkitBrandViewResult((nodes), "@foldkit/devtools/overlay.js#flattenMount");
|
|
1077
929
|
};
|
|
1078
|
-
const mountListSection = (label, mounts, expandedPaths
|
|
930
|
+
const mountListSection = (label, mounts, expandedPaths) => __foldkitBrandViewResult((h.div([h.Class('flex flex-col shrink-0')], [
|
|
1079
931
|
h.div([
|
|
1080
932
|
h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
|
|
1081
933
|
], [label]),
|
|
1082
934
|
...Array.map(mounts, (mount, index) => __foldkitBrandViewResult((h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
|
|
1083
935
|
h.span([h.Class(indexClass)], [globalThis.String(index + 1)]),
|
|
1084
936
|
h.div([h.Class('flex flex-col flex-1 min-w-0')], Array.map(flattenMount(mount, label, index, expandedPaths), renderFlatNode)),
|
|
1085
|
-
|
|
1086
|
-
])), "@foldkit/devtools/overlay.js#anonymous~76")),
|
|
937
|
+
])), "@foldkit/devtools/overlay.js#anonymous~68")),
|
|
1087
938
|
])), "@foldkit/devtools/overlay.js#mountListSection");
|
|
1088
|
-
const mountsTabContent = (starts, ends, expandedPaths
|
|
939
|
+
const mountsTabContent = (starts, ends, expandedPaths) => {
|
|
1089
940
|
const hasAny = Array.isReadonlyArrayNonEmpty(starts) ||
|
|
1090
941
|
Array.isReadonlyArrayNonEmpty(ends);
|
|
1091
942
|
if (!hasAny) {
|
|
@@ -1094,53 +945,38 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1094
945
|
], ['No Mounts during this render'])), "@foldkit/devtools/overlay.js#mountsTabContent");
|
|
1095
946
|
}
|
|
1096
947
|
return __foldkitBrandViewResult((h.div([
|
|
1097
|
-
h.Class('
|
|
948
|
+
h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
|
|
1098
949
|
], [
|
|
1099
950
|
...(Array.isReadonlyArrayNonEmpty(starts)
|
|
1100
|
-
? [
|
|
1101
|
-
mountListSection('Started', starts, expandedPaths, selectedIndex, copyStates),
|
|
1102
|
-
]
|
|
951
|
+
? [mountListSection('Started', starts, expandedPaths)]
|
|
1103
952
|
: []),
|
|
1104
953
|
...(Array.isReadonlyArrayNonEmpty(ends)
|
|
1105
|
-
? [
|
|
1106
|
-
mountListSection('Ended', ends, expandedPaths, selectedIndex, copyStates),
|
|
1107
|
-
]
|
|
954
|
+
? [mountListSection('Ended', ends, expandedPaths)]
|
|
1108
955
|
: []),
|
|
1109
956
|
])), "@foldkit/devtools/overlay.js#mountsTabContent");
|
|
1110
957
|
};
|
|
1111
|
-
const inspectorTabContent = (model, tab, inspectedModel) =>
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
958
|
+
const inspectorTabContent = (model, tab, inspectedModel) => __foldkitBrandViewResult((Match.value(tab).pipe(Match.when('Model', () => __foldkitBrandViewResult((lazyTabContent('Model', modelTabContent, [
|
|
959
|
+
inspectedModel,
|
|
960
|
+
model.expandedPaths,
|
|
961
|
+
model.changedPaths,
|
|
962
|
+
model.affectedPaths,
|
|
963
|
+
])), "@foldkit/devtools/overlay.js#anonymous~69")), Match.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
|
|
964
|
+
model.maybeInspectedMessage,
|
|
965
|
+
model.maybeSubmodelFilter,
|
|
966
|
+
model.isFlattened,
|
|
967
|
+
model.expandedPaths,
|
|
968
|
+
inspectedTimestamp(model),
|
|
969
|
+
])), "@foldkit/devtools/overlay.js#anonymous~70")), Match.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
|
|
970
|
+
selectedCommands(model),
|
|
971
|
+
model.expandedPaths,
|
|
972
|
+
])), "@foldkit/devtools/overlay.js#anonymous~71")), Match.when('Mounts', () => {
|
|
973
|
+
const { starts, ends } = selectedMountActivity(model);
|
|
974
|
+
return __foldkitBrandViewResult((lazyTabContent('Mounts', mountsTabContent, [
|
|
975
|
+
starts,
|
|
976
|
+
ends,
|
|
1115
977
|
model.expandedPaths,
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
selectedIndex,
|
|
1119
|
-
model.copyStates,
|
|
1120
|
-
])), "@foldkit/devtools/overlay.js#anonymous~77")), Match.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
|
|
1121
|
-
model.maybeInspectedMessage,
|
|
1122
|
-
model.maybeSubmodelFilter,
|
|
1123
|
-
model.isFlattened,
|
|
1124
|
-
model.expandedPaths,
|
|
1125
|
-
inspectedTimestamp(model),
|
|
1126
|
-
selectedIndex,
|
|
1127
|
-
model.copyStates,
|
|
1128
|
-
])), "@foldkit/devtools/overlay.js#anonymous~78")), Match.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
|
|
1129
|
-
selectedCommands(model),
|
|
1130
|
-
model.expandedPaths,
|
|
1131
|
-
selectedIndex,
|
|
1132
|
-
model.copyStates,
|
|
1133
|
-
])), "@foldkit/devtools/overlay.js#anonymous~79")), Match.when('Mounts', () => {
|
|
1134
|
-
const { starts, ends } = selectedMountActivity(model);
|
|
1135
|
-
return __foldkitBrandViewResult((lazyTabContent('Mounts', mountsTabContent, [
|
|
1136
|
-
starts,
|
|
1137
|
-
ends,
|
|
1138
|
-
model.expandedPaths,
|
|
1139
|
-
selectedIndex,
|
|
1140
|
-
model.copyStates,
|
|
1141
|
-
])), "@foldkit/devtools/overlay.js#anonymous~80");
|
|
1142
|
-
}), Match.exhaustive)), "@foldkit/devtools/overlay.js#inspectorTabContent");
|
|
1143
|
-
};
|
|
978
|
+
])), "@foldkit/devtools/overlay.js#anonymous~72");
|
|
979
|
+
}), Match.exhaustive)), "@foldkit/devtools/overlay.js#inspectorTabContent");
|
|
1144
980
|
const inspectorPaneView = (model) => __foldkitBrandViewResult((h.div([
|
|
1145
981
|
h.Class('flex flex-col border-l min-w-0 min-h-0 flex-1 dt-inspector-pane'),
|
|
1146
982
|
], [
|
|
@@ -1159,7 +995,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1159
995
|
h.Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', tab.isActive
|
|
1160
996
|
? 'text-dt dt-tab-active'
|
|
1161
997
|
: 'text-dt-muted')),
|
|
1162
|
-
], [h.span([], [tab.value])])), "@foldkit/devtools/overlay.js#anonymous~
|
|
998
|
+
], [h.span([], [tab.value])])), "@foldkit/devtools/overlay.js#anonymous~73"))),
|
|
1163
999
|
...tabs.map(tab => __foldkitBrandViewResult((h.div([
|
|
1164
1000
|
...tab.panel,
|
|
1165
1001
|
h.Class('flex flex-col flex-1 min-h-0 min-w-0'),
|
|
@@ -1170,9 +1006,9 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1170
1006
|
], [
|
|
1171
1007
|
Option.match(model.maybeInspectedModel, {
|
|
1172
1008
|
onNone: () => __foldkitBrandViewResult((emptyInspectorView), "@foldkit/devtools/overlay.js#onNone~7"),
|
|
1173
|
-
onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~
|
|
1009
|
+
onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~8"),
|
|
1174
1010
|
}),
|
|
1175
|
-
])), "@foldkit/devtools/overlay.js#anonymous~
|
|
1011
|
+
])), "@foldkit/devtools/overlay.js#anonymous~74")),
|
|
1176
1012
|
])), "@foldkit/devtools/overlay.js#toView"),
|
|
1177
1013
|
},
|
|
1178
1014
|
toParentMessage: message => __foldkitBrandViewResult((Message.GotInspectorTabsMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~5"),
|
|
@@ -1256,7 +1092,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1256
1092
|
view: SubmodelFilterListbox.view,
|
|
1257
1093
|
viewInputs: {
|
|
1258
1094
|
items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
|
|
1259
|
-
maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~
|
|
1095
|
+
maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~75")),
|
|
1260
1096
|
itemToConfig: item => (__foldkitBrandViewResult(({
|
|
1261
1097
|
className: 'dt-filter-item',
|
|
1262
1098
|
content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
|
|
@@ -1326,7 +1162,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1326
1162
|
: {
|
|
1327
1163
|
status: h.span([h.Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
|
|
1328
1164
|
maybeAction: Option.none(),
|
|
1329
|
-
}), "@foldkit/devtools/overlay.js#anonymous~
|
|
1165
|
+
}), "@foldkit/devtools/overlay.js#anonymous~76")), Match.when('Inspect', () => (__foldkitBrandViewResult(({
|
|
1330
1166
|
status: h.span([h.Class(`${statusClass} text-dt-accent`)], [
|
|
1331
1167
|
model.selectedIndex === INIT_INDEX
|
|
1332
1168
|
? 'Inspecting (init)'
|
|
@@ -1336,7 +1172,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1336
1172
|
h.Class(actionButtonClass),
|
|
1337
1173
|
h.OnClick(Message.ClickedFollowLatest()),
|
|
1338
1174
|
], ['Follow Latest →'])),
|
|
1339
|
-
}), "@foldkit/devtools/overlay.js#anonymous~
|
|
1175
|
+
}), "@foldkit/devtools/overlay.js#anonymous~77"))), Match.exhaustive);
|
|
1340
1176
|
const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton());
|
|
1341
1177
|
return __foldkitBrandViewResult((h.header([h.Class(headerClass)], [
|
|
1342
1178
|
status,
|
|
@@ -1383,11 +1219,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1383
1219
|
const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag, isFlattened) => {
|
|
1384
1220
|
const baseTimestamp = pipe(entries, Array.head, Option.match({
|
|
1385
1221
|
onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~9"),
|
|
1386
|
-
onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~
|
|
1222
|
+
onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~9"),
|
|
1387
1223
|
}));
|
|
1388
1224
|
const isInitSelected = selectedIndex === INIT_INDEX;
|
|
1389
1225
|
const isFiltered = Option.isSome(maybeFilterTag);
|
|
1390
|
-
const leafOrTag = (entry) => __foldkitBrandViewResult((Option.getOrElse(entry.maybeLeafTag, () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~
|
|
1226
|
+
const leafOrTag = (entry) => __foldkitBrandViewResult((Option.getOrElse(entry.maybeLeafTag, () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~78"))), "@foldkit/devtools/overlay.js#leafOrTag");
|
|
1391
1227
|
const displayTagFor = (entry) => {
|
|
1392
1228
|
if (isFlattened) {
|
|
1393
1229
|
return __foldkitBrandViewResult((leafOrTag(entry)), "@foldkit/devtools/overlay.js#displayTagFor");
|
|
@@ -1395,15 +1231,15 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1395
1231
|
else {
|
|
1396
1232
|
return __foldkitBrandViewResult((Option.match(maybeFilterTag, {
|
|
1397
1233
|
onNone: () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#onNone~10"),
|
|
1398
|
-
onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~
|
|
1234
|
+
onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~79")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array.get(entry.submodelPath, Number.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~80")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~81")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~82")))), "@foldkit/devtools/overlay.js#onSome~10"),
|
|
1399
1235
|
})), "@foldkit/devtools/overlay.js#displayTagFor");
|
|
1400
1236
|
}
|
|
1401
1237
|
};
|
|
1402
1238
|
const indexedEntries = pipe(entries, Array.map((entry, arrayIndex) => (__foldkitBrandViewResult(({
|
|
1403
1239
|
entry,
|
|
1404
1240
|
absoluteIndex: startIndex + arrayIndex,
|
|
1405
|
-
}), "@foldkit/devtools/overlay.js#anonymous~
|
|
1406
|
-
? Array.filter(({ entry }) => __foldkitBrandViewResult((Array.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~
|
|
1241
|
+
}), "@foldkit/devtools/overlay.js#anonymous~83"))), isFiltered
|
|
1242
|
+
? Array.filter(({ entry }) => __foldkitBrandViewResult((Array.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~84"))
|
|
1407
1243
|
: Function.identity);
|
|
1408
1244
|
const messageRows = pipe(indexedEntries, Array.map(({ entry, absoluteIndex }) => {
|
|
1409
1245
|
const isSelected = selectedIndex === absoluteIndex;
|
|
@@ -1416,11 +1252,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1416
1252
|
isPausedHere,
|
|
1417
1253
|
entry.timestamp - baseTimestamp,
|
|
1418
1254
|
entry.isModelChanged,
|
|
1419
|
-
])), "@foldkit/devtools/overlay.js#anonymous~
|
|
1255
|
+
])), "@foldkit/devtools/overlay.js#anonymous~85");
|
|
1420
1256
|
}), Array.reverse);
|
|
1421
1257
|
return __foldkitBrandViewResult((h.ul([
|
|
1422
1258
|
h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none'),
|
|
1423
|
-
h.OnScroll(scrollTop => __foldkitBrandViewResult((Message.ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~
|
|
1259
|
+
h.OnScroll(scrollTop => __foldkitBrandViewResult((Message.ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~86")),
|
|
1424
1260
|
], isFiltered
|
|
1425
1261
|
? messageRows
|
|
1426
1262
|
: [
|
|
@@ -1548,13 +1384,13 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1548
1384
|
inspectorPaneView(model),
|
|
1549
1385
|
])), "@foldkit/devtools/overlay.js#messagesScreenView");
|
|
1550
1386
|
};
|
|
1551
|
-
const contentView = (model) => __foldkitBrandViewResult((Match.value(model.screen).pipe(Match.withReturnType(), Match.when('Messages', () => __foldkitBrandViewResult((messagesScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~
|
|
1387
|
+
const contentView = (model) => __foldkitBrandViewResult((Match.value(model.screen).pipe(Match.withReturnType(), Match.when('Messages', () => __foldkitBrandViewResult((messagesScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~87")), Match.when('Settings', () => __foldkitBrandViewResult((settingsScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~88")), Match.exhaustive)), "@foldkit/devtools/overlay.js#contentView");
|
|
1552
1388
|
const panelView = (model) => __foldkitBrandViewResult((h.div([
|
|
1553
1389
|
h.Class(clsx('fixed dt-panel dt-panel-wide bg-dt-bg border rounded-lg flex flex-col overflow-hidden font-mono text-dt', PANEL_POSITION_CLASS[position])),
|
|
1554
1390
|
], [
|
|
1555
1391
|
...Option.map(maybeBanner, banner => __foldkitBrandViewResult((h.div([
|
|
1556
1392
|
h.Class('px-3 py-2 border-b text-sm text-dt-muted font-mono shrink-0 leading-snug'),
|
|
1557
|
-
], [banner])), "@foldkit/devtools/overlay.js#anonymous~
|
|
1393
|
+
], [banner])), "@foldkit/devtools/overlay.js#anonymous~89")).pipe(Option.toArray),
|
|
1558
1394
|
headerView(model),
|
|
1559
1395
|
contentView(model),
|
|
1560
1396
|
footerView(model),
|
|
@@ -1564,7 +1400,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
|
|
|
1564
1400
|
...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker()).pipe(Option.toArray),
|
|
1565
1401
|
...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
|
|
1566
1402
|
badgeView(model),
|
|
1567
|
-
])), "@foldkit/devtools/overlay.js#anonymous~
|
|
1403
|
+
])), "@foldkit/devtools/overlay.js#anonymous~90")), "@foldkit/devtools/overlay.js#buildOverlayView");
|
|
1568
1404
|
};
|
|
1569
1405
|
// CREATE
|
|
1570
1406
|
const VIEW_TRANSITION_NAME = 'foldkit-devtools';
|
|
@@ -1645,10 +1481,10 @@ const createShadowContainer = () => {
|
|
|
1645
1481
|
return __foldkitBrandViewResult(({ container, shadow }), "@foldkit/devtools/overlay.js#createShadowContainer");
|
|
1646
1482
|
};
|
|
1647
1483
|
export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBrandViewResult((Effect.gen(function* () {
|
|
1648
|
-
const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~
|
|
1484
|
+
const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~93")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
|
|
1649
1485
|
createdShadowContainer.shadow.host.remove();
|
|
1650
1486
|
document.getElementById(VIEW_TRANSITION_STYLE_ID)?.remove();
|
|
1651
|
-
})), "@foldkit/devtools/overlay.js#anonymous~
|
|
1487
|
+
})), "@foldkit/devtools/overlay.js#anonymous~94"));
|
|
1652
1488
|
container.id = '__foldkit_devtools_overlay__';
|
|
1653
1489
|
const flags = Effect.gen(function* () {
|
|
1654
1490
|
const storeState = yield* SubscriptionRef.get(store.stateRef);
|
|
@@ -1658,7 +1494,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
|
|
|
1658
1494
|
isMobile: window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches,
|
|
1659
1495
|
isFlattened,
|
|
1660
1496
|
...toDisplayState(storeState),
|
|
1661
|
-
}), "@foldkit/devtools/overlay.js#anonymous~
|
|
1497
|
+
}), "@foldkit/devtools/overlay.js#anonymous~96");
|
|
1662
1498
|
});
|
|
1663
1499
|
const init = (flags) => {
|
|
1664
1500
|
const { isFlattened, ...displayFlags } = flags;
|
|
@@ -1684,8 +1520,6 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
|
|
|
1684
1520
|
expandedPaths: HashSet.empty(),
|
|
1685
1521
|
changedPaths: HashSet.empty(),
|
|
1686
1522
|
affectedPaths: HashSet.empty(),
|
|
1687
|
-
copyStates: HashMap.empty(),
|
|
1688
|
-
nextCopyRequestId: 0,
|
|
1689
1523
|
maybePendingScrubIndex: Option.none(),
|
|
1690
1524
|
inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
|
|
1691
1525
|
activeInspectorTab: 'Model',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@foldkit/devtools",
|
|
3
|
-
"version": "0.166.0-canary.
|
|
3
|
+
"version": "0.166.0-canary.6bd9ee8e728c",
|
|
4
4
|
"description": "In-browser DevTools overlay for Foldkit applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
],
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"@effect/platform-browser": "4.0.0",
|
|
18
|
-
"@foldkit/ui": "0.166.0-canary.
|
|
18
|
+
"@foldkit/ui": "0.166.0-canary.6bd9ee8e728c",
|
|
19
19
|
"effect": "4.0.0",
|
|
20
|
-
"foldkit": "0.166.0-canary.
|
|
20
|
+
"foldkit": "0.166.0-canary.6bd9ee8e728c"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"clsx": "^2.1.1"
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"rimraf": "^6.1.3",
|
|
30
30
|
"typescript": "^7.0.2",
|
|
31
31
|
"vitest": "^4.1.11",
|
|
32
|
-
"@foldkit/vite-plugin": "0.26.1-canary.
|
|
33
|
-
"foldkit": "0.166.0-canary.
|
|
34
|
-
"@foldkit/ui": "0.166.0-canary.
|
|
32
|
+
"@foldkit/vite-plugin": "0.26.1-canary.6bd9ee8e728c",
|
|
33
|
+
"foldkit": "0.166.0-canary.6bd9ee8e728c",
|
|
34
|
+
"@foldkit/ui": "0.166.0-canary.6bd9ee8e728c"
|
|
35
35
|
},
|
|
36
36
|
"keywords": [
|
|
37
37
|
"foldkit",
|