@scalar/sidebar 0.8.11 → 0.8.13

package/dist/components/SidebarItemDecorator.vue.js

@@ -0,0 +1,13 @@
+import _plugin_vue_export_helper_default from "../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock, openBlock, renderSlot } from "vue";
+//#region src/components/SidebarItemDecorator.vue
+var _sfc_main = {};
+var _hoisted_1 = { class: "bg-b-2 absolute top-[1lh] right-0.75 flex -translate-y-1/2 rounded border p-0.25 opacity-0 peer-hover/button:opacity-100 peer-focus-visible/button:opacity-100 focus-within:opacity-100 hover:opacity-100 has-[&[aria-expanded=true]]:opacity-100" };
+function _sfc_render(_ctx, _cache) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]);
+}
+var SidebarItemDecorator_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+export { SidebarItemDecorator_default as default };
+
+//# sourceMappingURL=SidebarItemDecorator.vue.js.map

package/dist/components/SidebarItemDecorator.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItemDecorator.vue.js","names":[],"sources":["../../src/components/SidebarItemDecorator.vue"],"sourcesContent":["<template>\n  <div\n    class=\"bg-b-2 absolute top-[1lh] right-0.75 flex -translate-y-1/2 rounded border p-0.25 opacity-0 peer-hover/button:opacity-100 peer-focus-visible/button:opacity-100 focus-within:opacity-100 hover:opacity-100 has-[&[aria-expanded=true]]:opacity-100\">\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;mBAEI,OAAM,qPAAmP;;qBAD3P,mBAGM,OAHN,YAGM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}

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

@@ -1,4 +1,4 @@
-import type { Item } from '@/types';
+import type { Item } from '../types';
 type __VLS_Props = {
     /**
      * The sidebar item to render.

package/dist/components/SidebarItemLabel.vue.js

@@ -0,0 +1,7 @@
+import SidebarItemLabel_vue_vue_type_script_setup_true_lang_default from "./SidebarItemLabel.vue.script.js";
+//#region src/components/SidebarItemLabel.vue
+var SidebarItemLabel_default = SidebarItemLabel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { SidebarItemLabel_default as default };
+
+//# sourceMappingURL=SidebarItemLabel.vue.js.map

package/dist/components/SidebarItemLabel.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItemLabel.vue.js","names":[],"sources":["../../src/components/SidebarItemLabel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarWrappingText } from '@scalar/components'\n\nimport type { Item } from '@/types'\n\nconst { item } = defineProps<{\n  /**\n   * The sidebar item to render.\n   */\n  item: Item\n  /**\n   * The source of the operation title.\n   */\n  operationTitleSource?: 'path' | 'summary'\n}>()\n</script>\n<template>\n  <template v-if=\"item.type === 'model'\">\n    <ScalarWrappingText\n      preset=\"property\"\n      :text=\"item.title\" />\n  </template>\n  <template v-else>\n    <ScalarWrappingText\n      :text=\"\n        operationTitleSource === 'path' && 'path' in item\n          ? (item.path as string)\n          : (item.title as string)\n      \" />\n  </template>\n</template>\n"],"mappings":""}

package/dist/components/SidebarItemLabel.vue.script.js

@@ -0,0 +1,26 @@
+import { createBlock, defineComponent, openBlock, unref } from "vue";
+import { ScalarWrappingText } from "@scalar/components";
+//#region src/components/SidebarItemLabel.vue?vue&type=script&setup=true&lang.ts
+var SidebarItemLabel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarItemLabel",
+	props: {
+		item: {},
+		operationTitleSource: {}
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return __props.item.type === "model" ? (openBlock(), createBlock(unref(ScalarWrappingText), {
+				key: 0,
+				preset: "property",
+				text: __props.item.title
+			}, null, 8, ["text"])) : (openBlock(), createBlock(unref(ScalarWrappingText), {
+				key: 1,
+				text: __props.operationTitleSource === "path" && "path" in __props.item ? __props.item.path : __props.item.title
+			}, null, 8, ["text"]));
+		};
+	}
+});
+//#endregion
+export { SidebarItemLabel_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=SidebarItemLabel.vue.script.js.map

package/dist/components/SidebarItemLabel.vue.script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItemLabel.vue.script.js","names":[],"sources":["../../src/components/SidebarItemLabel.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ScalarWrappingText } from '@scalar/components'\n\nimport type { Item } from '@/types'\n\nconst { item } = defineProps<{\n  /**\n   * The sidebar item to render.\n   */\n  item: Item\n  /**\n   * The source of the operation title.\n   */\n  operationTitleSource?: 'path' | 'summary'\n}>()\n</script>\n<template>\n  <template v-if=\"item.type === 'model'\">\n    <ScalarWrappingText\n      preset=\"property\"\n      :text=\"item.title\" />\n  </template>\n  <template v-else>\n    <ScalarWrappingText\n      :text=\"\n        operationTitleSource === 'path' && 'path' in item\n          ? (item.path as string)\n          : (item.title as string)\n      \" />\n  </template>\n</template>\n"],"mappings":";;;;;;;;;;;UAiBkB,QAAA,KAAK,SAAI,WAAA,WAAA,EACvB,YAEuB,MAAA,mBAAA,EAAA;;IADrB,QAAO;IACN,MAAM,QAAA,KAAK;0CAGd,YAKM,MAAA,mBAAA,EAAA;;IAJH,MAAe,QAAA,yBAAoB,UAAA,UAAyB,QAAA,OAAkB,QAAA,KAAK,OAA6B,QAAA,KAAK"}

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

@@ -0,0 +1,137 @@
+import { generateReverseIndex } from "./generate-reverse-index.js";
+import { computed, ref, toValue } from "vue";
+//#region src/helpers/create-sidebar-state.ts
+/**
+* Creates and manages the state for a sidebar tree, including selection and expansion of items.
+*
+* @template T - The type of sidebar items, which must include an `id` property.
+* @param items - The array of sidebar items.
+* @param options - Optional configuration for customizing behavior and hooks.
+* @returns An object containing sidebar state and methods to manipulate it.
+*
+* ## Example Usage
+*
+* ```ts
+* // Example sidebar items
+* const sidebarItems = [
+*   { id: 'root', label: 'Root', children: [
+*     { id: 'child1', label: 'Child 1' },
+*     { id: 'child2', label: 'Child 2', children: [
+*       { id: 'grandchild1', label: 'Grandchild 1' }
+*     ]}
+*   ]}
+* ]
+*
+* // Create sidebar state
+* const sidebarState = createSidebarState(sidebarItems, {
+*   key: 'children',
+*   hooks: {
+*     onBeforeSelect: (id) => console.log('Before select:', id),
+*     onAfterSelect: (id) => console.log('After select:', id),
+*     onBeforeExpand: (id) => console.log('Before expand:', id),
+*     onAfterExpand: (id) => console.log('After expand:', id),
+*   }
+* })
+*
+* // Select an item
+* await sidebarState.setSelected('grandchild1')
+* // Expand an item
+* await sidebarState.setExpanded('child2', true)
+* ```
+*/
+var createSidebarState = (items, options) => {
+	const index = computed(() => generateReverseIndex({
+		items: toValue(items),
+		nestedKey: options?.key ?? "children"
+	}));
+	const selectedItems = ref({});
+	const expandedItems = ref({});
+	const selectedItem = ref(null);
+	/**
+	* Selects the given item by id, and recursively marks all its parent items as selected.
+	* Triggers optional lifecycle hooks before and after selection.
+	*
+	* @param id - The ID of the item to select.
+	*
+	* ## Example
+	* ```ts
+	* await sidebarState.setSelected('grandchild1')
+	* // selectedItems.value will include 'grandchild1', 'child2', and 'root'
+	* ```
+	*/
+	const setSelected = (id) => {
+		/**
+		* Recursively mark all parent items as selected.
+		* @param node - The current node to mark as selected.
+		*/
+		const markSelected = (node) => {
+			if (!node) return;
+			selectedItems.value[node.id] = true;
+			if ("parent" in node && node.parent) markSelected(node.parent);
+		};
+		if (options?.hooks?.onBeforeSelect) options.hooks.onBeforeSelect(id);
+		selectedItems.value = {};
+		selectedItem.value = id;
+		if (id !== null) markSelected(index.value.get(id));
+		if (options?.hooks?.onAfterSelect) options.hooks.onAfterSelect(id);
+	};
+	/**
+	* Expands or collapses the given item by id.
+	* When expanding, recursively expands all parent items.
+	* Triggers optional lifecycle hooks before and after expansion.
+	*
+	* @param id - The ID of the item to expand or collapse.
+	* @param value - true to expand, false to collapse.
+	*
+	* ## Example
+	* ```ts
+	* await sidebarState.setExpanded('child2', true)
+	* // expandedItems.value will include 'child2' and 'root'
+	*
+	* await sidebarState.setExpanded('child2', false)
+	* // expandedItems.value['child2'] will be false
+	* ```
+	*/
+	const setExpanded = (id, value) => {
+		/**
+		* Recursively expand all parent items of the given node.
+		* @param node - The current node to expand.
+		*/
+		const openParents = (node) => {
+			if (!node) return;
+			expandedItems.value[node.id] = true;
+			if ("parent" in node && node.parent) openParents(node.parent);
+		};
+		if (options?.hooks?.onBeforeExpand) options.hooks.onBeforeExpand(id);
+		if (value === false) expandedItems.value[id] = false;
+		else openParents(index.value.get(id));
+		if (options?.hooks?.onAfterExpand) options.hooks.onAfterExpand(id);
+	};
+	const isExpanded = (id) => {
+		return expandedItems.value[id] ?? false;
+	};
+	const isSelected = (id) => {
+		return selectedItems.value[id] ?? false;
+	};
+	const getEntryById = (id) => index.value.get(id);
+	return {
+		items: computed(() => toValue(items)),
+		index,
+		selectedItems,
+		expandedItems,
+		selectedItem,
+		setSelected,
+		setExpanded,
+		isExpanded,
+		isSelected,
+		getEntryById,
+		reset: () => {
+			selectedItems.value = {};
+			expandedItems.value = {};
+		}
+	};
+};
+//#endregion
+export { createSidebarState };
+
+//# sourceMappingURL=create-sidebar-state.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"create-sidebar-state.js","names":[],"sources":["../../src/helpers/create-sidebar-state.ts"],"sourcesContent":["import { type MaybeRefOrGetter, computed, ref, toValue } from 'vue'\n\nimport { generateReverseIndex } from './generate-reverse-index'\n\ntype SidebarStateOptions = Partial<{\n  /** The key used to access child items in the sidebar tree. Defaults to \"children\". */\n  key: string\n  /** Optional event hooks for sidebar item lifecycle */\n  hooks: Partial<{\n    /**\n     * Called before an item is expanded.\n     * @param id - The ID of the item to expand.\n     */\n    onBeforeExpand: (id: string) => void\n    /**\n     * Called after an item is expanded.\n     * @param id - The ID of the item that was expanded.\n     */\n    onAfterExpand: (id: string) => void\n    /**\n     * Called just before a sidebar item selection changes.\n     * @param id - The ID of the item that is about to be selected, or null if deselecting.\n     */\n    onBeforeSelect: (id: string | null) => void\n    /**\n     * Called immediately after a sidebar item has been selected.\n     * @param id - The ID of the item that was selected, or null if selection was cleared.\n     */\n    onAfterSelect: (id: string | null) => void\n  }>\n}>\n\n/**\n * Creates and manages the state for a sidebar tree, including selection and expansion of items.\n *\n * @template T - The type of sidebar items, which must include an `id` property.\n * @param items - The array of sidebar items.\n * @param options - Optional configuration for customizing behavior and hooks.\n * @returns An object containing sidebar state and methods to manipulate it.\n *\n * ## Example Usage\n *\n * ```ts\n * // Example sidebar items\n * const sidebarItems = [\n *   { id: 'root', label: 'Root', children: [\n *     { id: 'child1', label: 'Child 1' },\n *     { id: 'child2', label: 'Child 2', children: [\n *       { id: 'grandchild1', label: 'Grandchild 1' }\n *     ]}\n *   ]}\n * ]\n *\n * // Create sidebar state\n * const sidebarState = createSidebarState(sidebarItems, {\n *   key: 'children',\n *   hooks: {\n *     onBeforeSelect: (id) => console.log('Before select:', id),\n *     onAfterSelect: (id) => console.log('After select:', id),\n *     onBeforeExpand: (id) => console.log('Before expand:', id),\n *     onAfterExpand: (id) => console.log('After expand:', id),\n *   }\n * })\n *\n * // Select an item\n * await sidebarState.setSelected('grandchild1')\n * // Expand an item\n * await sidebarState.setExpanded('child2', true)\n * ```\n */\nexport const createSidebarState = <T extends { id: string }>(\n  items: MaybeRefOrGetter<T[]>,\n  options?: SidebarStateOptions,\n) => {\n  // Reverse index for quick lookup of items and their parents\n  const index = computed(() =>\n    generateReverseIndex({\n      items: toValue(items),\n      nestedKey: options?.key ?? 'children',\n    }),\n  )\n  // Reactive record of selected item ids\n  const selectedItems = ref<Record<string, boolean>>({})\n  // Reactive record of expanded item ids\n  const expandedItems = ref<Record<string, boolean>>({})\n\n  // Lowest level selected item\n  const selectedItem = ref<string | null>(null)\n\n  /**\n   * Selects the given item by id, and recursively marks all its parent items as selected.\n   * Triggers optional lifecycle hooks before and after selection.\n   *\n   * @param id - The ID of the item to select.\n   *\n   * ## Example\n   * ```ts\n   * await sidebarState.setSelected('grandchild1')\n   * // selectedItems.value will include 'grandchild1', 'child2', and 'root'\n   * ```\n   */\n  const setSelected = (id: string | null) => {\n    /**\n     * Recursively mark all parent items as selected.\n     * @param node - The current node to mark as selected.\n     */\n    const markSelected = (node: (T & { parent?: T }) | undefined) => {\n      if (!node) {\n        return\n      }\n      selectedItems.value[node.id] = true\n      if ('parent' in node && node.parent) {\n        markSelected(node.parent)\n      }\n    }\n\n    // Call onBeforeSelect hook if provided\n    if (options?.hooks?.onBeforeSelect) {\n      options.hooks.onBeforeSelect(id)\n    }\n\n    // Clear previous selection\n    selectedItems.value = {}\n    selectedItem.value = id\n\n    // If id is null, do not select anything\n    // We already cleared the selection above\n    if (id !== null) {\n      // Mark the selected item and all its parents as selected\n      markSelected(index.value.get(id))\n    }\n\n    // Call onAfterSelect hook if provided\n    if (options?.hooks?.onAfterSelect) {\n      options.hooks.onAfterSelect(id)\n    }\n  }\n\n  /**\n   * Expands or collapses the given item by id.\n   * When expanding, recursively expands all parent items.\n   * Triggers optional lifecycle hooks before and after expansion.\n   *\n   * @param id - The ID of the item to expand or collapse.\n   * @param value - true to expand, false to collapse.\n   *\n   * ## Example\n   * ```ts\n   * await sidebarState.setExpanded('child2', true)\n   * // expandedItems.value will include 'child2' and 'root'\n   *\n   * await sidebarState.setExpanded('child2', false)\n   * // expandedItems.value['child2'] will be false\n   * ```\n   */\n  const setExpanded = (id: string, value: boolean) => {\n    /**\n     * Recursively expand all parent items of the given node.\n     * @param node - The current node to expand.\n     */\n    const openParents = (node: (T & { parent?: T }) | undefined) => {\n      if (!node) {\n        return\n      }\n      expandedItems.value[node.id] = true\n      if ('parent' in node && node.parent) {\n        openParents(node.parent)\n      }\n    }\n\n    // Call onBeforeExpand hook if provided\n    if (options?.hooks?.onBeforeExpand) {\n      options.hooks.onBeforeExpand(id)\n    }\n\n    // When collapsing, only collapse the specified item, not its parents\n    if (value === false) {\n      expandedItems.value[id] = false\n    } else {\n      // When expanding, ensure all parents are expanded as well\n      openParents(index.value.get(id))\n    }\n\n    // Call onAfterExpand hook if provided\n    if (options?.hooks?.onAfterExpand) {\n      options.hooks.onAfterExpand(id)\n    }\n  }\n\n  const isExpanded = (id: string) => {\n    return expandedItems.value[id] ?? false\n  }\n\n  const isSelected = (id: string) => {\n    return selectedItems.value[id] ?? false\n  }\n\n  const getEntryById = (id: string) => index.value.get(id)\n\n  return {\n    items: computed(() => toValue(items)),\n    index,\n    selectedItems,\n    expandedItems,\n    selectedItem,\n    setSelected,\n    setExpanded,\n    isExpanded,\n    isSelected,\n    getEntryById,\n    reset: () => {\n      selectedItems.value = {}\n      expandedItems.value = {}\n    },\n  }\n}\n\nexport type SidebarState<Item extends { id: string }> = ReturnType<typeof createSidebarState<Item>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,IAAa,sBACX,OACA,YACG;CAEH,MAAM,QAAQ,eACZ,qBAAqB;EACnB,OAAO,QAAQ,MAAM;EACrB,WAAW,SAAS,OAAO;EAC5B,CAAC,CACH;CAED,MAAM,gBAAgB,IAA6B,EAAE,CAAC;CAEtD,MAAM,gBAAgB,IAA6B,EAAE,CAAC;CAGtD,MAAM,eAAe,IAAmB,KAAK;;;;;;;;;;;;;CAc7C,MAAM,eAAe,OAAsB;;;;;EAKzC,MAAM,gBAAgB,SAA2C;AAC/D,OAAI,CAAC,KACH;AAEF,iBAAc,MAAM,KAAK,MAAM;AAC/B,OAAI,YAAY,QAAQ,KAAK,OAC3B,cAAa,KAAK,OAAO;;AAK7B,MAAI,SAAS,OAAO,eAClB,SAAQ,MAAM,eAAe,GAAG;AAIlC,gBAAc,QAAQ,EAAE;AACxB,eAAa,QAAQ;AAIrB,MAAI,OAAO,KAET,cAAa,MAAM,MAAM,IAAI,GAAG,CAAC;AAInC,MAAI,SAAS,OAAO,cAClB,SAAQ,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;CAqBnC,MAAM,eAAe,IAAY,UAAmB;;;;;EAKlD,MAAM,eAAe,SAA2C;AAC9D,OAAI,CAAC,KACH;AAEF,iBAAc,MAAM,KAAK,MAAM;AAC/B,OAAI,YAAY,QAAQ,KAAK,OAC3B,aAAY,KAAK,OAAO;;AAK5B,MAAI,SAAS,OAAO,eAClB,SAAQ,MAAM,eAAe,GAAG;AAIlC,MAAI,UAAU,MACZ,eAAc,MAAM,MAAM;MAG1B,aAAY,MAAM,MAAM,IAAI,GAAG,CAAC;AAIlC,MAAI,SAAS,OAAO,cAClB,SAAQ,MAAM,cAAc,GAAG;;CAInC,MAAM,cAAc,OAAe;AACjC,SAAO,cAAc,MAAM,OAAO;;CAGpC,MAAM,cAAc,OAAe;AACjC,SAAO,cAAc,MAAM,OAAO;;CAGpC,MAAM,gBAAgB,OAAe,MAAM,MAAM,IAAI,GAAG;AAExD,QAAO;EACL,OAAO,eAAe,QAAQ,MAAM,CAAC;EACrC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa;AACX,iBAAc,QAAQ,EAAE;AACxB,iBAAc,QAAQ,EAAE;;EAE3B"}

package/dist/helpers/filter-items.d.ts

@@ -1,3 +1,3 @@
-import type { Item, Layout } from '@/types';
+import type { Item, Layout } from '../types';
 export declare const filterItems: (layout: Layout, items: Item[]) => import("@scalar/workspace-store/schemas/navigation").TraversedEntry[];
 //# sourceMappingURL=filter-items.d.ts.map

package/dist/helpers/filter-items.js

@@ -0,0 +1,16 @@
+//#region src/helpers/filter-items.ts
+/** The type of items we want to  */
+var API_CLIENT_TYPES_SET = new Set([
+	"document",
+	"operation",
+	"example",
+	"tag"
+]);
+var filterItems = (layout, items) => {
+	if (layout === "reference") return items;
+	return items.filter((c) => API_CLIENT_TYPES_SET.has(c.type));
+};
+//#endregion
+export { filterItems };
+
+//# sourceMappingURL=filter-items.js.map

package/dist/helpers/filter-items.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-items.js","names":[],"sources":["../../src/helpers/filter-items.ts"],"sourcesContent":["import type { Item, Layout } from '@/types'\n\n/** The type of items we want to  */\nconst API_CLIENT_TYPES_SET = new Set(['document', 'operation', 'example', 'tag'])\n\nexport const filterItems = (layout: Layout, items: Item[]) => {\n  if (layout === 'reference') {\n    return items\n  }\n\n  // For client layout, filter to only show documents, operations, examples, and tags\n  return items.filter((c) => API_CLIENT_TYPES_SET.has(c.type))\n}\n"],"mappings":";;AAGA,IAAM,uBAAuB,IAAI,IAAI;CAAC;CAAY;CAAa;CAAW;CAAM,CAAC;AAEjF,IAAa,eAAe,QAAgB,UAAkB;AAC5D,KAAI,WAAW,YACb,QAAO;AAIT,QAAO,MAAM,QAAQ,MAAM,qBAAqB,IAAI,EAAE,KAAK,CAAC"}

package/dist/helpers/generate-reverse-index.js

@@ -0,0 +1,42 @@
+//#region src/helpers/generate-reverse-index.ts
+/**
+* Builds a reverse index for fast ID-based lookup and attaches a `parent` property to each node for upward traversal.
+*
+* @template T - The node type (must include `id`).
+* @template Key - The key pointing to nested children arrays (defaults to 'children').
+*
+* @param items - The root-level array of entities to index.
+* @param nestedKey - The property name that contains child nodes within an entity (defaults to 'children').
+* @param filter - Optional. A predicate to determine which nodes are included in the map (default: includes all).
+* @param getId - Optional. A function to obtain the unique ID from a node (defaults to `node.id`).
+* @returns A Map where each key is a node's ID and each value is the node, extended with an optional `parent` property.
+*
+* @example
+* const data = [
+*   { id: '1', name: 'Root', children: [
+*     { id: '2', name: 'Child 1' },
+*     { id: '3', name: 'Child 2', children: [
+*       { id: '4', name: 'Grandchild' }
+*     ]}
+*   ]}
+* ];
+* const index = generateReverseIndex({ items: data });
+* // index.get('3') => { id: '3', name: 'Child 2', children: [...], parent: { id: '1', ... } }
+* // index.get('4') => { id: '4', name: 'Grandchild', parent: { id: '3', ... } }
+*/
+var generateReverseIndex = ({ items, nestedKey = "children", filter = () => true, getId = (node) => node.id }) => {
+	const mapping = /* @__PURE__ */ new Map();
+	const dfs = (node) => {
+		if (filter(node)) mapping.set(getId(node), node);
+		if (nestedKey in node && Array.isArray(node[nestedKey])) node[nestedKey]?.forEach((it) => dfs({
+			...it,
+			parent: node
+		}));
+	};
+	items.forEach(dfs);
+	return mapping;
+};
+//#endregion
+export { generateReverseIndex };
+
+//# sourceMappingURL=generate-reverse-index.js.map

package/dist/helpers/generate-reverse-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate-reverse-index.js","names":[],"sources":["../../src/helpers/generate-reverse-index.ts"],"sourcesContent":["/**\n * Builds a reverse index for fast ID-based lookup and attaches a `parent` property to each node for upward traversal.\n *\n * @template T - The node type (must include `id`).\n * @template Key - The key pointing to nested children arrays (defaults to 'children').\n *\n * @param items - The root-level array of entities to index.\n * @param nestedKey - The property name that contains child nodes within an entity (defaults to 'children').\n * @param filter - Optional. A predicate to determine which nodes are included in the map (default: includes all).\n * @param getId - Optional. A function to obtain the unique ID from a node (defaults to `node.id`).\n * @returns A Map where each key is a node's ID and each value is the node, extended with an optional `parent` property.\n *\n * @example\n * const data = [\n *   { id: '1', name: 'Root', children: [\n *     { id: '2', name: 'Child 1' },\n *     { id: '3', name: 'Child 2', children: [\n *       { id: '4', name: 'Grandchild' }\n *     ]}\n *   ]}\n * ];\n * const index = generateReverseIndex({ items: data });\n * // index.get('3') => { id: '3', name: 'Child 2', children: [...], parent: { id: '1', ... } }\n * // index.get('4') => { id: '4', name: 'Grandchild', parent: { id: '3', ... } }\n */\nexport const generateReverseIndex = <T extends { id: string } & Record<string, unknown>, Key extends string>({\n  items,\n  nestedKey = 'children' as Key,\n  filter = () => true,\n  getId = (node: T) => node.id,\n}: {\n  items: T[]\n  nestedKey?: Key\n  filter?: (node: T) => boolean\n  getId?: (node: T) => string\n}) => {\n  // Create a mapping from id to node (with parent reference)\n  const mapping = new Map<string, T & { parent?: T }>()\n\n  const dfs = (node: T & { parent?: T }) => {\n    if (filter(node)) {\n      mapping.set(getId(node), node)\n    }\n\n    if (nestedKey in node && Array.isArray(node[nestedKey])) {\n      // Recursively traverse children and add the current node as their parent\n      node[nestedKey]?.forEach((it) => dfs({ ...it, parent: node }))\n    }\n  }\n\n  items.forEach(dfs)\n\n  return mapping\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,wBAAgG,EAC3G,OACA,YAAY,YACZ,eAAe,MACf,SAAS,SAAY,KAAK,SAMtB;CAEJ,MAAM,0BAAU,IAAI,KAAiC;CAErD,MAAM,OAAO,SAA6B;AACxC,MAAI,OAAO,KAAK,CACd,SAAQ,IAAI,MAAM,KAAK,EAAE,KAAK;AAGhC,MAAI,aAAa,QAAQ,MAAM,QAAQ,KAAK,WAAW,CAErD,MAAK,YAAY,SAAS,OAAO,IAAI;GAAE,GAAG;GAAI,QAAQ;GAAM,CAAC,CAAC;;AAIlE,OAAM,QAAQ,IAAI;AAElB,QAAO"}

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

@@ -0,0 +1,22 @@
+//#region src/helpers/get-child-entry.ts
+/**
+* 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.
+*/
+var getChildEntry = (type, node) => {
+	if (node.type === type) return node;
+	if ("children" in node) for (const child of node.children ?? []) {
+		const result = getChildEntry(type, child);
+		if (result) return result;
+	}
+	return null;
+};
+//#endregion
+export { getChildEntry };
+
+//# sourceMappingURL=get-child-entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-child-entry.js","names":[],"sources":["../../src/helpers/get-child-entry.ts"],"sourcesContent":["import type { TraversedEntry } from '@scalar/workspace-store/schemas/navigation'\n\n/**\n * Recursively searches for and returns the first child node (including the given node itself)\n * of a specific type within the provided node's subtree.\n *\n * @template Type - The type of node to search for.\n * @param type - The node type to match.\n * @param node - The root node to begin searching from.\n * @returns The first child node of the specified type, or null if not found.\n */\nexport const getChildEntry = <Type extends TraversedEntry['type']>(\n  type: Type,\n  node: TraversedEntry,\n): (TraversedEntry & { type: Type }) | null => {\n  if (node.type === type) {\n    return node as TraversedEntry & { type: Type }\n  }\n\n  if ('children' in node) {\n    for (const child of node.children ?? []) {\n      const result = getChildEntry(type, child)\n\n      if (result) {\n        return result\n      }\n    }\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAa,iBACX,MACA,SAC6C;AAC7C,KAAI,KAAK,SAAS,KAChB,QAAO;AAGT,KAAI,cAAc,KAChB,MAAK,MAAM,SAAS,KAAK,YAAY,EAAE,EAAE;EACvC,MAAM,SAAS,cAAc,MAAM,MAAM;AAEzC,MAAI,OACF,QAAO;;AAKb,QAAO"}

package/dist/helpers/has-children.d.ts

@@ -1,4 +1,4 @@
-import type { Item } from '@/types';
+import type { Item } from '../types';
 /**
  * Type guard to check if the given Item has a non-empty array of children.
  * Returns true if `currentItem` has a `children` property that is an array with at least one element.

package/dist/helpers/has-children.js

@@ -0,0 +1,12 @@
+//#region src/helpers/has-children.ts
+/**
+* Type guard to check if the given Item has a non-empty array of children.
+* Returns true if `currentItem` has a `children` property that is an array with at least one element.
+*/
+var hasChildren = (currentItem) => {
+	return "children" in currentItem && Array.isArray(currentItem.children) && currentItem.children.length > 0;
+};
+//#endregion
+export { hasChildren };
+
+//# sourceMappingURL=has-children.js.map

package/dist/helpers/has-children.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-children.js","names":[],"sources":["../../src/helpers/has-children.ts"],"sourcesContent":["import type { Item } from '@/types'\n\n/**\n * Type guard to check if the given Item has a non-empty array of children.\n * Returns true if `currentItem` has a `children` property that is an array with at least one element.\n */\nexport const hasChildren = (currentItem: Item): currentItem is Item & { children: Item[] } => {\n  return 'children' in currentItem && Array.isArray(currentItem.children) && currentItem.children.length > 0\n}\n"],"mappings":";;;;;AAMA,IAAa,eAAe,gBAAkE;AAC5F,QAAO,cAAc,eAAe,MAAM,QAAQ,YAAY,SAAS,IAAI,YAAY,SAAS,SAAS"}

package/dist/helpers/is-sidebar-folder.d.ts

@@ -1,4 +1,4 @@
-import type { Item, Layout } from '@/types';
+import type { Item, Layout } from '../types';
 /**
  * Determines if a sidebar item should be treated as a "folder",
  * i.e. a collapsible group, depending on the layout, its type,

package/dist/helpers/is-sidebar-folder.js

@@ -0,0 +1,25 @@
+import { hasChildren } from "./has-children.js";
+//#region src/helpers/is-sidebar-folder.ts
+/**
+* Determines if a sidebar item should be treated as a "folder",
+* i.e. a collapsible group, depending on the layout, its type,
+* whether it has children, and special slot rules.
+*
+* @param layout - The sidebar layout ('client' or 'reference')
+* @param item - The sidebar item to check
+* @param hasEmptySlot - True if there is an empty slot to display as a group (client layout only)
+* @returns True if the item should be rendered as a folder/group node
+*/
+var isSidebarFolder = (layout, item, hasEmptySlot) => {
+	if (!hasChildren(item)) {
+		if (layout === "client" && hasEmptySlot) return item.type === "document" || item.type === "tag";
+		return false;
+	}
+	if (layout === "client") return true;
+	if (layout === "reference") return item.type !== "operation" && item.type !== "webhook";
+	return false;
+};
+//#endregion
+export { isSidebarFolder };
+
+//# sourceMappingURL=is-sidebar-folder.js.map

package/dist/helpers/is-sidebar-folder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-sidebar-folder.js","names":[],"sources":["../../src/helpers/is-sidebar-folder.ts"],"sourcesContent":["import { hasChildren } from '@/helpers/has-children'\nimport type { Item, Layout } from '@/types'\n\n/**\n * Determines if a sidebar item should be treated as a \"folder\",\n * i.e. a collapsible group, depending on the layout, its type,\n * whether it has children, and special slot rules.\n *\n * @param layout - The sidebar layout ('client' or 'reference')\n * @param item - The sidebar item to check\n * @param hasEmptySlot - True if there is an empty slot to display as a group (client layout only)\n * @returns True if the item should be rendered as a folder/group node\n */\nexport const isSidebarFolder = (\n  layout: Layout,\n  item: Item,\n  hasEmptySlot: boolean,\n): item is Item & { children?: Item[] } => {\n  // If the item has no children, check if there is an empty slot.\n  if (!hasChildren(item)) {\n    // In 'client' layout, allow \"document\" or \"tag\" items to act as group if there's an empty slot\n    if (layout === 'client' && hasEmptySlot) {\n      return item.type === 'document' || item.type === 'tag'\n    }\n    // Otherwise, not a folder if it has no children\n    return false\n  }\n\n  // 'client' layout: any item with children is a folder\n  if (layout === 'client') {\n    return true\n  }\n\n  // 'reference' layout: only non-'operation' and non-'webhook' are groups/folders\n  if (layout === 'reference') {\n    return item.type !== 'operation' && item.type !== 'webhook'\n  }\n\n  // Fallback: not a folder in other cases/layouts\n  return false\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,mBACX,QACA,MACA,iBACyC;AAEzC,KAAI,CAAC,YAAY,KAAK,EAAE;AAEtB,MAAI,WAAW,YAAY,aACzB,QAAO,KAAK,SAAS,cAAc,KAAK,SAAS;AAGnD,SAAO;;AAIT,KAAI,WAAW,SACb,QAAO;AAIT,KAAI,WAAW,YACb,QAAO,KAAK,SAAS,eAAe,KAAK,SAAS;AAIpD,QAAO"}

package/dist/helpers/scroll-sidebar-to-top.js

@@ -0,0 +1,51 @@
+//#region src/helpers/scroll-sidebar-to-top.ts
+var DEFAULT_SCROLL_OFFSET_TOP = 100;
+/**
+* Returns the element that should be used for vertical position measurement.
+*/
+var getMeasurableElement = (element) => {
+	if (window.getComputedStyle(element).display !== "contents") return element;
+	/**
+	* `display: contents` does not render a layout box, so use the first child with
+	* a measurable offset to keep the scroll target aligned with what users see.
+	*/
+	for (const child of element.children) if (child instanceof HTMLElement && child.offsetParent !== null) return child;
+	return element;
+};
+/**
+* Adds extra offset for heading rows so the selected item stays visible below labels.
+*/
+var getHeadingOffset = (element) => {
+	if (element.dataset.sidebarType !== "heading") return 0;
+	return element.querySelector(".sidebar-heading")?.offsetHeight ?? 0;
+};
+/**
+* Computes an element top position relative to the provided scroll container.
+*/
+var getTopRelativeToScroller = (element, scroller) => {
+	let top = element.offsetTop;
+	let currentOffsetParent = element.offsetParent;
+	while (currentOffsetParent && currentOffsetParent !== scroller) {
+		top += currentOffsetParent.offsetTop;
+		currentOffsetParent = currentOffsetParent.offsetParent;
+	}
+	return top;
+};
+/**
+* Scrolls the sidebar container so the requested item appears near the top.
+*/
+var scrollSidebarToTop = (id, offsetTop = DEFAULT_SCROLL_OFFSET_TOP) => {
+	if (typeof window === "undefined") return;
+	const element = document.querySelector(`[data-sidebar-id="${id}"]`);
+	const scroller = element?.closest(".custom-scroll, .custom-scrollbar") ?? null;
+	if (!element || !scroller) return;
+	const targetTop = getTopRelativeToScroller(getMeasurableElement(element), scroller) + getHeadingOffset(element) - offsetTop;
+	scroller.scrollTo({
+		top: targetTop > 0 ? targetTop : 0,
+		behavior: "smooth"
+	});
+};
+//#endregion
+export { scrollSidebarToTop };
+
+//# sourceMappingURL=scroll-sidebar-to-top.js.map

package/dist/helpers/scroll-sidebar-to-top.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-sidebar-to-top.js","names":[],"sources":["../../src/helpers/scroll-sidebar-to-top.ts"],"sourcesContent":["const DEFAULT_SCROLL_OFFSET_TOP = 100\n\n/**\n * Returns the element that should be used for vertical position measurement.\n */\nconst getMeasurableElement = (element: HTMLElement): HTMLElement => {\n  if (window.getComputedStyle(element).display !== 'contents') {\n    return element\n  }\n\n  /**\n   * `display: contents` does not render a layout box, so use the first child with\n   * a measurable offset to keep the scroll target aligned with what users see.\n   */\n  for (const child of element.children) {\n    if (child instanceof HTMLElement && child.offsetParent !== null) {\n      return child\n    }\n  }\n\n  return element\n}\n\n/**\n * Adds extra offset for heading rows so the selected item stays visible below labels.\n */\nconst getHeadingOffset = (element: HTMLElement): number => {\n  if (element.dataset.sidebarType !== 'heading') {\n    return 0\n  }\n\n  return element.querySelector<HTMLElement>('.sidebar-heading')?.offsetHeight ?? 0\n}\n\n/**\n * Computes an element top position relative to the provided scroll container.\n */\nconst getTopRelativeToScroller = (element: HTMLElement, scroller: HTMLElement): number => {\n  let top = element.offsetTop\n  let currentOffsetParent = element.offsetParent as HTMLElement | null\n\n  while (currentOffsetParent && currentOffsetParent !== scroller) {\n    top += currentOffsetParent.offsetTop\n    currentOffsetParent = currentOffsetParent.offsetParent as HTMLElement | null\n  }\n\n  return top\n}\n\n/**\n * Scrolls the sidebar container so the requested item appears near the top.\n */\nexport const scrollSidebarToTop = (id: string, offsetTop: number = DEFAULT_SCROLL_OFFSET_TOP): void => {\n  if (typeof window === 'undefined') {\n    return\n  }\n\n  const element = document.querySelector<HTMLElement>(`[data-sidebar-id=\"${id}\"]`)\n  const scroller = element?.closest<HTMLElement>('.custom-scroll, .custom-scrollbar') ?? null\n  if (!element || !scroller) {\n    return\n  }\n\n  const measurableElement = getMeasurableElement(element)\n  const itemTop = getTopRelativeToScroller(measurableElement, scroller)\n  const itemOffset = getHeadingOffset(element)\n  const targetTop = itemTop + itemOffset - offsetTop\n\n  scroller.scrollTo({\n    top: targetTop > 0 ? targetTop : 0,\n    behavior: 'smooth',\n  })\n}\n"],"mappings":";AAAA,IAAM,4BAA4B;;;;AAKlC,IAAM,wBAAwB,YAAsC;AAClE,KAAI,OAAO,iBAAiB,QAAQ,CAAC,YAAY,WAC/C,QAAO;;;;;AAOT,MAAK,MAAM,SAAS,QAAQ,SAC1B,KAAI,iBAAiB,eAAe,MAAM,iBAAiB,KACzD,QAAO;AAIX,QAAO;;;;;AAMT,IAAM,oBAAoB,YAAiC;AACzD,KAAI,QAAQ,QAAQ,gBAAgB,UAClC,QAAO;AAGT,QAAO,QAAQ,cAA2B,mBAAmB,EAAE,gBAAgB;;;;;AAMjF,IAAM,4BAA4B,SAAsB,aAAkC;CACxF,IAAI,MAAM,QAAQ;CAClB,IAAI,sBAAsB,QAAQ;AAElC,QAAO,uBAAuB,wBAAwB,UAAU;AAC9D,SAAO,oBAAoB;AAC3B,wBAAsB,oBAAoB;;AAG5C,QAAO;;;;;AAMT,IAAa,sBAAsB,IAAY,YAAoB,8BAAoC;AACrG,KAAI,OAAO,WAAW,YACpB;CAGF,MAAM,UAAU,SAAS,cAA2B,qBAAqB,GAAG,IAAI;CAChF,MAAM,WAAW,SAAS,QAAqB,oCAAoC,IAAI;AACvF,KAAI,CAAC,WAAW,CAAC,SACf;CAMF,MAAM,YAFU,yBADU,qBAAqB,QAAQ,EACK,SAAS,GAClD,iBAAiB,QAAQ,GACH;AAEzC,UAAS,SAAS;EAChB,KAAK,YAAY,IAAI,YAAY;EACjC,UAAU;EACX,CAAC"}

package/dist/hooks/use-draggable.js

@@ -0,0 +1,112 @@
+import { computed, ref, toValue } from "vue";
+import { cva } from "@scalar/use-hooks/useBindCx";
+//#region src/hooks/use-draggable.ts
+/**
+* Simple throttle function to avoid package dependencies
+*/
+var throttle = (callback, limit) => {
+	let wait = false;
+	return (...args) => {
+		if (wait) return;
+		callback(...args);
+		wait = true;
+		setTimeout(() => wait = false, limit);
+	};
+};
+/** Draggable class variants to apply to the draggable element */
+var draggableVariants = cva({
+	base: "relative after:absolute after:inset-x-0 after:block after:bg-blue after:opacity-15 after:pointer-events-none after:rounded",
+	variants: { position: {
+		before: "after:-top-0.5 after:h-0.75",
+		after: "after:-bottom-0.5 after:h-0.75",
+		into: "after:inset-0"
+	} }
+});
+/**
+* Shared state for drag and drop operations
+* These are module-level refs so all draggable instances share the same state
+*/
+var draggingItem = ref(null);
+var hoveredItem = ref(null);
+/**
+* Composable for handling drag and drop functionality
+*/
+function useDraggable(options) {
+	const { ceiling = .8, floor = .2, isDraggable = true, isDroppable = true, parentIds = [], id, onDragStart, onDragEnd } = options;
+	const parentId = computed(() => parentIds.at(-1) ?? null);
+	/** Check if isDroppable guard */
+	const _isDroppable = (offset) => typeof isDroppable === "function" ? isDroppable(draggingItem.value, {
+		id,
+		parentId: parentId.value,
+		offset
+	}) : toValue(isDroppable);
+	const handleDragStart = (ev) => {
+		if (!toValue(isDraggable) || !ev.dataTransfer || !(ev.target instanceof HTMLElement)) return;
+		ev.target.setAttribute("data-dragging", "true");
+		ev.dataTransfer.dropEffect = "move";
+		ev.dataTransfer.effectAllowed = "move";
+		const item = {
+			id,
+			parentId: parentId.value
+		};
+		draggingItem.value = item;
+		onDragStart?.(item);
+	};
+	const handleDragOver = throttle((ev) => {
+		if (!draggingItem.value || draggingItem.value.id === id || parentIds.includes(draggingItem.value?.id ?? "")) return;
+		const previousOffset = hoveredItem.value?.offset;
+		const height = ev.target.offsetHeight;
+		const _floor = floor * height;
+		const _ceiling = ceiling * height;
+		let offset = null;
+		if (ev.offsetY <= 0 && previousOffset && previousOffset !== "after") offset = previousOffset;
+		else if (ev.offsetY <= _floor) offset = "before";
+		else if (ev.offsetY >= _ceiling) offset = "after";
+		else if (ev.offsetY > _floor && ev.offsetY < _ceiling) offset = "into";
+		if (!_isDroppable(offset)) return;
+		hoveredItem.value = {
+			id,
+			parentId: parentId.value,
+			offset
+		};
+	}, 25);
+	const handleDragEnd = () => {
+		if (!hoveredItem.value || !draggingItem.value) return;
+		const _draggingItem = { ...draggingItem.value };
+		const _hoveredItem = { ...hoveredItem.value };
+		draggingItem.value = null;
+		hoveredItem.value = null;
+		document.querySelectorAll("[data-dragging]").forEach((el) => el.removeAttribute("data-dragging"));
+		if (_draggingItem.id === _hoveredItem.id) return;
+		onDragEnd?.(_draggingItem, _hoveredItem);
+	};
+	const draggableClass = computed(() => {
+		const position = id === hoveredItem.value?.id ? hoveredItem.value.offset : void 0;
+		if (!position) return "";
+		return draggableVariants({ position });
+	});
+	return {
+		draggableAttrs: computed(() => ({
+			class: draggableClass.value || void 0,
+			draggable: toValue(isDraggable) ? true : void 0
+		})),
+		draggableEvents: {
+			dragend: handleDragEnd,
+			dragover: (ev) => {
+				ev.preventDefault();
+				ev.stopPropagation();
+				handleDragOver(ev);
+			},
+			dragstart: (ev) => {
+				ev.stopPropagation();
+				handleDragStart(ev);
+			}
+		},
+		draggingItem,
+		hoveredItem
+	};
+}
+//#endregion
+export { useDraggable };
+
+//# sourceMappingURL=use-draggable.js.map

package/dist/hooks/use-draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-draggable.js","names":[],"sources":["../../src/hooks/use-draggable.ts"],"sourcesContent":["import { cva } from '@scalar/use-hooks/useBindCx'\nimport { type MaybeRef, type Ref, computed, ref, toValue } from 'vue'\n\n/**\n * Drag offsets\n */\nexport type DragOffset =\n  | 'before' // Insert before the hovered item\n  | 'after' // Insert after the hovered item\n  | 'into' // Drop into the hovered item\n  | null\n\n/**\n * Item you are currently dragging over\n */\nexport type HoveredItem = {\n  id: string\n  parentId: string | null\n  offset: DragOffset\n}\n\n/**\n * Item you are currently dragging\n */\nexport type DraggingItem = Omit<HoveredItem, 'offset'>\n\n/**\n * Simple throttle function to avoid package dependencies\n */\nconst throttle = <TArgs extends Array<unknown>>(\n  callback: (...args: TArgs) => void,\n  limit: number,\n): ((...args: TArgs) => void) => {\n  let wait = false\n\n  return (...args: TArgs) => {\n    if (wait) {\n      return\n    }\n\n    callback(...args)\n    wait = true\n    setTimeout(() => (wait = false), limit)\n  }\n}\n\n/** Draggable class variants to apply to the draggable element */\nconst draggableVariants = cva({\n  base: 'relative after:absolute after:inset-x-0 after:block after:bg-blue after:opacity-15 after:pointer-events-none after:rounded',\n  variants: {\n    position: {\n      before: 'after:-top-0.5 after:h-0.75',\n      after: 'after:-bottom-0.5 after:h-0.75',\n      into: 'after:inset-0',\n    } as const satisfies Record<NonNullable<DragOffset>, string>,\n  },\n})\n\n/**\n * Shared state for drag and drop operations\n * These are module-level refs so all draggable instances share the same state\n */\nconst draggingItem = ref<DraggingItem | null>(null)\nconst hoveredItem = ref<HoveredItem | null>(null)\n\nexport type UseDraggableOptions = {\n  /**\n   * Upper threshold (gets multiplied with height)\n   *\n   * @default 0.8\n   */\n  ceiling?: number\n  /**\n   * Lower threshold (gets multiplied with height)\n   *\n   * @default 0.2\n   */\n  floor?: number\n  /**\n   * Enable dragging. Can be a reactive ref or computed.\n   *\n   * @default true\n   */\n  isDraggable?: MaybeRef<boolean>\n  /**\n   * Prevents items from being hovered and dropped into. Can be either a function or a boolean\n   *\n   * @default true\n   */\n  isDroppable?: MaybeRef<boolean> | ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => boolean)\n  /**\n   * We pass an array of parents to make it easier to reverse traverse\n   */\n  parentIds?: string[]\n  /**\n   * ID for the current item\n   */\n  id: string\n  /**\n   * Callback when drag starts\n   */\n  onDragStart?: (draggingItem: DraggingItem) => void\n  /**\n   * Callback when drag ends\n   */\n  onDragEnd?: (draggingItem: DraggingItem, hoveredItem: HoveredItem) => void\n}\n\n/**\n * Composable for handling drag and drop functionality\n */\nexport function useDraggable(options: UseDraggableOptions) {\n  const {\n    ceiling = 0.8,\n    floor = 0.2,\n    isDraggable = true,\n    isDroppable = true,\n    parentIds = [],\n    id,\n    onDragStart,\n    onDragEnd,\n  } = options\n\n  // The latest parentId in the arr should be the current parent\n  const parentId = computed(() => parentIds.at(-1) ?? null)\n\n  /** Check if isDroppable guard */\n  const _isDroppable = (offset: DragOffset): boolean =>\n    typeof isDroppable === 'function'\n      ? isDroppable(draggingItem.value!, {\n          id: id,\n          parentId: parentId.value,\n          offset,\n        })\n      : toValue(isDroppable)\n\n  // Start dragging, we want to store the uid + parentUid\n  const handleDragStart = (ev: DragEvent) => {\n    if (!toValue(isDraggable) || !ev.dataTransfer || !(ev.target instanceof HTMLElement)) {\n      return\n    }\n\n    ev.target.setAttribute('data-dragging', 'true')\n    ev.dataTransfer.dropEffect = 'move'\n    ev.dataTransfer.effectAllowed = 'move'\n\n    // Store dragging item\n    const item = { id: id, parentId: parentId.value }\n    draggingItem.value = item\n    onDragStart?.(item)\n  }\n\n  // On dragging over we decide which highlight to show\n  const handleDragOver = throttle((ev: DragEvent) => {\n    // Don't highlight if hovering over self or child\n    if (!draggingItem.value || draggingItem.value.id === id || parentIds.includes(draggingItem.value?.id ?? '')) {\n      return\n    }\n\n    const previousOffset = hoveredItem.value?.offset\n    const height = (ev.target as HTMLDivElement).offsetHeight\n    const _floor = floor * height\n    const _ceiling = ceiling * height\n    let offset: DragOffset = null\n\n    // handle negative offset to be previous offset\n    if (ev.offsetY <= 0 && previousOffset && previousOffset !== 'after') {\n      offset = previousOffset\n    }\n    // Above\n    else if (ev.offsetY <= _floor) {\n      offset = 'before'\n    }\n    // Below\n    else if (ev.offsetY >= _ceiling) {\n      offset = 'after'\n    }\n    // between\n    else if (ev.offsetY > _floor && ev.offsetY < _ceiling) {\n      offset = 'into'\n    }\n\n    // Hover guard\n    if (!_isDroppable(offset)) {\n      return\n    }\n\n    hoveredItem.value = { id: id, parentId: parentId.value, offset }\n  }, 25)\n\n  const handleDragEnd = () => {\n    if (!hoveredItem.value || !draggingItem.value) {\n      return\n    }\n\n    const _draggingItem = { ...draggingItem.value }\n    const _hoveredItem = { ...hoveredItem.value }\n\n    // Remove hover and dragging\n    draggingItem.value = null\n    hoveredItem.value = null\n    document.querySelectorAll('[data-dragging]').forEach((el) => el.removeAttribute('data-dragging'))\n\n    if (_draggingItem.id === _hoveredItem.id) {\n      return\n    }\n\n    onDragEnd?.(_draggingItem, _hoveredItem)\n  }\n\n  const draggableClass = computed(() => {\n    const position = id === hoveredItem.value?.id ? hoveredItem.value.offset : undefined\n\n    if (!position) {\n      return ''\n    }\n\n    return draggableVariants({ position })\n  })\n\n  /**\n   * Props object to bind to the draggable element.\n   * Contains the class and draggable attribute.\n   */\n  const draggableAttrs = computed(() => ({\n    class: draggableClass.value || undefined,\n    // Only set the draggable attribute if isDraggable is true\n    draggable: toValue(isDraggable) ? true : undefined,\n  }))\n\n  return {\n    /**\n     * Props object to bind to the draggable element.\n     * Contains the class and draggable attribute.\n     */\n    draggableAttrs,\n    /**\n     * Event handlers object to bind to the draggable element.\n     * Contains dragend, dragover, and dragstart handlers with proper event prevention.\n     */\n    draggableEvents: {\n      dragend: handleDragEnd,\n      dragover: (ev: DragEvent) => {\n        ev.preventDefault()\n        ev.stopPropagation()\n        handleDragOver(ev)\n      },\n      dragstart: (ev: DragEvent) => {\n        ev.stopPropagation()\n        handleDragStart(ev)\n      },\n    },\n    draggingItem: draggingItem as Readonly<Ref<DraggingItem | null>>,\n    hoveredItem: hoveredItem as Readonly<Ref<HoveredItem | null>>,\n  }\n}\n"],"mappings":";;;;;;AA6BA,IAAM,YACJ,UACA,UAC+B;CAC/B,IAAI,OAAO;AAEX,SAAQ,GAAG,SAAgB;AACzB,MAAI,KACF;AAGF,WAAS,GAAG,KAAK;AACjB,SAAO;AACP,mBAAkB,OAAO,OAAQ,MAAM;;;;AAK3C,IAAM,oBAAoB,IAAI;CAC5B,MAAM;CACN,UAAU,EACR,UAAU;EACR,QAAQ;EACR,OAAO;EACP,MAAM;EACP,EACF;CACF,CAAC;;;;;AAMF,IAAM,eAAe,IAAyB,KAAK;AACnD,IAAM,cAAc,IAAwB,KAAK;;;;AAgDjD,SAAgB,aAAa,SAA8B;CACzD,MAAM,EACJ,UAAU,IACV,QAAQ,IACR,cAAc,MACd,cAAc,MACd,YAAY,EAAE,EACd,IACA,aACA,cACE;CAGJ,MAAM,WAAW,eAAe,UAAU,GAAG,GAAG,IAAI,KAAK;;CAGzD,MAAM,gBAAgB,WACpB,OAAO,gBAAgB,aACnB,YAAY,aAAa,OAAQ;EAC3B;EACJ,UAAU,SAAS;EACnB;EACD,CAAC,GACF,QAAQ,YAAY;CAG1B,MAAM,mBAAmB,OAAkB;AACzC,MAAI,CAAC,QAAQ,YAAY,IAAI,CAAC,GAAG,gBAAgB,EAAE,GAAG,kBAAkB,aACtE;AAGF,KAAG,OAAO,aAAa,iBAAiB,OAAO;AAC/C,KAAG,aAAa,aAAa;AAC7B,KAAG,aAAa,gBAAgB;EAGhC,MAAM,OAAO;GAAM;GAAI,UAAU,SAAS;GAAO;AACjD,eAAa,QAAQ;AACrB,gBAAc,KAAK;;CAIrB,MAAM,iBAAiB,UAAU,OAAkB;AAEjD,MAAI,CAAC,aAAa,SAAS,aAAa,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,OAAO,MAAM,GAAG,CACzG;EAGF,MAAM,iBAAiB,YAAY,OAAO;EAC1C,MAAM,SAAU,GAAG,OAA0B;EAC7C,MAAM,SAAS,QAAQ;EACvB,MAAM,WAAW,UAAU;EAC3B,IAAI,SAAqB;AAGzB,MAAI,GAAG,WAAW,KAAK,kBAAkB,mBAAmB,QAC1D,UAAS;WAGF,GAAG,WAAW,OACrB,UAAS;WAGF,GAAG,WAAW,SACrB,UAAS;WAGF,GAAG,UAAU,UAAU,GAAG,UAAU,SAC3C,UAAS;AAIX,MAAI,CAAC,aAAa,OAAO,CACvB;AAGF,cAAY,QAAQ;GAAM;GAAI,UAAU,SAAS;GAAO;GAAQ;IAC/D,GAAG;CAEN,MAAM,sBAAsB;AAC1B,MAAI,CAAC,YAAY,SAAS,CAAC,aAAa,MACtC;EAGF,MAAM,gBAAgB,EAAE,GAAG,aAAa,OAAO;EAC/C,MAAM,eAAe,EAAE,GAAG,YAAY,OAAO;AAG7C,eAAa,QAAQ;AACrB,cAAY,QAAQ;AACpB,WAAS,iBAAiB,kBAAkB,CAAC,SAAS,OAAO,GAAG,gBAAgB,gBAAgB,CAAC;AAEjG,MAAI,cAAc,OAAO,aAAa,GACpC;AAGF,cAAY,eAAe,aAAa;;CAG1C,MAAM,iBAAiB,eAAe;EACpC,MAAM,WAAW,OAAO,YAAY,OAAO,KAAK,YAAY,MAAM,SAAS,KAAA;AAE3E,MAAI,CAAC,SACH,QAAO;AAGT,SAAO,kBAAkB,EAAE,UAAU,CAAC;GACtC;AAYF,QAAO;EAKL,gBAXqB,gBAAgB;GACrC,OAAO,eAAe,SAAS,KAAA;GAE/B,WAAW,QAAQ,YAAY,GAAG,OAAO,KAAA;GAC1C,EAAE;EAYD,iBAAiB;GACf,SAAS;GACT,WAAW,OAAkB;AAC3B,OAAG,gBAAgB;AACnB,OAAG,iBAAiB;AACpB,mBAAe,GAAG;;GAEpB,YAAY,OAAkB;AAC5B,OAAG,iBAAiB;AACpB,oBAAgB,GAAG;;GAEtB;EACa;EACD;EACd"}

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import './style.css';
-export { default as HttpMethod } from './components/HttpMethod.vue';
-export { default as ScalarSidebar } from './components/ScalarSidebar.vue';
-export { default as SidebarHttpBadge } from './components/SidebarHttpBadge.vue';
-export { default as SidebarItem } from './components/SidebarItem.vue';
-export { type SidebarState, createSidebarState, } from './helpers/create-sidebar-state';
-export { generateReverseIndex } from './helpers/generate-reverse-index';
-export { getChildEntry } from './helpers/get-child-entry';
-export { scrollSidebarToTop } from './helpers/scroll-sidebar-to-top';
-export { type DragOffset, type DraggingItem, type HoveredItem, useDraggable, } from './hooks/use-draggable';
+export { default as HttpMethod } from './components/HttpMethod.vue.js';
+export { default as ScalarSidebar } from './components/ScalarSidebar.vue.js';
+export { default as SidebarHttpBadge } from './components/SidebarHttpBadge.vue.js';
+export { default as SidebarItem } from './components/SidebarItem.vue.js';
+export { type SidebarState, createSidebarState, } from './helpers/create-sidebar-state.js';
+export { generateReverseIndex } from './helpers/generate-reverse-index.js';
+export { getChildEntry } from './helpers/get-child-entry.js';
+export { scrollSidebarToTop } from './helpers/scroll-sidebar-to-top.js';
+export { type DragOffset, type DraggingItem, type HoveredItem, useDraggable, } from './hooks/use-draggable.js';
 export type { Item } from './types.ts';
 //# sourceMappingURL=index.d.ts.map