@scalar/api-client 3.10.3 → 3.10.4

package/dist/vue-styles.css

@@ -70,23 +70,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);
@@ -95,43 +95,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);
@@ -139,7 +139,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;
@@ -149,7 +149,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;
@@ -158,16 +158,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;
@@ -243,21 +243,21 @@ to {
   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
@@ -270,31 +270,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%;
@@ -302,12 +302,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),
@@ -315,12 +315,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;
@@ -419,33 +423,110 @@ to {
   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;
 }
-[data-v-36811e28] .cm-content {
+.code-input-lite__editor[data-v-1974e80d]::-webkit-scrollbar {
+  display: none;
+}
+
+/* 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,
@@ -479,42 +560,27 @@ to {
   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-a6f4752a] .scalar-pill:not(:last-of-type) {
+  margin-right: 0.15em;
 }
-[data-v-1ee3c31d] .cm-content .cm-pill:not(:last-of-type) {
-  margin-right: 0.5px;
-}
-[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;
@@ -722,32 +788,18 @@ to {
   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

@@ -18,7 +18,7 @@
     "rest",
     "testing"
   ],
-  "version": "3.10.3",
+  "version": "3.10.4",
   "engines": {
     "node": ">=22"
   },
@@ -320,20 +320,20 @@
     "vue": "^3.5.30",
     "yaml": "^2.8.3",
     "zod": "^4.3.5",
-    "@scalar/components": "0.27.1",
+    "@scalar/components": "0.27.2",
     "@scalar/helpers": "0.8.2",
-    "@scalar/icons": "0.7.3",
     "@scalar/json-magic": "0.12.16",
     "@scalar/openapi-types": "0.9.1",
-    "@scalar/oas-utils": "0.18.4",
-    "@scalar/sidebar": "0.9.22",
+    "@scalar/oas-utils": "0.18.5",
+    "@scalar/icons": "0.7.3",
+    "@scalar/sidebar": "0.9.23",
+    "@scalar/snippetz": "0.9.17",
     "@scalar/themes": "0.16.0",
-    "@scalar/snippetz": "0.9.16",
-    "@scalar/use-hooks": "0.4.6",
-    "@scalar/types": "0.13.3",
-    "@scalar/use-codemirror": "0.14.11",
-    "@scalar/workspace-store": "0.54.3",
-    "@scalar/use-toasts": "0.10.2"
+    "@scalar/types": "0.14.0",
+    "@scalar/use-toasts": "0.10.2",
+    "@scalar/use-hooks": "0.4.7",
+    "@scalar/use-codemirror": "0.14.12",
+    "@scalar/workspace-store": "0.54.4"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.2.4",