@foldkit/devtools 0.166.0-canary.7590156835c8 → 0.166.0-canary.8f886595a029

package/dist/overlay-styles.d.ts

@@ -1,2 +1,2 @@
-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";
+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";
 //# sourceMappingURL=overlay-styles.d.ts.map

package/dist/overlay-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,yxfAs0BzB,CAAA"}
+{"version":3,"file":"overlay-styles.d.ts","sourceRoot":"","sources":["../src/overlay-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,yuhBAq3BzB,CAAA"}

package/dist/overlay-styles.js

@@ -265,6 +265,43 @@ ul {
 .dt-header-button:hover {
   color: var(--dt-text);
 }
+.dt-copy-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.dt-copy-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 6px;
+  background: transparent;
+  border: none;
+  color: var(--dt-text-muted);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: color 100ms ease;
+}
+.dt-copy-button:hover {
+  color: var(--dt-text);
+}
+.dt-copy-button[aria-disabled='true'] {
+  cursor: default;
+}
+.dt-copy-button.dt-copy-success,
+.dt-copy-button.dt-copy-success:hover {
+  color: var(--dt-live);
+}
+.dt-copy-button:focus-visible {
+  outline: 1px solid var(--dt-accent);
+  outline-offset: -1px;
+}
+.dt-copy-icon {
+  width: 12px;
+  height: 12px;
+}
 .dt-resume-button:hover {
   opacity: 0.7;
 }
@@ -658,6 +695,16 @@ ul {
   line-height: 18px;
   padding-right: 8px;
 }
+.dt-payload-list .tree-row {
+  align-items: flex-start;
+  flex-wrap: wrap;
+  min-width: 0;
+  white-space: normal;
+}
+.dt-payload-list .tree-row span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
 .tree-row-expandable:hover {
   background-color: var(--dt-tree-hover);
 }

package/dist/overlay.d.ts

@@ -69,6 +69,27 @@ export declare const Resume: Command.CommandDefinitionNoArgs<"Resume", Effect.Ef
 export declare const Clear: Command.CommandDefinitionNoArgs<"Clear", Effect.Effect<{
     readonly _tag: "CompletedClear";
 }, never, StoreService>>;
+export declare const CopyPayloadToClipboard: Command.CommandDefinitionWithArgs<"CopyPayloadToClipboard", {
+    targetId: Schema.String;
+    requestId: Schema.Number;
+    payload: Schema.Unknown;
+}, Effect.Effect<{
+    readonly _tag: "SucceededCopyPayloadToClipboard";
+    readonly targetId: string;
+    readonly requestId: number;
+} | {
+    readonly _tag: "FailedCopyPayloadToClipboard";
+    readonly targetId: string;
+    readonly requestId: number;
+}, never, never>>;
+export declare const WaitBeforeHidingCopyIndicator: Command.CommandDefinitionWithArgs<"WaitBeforeHidingCopyIndicator", {
+    targetId: Schema.String;
+    requestId: Schema.Number;
+}, Effect.Effect<{
+    readonly _tag: "CompletedWaitBeforeHidingCopyIndicator";
+    readonly targetId: string;
+    readonly requestId: number;
+}, never, never>>;
 export declare const ScrollToTop: Command.CommandDefinitionNoArgs<"ScrollToTop", Effect.Effect<{
     readonly _tag: "CompletedScrollToTop";
 }, never, ShadowRootService>>;

package/dist/overlay.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../src/overlay.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EACP,MAAM,EAGN,OAAO,EAGP,MAAM,EAIN,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;AAW9B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;;;;;;;;;;;;;;;;;;;;AA6ZrE,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,sBAAsB;;;;;;;;;;;;iBAyBjC,CAAA;AAIF,eAAO,MAAM,6BAA6B;;;;;;;iBAezC,CAAA;AAED,eAAO,MAAM,WAAW;;6BAUtB,CAAA;AAwoEF,eAAO,MAAM,aAAa,UACjB,aAAa,YACV,gBAAgB,QACpB,YAAY,eACL,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,6DAqFhC,CAAA"}

package/dist/overlay.js

@@ -1,10 +1,11 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { clsx } from 'clsx';
-import { Array, Context, Effect, Function, HashSet, Match, Number, Option, Order, Predicate, Queue, Record, Schema, Stream, String, SubscriptionRef, pipe, } from 'effect';
+import { Array, Context, Effect, Function, HashMap, HashSet, Match, Number, Option, Order, Predicate, Record, Schema, Stream, String, SubscriptionRef, pipe, } from 'effect';
 import { KeyValueStore } from 'effect/persistence';
 import { Update } from 'foldkit';
 import * as Command from 'foldkit/command';
 import { DEVTOOLS_HOST_ID, GOT_MESSAGE_PATTERN, INIT_INDEX, extractSubmodelInfo, isTagged, latestEntryIndex, toInspectableValue, } from 'foldkit/devtools-host';
+import * as Dom from 'foldkit/dom';
 import { lockScroll, unlockScroll } from 'foldkit/dom';
 import { createKeyedLazy, createLazy, } from 'foldkit/html';
 import { defineMessageUnion } from 'foldkit/message';
@@ -40,6 +41,10 @@ const DisplayEntry = Schema.Struct({
     timestamp: Schema.Number,
     isModelChanged: Schema.Boolean,
 });
+const CopyState = defineTaggedUnion({
+    Copying: { requestId: Schema.Number },
+    Copied: { requestId: Schema.Number },
+});
 const INSPECTOR_TABS_ID = 'dt-inspector';
 const SUBMODEL_FILTER_ID = 'dt-submodel-filter';
 const FLATTEN_SWITCH_ID = 'dt-flatten-switch';
@@ -82,6 +87,8 @@ const Model = Schema.Struct({
     expandedPaths: Schema.HashSet(Schema.String),
     changedPaths: Schema.HashSet(Schema.String),
     affectedPaths: Schema.HashSet(Schema.String),
+    copyStates: Schema.HashMap(Schema.String, CopyState),
+    nextCopyRequestId: Schema.Number,
     maybePendingScrubIndex: Schema.Option(Schema.Number),
     inspectorTabs: Tabs.Model,
     activeInspectorTab: InspectorTab,
@@ -125,7 +132,7 @@ const Message = defineMessageUnion({
     CompletedLockScroll: {},
     CompletedUnlockScroll: {},
     CompletedScrollToTop: {},
-    CrossedMobileBreakpoint: { isMobile: Schema.Boolean },
+    ObservedMobileBreakpoint: { isMobile: Schema.Boolean },
     ReceivedInspectedState: {
         model: Schema.Unknown,
         maybeMessage: Schema.Option(Schema.Unknown),
@@ -133,6 +140,19 @@ const Message = defineMessageUnion({
         affectedPaths: Schema.HashSet(Schema.String),
     },
     ToggledTreeNode: { path: Schema.String },
+    ClickedCopyPayload: { targetId: Schema.String, payload: Schema.Unknown },
+    SucceededCopyPayloadToClipboard: {
+        targetId: Schema.String,
+        requestId: Schema.Number,
+    },
+    FailedCopyPayloadToClipboard: {
+        targetId: Schema.String,
+        requestId: Schema.Number,
+    },
+    CompletedWaitBeforeHidingCopyIndicator: {
+        targetId: Schema.String,
+        requestId: Schema.Number,
+    },
     TickedScrubFrame: {},
     GotInspectorTabsMessage: { message: Tabs.Message },
     ReceivedStoreUpdate: {
@@ -154,6 +174,7 @@ const MOBILE_BREAKPOINT = 767;
 const MOBILE_BREAKPOINT_QUERY = `(max-width: ${MOBILE_BREAKPOINT}px)`;
 const TREE_INDENT_PX = 12;
 const MAX_PREVIEW_KEYS = 3;
+const JSON_INDENT = 2;
 const ALL_MESSAGES_VALUE = '';
 const DEVTOOLS_STORAGE_KEY = 'foldkit-devtools';
 const NO_COMMANDS = [];
@@ -213,6 +234,20 @@ const objectPreview = (value) => __foldkitBrandViewResult((pipe(value, Record.ke
     },
 }))), "@foldkit/devtools/overlay.js#objectPreview");
 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");
+const serializePayload = (value) => __foldkitBrandViewResult((Effect.try({
+    try: () => {
+        const serialized = JSON.stringify(toInspectableValue(value), null, JSON_INDENT);
+        if (serialized === undefined) {
+            throw new Error('Payload cannot be represented as JSON');
+        }
+        return __foldkitBrandViewResult((serialized), "@foldkit/devtools/overlay.js#try");
+    },
+    catch: () => __foldkitBrandViewResult((new Error('Failed to serialize payload')), "@foldkit/devtools/overlay.js#catch"),
+})), "@foldkit/devtools/overlay.js#serializePayload");
+const taggedPayload = (name, args) => __foldkitBrandViewResult((Option.match(args, {
+    onNone: () => (__foldkitBrandViewResult(({ _tag: name }), "@foldkit/devtools/overlay.js#onNone")),
+    onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: name }), "@foldkit/devtools/overlay.js#onSome")),
+})), "@foldkit/devtools/overlay.js#taggedPayload");
 const foldInspectorTabsOutMessage = Tabs.OutMessage.match({
     Selected: ({ value }) => __foldkitBrandViewResult((model => (__foldkitBrandViewResult(({
         model: modifyFields(model, { activeInspectorTab: () => __foldkitBrandViewResult((value), "@foldkit/devtools/overlay.js#activeInspectorTab") }),
@@ -355,6 +390,34 @@ export const Clear = Command.define('Clear', {
         return __foldkitBrandViewResult((Message.CompletedClear()), "@foldkit/devtools/overlay.js#anonymous~25");
     }),
 });
+export const CopyPayloadToClipboard = Command.define('CopyPayloadToClipboard', {
+    args: {
+        targetId: Schema.String,
+        requestId: Schema.Number,
+        payload: Schema.Unknown,
+    },
+    messages: [
+        Message.SucceededCopyPayloadToClipboard,
+        Message.FailedCopyPayloadToClipboard,
+    ],
+    execute: ({ targetId, requestId, payload }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        const text = yield* serializePayload(payload);
+        yield* Effect.tryPromise({
+            try: () => __foldkitBrandViewResult((navigator.clipboard.writeText(text)), "@foldkit/devtools/overlay.js#try~2"),
+            catch: () => __foldkitBrandViewResult((new Error('Failed to copy payload to clipboard')), "@foldkit/devtools/overlay.js#catch~2"),
+        });
+        return __foldkitBrandViewResult((Message.SucceededCopyPayloadToClipboard({ targetId, requestId })), "@foldkit/devtools/overlay.js#anonymous~26");
+    }).pipe(Effect.catch(() => __foldkitBrandViewResult((Effect.succeed(Message.FailedCopyPayloadToClipboard({ targetId, requestId }))), "@foldkit/devtools/overlay.js#anonymous~27")))), "@foldkit/devtools/overlay.js#execute~4"),
+});
+const COPY_INDICATOR_DURATION = '1 second';
+export const WaitBeforeHidingCopyIndicator = Command.define('WaitBeforeHidingCopyIndicator', {
+    args: { targetId: Schema.String, requestId: Schema.Number },
+    messages: [Message.CompletedWaitBeforeHidingCopyIndicator],
+    execute: ({ targetId, requestId }) => __foldkitBrandViewResult((Effect.sleep(COPY_INDICATOR_DURATION).pipe(Effect.as(Message.CompletedWaitBeforeHidingCopyIndicator({
+        targetId,
+        requestId,
+    })))), "@foldkit/devtools/overlay.js#execute~5"),
+});
 export const ScrollToTop = Command.define('ScrollToTop', {
     messages: [Message.CompletedScrollToTop],
     execute: Effect.gen(function* () {
@@ -363,7 +426,7 @@ export const ScrollToTop = Command.define('ScrollToTop', {
         if (messageList instanceof HTMLElement) {
             messageList.scrollTop = 0;
         }
-        return __foldkitBrandViewResult((Message.CompletedScrollToTop()), "@foldkit/devtools/overlay.js#anonymous~26");
+        return __foldkitBrandViewResult((Message.CompletedScrollToTop()), "@foldkit/devtools/overlay.js#anonymous~28");
     }),
 });
 const makeUpdate = (store, shadow, mode) => {
@@ -390,27 +453,32 @@ const makeUpdate = (store, shadow, mode) => {
         },
         ClickedSettingsToggle: () => (__foldkitBrandViewResult(({
             model: modifyFields(model, {
-                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"),
+                screen: currentScreen => __foldkitBrandViewResult((Match.value(currentScreen).pipe(Match.withReturnType(), Match.when('Messages', () => __foldkitBrandViewResult(('Settings'), "@foldkit/devtools/overlay.js#anonymous~30")), Match.when('Settings', () => __foldkitBrandViewResult(('Messages'), "@foldkit/devtools/overlay.js#anonymous~31")), Match.exhaustive)), "@foldkit/devtools/overlay.js#screen"),
             }),
         }), "@foldkit/devtools/overlay.js#ClickedSettingsToggle")),
         ToggledFlatten: ({ isFlattened }) => (__foldkitBrandViewResult(({
             model: modifyFields(model, { isFlattened: () => __foldkitBrandViewResult((isFlattened), "@foldkit/devtools/overlay.js#isFlattened") }),
             commands: [PersistDevToolsState({ isOpen: model.isOpen, isFlattened })],
         }), "@foldkit/devtools/overlay.js#ToggledFlatten")),
-        CrossedMobileBreakpoint: ({ isMobile }) => (__foldkitBrandViewResult(({
-            model: modifyFields(model, { isMobile: () => __foldkitBrandViewResult((isMobile), "@foldkit/devtools/overlay.js#isMobile") }),
-            commands: Option.toArray(maybeToggleScrollLock(model.isOpen, isMobile)),
-        }), "@foldkit/devtools/overlay.js#CrossedMobileBreakpoint")),
+        ObservedMobileBreakpoint: ({ isMobile }) => {
+            if (isMobile === model.isMobile) {
+                return __foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#ObservedMobileBreakpoint");
+            }
+            return __foldkitBrandViewResult(({
+                model: modifyFields(model, { isMobile: () => __foldkitBrandViewResult((isMobile), "@foldkit/devtools/overlay.js#isMobile") }),
+                commands: Option.toArray(maybeToggleScrollLock(model.isOpen, isMobile)),
+            }), "@foldkit/devtools/overlay.js#ObservedMobileBreakpoint");
+        },
         ClickedRow: ({ index }) => __foldkitBrandViewResult((Match.value(mode).pipe(Match.withReturnType(), Match.when('TimeTravel', () => (__foldkitBrandViewResult(({
             model,
             commands: [jumpToAndInspect(index)],
-        }), "@foldkit/devtools/overlay.js#anonymous~30"))), Match.when('Inspect', () => (__foldkitBrandViewResult(({
+        }), "@foldkit/devtools/overlay.js#anonymous~32"))), Match.when('Inspect', () => (__foldkitBrandViewResult(({
             model: modifyFields(model, {
                 selectedIndex: () => __foldkitBrandViewResult((index), "@foldkit/devtools/overlay.js#selectedIndex"),
                 isFollowingLatest: () => __foldkitBrandViewResult((false), "@foldkit/devtools/overlay.js#isFollowingLatest"),
             }),
             commands: [inspectState(index)],
-        }), "@foldkit/devtools/overlay.js#anonymous~31"))), Match.exhaustive)), "@foldkit/devtools/overlay.js#ClickedRow"),
+        }), "@foldkit/devtools/overlay.js#anonymous~33"))), Match.exhaustive)), "@foldkit/devtools/overlay.js#ClickedRow"),
         ClickedResume: () => (__foldkitBrandViewResult(({
             model: modifyFields(model, {
                 isFollowingTop: () => __foldkitBrandViewResult((true), "@foldkit/devtools/overlay.js#isFollowingTop"),
@@ -429,6 +497,7 @@ const makeUpdate = (store, shadow, mode) => {
                 expandedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#expandedPaths~2"),
                 changedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#changedPaths~2"),
                 affectedPaths: () => __foldkitBrandViewResult((HashSet.empty()), "@foldkit/devtools/overlay.js#affectedPaths~2"),
+                copyStates: () => __foldkitBrandViewResult((HashMap.empty()), "@foldkit/devtools/overlay.js#copyStates"),
             }),
             commands: [clear, inspectLatest, scrollToTop],
         }), "@foldkit/devtools/overlay.js#ClickedClear")),
@@ -477,15 +546,28 @@ const makeUpdate = (store, shadow, mode) => {
                     : HashSet.add(paths, path)), "@foldkit/devtools/overlay.js#expandedPaths~4"),
             }),
         }), "@foldkit/devtools/overlay.js#ToggledTreeNode")),
+        ClickedCopyPayload: ({ targetId, payload }) => {
+            if (Option.isSome(HashMap.get(model.copyStates, targetId))) {
+                return __foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#ClickedCopyPayload");
+            }
+            const requestId = model.nextCopyRequestId;
+            return __foldkitBrandViewResult(({
+                model: modifyFields(model, {
+                    copyStates: states => __foldkitBrandViewResult((HashMap.set(states, targetId, CopyState.Copying({ requestId }))), "@foldkit/devtools/overlay.js#copyStates~2"),
+                    nextCopyRequestId: current => __foldkitBrandViewResult((current + 1), "@foldkit/devtools/overlay.js#nextCopyRequestId"),
+                }),
+                commands: [CopyPayloadToClipboard({ targetId, requestId, payload })],
+            }), "@foldkit/devtools/overlay.js#ClickedCopyPayload");
+        },
         ReceivedStoreUpdate: ({ entries, initCommands, initMountStarts, startIndex, isPaused, pausedAtIndex, }) => {
-            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);
-            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);
+            const shouldFollowSelection = Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused), "@foldkit/devtools/overlay.js#anonymous~34")), Match.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingLatest), "@foldkit/devtools/overlay.js#anonymous~35")), Match.exhaustive);
+            const shouldFollowScroll = Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((!isPaused && model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~36")), Match.when('Inspect', () => __foldkitBrandViewResult((model.isFollowingTop), "@foldkit/devtools/overlay.js#anonymous~37")), Match.exhaustive);
             const latestIndex = Array.match(entries, {
                 onEmpty: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#onEmpty~3"),
                 onNonEmpty: () => __foldkitBrandViewResult((startIndex + entries.length - 1), "@foldkit/devtools/overlay.js#onNonEmpty~3"),
             });
             const nextSubmodelTags = computeSubmodelTags(entries);
-            const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => __foldkitBrandViewResult((!Array.contains(nextSubmodelTags, filterTag)), "@foldkit/devtools/overlay.js#anonymous~36"));
+            const isFilterStale = Option.exists(model.maybeSubmodelFilter, filterTag => __foldkitBrandViewResult((!Array.contains(nextSubmodelTags, filterTag)), "@foldkit/devtools/overlay.js#anonymous~38"));
             const sliderMax = entries.length;
             const targetSliderValue = isPaused
                 ? hostIndexToSliderValue(pausedAtIndex, startIndex)
@@ -502,7 +584,7 @@ const makeUpdate = (store, shadow, mode) => {
                     maybeSubmodelFilter: current => __foldkitBrandViewResult((isFilterStale ? Option.none() : current), "@foldkit/devtools/overlay.js#maybeSubmodelFilter~3"),
                     selectedIndex: current => __foldkitBrandViewResult((shouldFollowSelection ? latestIndex : current), "@foldkit/devtools/overlay.js#selectedIndex~4"),
                     scrubberSlider: current => __foldkitBrandViewResult((Slider.reflectRange(current, { min: 0, max: sliderMax })), "@foldkit/devtools/overlay.js#scrubberSlider~2"),
-                    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"),
+                    scrubberValue: current => __foldkitBrandViewResult((Match.value(model.scrubberSlider.dragState).pipe(Match.tag('Dragging', () => __foldkitBrandViewResult((Slider.snapAndClamp(current, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~39")), Match.orElse(() => __foldkitBrandViewResult((Slider.snapAndClamp(targetSliderValue, 0, sliderMax, 1)), "@foldkit/devtools/overlay.js#anonymous~40")))), "@foldkit/devtools/overlay.js#scrubberValue~2"),
                 }),
                 commands: [
                     ...(shouldFollowSelection ? [inspectLatest] : []),
@@ -513,13 +595,13 @@ const makeUpdate = (store, shadow, mode) => {
         GotSubmodelFilterMessage: ({ message: listboxMessage }) => __foldkitBrandViewResult((foldSubmodelFilter(model, listboxMessage)), "@foldkit/devtools/overlay.js#GotSubmodelFilterMessage"),
         GotScrubberSliderMessage: ({ message: sliderMessage }) => __foldkitBrandViewResult((foldScrubberSlider(model, sliderMessage)), "@foldkit/devtools/overlay.js#GotScrubberSliderMessage"),
         TickedScrubFrame: () => __foldkitBrandViewResult((Option.match(model.maybePendingScrubIndex, {
-            onNone: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#onNone")),
+            onNone: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#onNone~2")),
             onSome: (hostIndex) => (__foldkitBrandViewResult(({
                 model: modifyFields(model, {
                     maybePendingScrubIndex: () => __foldkitBrandViewResult((Option.none()), "@foldkit/devtools/overlay.js#maybePendingScrubIndex~2"),
                 }),
                 commands: [jumpToAndInspect(hostIndex)],
-            }), "@foldkit/devtools/overlay.js#onSome")),
+            }), "@foldkit/devtools/overlay.js#onSome~2")),
         })), "@foldkit/devtools/overlay.js#TickedScrubFrame"),
         CompletedResume: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedResume")),
         CompletedClear: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedClear")),
@@ -527,11 +609,33 @@ const makeUpdate = (store, shadow, mode) => {
         CompletedLockScroll: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedLockScroll")),
         CompletedUnlockScroll: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedUnlockScroll")),
         CompletedScrollToTop: () => (__foldkitBrandViewResult(({ model }), "@foldkit/devtools/overlay.js#CompletedScrollToTop")),
-    })), "@foldkit/devtools/overlay.js#anonymous~27")), "@foldkit/devtools/overlay.js#makeUpdate");
+        SucceededCopyPayloadToClipboard: ({ targetId, requestId }) => __foldkitBrandViewResult((Option.exists(HashMap.get(model.copyStates, targetId), state => __foldkitBrandViewResult((state._tag === 'Copying' && state.requestId === requestId), "@foldkit/devtools/overlay.js#anonymous~41"))
+            ? {
+                model: modifyFields(model, {
+                    copyStates: states => __foldkitBrandViewResult((HashMap.set(states, targetId, CopyState.Copied({ requestId }))), "@foldkit/devtools/overlay.js#copyStates~3"),
+                }),
+                commands: [
+                    WaitBeforeHidingCopyIndicator({ targetId, requestId }),
+                ],
+            }
+            : { model }), "@foldkit/devtools/overlay.js#SucceededCopyPayloadToClipboard"),
+        FailedCopyPayloadToClipboard: ({ targetId, requestId }) => (__foldkitBrandViewResult(({
+            model: Option.exists(HashMap.get(model.copyStates, targetId), state => __foldkitBrandViewResult((state._tag === 'Copying' && state.requestId === requestId), "@foldkit/devtools/overlay.js#anonymous~42"))
+                ? modifyFields(model, { copyStates: HashMap.remove(targetId) })
+                : model,
+        }), "@foldkit/devtools/overlay.js#FailedCopyPayloadToClipboard")),
+        CompletedWaitBeforeHidingCopyIndicator: ({ targetId, requestId }) => (__foldkitBrandViewResult(({
+            model: Option.exists(HashMap.get(model.copyStates, targetId), state => __foldkitBrandViewResult((state._tag === 'Copied' && state.requestId === requestId), "@foldkit/devtools/overlay.js#anonymous~43"))
+                ? modifyFields(model, {
+                    copyStates: HashMap.remove(targetId),
+                })
+                : model,
+        }), "@foldkit/devtools/overlay.js#CompletedWaitBeforeHidingCopyIndicator")),
+    })), "@foldkit/devtools/overlay.js#anonymous~29")), "@foldkit/devtools/overlay.js#makeUpdate");
 };
 // SUBSCRIPTION
 const makeOverlaySubscriptions = (store, shadow) => {
-    const sliderSubscriptions = Slider.subscriptionsForRoot(() => __foldkitBrandViewResult((shadow), "@foldkit/devtools/overlay.js#anonymous~39"));
+    const sliderSubscriptions = Slider.subscriptionsForRoot(() => __foldkitBrandViewResult((shadow), "@foldkit/devtools/overlay.js#anonymous~44"));
     const scrubberSubscriptions = Subscription.lift({
         scrubberPointer: sliderSubscriptions.dragPointer,
         scrubberEscape: sliderSubscriptions.dragEscape,
@@ -540,20 +644,16 @@ const makeOverlaySubscriptions = (store, shadow) => {
         toParentMessage: message => __foldkitBrandViewResult((Message.GotScrubberSliderMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~4"),
     });
     const ownSubscriptions = Subscription.make()(_entry => (__foldkitBrandViewResult(({
-        scrubFrame: Subscription.animationFrame({
+        scrubFrame: Subscription.animationFrameEntry({
             isActive: model => __foldkitBrandViewResult((Option.isSome(model.maybePendingScrubIndex)), "@foldkit/devtools/overlay.js#isActive"),
             toMessage: () => __foldkitBrandViewResult((Message.TickedScrubFrame()), "@foldkit/devtools/overlay.js#toMessage"),
         }),
-        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")))),
-        mobileBreakpoint: Subscription.persistent(Stream.callback(queue => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
-            const mediaQuery = window.matchMedia(MOBILE_BREAKPOINT_QUERY);
-            const handler = (event) => {
-                Queue.offerUnsafe(queue, Message.CrossedMobileBreakpoint({ isMobile: event.matches }));
-            };
-            mediaQuery.addEventListener('change', handler);
-            return __foldkitBrandViewResult(({ mediaQuery, handler }), "@foldkit/devtools/overlay.js#anonymous~44");
-        }), ({ 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"))),
-    }), "@foldkit/devtools/overlay.js#anonymous~40")));
+        storeUpdates: Subscription.persistentEntry(SubscriptionRef.changes(store.stateRef).pipe(Stream.map(state => __foldkitBrandViewResult((Message.ReceivedStoreUpdate(toDisplayState(state))), "@foldkit/devtools/overlay.js#anonymous~46")))),
+        mobileBreakpoint: Subscription.persistentEntry(Dom.streamFromMediaQuery({
+            query: MOBILE_BREAKPOINT_QUERY,
+            mapMatches: isMobile => __foldkitBrandViewResult((Message.ObservedMobileBreakpoint({ isMobile })), "@foldkit/devtools/overlay.js#mapMatches"),
+        })),
+    }), "@foldkit/devtools/overlay.js#anonymous~45")));
     return __foldkitBrandViewResult((Subscription.aggregate(ownSubscriptions, scrubberSubscriptions)), "@foldkit/devtools/overlay.js#makeOverlaySubscriptions");
 };
 // VIEW
@@ -587,7 +687,7 @@ const makeView = (position, mode, shadow, maybeBanner) => {
     let viewWithBuilder;
     return __foldkitBrandViewResult(((model, h) => {
         viewWithBuilder ??= buildOverlayView(position, mode, shadow, maybeBanner, h);
-        return __foldkitBrandViewResult((viewWithBuilder(model)), "@foldkit/devtools/overlay.js#anonymous~48");
+        return __foldkitBrandViewResult((viewWithBuilder(model)), "@foldkit/devtools/overlay.js#anonymous~47");
     }), "@foldkit/devtools/overlay.js#makeView");
 };
 const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
@@ -597,10 +697,12 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     const lazyMessageList = createLazy();
     // JSON TREE
     const leafSpan = (className, text) => __foldkitBrandViewResult((h.span([h.Class(className)], [text])), "@foldkit/devtools/overlay.js#leafSpan");
-    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");
+    const leafValueView = (value) => __foldkitBrandViewResult((Match.value(value).pipe(Match.when(Predicate.isNull, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'null')), "@foldkit/devtools/overlay.js#anonymous~48")), Match.when(Predicate.isUndefined, () => __foldkitBrandViewResult((leafSpan('json-null italic', 'undefined')), "@foldkit/devtools/overlay.js#anonymous~49")), Match.when(Predicate.isString, stringValue => __foldkitBrandViewResult((leafSpan('json-string', `"${stringValue}"`)), "@foldkit/devtools/overlay.js#anonymous~50")), Match.when(Predicate.isNumber, numberValue => __foldkitBrandViewResult((leafSpan('json-number', globalThis.String(numberValue))), "@foldkit/devtools/overlay.js#anonymous~51")), Match.when(Predicate.isBoolean, booleanValue => __foldkitBrandViewResult((leafSpan('json-boolean', globalThis.String(booleanValue))), "@foldkit/devtools/overlay.js#anonymous~52")), Match.orElse(unknownValue => __foldkitBrandViewResult((leafSpan('json-null', globalThis.String(unknownValue))), "@foldkit/devtools/overlay.js#anonymous~53")))), "@foldkit/devtools/overlay.js#leafValueView");
     const keyView = (key) => __foldkitBrandViewResult((h.span([h.Class('json-key')], [`${key}:\u00a0`])), "@foldkit/devtools/overlay.js#keyView");
     const CHEVRON_RIGHT = 'M8.25 4.5l7.5 7.5-7.5 7.5';
     const CHEVRON_DOWN = 'M19.5 8.25l-7.5 7.5-7.5-7.5';
+    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';
+    const COPY_SUCCESS_ICON = 'M4.5 12.75l6 6 9-13.5';
     const arrowView = (isExpanded) => __foldkitBrandViewResult((h.svg([
         h.AriaHidden(true),
         h.Class('json-arrow shrink-0'),
@@ -617,6 +719,47 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         ]),
     ])), "@foldkit/devtools/overlay.js#arrowView");
     const tagLabelView = (tag) => __foldkitBrandViewResult((h.span([h.Class('json-tag')], [tag])), "@foldkit/devtools/overlay.js#tagLabelView");
+    const copyPayloadButtonView = (payload, targetId, copyStates, subject) => {
+        const maybeCopyState = HashMap.get(copyStates, targetId);
+        const isCopying = Option.exists(maybeCopyState, state => __foldkitBrandViewResult((state._tag === 'Copying'), "@foldkit/devtools/overlay.js#anonymous~54"));
+        const isCopied = Option.exists(maybeCopyState, state => __foldkitBrandViewResult((state._tag === 'Copied'), "@foldkit/devtools/overlay.js#anonymous~55"));
+        const ariaLabel = Option.match(maybeCopyState, {
+            onNone: () => __foldkitBrandViewResult((`Copy ${subject} as JSON`), "@foldkit/devtools/overlay.js#onNone~3"),
+            onSome: CopyState.match({
+                Copying: () => __foldkitBrandViewResult((`Copying ${subject} as JSON`), "@foldkit/devtools/overlay.js#Copying"),
+                Copied: () => __foldkitBrandViewResult((`Copied ${subject} as JSON`), "@foldkit/devtools/overlay.js#Copied"),
+            }),
+        });
+        return __foldkitBrandViewResult((h.span([h.Class('dt-copy-control shrink-0')], [
+            h.button([
+                h.Class(clsx('dt-copy-button', isCopied && 'dt-copy-success')),
+                h.Type('button'),
+                h.AriaLabel(ariaLabel),
+                h.AriaDisabled(isCopying || isCopied),
+                h.Title(isCopied ? 'Copied' : 'Copy as JSON'),
+                ...(Option.isNone(maybeCopyState)
+                    ? [h.OnClick(Message.ClickedCopyPayload({ targetId, payload }))]
+                    : []),
+            ], [
+                h.svg([
+                    h.AriaHidden(true),
+                    h.Class('dt-copy-icon'),
+                    h.Xmlns('http://www.w3.org/2000/svg'),
+                    h.Fill('none'),
+                    h.ViewBox('0 0 24 24'),
+                    h.StrokeWidth(isCopied ? '2' : '1.5'),
+                    h.Stroke('currentColor'),
+                ], [
+                    h.path([
+                        h.StrokeLinecap('round'),
+                        h.StrokeLinejoin('round'),
+                        h.D(isCopied ? COPY_SUCCESS_ICON : COPY_ICON),
+                    ]),
+                ]),
+            ]),
+            h.span([h.Role('status'), h.AriaLive('polite'), h.Class('sr-only')], [isCopied ? 'Copied to clipboard' : '']),
+        ])), "@foldkit/devtools/overlay.js#copyPayloadButtonView");
+    };
     const previewView = (preview) => __foldkitBrandViewResult((h.span([h.Class('json-preview')], [preview])), "@foldkit/devtools/overlay.js#previewView");
     const diffDotView = h.span([h.Class('diff-dot')]);
     const inlineDiffDotView = h.span([h.Class('diff-dot-inline')]);
@@ -665,16 +808,16 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 treePath: `${treePath}.${arrayIndex}`,
                 depth: childDepth,
                 key: globalThis.String(arrayIndex),
-            })), "@foldkit/devtools/overlay.js#anonymous~55"));
+            })), "@foldkit/devtools/overlay.js#anonymous~56"));
         }
         else if (Predicate.isObject(value)) {
-            pipe(value, Record.toEntries, Array.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~56")), Array.forEach(([entryKey, childValue]) => __foldkitBrandViewResult((flattenTree({
+            pipe(value, Record.toEntries, Array.filter(([entryKey]) => __foldkitBrandViewResult((entryKey !== '_tag'), "@foldkit/devtools/overlay.js#anonymous~57")), Array.forEach(([entryKey, childValue]) => __foldkitBrandViewResult((flattenTree({
                 ...shared,
                 value: childValue,
                 treePath: `${treePath}.${entryKey}`,
                 depth: childDepth,
                 key: entryKey,
-            })), "@foldkit/devtools/overlay.js#anonymous~57")));
+            })), "@foldkit/devtools/overlay.js#anonymous~58")));
         }
     };
     const flatNodeView = (value, treePath, depth, key, nodeIsExpandable, isExpanded, isChanged, isAffected, isRoot, tag) => {
@@ -694,7 +837,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                     'diff-changed': isChanged,
                 })),
                 indent,
-            ], 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");
+            ], 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");
         }
         const preview = isExpanded
             ? globalThis.Array.isArray(value)
@@ -718,7 +861,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             ...(isRoot
                 ? []
                 : [h.OnClick(Message.ToggledTreeNode({ path: treePath }))]),
-        ], 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");
+        ], rowSegments.map(segment => __foldkitBrandViewResult((h.keyed('li')(segment._tag, [h.Class('contents')], [rowSegmentView(segment)])), "@foldkit/devtools/overlay.js#anonymous~60")))), "@foldkit/devtools/overlay.js#flatNodeView");
     };
     const renderFlatNode = (node) => __foldkitBrandViewResult((lazyTreeNode(node.treePath, flatNodeView, [
         node.value,
@@ -742,7 +885,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             changedPaths,
             affectedPaths,
             depth: 0,
-            key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~60")),
+            key: Option.getOrElse(maybeRootLabel, () => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~61")),
             accumulator: nodes,
             indentRootChildren,
         });
@@ -756,8 +899,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             return __foldkitBrandViewResult(('0ms'), "@foldkit/devtools/overlay.js#inspectedTimestamp");
         }
         const baseTimestamp = pipe(model.entries, Array.head, Option.match({
-            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~2"),
-            onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~2"),
+            onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~4"),
+            onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~3"),
         }));
         return __foldkitBrandViewResult((pipe(Array.get(model.entries, selectedIndex - model.startIndex), Option.map(entry => {
             const delta = entry.timestamp - baseTimestamp;
@@ -765,8 +908,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             const remainingMs = delta % MILLIS_PER_SECOND;
             return __foldkitBrandViewResult((seconds > 0
                 ? `+${seconds}s ${remainingMs.toFixed(1)}ms`
-                : `+${remainingMs.toFixed(1)}ms`), "@foldkit/devtools/overlay.js#anonymous~61");
-        }), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~62")))), "@foldkit/devtools/overlay.js#inspectedTimestamp");
+                : `+${remainingMs.toFixed(1)}ms`), "@foldkit/devtools/overlay.js#anonymous~62");
+        }), Option.getOrElse(() => __foldkitBrandViewResult((''), "@foldkit/devtools/overlay.js#anonymous~63")))), "@foldkit/devtools/overlay.js#inspectedTimestamp");
     };
     const emptyInspectorView = h.div([
         h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
@@ -774,7 +917,16 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     const noMessageView = () => __foldkitBrandViewResult((h.div([
         h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
     ], ['init: no Message'])), "@foldkit/devtools/overlay.js#noMessageView");
-    const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths) => __foldkitBrandViewResult((treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true)), "@foldkit/devtools/overlay.js#modelTabContent");
+    const payloadHeaderView = (label, payload, targetId, copyStates) => __foldkitBrandViewResult((h.div([
+        h.Class('flex items-center justify-between px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
+    ], [
+        h.span([], [label]),
+        copyPayloadButtonView(payload, targetId, copyStates, `${label} payload`),
+    ])), "@foldkit/devtools/overlay.js#payloadHeaderView");
+    const modelTabContent = (inspectedModel, expandedPaths, changedPaths, affectedPaths, selectedIndex, copyStates) => __foldkitBrandViewResult((h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
+        payloadHeaderView('Model', inspectedModel, `Model:${selectedIndex}`, copyStates),
+        treeView(inspectedModel, 'root', expandedPaths, changedPaths, affectedPaths, Option.none(), true),
+    ])), "@foldkit/devtools/overlay.js#modelTabContent");
     const unwrapToLeaf = (message) => {
         if (isTagged(message) &&
             GOT_MESSAGE_PATTERN.test(message._tag) &&
@@ -809,7 +961,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         }
         return __foldkitBrandViewResult((current), "@foldkit/devtools/overlay.js#unwrapIfFiltered");
     };
-    const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, isFlattened, expandedPaths, timestamp) => __foldkitBrandViewResult((Option.match(maybeInspectedMessage, {
+    const messageTabContent = (maybeInspectedMessage, maybeSubmodelFilter, isFlattened, expandedPaths, timestamp, selectedIndex, copyStates) => __foldkitBrandViewResult((Option.match(maybeInspectedMessage, {
         onNone: noMessageView,
         onSome: rawMessage => {
             const message = isFlattened
@@ -817,12 +969,15 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 : unwrapIfFiltered(rawMessage, maybeSubmodelFilter);
             return __foldkitBrandViewResult((h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0')], [
                 h.div([
-                    h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
-                ], [timestamp]),
+                    h.Class('flex items-center justify-between px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
+                ], [
+                    h.span([], [timestamp]),
+                    copyPayloadButtonView(message, `Message:${selectedIndex}:${isFlattened}:${Option.getOrElse(maybeSubmodelFilter, () => __foldkitBrandViewResult(('All'), "@foldkit/devtools/overlay.js#anonymous~64"))}`, copyStates, 'Message payload'),
+                ]),
                 h.div([h.Class('flex flex-col flex-1 min-h-0 min-w-0 pt-1 pl-1')], [
                     treeView(message, 'root', expandedPaths, HashSet.empty(), HashSet.empty(), Option.none(), false),
                 ]),
-            ])), "@foldkit/devtools/overlay.js#onSome~3");
+            ])), "@foldkit/devtools/overlay.js#onSome~4");
         },
     })), "@foldkit/devtools/overlay.js#messageTabContent");
     const selectedHistoryIndex = (model) => {
@@ -830,7 +985,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             onEmpty: () => __foldkitBrandViewResult((INIT_INDEX), "@foldkit/devtools/overlay.js#onEmpty~4"),
             onNonEmpty: () => __foldkitBrandViewResult((model.startIndex + model.entries.length - 1), "@foldkit/devtools/overlay.js#onNonEmpty~4"),
         });
-        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");
+        return __foldkitBrandViewResult((Match.value(mode).pipe(Match.when('TimeTravel', () => __foldkitBrandViewResult((model.isPaused ? model.pausedAtIndex : lastIndex), "@foldkit/devtools/overlay.js#anonymous~65")), Match.when('Inspect', () => __foldkitBrandViewResult((model.selectedIndex), "@foldkit/devtools/overlay.js#anonymous~66")), Match.exhaustive)), "@foldkit/devtools/overlay.js#selectedHistoryIndex");
     };
     const selectedCommands = (model) => {
         const selectedIndex = selectedHistoryIndex(model);
@@ -838,14 +993,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             return __foldkitBrandViewResult((model.initCommands), "@foldkit/devtools/overlay.js#selectedCommands");
         }
         else {
-            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");
+            return __foldkitBrandViewResult((pipe(model.entries, Array.get(selectedIndex - model.startIndex), Option.map(entry => __foldkitBrandViewResult((entry.commands), "@foldkit/devtools/overlay.js#anonymous~67")), Option.getOrElse(() => __foldkitBrandViewResult((NO_COMMANDS), "@foldkit/devtools/overlay.js#anonymous~68")))), "@foldkit/devtools/overlay.js#selectedCommands");
         }
     };
     const flattenCommand = (command, index, expandedPaths) => {
-        const taggedValue = Option.match(command.args, {
-            onNone: () => (__foldkitBrandViewResult(({ _tag: command.name }), "@foldkit/devtools/overlay.js#onNone~3")),
-            onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: command.name }), "@foldkit/devtools/overlay.js#onSome~4")),
-        });
+        const taggedValue = taggedPayload(command.name, command.args);
         const rootPath = `command-${index}`;
         const nodes = [];
         flattenTree({
@@ -862,12 +1014,12 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         });
         return __foldkitBrandViewResult((nodes), "@foldkit/devtools/overlay.js#flattenCommand");
     };
-    const commandsTabContent = (commands, expandedPaths) => __foldkitBrandViewResult((Array.match(commands, {
+    const commandsTabContent = (commands, expandedPaths, selectedIndex, copyStates) => __foldkitBrandViewResult((Array.match(commands, {
         onEmpty: () => __foldkitBrandViewResult((h.div([
             h.Class('flex-1 flex items-center justify-center text-dt-muted text-2xs font-mono min-w-0'),
         ], ['No Commands returned'])), "@foldkit/devtools/overlay.js#onEmpty~5"),
         onNonEmpty: commandList => __foldkitBrandViewResult((h.div([
-            h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
+            h.Class('dt-payload-list flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
         ], Array.map(commandList, (command, index) => __foldkitBrandViewResult((h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
             h.span([h.Class(indexClass)], [globalThis.String(index + 1)]),
             h.div([h.Class('flex flex-col flex-1 min-w-0')], [
@@ -877,7 +1029,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                             h.span([h.AriaHidden(true)], ['…']),
                             h.span([h.Class('sr-only')], ['Destination pending']),
                         ]),
-                    ]), "@foldkit/devtools/overlay.js#onNone~4"),
+                    ]), "@foldkit/devtools/overlay.js#onNone~5"),
                     onSome: submodelPath => __foldkitBrandViewResult((Array.match(submodelPath, {
                         onEmpty: () => __foldkitBrandViewResult(([]), "@foldkit/devtools/overlay.js#onEmpty~6"),
                         onNonEmpty: submodelPath => __foldkitBrandViewResult(([
@@ -889,7 +1041,8 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 }),
                 ...Array.map(flattenCommand(command, index, expandedPaths), renderFlatNode),
             ]),
-        ])), "@foldkit/devtools/overlay.js#anonymous~67")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
+            copyPayloadButtonView(taggedPayload(command.name, command.args), `Command:${selectedIndex}:${index}`, copyStates, `Command ${index + 1} (${command.name}) payload`),
+        ])), "@foldkit/devtools/overlay.js#anonymous~69")))), "@foldkit/devtools/overlay.js#onNonEmpty~5"),
     })), "@foldkit/devtools/overlay.js#commandsTabContent");
     const selectedMountActivity = (model) => {
         const selectedIndex = selectedHistoryIndex(model);
@@ -898,7 +1051,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         }
         else {
             return __foldkitBrandViewResult((pipe(model.entries, Array.get(selectedIndex - model.startIndex), Option.match({
-                onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~5")),
+                onNone: () => (__foldkitBrandViewResult(({ starts: NO_MOUNTS, ends: NO_MOUNTS }), "@foldkit/devtools/overlay.js#onNone~6")),
                 onSome: entry => (__foldkitBrandViewResult(({
                     starts: entry.mountStarts,
                     ends: entry.mountEnds,
@@ -907,10 +1060,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         }
     };
     const flattenMount = (mount, sectionLabel, index, expandedPaths) => {
-        const taggedValue = Option.match(mount.args, {
-            onNone: () => (__foldkitBrandViewResult(({ _tag: mount.name }), "@foldkit/devtools/overlay.js#onNone~6")),
-            onSome: argsValue => (__foldkitBrandViewResult(({ ...argsValue, _tag: mount.name }), "@foldkit/devtools/overlay.js#onSome~7")),
-        });
+        const taggedValue = taggedPayload(mount.name, mount.args);
         const rootPath = `mount-${sectionLabel}-${index}`;
         const nodes = [];
         flattenTree({
@@ -927,16 +1077,17 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         });
         return __foldkitBrandViewResult((nodes), "@foldkit/devtools/overlay.js#flattenMount");
     };
-    const mountListSection = (label, mounts, expandedPaths) => __foldkitBrandViewResult((h.div([h.Class('flex flex-col shrink-0')], [
+    const mountListSection = (label, mounts, expandedPaths, selectedIndex, copyStates) => __foldkitBrandViewResult((h.div([h.Class('flex flex-col shrink-0')], [
         h.div([
             h.Class('px-2 py-1 border-b text-2xs text-dt-muted font-mono shrink-0'),
         ], [label]),
         ...Array.map(mounts, (mount, index) => __foldkitBrandViewResult((h.div([h.Class('flex items-start px-2 py-1 border-b gap-1.5')], [
             h.span([h.Class(indexClass)], [globalThis.String(index + 1)]),
             h.div([h.Class('flex flex-col flex-1 min-w-0')], Array.map(flattenMount(mount, label, index, expandedPaths), renderFlatNode)),
-        ])), "@foldkit/devtools/overlay.js#anonymous~68")),
+            copyPayloadButtonView(taggedPayload(mount.name, mount.args), `Mount:${selectedIndex}:${label}:${index}`, copyStates, `${label} Mount ${index + 1} (${mount.name}) payload`),
+        ])), "@foldkit/devtools/overlay.js#anonymous~70")),
     ])), "@foldkit/devtools/overlay.js#mountListSection");
-    const mountsTabContent = (starts, ends, expandedPaths) => {
+    const mountsTabContent = (starts, ends, expandedPaths, selectedIndex, copyStates) => {
         const hasAny = Array.isReadonlyArrayNonEmpty(starts) ||
             Array.isReadonlyArrayNonEmpty(ends);
         if (!hasAny) {
@@ -945,38 +1096,53 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             ], ['No Mounts during this render'])), "@foldkit/devtools/overlay.js#mountsTabContent");
         }
         return __foldkitBrandViewResult((h.div([
-            h.Class('flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
+            h.Class('dt-payload-list flex flex-col flex-1 min-h-0 min-w-0 overflow-auto overscroll-none'),
         ], [
             ...(Array.isReadonlyArrayNonEmpty(starts)
-                ? [mountListSection('Started', starts, expandedPaths)]
+                ? [
+                    mountListSection('Started', starts, expandedPaths, selectedIndex, copyStates),
+                ]
                 : []),
             ...(Array.isReadonlyArrayNonEmpty(ends)
-                ? [mountListSection('Ended', ends, expandedPaths)]
+                ? [
+                    mountListSection('Ended', ends, expandedPaths, selectedIndex, copyStates),
+                ]
                 : []),
         ])), "@foldkit/devtools/overlay.js#mountsTabContent");
     };
-    const inspectorTabContent = (model, tab, inspectedModel) => __foldkitBrandViewResult((Match.value(tab).pipe(Match.when('Model', () => __foldkitBrandViewResult((lazyTabContent('Model', modelTabContent, [
-        inspectedModel,
-        model.expandedPaths,
-        model.changedPaths,
-        model.affectedPaths,
-    ])), "@foldkit/devtools/overlay.js#anonymous~69")), Match.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
-        model.maybeInspectedMessage,
-        model.maybeSubmodelFilter,
-        model.isFlattened,
-        model.expandedPaths,
-        inspectedTimestamp(model),
-    ])), "@foldkit/devtools/overlay.js#anonymous~70")), Match.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
-        selectedCommands(model),
-        model.expandedPaths,
-    ])), "@foldkit/devtools/overlay.js#anonymous~71")), Match.when('Mounts', () => {
-        const { starts, ends } = selectedMountActivity(model);
-        return __foldkitBrandViewResult((lazyTabContent('Mounts', mountsTabContent, [
-            starts,
-            ends,
+    const inspectorTabContent = (model, tab, inspectedModel) => {
+        const selectedIndex = selectedHistoryIndex(model);
+        return __foldkitBrandViewResult((Match.value(tab).pipe(Match.when('Model', () => __foldkitBrandViewResult((lazyTabContent('Model', modelTabContent, [
+            inspectedModel,
             model.expandedPaths,
-        ])), "@foldkit/devtools/overlay.js#anonymous~72");
-    }), Match.exhaustive)), "@foldkit/devtools/overlay.js#inspectorTabContent");
+            model.changedPaths,
+            model.affectedPaths,
+            selectedIndex,
+            model.copyStates,
+        ])), "@foldkit/devtools/overlay.js#anonymous~71")), Match.when('Message', () => __foldkitBrandViewResult((lazyTabContent('Message', messageTabContent, [
+            model.maybeInspectedMessage,
+            model.maybeSubmodelFilter,
+            model.isFlattened,
+            model.expandedPaths,
+            inspectedTimestamp(model),
+            selectedIndex,
+            model.copyStates,
+        ])), "@foldkit/devtools/overlay.js#anonymous~72")), Match.when('Commands', () => __foldkitBrandViewResult((lazyTabContent('Commands', commandsTabContent, [
+            selectedCommands(model),
+            model.expandedPaths,
+            selectedIndex,
+            model.copyStates,
+        ])), "@foldkit/devtools/overlay.js#anonymous~73")), Match.when('Mounts', () => {
+            const { starts, ends } = selectedMountActivity(model);
+            return __foldkitBrandViewResult((lazyTabContent('Mounts', mountsTabContent, [
+                starts,
+                ends,
+                model.expandedPaths,
+                selectedIndex,
+                model.copyStates,
+            ])), "@foldkit/devtools/overlay.js#anonymous~74");
+        }), Match.exhaustive)), "@foldkit/devtools/overlay.js#inspectorTabContent");
+    };
     const inspectorPaneView = (model) => __foldkitBrandViewResult((h.div([
         h.Class('flex flex-col border-l min-w-0 min-h-0 flex-1 dt-inspector-pane'),
     ], [
@@ -995,7 +1161,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                         h.Class(clsx('dt-tab-button cursor-pointer text-base font-mono px-3 py-1', tab.isActive
                             ? 'text-dt dt-tab-active'
                             : 'text-dt-muted')),
-                    ], [h.span([], [tab.value])])), "@foldkit/devtools/overlay.js#anonymous~73"))),
+                    ], [h.span([], [tab.value])])), "@foldkit/devtools/overlay.js#anonymous~75"))),
                     ...tabs.map(tab => __foldkitBrandViewResult((h.div([
                         ...tab.panel,
                         h.Class('flex flex-col flex-1 min-h-0 min-w-0'),
@@ -1006,9 +1172,9 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                     ], [
                         Option.match(model.maybeInspectedModel, {
                             onNone: () => __foldkitBrandViewResult((emptyInspectorView), "@foldkit/devtools/overlay.js#onNone~7"),
-                            onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~8"),
+                            onSome: inspectedModel => __foldkitBrandViewResult((inspectorTabContent(model, tab.value, inspectedModel)), "@foldkit/devtools/overlay.js#onSome~7"),
                         }),
-                    ])), "@foldkit/devtools/overlay.js#anonymous~74")),
+                    ])), "@foldkit/devtools/overlay.js#anonymous~76")),
                 ])), "@foldkit/devtools/overlay.js#toView"),
             },
             toParentMessage: message => __foldkitBrandViewResult((Message.GotInspectorTabsMessage({ message })), "@foldkit/devtools/overlay.js#toParentMessage~5"),
@@ -1092,7 +1258,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             view: SubmodelFilterListbox.view,
             viewInputs: {
                 items: [ALL_MESSAGES_VALUE, ...model.submodelTags],
-                maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~75")),
+                maybeSelectedValue: Option.orElseSome(model.maybeSubmodelFilter, () => __foldkitBrandViewResult((ALL_MESSAGES_VALUE), "@foldkit/devtools/overlay.js#anonymous~77")),
                 itemToConfig: item => (__foldkitBrandViewResult(({
                     className: 'dt-filter-item',
                     content: h.div([h.Class('flex items-center gap-2')], [checkIconView, h.span([], [filterItemLabel(item)])]),
@@ -1162,7 +1328,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             : {
                 status: h.span([h.Class(`${statusClass} text-dt-live font-medium`)], ['Live']),
                 maybeAction: Option.none(),
-            }), "@foldkit/devtools/overlay.js#anonymous~76")), Match.when('Inspect', () => (__foldkitBrandViewResult(({
+            }), "@foldkit/devtools/overlay.js#anonymous~78")), Match.when('Inspect', () => (__foldkitBrandViewResult(({
             status: h.span([h.Class(`${statusClass} text-dt-accent`)], [
                 model.selectedIndex === INIT_INDEX
                     ? 'Inspecting (init)'
@@ -1172,7 +1338,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 h.Class(actionButtonClass),
                 h.OnClick(Message.ClickedFollowLatest()),
             ], ['Follow Latest →'])),
-        }), "@foldkit/devtools/overlay.js#anonymous~77"))), Match.exhaustive);
+        }), "@foldkit/devtools/overlay.js#anonymous~79"))), Match.exhaustive);
         const maybeClearHistoryButton = OptionExt.when(!model.isPaused, clearHistoryButton());
         return __foldkitBrandViewResult((h.header([h.Class(headerClass)], [
             status,
@@ -1219,11 +1385,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
     const messageListBody = (entries, startIndex, selectedIndex, isPaused, pausedAtIndex, maybeFilterTag, isFlattened) => {
         const baseTimestamp = pipe(entries, Array.head, Option.match({
             onNone: () => __foldkitBrandViewResult((0), "@foldkit/devtools/overlay.js#onNone~9"),
-            onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~9"),
+            onSome: ({ timestamp }) => __foldkitBrandViewResult((timestamp), "@foldkit/devtools/overlay.js#onSome~8"),
         }));
         const isInitSelected = selectedIndex === INIT_INDEX;
         const isFiltered = Option.isSome(maybeFilterTag);
-        const leafOrTag = (entry) => __foldkitBrandViewResult((Option.getOrElse(entry.maybeLeafTag, () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~78"))), "@foldkit/devtools/overlay.js#leafOrTag");
+        const leafOrTag = (entry) => __foldkitBrandViewResult((Option.getOrElse(entry.maybeLeafTag, () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~80"))), "@foldkit/devtools/overlay.js#leafOrTag");
         const displayTagFor = (entry) => {
             if (isFlattened) {
                 return __foldkitBrandViewResult((leafOrTag(entry)), "@foldkit/devtools/overlay.js#displayTagFor");
@@ -1231,15 +1397,15 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             else {
                 return __foldkitBrandViewResult((Option.match(maybeFilterTag, {
                     onNone: () => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#onNone~10"),
-                    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"),
+                    onSome: filterTag => __foldkitBrandViewResult((pipe(entry.submodelPath, Array.findFirstIndex(pathTag => __foldkitBrandViewResult((pathTag === filterTag), "@foldkit/devtools/overlay.js#anonymous~81")), Option.flatMap(filterIndex => __foldkitBrandViewResult((Array.get(entry.submodelPath, Number.increment(filterIndex))), "@foldkit/devtools/overlay.js#anonymous~82")), Option.orElse(() => __foldkitBrandViewResult((entry.maybeLeafTag), "@foldkit/devtools/overlay.js#anonymous~83")), Option.getOrElse(() => __foldkitBrandViewResult((entry.tag), "@foldkit/devtools/overlay.js#anonymous~84")))), "@foldkit/devtools/overlay.js#onSome~9"),
                 })), "@foldkit/devtools/overlay.js#displayTagFor");
             }
         };
         const indexedEntries = pipe(entries, Array.map((entry, arrayIndex) => (__foldkitBrandViewResult(({
             entry,
             absoluteIndex: startIndex + arrayIndex,
-        }), "@foldkit/devtools/overlay.js#anonymous~83"))), isFiltered
-            ? Array.filter(({ entry }) => __foldkitBrandViewResult((Array.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~84"))
+        }), "@foldkit/devtools/overlay.js#anonymous~85"))), isFiltered
+            ? Array.filter(({ entry }) => __foldkitBrandViewResult((Array.contains(entry.submodelPath, maybeFilterTag.value)), "@foldkit/devtools/overlay.js#anonymous~86"))
             : Function.identity);
         const messageRows = pipe(indexedEntries, Array.map(({ entry, absoluteIndex }) => {
             const isSelected = selectedIndex === absoluteIndex;
@@ -1252,11 +1418,11 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
                 isPausedHere,
                 entry.timestamp - baseTimestamp,
                 entry.isModelChanged,
-            ])), "@foldkit/devtools/overlay.js#anonymous~85");
+            ])), "@foldkit/devtools/overlay.js#anonymous~87");
         }), Array.reverse);
         return __foldkitBrandViewResult((h.ul([
             h.Class('message-list flex-1 overflow-y-auto min-h-0 overscroll-none'),
-            h.OnScroll(scrollTop => __foldkitBrandViewResult((Message.ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~86")),
+            h.OnScroll(scrollTop => __foldkitBrandViewResult((Message.ScrolledMessageList({ scrollTop })), "@foldkit/devtools/overlay.js#anonymous~88")),
         ], isFiltered
             ? messageRows
             : [
@@ -1384,13 +1550,13 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
             inspectorPaneView(model),
         ])), "@foldkit/devtools/overlay.js#messagesScreenView");
     };
-    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");
+    const contentView = (model) => __foldkitBrandViewResult((Match.value(model.screen).pipe(Match.withReturnType(), Match.when('Messages', () => __foldkitBrandViewResult((messagesScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~89")), Match.when('Settings', () => __foldkitBrandViewResult((settingsScreenView(model)), "@foldkit/devtools/overlay.js#anonymous~90")), Match.exhaustive)), "@foldkit/devtools/overlay.js#contentView");
     const panelView = (model) => __foldkitBrandViewResult((h.div([
         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])),
     ], [
         ...Option.map(maybeBanner, banner => __foldkitBrandViewResult((h.div([
             h.Class('px-3 py-2 border-b text-sm text-dt-muted font-mono shrink-0 leading-snug'),
-        ], [banner])), "@foldkit/devtools/overlay.js#anonymous~89")).pipe(Option.toArray),
+        ], [banner])), "@foldkit/devtools/overlay.js#anonymous~91")).pipe(Option.toArray),
         headerView(model),
         contentView(model),
         footerView(model),
@@ -1400,7 +1566,7 @@ const buildOverlayView = (position, mode, shadow, maybeBanner, h) => {
         ...OptionExt.when(model.isPaused && mode === 'TimeTravel', interactionBlocker()).pipe(Option.toArray),
         ...OptionExt.when(model.isOpen, panelView(model)).pipe(Option.toArray),
         badgeView(model),
-    ])), "@foldkit/devtools/overlay.js#anonymous~90")), "@foldkit/devtools/overlay.js#buildOverlayView");
+    ])), "@foldkit/devtools/overlay.js#anonymous~92")), "@foldkit/devtools/overlay.js#buildOverlayView");
 };
 // CREATE
 const VIEW_TRANSITION_NAME = 'foldkit-devtools';
@@ -1481,10 +1647,10 @@ const createShadowContainer = () => {
     return __foldkitBrandViewResult(({ container, shadow }), "@foldkit/devtools/overlay.js#createShadowContainer");
 };
 export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBrandViewResult((Effect.gen(function* () {
-    const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~93")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
+    const { container, shadow } = yield* Effect.acquireRelease(Effect.sync(() => __foldkitBrandViewResult((createShadowContainer()), "@foldkit/devtools/overlay.js#anonymous~95")), createdShadowContainer => __foldkitBrandViewResult((Effect.sync(() => {
         createdShadowContainer.shadow.host.remove();
         document.getElementById(VIEW_TRANSITION_STYLE_ID)?.remove();
-    })), "@foldkit/devtools/overlay.js#anonymous~94"));
+    })), "@foldkit/devtools/overlay.js#anonymous~96"));
     container.id = '__foldkit_devtools_overlay__';
     const flags = Effect.gen(function* () {
         const storeState = yield* SubscriptionRef.get(store.stateRef);
@@ -1494,7 +1660,7 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
             isMobile: window.matchMedia(MOBILE_BREAKPOINT_QUERY).matches,
             isFlattened,
             ...toDisplayState(storeState),
-        }), "@foldkit/devtools/overlay.js#anonymous~96");
+        }), "@foldkit/devtools/overlay.js#anonymous~98");
     });
     const init = (flags) => {
         const { isFlattened, ...displayFlags } = flags;
@@ -1520,6 +1686,8 @@ export const createOverlay = (store, position, mode, maybeBanner) => __foldkitBr
                 expandedPaths: HashSet.empty(),
                 changedPaths: HashSet.empty(),
                 affectedPaths: HashSet.empty(),
+                copyStates: HashMap.empty(),
+                nextCopyRequestId: 0,
                 maybePendingScrubIndex: Option.none(),
                 inspectorTabs: Tabs.init({ id: INSPECTOR_TABS_ID }),
                 activeInspectorTab: 'Model',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/devtools",
-  "version": "0.166.0-canary.7590156835c8",
+  "version": "0.166.0-canary.8f886595a029",
   "description": "In-browser DevTools overlay for Foldkit applications",
   "type": "module",
   "exports": {
@@ -15,23 +15,23 @@
   ],
   "peerDependencies": {
     "@effect/platform-browser": "4.0.0",
-    "@foldkit/ui": "0.166.0-canary.7590156835c8",
+    "@foldkit/ui": "0.166.0-canary.8f886595a029",
     "effect": "4.0.0",
-    "foldkit": "0.166.0-canary.7590156835c8"
+    "foldkit": "0.166.0-canary.8f886595a029"
   },
   "dependencies": {
     "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@effect/platform-browser": "4.0.0",
+    "@foldkit/ui": "0.166.0-canary.8f886595a029",
+    "@foldkit/vite-plugin": "0.26.1-canary.8f886595a029",
     "effect": "4.0.0",
+    "foldkit": "0.166.0-canary.8f886595a029",
     "happy-dom": "^20.14.5",
     "rimraf": "^6.1.3",
     "typescript": "^7.0.2",
-    "vitest": "^4.1.11",
-    "@foldkit/vite-plugin": "0.26.1-canary.7590156835c8",
-    "foldkit": "0.166.0-canary.7590156835c8",
-    "@foldkit/ui": "0.166.0-canary.7590156835c8"
+    "vitest": "^4.1.11"
   },
   "keywords": [
     "foldkit",