@scalar/api-client 2.26.2 → 2.27.1

package/dist/v2/features/app/App.vue.js

@@ -1,55 +1,56 @@
-import { defineComponent as y, computed as p, createBlock as d, openBlock as i, unref as t, withCtx as m, createElementVNode as l, createVNode as r, createElementBlock as u, renderSlot as v, createCommentVNode as k, normalizeProps as T, guardReactiveProps as W } from "vue";
-import { useModal as x, ScalarTeleportRoot as g } from "@scalar/components";
-import { getThemeStyles as B } from "@scalar/themes";
-import { ScalarToasts as C } from "@scalar/use-toasts";
-import { extensions as _ } from "@scalar/workspace-store/schemas/extensions";
+import { defineComponent as b, computed as T, createBlock as m, openBlock as i, unref as t, withCtx as p, createElementVNode as l, createVNode as r, createElementBlock as u, renderSlot as d, createCommentVNode as v, normalizeProps as y, guardReactiveProps as W } from "vue";
+import { useModal as g, ScalarTeleportRoot as x } from "@scalar/components";
+import { ScalarToasts as B } from "@scalar/use-toasts";
+import { extensions as C } from "@scalar/workspace-store/schemas/extensions";
 import { RouterView as E } from "vue-router";
 import A from "./components/CreateWorkspaceModal.vue.js";
 import O from "./components/SplashScreen.vue.js";
 import { useDocumentWatcher as M } from "./hooks/use-document-watcher.js";
-import U from "../command-palette/TheCommandPalette.vue.js";
+import { useTheme as U } from "./hooks/use-theme.js";
+import _ from "../command-palette/TheCommandPalette.vue.js";
 import { useColorMode as D } from "../../hooks/use-color-mode.js";
 import { useGlobalHotKeys as I } from "../../hooks/use-global-hot-keys.js";
 import N from "./components/AppSidebar.vue.js";
 import P from "./components/DesktopTabs.vue.js";
-import $ from "./components/DownloadAppButton.vue.js";
-import { mergeSecurity as H } from "../../blocks/scalar-auth-selector-block/helpers/merge-security.js";
-const L = ["innerHTML"], V = { key: 0 }, F = { class: "flex h-dvh w-dvw flex-1 flex-col" }, R = { class: "flex min-h-0 flex-1 flex-row" }, G = { class: "flex flex-1 flex-col" }, j = {
+import H from "./components/DownloadAppButton.vue.js";
+import { mergeSecurity as L } from "../../blocks/scalar-auth-selector-block/helpers/merge-security.js";
+const V = ["innerHTML"], $ = { key: 0 }, F = { class: "flex h-dvh w-dvw flex-1 flex-col" }, R = { class: "flex min-h-0 flex-1 flex-row" }, G = { class: "flex flex-1 flex-col" }, j = {
   key: 0,
   class: "flex h-12 items-center justify-end border-b p-2"
-}, z = { class: "bg-b-1 min-h-0 flex-1" }, K = { key: 1 }, q = {}, de = /* @__PURE__ */ y({
+}, z = { class: "bg-b-1 min-h-0 flex-1" }, K = { key: 1 }, q = {}, pe = /* @__PURE__ */ b({
   ...q,
   __name: "App",
   props: {
     layout: {},
     plugins: { default: () => [] },
+    customThemes: { default: () => [] },
+    fallbackThemeSlug: { default: "default" },
     getAppState: { type: Function },
     getCommandPaletteState: { type: Function }
   },
-  setup(s, { expose: f }) {
-    f({
+  setup(a, { expose: k }) {
+    k({
       openCreateWorkspace: () => c.show()
     });
-    const e = s.getAppState(), w = s.getCommandPaletteState();
-    typeof window < "u" && (window.dataDumpWorkspace = () => e.store.value, window.dumpAppState = () => e), I(e.eventBus, s.layout), M({
-      documentName: () => e.store.value?.workspace[_.workspace.activeDocument],
+    const e = a.getAppState(), f = a.getCommandPaletteState();
+    typeof window < "u" && (window.dataDumpWorkspace = () => e.store.value, window.dumpAppState = () => e), I(e.eventBus, a.layout), M({
+      documentName: () => e.store.value?.workspace[C.workspace.activeDocument],
       store: e.store,
       initialTimeout: 5e3
     }), D({ workspaceStore: e.store });
-    const S = p(() => {
-      if (e.store.value === null)
-        return "";
-      const a = e.store.value.workspace["x-scalar-theme"];
-      return a ? `<style>${B(a)}</style>` : "";
-    }), h = (a) => {
-      if (!a)
+    const { themeStyleTag: w } = U({
+      fallbackThemeSlug: () => a.fallbackThemeSlug,
+      customThemes: () => a.customThemes,
+      store: e.store
+    }), h = (s) => {
+      if (!s)
         return;
       const o = e.workspace.workspaceList.value?.find(
-        (n) => n.id === a
+        (n) => n.id === s
       );
       o && e.workspace.navigateToWorkspace(o.namespace, o.slug);
-    }, c = x(), b = p(() => {
-      const a = e.store.value?.auth ? H(
+    }, c = g(), S = T(() => {
+      const s = e.store.value?.auth ? L(
         e.document.value?.components?.securitySchemes ?? {},
         {},
         e.store.value.auth,
@@ -61,27 +62,28 @@ const L = ["innerHTML"], V = { key: 0 }, F = { class: "flex h-dvh w-dvw flex-1 f
         environment: e.environment.value,
         eventBus: e.eventBus,
         exampleName: e.activeEntities.exampleName.value,
-        layout: s.layout,
+        layout: a.layout,
         method: e.activeEntities.method.value,
         path: e.activeEntities.path.value,
         workspaceStore: e.store.value,
         activeWorkspace: e.workspace.activeWorkspace.value,
-        plugins: s.plugins,
-        securitySchemes: a
+        plugins: a.plugins,
+        securitySchemes: s,
+        customThemes: a.customThemes
       };
     });
-    return (a, o) => (i(), d(t(g), null, {
-      default: m(() => [
-        l("div", { innerHTML: S.value }, null, 8, L),
-        r(t(C)),
-        t(e).store.value !== null && t(e).workspace.activeWorkspace.value !== null && !t(e).loading.value ? (i(), u("main", V, [
+    return (s, o) => (i(), m(t(x), null, {
+      default: p(() => [
+        l("div", { innerHTML: t(w) }, null, 8, V),
+        r(t(B)),
+        t(e).store.value !== null && t(e).workspace.activeWorkspace.value !== null && !t(e).loading.value ? (i(), u("main", $, [
           l("div", F, [
-            s.layout === "desktop" ? (i(), d(P, {
+            a.layout === "desktop" ? (i(), m(P, {
               key: 0,
               activeTabIndex: t(e).tabs.activeTabIndex.value,
               eventBus: t(e).eventBus,
               tabs: t(e).tabs.state.value
-            }, null, 8, ["activeTabIndex", "eventBus", "tabs"])) : k("", !0),
+            }, null, 8, ["activeTabIndex", "eventBus", "tabs"])) : v("", !0),
             l("div", R, [
               r(N, {
                 isSidebarOpen: t(e).sidebar.isOpen.value,
@@ -89,7 +91,7 @@ const L = ["innerHTML"], V = { key: 0 }, F = { class: "flex h-dvh w-dvw flex-1 f
                 activeWorkspace: t(e).workspace.activeWorkspace.value,
                 eventBus: t(e).eventBus,
                 isWorkspaceOpen: t(e).workspace.isOpen.value,
-                layout: s.layout,
+                layout: a.layout,
                 sidebarState: t(e).sidebar.state,
                 sidebarWidth: t(e).sidebar.width.value,
                 store: t(e).store.value,
@@ -100,30 +102,30 @@ const L = ["innerHTML"], V = { key: 0 }, F = { class: "flex h-dvh w-dvw flex-1 f
                 onSelectItem: t(e).sidebar.handleSelectItem,
                 "onUpdate:sidebarWidth": t(e).sidebar.handleSidebarWidthUpdate
               }, {
-                sidebarMenuActions: m(() => [
-                  v(a.$slots, "sidebar-menu-actions")
+                sidebarMenuActions: p(() => [
+                  d(s.$slots, "sidebar-menu-actions")
                 ]),
                 _: 3
               }, 8, ["isSidebarOpen", "activeWorkspace", "eventBus", "isWorkspaceOpen", "layout", "sidebarState", "sidebarWidth", "store", "workspaces", "onClick:workspace", "onSelectItem", "onUpdate:sidebarWidth"]),
               l("div", G, [
-                s.layout === "web" ? (i(), u("nav", j, [
-                  r($)
-                ])) : k("", !0),
+                a.layout === "web" ? (i(), u("nav", j, [
+                  r(H)
+                ])) : v("", !0),
                 l("div", z, [
-                  r(t(E), T(W(b.value)), null, 16)
+                  r(t(E), y(W(S.value)), null, 16)
                 ])
               ])
             ])
           ]),
-          v(a.$slots, "create-workspace", { state: t(c) }, () => [
+          d(s.$slots, "create-workspace", { state: t(c) }, () => [
             r(A, {
               state: t(c),
               "onCreate:workspace": o[2] || (o[2] = (n) => t(e).workspace.create(n))
             }, null, 8, ["state"])
           ]),
-          r(U, {
+          r(_, {
             eventBus: t(e).eventBus,
-            paletteState: t(w),
+            paletteState: t(f),
             workspaceStore: t(e).store.value
           }, null, 8, ["eventBus", "paletteState", "workspaceStore"])
         ])) : (i(), u("main", K, [
@@ -135,5 +137,5 @@ const L = ["innerHTML"], V = { key: 0 }, F = { class: "flex h-dvh w-dvw flex-1 f
   }
 });
 export {
-  de as default
+  pe as default
 };

package/dist/v2/features/app/components/AppSidebar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppSidebar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/app/components/AppSidebar.vue"],"names":[],"mappings":"AA4eA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAA;AAQ3B,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAUhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,MAAM,EAAE,YAAY,CAAA;IAEpB;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAE1C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C;;;OAGG;IACH,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B;;;OAGG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;;OAGG;IACH,KAAK,EAAE,cAAc,CAAA;CACtB,CAAC;AAiBJ,KAAK,WAAW,GAAG;IACjB,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;CAC/B,CAAC;AAkLF,KAAK,gBAAgB,GAAG;IACxB,6CAA6C;IAC7C,eAAe,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;CACtB,CAAC;AAMF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAgkBxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"AppSidebar.vue.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/app/components/AppSidebar.vue"],"names":[],"mappings":"AA+eA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAA;AAQ3B,OAAO,KAAK,EAA6B,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAUhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,MAAM,EAAE,YAAY,CAAA;IAEpB;;OAEG;IACH,YAAY,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;IAE1C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C;;;OAGG;IACH,UAAU,EAAE,cAAc,EAAE,CAAA;IAC5B;;;OAGG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAC3B;;;OAGG;IACH,KAAK,EAAE,cAAc,CAAA;CACtB,CAAC;AAiBJ,KAAK,WAAW,GAAG;IACjB,oEAAoE;IACpE,kBAAkB,CAAC,IAAI,OAAO,CAAA;CAC/B,CAAC;AAkLF,KAAK,gBAAgB,GAAG;IACxB,6CAA6C;IAC7C,eAAe,EAAE,OAAO,CAAC;IACzB,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;CACtB,CAAC;AAMF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AA2kBxD,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;kFAGd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/v2/features/app/components/AppSidebar.vue.js

@@ -1,7 +1,7 @@
 import o from "./AppSidebar.vue2.js";
 /* empty css                */
-import e from "../../../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e0eb043e"]]);
+import p from "../../../../_virtual/_plugin-vue_export-helper.js";
+const e = /* @__PURE__ */ p(o, [["__scopeId", "data-v-658f060e"]]);
 export {
-  a as default
+  e as default
 };

package/dist/v2/features/app/components/AppSidebar.vue2.js

@@ -1,9 +1,9 @@
 import { defineComponent as L, mergeModels as I, computed as k, capitalize as R, useModel as W, ref as V, createElementBlock as c, openBlock as u, createVNode as d, createBlock as x, createCommentVNode as p, unref as i, createSlots as j, withCtx as r, createTextVNode as b, createElementVNode as l, withKeys as w, withModifiers as v, toDisplayString as F, renderSlot as G, normalizeClass as H, Fragment as h, nextTick as U } from "vue";
-import { useModal as J, ScalarSidebarItem as O, ScalarIconButton as Y, ScalarButton as $, ScalarModal as Q } from "@scalar/components";
+import { useModal as J, ScalarSidebarItem as $, ScalarIconButton as Y, ScalarButton as O, ScalarModal as Q } from "@scalar/components";
 import { isMacOS as X } from "@scalar/helpers/general/is-mac-os";
 import { ScalarIconPlus as Z, ScalarIconDotsThree as _, ScalarIconGlobe as ee } from "@scalar/icons";
 import { LibraryIcon as te } from "@scalar/icons/library";
-import { getParentEntry as S } from "@scalar/workspace-store/navigation";
+import { getParentEntry as g } from "@scalar/workspace-store/navigation";
 import ae from "../../../../assets/rabbit.ascii.js";
 import oe from "../../../../assets/rabbitjump.ascii.js";
 import E from "../../../../components/ScalarAsciiArt.vue.js";
@@ -37,64 +37,64 @@ const le = { class: "flex" }, de = {
     sidebarWidthModifiers: {}
   }),
   emits: /* @__PURE__ */ I(["click:workspace", "selectItem", "select:workspace", "create:workspace"], ["update:isSidebarOpen", "update:sidebarWidth"]),
-  setup(o, { emit: A }) {
-    const f = A, D = k(() => R(o.activeWorkspace.label)), M = W(o, "isSidebarOpen"), B = W(o, "sidebarWidth"), g = k(() => o.sidebarState.items.value.length <= 1), C = k(
+  setup(a, { emit: A }) {
+    const f = A, D = k(() => R(a.activeWorkspace.label)), M = W(a, "isSidebarOpen"), B = W(a, "sidebarWidth"), S = k(() => a.sidebarState.items.value.length <= 1), C = k(
       () => se({
-        store: o.store,
-        sidebarState: o.sidebarState
+        store: a.store,
+        sidebarState: a.sidebarState
       })
-    ), N = (a, e) => C.value.handleDragEnd(a, e), T = (a, e) => C.value.isDroppable(a, e), s = V(null), y = J(), K = k(() => {
-      const a = s.value?.item;
-      return a?.type === "document" ? "This cannot be undone. You're about to delete the document and all tags and operations inside it." : `Are you sure you want to delete this ${a?.type ?? "item"}? This action cannot be undone.`;
+    ), N = (o, e) => C.value.handleDragEnd(o, e), T = (o, e) => C.value.isDroppable(o, e), s = V(null), y = J(), K = k(() => {
+      const o = s.value?.item;
+      return o?.type === "document" ? "This cannot be undone. You're about to delete the document and all tags and operations inside it." : `Are you sure you want to delete this ${o?.type ?? "item"}? This action cannot be undone.`;
     }), z = () => {
-      const a = s.value?.item;
-      if (!a)
+      const o = s.value?.item;
+      if (!o)
         return;
-      const e = o.sidebarState.getEntryById(a.id), t = S("document", e), n = S("operation", e);
+      const e = a.sidebarState.getEntryById(o.id), t = g("document", e), n = g("operation", e);
       if (t) {
-        if (a.type === "document")
-          o.eventBus.emit("document:delete:document", { name: t.name });
-        else if (a.type === "tag")
-          o.eventBus.emit("tag:delete:tag", {
+        if (o.type === "document")
+          a.eventBus.emit("document:delete:document", { name: t.name });
+        else if (o.type === "tag")
+          a.eventBus.emit("tag:delete:tag", {
             documentName: t.name,
-            name: a.name
+            name: o.name
           });
-        else if (a.type === "operation") {
+        else if (o.type === "operation") {
           if (!n)
             return;
-          o.eventBus.emit("operation:delete:operation", {
+          a.eventBus.emit("operation:delete:operation", {
             meta: {
               method: n.method,
               path: n.path
             },
             documentName: t.name
           });
-        } else if (a.type === "example") {
+        } else if (o.type === "example") {
           if (!n)
             return;
-          o.eventBus.emit("operation:delete:example", {
+          a.eventBus.emit("operation:delete:example", {
             meta: {
               method: n.method,
               path: n.path,
-              exampleKey: a.name
+              exampleKey: o.name
             },
             documentName: t.name
           });
         }
         y.hide(), s.value = null;
       }
-    }, m = async (a, e) => {
+    }, m = async (o, e) => {
       if (s.value?.showMenu)
         return;
-      const t = a.currentTarget;
+      const t = o.currentTarget;
       s.value = { item: e, el: t, showMenu: !0 }, await U();
-      const n = a instanceof MouseEvent ? new MouseEvent(a.type, a) : new KeyboardEvent(a.type, a);
+      const n = o instanceof MouseEvent ? new MouseEvent(o.type, o) : new KeyboardEvent(o.type, o);
       s.value?.el.dispatchEvent(n);
     }, P = () => {
       s.value && (s.value.showMenu = !1);
-    }, q = (a) => {
-      const e = o.sidebarState.getEntryById(a.id), t = S("document", e), n = S("tag", e);
-      o.eventBus.emit("ui:open:command-palette", {
+    }, q = (o) => {
+      const e = a.sidebarState.getEntryById(o.id), t = g("document", e), n = g("tag", e);
+      a.eventBus.emit("ui:open:command-palette", {
         action: "create-request",
         payload: {
           documentId: t?.id,
@@ -102,30 +102,31 @@ const le = { class: "flex" }, de = {
         }
       });
     };
-    return (a, e) => (u(), c("div", le, [
+    return (o, e) => (u(), c("div", le, [
       d(i(re), {
         isSidebarOpen: M.value,
         "onUpdate:isSidebarOpen": e[3] || (e[3] = (t) => M.value = t),
         sidebarWidth: B.value,
         "onUpdate:sidebarWidth": e[4] || (e[4] = (t) => B.value = t),
-        activeWorkspace: o.activeWorkspace,
-        documents: Object.values(o.store.workspace.documents),
+        activeWorkspace: a.activeWorkspace,
+        documents: Object.values(a.store.workspace.documents),
         isDroppable: T,
-        layout: o.layout,
-        sidebarState: o.sidebarState,
-        workspaces: o.workspaces,
+        layout: a.layout,
+        sidebarState: a.sidebarState,
+        workspaces: a.workspaces,
         "onCreate:workspace": e[5] || (e[5] = (t) => f("create:workspace")),
-        onReorder: e[6] || (e[6] = (t, n) => N(t, n)),
-        "onSelect:workspace": e[7] || (e[7] = (t) => f("select:workspace", t)),
-        onSelectItem: e[8] || (e[8] = (t) => f("selectItem", t))
+        "onNavigate:to:settings": e[6] || (e[6] = (t) => a.eventBus.emit("ui:navigate", { page: "workspace", path: "settings" })),
+        onReorder: e[7] || (e[7] = (t, n) => N(t, n)),
+        "onSelect:workspace": e[8] || (e[8] = (t) => f("select:workspace", t)),
+        onSelectItem: e[9] || (e[9] = (t) => f("selectItem", t))
       }, j({
         sidebarMenuActions: r(() => [
-          G(a.$slots, "sidebarMenuActions", {}, void 0, !0)
+          G(o.$slots, "sidebarMenuActions", {}, void 0, !0)
         ]),
         workspaceButton: r(() => [
-          d(i(O), {
+          d(i($), {
             is: "button",
-            active: o.isWorkspaceOpen,
+            active: a.isWorkspaceOpen,
             icon: i(ee),
             onClick: e[0] || (e[0] = (t) => f("click:workspace"))
           }, {
@@ -153,23 +154,23 @@ const le = { class: "flex" }, de = {
           }, null, 8, ["icon", "onClick", "onKeydown"])
         ]),
         icon: r(({ item: t }) => [
-          t.type === "document" && o.store.workspace.documents[t.name]?.["x-scalar-is-dirty"] === !0 ? (u(), c("div", de, [
+          t.type === "document" && a.store.workspace.documents[t.name]?.["x-scalar-is-dirty"] === !0 ? (u(), c("div", de, [
             d(i(te), {
               class: "block",
               src: "icon" in t && t.icon || "interface-content-folder"
             }, null, 8, ["src"]),
-            e[11] || (e[11] = l("div", { class: "bg-orange absolute -top-1.25 -right-1.25 flex h-2.5 w-2.5 items-center justify-center rounded-full text-[9px] font-bold text-white" }, " ! ", -1))
+            e[12] || (e[12] = l("div", { class: "bg-orange absolute -top-1.25 -right-1.25 flex h-2.5 w-2.5 items-center justify-center rounded-full text-[9px] font-bold text-white" }, " ! ", -1))
           ])) : p("", !0)
         ]),
         empty: r(({ item: t }) => [
-          d(i(O), {
+          d(i($), {
             is: "button",
             onClick: (n) => q(t)
           }, {
             icon: r(() => [
               d(i(Z))
             ]),
-            default: r(() => [...e[12] || (e[12] = [
+            default: r(() => [...e[13] || (e[13] = [
               b("Add operation", -1)
             ])]),
             _: 1
@@ -177,15 +178,15 @@ const le = { class: "flex" }, de = {
         ]),
         _: 2
       }, [
-        o.layout !== "modal" ? {
+        a.layout !== "modal" ? {
           name: "footer",
           fn: r(() => [
             l("div", {
               class: H({
-                "empty-sidebar-item border-t": g.value
+                "empty-sidebar-item border-t": S.value
               })
             }, [
-              g.value ? (u(), c("div", ue, [
+              S.value ? (u(), c("div", ue, [
                 l("div", me, [
                   d(E, {
                     art: i(ae),
@@ -196,44 +197,44 @@ const le = { class: "flex" }, de = {
                     class: "rabbitjump absolute top-0 left-0 font-bold"
                   }, null, 8, ["art"])
                 ]),
-                e[13] || (e[13] = l("div", { class: "mt-2 mb-2 text-center text-sm text-balance" }, [
+                e[14] || (e[14] = l("div", { class: "mt-2 mb-2 text-center text-sm text-balance" }, [
                   l("b", { class: "font-medium" }, "Let's Get Started"),
                   l("p", { class: "mt-2 leading-3" }, " Create request, folder, collection or import from OpenAPI/Postman ")
                 ], -1))
               ])) : p("", !0),
               l("div", ce, [
-                g.value ? (u(), x(i($), {
+                S.value ? (u(), x(i(O), {
                   key: 0,
                   class: "w-full",
                   size: "sm",
-                  onClick: e[1] || (e[1] = (t) => o.eventBus.emit("ui:open:command-palette", {
+                  onClick: e[1] || (e[1] = (t) => a.eventBus.emit("ui:open:command-palette", {
                     action: "import-from-openapi-swagger-postman-curl",
                     payload: void 0
                   }))
                 }, {
-                  default: r(() => [...e[14] || (e[14] = [
+                  default: r(() => [...e[15] || (e[15] = [
                     b(" Import Collection ", -1)
                   ])]),
                   _: 1
                 })) : p("", !0),
-                d(i($), {
+                d(i(O), {
                   class: "w-full",
                   hotkey: "K",
                   size: "sm",
                   variant: "outlined",
-                  onClick: e[2] || (e[2] = (t) => o.eventBus.emit("ui:open:command-palette"))
+                  onClick: e[2] || (e[2] = (t) => a.eventBus.emit("ui:open:command-palette"))
                 }, {
                   default: r(() => [
-                    e[20] || (e[20] = b(" Add Item   ", -1)),
+                    e[21] || (e[21] = b(" Add Item   ", -1)),
                     l("span", pe, [
                       i(X)() ? (u(), c(h, { key: 0 }, [
-                        e[15] || (e[15] = l("span", { class: "sr-only" }, "Command", -1)),
-                        e[16] || (e[16] = l("span", { "aria-hidden": "true" }, "⌘", -1))
+                        e[16] || (e[16] = l("span", { class: "sr-only" }, "Command", -1)),
+                        e[17] || (e[17] = l("span", { "aria-hidden": "true" }, "⌘", -1))
                       ], 64)) : (u(), c(h, { key: 1 }, [
-                        e[17] || (e[17] = l("span", { class: "sr-only" }, "CTRL", -1)),
-                        e[18] || (e[18] = l("span", { "aria-hidden": "true" }, "⌃", -1))
+                        e[18] || (e[18] = l("span", { class: "sr-only" }, "CTRL", -1)),
+                        e[19] || (e[19] = l("span", { "aria-hidden": "true" }, "⌃", -1))
                       ], 64)),
-                      e[19] || (e[19] = b(" K ", -1))
+                      e[20] || (e[20] = b(" K ", -1))
                     ])
                   ]),
                   _: 1
@@ -246,12 +247,12 @@ const le = { class: "flex" }, de = {
       ]), 1032, ["isSidebarOpen", "sidebarWidth", "activeWorkspace", "documents", "layout", "sidebarState", "workspaces"]),
       s.value?.showMenu ? (u(), x(ie, {
         key: 0,
-        eventBus: o.eventBus,
+        eventBus: a.eventBus,
         item: s.value.item,
-        sidebarState: o.sidebarState,
+        sidebarState: a.sidebarState,
         target: s.value.el,
         onCloseMenu: P,
-        onShowDeleteModal: e[9] || (e[9] = (t) => i(y).show())
+        onShowDeleteModal: e[10] || (e[10] = (t) => i(y).show())
       }, null, 8, ["eventBus", "item", "sidebarState", "target"])) : p("", !0),
       s.value ? (u(), x(i(Q), {
         key: 1,
@@ -263,7 +264,7 @@ const le = { class: "flex" }, de = {
           d(ne, {
             variableName: s.value.item.title,
             warningMessage: K.value,
-            onClose: e[10] || (e[10] = (t) => i(y).hide()),
+            onClose: e[11] || (e[11] = (t) => i(y).hide()),
             onDelete: z
           }, null, 8, ["variableName", "warningMessage"])
         ]),

package/dist/v2/features/app/helpers/create-api-client-app.d.ts

@@ -1,4 +1,5 @@
 import type { ClientPlugin } from '@scalar/oas-utils/helpers';
+import type { Theme } from '@scalar/themes';
 import type { ClientLayout } from '../../../../v2/types/layout';
 type CreateApiClientOptions = {
     /**
@@ -12,6 +13,15 @@ type CreateApiClientOptions = {
      * Api client plugins to include in the app
      */
     plugins?: ClientPlugin[];
+    /**
+     * Custom themes to include in the app
+     */
+    customThemes?: Theme[];
+    /**
+     * Fallback theme slug to use if no theme is selected for the workspace
+     * @default 'default'
+     */
+    fallbackThemeSlug?: string;
 };
 /**
  * Creates the appropriate router with the appropriate routes based on the layout
@@ -20,7 +30,7 @@ export declare const createAppRouter: (layout: CreateApiClientOptions["layout"])
 /**
  * Create the API Client with router and passes in the workspace store as a prop
  */
-export declare const createApiClientApp: (el: HTMLElement | null, { layout, plugins }: CreateApiClientOptions) => Promise<{
+export declare const createApiClientApp: (el: HTMLElement | null, { layout, plugins, customThemes, fallbackThemeSlug }: CreateApiClientOptions) => Promise<{
     app: import("vue").App<Element>;
     state: import("../../../../v2/features/app/app-state.js").AppState;
 } | undefined>;

package/dist/v2/features/app/helpers/create-api-client-app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-api-client-app.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/app/helpers/create-api-client-app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAO7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,KAAK,sBAAsB,GAAG;IAC5B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,sBAAsB,CAAC,QAAQ,CAAC,gCAQvE,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,IAAI,WAAW,GAAG,IAAI,EACtB,qBAAiC,sBAAsB;;;cAgCxD,CAAA"}
+{"version":3,"file":"create-api-client-app.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/app/helpers/create-api-client-app.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAO3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAIrD,KAAK,sBAAsB,GAAG;IAC5B;;;;;OAKG;IACH,MAAM,EAAE,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,CAAA;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,EAAE,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,QAAQ,sBAAsB,CAAC,QAAQ,CAAC,gCAQvE,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,IAAI,WAAW,GAAG,IAAI,EACtB,sDAA8E,sBAAsB;;;cAkCrG,CAAA"}

package/dist/v2/features/app/helpers/create-api-client-app.js

@@ -1,16 +1,18 @@
-import { createApp as n } from "vue";
-import { createRouter as p, createWebHistory as s, createWebHashHistory as l } from "vue-router";
-import u from "../App.vue.js";
+import { createApp as l } from "vue";
+import { createRouter as p, createWebHistory as u, createWebHashHistory as d } from "vue-router";
+import f from "../App.vue.js";
 /* empty css          */
-import { createAppState as d } from "../app-state.js";
+import { createAppState as A } from "../app-state.js";
 import { ROUTES as c } from "./routes.js";
-import { useCommandPaletteState as f } from "../../command-palette/hooks/use-command-palette-state.js";
-const A = (t) => t === "web" ? p({ history: s(), routes: c }) : p({ history: l(), routes: c }), P = async (t, { layout: r = "desktop", plugins: i }) => {
-  const o = A(r), a = await d({ router: o }), m = f(), e = n(u, {
+import { useCommandPaletteState as h } from "../../command-palette/hooks/use-command-palette-state.js";
+const S = (t) => t === "web" ? p({ history: u(), routes: c }) : p({ history: d(), routes: c }), k = async (t, { layout: r = "desktop", plugins: i, customThemes: m, fallbackThemeSlug: n = "default" }) => {
+  const o = S(r), a = await A({ router: o }), s = h(), e = l(f, {
     layout: r,
     plugins: i,
+    customThemes: m,
+    fallbackThemeSlug: n,
     getAppState: () => a,
-    getCommandPaletteState: () => m
+    getCommandPaletteState: () => s
   });
   if (e.use(o), !t) {
     console.error(
@@ -26,6 +28,6 @@ const A = (t) => t === "web" ? p({ history: s(), routes: c }) : p({ history: l()
   };
 };
 export {
-  P as createApiClientApp,
-  A as createAppRouter
+  k as createApiClientApp,
+  S as createAppRouter
 };

package/dist/v2/features/app/helpers/routes.d.ts

@@ -1,5 +1,6 @@
 import type { HttpMethod } from '@scalar/helpers/http/http-methods';
 import type { ClientPlugin } from '@scalar/oas-utils/helpers';
+import type { Theme } from '@scalar/themes';
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
 import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
 import type { XScalarEnvironment } from '@scalar/workspace-store/schemas/extensions/document/x-scalar-environments';
@@ -23,6 +24,7 @@ export type RouteProps = {
         label: string;
     };
     plugins: ClientPlugin[];
+    customThemes?: Theme[];
 };
 /** When in the collections pages */
 export type CollectionProps = RouteProps & ({

package/dist/v2/features/app/helpers/routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/app/helpers/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAGlF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+DAA+D,CAAA;AAW1G,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,kDAAkD;AAClD,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,qBAAqB,CAAA;IACtC,cAAc,EAAE,cAAc,CAAA;IAC9B,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,OAAO,EAAE,YAAY,EAAE,CAAA;CAGxB,CAAA;AAED,oCAAoC;AACpC,MAAM,MAAM,eAAe,GAAG,UAAU,GACtC,CACI;IACE,cAAc,EAAE,UAAU,CAAA;IAC1B,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GACD;IACE,cAAc,EAAE,WAAW,CAAA;IAC3B,QAAQ,EAAE,IAAI,CAAA;CACf,CACJ,CAAA;AAEH,MAAM,MAAM,0BAA0B,GAClC,WAAW,GACX,eAAe,GACf,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,CAAA;AAEjB,kFAAkF;AAClF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAlBK,UAAU;8BAChB,iBAAiB;;oCAGX,WAAW;8BACjB,IAAI;;oCALE,UAAU;8BAChB,iBAAiB;;oCAGX,WAAW;8BACjB,IAAI;;;;;;;;;;;;;;;gCALE,UAAU;0BAChB,iBAAiB;;gCAGX,WAAW;0BACjB,IAAI;;gCALE,UAAU;0BAChB,iBAAiB;;gCAGX,WAAW;0BACjB,IAAI;;;;;;;;;IAgIM,CAAA"}
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/app/helpers/routes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAC7D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2EAA2E,CAAA;AACnH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAGlF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,+DAA+D,CAAA;AAW1G,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,kDAAkD;AAClD,MAAM,MAAM,UAAU,GAAG;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAA;IAClC,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,MAAM,EAAE,YAAY,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,kBAAkB,CAAA;IAC/B,eAAe,EAAE,qBAAqB,CAAA;IACtC,cAAc,EAAE,cAAc,CAAA;IAC9B,eAAe,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,YAAY,CAAC,EAAE,KAAK,EAAE,CAAA;CAGvB,CAAA;AAED,oCAAoC;AACpC,MAAM,MAAM,eAAe,GAAG,UAAU,GACtC,CACI;IACE,cAAc,EAAE,UAAU,CAAA;IAC1B,QAAQ,EAAE,iBAAiB,CAAA;CAC5B,GACD;IACE,cAAc,EAAE,WAAW,CAAA;IAC3B,QAAQ,EAAE,IAAI,CAAA;CACf,CACJ,CAAA;AAEH,MAAM,MAAM,0BAA0B,GAClC,WAAW,GACX,eAAe,GACf,cAAc,GACd,aAAa,GACb,QAAQ,GACR,aAAa,CAAA;AAEjB,kFAAkF;AAClF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAlBK,UAAU;8BAChB,iBAAiB;;oCAGX,WAAW;8BACjB,IAAI;;oCALE,UAAU;8BAChB,iBAAiB;;oCAGX,WAAW;8BACjB,IAAI;;;;;;;;;;;;;;;gCALE,UAAU;0BAChB,iBAAiB;;gCAGX,WAAW;0BACjB,IAAI;;gCALE,UAAU;0BAChB,iBAAiB;;gCAGX,WAAW;0BACjB,IAAI;;;;;;;;;IAgIM,CAAA"}

package/dist/v2/features/app/hooks/use-theme.d.ts

@@ -0,0 +1,42 @@
+import { type Theme } from '@scalar/themes';
+import type { WorkspaceStore } from '@scalar/workspace-store/client';
+import { type MaybeRefOrGetter } from 'vue';
+/**
+ * useTheme
+ *
+ * Reactive Vue.js hook to resolve and generate a <style> tag string based on the current theme.
+ * Automatically selects the appropriate theme styles in the following priority order:
+ *    1. Workspace theme (from the provided store, e.g. store.workspace['x-scalar-theme'])
+ *    2. Fallback theme (from the fallbackThemeSlug prop)
+ *    3. Default built-in theme (with slug "default")
+ *
+ * The returned `themeStyleTag` can be injected into your page to dynamically apply theming.
+ *
+ * @example
+ * ```ts
+ * // In a Vue component setup() function
+ * import { ref } from 'vue'
+ * import { useTheme } from './use-theme.js'
+ *
+ * const myThemes = ref([...])
+ * const workspaceStore = ref(...)
+ * const fallbackThemeSlug = ref('dark')
+ *
+ * const { themeStyleTag } = useTheme({
+ *   customThemes: myThemes,
+ *   fallbackThemeSlug,
+ *   store: workspaceStore
+ * })
+ *
+ * // To inject in template:
+ * // <div v-html="themeStyleTag"></div>
+ * ```
+ */
+export declare const useTheme: ({ fallbackThemeSlug, store, customThemes, }: {
+    customThemes: MaybeRefOrGetter<Theme[]>;
+    fallbackThemeSlug: MaybeRefOrGetter<string>;
+    store: MaybeRefOrGetter<WorkspaceStore | null>;
+}) => {
+    themeStyleTag: import("vue").ComputedRef<string>;
+};
+//# sourceMappingURL=use-theme.d.ts.map

package/dist/v2/features/app/hooks/use-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/app/hooks/use-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAA8B,MAAM,gBAAgB,CAAA;AACvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,EAAE,KAAK,gBAAgB,EAAqB,MAAM,KAAK,CAAA;AAkC9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,QAAQ,GAAI,6CAItB;IACD,YAAY,EAAE,gBAAgB,CAAC,KAAK,EAAE,CAAC,CAAA;IACvC,iBAAiB,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC3C,KAAK,EAAE,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAC/C;;CA2CA,CAAA"}