@scalar/api-client 2.1.36 → 2.1.38

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @scalar/api-client
 
+## 2.1.38
+
+### Patch Changes
+
+- cf4e9c4: fix(components): resize and scroll scalar listbox and dropdown
+- 743474e: feat: adds environment custom colors
+- cfe9b85: fix: added safe parsing for oauth examples
+- 0fb3a41: fix: sets default environment variable value
+- 417e0c7: feat(api-client): add download button to scalar web
+- 0e19781: feat: fix reactivitiy of references + client
+- Updated dependencies [fb798c8]
+- Updated dependencies [cf4e9c4]
+- Updated dependencies [3bec045]
+- Updated dependencies [743474e]
+- Updated dependencies [cfe9b85]
+- Updated dependencies [4d45f7b]
+- Updated dependencies [6599473]
+- Updated dependencies [bb3dc9d]
+- Updated dependencies [0e19781]
+  - @scalar/types@0.0.18
+  - @scalar/components@0.12.63
+  - @scalar/oas-utils@0.2.65
+  - @scalar/themes@0.9.45
+  - @scalar/object-utils@1.1.11
+  - @scalar/use-codemirror@0.11.30
+
+## 2.1.37
+
+### Patch Changes
+
+- Updated dependencies [931106f]
+  - @scalar/oas-utils@0.2.64
+
 ## 2.1.36
 
 ### Patch Changes

package/dist/components/AddressBar/AddressBarServer.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBarServer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBarServer.vue"],"names":[],"mappings":";AA8YA,wBAKG"}
+{"version":3,"file":"AddressBarServer.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AddressBar/AddressBarServer.vue"],"names":[],"mappings":";AAgZA,wBAKG"}

package/dist/components/AddressBar/AddressBarServer.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as O, computed as c, watch as R, openBlock as l, createBlock as S, unref as n, withCtx as k, createElementBlock as o, createCommentVNode as v, Fragment as m, renderList as g, createVNode as p, createElementVNode as i, withModifiers as V, toDisplayString as b } from "vue";
+import { defineComponent as O, computed as c, watch as R, openBlock as l, createBlock as S, unref as n, withCtx as w, createElementBlock as o, createCommentVNode as v, Fragment as m, renderList as g, createVNode as p, createElementVNode as i, withModifiers as V, toDisplayString as b } from "vue";
 import { ScalarDropdown as W, ScalarDropdownDivider as C, ScalarDropdownItem as E, ScalarIcon as I } from "@scalar/components";
 import D from "./AddressBarServerItem.vue.js";
 import { useWorkspace as L } from "../../store/store.js";
@@ -12,7 +12,7 @@ const M = {
   __name: "AddressBarServer",
   setup(P) {
     const {
-      activeRequest: w,
+      activeRequest: k,
       activeCollection: h,
       activeServer: x,
       isReadOnly: A,
@@ -22,7 +22,7 @@ const M = {
     } = L(), d = c(
       () => {
         var t, e;
-        return (e = (t = w.value) == null ? void 0 : t.servers) == null ? void 0 : e.map((r) => {
+        return (e = (t = k.value) == null ? void 0 : t.servers) == null ? void 0 : e.map((r) => {
           var s;
           return {
             id: r,
@@ -47,7 +47,7 @@ const M = {
         return ((t = d.value) == null ? void 0 : t.length) && ((e = u.value) == null ? void 0 : e.length);
       }
     );
-    R([h, w], ([t, e]) => {
+    R([h, k], ([t, e]) => {
       !t || t.selectedServerUid || e != null && e.selectedServerUid || B.edit(
         t.uid,
         "selectedServerUid",
@@ -64,9 +64,10 @@ const M = {
       var r, s;
       return d.value && ((r = d.value) == null ? void 0 : r.length) > 1 || u.value && ((s = u.value) == null ? void 0 : s.length) > 1 ? (l(), S(n(W), {
         key: 0,
+        class: "w-max",
         teleport: ".scalar-client"
       }, {
-        items: k(() => [
+        items: w(() => [
           _.value ? (l(), o("div", M, " Request Servers ")) : v("", !0),
           (l(!0), o(m, null, g(d.value, (a) => (l(), S(D, {
             key: a.id,
@@ -85,7 +86,7 @@ const M = {
           n(A) ? v("", !0) : (l(), o(m, { key: 2 }, [
             p(n(C)),
             p(n(E), null, {
-              default: k(() => [
+              default: w(() => [
                 i("div", {
                   class: "font-code text-xxs flex items-center gap-1.5",
                   onClick: U
@@ -103,7 +104,7 @@ const M = {
             })
           ], 64))
         ]),
-        default: k(() => [
+        default: w(() => [
           i("button", {
             class: "font-code lg:text-sm text-xs whitespace-nowrap border border-b-3 border-solid rounded px-1.5 py-0.5 text-c-2",
             type: "button",

package/dist/components/CodeInput/CodeInput.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.vue"],"names":[],"mappings":"AAAA,OAiYO,EAGL,KAAK,kBAAkB,EAGxB,MAAM,wBAAwB,CAAA;;kBAcb,OAAO;gBACT,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;WACR,MAAM;eACF,OAAO;oBACF,OAAO;iBACV,OAAO;;;;;;;;kBAlBN,OAAO;gBACT,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;WACR,MAAM;eACF,OAAO;oBACF,OAAO;iBACV,OAAO;;;;;;gBAfP,OAAO;iBAHN,OAAO;sBAMF,OAAO;kBAMX,OAAO;0BACC,OAAO;cAGnB,OAAO;mBACF,OAAO;;qBA6WG,GAAG;kBACN,GAAG;;AAlY9B,wBA2bC;AAcD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"CodeInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/CodeInput.vue"],"names":[],"mappings":"AAAA,OAmYO,EAGL,KAAK,kBAAkB,EAGxB,MAAM,wBAAwB,CAAA;;kBAcb,OAAO;gBACT,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;WACR,MAAM;eACF,OAAO;oBACF,OAAO;iBACV,OAAO;;;;;;;;kBAlBN,OAAO;gBACT,MAAM,GAAG,MAAM;YACnB,OAAO;iBACF,OAAO;kBACN,OAAO;WACd,OAAO;uBACK,OAAO;eACf,kBAAkB;wBACT,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;wBACnB,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI;kBACzB,MAAM;eACT,OAAO;mBACH,OAAO;2BACC,OAAO;WACvB,MAAM,EAAE;WACR,MAAM;eACF,OAAO;oBACF,OAAO;iBACV,OAAO;;;;;;gBAfP,OAAO;iBAHN,OAAO;sBAMF,OAAO;kBAMX,OAAO;0BACC,OAAO;cAGnB,OAAO;mBACF,OAAO;;qBA8WG,GAAG;kBACN,GAAG;;AAnY9B,wBA6bC;AAcD,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACpC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/CodeInput/CodeInput.vue.js

@@ -2,7 +2,7 @@ import o from "./CodeInput.vue2.js";
 /* empty css               */
 /* empty css               */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-37f39e63"]]);
+const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9645481b"]]);
 export {
-  f as default
+  a as default
 };

package/dist/components/CodeInput/CodeInput.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as j, useAttrs as L, ref as u, toRef as r, watch as Q, computed as P, openBlock as a, createElementBlock as c, Fragment as z, createBlock as y, mergeProps as G, unref as d, withKeys as h, withModifiers as _, renderSlot as D, createCommentVNode as w } from "vue";
+import { defineComponent as j, useAttrs as L, ref as u, toRef as r, watch as Q, computed as y, openBlock as a, createElementBlock as c, Fragment as z, createBlock as v, mergeProps as G, unref as i, withKeys as h, withModifiers as _, renderSlot as D, createCommentVNode as w } from "vue";
 import { useCodeMirror as H, useDropdown as J, colorPicker as X } from "@scalar/use-codemirror";
 import { nanoid as Y } from "nanoid";
 import q from "../DataTable/DataTableInputSelect.vue.js";
@@ -13,7 +13,7 @@ const te = ["id"], ne = {
   class: "required absolute centered-y right-0 pt-px pr-2 text-xxs text-c-3 bg-b-1 shadow-[-8px_0_4px_var(--scalar-background-1)] opacity-100 duration-150 transition-opacity peer-has-[.cm-focused]:opacity-0 pointer-events-none"
 }, ae = {
   inheritAttrs: !1
-}, me = /* @__PURE__ */ j({
+}, fe = /* @__PURE__ */ j({
   ...ae,
   __name: "CodeInput",
   props: {
@@ -38,94 +38,94 @@ const te = ["id"], ne = {
     importCurl: { type: Boolean }
   },
   emits: ["submit", "update:modelValue", "curl"],
-  setup(E, { expose: R, emit: $ }) {
-    var x;
-    const o = E, i = $, v = L(), O = v.id || `id-${Y()}`, g = u(!1), f = u(!1), V = u(""), B = u({ left: 0, top: 0 }), p = u(null), { activeEnvVariables: k, isReadOnly: C, environments: K, router: M } = le();
+  setup(R, { expose: $, emit: O }) {
+    var F;
+    const o = R, s = O, g = L(), K = g.id || `id-${Y()}`, V = u(!1), m = u(!1), B = u(""), k = u({ left: 0, top: 0 }), p = u(null), { activeEnvVariables: C, isReadOnly: S, activeEnvironment: x, router: M } = le();
     function A(e) {
       var l;
-      return e === o.modelValue ? null : o.importCurl && e.trim().toLowerCase().startsWith("curl") ? (i("curl", e), (l = n.value) == null || l.dispatch({
+      return e === o.modelValue ? null : o.importCurl && e.trim().toLowerCase().startsWith("curl") ? (s("curl", e), (l = n.value) == null || l.dispatch({
         changes: {
           from: 0,
           to: n.value.state.doc.length,
           insert: String(o.modelValue)
         }
-      }), null) : o.handleFieldChange ? o.handleFieldChange(e) : i("update:modelValue", e);
+      }), null) : o.handleFieldChange ? o.handleFieldChange(e) : s("update:modelValue", e);
     }
     function I(e) {
-      return o.handleFieldSubmit ? o.handleFieldSubmit(e) : i("submit", e);
+      return o.handleFieldSubmit ? o.handleFieldSubmit(e) : s("submit", e);
     }
     function N(e) {
-      g.value = !1, o.emitOnBlur && o.modelValue && I(e);
+      V.value = !1, o.emitOnBlur && o.modelValue && I(e);
     }
-    const m = [];
-    o.colorPicker && m.push(X), m.push(
+    const f = [];
+    o.colorPicker && f.push(X), f.push(
       Z({
-        environments: K,
-        activeEnvVariables: k,
-        isReadOnly: C
+        activeEnvironment: x,
+        activeEnvVariables: C,
+        isReadOnly: S
       }),
       ee
     );
-    const S = u(null), { codeMirror: n } = H({
+    const E = u(null), { codeMirror: n } = H({
       content: r(
         () => o.modelValue !== void 0 ? String(o.modelValue) : ""
       ),
       onChange: (e) => {
         A(e), U();
       },
-      onFocus: () => g.value = !0,
+      onFocus: () => V.value = !0,
       onBlur: (e) => N(e),
-      codeMirrorRef: S,
+      codeMirrorRef: E,
       disableTabIndent: r(() => o.disableTabIndent),
       disableEnter: r(() => o.disableEnter),
       disableCloseBrackets: r(() => o.disableCloseBrackets),
       lineNumbers: r(() => o.lineNumbers),
       language: r(() => o.language),
       lint: r(() => o.lint),
-      extensions: m,
+      extensions: f,
       placeholder: r(() => o.placeholder)
     });
-    (x = n.value) == null || x.focus(), Q(n, () => {
-      n.value && Object.prototype.hasOwnProperty.call(v, "autofocus") && n.value.focus();
+    (F = n.value) == null || F.focus(), Q(n, () => {
+      n.value && Object.prototype.hasOwnProperty.call(g, "autofocus") && n.value.focus();
     });
     const { handleDropdownSelect: T, updateDropdownVisibility: U } = J({
       codeMirror: n,
-      query: V,
-      showDropdown: f,
-      dropdownPosition: B
-    }), W = P(() => {
+      query: B,
+      showDropdown: m,
+      dropdownPosition: k
+    }), W = y(() => {
       var e;
       return o.type === "boolean" || (e = o.type) != null && e.includes("boolean") || o.nullable ? ["true", "false", "null"] : ["true", "false"];
     });
-    R({
+    $({
       focus: () => {
         var e;
         (e = n.value) == null || e.focus();
       }
     });
     const b = (e, l) => {
-      var s, t, F;
-      f.value && (e === "down" ? (l.preventDefault(), (s = p.value) == null || s.handleArrowKey("down")) : e === "up" ? (l.preventDefault(), (t = p.value) == null || t.handleArrowKey("up")) : e === "enter" && (l.preventDefault(), (F = p.value) == null || F.handleSelect()));
+      var d, t, P;
+      m.value && (e === "down" ? (l.preventDefault(), (d = p.value) == null || d.handleArrowKey("down")) : e === "up" ? (l.preventDefault(), (t = p.value) == null || t.handleArrowKey("up")) : e === "enter" && (l.preventDefault(), (P = p.value) == null || P.handleSelect()));
     };
     return (e, l) => {
-      var s;
+      var d;
       return a(), c(z, null, [
-        o.enum && o.enum.length ? (a(), y(q, {
+        o.enum && o.enum.length ? (a(), v(q, {
           key: 0,
           modelValue: o.modelValue,
           value: o.enum,
-          "onUpdate:modelValue": l[0] || (l[0] = (t) => i("update:modelValue", t))
-        }, null, 8, ["modelValue", "value"])) : o.type === "boolean" || (s = o.type) != null && s.includes("boolean") ? (a(), y(q, {
+          "onUpdate:modelValue": l[0] || (l[0] = (t) => s("update:modelValue", t))
+        }, null, 8, ["modelValue", "value"])) : o.type === "boolean" || (d = o.type) != null && d.includes("boolean") ? (a(), v(q, {
           key: 1,
           modelValue: o.modelValue,
           value: W.value,
-          "onUpdate:modelValue": l[1] || (l[1] = (t) => i("update:modelValue", t))
+          "onUpdate:modelValue": l[1] || (l[1] = (t) => s("update:modelValue", t))
         }, null, 8, ["modelValue", "value"])) : (a(), c("div", G({
           key: 2,
-          id: d(O)
+          id: i(K)
         }, e.$attrs, {
           ref_key: "codeMirrorRef",
-          ref: S,
+          ref: E,
           class: ["peer font-code w-full whitespace-nowrap overflow-hidden text-xs leading-[1.44] relative", {
             "flow-code-input--error": e.error
           }],
@@ -140,20 +140,21 @@ const te = ["id"], ne = {
         ])) : w("", !0),
         D(e.$slots, "icon", {}, void 0, !0),
         e.required ? (a(), c("div", re, " Required ")) : w("", !0),
-        f.value && o.withVariables && !d(C) ? (a(), y(oe, {
+        m.value && o.withVariables && !i(S) ? (a(), v(oe, {
           key: 5,
           ref_key: "dropdownRef",
           ref: p,
-          activeEnvVariables: P(() => d(k)),
-          dropdownPosition: B.value,
-          query: V.value,
-          router: d(M),
-          onSelect: d(T)
-        }, null, 8, ["activeEnvVariables", "dropdownPosition", "query", "router", "onSelect"])) : w("", !0)
+          activeEnvVariables: y(() => i(C)),
+          activeEnvironment: y(() => i(x)),
+          dropdownPosition: k.value,
+          query: B.value,
+          router: i(M),
+          onSelect: i(T)
+        }, null, 8, ["activeEnvVariables", "activeEnvironment", "dropdownPosition", "query", "router", "onSelect"])) : w("", !0)
       ], 64);
     };
   }
 });
 export {
-  me as default
+  fe as default
 };

package/dist/components/CodeInput/codeVariableWidget.d.ts

@@ -1,10 +1,9 @@
 import type { WorkspaceStore } from '../../store/index.js';
-import type { Environment } from '@scalar/oas-utils/entities/environment';
 import { Decoration, type DecorationSet, EditorView, ViewPlugin, type ViewUpdate } from '@scalar/use-codemirror';
 type ActiveParsedEnvironments = WorkspaceStore['activeEnvVariables'];
 type IsReadOnly = WorkspaceStore['isReadOnly'];
 export declare const pillPlugin: (props: {
-    environments: Record<string, Environment>;
+    activeEnvironment: WorkspaceStore["activeEnvironment"];
     activeEnvVariables: ActiveParsedEnvironments;
     isReadOnly: IsReadOnly;
 }) => ViewPlugin<{

package/dist/components/CodeInput/codeVariableWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"codeVariableWidget.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/codeVariableWidget.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAA;AAEzE,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EAEV,UAAU,EACV,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAA;AAG/B,KAAK,wBAAwB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAA;AACpE,KAAK,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,CAAA;AAiH9C,eAAO,MAAM,UAAU,UAAW;IAChC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAA;IACzC,kBAAkB,EAAE,wBAAwB,CAAA;IAC5C,UAAU,EAAE,UAAU,CAAA;CACvB;iBAGkB,aAAa;mBAMX,UAAU;2BAMF,UAAU;EAiCpC,CAAA;AAEH,eAAO,MAAM,gBAAgB,uCA8B3B,CAAA"}
+{"version":3,"file":"codeVariableWidget.d.ts","sourceRoot":"","sources":["../../../src/components/CodeInput/codeVariableWidget.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAI7C,OAAO,EACL,UAAU,EACV,KAAK,aAAa,EAClB,UAAU,EAEV,UAAU,EACV,KAAK,UAAU,EAEhB,MAAM,wBAAwB,CAAA;AAI/B,KAAK,wBAAwB,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAA;AACpE,KAAK,UAAU,GAAG,cAAc,CAAC,YAAY,CAAC,CAAA;AAqH9C,eAAO,MAAM,UAAU,UAAW;IAChC,iBAAiB,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAA;IACtD,kBAAkB,EAAE,wBAAwB,CAAA;IAC5C,UAAU,EAAE,UAAU,CAAA;CACvB;iBAGkB,aAAa;mBAMX,UAAU;2BAMF,UAAU;EAiCpC,CAAA;AAEH,eAAO,MAAM,gBAAgB,uCA8B3B,CAAA"}

package/dist/components/CodeInput/codeVariableWidget.js

@@ -1,37 +1,35 @@
 var v = Object.defineProperty;
-var u = (n, t, e) => t in n ? v(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var l = (n, t, e) => u(n, typeof t != "symbol" ? t + "" : t, e);
+var u = (a, t, e) => t in a ? v(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
+var l = (a, t, e) => u(a, typeof t != "symbol" ? t + "" : t, e);
 import { ScalarButton as h, ScalarIcon as f, ScalarTooltip as b } from "@scalar/components";
 import { variableRegex as g } from "@scalar/oas-utils/helpers";
-import { ViewPlugin as x, RangeSetBuilder as y, Decoration as w, EditorView as N, WidgetType as E } from "@scalar/use-codemirror";
-import { defineComponent as V, h as o, createApp as C } from "vue";
-import { parseEnvVariables as k } from "../../libs/environment-parser.js";
-const D = (n) => {
-  var e;
-  return ((e = n.value.find(
-    (a) => a.key === "color"
-  )) == null ? void 0 : e.value) || "grey";
-};
-class c extends E {
-  constructor(e, a, i, s) {
+import { ViewPlugin as x, RangeSetBuilder as y, Decoration as E, EditorView as w, WidgetType as N } from "@scalar/use-codemirror";
+import { defineComponent as C, h as o, createApp as V } from "vue";
+import { parseEnvVariables as D } from "../../libs/environment-parser.js";
+const R = (a) => a.value ? a.value.color : "#8E8E8E";
+class c extends N {
+  constructor(e, i, n, s) {
     super();
     l(this, "app");
-    l(this, "environments");
+    l(this, "activeEnvironment");
     l(this, "activeEnvVariables");
     l(this, "isReadOnly");
-    this.variableName = e, this.variableName = e, this.environments = a, this.activeEnvVariables = i, this.isReadOnly = s;
+    this.variableName = e, this.variableName = e, this.activeEnvironment = i, this.activeEnvVariables = n, this.isReadOnly = s;
   }
   toDOM() {
     const e = document.createElement("span");
     e.className = "cm-pill", e.textContent = `${this.variableName}`;
-    const a = V({
+    const i = C({
       props: { variableName: { type: String, default: null } },
       render: () => {
-        const i = k(this.activeEnvVariables.value).find(
+        const n = D(this.activeEnvVariables.value).find(
           (r) => r.key === this.variableName
         );
-        i && (e.className += ` bg-${D(this.activeEnvVariables)}`);
-        const s = i ? o("div", { class: "p-2" }, i.value) : o("div", { class: "divide-y divide-1/2 grid" }, [
+        n && e.style.setProperty(
+          "--tw-bg-base",
+          R(this.activeEnvironment)
+        );
+        const s = n ? o("div", { class: "p-2" }, n.value) : o("div", { class: "divide-y divide-1/2 grid" }, [
           o("span", { class: "p-2" }, "Variable not found"),
           !this.isReadOnly && o("div", { class: "p-1" }, [
             o(
@@ -72,7 +70,7 @@ class c extends E {
         );
       }
     });
-    return this.app = C(a, { variableName: this.variableName }), this.app.mount(e), e;
+    return this.app = V(i, { variableName: this.variableName }), this.app.mount(e), e;
   }
   destroy() {
     this.app && this.app.unmount();
@@ -84,7 +82,7 @@ class c extends E {
     return !1;
   }
 }
-const P = (n) => x.fromClass(
+const T = (a) => x.fromClass(
   class {
     constructor(t) {
       l(this, "decorations");
@@ -95,20 +93,20 @@ const P = (n) => x.fromClass(
     }
     buildDecorations(t) {
       const e = new y();
-      for (const { from: a, to: i } of t.visibleRanges) {
-        const s = t.state.doc.sliceString(a, i);
+      for (const { from: i, to: n } of t.visibleRanges) {
+        const s = t.state.doc.sliceString(i, n);
         let r;
         for (; (r = g.exec(s)) !== null; ) {
-          const d = a + r.index, m = d + r[0].length, p = r[1];
+          const d = i + r.index, m = d + r[0].length, p = r[1];
           e.add(
             d,
             m,
-            w.widget({
+            E.widget({
               widget: new c(
                 p,
-                n.environments,
-                n.activeEnvVariables,
-                n.isReadOnly
+                a.activeEnvironment,
+                a.activeEnvVariables,
+                a.isReadOnly
               ),
               side: 1
             })
@@ -121,25 +119,25 @@ const P = (n) => x.fromClass(
   {
     decorations: (t) => t.decorations
   }
-), T = N.domEventHandlers({
-  keydown(n, t) {
-    if (n.key === "Backspace") {
-      const { state: e } = t, { from: a, to: i } = e.selection.main;
-      if (a === 0 && i === e.doc.length)
+), $ = w.domEventHandlers({
+  keydown(a, t) {
+    if (a.key === "Backspace") {
+      const { state: e } = t, { from: i, to: n } = e.selection.main;
+      if (i === 0 && n === e.doc.length)
         return t.dispatch({
           changes: { from: 0, to: e.doc.length },
           selection: { anchor: 0 }
-        }), n.preventDefault(), !0;
-      if (a === i && a > 0 && e.doc.sliceString(a - 2, a) === "}}")
+        }), a.preventDefault(), !0;
+      if (i === n && i > 0 && e.doc.sliceString(i - 2, i) === "}}")
         return t.dispatch({
-          changes: { from: a - 2, to: i },
-          selection: { anchor: a - 2 }
-        }), n.preventDefault(), !0;
+          changes: { from: i - 2, to: n },
+          selection: { anchor: i - 2 }
+        }), a.preventDefault(), !0;
     }
     return !1;
   }
 });
 export {
-  T as backspaceCommand,
-  P as pillPlugin
+  $ as backspaceCommand,
+  T as pillPlugin
 };

package/dist/components/SideNav/SideNav.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SideNav/SideNav.vue"],"names":[],"mappings":";AA8KA,wBAKG"}
+{"version":3,"file":"SideNav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SideNav/SideNav.vue"],"names":[],"mappings":";AAiPA,wBAKG"}

package/dist/components/SideNav/SideNav.vue.js

@@ -1,7 +1,7 @@
 import o from "./SideNav.vue2.js";
 /* empty css             */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-356a8069"]]);
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-fa61e0e1"]]);
 export {
-  p as default
+  f as default
 };

package/dist/components/SideNav/SideNav.vue2.js

@@ -1,34 +1,39 @@
-import { defineComponent as d, openBlock as n, createElementBlock as i, createElementVNode as e, Fragment as u, renderList as x, unref as o, createVNode as r, withCtx as m, createTextVNode as f, toDisplayString as v } from "vue";
-import { ROUTES as y } from "../../constants.js";
-import { useRouter as N } from "vue-router";
-import h from "./SideHelp.vue.js";
-import _ from "./SideNavLink.vue.js";
+import { defineComponent as _, openBlock as a, createElementBlock as n, createElementVNode as e, Fragment as u, renderList as x, unref as t, createVNode as o, withCtx as m, createTextVNode as p, toDisplayString as v } from "vue";
+import { ROUTES as h } from "../../constants.js";
+import { ScalarIcon as y } from "@scalar/components";
+import { useRouter as b } from "vue-router";
+import N from "./SideHelp.vue.js";
+import d from "./SideNavLink.vue.js";
 const S = {
   "aria-label": "App Navigation",
-  class: "text-c-2 sm:w-13 flex sm:flex-col justify-center items-center px-2 py-2 scalar-sidenav relative drag-region bg-b-1",
+  class: "text-c-2 sm:w-13 flex sm:flex-col justify-center items-center px-2 py-2 scalar-sidenav relative drag-region bg-b-1 group-sidenav",
   role: "navigation"
-}, b = { class: "flex sm:flex-col gap-1.5" }, k = { class: "mt-auto flex sm:flex-col gap-1.5 py-0.5" }, E = { class: "flex items-center no-drag-region" }, R = { class: "flex items-center no-drag-region" }, A = /* @__PURE__ */ d({
+}, w = { class: "flex sm:flex-col gap-1.5" }, k = { class: "mt-auto flex sm:flex-col gap-1.5 py-0.5" }, E = { class: "flex items-center no-drag-region" }, R = { class: "flex items-center no-drag-region" }, V = { class: "hide-in-scalar-app" }, j = {
+  class: "min-w-[37px] max-w-[37px] hover:bg-b-2 flex items-center justify-center rounded-lg p-[8px] text-c-3 focus:text-c-1 scalar-app-nav-padding group-hover/sidenav:border-1/2 group-sidenav-hover cursor-pointer",
+  href: "https://scalar.com/download",
+  target: "_blank"
+}, L = /* @__PURE__ */ _({
   __name: "SideNav",
-  setup(V) {
-    const { currentRoute: a } = N();
-    return (w, l) => (n(), i("nav", S, [
-      e("ul", b, [
-        (n(!0), i(u, null, x(o(y).filter(
-          (t) => t.name !== "settings"
-        ), ({ icon: t, name: s, prettyName: g }, p) => {
-          var c;
-          return n(), i("li", {
-            key: p,
+  setup(B) {
+    const { currentRoute: i } = b();
+    return (C, c) => (a(), n("nav", S, [
+      e("ul", w, [
+        (a(!0), n(u, null, x(t(h).filter(
+          (s) => s.name !== "settings"
+        ), ({ icon: s, name: r, prettyName: f }, g) => {
+          var l;
+          return a(), n("li", {
+            key: g,
             class: "no-drag-region"
           }, [
-            r(_, {
-              active: (c = o(a).name) == null ? void 0 : c.startsWith(s),
-              icon: t,
-              name: s,
-              prettyName: g
+            o(d, {
+              active: (l = t(i).name) == null ? void 0 : l.startsWith(r),
+              icon: s,
+              name: r,
+              prettyName: f
             }, {
               default: m(() => [
-                f(v(s), 1)
+                p(v(r), 1)
               ]),
               _: 2
             }, 1032, ["active", "icon", "name", "prettyName"])
@@ -37,25 +42,33 @@ const S = {
       ]),
       e("ul", k, [
         e("li", E, [
-          r(_, {
-            active: o(a).name === "settings",
+          o(d, {
+            active: t(i).name === "settings",
             icon: "Settings",
             name: "settings",
             prettyName: "Settings"
           }, {
-            default: m(() => l[0] || (l[0] = [
-              f(" Settings ")
+            default: m(() => c[0] || (c[0] = [
+              p(" Settings ")
             ])),
             _: 1
           }, 8, ["active"])
         ]),
         e("li", R, [
-          r(h)
+          o(N)
+        ]),
+        e("li", V, [
+          e("a", j, [
+            o(t(y), {
+              icon: "Download",
+              thickness: "1.5"
+            })
+          ])
         ])
       ])
     ]));
   }
 });
 export {
-  A as default
+  L as default
 };

package/dist/components/Sidebar/SidebarListElement.vue.d.ts

@@ -10,6 +10,7 @@ declare const _default: import("vue").DefineComponent<{
     isCopyable?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     delete: (id: string) => any;
+    colorModal: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
     variable: {
         uid: string;
@@ -22,6 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     isCopyable?: boolean;
 }> & Readonly<{
     onDelete?: ((id: string) => any) | undefined;
+    onColorModal?: ((id: string) => any) | undefined;
 }>, {
     isDeletable: boolean;
     isCopyable: boolean;

package/dist/components/Sidebar/SidebarListElement.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarListElement.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarListElement.vue"],"names":[],"mappings":";cAsFc;QACR,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,OAAO,CAAA;KACpB;qBACgB,MAAM;kBACT,OAAO;iBACR,OAAO;;;;cARV;QACR,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,OAAO,CAAA;KACpB;qBACgB,MAAM;kBACT,OAAO;iBACR,OAAO;;;;iBADN,OAAO;gBACR,OAAO;;AAyKxB,wBAUG"}
+{"version":3,"file":"SidebarListElement.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/SidebarListElement.vue"],"names":[],"mappings":";cA4Fc;QACR,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,OAAO,CAAA;KACpB;qBACgB,MAAM;kBACT,OAAO;iBACR,OAAO;;;;;cARV;QACR,GAAG,EAAE,MAAM,CAAA;QACX,IAAI,EAAE,MAAM,CAAA;QACZ,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,OAAO,CAAA;KACpB;qBACgB,MAAM;kBACT,OAAO;iBACR,OAAO;;;;;iBADN,OAAO;gBACR,OAAO;;AAqLxB,wBAWG"}

package/dist/components/Sidebar/SidebarListElement.vue.js

@@ -1,7 +1,7 @@
 import t from "./SidebarListElement.vue2.js";
 /* empty css                        */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ o(t, [["__scopeId", "data-v-271914bc"]]);
+const a = /* @__PURE__ */ o(t, [["__scopeId", "data-v-146f5335"]]);
 export {
   a as default
 };