@scalar/api-client 2.26.1 → 2.27.1

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

@@ -1,24 +1,25 @@
-import { defineComponent as R, mergeModels as W, computed as k, capitalize as V, useModel as I, ref as F, createElementBlock as c, openBlock as u, createVNode as d, createBlock as M, createCommentVNode as p, unref as s, createSlots as G, withCtx as r, createTextVNode as b, createElementVNode as l, withKeys as w, withModifiers as v, toDisplayString as L, renderSlot as j, 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 { 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 $, 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 { getParentEntry as S } from "@scalar/workspace-store/navigation";
-import te from "../../../../assets/rabbit.ascii.js";
-import ae from "../../../../assets/rabbitjump.ascii.js";
+import { LibraryIcon as te } from "@scalar/icons/library";
+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";
-import oe from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
-import ne from "./SidebarItemMenu.vue.js";
+import ne from "../../../../components/Sidebar/Actions/DeleteSidebarListElement.vue.js";
+import ie from "./SidebarItemMenu.vue.js";
 import { dragHandleFactory as se } from "../../../helpers/drag-handle-factory.js";
-import ie from "../../../components/sidebar/Sidebar.vue.js";
-const re = { class: "flex" }, le = {
+import re from "../../../components/sidebar/Sidebar.vue.js";
+const le = { class: "flex" }, de = {
   key: 0,
-  class: "flex items-center"
-}, de = {
+  class: "relative flex items-center"
+}, ue = {
   key: 0,
   class: "empty-sidebar-item-content overflow-hidden px-2.5 py-2.5"
-}, ue = { class: "rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]" }, me = { class: "gap-1.5 p-2" }, ce = { class: "text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase" }, Ce = /* @__PURE__ */ R({
+}, me = { class: "rabbit-ascii relative m-auto mt-2 h-[68px] w-[60px]" }, ce = { class: "gap-1.5 p-2" }, pe = { class: "text-sidebar-c-2 rounded border px-1.25 py-1 text-xs leading-none font-medium uppercase" }, We = /* @__PURE__ */ L({
   __name: "AppSidebar",
-  props: /* @__PURE__ */ W({
+  props: /* @__PURE__ */ I({
     layout: {},
     sidebarState: {},
     isWorkspaceOpen: { type: Boolean },
@@ -35,65 +36,65 @@ const re = { class: "flex" }, le = {
     },
     sidebarWidthModifiers: {}
   }),
-  emits: /* @__PURE__ */ W(["click:workspace", "selectItem", "select:workspace", "create:workspace"], ["update:isSidebarOpen", "update:sidebarWidth"]),
-  setup(o, { emit: A }) {
-    const f = A, D = k(() => V(o.activeWorkspace.label)), x = I(o, "isSidebarOpen"), B = I(o, "sidebarWidth"), g = k(() => o.sidebarState.items.value.length <= 1), C = k(
+  emits: /* @__PURE__ */ I(["click:workspace", "selectItem", "select:workspace", "create:workspace"], ["update:isSidebarOpen", "update:sidebarWidth"]),
+  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), i = F(null), y = J(), K = k(() => {
-      const a = i.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 = i.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(), i.value = null;
+        y.hide(), s.value = null;
       }
-    }, m = async (a, e) => {
-      if (i.value?.showMenu)
+    }, m = async (o, e) => {
+      if (s.value?.showMenu)
         return;
-      const t = a.currentTarget;
-      i.value = { item: e, el: t, showMenu: !0 }, await U();
-      const n = a instanceof MouseEvent ? new MouseEvent(a.type, a) : new KeyboardEvent(a.type, a);
-      i.value?.el.dispatchEvent(n);
+      const t = o.currentTarget;
+      s.value = { item: e, el: t, showMenu: !0 }, await U();
+      const n = o instanceof MouseEvent ? new MouseEvent(o.type, o) : new KeyboardEvent(o.type, o);
+      s.value?.el.dispatchEvent(n);
     }, P = () => {
-      i.value && (i.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", {
+      s.value && (s.value.showMenu = !1);
+    }, 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,
@@ -101,44 +102,45 @@ const re = { class: "flex" }, le = {
         }
       });
     };
-    return (a, e) => (u(), c("div", re, [
-      d(s(ie), {
-        isSidebarOpen: x.value,
-        "onUpdate:isSidebarOpen": e[3] || (e[3] = (t) => x.value = t),
+    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))
-      }, G({
+        "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(() => [
-          j(a.$slots, "sidebarMenuActions", {}, void 0, !0)
+          G(o.$slots, "sidebarMenuActions", {}, void 0, !0)
         ]),
         workspaceButton: r(() => [
-          d(s(O), {
+          d(i($), {
             is: "button",
-            active: o.isWorkspaceOpen,
-            icon: s(ee),
+            active: a.isWorkspaceOpen,
+            icon: i(ee),
             onClick: e[0] || (e[0] = (t) => f("click:workspace"))
           }, {
             default: r(() => [
-              b(L(D.value), 1)
+              b(F(D.value), 1)
             ]),
             _: 1
           }, 8, ["active", "icon"])
         ]),
         decorator: r(({ item: t }) => [
-          d(s(Y), {
+          d(i(Y), {
             "aria-expanded": "false",
             "aria-haspopup": "menu",
-            icon: s(_),
+            icon: i(_),
             label: "More options",
             size: "sm",
             weight: "bold",
@@ -152,19 +154,23 @@ const re = { class: "flex" }, le = {
           }, 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", le, [...e[11] || (e[11] = [
-            l("div", { class: "h-2 w-2 rounded-full bg-white" }, null, -1)
-          ])])) : p("", !0)
+          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[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(s(O), {
+          d(i($), {
             is: "button",
             onClick: (n) => q(t)
           }, {
             icon: r(() => [
-              d(s(Z))
+              d(i(Z))
             ]),
-            default: r(() => [...e[12] || (e[12] = [
+            default: r(() => [...e[13] || (e[13] = [
               b("Add operation", -1)
             ])]),
             _: 1
@@ -172,63 +178,63 @@ const re = { class: "flex" }, le = {
         ]),
         _: 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", de, [
-                l("div", ue, [
+              S.value ? (u(), c("div", ue, [
+                l("div", me, [
                   d(E, {
-                    art: s(te),
+                    art: i(ae),
                     class: "rabbitsit font-bold"
                   }, null, 8, ["art"]),
                   d(E, {
-                    art: s(ae),
+                    art: i(oe),
                     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", me, [
-                g.value ? (u(), M(s($), {
+              l("div", ce, [
+                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(s($), {
+                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)),
-                    l("span", ce, [
-                      s(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[21] || (e[21] = b(" Add Item   ", -1)),
+                    l("span", pe, [
+                      i(X)() ? (u(), c(h, { key: 0 }, [
+                        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
@@ -239,26 +245,26 @@ const re = { class: "flex" }, le = {
           key: "0"
         } : void 0
       ]), 1032, ["isSidebarOpen", "sidebarWidth", "activeWorkspace", "documents", "layout", "sidebarState", "workspaces"]),
-      i.value?.showMenu ? (u(), M(ne, {
+      s.value?.showMenu ? (u(), x(ie, {
         key: 0,
-        eventBus: o.eventBus,
-        item: i.value.item,
-        sidebarState: o.sidebarState,
-        target: i.value.el,
+        eventBus: a.eventBus,
+        item: s.value.item,
+        sidebarState: a.sidebarState,
+        target: s.value.el,
         onCloseMenu: P,
-        onShowDeleteModal: e[9] || (e[9] = (t) => s(y).show())
+        onShowDeleteModal: e[10] || (e[10] = (t) => i(y).show())
       }, null, 8, ["eventBus", "item", "sidebarState", "target"])) : p("", !0),
-      i.value ? (u(), M(s(Q), {
+      s.value ? (u(), x(i(Q), {
         key: 1,
         size: "xxs",
-        state: s(y),
-        title: `Delete ${i.value.item.title}`
+        state: i(y),
+        title: `Delete ${s.value.item.title}`
       }, {
         default: r(() => [
-          d(oe, {
-            variableName: i.value.item.title,
+          d(ne, {
+            variableName: s.value.item.title,
             warningMessage: K.value,
-            onClose: e[10] || (e[10] = (t) => s(y).hide()),
+            onClose: e[11] || (e[11] = (t) => i(y).hide()),
             onDelete: z
           }, null, 8, ["variableName", "warningMessage"])
         ]),
@@ -268,5 +274,5 @@ const re = { class: "flex" }, le = {
   }
 });
 export {
-  Ce as default
+  We as default
 };

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

@@ -1,4 +1,5 @@
-import type { ClientPlugin } from '../../../../v2/helpers/plugins.js';
+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":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,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,10 +1,11 @@
 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';
 import type { WorkspaceDocument } from '@scalar/workspace-store/schemas/workspace';
 import type { MergedSecuritySchemes } from '../../../../v2/blocks/scalar-auth-selector-block/helpers/merge-security.js';
-import type { ClientPlugin } from '../../../../v2/helpers/plugins.js';
 import type { ClientLayout } from '../../../../v2/types/layout';
 /** These props are provided at the route level */
 export type RouteProps = {
@@ -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,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;AAU1G,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,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"}

package/dist/v2/features/app/hooks/use-theme.js

@@ -0,0 +1,34 @@
+import { themePresets as y, defaultFonts as S } from "@scalar/themes";
+import { computed as T, toValue as a } from "vue";
+const p = new Map(y.map((e) => [e.slug, e])), l = (e, s = "scalar-theme") => `<style id="scalar-theme" data-testid="${s}">${e}</style>`, o = (e, s) => {
+  const r = (t) => `${t}
+${S}`;
+  if (p.has(e))
+    return r(p.get(e)?.theme ?? "");
+  const c = s.find((t) => t.slug === e);
+  if (c)
+    return r(c.theme);
+}, w = ({
+  fallbackThemeSlug: e,
+  store: s,
+  customThemes: r
+}) => ({
+  themeStyleTag: T(() => {
+    const t = l(o("default", []), "default"), m = a(s), n = a(e);
+    if (m === null)
+      return t;
+    const f = m.workspace["x-scalar-theme"], u = f === "none" ? n : f;
+    if (!u) {
+      const i = o(n, a(r));
+      return i ? l(i, n) : t;
+    }
+    const h = o(u, a(r));
+    if (h)
+      return l(h, u);
+    const d = o(n, a(r));
+    return d ? l(d, n) : t;
+  })
+});
+export {
+  w as useTheme
+};

package/dist/v2/features/app/index.d.ts

@@ -2,7 +2,6 @@ export { type AppState, createAppState } from '../../../v2/features/app/app-stat
 export { default as CreateWorkspaceModal } from '../../../v2/features/app/components/CreateWorkspaceModal.vue.js';
 export { default as CommandActionForm } from '../../../v2/features/command-palette/components/CommandActionForm.vue.js';
 export { default as CommandActionInput } from '../../../v2/features/command-palette/components/CommandActionInput.vue.js';
-export type { ClientPlugin } from '../../../v2/helpers/plugins.js';
 export type { ClientLayout } from '../../../v2/types/layout';
 export { type CommandPaletteAction, type CommandPaletteRoute, baseClientActions, baseRoutes, useCommandPaletteState, } from '../command-palette/hooks/use-command-palette-state.js';
 export { default as ClientApp } from './App.vue.js';

package/dist/v2/features/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/app/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,uDAAuD,CAAA;AACvG,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gEAAgE,CAAA;AAC7G,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iEAAiE,CAAA;AAC/G,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AACxD,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,iBAAiB,EACjB,UAAU,EACV,sBAAsB,GACvB,MAAM,oDAAoD,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/app/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,uDAAuD,CAAA;AACvG,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gEAAgE,CAAA;AAC7G,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,iEAAiE,CAAA;AAC/G,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,iBAAiB,EACjB,UAAU,EACV,sBAAsB,GACvB,MAAM,oDAAoD,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,WAAW,CAAA;AAChD,OAAO,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAA"}

package/dist/v2/features/collection/DocumentCollection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentCollection.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/collection/DocumentCollection.vue"],"names":[],"mappings":"AAyJA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAMlE;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,gSA6Vd,CAAC"}
+{"version":3,"file":"DocumentCollection.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/collection/DocumentCollection.vue"],"names":[],"mappings":"AAyJA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAMlE;;;;;;;GAOG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAKzC,QAAA,MAAM,YAAY,gSA4Vd,CAAC"}