@scalar/api-client-react 2.0.24 → 2.0.26

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @scalar/api-client-react
 
+## 2.0.26
+
+## 2.0.25
+
 ## 2.0.24
 
 ## 2.0.23

package/dist/style.css

@@ -798,7 +798,7 @@
 .hljs.language-objectivec .hljs-meta {
   color: var(--scalar-color-1);
 }
-.hljs.language-objectivec .hljs-built_in, .hljs-built_in {
+.hljs.language-objectivec .hljs-built_in {
   color: var(--scalar-color-orange);
 }
 .scalar-app .markdown {
@@ -1431,7 +1431,7 @@
 }
 :where(body) > .scalar-tooltip {
   --scalar-tooltip-padding: 8px;
-  padding: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+  padding: var(--scalar-tooltip-padding);
   z-index: 99999;
   max-width: 320px;
   font-size: var(--scalar-font-size-5);
@@ -1441,9 +1441,20 @@
   overflow-wrap: break-word;
   color: var(--scalar-tooltip-color);
 }
+:where(body) > .scalar-tooltip[data-side="top"] {
+  padding-bottom: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+:where(body) > .scalar-tooltip[data-side="bottom"] {
+  padding-top: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+:where(body) > .scalar-tooltip[data-side="left"] {
+  padding-right: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
+:where(body) > .scalar-tooltip[data-side="right"] {
+  padding-left: calc(var(--scalar-tooltip-padding) + var(--scalar-tooltip-offset));
+}
 :where(body) > .scalar-tooltip:before {
   content: "";
-  inset: var(--scalar-tooltip-offset);
   z-index: calc(1 * -1);
   border-radius: var(--scalar-radius);
   background-color: var(--scalar-tooltip-background);
@@ -1451,6 +1462,19 @@
   -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
   position: absolute;
+  inset: 0;
+}
+:where(body) > .scalar-tooltip[data-side="top"]:before {
+  bottom: var(--scalar-tooltip-offset);
+}
+:where(body) > .scalar-tooltip[data-side="bottom"]:before {
+  top: var(--scalar-tooltip-offset);
+}
+:where(body) > .scalar-tooltip[data-side="left"]:before {
+  right: var(--scalar-tooltip-offset);
+}
+:where(body) > .scalar-tooltip[data-side="right"]:before {
+  left: var(--scalar-tooltip-offset);
 }
 :where(body.dark-mode) > .scalar-tooltip:before {
   --tw-shadow: inset 0 0 0 var(--tw-shadow-color, var(--scalar-border-width)) var(--scalar-border-color);
@@ -1690,9 +1714,15 @@
 .scalar-app .inset-y-0\.5 {
   inset-block: 2px;
 }
+.scalar-app .-start {
+  inset-inline-start: -4px;
+}
 .scalar-app .start {
   inset-inline-start: 4px;
 }
+.scalar-app .-end {
+  inset-inline-end: -4px;
+}
 .scalar-app .end {
   inset-inline-end: 4px;
 }
@@ -3857,13 +3887,13 @@
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
 }
-.scalar-app .group-has-\[\.cm-focused\]\:z-1:is(:where(.group):has(.cm-focused) *) {
+.scalar-app .group-has-\[\.cm-focused\]\:z-1:is(:where(.group):has(.cm-focused) *), .scalar-app .group-has-\[\.code-input-lite__editor\:focus\]\:z-1:is(:where(.group):has(:is(.code-input-lite editor:focus)) *) {
   z-index: 1;
 }
-.scalar-app .group-has-\[\.cm-focused\]\:flex:is(:where(.group):has(.cm-focused) *) {
+.scalar-app .group-has-\[\.code-input-lite__editor\:focus\]\:flex:is(:where(.group):has(:is(.code-input-lite editor:focus)) *) {
   display: flex;
 }
-.scalar-app .group-has-\[\.cm-focused\]\:pr-10:is(:where(.group):has(.cm-focused) *) {
+.scalar-app .group-has-\[\.code-input-lite__editor\:focus\]\:pr-10:is(:where(.group):has(:is(.code-input-lite editor:focus)) *) {
   padding-right: 40px;
 }
 .scalar-app .group-has-\[\:focus-visible\]\/cell\:border-c-accent:is(:where(.group\/cell):has(:focus-visible) *) {
@@ -3957,7 +3987,7 @@
 .scalar-app .peer-focus-visible\/button\:opacity-100:is(:where(.peer\/button):focus-visible ~ *) {
   opacity: 1;
 }
-.scalar-app .peer-has-\[\.cm-focused\]\:opacity-0:is(:where(.peer):has(.cm-focused) ~ *) {
+.scalar-app .peer-has-\[\.cm-focused\]\:opacity-0:is(:where(.peer):has(.cm-focused) ~ *), .scalar-app .peer-has-\[\.code-input-lite__editor\:focus\]\:opacity-0:is(:where(.peer):has(:is(.code-input-lite editor:focus)) ~ *) {
   opacity: 0;
 }
 .scalar-app .peer-has-\[\.color-selector\]\:hidden:is(:where(.peer):has(.color-selector) ~ *) {
@@ -4892,23 +4922,23 @@ to {
 /*
    Deep styling for customizing Codemirror
   */
-[data-v-3118bf46] .cm-editor {
+[data-v-d6fb2049] .cm-editor {
   height: 100%;
   outline: none;
   padding: 0;
   background: transparent;
 }
-[data-v-3118bf46] .cm-placeholder {
+[data-v-d6fb2049] .cm-placeholder {
   color: var(--scalar-color-3);
 }
-[data-v-3118bf46] .cm-content {
+[data-v-d6fb2049] .cm-content {
   font-family: var(--scalar-font-code);
   font-size: var(--scalar-small);
   max-height: 20px;
   padding: 8px 0;
 }
 /* Tooltip helper */
-[data-v-3118bf46] .cm-tooltip {
+[data-v-d6fb2049] .cm-tooltip {
   background: transparent !important;
   filter: brightness(var(--scalar-lifted-brightness));
   border-radius: var(--scalar-radius);
@@ -4917,43 +4947,43 @@ to {
   outline: none !important;
   overflow: hidden !important;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul li {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul li {
   padding: 3px 6px !important;
 }
-[data-v-3118bf46] .cm-completionIcon-type:after {
+[data-v-d6fb2049] .cm-completionIcon-type:after {
   color: var(--scalar-color-3) !important;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul li[aria-selected] {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul li[aria-selected] {
   background: var(--scalar-background-2) !important;
   color: var(--scalar-color-1) !important;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul {
   padding: 6px !important;
   position: relative;
 }
-[data-v-3118bf46] .cm-tooltip-autocomplete ul li:hover {
+[data-v-d6fb2049] .cm-tooltip-autocomplete ul li:hover {
   border-radius: 3px;
   color: var(--scalar-color-1) !important;
   background: var(--scalar-background-3) !important;
 }
 /* Disable active line highlighting */
-[data-v-3118bf46] .cm-activeLine,[data-v-3118bf46] .cm-activeLineGutter {
+[data-v-d6fb2049] .cm-activeLine,[data-v-d6fb2049] .cm-activeLineGutter {
   background-color: transparent;
 }
 /* Color selection matching */
-[data-v-3118bf46] .cm-selectionMatch,[data-v-3118bf46] .cm-matchingBracket {
+[data-v-d6fb2049] .cm-selectionMatch,[data-v-d6fb2049] .cm-matchingBracket {
   border-radius: var(--scalar-radius);
   background: var(--scalar-background-4) !important;
 }
 /* Color Picker Swatches */
-[data-v-3118bf46] .cm-css-color-picker-wrapper {
+[data-v-d6fb2049] .cm-css-color-picker-wrapper {
   display: inline-flex;
   outline: 1px solid var(--scalar-background-3);
   border-radius: 3px;
   overflow: hidden;
 }
 /* Number gutter */
-[data-v-3118bf46] .cm-gutters {
+[data-v-d6fb2049] .cm-gutters {
   background-color: transparent;
   border-right: none;
   color: var(--scalar-color-3);
@@ -4961,7 +4991,7 @@ to {
   line-height: 22px;
   border-radius: 0 0 0 3px;
 }
-[data-v-3118bf46] .cm-gutters:before {
+[data-v-d6fb2049] .cm-gutters:before {
   content: '';
   position: absolute;
   top: 2px;
@@ -4971,7 +5001,7 @@ to {
   border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);
   background-color: var(--scalar-background-1);
 }
-[data-v-3118bf46] .cm-gutterElement {
+[data-v-d6fb2049] .cm-gutterElement {
   font-family: var(--scalar-font-code) !important;
   padding-left: 0px !important;
   padding-right: 6px !important;
@@ -4980,16 +5010,16 @@ to {
   justify-content: flex-end;
   position: relative;
 }
-[data-v-3118bf46] .cm-lineNumbers .cm-gutterElement {
+[data-v-d6fb2049] .cm-lineNumbers .cm-gutterElement {
   min-width: fit-content;
 }
-[data-v-3118bf46] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
+[data-v-d6fb2049] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
   padding-left: 0 !important;
 }
-[data-v-3118bf46] .cm-scroller {
+[data-v-d6fb2049] .cm-scroller {
   overflow: auto;
 }
-.line-wrapping[data-v-3118bf46]:focus-within .cm-content {
+.line-wrapping[data-v-d6fb2049]:focus-within .cm-content {
   display: inline-table;
   min-height: fit-content;
   padding: 3px 6px;
@@ -5062,21 +5092,21 @@ to {
 .description[data-v-649f9a0d] .markdown > *:first-child {
   margin-top: 0;
 }
-[data-v-372238a6] .cm-editor {
+[data-v-d37cbfcc] .cm-editor {
   height: 100%;
   outline: none;
   width: 100%;
 }
-[data-v-372238a6] .cm-line {
+[data-v-d37cbfcc] .cm-line {
   padding: 0;
 }
-[data-v-372238a6] .cm-content {
+[data-v-d37cbfcc] .cm-content {
   padding: 0;
   display: flex;
   align-items: center;
   font-size: var(--scalar-small);
 }
-.scroll-timeline-x[data-v-372238a6] {
+.scroll-timeline-x[data-v-d37cbfcc] {
   -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
@@ -5089,31 +5119,31 @@ to {
     transparent 100%
   );
 }
-.scroll-timeline-x-hidden[data-v-372238a6] {
+.scroll-timeline-x-hidden[data-v-d37cbfcc] {
   overflow-x: auto;
 }
-.scroll-timeline-x-hidden[data-v-372238a6] .cm-scroller {
+.scroll-timeline-x-hidden[data-v-d37cbfcc] .cm-scroller {
   scrollbar-width: none;
   -ms-overflow-style: none;
   padding-right: 20px;
   overflow: auto;
 }
-.scroll-timeline-x-hidden[data-v-372238a6]::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-d37cbfcc]::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-hidden[data-v-372238a6] .cm-scroller::-webkit-scrollbar {
+.scroll-timeline-x-hidden[data-v-d37cbfcc] .cm-scroller::-webkit-scrollbar {
   width: 0;
   height: 0;
   display: none;
 }
-.scroll-timeline-x-address[data-v-372238a6] {
+.scroll-timeline-x-address[data-v-d37cbfcc] {
   line-height: 27px;
   scrollbar-width: none; /* Firefox */
 }
 /* make clickable are to left of send button */
-.scroll-timeline-x-address[data-v-372238a6]:after {
+.scroll-timeline-x-address[data-v-d37cbfcc]:after {
   content: '';
   position: absolute;
   height: 100%;
@@ -5121,12 +5151,12 @@ to {
   right: 0;
   cursor: text;
 }
-.scroll-timeline-x-address[data-v-372238a6]:empty:before {
+.scroll-timeline-x-address[data-v-d37cbfcc]:empty:before {
   content: 'Enter URL or cURL request';
   color: var(--scalar-color-3);
   pointer-events: none;
 }
-.address-bar-bg-states[data-v-372238a6] {
+.address-bar-bg-states[data-v-d37cbfcc] {
   --scalar-address-bar-bg: color-mix(
     in srgb,
     var(--scalar-background-1),
@@ -5134,12 +5164,16 @@ to {
   );
   background: var(--scalar-address-bar-bg);
 }
-.address-bar-bg-states[data-v-372238a6]:has(.cm-focused) {
+.address-bar-bg-states[data-v-d37cbfcc]: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-d37cbfcc],
+.address-bar-bg-states:has(.cm-focused) .fade-right[data-v-d37cbfcc] {
+  --scalar-address-bar-bg: var(--scalar-background-1);
+}
 .app-exit-button[data-v-42c563b3] {
   color: white;
   background: rgba(0, 0, 0, 0.1);
@@ -5235,33 +5269,107 @@ to {
 .context-bar-group:has(:focus-visible) .context-bar-group-hover\:hidden[data-v-07ff8fc3] {
   display: none;
 }
-[data-v-36811e28] .cm-editor {
-  padding: 0;
+.code-input-lite[data-v-1974e80d] {
+  /* 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-1974e80d] {
+  /* Everything font-related inherits from the surrounding context. */
+  font: inherit;
+  letter-spacing: inherit;
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  outline: none;
+  color: var(--scalar-color-1);
+  caret-color: var(--scalar-color-1);
+  /* Single-line: horizontal scroll keeps the caret visible for long values;
+     the scrollbar itself is hidden (would be noisy inside a table cell). */
+  white-space: pre;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  padding: 0 0.5em;
+  box-sizing: border-box;
+  line-height: 1.44;
+  /* Positioning context for the absolutely positioned placeholder. */
+  position: relative;
+}
+.code-input-lite__editor[data-v-1974e80d]::-webkit-scrollbar {
+  display: none;
 }
-[data-v-36811e28] .cm-content {
+/* Absolute so the placeholder does not occupy flow space inside the
+   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-1974e80d]:not(:focus)::before {
+  content: attr(data-placeholder);
+  color: var(--scalar-color-3);
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0.5em;
+  display: flex;
   align-items: center;
+}
+.code-input-lite--error .code-input-lite__editor[data-v-1974e80d] {
+  outline: 1px solid var(--scalar-color-red);
+}
+/* Pill styling. Each pill is `<span contenteditable="false">name</span>` —
+   an atomic widget; the caret lands before or after it, never inside. */
+.scalar-pill {
+  color: var(--scalar-color-2);
+  border-radius: 30px;
+  display: inline-block;
+  font-family: var(--scalar-font-code);
+  font-size: 0.9em;
+  line-height: 1.4;
+  vertical-align: baseline;
+  background: var(--scalar-background-3);
+  padding: 0.125em 0.6em;
+  margin-right: 0.35em;
+  cursor: text;
+  /* Single click selects the whole pill — chip/mention model, deletes in one go. */
+  user-select: all;
+  -webkit-user-select: all;
+}
+.dark-mode .scalar-pill {
+  background: color-mix(
+    in srgb,
+    var(--tw-bg-base, var(--scalar-color-1)),
+    transparent 90%
+  );
+}
+.light-mode .scalar-pill {
+  background: var(--scalar-background-3);
+}
+.scalar-pill--context-fn {
+  /* Inset box-shadow as a border so the layout box stays identical to plain pills. */
+  box-shadow: 0 0 0 1px
+    color-mix(in srgb, var(--scalar-color-3), transparent 35%) inset;
+}
+.dark-mode .scalar-pill--context-fn {
+  background: color-mix(in srgb, var(--scalar-background-3), transparent 55%);
+}
+.light-mode .scalar-pill--context-fn {
+  background: color-mix(in srgb, var(--scalar-background-3), transparent 40%);
+}
+[data-v-e83eb7d0] .code-input-lite__editor {
   background-color: transparent;
-  display: flex;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
-  width: 100%;
-}
-[data-v-36811e28] .cm-content:has(.cm-pill) {
-  padding: 5px 8px;
 }
-[data-v-36811e28] .cm-content .cm-pill:not(:last-of-type) {
-  margin-right: 0.5px;
+[data-v-e83eb7d0] .scalar-pill:not(:last-of-type) {
+  margin-right: 0.15em;
 }
-[data-v-36811e28] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-e83eb7d0] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-36811e28] .cm-line {
-  overflow: hidden;
-  padding: 0;
-  text-overflow: ellipsis;
-}
-.filemask[data-v-36811e28] {
+.filemask[data-v-e83eb7d0] {
   mask-image: linear-gradient(
     to right,
     transparent 0,
@@ -5292,42 +5400,27 @@ to {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-[data-v-1ee3c31d] .cm-editor {
-  padding: 0;
-}
-[data-v-1ee3c31d] .cm-content {
-  align-items: center;
+[data-v-a6f4752a] .code-input-lite__editor {
   background-color: transparent;
-  display: flex;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
-  width: 100%;
-}
-[data-v-1ee3c31d] .cm-content:has(.cm-pill) {
-  padding: 5px 8px;
 }
-[data-v-1ee3c31d] .cm-content .cm-pill:not(:last-of-type) {
-  margin-right: 0.5px;
+[data-v-a6f4752a] .scalar-pill:not(:last-of-type) {
+  margin-right: 0.15em;
 }
-[data-v-1ee3c31d] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-a6f4752a] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-1ee3c31d] .cm-line {
-  overflow: hidden;
-  padding: 0;
-  text-overflow: ellipsis;
-  word-break: break-word;
-}
-.required[data-v-1ee3c31d]::after {
+.required[data-v-a6f4752a]::after {
   content: 'Required';
 }
 /* Tailwind placeholder is busted */
-input[data-v-1ee3c31d]::placeholder {
+input[data-v-a6f4752a]::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-1ee3c31d] {
+.scalar-password-input[data-v-a6f4752a] {
   text-security: disc;
   -webkit-text-security: disc;
   -moz-text-security: disc;
@@ -5523,32 +5616,18 @@ to {
   right: 0;
   bottom: 0;
 }
-[data-v-69be2d6c] .cm-editor {
-  padding: 0;
-}
-[data-v-69be2d6c] .cm-content {
-  align-items: center;
+[data-v-5b336842] .code-input-lite__editor {
   background-color: transparent;
-  display: flex;
   font-family: var(--scalar-font);
   font-size: var(--scalar-small);
   padding: 5px 8px;
-  width: 100%;
-}
-[data-v-69be2d6c] .cm-content:has(.cm-pill) {
-  padding: 5px 8px;
 }
-[data-v-69be2d6c] .cm-content .cm-pill:not(:last-of-type) {
-  margin-right: 0.5px;
+[data-v-5b336842] .scalar-pill:not(:last-of-type) {
+  margin-right: 0.15em;
 }
-[data-v-69be2d6c] .cm-content .cm-pill:not(:first-of-type) {
+[data-v-5b336842] .scalar-pill:not(:first-of-type) {
   margin-left: 0.5px;
 }
-[data-v-69be2d6c] .cm-line {
-  overflow: hidden;
-  padding: 0;
-  text-overflow: ellipsis;
-}
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 .scalar .scalar-app-layout[data-v-77897d1c] {
   background: var(--scalar-background-1);

package/package.json

@@ -19,7 +19,7 @@
     "testing",
     "react"
   ],
-  "version": "2.0.24",
+  "version": "2.0.26",
   "engines": {
     "node": ">=22"
   },
@@ -39,9 +39,9 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@scalar/api-client": "3.10.2",
-    "@scalar/helpers": "0.8.2",
-    "@scalar/workspace-store": "0.54.2"
+    "@scalar/api-client": "3.10.4",
+    "@scalar/workspace-store": "0.54.4",
+    "@scalar/helpers": "0.8.2"
   },
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",