@scalar/sidebar 0.3.0 → 0.5.0

package/dist/components/ScalarSidebar.vue.d.ts

@@ -1,15 +1,40 @@
-import type { DraggingItem, HoveredItem } from '@scalar/draggable';
+import type { DraggingItem, HoveredItem, UseDraggableOptions } from '../hooks/use-draggable.js';
 import type { Item } from '../types';
 type __VLS_Props = {
-    /** Layout type */
+    /**
+     * Layout type for the sidebar.
+     * Determines whether the sidebar should behave in 'client' or 'reference' mode.
+     */
     layout: 'client' | 'reference';
-    /** Sidebar state */
+    /**
+     * List of items to render in the sidebar.
+     */
     items: Item[];
+    /**
+     * Function to determine whether a given item (by id) is currently selected.
+     */
     isSelected: (id: string) => boolean;
+    /**
+     * Function to determine whether a given item (by id) is currently expanded (open to show children).
+     */
     isExpanded: (id: string) => boolean;
+    /**
+     * Sidebar configuration options.
+     * - operationTitleSource: sets whether operations show their path or summary as the display title.
+     */
     options?: {
         operationTitleSource: 'path' | 'summary' | undefined;
     };
+    /**
+     * The indentation in pixels to apply to nested items/groups in the sidebar.
+     */
+    indent?: number;
+    /**
+     * Prevents sidebar items from being hovered and dropped into. Can be either a function or a boolean
+     *
+     * @default true
+     */
+    isDroppable?: UseDraggableOptions['isDroppable'];
 };
 type __VLS_Slots = {
     /** Overrides the main items list */

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarSidebar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ScalarSidebar.vue"],"names":[],"mappings":"AAmFA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAInC,KAAK,WAAW,GAAG;IACjB,kBAAkB;IAClB,MAAM,EAAE,QAAQ,GAAG,WAAW,CAAA;IAC9B,oBAAoB;IACpB,KAAK,EAAE,IAAI,EAAE,CAAA;IACb,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE;QACR,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;KACrD,CAAA;CACF,CAAC;AASF,KAAK,WAAW,GAAG;IACjB,oCAAoC;IACpC,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,iEAAiE;IACjE,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C,yEAAyE;IACzE,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,4EAA4E;IAC5E,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,6DAA6D;IAC7D,MAAM,CAAC,IAAI,OAAO,CAAA;CACnB,CAAC;AA8HF,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarSidebar.vue.d.ts","sourceRoot":"","sources":["../../src/components/ScalarSidebar.vue"],"names":[],"mappings":"AAqIA,OAAO,KAAK,EACV,YAAY,EACZ,WAAW,EACX,mBAAmB,EACpB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAInC,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,MAAM,EAAE,QAAQ,GAAG,WAAW,CAAA;IAC9B;;OAEG;IACH,KAAK,EAAE,IAAI,EAAE,CAAA;IACb;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;KACrD,CAAA;IACD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;CACjD,CAAC;AAuBF,KAAK,WAAW,GAAG;IACjB,oCAAoC;IACpC,OAAO,CAAC,IAAI,OAAO,CAAA;IACnB,iEAAiE;IACjE,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;IAC1C,yEAAyE;IACzE,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,4EAA4E;IAC5E,MAAM,CAAC,IAAI,OAAO,CAAA;IAClB,6DAA6D;IAC7D,MAAM,CAAC,IAAI,OAAO,CAAA;CACnB,CAAC;AAwIF,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/ScalarSidebar.vue.js

@@ -1,53 +1,62 @@
-import { defineComponent as u, createBlock as d, openBlock as s, unref as i, withCtx as l, renderSlot as o, createVNode as f, createElementVNode as c, createElementBlock as S, Fragment as E, renderList as y, mergeProps as $ } from "vue";
-import { ScalarSidebar as b, ScalarSidebarItems as g } from "@scalar/components";
+import { defineComponent as u, createBlock as i, openBlock as l, unref as d, normalizeStyle as f, withCtx as s, renderSlot as o, createVNode as c, createElementVNode as S, createElementBlock as y, Fragment as b, renderList as g, mergeProps as D } from "vue";
+import { ScalarSidebar as E, ScalarSidebarItems as $ } from "@scalar/components";
 import k from "./SidebarItem.vue.js";
-const D = /* @__PURE__ */ u({
+const N = /* @__PURE__ */ u({
   __name: "ScalarSidebar",
   props: {
     layout: {},
     items: {},
     isSelected: { type: Function },
     isExpanded: { type: Function },
-    options: {}
+    options: {},
+    indent: { default: 20 },
+    isDroppable: { type: Function }
   },
   emits: ["reorder", "selectItem"],
-  setup(I, { emit: m }) {
-    const n = m, p = (e, t) => {
-      n("reorder", e, t);
+  setup(F, { emit: p }) {
+    const a = p, m = (e, t) => {
+      a("reorder", e, t);
     };
-    return (e, t) => (s(), d(i(b), { class: "flex min-h-0 flex-col" }, {
-      default: l(() => [
+    return (e, t) => (l(), i(d(E), {
+      class: "flex min-h-0 flex-col",
+      style: f({
+        "--scalar-sidebar-indent": e.indent + "px"
+      })
+    }, {
+      default: s(() => [
         o(e.$slots, "header"),
         o(e.$slots, "default", {}, () => [
-          f(i(g), { class: "custom-scroll pt-0" }, {
-            default: l(() => [
+          c(d($), { class: "custom-scroll pt-0" }, {
+            default: s(() => [
               o(e.$slots, "before"),
-              (s(!0), S(E, null, y(e.items, (a) => (s(), d(k, {
-                key: a.id,
+              (l(!0), y(b, null, g(e.items, (n) => (l(), i(k, {
+                key: n.id,
+                isDraggable: e.layout === "client",
+                isDroppable: e.isDroppable,
                 isExpanded: e.isExpanded,
                 isSelected: e.isSelected,
-                item: a,
+                item: n,
                 layout: e.layout,
                 options: e.options,
-                onOnDragEnd: p,
-                onSelectItem: t[0] || (t[0] = (r) => n("selectItem", r))
+                onOnDragEnd: m,
+                onSelectItem: t[0] || (t[0] = (r) => a("selectItem", r))
               }, {
-                decorator: l((r) => [
-                  o(e.$slots, "decorator", $({ ref_for: !0 }, r))
+                decorator: s((r) => [
+                  o(e.$slots, "decorator", D({ ref_for: !0 }, r))
                 ]),
                 _: 3
-              }, 8, ["isExpanded", "isSelected", "item", "layout", "options"]))), 128))
+              }, 8, ["isDraggable", "isDroppable", "isExpanded", "isSelected", "item", "layout", "options"]))), 128))
             ]),
             _: 3
           }),
-          t[1] || (t[1] = c("div", { class: "flex-1" }, null, -1))
+          t[1] || (t[1] = S("div", { class: "flex-1" }, null, -1))
         ]),
         o(e.$slots, "footer")
       ]),
       _: 3
-    }));
+    }, 8, ["style"]));
   }
 });
 export {
-  D as default
+  N as default
 };

package/dist/components/SidebarItem.vue.d.ts

@@ -1,25 +1,57 @@
-import { type DraggingItem, type HoveredItem } from '@scalar/draggable';
+import { type DraggingItem, type HoveredItem, type UseDraggableOptions } from '../hooks/use-draggable.js';
 import type { Item } from '../types';
 type __VLS_Props = {
+    /**
+     * The sidebar item to render.
+     */
     item: Item;
+    /**
+     * The layout mode for the sidebar ('client' or 'reference').
+     */
     layout: 'client' | 'reference';
+    /**
+     * Function to determine if an item is currently selected by id.
+     */
     isSelected: (id: string) => boolean;
+    /**
+     * Function to determine if an item is currently expanded (showing its children) by id.
+     */
     isExpanded: (id: string) => boolean;
+    /**
+     * Sidebar configuration options.
+     * - operationTitleSource: sets whether operations show their path or summary as the display title.
+     */
     options: {
         operationTitleSource: 'path' | 'summary' | undefined;
     } | undefined;
+    /**
+     * Prevents this item from being dragged.
+     *
+     * @default true
+     */
+    isDraggable?: UseDraggableOptions['isDraggable'];
+    /**
+     * Prevents this item from being hovered and dropped into. Can be either a function or a boolean.
+     *
+     * @default true
+     */
+    isDroppable?: UseDraggableOptions['isDroppable'];
 };
 type __VLS_Slots = {
+    /**
+     * Adds an optional decorator for each item, such as an edit menu.
+     * The slot receives an object with the current item.
+     */
     decorator?(props: {
         item: Item;
     }): unknown;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    selectItem: (id: string) => any;
     onDragEnd: (draggingItem: DraggingItem, hoveredItem: HoveredItem) => any;
+    selectItem: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelectItem?: ((id: string) => any) | undefined;
     onOnDragEnd?: ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => any) | undefined;
+    onSelectItem?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItem.vue"],"names":[],"mappings":"AAyMA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EACjB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAInC,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,IAAI,CAAA;IACV,MAAM,EAAE,QAAQ,GAAG,WAAW,CAAA;IAC9B,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC,OAAO,EACH;QACE,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;KACrD,GACD,SAAS,CAAA;CACd,CAAC;AASF,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;CAC3C,CAAC;AA6WF,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"SidebarItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/SidebarItem.vue"],"names":[],"mappings":"AAkQA,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,mBAAmB,EACzB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAInC,KAAK,WAAW,GAAG;IACf;;OAEG;IACH,IAAI,EAAE,IAAI,CAAA;IACV;;OAEG;IACH,MAAM,EAAE,QAAQ,GAAG,WAAW,CAAA;IAC9B;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;OAEG;IACH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAA;IACnC;;;OAGG;IACH,OAAO,EACH;QACE,oBAAoB,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;KACrD,GACD,SAAS,CAAA;IAEb;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;IAChD;;;;OAIG;IACH,WAAW,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAA;CACjD,CAAC;AAmBJ,KAAK,WAAW,GAAG;IACjB;;;OAGG;IACH,SAAS,CAAC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,GAAG,OAAO,CAAA;CAC3C,CAAC;AAgYF,QAAA,MAAM,eAAe;;;;;;kFAOnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAQ1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/SidebarItem.vue.js

@@ -1,155 +1,161 @@
-import { defineComponent as B, resolveComponent as G, createBlock as n, openBlock as o, unref as r, withCtx as i, createTextVNode as s, toDisplayString as m, createElementBlock as p, Fragment as u, renderList as E, renderSlot as y, mergeProps as v, createSlots as I, createVNode as c, createCommentVNode as f } from "vue";
-import { ScalarSidebarSection as F, ScalarSidebarGroup as N, ScalarSidebarGroupToggle as O, ScalarSidebarItem as T } from "@scalar/components";
-import { Draggable as V } from "@scalar/draggable";
-import { addWordBreaks as k } from "@scalar/helpers/string/add-word-breaks";
-import { ScalarIconFolder as A } from "@scalar/icons";
-import D from "./SidebarHttpBadge.vue.js";
-const z = /* @__PURE__ */ B({
+import { defineComponent as T, resolveComponent as A, createBlock as a, openBlock as i, unref as o, mergeProps as d, toHandlers as S, withCtx as r, createTextVNode as D, toDisplayString as E, createElementBlock as v, Fragment as c, renderList as I, renderSlot as p, createSlots as w, createVNode as $, createCommentVNode as u } from "vue";
+import { ScalarSidebarSection as N, ScalarSidebarGroup as V, ScalarSidebarGroupToggle as H, ScalarSidebarItem as L, ScalarWrappingText as C } from "@scalar/components";
+import { LibraryIcon as O } from "@scalar/icons/library";
+import { useDraggable as P } from "../hooks/use-draggable.js";
+import G from "./SidebarHttpBadge.vue.js";
+const K = /* @__PURE__ */ T({
   __name: "SidebarItem",
   props: {
     item: {},
     layout: {},
     isSelected: { type: Function },
     isExpanded: { type: Function },
-    options: {}
+    options: {},
+    isDraggable: {},
+    isDroppable: { type: Function }
   },
   emits: ["selectItem", "onDragEnd"],
-  setup(w, { emit: $ }) {
-    const a = $, h = (e) => "children" in e && Array.isArray(e.children) && e.children.length > 0, C = (e) => "isGroup" in e && e.isGroup, g = (e) => w.layout === "reference" ? e : e.filter(
+  setup(m, { emit: B }) {
+    const s = B, f = (e) => "children" in e && Array.isArray(e.children) && e.children.length > 0, F = (e) => "isGroup" in e && e.isGroup, k = (e) => m.layout === "reference" ? e : e.filter(
       (t) => t.type === "operation" || t.type === "example" || t.type === "tag"
-    ), S = (e, t) => {
-      a("onDragEnd", e, t);
-    };
+    ), b = (e, t) => {
+      s("onDragEnd", e, t);
+    }, { draggableAttrs: g, draggableEvents: y } = P({
+      id: m.item.id,
+      isDraggable: m.isDraggable,
+      isDroppable: m.isDroppable,
+      onDragEnd: b
+    });
     return (e, t) => {
-      const b = G("SidebarItem", !0);
-      return o(), n(r(V), {
-        id: e.item.id,
-        class: "flex flex-1 flex-col",
-        isDraggable: e.layout === "client",
-        parentIds: [],
-        onOnDragEnd: S
-      }, {
-        default: i(() => [
-          h(e.item) && C(e.item) ? (o(), n(r(F), { key: 0 }, {
-            items: i(() => [
-              (o(!0), p(u, null, E(g(e.item.children), (d) => (o(), n(b, {
-                key: d.id,
-                isExpanded: e.isExpanded,
-                isSelected: e.isSelected,
-                item: d,
-                layout: e.layout,
-                options: e.options,
-                onOnDragEnd: S,
-                onSelectItem: t[0] || (t[0] = (l) => a("selectItem", l))
-              }, {
-                decorator: i((l) => [
-                  y(e.$slots, "decorator", v({ ref_for: !0 }, l))
-                ]),
-                _: 3
-              }, 8, ["isExpanded", "isSelected", "item", "layout", "options"]))), 128))
+      const h = A("SidebarItem", !0);
+      return f(e.item) && F(e.item) ? (i(), a(o(N), d({ key: 0 }, o(g), S(o(y))), {
+        items: r(() => [
+          (i(!0), v(c, null, I(k(e.item.children), (l) => (i(), a(h, {
+            key: l.id,
+            isDraggable: e.isDraggable,
+            isDroppable: e.isDroppable,
+            isExpanded: e.isExpanded,
+            isSelected: e.isSelected,
+            item: l,
+            layout: e.layout,
+            options: e.options,
+            onOnDragEnd: b,
+            onSelectItem: t[0] || (t[0] = (n) => s("selectItem", n))
+          }, {
+            decorator: r((n) => [
+              p(e.$slots, "decorator", d({ ref_for: !0 }, n))
             ]),
-            default: i(() => [
-              s(m(e.item.title) + " ", 1)
+            _: 3
+          }, 8, ["isDraggable", "isDroppable", "isExpanded", "isSelected", "item", "layout", "options"]))), 128))
+        ]),
+        default: r(() => [
+          D(E(e.item.title) + " ", 1)
+        ]),
+        _: 3
+      }, 16)) : f(e.item) && (e.layout === "reference" && !(e.item.type === "operation" || e.item.type === "webhook") || e.layout === "client") ? (i(), a(o(V), d({
+        key: 1,
+        active: e.isSelected(e.item.id),
+        controlled: "",
+        open: e.isExpanded(e.item.id)
+      }, o(g), S(o(y)), {
+        onClick: t[2] || (t[2] = () => s("selectItem", e.item.id))
+      }), w({
+        items: r(() => [
+          (i(!0), v(c, null, I(k(e.item.children), (l) => (i(), a(h, {
+            key: l.id,
+            isDraggable: e.isDraggable,
+            isDroppable: e.isDroppable,
+            isExpanded: e.isExpanded,
+            isSelected: e.isSelected,
+            item: l,
+            layout: e.layout,
+            options: e.options,
+            parentIds: [],
+            onOnDragEnd: b,
+            onSelectItem: t[1] || (t[1] = (n) => s("selectItem", n))
+          }, {
+            decorator: r((n) => [
+              p(e.$slots, "decorator", d({ ref_for: !0 }, n))
             ]),
             _: 3
-          })) : h(e.item) && (e.layout === "reference" && !(e.item.type === "operation" || e.item.type === "webhook") || e.layout === "client") ? (o(), n(r(N), {
+          }, 8, ["isDraggable", "isDroppable", "isExpanded", "isSelected", "item", "layout", "options"]))), 128))
+        ]),
+        default: r(() => [
+          D(" " + E(e.item.title) + " ", 1)
+        ]),
+        _: 2
+      }, [
+        e.item.type === "document" ? {
+          name: "icon",
+          fn: r(({ open: l }) => [
+            $(o(O), {
+              class: "text-c-3 block group-hover/group-button:hidden",
+              src: e.item.icon ?? "interface-content-folder"
+            }, null, 8, ["src"]),
+            $(o(H), {
+              class: "text-c-3 hidden group-hover/group-button:block",
+              open: l
+            }, null, 8, ["open"])
+          ]),
+          key: "0"
+        } : void 0,
+        "method" in e.item || e.$slots.decorator ? {
+          name: "aside",
+          fn: r(() => [
+            e.$slots.decorator ? p(e.$slots, "decorator", {
+              key: 0,
+              item: e.item
+            }) : u("", !0),
+            "method" in e.item ? (i(), a(G, {
+              key: 1,
+              active: e.isSelected(e.item.id),
+              class: "ml-2 h-4 self-start",
+              method: e.item.method,
+              webhook: e.item.type === "webhook"
+            }, null, 8, ["active", "method", "webhook"])) : u("", !0)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1040, ["active", "open"])) : (i(), a(o(L), d({
+        key: 2,
+        is: "button"
+      }, o(g), S(o(y)), {
+        selected: e.isSelected(e.item.id),
+        onClick: t[3] || (t[3] = () => s("selectItem", e.item.id))
+      }), w({
+        default: r(() => [
+          e.item.type === "model" ? (i(), a(o(C), {
+            key: 0,
+            preset: "property",
+            text: e.item.title
+          }, null, 8, ["text"])) : (i(), a(o(C), {
             key: 1,
-            active: e.isSelected(e.item.id),
-            controlled: "",
-            open: e.isExpanded(e.item.id),
-            onClick: t[2] || (t[2] = () => a("selectItem", e.item.id))
-          }, I({
-            items: i(() => [
-              (o(!0), p(u, null, E(g(e.item.children), (d) => (o(), n(b, {
-                key: d.id,
-                isExpanded: e.isExpanded,
-                isSelected: e.isSelected,
-                item: d,
-                layout: e.layout,
-                options: e.options,
-                parentIds: [],
-                onOnDragEnd: S,
-                onSelectItem: t[1] || (t[1] = (l) => a("selectItem", l))
-              }, {
-                decorator: i((l) => [
-                  y(e.$slots, "decorator", v({ ref_for: !0 }, l))
-                ]),
-                _: 3
-              }, 8, ["isExpanded", "isSelected", "item", "layout", "options"]))), 128))
-            ]),
-            default: i(() => [
-              s(" " + m(e.item.title) + " ", 1)
-            ]),
-            _: 2
-          }, [
-            e.item.type === "document" ? {
-              name: "icon",
-              fn: i(({ open: d }) => [
-                c(r(A), { class: "text-c-3 block group-hover/group-button:hidden" }),
-                c(r(O), {
-                  class: "text-c-3 hidden group-hover/group-button:block",
-                  open: d
-                }, null, 8, ["open"])
-              ]),
-              key: "0"
-            } : void 0,
-            "method" in e.item || e.$slots.decorator ? {
-              name: "aside",
-              fn: i(() => [
-                e.$slots.decorator ? y(e.$slots, "decorator", {
-                  key: 0,
-                  item: e.item
-                }) : f("", !0),
-                "method" in e.item ? (o(), n(D, {
-                  key: 1,
-                  active: e.isSelected(e.item.id),
-                  class: "ml-2 h-4 self-start",
-                  method: e.item.method,
-                  webhook: e.item.type === "webhook"
-                }, null, 8, ["active", "method", "webhook"])) : f("", !0)
-              ]),
-              key: "1"
-            } : void 0
-          ]), 1032, ["active", "open"])) : (o(), n(r(T), {
-            key: 2,
-            is: "button",
-            class: "text-left",
-            selected: e.isSelected(e.item.id),
-            onClick: t[3] || (t[3] = () => a("selectItem", e.item.id))
-          }, I({
-            default: i(() => [
-              e.item.type === "model" ? (o(), p(u, { key: 0 }, [
-                s(m(r(k)(e.item.title, { preset: "property" })), 1)
-              ], 64)) : (o(), p(u, { key: 1 }, [
-                s(m(e.options?.operationTitleSource === "path" && "path" in e.item ? r(k)(e.item.path) : r(k)(e.item.title)), 1)
-              ], 64))
-            ]),
-            _: 2
-          }, [
-            "method" in e.item || e.$slots.decorator ? {
-              name: "aside",
-              fn: i(() => [
-                e.$slots.decorator ? y(e.$slots, "decorator", {
-                  key: 0,
-                  item: e.item
-                }) : f("", !0),
-                "method" in e.item ? (o(), n(D, {
-                  key: 1,
-                  active: e.isSelected(e.item.id),
-                  class: "ml-2 h-4 self-start",
-                  method: e.item.method,
-                  webhook: e.item.type === "webhook"
-                }, null, 8, ["active", "method", "webhook"])) : f("", !0)
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["selected"]))
+            text: e.options?.operationTitleSource === "path" && "path" in e.item ? e.item.path : e.item.title
+          }, null, 8, ["text"]))
         ]),
-        _: 3
-      }, 8, ["id", "isDraggable"]);
+        _: 2
+      }, [
+        "method" in e.item || e.$slots.decorator ? {
+          name: "aside",
+          fn: r(() => [
+            e.$slots.decorator ? p(e.$slots, "decorator", {
+              key: 0,
+              item: e.item
+            }) : u("", !0),
+            "method" in e.item ? (i(), a(G, {
+              key: 1,
+              active: e.isSelected(e.item.id),
+              class: "ml-2 h-4 self-start",
+              method: e.item.method,
+              webhook: e.item.type === "webhook"
+            }, null, 8, ["active", "method", "webhook"])) : u("", !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["selected"]));
     };
   }
 });
 export {
-  z as default
+  K as default
 };

package/dist/helpers/create-sidebar-state.d.ts

@@ -73,6 +73,7 @@ export declare const createSidebarState: <T extends {
     }>>;
     selectedItems: import("vue").Ref<Record<string, boolean>, Record<string, boolean>>;
     expandedItems: import("vue").Ref<Record<string, boolean>, Record<string, boolean>>;
+    selectedItem: import("vue").Ref<string | null, string | null>;
     setSelected: (id: string | null) => void;
     setExpanded: (id: string, value: boolean) => void;
     isExpanded: (id: string) => boolean;
@@ -80,6 +81,7 @@ export declare const createSidebarState: <T extends {
     getEntryById: (id: string) => (T & {
         parent?: T | undefined;
     }) | undefined;
+    reset: () => void;
 };
 export type SidebarState<Item extends {
     id: string;

package/dist/helpers/create-sidebar-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-sidebar-state.d.ts","sourceRoot":"","sources":["../../src/helpers/create-sidebar-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,KAAK,CAAA;AAInE,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,sFAAsF;IACtF,GAAG,EAAE,MAAM,CAAA;IACX,sDAAsD;IACtD,KAAK,EAAE,OAAO,CAAC;QACb;;;WAGG;QACH,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;QACpC;;;WAGG;QACH,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;QACnC;;;WAGG;QACH,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;QAC3C;;;WAGG;QACH,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;KAC3C,CAAC,CAAA;CACH,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EACzD,OAAO,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAC5B,UAAU,mBAAmB;;;;;;;sBA0BJ,MAAM,GAAG,IAAI;sBAqDb,MAAM,SAAS,OAAO;qBAkCvB,MAAM;qBAIN,MAAM;uBAIJ,MAAM;;;CAajC,CAAA;AAED,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,UAAU,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAA"}
+{"version":3,"file":"create-sidebar-state.d.ts","sourceRoot":"","sources":["../../src/helpers/create-sidebar-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAA0B,MAAM,KAAK,CAAA;AAInE,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,sFAAsF;IACtF,GAAG,EAAE,MAAM,CAAA;IACX,sDAAsD;IACtD,KAAK,EAAE,OAAO,CAAC;QACb;;;WAGG;QACH,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;QACpC;;;WAGG;QACH,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;QACnC;;;WAGG;QACH,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;QAC3C;;;WAGG;QACH,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;KAC3C,CAAC,CAAA;CACH,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EACzD,OAAO,gBAAgB,CAAC,CAAC,EAAE,CAAC,EAC5B,UAAU,mBAAmB;;;;;;;;sBA6BJ,MAAM,GAAG,IAAI;sBAsDb,MAAM,SAAS,OAAO;qBAkCvB,MAAM;qBAIN,MAAM;uBAIJ,MAAM;;;;CAkBjC,CAAA;AAED,MAAM,MAAM,YAAY,CAAC,IAAI,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,IAAI,UAAU,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAA"}

package/dist/helpers/create-sidebar-state.js

@@ -1,34 +1,38 @@
-import { computed as c, toValue as u, ref as k } from "vue";
-import { generateReverseIndex as m } from "./generate-reverse-index.js";
-const E = (o, t) => {
-  const n = c(
-    () => m({
-      items: u(o),
+import { computed as v, toValue as k, ref as c } from "vue";
+import { generateReverseIndex as S } from "./generate-reverse-index.js";
+const g = (o, t) => {
+  const s = v(
+    () => S({
+      items: k(o),
       nestedKey: t?.key ?? "children"
     })
-  ), s = k({}), l = k({}), p = (e) => {
+  ), a = c({}), n = c({}), u = c(null), m = (e) => {
     const f = (r) => {
-      r && (s.value[r.id] = !0, "parent" in r && r.parent && f(r.parent));
+      r && (a.value[r.id] = !0, "parent" in r && r.parent && f(r.parent));
     };
-    t?.hooks?.onBeforeSelect && t.hooks.onBeforeSelect(e), s.value = {}, e !== null && f(n.value.get(e)), t?.hooks?.onAfterSelect && t.hooks.onAfterSelect(e);
-  }, v = (e, f) => {
-    const r = (a) => {
-      a && (l.value[a.id] = !0, "parent" in a && a.parent && r(a.parent));
+    t?.hooks?.onBeforeSelect && t.hooks.onBeforeSelect(e), a.value = {}, u.value = e, e !== null && f(s.value.get(e)), t?.hooks?.onAfterSelect && t.hooks.onAfterSelect(e);
+  }, p = (e, f) => {
+    const r = (l) => {
+      l && (n.value[l.id] = !0, "parent" in l && l.parent && r(l.parent));
     };
-    t?.hooks?.onBeforeExpand && t.hooks.onBeforeExpand(e), f === !1 ? l.value[e] = !1 : r(n.value.get(e)), t?.hooks?.onAfterExpand && t.hooks.onAfterExpand(e);
-  }, x = (e) => l.value[e] ?? !1, d = (e) => s.value[e] ?? !1, h = (e) => n.value.get(e);
+    t?.hooks?.onBeforeExpand && t.hooks.onBeforeExpand(e), f === !1 ? n.value[e] = !1 : r(s.value.get(e)), t?.hooks?.onAfterExpand && t.hooks.onAfterExpand(e);
+  }, x = (e) => n.value[e] ?? !1, d = (e) => a.value[e] ?? !1, h = (e) => s.value.get(e);
   return {
-    items: c(() => u(o)),
-    index: n,
-    selectedItems: s,
-    expandedItems: l,
-    setSelected: p,
-    setExpanded: v,
+    items: v(() => k(o)),
+    index: s,
+    selectedItems: a,
+    expandedItems: n,
+    selectedItem: u,
+    setSelected: m,
+    setExpanded: p,
     isExpanded: x,
     isSelected: d,
-    getEntryById: h
+    getEntryById: h,
+    reset: () => {
+      a.value = {}, n.value = {};
+    }
   };
 };
 export {
-  E as createSidebarState
+  g as createSidebarState
 };

package/dist/helpers/get-child-entry.d.ts

@@ -0,0 +1,14 @@
+import type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation';
+/**
+ * Recursively searches for and returns the first child node (including the given node itself)
+ * of a specific type within the provided node's subtree.
+ *
+ * @template Type - The type of node to search for.
+ * @param type - The node type to match.
+ * @param node - The root node to begin searching from.
+ * @returns The first child node of the specified type, or null if not found.
+ */
+export declare const getChildEntry: <Type extends TraversedEntry["type"]>(type: Type, node: TraversedEntry) => (TraversedEntry & {
+    type: Type;
+}) | null;
+//# sourceMappingURL=get-child-entry.d.ts.map

package/dist/helpers/get-child-entry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-child-entry.d.ts","sourceRoot":"","sources":["../../src/helpers/get-child-entry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4CAA4C,CAAA;AAEhF;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,GAAI,IAAI,SAAS,cAAc,CAAC,MAAM,CAAC,EAC/D,MAAM,IAAI,EACV,MAAM,cAAc,KACnB,CAAC,cAAc,GAAG;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,GAAG,IAgBtC,CAAA"}

package/dist/helpers/get-child-entry.js

@@ -0,0 +1,14 @@
+const l = (t, r) => {
+  if (r.type === t)
+    return r;
+  if ("children" in r)
+    for (const n of r.children ?? []) {
+      const i = l(t, n);
+      if (i)
+        return i;
+    }
+  return null;
+};
+export {
+  l as getChildEntry
+};