@scalar/api-client 2.14.1 → 2.17.0

package/dist/v2/features/modal/Modal.vue2.js

@@ -1,56 +1,143 @@
-import { defineComponent as m, ref as p, useId as u, watch as f, nextTick as v, onBeforeMount as w, onBeforeUnmount as k, withDirectives as _, createElementBlock as h, openBlock as S, createElementVNode as a, unref as c, createVNode as x, withCtx as y, vShow as E } from "vue";
-import { addScalarClassesToHeadless as C, ScalarTeleportRoot as T } from "@scalar/components";
-import { useFocusTrap as F } from "@vueuse/integrations/useFocusTrap";
-const B = { class: "scalar scalar-app" }, b = { class: "scalar-container" }, I = ["id"], L = {}, U = /* @__PURE__ */ m({
-  ...L,
+import { defineComponent as x, ref as w, useId as E, watch as I, nextTick as N, onBeforeMount as D, onBeforeUnmount as F, computed as k, withDirectives as h, createElementBlock as u, openBlock as c, createElementVNode as d, unref as o, createVNode as s, withCtx as U, vShow as b } from "vue";
+import { addScalarClassesToHeadless as V, ScalarTeleportRoot as $ } from "@scalar/components";
+import { ScalarToasts as A } from "@scalar/use-toasts";
+import { createWorkspaceEventBus as M } from "@scalar/workspace-store/events";
+import { useFocusTrap as H } from "@vueuse/integrations/useFocusTrap";
+import L from "../operation/Operation.vue.js";
+import { getActiveEnvironment as z } from "../../helpers/get-active-environment.js";
+import { useColorMode as O } from "../../hooks/use-color-mode.js";
+import { useGlobalHotKeys as R } from "../../hooks/use-global-hot-keys.js";
+import { useScrollLock as j } from "../../hooks/use-scroll-lock.js";
+import { useWorkspaceClientModalEvents as q } from "./hooks/use-workspace-client-modal-events.js";
+import G from "../../components/sidebar/SidebarToggle.vue.js";
+import K from "../../components/sidebar/Sidebar.vue.js";
+const P = { class: "scalar scalar-app" }, J = { class: "scalar-container" }, Q = ["id"], X = {
+  key: 0,
+  class: "relative flex flex-1"
+}, Y = {
+  key: 1,
+  class: "flex h-full w-full items-center justify-center"
+}, Z = {}, me = /* @__PURE__ */ x({
+  ...Z,
   __name: "Modal",
   props: {
     workspaceStore: {},
-    modalState: {}
+    document: {},
+    path: {},
+    method: {},
+    exampleName: {},
+    modalState: {},
+    sidebarState: {},
+    plugins: { default: () => [] }
   },
-  setup(o) {
-    const n = p(null), l = u(), { activate: i, deactivate: d } = F(n, {
+  setup(a, { expose: y }) {
+    typeof window < "u" && (window.dataDumpWorkspace = () => a.workspaceStore);
+    const l = M({
+      debug: !1
+    });
+    O({ workspaceStore: a.workspaceStore });
+    const m = {
+      name: "default",
+      id: "default"
+    }, n = w(!0);
+    q({
+      eventBus: l,
+      document: a.document,
+      workspaceStore: a.workspaceStore,
+      isSidebarOpen: n,
+      sidebarState: a.sidebarState,
+      modalState: a.modalState
+    }), R(l, "modal");
+    const p = w(null), f = E(), { activate: B, deactivate: g } = H(p, {
       allowOutsideClick: !0,
-      fallbackFocus: `#${l}`
-    }), s = (e) => e.key === "Escape" && o.modalState.hide(), r = () => {
-      window.removeEventListener("keydown", s), document.documentElement.style.removeProperty("overflow"), d();
-    };
-    return f(
-      () => o.modalState.open,
+      fallbackFocus: `#${f}`
+    }), v = () => {
+      g(), l.emit("operation:cancel:request");
+    }, T = j(() => typeof window < "u" ? window.document.body : null);
+    I(
+      () => a.modalState.open,
       (e) => {
-        e ? (window.addEventListener("keydown", s), document.documentElement.style.overflow = "hidden", i({ checkCanFocusTrap: () => v() })) : r();
+        T.value = e, e ? B({ checkCanFocusTrap: () => N() }) : v();
       }
-    ), w(() => C()), k(() => {
-      r();
-    }), (e, t) => _((S(), h("div", B, [
-      a("div", b, [
-        a("div", {
-          id: c(l),
+    ), D(() => V()), F(() => v());
+    const W = 288, i = k(
+      () => a.workspaceStore?.workspace?.["x-scalar-sidebar-width"] ?? W
+    ), C = (e) => a.workspaceStore?.update("x-scalar-sidebar-width", e), S = k(
+      () => z(a.workspaceStore, a.document.value)
+    );
+    return y({
+      sidebarWidth: i,
+      environment: S
+    }), (e, t) => h((c(), u("div", P, [
+      d("div", J, [
+        d("div", {
+          id: o(f),
           ref_key: "client",
-          ref: n,
+          ref: p,
           "aria-label": "API Client",
           "aria-modal": "true",
           class: "scalar-app-layout scalar-client flex",
           role: "dialog",
           tabindex: "-1"
         }, [
-          x(c(T), null, {
-            default: y(() => [...t[1] || (t[1] = [
-              a("main", { class: "flex flex-1 flex-row" }, " Insert operation page here ", -1)
-            ])]),
+          s(o($), null, {
+            default: U(() => [
+              s(o(A)),
+              e.document.value && e.path?.value && e.method?.value ? (c(), u("main", X, [
+                s(o(G), {
+                  modelValue: n.value,
+                  "onUpdate:modelValue": t[0] || (t[0] = (r) => n.value = r),
+                  class: "absolute top-2 left-3 z-[10001]"
+                }, null, 8, ["modelValue"]),
+                h(s(o(K), {
+                  sidebarWidth: i.value,
+                  "onUpdate:sidebarWidth": [
+                    t[1] || (t[1] = (r) => i.value = r),
+                    C
+                  ],
+                  activeWorkspace: m,
+                  class: "z-[10000] h-full max-md:absolute! max-md:w-full!",
+                  documents: [e.document.value],
+                  eventBus: o(l),
+                  isDroppable: () => !1,
+                  layout: "modal",
+                  sidebarState: e.sidebarState.state,
+                  workspaces: [],
+                  onSelectItem: e.sidebarState.handleSelectItem
+                }, null, 8, ["sidebarWidth", "documents", "eventBus", "sidebarState", "onSelectItem"]), [
+                  [b, n.value]
+                ]),
+                s(L, {
+                  activeWorkspace: m,
+                  class: "flex-1",
+                  document: e.document.value,
+                  documentSlug: e.document.value["x-scalar-navigation"]?.id ?? "",
+                  environment: S.value,
+                  eventBus: o(l),
+                  exampleName: e.exampleName?.value,
+                  layout: "modal",
+                  method: e.method?.value,
+                  path: e.path?.value,
+                  plugins: e.plugins,
+                  workspaceStore: e.workspaceStore
+                }, null, 8, ["document", "documentSlug", "environment", "eventBus", "exampleName", "method", "path", "plugins", "workspaceStore"])
+              ])) : (c(), u("div", Y, [...t[3] || (t[3] = [
+                d("span", { class: "text-c-3" }, "No document selected", -1)
+              ])]))
+            ]),
             _: 1
           })
-        ], 8, I),
-        a("div", {
+        ], 8, Q),
+        d("div", {
           class: "scalar-app-exit",
-          onClick: t[0] || (t[0] = (g) => e.modalState.hide())
+          onClick: t[2] || (t[2] = (r) => e.modalState.hide())
         })
       ])
     ], 512)), [
-      [E, e.modalState.open]
+      [b, e.modalState.open]
     ]);
   }
 });
 export {
-  U as default
+  me as default
 };

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

@@ -1,53 +1,39 @@
 import type { WorkspaceStore } from '@scalar/workspace-store/client';
+import { type RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters.js';
+import type { ClientPlugin } from '../../../../v2/helpers/plugins.js';
 export type CreateApiClientModalOptions = {
-    /** Element to mount the client modal to */
+    /** Element to mount the client modal to. */
     el: HTMLElement | null;
     /**
-     * Will attempt to mount the references immediately
-     * For SSR this may need to be disabled and handled manually on the client side
+     * Will attempt to mount the references immediately.
+     * For SSR this may need to be disabled and handled manually on the client side.
      */
     mountOnInitialize?: boolean;
-    /** The workspace store must be initialized and passed in */
+    /** The workspace store must be initialized and passed in. */
     workspaceStore: WorkspaceStore;
+    /** Api client plugins to include in the modal */
+    plugins?: ClientPlugin[];
 };
-/** Payload for routing and opening the API client modal */
-type RoutePayload = {
-    path: string;
-    method: string;
-    example?: string;
-    documentSlug?: string;
-};
-export type ActiveEntities = Required<RoutePayload>;
 /**
- * Create the API Client Modal
+ * Creates the API Client Modal.
  *
- * The new API Client Modal doesn't require a router, instead we can "route" by setting the active entities directly
+ * The modal does not require a router. Instead, navigation is handled by setting
+ * active entities directly through the returned `route` function.
  */
-export declare const createApiClientModal: ({ el, workspaceStore, mountOnInitialize }: CreateApiClientModalOptions) => {
-    /** The vue app instance for the modal, be careful with this */
+export declare const createApiClientModal: ({ el, workspaceStore, mountOnInitialize, plugins, }: CreateApiClientModalOptions) => {
+    /** The Vue app instance for the modal. Use with caution. */
     app: import("vue").App<Element>;
-    /** Open the API client modal and optionally route to an example */
+    /** Open the modal and optionally navigate to a specific route. */
     open: (payload?: RoutePayload) => void;
-    /** Mount the client to a given element */
+    /** Mount the modal to a given element. */
     mount: (mountingEl?: HTMLElement | null) => void;
-    /** "Route" to the specified path, method and example */
-    route: (payload: RoutePayload) => {
-        path: string;
-        method: string;
-        example: string;
-        documentSlug: string;
-    } & {
-        path: string;
-        method: string;
-        example: string;
-        documentSlug: string;
-    } & RoutePayload;
-    /** Controls the visibility of the modal */
+    /** Navigate to the specified path, method, and example. */
+    route: (payload: RoutePayload) => void;
+    /** Controls the visibility of the modal. */
     modalState: {
         open: boolean;
         show: () => void;
         hide: () => void;
     };
 };
-export {};
 //# sourceMappingURL=create-api-client-modal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAKpE,MAAM,MAAM,2BAA2B,GAAG;IACxC,2CAA2C;IAC3C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,4DAA4D;IAC5D,cAAc,EAAE,cAAc,CAAA;CAC/B,CAAA;AAED,2DAA2D;AAC3D,KAAK,YAAY,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;AAEnD;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAAI,2CAAkD,2BAA2B;IA4C9G,+DAA+D;;IAE/D,mEAAmE;qBAClD,YAAY;IAM7B,0CAA0C;;IAE1C,wDAAwD;qBAdlC,YAAY;;;;;;;;;;;IAgBlC,2CAA2C;;;;;;CAG9C,CAAA"}
+{"version":3,"file":"create-api-client-modal.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/create-api-client-modal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAGpE,OAAO,EAEL,KAAK,YAAY,EAElB,MAAM,sDAAsD,CAAA;AAG7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAKxD,MAAM,MAAM,2BAA2B,GAAG;IACxC,4CAA4C;IAC5C,EAAE,EAAE,WAAW,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,6DAA6D;IAC7D,cAAc,EAAE,cAAc,CAAA;IAC9B,iDAAiD;IACjD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAA;CACzB,CAAA;AAMD;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,qDAKlC,2BAA2B;IAoE1B,4DAA4D;;IAE5D,kEAAkE;qBACjD,YAAY,KAAG,IAAI;IAMpC,0CAA0C;yBA1BjB,WAAW,GAAG,IAAI,KAAQ,IAAI;IA4BvD,2DAA2D;qBApErC,YAAY,KAAG,IAAI;IAsEzC,4CAA4C;;;;;;CAG/C,CAAA"}

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

@@ -1,18 +1,40 @@
-import { useModal as d } from "@scalar/components";
-import { reactive as p, createApp as u } from "vue";
-import m from "../Modal.vue.js";
-const M = ({ el: n, workspaceStore: o, mountOnInitialize: l = !0 }) => {
-  const c = {
+import { useModal as M } from "@scalar/components";
+import { reactive as b, computed as t, createApp as P } from "vue";
+import { resolveRouteParameters as A } from "./resolve-route-parameters.js";
+import { useModalSidebar as C } from "../hooks/use-modal-sidebar.js";
+import I from "../Modal.vue.js";
+const N = ({
+  el: f,
+  workspaceStore: a,
+  mountOnInitialize: v = !0,
+  plugins: h
+}) => {
+  const r = {
     path: "default",
     method: "default",
     example: "default",
-    documentSlug: o.workspace["x-scalar-active-document"] || "default"
-  }, s = p(c), t = d(), a = u(m, {
-    workspaceStore: o,
-    modalState: t
+    documentSlug: a.workspace["x-scalar-active-document"] || "default"
+  }, m = b({ ...r }), c = (e) => {
+    Object.assign(m, r, e);
+  }, o = t(() => A(a, m)), s = t(() => o.value.documentSlug), u = t(() => o.value.path), d = t(() => o.value.method), i = t(() => o.value.example), g = t(() => a.workspace.documents[s.value ?? ""] ?? null), x = C({
+    workspaceStore: a,
+    documentSlug: s,
+    path: u,
+    method: d,
+    exampleName: i,
+    route: c
+  }), l = M(), n = P(I, {
+    workspaceStore: a,
+    document: g,
+    modalState: l,
+    sidebarState: x,
+    path: u,
+    method: d,
+    exampleName: i,
+    plugins: h
   });
-  a.config.idPrefix = "scalar-client";
-  const r = (e = n) => {
+  n.config.idPrefix = "scalar-client";
+  const p = (e = f) => {
     if (!e) {
       console.error(
         "[@scalar/api-client] Could not create the API client Modal.",
@@ -21,25 +43,23 @@ const M = ({ el: n, workspaceStore: o, mountOnInitialize: l = !0 }) => {
       );
       return;
     }
-    a.mount(e);
+    n.mount(e);
   };
-  l && r();
-  const i = (e) => Object.assign(s, c, e);
-  return {
-    /** The vue app instance for the modal, be careful with this */
-    app: a,
-    /** Open the API client modal and optionally route to an example */
+  return v && p(), {
+    /** The Vue app instance for the modal. Use with caution. */
+    app: n,
+    /** Open the modal and optionally navigate to a specific route. */
     open: (e) => {
-      t.open = !0, e && i(e);
+      l.open = !0, e && c(e);
     },
-    /** Mount the client to a given element */
-    mount: r,
-    /** "Route" to the specified path, method and example */
-    route: i,
-    /** Controls the visibility of the modal */
-    modalState: t
+    /** Mount the modal to a given element. */
+    mount: p,
+    /** Navigate to the specified path, method, and example. */
+    route: c,
+    /** Controls the visibility of the modal. */
+    modalState: l
   };
 };
 export {
-  M as createApiClientModal
+  N as createApiClientModal
 };

package/dist/v2/features/modal/helpers/resolve-route-parameters.d.ts

@@ -0,0 +1,55 @@
+import type { HttpMethod } from '@scalar/helpers/http/http-methods';
+import type { WorkspaceStore } from '@scalar/workspace-store/client';
+import type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation';
+/** Payload for routing and opening the API client modal. */
+export type RoutePayload = {
+    path: string;
+    method: HttpMethod;
+    example?: string;
+    documentSlug?: string;
+};
+/** Raw input values that may contain "default" placeholders. */
+export type DefaultEntities = Record<keyof RoutePayload, string>;
+/** Context for resolving route parameters from the workspace store. */
+type ResolverContext = {
+    store: WorkspaceStore;
+    documentSlug: string | undefined;
+};
+/**
+ * Resolves the document slug from a raw input value.
+ *
+ * When "default" is specified and no document exists with that slug,
+ * we fall back to the active document or the first available document.
+ * This ensures a valid document is selected even when the caller does not know which documents exist.
+ */
+export declare const resolveDocumentSlug: (store: WorkspaceStore, slug: string | undefined) => string | undefined;
+/**
+ * Resolves the path from a raw input value.
+ *
+ * When "default" is specified, returns the first available path in the document.
+ * This is useful for initial navigation when no specific path is requested.
+ */
+export declare const resolvePath: (ctx: ResolverContext, path: string | undefined) => string | undefined;
+/**
+ * Resolves the HTTP method from a raw input value.
+ *
+ * When "default" is specified, returns the first valid HTTP method for the given path.
+ * This ensures we select a real method rather than metadata keys like "parameters" or "summary".
+ */
+export declare const resolveMethod: (ctx: ResolverContext, path: string | undefined, method: string | undefined) => HttpMethod | undefined;
+/**
+ * Resolves the example name from a raw input value.
+ *
+ * When "default" is specified, returns the first available example name.
+ * Falls back to "default" when no examples exist, which signals to use the default request body.
+ */
+export declare const resolveExampleName: (ctx: ResolverContext, operation: TraversedEntry | undefined, exampleKey: string | undefined) => string;
+/**
+ * Resolves all route parameters from raw input values to their actual values.
+ *
+ * This function handles "default" placeholders by looking up actual values from the workspace store.
+ * It ensures the modal can be opened even when the caller does not know specific paths, methods, or examples.
+ */
+export declare const resolveRouteParameters: (store: WorkspaceStore, params: DefaultEntities) => Partial<RoutePayload>;
+export {};
+//# sourceMappingURL=resolve-route-parameters.d.ts.map

package/dist/v2/features/modal/helpers/resolve-route-parameters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-route-parameters.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/helpers/resolve-route-parameters.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAEnE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,4CAA4C,CAAA;AAElG,4DAA4D;AAC5D,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,gEAAgE;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,YAAY,EAAE,MAAM,CAAC,CAAA;AAEhE,uEAAuE;AACvE,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,cAAc,CAAA;IACrB,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;CACjC,CAAA;AAWD;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,cAAc,EAAE,MAAM,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SAS9F,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,eAAe,EAAE,MAAM,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SAYrF,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,KAAK,eAAe,EACpB,MAAM,MAAM,GAAG,SAAS,EACxB,QAAQ,MAAM,GAAG,SAAS,KACzB,UAAU,GAAG,SAaf,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,GAC7B,KAAK,eAAe,EACpB,WAAW,cAAc,GAAG,SAAS,EACrC,YAAY,MAAM,GAAG,SAAS,KAC7B,MAmBF,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc,EAAE,QAAQ,eAAe,KAAG,OAAO,CAAC,YAAY,CAkB3G,CAAA"}

package/dist/v2/features/modal/helpers/resolve-route-parameters.js

@@ -0,0 +1,29 @@
+import { isHttpMethod as u } from "@scalar/helpers/http/is-http-method";
+import { getOperationEntries as l } from "@scalar/workspace-store/navigation";
+const p = (t) => t.type === "example", a = (t) => t.store.workspace.documents[t.documentSlug ?? ""], f = (t, e) => e !== "default" || t.workspace.documents[e] !== void 0 ? e : t.workspace["x-scalar-active-document"] || Object.keys(t.workspace.documents)[0], h = (t, e) => {
+  const n = a(t);
+  if (n)
+    return e === "default" ? Object.keys(n.paths ?? {})[0] : e;
+}, v = (t, e, n) => {
+  const o = a(t);
+  if (!(!o || !e))
+    return n === "default" ? Object.keys(o.paths?.[e] ?? {}).find(u) : u(n) ? n : void 0;
+}, x = (t, e, n) => {
+  if (!a(t) || e?.type !== "operation")
+    return "default";
+  const c = e.children?.filter(p) ?? [], r = c.find((s) => s.name === n);
+  return r ? r.name : n === "default" ? c[0]?.name ?? "default" : "default";
+}, y = (t, e) => {
+  const n = f(t, e.documentSlug), o = { store: t, documentSlug: n }, c = h(o, e.path), r = v(o, c, e.method), s = a(o)?.["x-scalar-navigation"];
+  if (!s)
+    return { documentSlug: n, path: c, method: r, example: "default" };
+  const i = l(s).get(`${c}|${r}`)?.find((m) => m.type === "operation"), d = x(o, i, e.example);
+  return { documentSlug: n, path: c, method: r, example: d };
+};
+export {
+  f as resolveDocumentSlug,
+  x as resolveExampleName,
+  v as resolveMethod,
+  h as resolvePath,
+  y as resolveRouteParameters
+};

package/dist/v2/features/modal/hooks/use-modal-sidebar.d.ts

@@ -0,0 +1,42 @@
+import type { HttpMethod } from '@scalar/helpers/http/http-methods';
+import { createSidebarState } from '@scalar/sidebar';
+import type { WorkspaceStore } from '@scalar/workspace-store/client';
+import type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation';
+import { type ComputedRef } from 'vue';
+import type { RoutePayload } from '../../../../v2/features/modal/helpers/resolve-route-parameters.js';
+export type UseModalSidebarReturn = {
+    handleSelectItem: (id: string) => void;
+    state: ReturnType<typeof createSidebarState<TraversedEntry>>;
+    getEntryByLocation: (location: {
+        document: string;
+        path?: string;
+        method?: HttpMethod;
+        example?: string;
+    }) => TraversedEntry | undefined;
+};
+/**
+ * useSidebarState - Custom hook to manage the sidebar state and navigation logic in the Scalar API client
+ *
+ * This composable manages the sidebar structure, synchronizes selection state
+ * with the current route, and provides a handler for selecting sidebar items.
+ *
+ * Example usage:
+ *
+ * const { handleSelectItem, sidebarState } = useSidebarState({
+ *   workspaceStore,
+ *   workspaceSlug,
+ *   documentSlug,
+ *   path,
+ *   method,
+ *   exampleName,
+ * })
+ */
+export declare const useModalSidebar: ({ workspaceStore, documentSlug, path, method, exampleName, route, }: {
+    workspaceStore: WorkspaceStore | null;
+    documentSlug: ComputedRef<string | undefined>;
+    path: ComputedRef<string | undefined>;
+    method: ComputedRef<HttpMethod | undefined>;
+    exampleName: ComputedRef<string | undefined>;
+    route: (payload: RoutePayload) => void;
+}) => UseModalSidebarReturn;
+//# sourceMappingURL=use-modal-sidebar.d.ts.map

package/dist/v2/features/modal/hooks/use-modal-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-modal-sidebar.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/hooks/use-modal-sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAuC,MAAM,iBAAiB,CAAA;AACzF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAChF,OAAO,EAAE,KAAK,WAAW,EAA4B,MAAM,KAAK,CAAA;AAEhE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAA;AAGxF,MAAM,MAAM,qBAAqB,GAAG;IAClC,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,UAAU,CAAC,OAAO,kBAAkB,CAAC,cAAc,CAAC,CAAC,CAAA;IAC5D,kBAAkB,EAAE,CAAC,QAAQ,EAAE;QAC7B,QAAQ,EAAE,MAAM,CAAA;QAChB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,UAAU,CAAA;QACnB,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,KAAK,cAAc,GAAG,SAAS,CAAA;CACjC,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,eAAe,GAAI,qEAO7B;IACD,cAAc,EAAE,cAAc,GAAG,IAAI,CAAA;IACrC,YAAY,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC7C,IAAI,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IACrC,MAAM,EAAE,WAAW,CAAC,UAAU,GAAG,SAAS,CAAC,CAAA;IAC3C,WAAW,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5C,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;CACvC,KAAG,qBAwJH,CAAA"}

package/dist/v2/features/modal/hooks/use-modal-sidebar.js

@@ -0,0 +1,93 @@
+import { createSidebarState as S, generateReverseIndex as v, getChildEntry as I } from "@scalar/sidebar";
+import { getParentEntry as l } from "@scalar/workspace-store/navigation";
+import { computed as h, toValue as p, watch as b } from "vue";
+import { generateLocationId as m } from "../../../helpers/generate-location-id.js";
+const k = ({
+  workspaceStore: u,
+  documentSlug: o,
+  path: x,
+  method: y,
+  exampleName: f,
+  route: E
+}) => {
+  const s = h(
+    () => u?.workspace.documents[p(o) ?? ""]?.["x-scalar-navigation"]?.children ?? []
+  ), t = S(s), i = h(
+    () => v({
+      items: s.value,
+      nestedKey: "children",
+      filter: (e) => e.type === "operation" || e.type === "example",
+      getId: (e) => {
+        const r = l("operation", e);
+        return m({
+          document: p(o) ?? "",
+          path: r?.path,
+          method: r?.method,
+          example: e.type === "example" ? e.name : void 0
+        });
+      }
+    })
+  ), c = (e) => {
+    const r = i.value.get(
+      m({
+        document: e.document,
+        path: e.path,
+        method: e.method,
+        example: e.example
+      })
+    );
+    return r || i.value.get(
+      m({
+        document: e.document,
+        path: e.path,
+        method: e.method
+      })
+    );
+  }, g = (e) => {
+    const r = t.getEntryById(e);
+    if (!r) {
+      console.warn(`Could not find sidebar entry with id ${e} to select`);
+      return;
+    }
+    if (r.type === "operation" || r.type === "example") {
+      if (t.isSelected(e)) {
+        t.setExpanded(e, !t.isExpanded(e));
+        return;
+      }
+      const a = l("operation", r), n = I("example", r);
+      return n ? (t.setSelected(n.id), t.setExpanded(n.id, !0)) : t.setSelected(e), a ? E({
+        documentSlug: p(o),
+        path: a.path,
+        method: a.method,
+        example: n?.name ?? "default"
+      }) : void 0;
+    }
+    t.setExpanded(e, !t.isExpanded(e));
+  };
+  return b(
+    [o, x, y, f],
+    ([e, r, a, n]) => {
+      if (!e) {
+        t.setSelected(null);
+        return;
+      }
+      const d = c({
+        document: e,
+        path: r,
+        method: a,
+        example: n
+      });
+      d && (t.setSelected(d.id), t.setExpanded(d.id, !0));
+    },
+    {
+      immediate: !0
+    }
+  ), {
+    handleSelectItem: g,
+    state: t,
+    getEntryByLocation: c
+  };
+};
+export {
+  k as useModalSidebar
+};

package/dist/v2/features/modal/hooks/use-workspace-client-modal-events.d.ts

@@ -0,0 +1,18 @@
+import type { ModalState } from '@scalar/components';
+import type { WorkspaceStore } from '@scalar/workspace-store/client';
+import type { WorkspaceEventBus } from '@scalar/workspace-store/events';
+import type { WorkspaceDocument } from '@scalar/workspace-store/schemas/workspace';
+import type { ComputedRef, Ref } from 'vue';
+import type { UseModalSidebarReturn } from '../../../../v2/features/modal/hooks/use-modal-sidebar.js';
+/**
+ * Top level event handling for the modal client
+ */
+export declare const useWorkspaceClientModalEvents: ({ eventBus, document, isSidebarOpen, sidebarState, modalState, workspaceStore, }: {
+    eventBus: WorkspaceEventBus;
+    document: ComputedRef<WorkspaceDocument | null>;
+    isSidebarOpen: Ref<boolean>;
+    sidebarState: UseModalSidebarReturn;
+    modalState: ModalState;
+    workspaceStore: WorkspaceStore;
+}) => void;
+//# sourceMappingURL=use-workspace-client-modal-events.d.ts.map

package/dist/v2/features/modal/hooks/use-workspace-client-modal-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-workspace-client-modal-events.d.ts","sourceRoot":"","sources":["../../../../../src/v2/features/modal/hooks/use-workspace-client-modal-events.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAA;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAA;AAuBvE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAClF,OAAO,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAA;AAExF;;GAEG;AACH,eAAO,MAAM,6BAA6B,GAAI,kFAO3C;IACD,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,QAAQ,EAAE,WAAW,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IAC/C,aAAa,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IAC3B,YAAY,EAAE,qBAAqB,CAAA;IACnC,UAAU,EAAE,UAAU,CAAA;IACtB,cAAc,EAAE,cAAc,CAAA;CAC/B,SAgEA,CAAA"}

package/dist/v2/features/modal/hooks/use-workspace-client-modal-events.js

@@ -0,0 +1,30 @@
+import { deleteSecurityScheme as d, updateSelectedAuthTab as i, updateSecurityScheme as u, updateSelectedScopes as s, updateSelectedSecuritySchemes as y, addServer as c, updateServer as v, deleteServer as S, updateServerVariables as h, updateSelectedServer as n, addOperationParameter as R, updateOperationParameter as q, deleteOperationParameter as w, deleteAllOperationParameters as m, updateOperationRequestBodyContentType as O, updateOperationRequestBodyExample as f, addOperationRequestBodyFormRow as P, updateOperationRequestBodyFormRow as b, deleteOperationRequestBodyFormRow as k, updateSelectedClient as x } from "@scalar/workspace-store/mutators";
+const F = ({
+  eventBus: a,
+  document: r,
+  isSidebarOpen: o,
+  sidebarState: t,
+  modalState: l,
+  workspaceStore: p
+}) => {
+  a.on("scroll-to:nav-item", ({ id: e }) => t.handleSelectItem(e)), a.on("auth:delete:security-scheme", (e) => d(r.value, e)), a.on("auth:update:active-index", (e) => i(r.value, e)), a.on("auth:update:security-scheme", (e) => u(r.value, e)), a.on("auth:update:selected-scopes", (e) => s(r.value, e)), a.on(
+    "auth:update:selected-security-schemes",
+    async (e) => await y(r.value, e)
+  ), a.on("server:add:server", () => c(r.value)), a.on("server:update:server", (e) => v(r.value, e)), a.on("server:delete:server", (e) => S(r.value, e)), a.on("server:update:variables", (e) => h(r.value, e)), a.on("server:update:selected", (e) => n(r.value, e)), a.on("operation:add:parameter", (e) => R(r.value, e)), a.on("operation:update:parameter", (e) => q(r.value, e)), a.on("operation:delete:parameter", (e) => w(r.value, e)), a.on("operation:delete-all:parameters", (e) => m(r.value, e)), a.on(
+    "operation:update:requestBody:contentType",
+    (e) => O(r.value, e)
+  ), a.on("operation:update:requestBody:value", (e) => {
+    f(r.value, e);
+  }), a.on("operation:add:requestBody:formRow", (e) => {
+    P(r.value, e);
+  }), a.on(
+    "operation:update:requestBody:formRow",
+    (e) => b(r.value, e)
+  ), a.on(
+    "operation:delete:requestBody:formRow",
+    (e) => k(r.value, e)
+  ), a.on("ui:toggle:sidebar", () => o.value = !o.value), a.on("ui:close:client-modal", () => l.hide()), a.on("workspace:update:selected-client", (e) => x(p.workspace, e));
+};
+export {
+  F as useWorkspaceClientModalEvents
+};

package/dist/v2/features/operation/Operation.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Operation.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/operation/Operation.vue"],"names":[],"mappings":"AA0HA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAIlE;;;;;;;GAOG;;AACH,wBA4KC"}
+{"version":3,"file":"Operation.vue.d.ts","sourceRoot":"","sources":["../../../../src/v2/features/operation/Operation.vue"],"names":[],"mappings":"AA2KA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAMlE;;;;;;;GAOG;;AACH,wBAmOC"}