@scalar/api-client 2.1.26 → 2.1.28

package/dist/views/Request/libs/live-sync.js

@@ -0,0 +1,289 @@
+import { isHTTPMethod as D } from "../../../components/HttpMethod/helpers.js";
+import { collectionSchema as b, requestSchema as O, serverSchema as V, tagSchema as M, oasOauthFlowSchema as H, securitySchemeSchema as S, createExampleFromRequest as j } from "@scalar/oas-utils/entities/spec";
+import { schemaModel as R } from "@scalar/oas-utils/helpers";
+import { getNestedValue as N } from "@scalar/object-utils/nested";
+import G from "microdiff";
+import { z as i } from "zod";
+const x = (e, r = []) => {
+  const t = [];
+  let s = !1;
+  for (let u = 0; u < e.length; u++) {
+    if (s) {
+      s = !1;
+      continue;
+    }
+    const a = e[u], n = e[u + 1];
+    if (r.length)
+      a.path = [...r, ...a.path], n && (n.path = [...r, ...n.path]);
+    else if (a.path[0] !== "paths") {
+      t.push(a);
+      continue;
+    }
+    if (a.type === "REMOVE" && (n == null ? void 0 : n.type) === "CREATE") {
+      const [, h, p] = a.path, [, o, l] = n.path, c = ["paths", o];
+      if (h !== o && t.push({
+        type: "CHANGE",
+        path: ["paths", "path"],
+        oldValue: h,
+        value: o
+      }), p && l && p !== l && (t.push({
+        type: "CHANGE",
+        path: ["paths", o, "method"],
+        oldValue: p,
+        value: l
+      }), c.push(l)), r.length === 0) {
+        const m = G(a.oldValue, n.value);
+        if (m.length) {
+          const E = x(m, c);
+          t.push(...E);
+        }
+      }
+      s = !0;
+    } else a.type === "CREATE" && a.path.length > 3 && typeof a.path.at(-1) != "number" ? t.push({ ...a, type: "CHANGE", oldValue: void 0 }) : a.type === "REMOVE" && a.path.length > 3 && typeof a.path.at(-1) != "number" ? t.push({ ...a, type: "CHANGE", value: void 0 }) : t.push(a);
+  }
+  return t;
+}, v = (e, r, t) => {
+  for (const s of e) {
+    const u = r[s];
+    if (t(u)) return u;
+  }
+  return null;
+}, y = (e) => e instanceof i.ZodOptional ? y(e.unwrap()) : e instanceof i.ZodDefault ? y(e._def.innerType) : e, C = (e, r) => {
+  let t = e;
+  for (const s of r) {
+    if (t = y(t), t instanceof i.ZodAny)
+      return t;
+    if (t instanceof i.ZodObject && typeof s == "string" && s in t.shape)
+      t = t.shape[s];
+    else if (t instanceof i.ZodArray)
+      if (typeof s == "number")
+        t = t.element;
+      else if (typeof s == "string")
+        if (t = t.element, t instanceof i.ZodObject && s in t.shape)
+          t = t.shape[s];
+        else
+          return null;
+      else
+        return null;
+    else if (t instanceof i.ZodRecord)
+      t = t.valueSchema;
+    else
+      return null;
+    t = y(t);
+  }
+  return t;
+}, f = (e, r) => {
+  const t = C(e, r.path);
+  if (!t) return null;
+  const s = r.path.join("."), u = r.path.slice(0, -1).join(".");
+  if (r.type === "REMOVE")
+    return {
+      path: s,
+      pathMinusOne: u,
+      value: void 0
+    };
+  const a = R(r.value, t, !1);
+  return a ? {
+    path: s,
+    pathMinusOne: u,
+    value: a
+  } : null;
+}, K = (e, { activeCollection: r, collectionMutators: t }) => {
+  if (!r.value) return !1;
+  if (typeof e.path[e.path.length - 1] == "number" && (e.type === "CREATE" || e.type === "REMOVE")) {
+    const s = f(b, {
+      ...e,
+      path: e.path
+    });
+    if (!s) return !1;
+    const u = [
+      ...N(r.value, s.pathMinusOne)
+    ];
+    e.type === "CREATE" ? u.push(s.value) : e.type === "REMOVE" && u.pop(), t.edit(
+      r.value.uid,
+      s.pathMinusOne,
+      u
+    );
+  } else {
+    const s = f(b, e);
+    if (!s) return !1;
+    t.edit(
+      r.value.uid,
+      s.path,
+      s.value
+    );
+  }
+  return !0;
+}, T = (e, r) => {
+  const { requests: t, requestExamples: s, requestExampleMutators: u } = r, a = t[e];
+  a == null || a.examples.forEach((n) => {
+    const h = j(
+      a,
+      s[n].name
+    );
+    h && u.set({
+      ...h,
+      uid: n
+    });
+  });
+}, L = (e, r) => {
+  const { activeCollection: t, requests: s, requestMutators: u } = r;
+  if (!t.value) return !1;
+  const [, a, n, ...h] = e.path;
+  if (a === "path" && e.type === "CHANGE")
+    t.value.requests.forEach((p) => {
+      s[p].path === e.oldValue && u.edit(p, "path", e.value);
+    });
+  else if (n === "method" && e.type === "CHANGE")
+    t.value.requests.forEach((p) => {
+      s[p].method === e.oldValue && s[p].path === a && u.edit(p, "method", e.value);
+    });
+  else if (e.type !== "CHANGE" && typeof h.at(-1) == "number") {
+    const p = v(
+      t.value.requests,
+      s,
+      (c) => c.path === a && c.method === n
+    ), o = f(O, {
+      ...e,
+      path: e.path.slice(3)
+    });
+    if (!p || !o) return !1;
+    const l = [...N(p, o.pathMinusOne)];
+    e.type === "CREATE" ? l.push(o.value) : e.type === "REMOVE" && l.pop(), u.edit(p.uid, o.pathMinusOne, l), (e.path[3] === "parameters" || e.path[3] === "requestBody") && T(p.uid, r);
+  } else if (e.type === "CREATE") {
+    const [[p, o]] = Object.entries(e.value), l = n ? e.value : o, c = n || p, m = V.array().parse(l.servers ?? []), { security: E, ...Z } = l, g = {
+      ...Z,
+      method: D(c) ? c : "get",
+      path: a,
+      parameters: l.parameters ?? [],
+      servers: m.map((d) => d.uid)
+    };
+    E != null && E.length && (g.security = E.map((d) => {
+      if (Object.keys(d).length) {
+        const [q] = Object.keys(d);
+        return {
+          [q]: d[q]
+        };
+      } else return d;
+    }));
+    const A = R(g, O, !1);
+    if (!A) return !1;
+    u.add(A, t.value.uid);
+  } else if (e.type === "REMOVE") {
+    const p = v(
+      t.value.requests,
+      s,
+      (o) => o.path === a && o.method === n
+    );
+    if (!p) return !1;
+    u.delete(p, t.value.uid);
+  } else if (e.type === "CHANGE") {
+    const p = v(
+      t.value.requests,
+      s,
+      (l) => l.path === a && l.method === n
+    ), o = f(O, { ...e, path: h });
+    if (!p || !o) return !1;
+    u.edit(p.uid, o.path, o.value), (e.path[3] === "parameters" || e.path[3] === "requestBody") && T(p.uid, r);
+  }
+  return !0;
+}, W = (e, { activeCollection: r, servers: t, serverMutators: s }) => {
+  if (!r.value) return !1;
+  const [, u, ...a] = e.path;
+  if (a != null && a.length) {
+    const n = r.value.servers[u], h = t[n], p = f(V, { ...e, path: a });
+    if (!h || !p) return !1;
+    const l = e.type === "REMOVE" && a[a.length - 1] === "variables" ? {} : p.value;
+    s.edit(n, p.path, l);
+  } else if (e.type === "REMOVE") {
+    if (!r.value.servers[u]) return !1;
+    s.delete(
+      r.value.servers[u],
+      r.value.uid
+    );
+  } else if (e.type === "CREATE") {
+    const n = R(e.value, V, !1);
+    if (!n) return !1;
+    s.add(n, r.value.uid);
+  }
+  return !0;
+}, I = (e, { activeCollection: r, tags: t, tagMutators: s }) => {
+  if (!r.value) return !1;
+  const [, u, ...a] = e.path;
+  if (a != null && a.length) {
+    const n = r.value.tags[u], h = t[n], p = f(M, { ...e, path: a });
+    if (!h || !p) return !1;
+    s.edit(n, p.path, p.value);
+  } else if (e.type === "REMOVE") {
+    const n = r.value.tags[u], h = t[n];
+    if (!h) return !1;
+    s.delete(h, r.value.uid);
+  } else if (e.type === "CREATE") {
+    const n = R(e.value, M, !1);
+    if (!n) return !1;
+    s.add(n, r.value.uid);
+  }
+  return !0;
+}, w = (e, r, t) => {
+  const s = y(e);
+  if (s instanceof i.ZodUnion || s instanceof i.ZodDiscriminatedUnion) {
+    for (const u of s.options)
+      if (u instanceof i.ZodObject && r in u.shape && u.shape[r] instanceof i.ZodLiteral && u.shape[r].value === t)
+        return u;
+  }
+  return null;
+}, J = (e, { activeCollection: r, securitySchemes: t, securitySchemeMutators: s }) => {
+  var h;
+  if (!r.value) return !1;
+  const [, , u, ...a] = e.path, n = t[u] ?? v(
+    r.value.securitySchemes,
+    t,
+    (p) => p.nameKey === u
+  );
+  if (a != null && a.length) {
+    if (!n) return !1;
+    const { schema: p, _path: o } = a[0] === "flows" && n.type === "oauth2" ? {
+      schema: w(
+        H,
+        "type",
+        (h = n == null ? void 0 : n.flow) == null ? void 0 : h.type
+      ),
+      _path: a.slice(2)
+    } : {
+      schema: w(
+        S,
+        "type",
+        n == null ? void 0 : n.type
+      ),
+      _path: a
+    };
+    if (o[0] === "scopes" && n.type === "oauth2") {
+      const m = { ...n.flow.scopes };
+      return e.type === "CREATE" || e.type === "CHANGE" ? m[o[1]] = e.value : delete m[o[1]], s.edit(n.uid, "flow.scopes", m), !0;
+    }
+    if (!p) return !1;
+    const l = f(p, { ...e, path: o });
+    if (!l) return !1;
+    const c = a[0] === "flows" ? ["flow", ...o].join(".") : l.path;
+    s.edit(n.uid, c, l.value);
+  } else if (e.type === "REMOVE") {
+    if (!n) return !1;
+    s.delete(n.uid);
+  } else e.type === "CREATE" && s.add(
+    S.parse(e.value),
+    r.value.uid
+  );
+  return !0;
+};
+export {
+  x as combineRenameDiffs,
+  v as findResource,
+  K as mutateCollectionDiff,
+  L as mutateRequestDiff,
+  J as mutateSecuritySchemeDiff,
+  W as mutateServerDiff,
+  I as mutateTagDiff,
+  w as narrowUnionSchema,
+  f as parseDiff,
+  C as traverseZodSchema
+};

package/dist/views/Request/types/sidebar-item.d.ts

@@ -10,6 +10,8 @@ export type SidebarItem = {
     icon?: string;
     edit: (name: string, icon?: string) => void;
     delete: () => void;
+    documentUrl?: string;
+    watchForChanges?: boolean;
 };
 export type SidebarMenuItem = {
     /** The resource which we are opening the menu for */

package/dist/views/Request/types/sidebar-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../src/views/Request/types/sidebar-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,OAAO,EACP,cAAc,EACd,aAAa,EACb,GAAG,EACJ,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,UAAU,GAAG,GAAG,GAAG,OAAO,GAAG,cAAc,CAAA;IACnD,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,qDAAqD;IACrD,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,EAAE,OAAO,CAAA;CACd,CAAA"}
+{"version":3,"file":"sidebar-item.d.ts","sourceRoot":"","sources":["../../../../src/views/Request/types/sidebar-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,UAAU,EACV,OAAO,EACP,cAAc,EACd,aAAa,EACb,GAAG,EACJ,MAAM,iCAAiC,CAAA;AAExC,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,UAAU,GAAG,GAAG,GAAG,OAAO,GAAG,cAAc,CAAA;IACnD,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,EAAE,MAAM,EAAE,CAAA;IAClB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,qDAAqD;IACrD,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,4DAA4D;IAC5D,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,EAAE,OAAO,CAAA;CACd,CAAA"}

package/dist/views/Settings/SettingsGeneral.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsGeneral.vue.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/SettingsGeneral.vue"],"names":[],"mappings":";AA+lBA,wBAKG"}
+{"version":3,"file":"SettingsGeneral.vue.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/SettingsGeneral.vue"],"names":[],"mappings":";AAwmBA,wBAKG"}

package/dist/views/Settings/SettingsGeneral.vue.js

@@ -1,12 +1,12 @@
-import { defineComponent as C, openBlock as a, createElementBlock as x, createElementVNode as e, createTextVNode as o, createVNode as i, unref as l, normalizeClass as d, withCtx as u, createBlock as p, createCommentVNode as b, Fragment as _, renderList as S, toDisplayString as j, normalizeStyle as m } from "vue";
-import { ScalarButton as k, ScalarIcon as g } from "@scalar/components";
-import { themeLabels as z } from "@scalar/themes";
-import B from "./SettingsGeneralMode.vue.js";
-import { useWorkspace as E } from "../../store/store.js";
-const N = { class: "bg-b-1 w-full h-full overflow-auto" }, P = { class: "flex flex-col px-5 py-5 max-w-[720px] ml-auto mr-auto w-full" }, T = { class: "gap-2 mt-4 mb-8 flex flex-col" }, V = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, $ = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, D = { class: "flex flex-col gap-2" }, L = { class: "grid grid-cols-2 gap-2" }, U = { class: "flex items-center gap-2" }, W = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, F = { class: "flex items-center gap-1" }, J = /* @__PURE__ */ C({
+import { defineComponent as _, openBlock as o, createElementBlock as x, createElementVNode as e, createStaticVNode as C, createVNode as c, unref as t, normalizeClass as i, withCtx as d, createBlock as u, createCommentVNode as p, createTextVNode as b, Fragment as S, renderList as j, toDisplayString as z, normalizeStyle as m } from "vue";
+import { ScalarButton as g, ScalarIcon as k } from "@scalar/components";
+import { themeLabels as B } from "@scalar/themes";
+import N from "./SettingsGeneralMode.vue.js";
+import { useWorkspace as V } from "../../store/store.js";
+const P = { class: "bg-b-1 w-full h-full overflow-auto" }, T = { class: "flex flex-col px-5 py-5 max-w-[720px] ml-auto mr-auto w-full" }, W = { class: "gap-2 mt-4 mb-8 flex flex-col" }, $ = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, U = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, E = { class: "flex flex-col gap-2" }, G = { class: "grid grid-cols-2 gap-2" }, L = { class: "flex items-center gap-2" }, O = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, R = { class: "flex items-center gap-1" }, K = /* @__PURE__ */ _({
   __name: "SettingsGeneral",
-  setup(G) {
-    const { activeWorkspace: n, workspaceMutators: y, proxyUrl: s, setProxyUrl: h } = E(), v = [
+  setup(q) {
+    const { activeWorkspace: a, workspaceMutators: y, proxyUrl: l, setProxyUrl: h } = V(), v = [
       "default",
       "alternate",
       "moon",
@@ -17,7 +17,7 @@ const N = { class: "bg-b-1 w-full h-full overflow-auto" }, P = { class: "flex fl
       "kepler",
       "mars",
       "deepSpace"
-    ], f = (c) => ({
+    ], f = (n) => ({
       default: { light: "#fff", dark: "#0f0f0f", accent: "#0099ff" },
       alternate: { light: "#f9f9f9", dark: "#131313", accent: "#e7e7e7" },
       moon: { light: "#ccc9b3", dark: "#313332", accent: "#645b0f" },
@@ -29,112 +29,102 @@ const N = { class: "bg-b-1 w-full h-full overflow-auto" }, P = { class: "flex fl
       mars: { light: "#f2efe8", dark: "#321116", accent: "#c75549" },
       deepSpace: { light: "#f4f4f5", dark: "#09090b", accent: "#8ab4f8" },
       none: { light: "#ffffff", dark: "#000000", accent: "#3b82f6" }
-    })[c] || { light: "#ffffff", dark: "#000000", accent: "#3b82f6" }, w = (c) => {
-      y.edit(n.value.uid, "themeId", c);
+    })[n] || { light: "#ffffff", dark: "#000000", accent: "#3b82f6" }, w = (n) => {
+      y.edit(a.value.uid, "themeId", n);
     };
-    return (c, t) => (a(), x("div", N, [
-      e("div", P, [
+    return (n, r) => (o(), x("div", P, [
+      e("div", T, [
         e("div", null, [
           e("div", null, [
-            t[4] || (t[4] = e("h2", { class: "font-bold text-xl mb-5 mt-10" }, "Settings", -1)),
-            t[5] || (t[5] = e("h3", { class: "font-bold mb-1" }, "Scalar Proxy", -1)),
-            t[6] || (t[6] = e("p", { class: "text-c-2 mb-2" }, [
-              o(" Enable Scalar's "),
-              e("a", {
-                class: "hover:text-c-1",
-                href: "https://github.com/scalar/scalar/tree/main/packages/api-client-proxy",
-                target: "_blank"
-              }, "open source"),
-              o(" proxy to deal with CORS issues. ")
-            ], -1)),
-            e("div", T, [
-              i(l(k), {
-                class: d(["w-full shadow-none text-c-1 justify-start pl-2 gap-2 bg-b-2", { "bg-b-1 shadow-border-1/2 text-c-1": l(s) }]),
-                variant: l(s) ? "primary" : "secondary",
-                onClick: t[0] || (t[0] = (r) => l(h)("https://proxy.scalar.com"))
+            r[4] || (r[4] = C('<h2 class="font-bold text-xl mb-5 mt-10">Settings</h2><h3 class="font-bold mb-1">CORS Proxy</h3><p class="text-c-2 mb-2 leading-[21px]"> Browsers block cross-origin requests for security. We provide a public proxy to <a class="hover:text-c-1 underline-offset-2" href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank">bypass CORS issues</a>. Check the <a class="hover:text-c-1 underline-offset-2" href="https://github.com/scalar/scalar/tree/main/examples/proxy-server" target="_blank">source code on GitHub</a>. </p>', 3)),
+            e("div", W, [
+              c(t(g), {
+                class: i(["w-full shadow-none text-c-1 justify-start pl-2 gap-2 bg-b-2 border-1/2", { "bg-b-1 text-c-1": t(l) }]),
+                variant: t(l) ? "primary" : "secondary",
+                onClick: r[0] || (r[0] = (s) => t(h)("https://proxy.scalar.com"))
               }, {
-                default: u(() => [
-                  e("div", V, [
-                    l(s) ? (a(), p(l(g), {
+                default: d(() => [
+                  e("div", $, [
+                    t(l) ? (o(), u(t(k), {
                       key: 0,
                       icon: "Checkmark",
                       size: "xs",
                       thickness: "3.5"
-                    })) : b("", !0)
+                    })) : p("", !0)
                   ]),
-                  t[2] || (t[2] = o(" Enable "))
+                  r[2] || (r[2] = b(" Use proxy.scalar.com (default) "))
                 ]),
                 _: 1
               }, 8, ["class", "variant"]),
-              i(l(k), {
-                class: d(["w-full shadow-none text-c-1 justify-start pl-2 gap-2 bg-b-2", { "bg-b-1 shadow-border-1/2 text-c-1": !l(s) }]),
-                variant: l(s) ? "secondary" : "primary",
-                onClick: t[1] || (t[1] = (r) => l(h)(""))
+              c(t(g), {
+                class: i(["w-full shadow-none text-c-1 justify-start pl-2 gap-2 bg-b-2 border-1/2", { "bg-b-1 text-c-1": !t(l) }]),
+                variant: t(l) ? "secondary" : "primary",
+                onClick: r[1] || (r[1] = (s) => t(h)(""))
               }, {
-                default: u(() => [
-                  e("div", $, [
-                    l(s) ? b("", !0) : (a(), p(l(g), {
+                default: d(() => [
+                  e("div", U, [
+                    t(l) ? p("", !0) : (o(), u(t(k), {
                       key: 0,
                       icon: "Checkmark",
                       size: "xs",
                       thickness: "3.5"
                     }))
                   ]),
-                  t[3] || (t[3] = o(" Disable "))
+                  r[3] || (r[3] = b(" Skip the proxy "))
                 ]),
                 _: 1
               }, 8, ["class", "variant"])
             ])
           ]),
           e("div", null, [
-            t[7] || (t[7] = e("h3", { class: "font-bold mb-1" }, "Theme", -1)),
-            t[8] || (t[8] = e("p", { class: "text-c-2 mb-4" }, "Set the theme for your workspace.", -1)),
-            e("div", D, [
-              e("div", L, [
-                (a(), x(_, null, S(v, (r) => i(l(k), {
-                  key: r,
-                  class: d(["px-2", [
-                    "flex items-center justify-between gap-2 text-c-1",
-                    l(n).themeId === r ? "bg-b-1 shadow-border-1/2" : "bg-b-2"
+            r[5] || (r[5] = e("h3", { class: "font-bold mb-1" }, "Theme", -1)),
+            r[6] || (r[6] = e("p", { class: "text-c-2 mb-4 leading-[21px]" }, " We’ve got a whole rainbow of themes for you to play with: ", -1)),
+            e("div", E, [
+              e("div", G, [
+                (o(), x(S, null, j(v, (s) => c(t(g), {
+                  key: s,
+                  class: i(["px-2", [
+                    "flex items-center justify-between gap-2 text-c-1 border-1/2",
+                    t(a).themeId === s ? "bg-b-1" : "bg-b-2"
                   ]]),
                   variant: "ghost",
-                  onClick: (M) => w(r)
+                  onClick: (D) => w(s)
                 }, {
-                  default: u(() => [
-                    e("div", U, [
+                  default: d(() => [
+                    e("div", L, [
                       e("div", {
-                        class: d(["flex items-center justify-center w-5 h-5 rounded-full border-2 border-c-3", {
-                          "bg-primary": l(n).themeId === r
+                        class: i(["flex items-center justify-center w-5 h-5 rounded-full border-2 border-c-3", {
+                          "bg-primary": t(a).themeId === s
                         }])
                       }, [
-                        e("div", W, [
-                          l(n).themeId === r ? (a(), p(l(g), {
+                        e("div", O, [
+                          t(a).themeId === s ? (o(), u(t(k), {
                             key: 0,
                             icon: "Checkmark",
                             size: "xs",
                             thickness: "3.5"
-                          })) : b("", !0)
+                          })) : p("", !0)
                         ])
                       ], 2),
-                      o(" " + j(l(z)[r]), 1)
+                      b(" " + z(t(B)[s]), 1)
                     ]),
-                    e("div", F, [
+                    e("div", R, [
                       e("span", {
-                        class: "inline-block shadow-border-1/2 w-5 h-5 rounded-full border-c-3 -mr-3",
+                        class: "inline-block w-5 h-5 rounded-full border-c-3 -mr-3",
                         style: m({
-                          backgroundColor: f(r).light
+                          backgroundColor: f(s).light
                         })
                       }, null, 4),
                       e("span", {
-                        class: "inline-block shadow-border-1/2 w-5 h-5 rounded-full border-c-3 -mr-3",
+                        class: "inline-block w-5 h-5 rounded-full border-c-3 -mr-3",
                         style: m({
-                          backgroundColor: f(r).dark
+                          backgroundColor: f(s).dark
                         })
                       }, null, 4),
                       e("span", {
-                        class: "inline-block shadow-border-1/2 w-5 h-5 rounded-full border-c-3",
+                        class: "inline-block w-5 h-5 rounded-full border-c-3",
                         style: m({
-                          backgroundColor: f(r).accent
+                          backgroundColor: f(s).accent
                         })
                       }, null, 4)
                     ])
@@ -145,7 +135,7 @@ const N = { class: "bg-b-1 w-full h-full overflow-auto" }, P = { class: "flex fl
             ])
           ]),
           e("div", null, [
-            i(B)
+            c(N)
           ])
         ])
       ])
@@ -153,5 +143,5 @@ const N = { class: "bg-b-1 w-full h-full overflow-auto" }, P = { class: "flex fl
   }
 });
 export {
-  J as default
+  K as default
 };

package/dist/views/Settings/SettingsGeneralMode.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsGeneralMode.vue.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/SettingsGeneralMode.vue"],"names":[],"mappings":";AAqYA,wBAKG"}
+{"version":3,"file":"SettingsGeneralMode.vue.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/SettingsGeneralMode.vue"],"names":[],"mappings":";AAoXA,wBAKG"}

package/dist/views/Settings/SettingsGeneralMode.vue.js

@@ -1,79 +1,79 @@
-import { defineComponent as g, ref as h, openBlock as o, createElementBlock as v, Fragment as y, createElementVNode as s, createVNode as a, unref as r, normalizeClass as n, withCtx as c, createBlock as d, createCommentVNode as u, createTextVNode as i } from "vue";
+import { defineComponent as y, ref as g, openBlock as l, createElementBlock as v, Fragment as h, createElementVNode as s, createVNode as a, unref as r, normalizeClass as n, withCtx as c, createBlock as d, createCommentVNode as u, createTextVNode as i } from "vue";
 import { ScalarButton as f, ScalarIcon as m } from "@scalar/components";
 import { useDarkModeState as w } from "../../hooks/useDarkModeState.js";
-const S = { class: "flex flex-col gap-2" }, C = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, M = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, D = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, B = /* @__PURE__ */ g({
+const C = { class: "flex flex-col gap-2" }, S = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, M = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, D = { class: "flex items-center justify-center w-5 h-5 rounded-full border-[1.5px] p-1" }, B = /* @__PURE__ */ y({
   __name: "SettingsGeneralMode",
   setup(_) {
-    const { colorMode: k, setDarkMode: l } = w(), e = h("System Preference");
+    const { colorMode: k, setDarkMode: o } = w(), e = g("System Preference");
     k.value === "system" ? e.value = "System Preference" : k.value === "dark" ? e.value = "Dark" : e.value = "Light";
     const p = () => {
-      l(null), e.value = "System Preference";
+      o(null), e.value = "System Preference";
     }, b = () => {
-      l(!1), e.value = "Light";
+      o(!1), e.value = "Light";
     }, x = () => {
-      l(!0), e.value = "Dark";
+      o(!0), e.value = "Dark";
     };
-    return (P, t) => (o(), v(y, null, [
+    return (P, t) => (l(), v(h, null, [
       t[3] || (t[3] = s("h3", { class: "font-bold mb-1 mt-8" }, "Appearance", -1)),
-      t[4] || (t[4] = s("p", { class: "text-c-2 mb-4" }, "Set light or dark mode for your workspace.", -1)),
-      s("div", S, [
+      t[4] || (t[4] = s("p", { class: "text-c-2 mb-4 leading-[21px]" }, " Choose between light, dark, or system-based appearance for your workspace. ", -1)),
+      s("div", C, [
         a(r(f), {
           class: n([
-            "w-full shadow-none text-c-1 justify-start pl-2 gap-2",
-            e.value === "System Preference" ? "bg-b-1 shadow-border-1/2 text-c-1" : "bg-b-2"
+            "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border-1/2",
+            e.value === "System Preference" ? "bg-b-1 text-c-1" : "bg-b-2"
           ]),
           onClick: p
         }, {
           default: c(() => [
-            s("div", C, [
-              e.value === "System Preference" ? (o(), d(r(m), {
+            s("div", S, [
+              e.value === "System Preference" ? (l(), d(r(m), {
                 key: 0,
                 icon: "Checkmark",
                 size: "xs",
                 thickness: "3.5"
               })) : u("", !0)
             ]),
-            t[0] || (t[0] = i(" System Preference "))
+            t[0] || (t[0] = i(" System Preference (default) "))
           ]),
           _: 1
         }, 8, ["class"]),
         a(r(f), {
           class: n([
-            "w-full shadow-none text-c-1 justify-start pl-2 gap-2",
-            e.value === "Light" ? "bg-b-1 shadow-border-1/2 text-c-1" : "bg-b-2"
+            "w-full shadow-none text-c-1 justify-start pl-2 gap-2 border-1/2",
+            e.value === "Light" ? "bg-b-1 text-c-1" : "bg-b-2"
           ]),
           onClick: b
         }, {
           default: c(() => [
             s("div", M, [
-              e.value === "Light" ? (o(), d(r(m), {
+              e.value === "Light" ? (l(), d(r(m), {
                 key: 0,
                 icon: "Checkmark",
                 size: "xs",
                 thickness: "3.5"
               })) : u("", !0)
             ]),
-            t[1] || (t[1] = i(" Light Mode "))
+            t[1] || (t[1] = i(" Light Mode Always "))
           ]),
           _: 1
         }, 8, ["class"]),
         a(r(f), {
           class: n([
-            "w-full shadow-none text-c-1 justify-start pl-2 gap-2 mb-8",
-            e.value === "Dark" ? "bg-b-1 shadow-border-1/2 text-c-1" : "bg-b-2"
+            "w-full shadow-none text-c-1 justify-start pl-2 gap-2 mb-8 border-1/2",
+            e.value === "Dark" ? "bg-b-1 text-c-1" : "bg-b-2"
           ]),
           onClick: x
         }, {
           default: c(() => [
             s("div", D, [
-              e.value === "Dark" ? (o(), d(r(m), {
+              e.value === "Dark" ? (l(), d(r(m), {
                 key: 0,
                 icon: "Checkmark",
                 size: "xs",
                 thickness: "3.5"
               })) : u("", !0)
             ]),
-            t[2] || (t[2] = i(" Dark Mode "))
+            t[2] || (t[2] = i(" Dark Mode Always "))
           ]),
           _: 1
         }, 8, ["class"])