jev-devtools 0.1.2 → 0.2.0

package/lib/src/inspector-styles.js

@@ -0,0 +1 @@
+export const inspectorStyles = ".jev-devtools {\n  all: initial;\n  display: block;\n  direction: ltr;\n  unicode-bidi: isolate;\n  pointer-events: auto;\n  color-scheme: dark;\n  font:\n    12px system-ui,\n    sans-serif;\n  color: #eee8ed;\n  line-height: 1.5;\n}\n.jev-devtools,\n.jev-devtools * {\n  box-sizing: border-box;\n}\n.jev-devtools button,\n.jev-devtools input,\n.jev-devtools select,\n.jev-devtools textarea {\n  font: inherit;\n  color: inherit;\n  border: 1px solid #3b303d;\n  border-radius: 5px;\n  background: #17121b;\n}\n.jev-devtools button {\n  padding: 7px 11px;\n  cursor: pointer;\n}\n.jev-devtools button:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.jev-devtools input,\n.jev-devtools select {\n  padding: 8px;\n  width: 100%;\n}\n.jev-devtools button:hover:not(:disabled) {\n  border-color: #e551ba;\n}\n.jev-devtools :is(button, input, select, textarea, summary):focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: 3px;\n}\n.jev-devtools .eyebrow {\n  font-size: 10px;\n  letter-spacing: 0.12em;\n  color: #bc9db5;\n  text-transform: uppercase;\n}\n.jev-devtools .jev-inspector {\n  height: 100%;\n  display: flex;\n  color: #eee8ed;\n  background: #0d0a0f;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools .jev-inspector h2 {\n  font-size: 15px;\n  margin: 0;\n  font-weight: 600;\n}\n.jev-devtools .jev-inspector h3 {\n  font-size: 13px;\n  margin: 0 0 8px;\n}\n.jev-devtools .jev-inspector code,\n.jev-devtools .jev-inspector pre {\n  font:\n    11px \"JetBrains Mono\",\n    monospace;\n}\n.jev-devtools .jev-inspector pre {\n  line-height: 1.7;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  max-height: 460px;\n  overflow: auto;\n  background: #100d13;\n  padding: 16px;\n  border: 1px solid #2e2533;\n  border-radius: 5px;\n}\n.jev-devtools .jev-inspector .muted {\n  color: #a89bac;\n  font-size: 11px;\n  line-height: 1.6;\n}\n.jev-devtools .request-list {\n  flex: 0 0 300px;\n  border-right: 1px solid #302634;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.jev-devtools .request-list > header {\n  padding: 17px 14px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.jev-devtools .request-list h2 span {\n  font-size: 11px;\n  color: #b796ad;\n  margin-left: 5px;\n}\n.jev-devtools .request-list button {\n  font-size: 11px;\n}\n.jev-devtools .list-filters {\n  display: flex;\n  gap: 7px;\n  padding: 0 12px 12px;\n}\n.jev-devtools .list-filters input {\n  min-width: 0;\n}\n.jev-devtools .list-filters select {\n  width: 86px;\n  font-size: 11px;\n}\n.jev-devtools .request-items {\n  overflow: auto;\n  flex: 1;\n}\n.jev-devtools .request-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  text-align: left;\n  border: 0;\n  border-top: 1px solid #251d2a;\n  border-radius: 0;\n  background: transparent;\n  padding: 16px 12px;\n}\n.jev-devtools .request-row.selected {\n  background: #251423;\n  box-shadow: inset 2px 0 #e551ba;\n}\n.jev-devtools .request-row strong {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n}\n.jev-devtools .request-row small {\n  display: block;\n  font-size: 10px;\n  color: #a99aac;\n  margin-top: 6px;\n}\n.jev-devtools .row-status {\n  font-size: 9px;\n  color: #ad9bb0;\n  margin-left: auto;\n}\n.jev-devtools .status-dot {\n  width: 6px;\n  height: 6px;\n  display: inline-block;\n  border-radius: 50%;\n  background: #b09ab7;\n  flex-shrink: 0;\n}\n.jev-devtools .status-dot.success {\n  background: #b3c79c;\n}\n.jev-devtools .status-dot.pending {\n  background: #e551ba;\n}\n.jev-devtools .status-dot.error {\n  background: #ee8e85;\n}\n.jev-devtools .request-list footer {\n  padding: 12px;\n  color: #9e8ea5;\n  border-top: 1px solid #302634;\n  font-size: 10px;\n  display: flex;\n  gap: 7px;\n}\n.jev-devtools .request-detail {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.jev-devtools .detail-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  padding: 18px 24px 10px;\n}\n.jev-devtools .detail-header h2 {\n  margin-top: 6px;\n}\n.jev-devtools .metrics {\n  display: flex;\n  gap: 24px;\n  font:\n    12px \"JetBrains Mono\",\n    monospace;\n  white-space: nowrap;\n}\n.jev-devtools .metrics small {\n  display: block;\n  font:\n    9px \"DM Sans\",\n    sans-serif;\n  color: #97879f;\n  margin-top: 6px;\n}\n.jev-devtools .detail-meta {\n  display: flex;\n  gap: 20px;\n  flex-wrap: wrap;\n  padding: 0 24px 14px;\n  color: #a08aa5;\n}\n.jev-devtools .detail-meta code {\n  font-size: 10px;\n}\n.jev-devtools .detail-tabs {\n  display: flex;\n  gap: 20px;\n  border-bottom: 1px solid #302634;\n  padding: 0 24px;\n}\n.jev-devtools .detail-tabs button {\n  border: 0;\n  border-radius: 0;\n  background: none;\n  padding: 10px 0;\n  color: #a89bac;\n  font-size: 11px;\n}\n.jev-devtools .detail-tabs button[aria-pressed=\"true\"] {\n  box-shadow: inset 0 -2px #e551ba;\n  color: #f5c1e6;\n}\n.jev-devtools .detail-body {\n  overflow: auto;\n  flex: 1;\n  min-height: 0;\n  padding: 16px 24px 28px;\n  background-image: radial-gradient(#342337 0.6px, transparent 0.6px);\n  background-size: 16px 16px;\n}\n.jev-devtools .request-flow {\n  display: flex;\n  align-items: center;\n  gap: 40px;\n  padding: 14px 0 20px;\n}\n.jev-devtools .state-node {\n  position: relative;\n  flex: 0 0 160px;\n  border: 1px solid #e551ba;\n  padding: 20px 15px;\n  background: #1f1320;\n  border-radius: 6px;\n}\n.jev-devtools .state-node h3 {\n  margin-top: 12px;\n}\n.jev-devtools .state-node p {\n  color: #b69db3;\n  line-height: 1.5;\n}\n.jev-devtools .state-node code {\n  font-size: 10px;\n}\n.jev-devtools .state-node:after {\n  content: \"\";\n  position: absolute;\n  left: 100%;\n  top: 50%;\n  width: 20px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 1px solid #7f416d;\n  padding-left: 20px;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(160px, 1fr));\n  gap: 12px;\n  flex: 1;\n  position: relative;\n}\n.jev-devtools .question-node {\n  position: relative;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n  padding: 15px;\n  background: #110d14;\n  min-width: 0;\n}\n.jev-devtools .question-node:before {\n  content: \"\";\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  width: 21px;\n  border-top: 1px solid #7f416d;\n}\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: none;\n}\n.jev-devtools .question-node header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.jev-devtools .question-node header h3 {\n  margin: 0;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .type {\n  font:\n    9px \"JetBrains Mono\",\n    monospace;\n  color: #e59acc;\n  border: 1px solid #5e3654;\n  border-radius: 3px;\n  padding: 3px 5px;\n}\n.jev-devtools .instructions {\n  font-size: 11px;\n  color: #b8a6bc;\n  line-height: 1.5;\n}\n.jev-devtools .answer-value {\n  display: block;\n  font-size: 20px;\n  font-weight: 500;\n  margin: 15px 0;\n  color: #f0c7e5;\n}\n.jev-devtools .answer-value small {\n  font-size: 10px;\n  color: #b5a1ba;\n}\n.jev-devtools .probability {\n  margin: 10px 0;\n  font-size: 10px;\n}\n.jev-devtools .probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 5px;\n  margin-bottom: 5px;\n}\n.jev-devtools .probability b {\n  font-weight: 400;\n  color: #d8abc9;\n}\n.jev-devtools .bar {\n  height: 4px;\n  background: #302033;\n  border-radius: 2px;\n  overflow: hidden;\n}\n.jev-devtools .bar i {\n  display: block;\n  height: 100%;\n  background: #e551ba;\n}\n.jev-devtools .confidence {\n  font-size: 10px;\n  color: #a68cac;\n  border-top: 1px solid #302634;\n  padding-top: 10px;\n  display: flex;\n  justify-content: space-between;\n}\n.jev-devtools .confidence b {\n  color: #d1bad2;\n  font-weight: 400;\n}\n.jev-devtools details {\n  margin-top: 12px;\n  font-size: 10px;\n  color: #b7a0bd;\n}\n.jev-devtools summary {\n  cursor: pointer;\n}\n.jev-devtools .standalone {\n  margin-bottom: 14px;\n  max-width: 750px;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .standalone .answer {\n  max-width: 450px;\n}\n.jev-devtools .box-preview {\n  position: relative;\n  margin-top: 14px;\n  min-height: 80px;\n  background: #19121c;\n}\n.jev-devtools .box-preview img {\n  width: 100%;\n  display: block;\n}\n.jev-devtools .bounding-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .coordinates {\n  display: block;\n  font-size: 9px !important;\n  line-height: 1.5;\n  margin-top: 8px;\n  color: #ac93b0;\n}\n.jev-devtools .context-image {\n  max-width: 400px;\n  width: 100%;\n  border: 1px solid #75516c;\n  border-radius: 6px;\n}\n.jev-devtools .empty {\n  padding: 20px;\n  color: #a294a8;\n  line-height: 1.7;\n}\n.jev-devtools .empty-detail {\n  margin: auto;\n  padding: 40px;\n  text-align: center;\n  color: #b2a0ba;\n}\n.jev-devtools .empty-symbol {\n  font-size: 36px;\n  color: #e551ba;\n  display: block;\n  margin-bottom: 20px;\n}\n.jev-devtools .empty-detail p {\n  font-size: 12px;\n  line-height: 1.8;\n}\n.jev-devtools .error-banner {\n  border: 1px solid #874b50;\n  background: #31191e;\n  padding: 12px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n}\n.jev-devtools .warning {\n  color: #e2b97d;\n}\n.jev-devtools .jev-inspector table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n}\n.jev-devtools .jev-inspector th,\n.jev-devtools .jev-inspector td {\n  border-bottom: 1px solid #302634;\n  padding: 14px;\n}\n.jev-devtools .flow-dot {\n  display: none;\n}\n.jev-devtools .pending .flow-dot {\n  display: block;\n  position: absolute;\n  right: -23px;\n  top: calc(50% - 3px);\n  width: 6px;\n  height: 6px;\n  background: #e551ba;\n  border-radius: 50%;\n  animation: jev-inspector-pulse 1s infinite;\n}\n@keyframes jev-inspector-pulse {\n  50% {\n    opacity: 0.2;\n    transform: scale(0.7);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .pending .flow-dot {\n    animation: none;\n  }\n}\n@media (max-width: 1100px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    display: block;\n  }\n  .jev-devtools .request-flow {\n    align-items: flex-start;\n  }\n  .jev-devtools .state-node {\n    margin-top: 45px;\n  }\n  .jev-devtools .metrics {\n    gap: 12px;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 250px;\n  }\n}\n@media (max-width: 700px) {\n  .jev-devtools .jev-inspector {\n    flex-direction: column;\n  }\n  .jev-devtools .request-list {\n    flex-basis: 140px;\n    flex-shrink: 0;\n    border-right: 0;\n    border-bottom: 1px solid #302634;\n  }\n  .jev-devtools .request-list > header {\n    padding: 6px 12px;\n  }\n  .jev-devtools .request-list footer {\n    display: none;\n  }\n  .jev-devtools .list-filters {\n    padding-bottom: 6px;\n  }\n  .jev-devtools .request-items {\n    display: flex;\n  }\n  .jev-devtools .request-row {\n    min-width: 240px;\n    padding: 8px 12px;\n  }\n  .jev-devtools .request-detail {\n    min-height: 0;\n  }\n  .jev-devtools .detail-header {\n    padding: 12px;\n  }\n  .jev-devtools .detail-meta,\n  .jev-devtools .detail-tabs {\n    padding-left: 12px;\n    padding-right: 12px;\n  }\n  .jev-devtools .detail-body {\n    padding: 12px;\n  }\n  .jev-devtools .metrics {\n    display: none;\n  }\n  .jev-devtools .state-node {\n    flex-basis: 115px;\n    padding: 12px;\n  }\n  .jev-devtools .request-flow {\n    gap: 25px;\n  }\n  .jev-devtools .state-node:after {\n    width: 12px;\n  }\n  .jev-devtools .question-branches {\n    padding-left: 12px;\n  }\n  .jev-devtools .question-node:before {\n    width: 13px;\n  }\n  .jev-devtools .question-node {\n    padding: 12px;\n  }\n}\n\n.jev-devtools .request-flow {\n  flex-direction: column;\n  align-items: stretch;\n  gap: 24px;\n}\n.jev-devtools .state-node {\n  flex: auto;\n  width: fit-content;\n  align-self: center;\n  padding: 12px 24px;\n  text-align: center;\n  margin: 0;\n}\n.jev-devtools .state-node h3 {\n  display: inline-block;\n  margin: 0 12px;\n}\n.jev-devtools .state-node p {\n  display: inline-block;\n  margin: 0 12px 0 0;\n  font-size: 11px;\n}\n.jev-devtools .state-node .eyebrow {\n  display: none;\n}\n.jev-devtools .state-node:after {\n  left: 50%;\n  top: 100%;\n  width: 0;\n  height: 24px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .question-branches {\n  border-left: 0;\n  border-top: 1px solid #7f416d;\n  padding: 20px 0 0;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n}\n.jev-devtools .question-node:before,\n.jev-devtools .question-branches .question-node:not(:first-child):before {\n  display: block;\n  right: auto;\n  left: 50%;\n  top: -21px;\n  width: 0;\n  height: 20px;\n  border-top: 0;\n  border-left: 1px solid #7f416d;\n}\n.jev-devtools .standalone:before {\n  display: none;\n}\n.jev-devtools .flow-caption {\n  margin-top: 0;\n}\n.jev-devtools .pending .flow-dot {\n  right: auto;\n  left: calc(50% - 3px);\n  top: calc(100% + 10px);\n}\n@media (max-width: 900px) {\n  .jev-devtools .question-branches {\n    grid-template-columns: 1fr;\n  }\n  .jev-devtools .question-node:before,\n  .jev-devtools .question-branches .question-node:not(:first-child):before {\n    height: 12px;\n    top: -13px;\n  }\n  .jev-devtools .question-branches .question-node:first-child:before {\n    height: 20px;\n    top: -21px;\n  }\n  .jev-devtools .state-node {\n    padding: 10px;\n  }\n  .jev-devtools .state-node p {\n    display: block;\n    margin: 6px 0;\n  }\n  .jev-devtools .state-node h3 {\n    font-size: 12px;\n  }\n}\n\n.jev-devtools.jev-drawer {\n  margin: 0;\n  padding: 0;\n  position: fixed;\n  z-index: 1000;\n  inset: auto 0 0;\n  display: flex;\n  flex-direction: column;\n  background: #0d0a0f;\n  color: #eee8ed;\n  border-top: 1px solid #604058;\n  box-shadow: 0 -12px 48px #0005;\n  font:\n    12px \"DM Sans\",\n    sans-serif;\n}\n.jev-devtools.jev-drawer[hidden],\n.jev-devtools.jev-drawer-trigger[hidden] {\n  display: none;\n}\n.jev-devtools .jev-drawer-resize {\n  position: absolute;\n  z-index: 1;\n  top: -6px;\n  width: 100%;\n  height: 12px;\n  cursor: ns-resize;\n  touch-action: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.jev-devtools .jev-drawer-resize span {\n  width: 42px;\n  height: 3px;\n  border-radius: 3px;\n  background: #79506f;\n}\n.jev-devtools .jev-drawer-resize:hover span,\n.jev-devtools .jev-drawer-resize:focus-visible span {\n  background: #e551ba;\n}\n.jev-devtools .jev-drawer-resize:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .jev-drawer-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex: 0 0 46px;\n  padding: 0 16px;\n  border-bottom: 1px solid #302634;\n}\n.jev-devtools .jev-drawer-header strong {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  font-weight: 600;\n}\n.jev-devtools .jev-mark {\n  color: #e551ba;\n  font-size: 21px;\n}\n.jev-devtools .jev-drawer-header > div {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.jev-devtools .jev-drawer-header button {\n  background: transparent;\n  border-color: transparent;\n  font-size: 11px;\n  color: #c4afc8;\n}\n.jev-devtools .jev-drawer-header .jev-drawer-close {\n  font-size: 22px;\n  line-height: 1;\n  padding: 4px 8px;\n}\n.jev-devtools .jev-drawer-content {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.jev-devtools.jev-drawer-trigger {\n  position: fixed;\n  bottom: 18px;\n  right: 18px;\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 10px 16px;\n  border: 1px solid #a24487;\n  border-radius: 8px;\n  cursor: pointer;\n  background: #211321;\n  color: #f1cbe6;\n  font:\n    600 13px \"DM Sans\",\n    sans-serif;\n  box-shadow: 0 4px 20px #0005;\n}\n.jev-devtools.jev-drawer-trigger span {\n  color: #e551ba;\n  font-size: 20px;\n}\n/* Baseline cards and authored left-to-right composition from the lab's Jev presets. */\n.jev-devtools .detail-body.detail-body-flow {\n  display: flex;\n  padding: 0;\n  overflow: hidden;\n}\n.jev-devtools .lab-flow {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n.jev-devtools .lab-flow-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  flex-shrink: 0;\n  padding: 12px 16px;\n  flex-wrap: wrap;\n}\n.jev-devtools .lab-flow-toolbar label {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  font-size: 11px;\n  min-width: 0;\n}\n.jev-devtools .lab-flow-toolbar select {\n  width: auto;\n  max-width: 240px;\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar > div {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.jev-devtools .lab-flow-toolbar button {\n  font-size: 11px;\n}\n.jev-devtools .lab-flow-toolbar output {\n  font-size: 11px;\n  min-width: 35px;\n  text-align: center;\n}\n.jev-devtools .lab-flow-viewport {\n  position: relative;\n  flex: 1;\n  min-height: 100px;\n  overflow: hidden;\n  background-color: #0d0a0f;\n  background-image: radial-gradient(#463449 0.8px, transparent 0.8px);\n  background-size: 20px 20px;\n  border-block: 1px solid #302634;\n  cursor: grab;\n  touch-action: none;\n  user-select: none;\n  overscroll-behavior: contain;\n}\n.jev-devtools .lab-flow-viewport[data-panning] {\n  cursor: grabbing;\n}\n.jev-devtools .lab-flow-viewport:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n.jev-devtools .lab-flow-caption {\n  flex-shrink: 0;\n  padding: 8px 16px;\n  margin: 0;\n}\n.jev-devtools .lab-gesture-hint {\n  display: block;\n  color: #c6a7bd;\n}\n.jev-devtools .lab-flow-canvas {\n  position: absolute;\n  inset: 0 auto auto 0;\n  transform-origin: top left;\n  will-change: transform;\n  font-family: system-ui, sans-serif;\n  color: #f5f3f6;\n}\n.jev-devtools .lab-connections {\n  position: absolute;\n  inset: 0;\n  overflow: visible;\n}\n.jev-devtools .lab-connections path {\n  fill: none;\n  stroke: #645a68;\n  stroke-width: 1;\n}\n.jev-devtools .lab-connections path.active {\n  stroke: #968592;\n}\n.jev-devtools .lab-connections text {\n  fill: #b7b1bc;\n  font:\n    12px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-flow-dot {\n  fill: #e551ba;\n}\n.jev-devtools .lab-card {\n  position: absolute;\n  border: 1.3px solid #f5f3f6;\n  border-radius: 14px;\n  padding: 20px;\n  background: #0d0a0f;\n  overflow: hidden;\n}\n.jev-devtools .lab-eyebrow {\n  display: block;\n  color: #e551ba;\n  font:\n    500 10px ui-monospace,\n    monospace;\n  letter-spacing: 1px;\n  margin: 0 0 10px;\n}\n.jev-devtools .lab-card h3 {\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 1.25;\n  margin: 0 0 16px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-card p {\n  font-size: 15px;\n  line-height: 1.4;\n  margin: 10px 0;\n}\n.jev-devtools .lab-copy {\n  display: -webkit-box;\n  -webkit-line-clamp: 5;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-probability {\n  margin: 17px 0;\n}\n.jev-devtools .lab-probability > div:first-child {\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 9px;\n  font-size: 15px;\n}\n.jev-devtools .lab-probability span {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.jev-devtools .lab-probability code {\n  font:\n    13px ui-monospace,\n    monospace;\n}\n.jev-devtools .lab-track {\n  height: 7px;\n  border-radius: 4px;\n  background: #f5f3f61a;\n  overflow: hidden;\n}\n.jev-devtools .lab-track i {\n  display: block;\n  height: 100%;\n  border-radius: 4px;\n  background: #e551ba;\n}\n.jev-devtools .lab-track i.lab-alternative {\n  opacity: 0.35;\n}\n.jev-devtools .lab-card .lab-result {\n  font-size: 14px;\n  margin-top: 24px;\n}\n.jev-devtools .lab-card .lab-small {\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 20px;\n}\n.jev-devtools .lab-idle {\n  opacity: 0.65;\n}\n.jev-devtools .lab-scale {\n  position: relative;\n  margin-top: 18px;\n  border-top: 1px solid #b7b1bc;\n  display: flex;\n  justify-content: space-between;\n  padding-top: 9px;\n}\n.jev-devtools .lab-scale > span {\n  position: absolute;\n  top: -5px;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: #e551ba;\n  transform: translateX(-50%);\n}\n.jev-devtools .lab-big {\n  display: block;\n  font-size: 36px;\n  font-weight: 500;\n  margin-top: 26px;\n}\n.jev-devtools .lab-endpoints {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: #b7b1bc;\n  margin-top: 10px;\n}\n.jev-devtools .lab-image {\n  position: relative;\n}\n.jev-devtools .lab-image img {\n  display: block;\n  width: 100%;\n}\n.jev-devtools .lab-box {\n  position: absolute;\n  border: 1.5px solid #e551ba;\n  background: #e551ba15;\n}\n.jev-devtools .lab-source-image {\n  width: 100%;\n  max-height: 105px;\n  object-fit: contain;\n}\n.jev-devtools .lab-coordinates {\n  font-family: ui-monospace, monospace;\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .lab-flow-dot {\n    display: none;\n  }\n}\n/* The public TypeSafe mark travels with the package, independent of host assets. */\n.jev-devtools .typesafe-mark {\n  display: inline-block;\n  flex: 0 0 23px;\n  width: 23px;\n  height: 32px;\n  overflow: hidden;\n  line-height: 0;\n}\n.jev-devtools .typesafe-mark img {\n  display: block;\n  height: 32px;\n  width: auto;\n  max-width: none;\n}\n\n.jev-devtools .detail-body-questions {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n.jev-devtools .questions-list {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 180px;\n}\n.jev-devtools .questions-navigation {\n  display: flex;\n  align-items: end;\n  gap: 8px;\n  flex-wrap: wrap;\n  flex-shrink: 0;\n}\n.jev-devtools .questions-navigation label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  flex: 1;\n  min-width: 240px;\n  max-width: 480px;\n  font-size: 11px;\n  color: #bc9db5;\n}\n.jev-devtools .questions-navigation select {\n  display: block;\n  min-width: 0;\n}\n.jev-devtools .questions-navigation > span {\n  align-self: center;\n  color: #a89bac;\n}\n.jev-devtools .questions-help {\n  margin: 8px 0;\n  flex-shrink: 0;\n}\n.jev-devtools .questions-viewport {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overflow-anchor: none;\n  scrollbar-gutter: stable;\n  padding: 3px;\n}\n.jev-devtools .questions-spacer {\n  position: relative;\n  width: 100%;\n}\n.jev-devtools .questions-row {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  padding-bottom: 14px;\n}\n.jev-devtools .questions-row .standalone {\n  margin-bottom: 0;\n}\n.jev-devtools .questions-viewport:focus-visible,\n.jev-devtools .questions-row article:focus-visible {\n  outline: 2px solid #e551ba;\n  outline-offset: -2px;\n}\n\n/* Reserve measured card geometry while rapid scrolling uses a light preview. */\n.jev-devtools .questions-row[data-preview=\"true\"] article {\n  height: 100%;\n}\n.jev-devtools .question-scroll-preview p {\n  margin-top: 16px;\n}\n\n/* The full distribution stays at reading size, outside the zoomable canvas. */\n.jev-devtools .lab-flow-viewport[hidden] {\n  display: none;\n}\n.jev-devtools .lab-choice-browser {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: 8px 16px;\n  gap: 10px;\n}\n.jev-devtools .lab-choice-controls {\n  display: flex;\n  gap: 12px;\n  align-items: end;\n  flex-wrap: wrap;\n  font-size: 12px;\n}\n.jev-devtools .lab-choice-controls label {\n  display: grid;\n  gap: 5px;\n}\n.jev-devtools .lab-choice-table-scroll {\n  overflow: auto;\n  min-height: 0;\n  flex: 1;\n}\n.jev-devtools .lab-choice-browser table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n.jev-devtools .lab-choice-browser caption {\n  text-align: left;\n  padding: 8px 0;\n  color: #aaa0af;\n}\n.jev-devtools .lab-choice-browser th,\n.jev-devtools .lab-choice-browser td {\n  padding: 9px 12px;\n  border-bottom: 1px solid #302634;\n  text-align: left;\n}\n.jev-devtools .lab-choice-browser th {\n  overflow-wrap: anywhere;\n  max-width: 320px;\n}\n.jev-devtools .lab-choice-browser td {\n  font-variant-numeric: tabular-nums;\n}\n.jev-devtools .lab-choice-browser code {\n  white-space: normal;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-returned {\n  display: block;\n  font-size: 10px;\n  color: #e551ba;\n}\n.jev-devtools .lab-choice-pagination {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  justify-content: space-between;\n  font-size: 12px;\n}\n.jev-devtools .lab-choice-remainder button {\n  margin-top: 7px;\n}\n\n.jev-devtools .lab-flow-compact .lab-output {\n  padding: 12px;\n  height: 104px;\n}\n.jev-devtools .lab-flow-compact .lab-output .lab-eyebrow {\n  margin-bottom: 6px;\n}\n.jev-devtools .lab-flow-compact .lab-output h3 {\n  font-size: 16px;\n  margin-bottom: 8px;\n}\n.jev-devtools .lab-flow-compact .lab-output p {\n  font-size: 12px;\n  margin: 4px 0;\n}\n.jev-devtools .lab-flow-compact .lab-result {\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n.jev-devtools .lab-choice-remainder {\n  padding: 12px;\n}\n.jev-devtools .lab-choice-remainder .lab-small {\n  margin: 8px 0 0;\n  font-size: 11px;\n}\n\n.jev-devtools .detail-body.detail-body-flow {\n  flex-direction: column;\n}\n.jev-devtools .detail-body-flow > .warning,\n.jev-devtools .detail-body-flow > .error-banner {\n  flex-shrink: 0;\n  margin: 6px 16px;\n}\n.jev-devtools .lab-choice-browser {\n  overflow: auto;\n}\n.jev-devtools .lab-choice-table-scroll {\n  flex: 1 0 110px;\n}\n\n/* Only freshly revealed branches enter; pan/zoom remains on the canvas. */\n.jev-devtools .lab-card-enter {\n  animation: jev-card-enter 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;\n}\n.jev-devtools .lab-branch-enter {\n  stroke-dasharray: 1;\n  animation: jev-branch-enter 280ms ease-out backwards;\n}\n@keyframes jev-card-enter {\n  from {\n    opacity: 0;\n    transform: translateX(-16px) scale(0.96);\n  }\n}\n@keyframes jev-branch-enter {\n  from {\n    opacity: 0;\n    stroke-dashoffset: 1;\n  }\n  to {\n    opacity: 1;\n    stroke-dashoffset: 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .jev-devtools .lab-card-enter,\n  .jev-devtools .lab-branch-enter {\n    animation: none;\n  }\n}\n";

package/lib/src/inspector.css

@@ -1,9 +1,15 @@
 .jev-devtools {
+  all: initial;
+  display: block;
+  direction: ltr;
+  unicode-bidi: isolate;
+  pointer-events: auto;
   color-scheme: dark;
   font:
     12px system-ui,
     sans-serif;
   color: #eee8ed;
+  line-height: 1.5;
 }
 .jev-devtools,
 .jev-devtools * {
@@ -184,6 +190,7 @@
 .jev-devtools .request-detail {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
 }
@@ -664,6 +671,8 @@
 }
 
 .jev-devtools.jev-drawer {
+  margin: 0;
+  padding: 0;
   position: fixed;
   z-index: 1000;
   inset: auto 0 0;
@@ -756,6 +765,8 @@
   gap: 9px;
   padding: 10px 16px;
   border: 1px solid #a24487;
+  border-radius: 8px;
+  cursor: pointer;
   background: #211321;
   color: #f1cbe6;
   font:
@@ -768,12 +779,25 @@
   font-size: 20px;
 }
 /* Baseline cards and authored left-to-right composition from the lab's Jev presets. */
+.jev-devtools .detail-body.detail-body-flow {
+  display: flex;
+  padding: 0;
+  overflow: hidden;
+}
+.jev-devtools .lab-flow {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
 .jev-devtools .lab-flow-toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  margin-bottom: 14px;
+  flex-shrink: 0;
+  padding: 12px 16px;
   flex-wrap: wrap;
 }
 .jev-devtools .lab-flow-toolbar label {
@@ -802,15 +826,40 @@
   text-align: center;
 }
 .jev-devtools .lab-flow-viewport {
-  overflow: auto;
-  max-height: 65vh;
-  background: #0d0a0f;
-  border: 1px solid #302634;
-  border-radius: 8px;
+  position: relative;
+  flex: 1;
+  min-height: 100px;
+  overflow: hidden;
+  background-color: #0d0a0f;
+  background-image: radial-gradient(#463449 0.8px, transparent 0.8px);
+  background-size: 20px 20px;
+  border-block: 1px solid #302634;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  overscroll-behavior: contain;
+}
+.jev-devtools .lab-flow-viewport[data-panning] {
+  cursor: grabbing;
+}
+.jev-devtools .lab-flow-viewport:focus-visible {
+  outline: 2px solid #e551ba;
+  outline-offset: -2px;
+}
+.jev-devtools .lab-flow-caption {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  margin: 0;
+}
+.jev-devtools .lab-gesture-hint {
+  display: block;
+  color: #c6a7bd;
 }
 .jev-devtools .lab-flow-canvas {
-  position: relative;
+  position: absolute;
+  inset: 0 auto auto 0;
   transform-origin: top left;
+  will-change: transform;
   font-family: system-ui, sans-serif;
   color: #f5f3f6;
 }
@@ -991,3 +1040,227 @@
   width: auto;
   max-width: none;
 }
+
+.jev-devtools .detail-body-questions {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+.jev-devtools .questions-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 180px;
+}
+.jev-devtools .questions-navigation {
+  display: flex;
+  align-items: end;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+.jev-devtools .questions-navigation label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 240px;
+  max-width: 480px;
+  font-size: 11px;
+  color: #bc9db5;
+}
+.jev-devtools .questions-navigation select {
+  display: block;
+  min-width: 0;
+}
+.jev-devtools .questions-navigation > span {
+  align-self: center;
+  color: #a89bac;
+}
+.jev-devtools .questions-help {
+  margin: 8px 0;
+  flex-shrink: 0;
+}
+.jev-devtools .questions-viewport {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overflow-anchor: none;
+  scrollbar-gutter: stable;
+  padding: 3px;
+}
+.jev-devtools .questions-spacer {
+  position: relative;
+  width: 100%;
+}
+.jev-devtools .questions-row {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding-bottom: 14px;
+}
+.jev-devtools .questions-row .standalone {
+  margin-bottom: 0;
+}
+.jev-devtools .questions-viewport:focus-visible,
+.jev-devtools .questions-row article:focus-visible {
+  outline: 2px solid #e551ba;
+  outline-offset: -2px;
+}
+
+/* Reserve measured card geometry while rapid scrolling uses a light preview. */
+.jev-devtools .questions-row[data-preview="true"] article {
+  height: 100%;
+}
+.jev-devtools .question-scroll-preview p {
+  margin-top: 16px;
+}
+
+/* The full distribution stays at reading size, outside the zoomable canvas. */
+.jev-devtools .lab-flow-viewport[hidden] {
+  display: none;
+}
+.jev-devtools .lab-choice-browser {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  padding: 8px 16px;
+  gap: 10px;
+}
+.jev-devtools .lab-choice-controls {
+  display: flex;
+  gap: 12px;
+  align-items: end;
+  flex-wrap: wrap;
+  font-size: 12px;
+}
+.jev-devtools .lab-choice-controls label {
+  display: grid;
+  gap: 5px;
+}
+.jev-devtools .lab-choice-table-scroll {
+  overflow: auto;
+  min-height: 0;
+  flex: 1;
+}
+.jev-devtools .lab-choice-browser table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.jev-devtools .lab-choice-browser caption {
+  text-align: left;
+  padding: 8px 0;
+  color: #aaa0af;
+}
+.jev-devtools .lab-choice-browser th,
+.jev-devtools .lab-choice-browser td {
+  padding: 9px 12px;
+  border-bottom: 1px solid #302634;
+  text-align: left;
+}
+.jev-devtools .lab-choice-browser th {
+  overflow-wrap: anywhere;
+  max-width: 320px;
+}
+.jev-devtools .lab-choice-browser td {
+  font-variant-numeric: tabular-nums;
+}
+.jev-devtools .lab-choice-browser code {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+.jev-devtools .lab-choice-returned {
+  display: block;
+  font-size: 10px;
+  color: #e551ba;
+}
+.jev-devtools .lab-choice-pagination {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+  font-size: 12px;
+}
+.jev-devtools .lab-choice-remainder button {
+  margin-top: 7px;
+}
+
+.jev-devtools .lab-flow-compact .lab-output {
+  padding: 12px;
+  height: 104px;
+}
+.jev-devtools .lab-flow-compact .lab-output .lab-eyebrow {
+  margin-bottom: 6px;
+}
+.jev-devtools .lab-flow-compact .lab-output h3 {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+.jev-devtools .lab-flow-compact .lab-output p {
+  font-size: 12px;
+  margin: 4px 0;
+}
+.jev-devtools .lab-flow-compact .lab-result {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+.jev-devtools .lab-choice-remainder {
+  padding: 12px;
+}
+.jev-devtools .lab-choice-remainder .lab-small {
+  margin: 8px 0 0;
+  font-size: 11px;
+}
+
+.jev-devtools .detail-body.detail-body-flow {
+  flex-direction: column;
+}
+.jev-devtools .detail-body-flow > .warning,
+.jev-devtools .detail-body-flow > .error-banner {
+  flex-shrink: 0;
+  margin: 6px 16px;
+}
+.jev-devtools .lab-choice-browser {
+  overflow: auto;
+}
+.jev-devtools .lab-choice-table-scroll {
+  flex: 1 0 110px;
+}
+
+/* Only freshly revealed branches enter; pan/zoom remains on the canvas. */
+.jev-devtools .lab-card-enter {
+  animation: jev-card-enter 280ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
+}
+.jev-devtools .lab-branch-enter {
+  stroke-dasharray: 1;
+  animation: jev-branch-enter 280ms ease-out backwards;
+}
+@keyframes jev-card-enter {
+  from {
+    opacity: 0;
+    transform: translateX(-16px) scale(0.96);
+  }
+}
+@keyframes jev-branch-enter {
+  from {
+    opacity: 0;
+    stroke-dashoffset: 1;
+  }
+  to {
+    opacity: 1;
+    stroke-dashoffset: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .jev-devtools .lab-card-enter,
+  .jev-devtools .lab-branch-enter {
+    animation: none;
+  }
+}

package/lib/src/protocol.d.ts

@@ -62,3 +62,16 @@ export type Snapshot = {
     version: 1;
     traces: Trace[];
 };
+export type StreamSnapshot = {
+    version: 2;
+    revision: number;
+    traces: Trace[];
+};
+export type TraceDelta = {
+    version: 2;
+    base: number;
+    revision: number;
+    upserts: Trace[];
+    /** Authoritative newest-first retained IDs. Omitted IDs are removed. */
+    order: string[];
+};

package/lib/src/trace-store.d.ts

@@ -0,0 +1,6 @@
+import type { Trace } from "./protocol.js";
+export declare class TraceStore {
+    private current;
+    private revision;
+    apply(event: "snapshot" | "delta", input: unknown): Trace[];
+}

package/lib/src/trace-store.js

@@ -0,0 +1,66 @@
+const revision = (value) => typeof value === "number" && Number.isSafeInteger(value) && value >= 0;
+function traces(value) {
+    if (!Array.isArray(value) || value.length > 200)
+        throw new Error("Invalid traces");
+    const ids = new Set();
+    for (const trace of value) {
+        if (!trace ||
+            trace.version !== 1 ||
+            typeof trace.id !== "string" ||
+            !trace.id ||
+            ids.has(trace.id))
+            throw new Error("Invalid trace ID");
+        ids.add(trace.id);
+    }
+    return value;
+}
+// Owned by one EventSource connection. Unchanged trace objects keep their
+// identity; validate the complete update before replacing any current state.
+export class TraceStore {
+    current = [];
+    revision;
+    apply(event, input) {
+        if (!input || typeof input !== "object")
+            throw new Error("Invalid update");
+        const data = input;
+        if (event === "snapshot") {
+            if (data.version !== 1 && data.version !== 2)
+                throw new Error("Unsupported stream");
+            if (data.version === 2 && !revision(data.revision))
+                throw new Error("Invalid revision");
+            const next = traces(data.traces);
+            this.current = next;
+            this.revision =
+                data.version === 2 ? data.revision : undefined;
+            return next;
+        }
+        if (data.version !== 2 ||
+            this.revision === undefined ||
+            data.base !== this.revision ||
+            !revision(data.revision) ||
+            data.revision <= this.revision)
+            throw new Error("Inspector stream needs a fresh snapshot");
+        if (!Array.isArray(data.order) ||
+            data.order.length > 200 ||
+            data.order.some((id) => typeof id !== "string") ||
+            new Set(data.order).size !== data.order.length)
+            throw new Error("Invalid retained order");
+        const order = data.order;
+        const retained = new Set(order);
+        const upserts = traces(data.upserts);
+        if (upserts.some((t) => !retained.has(t.id)))
+            throw new Error("Unexpected upsert");
+        const byId = new Map(this.current.map((t) => [t.id, t]));
+        for (const trace of upserts)
+            byId.set(trace.id, trace);
+        const next = order.map((id) => {
+            const trace = byId.get(id);
+            if (!trace)
+                throw new Error("Missing retained trace");
+            return trace;
+        });
+        this.current = next;
+        this.revision = data.revision;
+        return next;
+    }
+}

package/lib/src/trace-stream.d.ts

@@ -0,0 +1,2 @@
+import type { Trace } from "./protocol.js";
+export declare function connectTraceStream(url: string, onTraces: (traces: Trace[]) => void, onConnection: (status: string) => void): () => void;

package/lib/src/trace-stream.js

@@ -0,0 +1,65 @@
+import { TraceStore } from "./trace-store.js";
+export function connectTraceStream(url, onTraces, onConnection) {
+    let alive = true, events, retry, frame, fallback, pending;
+    const cancelPublish = () => {
+        if (frame !== undefined)
+            cancelAnimationFrame(frame);
+        clearTimeout(fallback);
+        frame = undefined;
+        fallback = undefined;
+        pending = undefined;
+    };
+    const publish = () => {
+        const next = pending;
+        cancelPublish();
+        if (alive && next)
+            onTraces(next);
+    };
+    const schedule = (next) => {
+        pending = next;
+        if (frame !== undefined)
+            return;
+        // Merge every protocol event, but render only the newest state per frame.
+        // Background tabs may suspend rAF; keep delivery bounded there as well.
+        frame = requestAnimationFrame(publish);
+        fallback = setTimeout(publish, 100);
+    };
+    const connect = () => {
+        if (!alive)
+            return;
+        // Native reconnects receive a full snapshot too. After an invalid delta,
+        // discard the cursor and reconnect rather than applying partial history.
+        const store = new TraceStore();
+        const source = new EventSource(url + "/events?protocol=2");
+        events = source;
+        const receive = (kind, event) => {
+            if (!alive || events !== source)
+                return;
+            try {
+                const next = store.apply(kind, JSON.parse(event.data));
+                schedule(next);
+                onConnection("connected");
+            }
+            catch {
+                cancelPublish();
+                source.close();
+                events = undefined;
+                onConnection("resynchronizing");
+                retry = setTimeout(connect, 1000);
+            }
+        };
+        source.addEventListener("snapshot", (event) => receive("snapshot", event));
+        source.addEventListener("delta", (event) => receive("delta", event));
+        source.onerror = () => {
+            if (alive && events === source)
+                onConnection("reconnecting");
+        };
+    };
+    connect();
+    return () => {
+        alive = false;
+        clearTimeout(retry);
+        cancelPublish();
+        events?.close();
+    };
+}

package/lib/src/useDiagramViewport.d.ts

@@ -0,0 +1,10 @@
+import { type Point } from "./diagram-camera.js";
+/** Lab-style camera. Pointer frames update the transform without rerendering cards. */
+export declare function useDiagramViewport(width: number, height: number, scene: string): {
+    viewport: import("react").RefObject<HTMLDivElement | null>;
+    canvas: import("react").RefObject<HTMLDivElement | null>;
+    zoom: number;
+    zoomBy: (factor: number, point?: Point) => void;
+    fit: () => void;
+    preserveCamera: () => void;
+};