@scalar/api-client-react 2.0.51 → 2.0.52

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @scalar/api-client-react
 
+## 2.0.52
+
 ## 2.0.51
 
 ## 2.0.50

package/dist/style.css

@@ -218,7 +218,7 @@
     --scalar-background-3: #e7e7e7;
     --scalar-background-accent: #8ab4f81f;
     --scalar-color-1: #1b1b1b;
-    --scalar-color-2: #757575;
+    --scalar-color-2: #707070;
     --scalar-color-3: #8e8e8e;
     --scalar-color-accent: #09f;
     --scalar-border-color: #dfdfdf;
@@ -266,7 +266,7 @@
     --scalar-color-green: #069061;
     --scalar-color-red: #ef0006;
     --scalar-color-yellow: #edbe20;
-    --scalar-color-blue: #0082d0;
+    --scalar-color-blue: #0072bd;
     --scalar-color-orange: #ff5800;
     --scalar-color-purple: #5203d1;
     --scalar-color-query: #007b80;
@@ -384,7 +384,7 @@
       --scalar-color-green: color(display-p3 .023529 .564706 .380392);
       --scalar-color-red: color(display-p3 .937255 0 .023529);
       --scalar-color-yellow: color(display-p3 .929412 .745098 .12549);
-      --scalar-color-blue: color(display-p3 0 .509804 .815686);
+      --scalar-color-blue: color(display-p3 0 .447059 .741176);
       --scalar-color-orange: color(display-p3 1 .4 .02);
       --scalar-color-purple: color(display-p3 .321569 .011765 .819608);
     }
@@ -416,9 +416,19 @@
 :where(.scalar-app) {
   font-family: var(--scalar-font);
   color: var(--scalar-color-1);
+  --scalar-focus-color: var(--scalar-color-accent);
+  line-height: 1.15;
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  :where(.scalar-app) {
+    --scalar-focus-color: color-mix(in srgb, var(--scalar-color-accent), var(--scalar-color-1) 20%);
+  }
+}
+
+:where(.scalar-app) {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  line-height: 1.15;
 }
 
 :where(.scalar-app) *, :where(.scalar-app) :before, :where(.scalar-app) :after {
@@ -509,6 +519,10 @@
   outline-offset: -1px;
 }
 
+:where(.scalar-app) a:focus-visible, :where(.scalar-app) button:focus-visible, :where(.scalar-app) [role="button"]:focus-visible {
+  outline-color: var(--scalar-focus-color);
+}
+
 :where(.scalar-app) button, :where(.scalar-app) [role="button"] {
   cursor: pointer;
 }
@@ -5372,15 +5386,25 @@
   }
 }
 
+@media not all and (min-width: 1000px) {
+  .scalar-app .max-lg\:fixed {
+    position: fixed;
+  }
+
+  .scalar-app .max-lg\:top-2 {
+    top: 8px;
+  }
+
+  .scalar-app .max-lg\:left-2 {
+    left: 8px;
+  }
+}
+
 @media not all and (min-width: 800px) {
   .scalar-app .max-md\:absolute\! {
     position: absolute !important;
   }
 
-  .scalar-app .max-md\:top-4 {
-    top: 16px;
-  }
-
   .scalar-app .max-md\:z-5 {
     z-index: 5;
   }
@@ -6116,21 +6140,21 @@ to {
   );
 }
 
-.fade-request-section-content[data-v-48147b15] {
+.fade-request-section-content[data-v-50fd0a3c] {
   background: linear-gradient(
     to left,
     var(--scalar-background-1) 64%,
     transparent
   );
 }
-.fade-request-section-content[data-v-48147b15]:dir(rtl) {
+.fade-request-section-content[data-v-50fd0a3c]:dir(rtl) {
   background: linear-gradient(
     to right,
     var(--scalar-background-1) 64%,
     transparent
   );
 }
-.filter-hover[data-v-48147b15] {
+.filter-hover[data-v-50fd0a3c] {
   height: 100%;
   padding-inline-end: 39px;
   padding-inline-start: 24px;
@@ -6139,12 +6163,12 @@ to {
   transition: width 0s ease-in-out 0.2s;
   overflow: hidden;
 }
-.filter-hover[data-v-48147b15]:hover,
-.filter-hover[data-v-48147b15]:has(:focus-visible) {
+.filter-hover[data-v-50fd0a3c]:hover,
+.filter-hover[data-v-50fd0a3c]:has(:focus-visible) {
   width: 100%;
   z-index: 10;
 }
-.filter-hover[data-v-48147b15]:before {
+.filter-hover[data-v-50fd0a3c]:before {
   content: '';
   position: absolute;
   top: 0;
@@ -6156,59 +6180,59 @@ to {
   transition: all 0.3s ease-in-out;
   pointer-events: none;
 }
-.filter-hover-item[data-v-48147b15] {
+.filter-hover-item[data-v-50fd0a3c] {
   opacity: 0;
 }
-.filter-hover-item[data-v-48147b15]:not(:last-of-type) {
+.filter-hover-item[data-v-50fd0a3c]:not(:last-of-type) {
   transform: translate3d(0, 3px, 0);
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15] {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c] {
   transition:
     opacity 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(1) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(1) {
   transition-delay: 0.05s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(2) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(2) {
   transition-delay: 0.1s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(3) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(3) {
   transition-delay: 0.15s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(4) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(4) {
   transition-delay: 0.2s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(5) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(5) {
   transition-delay: 0.25s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(6) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(6) {
   transition-delay: 0.3s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15]:nth-last-of-type(7) {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c]:nth-last-of-type(7) {
   transition-delay: 0.35s;
 }
-.filter-hover:hover .filter-hover-item[data-v-48147b15],
-.filter-hover:has(:focus-visible) .filter-hover-item[data-v-48147b15] {
+.filter-hover:hover .filter-hover-item[data-v-50fd0a3c],
+.filter-hover:has(:focus-visible) .filter-hover-item[data-v-50fd0a3c] {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }
-.filter-hover[data-v-48147b15]:hover:before,
-.filter-hover[data-v-48147b15]:has(:focus-visible):before {
+.filter-hover[data-v-50fd0a3c]:hover:before,
+.filter-hover[data-v-50fd0a3c]:has(:focus-visible):before {
   opacity: 0.9;
   backdrop-filter: blur(10px);
 }
-.filter-button[data-v-48147b15] {
+.filter-button[data-v-50fd0a3c] {
   top: 50%;
   transform: translateY(-50%);
 }
-.context-bar-group:hover .context-bar-group-hover\:text-c-1[data-v-48147b15],
-.context-bar-group:has(:focus-visible) .context-bar-group-hover\:text-c-1[data-v-48147b15] {
+.context-bar-group:hover .context-bar-group-hover\:text-c-1[data-v-50fd0a3c],
+.context-bar-group:has(:focus-visible) .context-bar-group-hover\:text-c-1[data-v-50fd0a3c] {
   --tw-text-opacity: 1;
   color: rgb(var(--scalar-color-1) / var(--tw-text-opacity));
 }
-.context-bar-group:hover .context-bar-group-hover\:hidden[data-v-48147b15],
-.context-bar-group:has(:focus-visible) .context-bar-group-hover\:hidden[data-v-48147b15] {
+.context-bar-group:hover .context-bar-group-hover\:hidden[data-v-50fd0a3c],
+.context-bar-group:has(:focus-visible) .context-bar-group-hover\:hidden[data-v-50fd0a3c] {
   display: none;
 }
 
@@ -6384,13 +6408,13 @@ to {
   color: var(--scalar-color-1);
 }
 
-.code-input-lite[data-v-9bca2f92] {
+.code-input-lite[data-v-360ebc3c] {
   /* Flex so the editor centres vertically in whatever height the cell gives us.
      Font properties inherit so we adopt the surrounding typography. */
   display: flex;
   align-items: center;
 }
-.code-input-lite__editor[data-v-9bca2f92] {
+.code-input-lite__editor[data-v-360ebc3c] {
   /* Everything font-related inherits from the surrounding context. */
   font: inherit;
   letter-spacing: inherit;
@@ -6412,7 +6436,7 @@ to {
   /* Positioning context for the absolutely positioned placeholder. */
   position: relative;
 }
-.code-input-lite__editor[data-v-9bca2f92]::-webkit-scrollbar {
+.code-input-lite__editor[data-v-360ebc3c]::-webkit-scrollbar {
   display: none;
 }
 
@@ -6420,7 +6444,7 @@ to {
    contenteditable; otherwise the caret would land after it on focus.
    `pointer-events: none` lets clicks fall through to focus the editor.
    Hidden on focus so it never renders on top of the text caret. */
-.code-input-lite--empty .code-input-lite__editor[data-v-9bca2f92]:not(:focus)::before {
+.code-input-lite--empty .code-input-lite__editor[data-v-360ebc3c]:not(:focus)::before {
   content: attr(data-placeholder);
   color: var(--scalar-color-3);
   pointer-events: none;
@@ -6431,7 +6455,7 @@ to {
   display: flex;
   align-items: center;
 }
-.code-input-lite--error .code-input-lite__editor[data-v-9bca2f92] {
+.code-input-lite--error .code-input-lite__editor[data-v-360ebc3c] {
   outline: 1px solid var(--scalar-color-red);
 }
 
@@ -6492,24 +6516,24 @@ to {
   font-size: var(--scalar-small);
 }
 
-[data-v-135d11b9] .code-input-lite__editor {
+[data-v-8e7de9be] .code-input-lite__editor {
   background-color: transparent;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
 }
-[data-v-135d11b9] .scalar-pill:not(:last-of-type) {
+[data-v-8e7de9be] .scalar-pill:not(:last-of-type) {
   margin-right: 0.15em;
 }
-[data-v-135d11b9] .scalar-pill:not(:first-of-type) {
+[data-v-8e7de9be] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
 /* Tailwind placeholder is busted */
-input[data-v-135d11b9]::placeholder {
+input[data-v-8e7de9be]::placeholder {
   color: var(--scalar-color-3);
 }
 /* we want our inputs to look like a password input but not be one */
-.scalar-password-input[data-v-135d11b9] {
+.scalar-password-input[data-v-8e7de9be] {
   text-security: disc;
   -webkit-text-security: disc;
   -moz-text-security: disc;
@@ -6537,20 +6561,20 @@ input[data-v-135d11b9]::placeholder {
   scrollbar-width: none;
 }
 
-.request-section-content[data-v-1bb88607] {
+.request-section-content[data-v-5bf07c90] {
   --scalar-border-width: 0.5px;
 }
-.request-section-content-filter[data-v-1bb88607] {
+.request-section-content-filter[data-v-5bf07c90] {
   box-shadow: 0 -10px 0 10px var(--scalar-background-1);
 }
-.request-item:focus-within .request-meta-buttons[data-v-1bb88607] {
+.request-item:focus-within .request-meta-buttons[data-v-5bf07c90] {
   opacity: 1;
 }
-.group-hover-input[data-v-1bb88607] {
+.group-hover-input[data-v-5bf07c90] {
   border-width: var(--scalar-border-width);
   border-color: transparent;
 }
-.group:hover .group-hover-input[data-v-1bb88607] {
+.group:hover .group-hover-input[data-v-5bf07c90] {
   background: color-mix(
     in srgb,
     var(--scalar-background-1),
@@ -6558,7 +6582,7 @@ input[data-v-135d11b9]::placeholder {
   );
   border-color: var(--scalar-border-color);
 }
-.group-hover-input[data-v-1bb88607]:focus {
+.group-hover-input[data-v-5bf07c90]:focus {
   background: transparent !important;
   border-color: var(--scalar-border-color) !important;
 }
@@ -6638,11 +6662,11 @@ input[data-v-135d11b9]::placeholder {
   opacity: 0;
 }
 
-.animate-response-heading .response-heading[data-v-2694e1a2] {
-  animation: push-response-2694e1a2 0.2s ease-in-out forwards;
+.animate-response-heading .response-heading[data-v-29000e66] {
+  animation: push-response-29000e66 0.2s ease-in-out forwards;
   opacity: 1;
 }
-@keyframes push-response-2694e1a2 {
+@keyframes push-response-29000e66 {
 from {
     opacity: 1;
     transform: translateY(0);
@@ -6652,11 +6676,11 @@ to {
     transform: translateY(-4px);
 }
 }
-.animate-response-heading .animate-response-children[data-v-2694e1a2] {
-  animation: response-spans-2694e1a2 0.2s ease-in-out forwards 0.05s;
+.animate-response-heading .animate-response-children[data-v-29000e66] {
+  animation: response-spans-29000e66 0.2s ease-in-out forwards 0.05s;
   opacity: 0;
 }
-@keyframes response-spans-2694e1a2 {
+@keyframes response-spans-29000e66 {
 from {
     opacity: 0;
     transform: translateY(4px);
@@ -6684,21 +6708,21 @@ to {
   background: var(--scalar-background-2);
 }
 
-[data-v-0e96b5b8] .cm-editor {
+[data-v-6edfa5a3] .cm-editor {
   height: 100%;
   outline: none;
   width: 100%;
 }
-[data-v-0e96b5b8] .cm-line {
+[data-v-6edfa5a3] .cm-line {
   padding: 0;
 }
-[data-v-0e96b5b8] .cm-content {
+[data-v-6edfa5a3] .cm-content {
   padding: 0;
   display: flex;
   align-items: center;
   font-size: var(--scalar-small);
 }
-.scroll-timeline-x[data-v-0e96b5b8] {
+.scroll-timeline-x[data-v-6edfa5a3] {
   -ms-overflow-style: none;
   /* Fade the URL at the viewport edges. Mask lives on the scrollport (this
      element) rather than on `.cm-scroller`, whose width follows the URL's
@@ -6711,31 +6735,31 @@ to {
     transparent 100%
   );
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8] {
+.scroll-timeline-x-hidden[data-v-6edfa5a3] {
   overflow-x: auto;
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8] .cm-scroller {
+.scroll-timeline-x-hidden[data-v-6edfa5a3] .cm-scroller {
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding-right: 20px;
   overflow: auto;
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8]::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-6edfa5a3]::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-hidden[data-v-0e96b5b8] .cm-scroller::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-6edfa5a3] .cm-scroller::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-address[data-v-0e96b5b8] {
+.scroll-timeline-x-address[data-v-6edfa5a3] {
   line-height: 27px;
   scrollbar-width: none; /* Firefox */
 }
 /* make clickable are to left of send button */
-.scroll-timeline-x-address[data-v-0e96b5b8]:after {
+.scroll-timeline-x-address[data-v-6edfa5a3]:after {
   content: '';
   position: absolute;
   height: 100%;
@@ -6743,7 +6767,7 @@ to {
   right: 0;
   cursor: text;
 }
-.address-bar-bg-states[data-v-0e96b5b8] {
+.address-bar-bg-states[data-v-6edfa5a3] {
   --scalar-address-bar-bg: color-mix(
     in srgb,
     var(--scalar-background-1),
@@ -6751,22 +6775,22 @@ to {
   );
   background: var(--scalar-address-bar-bg);
 }
-.address-bar-bg-states[data-v-0e96b5b8]:has(.cm-focused) {
+.address-bar-bg-states[data-v-6edfa5a3]:has(.cm-focused) {
   --scalar-address-bar-bg: var(--scalar-background-1);
   border-color: var(--scalar-border-color);
   outline-width: 1px;
   outline-style: solid;
 }
-.address-bar-bg-states:has(.cm-focused) .fade-left[data-v-0e96b5b8],
-.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-0e96b5b8] {
+.address-bar-bg-states:has(.cm-focused) .fade-left[data-v-6edfa5a3],
+.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-6edfa5a3] {
   --scalar-address-bar-bg: var(--scalar-background-1);
 }
 
-.app-exit-button[data-v-cf0538d1] {
+.app-exit-button[data-v-6e1ebfa0] {
   color: white;
   background: rgba(0, 0, 0, 0.1);
 }
-.app-exit-button[data-v-cf0538d1]:hover {
+.app-exit-button[data-v-6e1ebfa0]:hover {
   background: rgba(255, 255, 255, 0.1);
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@@ -6803,6 +6827,47 @@ to {
   bottom: 0;
 }
 
+/**
+ * The wide state is the default variant written out in plain CSS. Spelling it
+ * out here rather than reusing the utility classes keeps the narrow state below
+ * from having to outrank a utility of the same specificity.
+ */
+.scalar-sidebar-toggle--overlay[data-v-4a35414a] {
+  color: var(--scalar-color-3);
+  border-radius: var(--scalar-radius-md);
+  padding: 8px;
+}
+.scalar-sidebar-toggle--overlay[data-v-4a35414a]:hover {
+  background: var(--scalar-background-2);
+}
+.scalar-sidebar-toggle--overlay[data-v-4a35414a]:active {
+  color: var(--scalar-color-1);
+}
+
+/**
+ * Below the `lg` breakpoint (1000px) the toggle moves onto the dimmed backdrop
+ * and matches the close button in the opposite corner: white on a translucent
+ * fill, in a 36px circle. The padding is literal rather than a utility class so
+ * that circle matches that button even when this component is consumed from a
+ * build that generates its own utilities.
+ *
+ * The breakpoint is where the address bar stops being able to centre itself.
+ * The bar caps at 768px, so once the panel is narrower than roughly 870px the
+ * bar's left edge slides under a toggle sitting inside the panel and clips the
+ * method chip. `lg` clears that crossover with room to spare.
+ */
+@media (width < 1000px) {
+.scalar-sidebar-toggle--overlay[data-v-4a35414a] {
+    color: white;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: var(--scalar-radius-full);
+    padding: 10px;
+}
+.scalar-sidebar-toggle--overlay[data-v-4a35414a]:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+}
+
 [data-v-4b7f675d] .code-input-lite__editor {
   background-color: transparent;
   font-family: var(--scalar-font);
@@ -6816,7 +6881,7 @@ to {
   margin-left: 0.5px;
 }
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-.scalar .scalar-app-layout[data-v-0eebddf5] {
+.scalar .scalar-app-layout[data-v-44c68ca5] {
   background: var(--scalar-background-1);
   border: var(--scalar-border-width) solid var(--scalar-border-color);
   border-radius: 8px;
@@ -6828,12 +6893,12 @@ to {
   overflow: hidden;
 }
 @media (max-width: 720px) and (max-height: 480px) {
-.scalar .scalar-app-layout[data-v-0eebddf5] {
+.scalar .scalar-app-layout[data-v-44c68ca5] {
     height: 100%;
     max-height: 90svh;
 }
 }
-.scalar .scalar-app-exit[data-v-0eebddf5] {
+.scalar .scalar-app-exit[data-v-44c68ca5] {
   cursor: pointer;
   z-index: -1;
   background: #00000038;
@@ -6843,10 +6908,10 @@ to {
   top: 0;
   left: 0;
 }
-.dark-mode .scalar .scalar-app-exit[data-v-0eebddf5] {
+.dark-mode .scalar .scalar-app-exit[data-v-44c68ca5] {
   background: #00000073;
 }
-.scalar .scalar-app-exit[data-v-0eebddf5]:before {
+.scalar .scalar-app-exit[data-v-44c68ca5]:before {
   text-align: center;
   color: #fff;
   opacity: .6;
@@ -6858,10 +6923,10 @@ to {
   top: 0;
   right: 12px;
 }
-.scalar .scalar-app-exit[data-v-0eebddf5]:hover:before {
+.scalar .scalar-app-exit[data-v-44c68ca5]:hover:before {
   opacity: 1;
 }
-.scalar-container[data-v-0eebddf5] {
+.scalar-container[data-v-44c68ca5] {
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
@@ -6878,16 +6943,16 @@ to {
   left: 0;
   overflow: hidden;
 }
-.scalar-container.scalar-client--open[data-v-0eebddf5] {
+.scalar-container.scalar-client--open[data-v-44c68ca5] {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   transition: opacity .35s;
 }
-.scalar .url-form-input[data-v-0eebddf5] {
+.scalar .url-form-input[data-v-44c68ca5] {
   min-height: auto !important;
 }
-.scalar .scalar-container[data-v-0eebddf5] {
+.scalar .scalar-container[data-v-44c68ca5] {
   line-height: normal;
 }
 

package/package.json

@@ -19,7 +19,7 @@
     "testing",
     "react"
   ],
-  "version": "2.0.51",
+  "version": "2.0.52",
   "engines": {
     "node": ">=22"
   },
@@ -39,10 +39,10 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/api-client": "3.21.1",
-    "@scalar/blocks": "0.4.0",
-    "@scalar/helpers": "0.15.0",
-    "@scalar/workspace-store": "0.67.0"
+    "@scalar/api-client": "3.21.2",
+    "@scalar/blocks": "0.4.1",
+    "@scalar/helpers": "0.16.0",
+    "@scalar/workspace-store": "0.67.1"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",