@scalar/sidebar 0.8.8 → 0.8.10

package/dist/index.js

@@ -1,21 +1,833 @@
-/* empty css          */
-import { default as o } from "./components/HttpMethod.vue.js";
-import { default as d } from "./components/ScalarSidebar.vue.js";
-import { default as p } from "./components/SidebarHttpBadge.vue.js";
-import { default as x } from "./components/SidebarItem.vue.js";
-import { createSidebarState as i } from "./helpers/create-sidebar-state.js";
-import { generateReverseIndex as S } from "./helpers/generate-reverse-index.js";
-import { getChildEntry as g } from "./helpers/get-child-entry.js";
-import { scrollSidebarToTop as c } from "./helpers/scroll-sidebar-to-top.js";
-import { useDraggable as h } from "./hooks/use-draggable.js";
-export {
-  o as HttpMethod,
-  d as ScalarSidebar,
-  p as SidebarHttpBadge,
-  x as SidebarItem,
-  i as createSidebarState,
-  S as generateReverseIndex,
-  g as getChildEntry,
-  c as scrollSidebarToTop,
-  h as useDraggable
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toHandlers, toValue, unref, useSlots, withCtx } from "vue";
+import { getHttpMethodInfo } from "@scalar/helpers/http/http-info";
+import { normalizeHttpMethod } from "@scalar/helpers/http/normalize-http-method";
+import { ScalarSidebar, ScalarSidebarGroup, ScalarSidebarItem, ScalarSidebarItems, ScalarSidebarSection, ScalarWrappingText } from "@scalar/components";
+import { LibraryIcon } from "@scalar/icons/library";
+import { cva } from "@scalar/use-hooks/useBindCx";
+import { ScalarIconWebhooksLogo } from "@scalar/icons";
+//#endregion
+//#region src/components/HttpMethod.vue
+var HttpMethod_default = /* @__PURE__ */ defineComponent({
+	__name: "HttpMethod",
+	props: {
+		as: {},
+		property: {},
+		short: { type: Boolean },
+		method: {}
+	},
+	setup(__props) {
+		const props = __props;
+		/** Grabs the method info object which contains abbreviation, color, and background color etc */
+		const httpMethodInfo = computed(() => getHttpMethodInfo(String(props.method || "")));
+		/** Full method name */
+		const normalized = computed(() => normalizeHttpMethod(props.method));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as ?? "span"), {
+				class: "uppercase",
+				style: normalizeStyle({ [__props.property || "color"]: httpMethodInfo.value.colorVar })
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default"), createTextVNode(" " + toDisplayString(__props.short ? httpMethodInfo.value.short : normalized.value), 1)]),
+				_: 3
+			}, 8, ["style"]);
+		};
+	}
+});
+//#endregion
+//#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
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/components/SidebarItemDecorator.vue
+var _sfc_main = {};
+var _hoisted_1$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$1, [renderSlot(_ctx.$slots, "default")]);
+}
+var SidebarItemDecorator_default = /* @__PURE__ */ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
+//#endregion
+//#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
+//#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
+//#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
+//#region src/components/SidebarHttpBadge.vue
+var SidebarHttpBadge_default = /* @__PURE__ */ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "SidebarHttpBadge",
+	props: {
+		method: {},
+		active: { type: Boolean },
+		webhook: { type: Boolean }
+	},
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(HttpMethod_default, {
+				class: normalizeClass([
+					"sidebar-heading-type",
+					`sidebar-heading-type--${__props.method.toLowerCase()}`,
+					{ "sidebar-heading-type-active": __props.active }
+				]),
+				method: __props.method,
+				property: "--method-color",
+				short: ""
+			}, {
+				default: withCtx(() => [_cache[0] || (_cache[0] = createElementVNode("span", { class: "sr-only" }, "HTTP Method:\xA0", -1)), renderSlot(_ctx.$slots, "default", {}, () => [__props.webhook ? (openBlock(), createBlock(unref(ScalarIconWebhooksLogo), {
+					key: 0,
+					style: normalizeStyle({ color: unref(getHttpMethodInfo)(__props.method).colorVar }),
+					weight: "bold"
+				}, null, 8, ["style"])) : createCommentVNode("", true)], true)]),
+				_: 3
+			}, 8, ["class", "method"]);
+		};
+	}
+}), [["__scopeId", "data-v-1857170e"]]);
+//#endregion
+//#region src/components/SidebarItemLabel.vue
+var SidebarItemLabel_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
+//#region src/components/SidebarItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "line-through"
+};
+var _hoisted_2 = {
+	key: 0,
+	class: "line-through"
+};
+//#endregion
+//#region src/components/SidebarItem.vue
+var SidebarItem_default = /* @__PURE__ */ defineComponent({
+	__name: "SidebarItem",
+	props: {
+		item: {},
+		layout: {},
+		isSelected: { type: Function },
+		isExpanded: { type: Function },
+		options: {},
+		isDraggable: {},
+		isDroppable: { type: Function }
+	},
+	emits: [
+		"selectItem",
+		"onDragEnd",
+		"toggleGroup"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const isGroup = (currentItem) => {
+			return "isGroup" in currentItem && currentItem.isGroup;
+		};
+		const isDeprecated = (currentItem) => {
+			return ("isDeprecated" in currentItem && currentItem.isDeprecated) ?? false;
+		};
+		/**
+		* Handle drag end event and bubble it up to parent.
+		*/
+		const onDragEnd = (draggingItem, hoveredItem) => {
+			emit("onDragEnd", draggingItem, hoveredItem);
+		};
+		const { draggableAttrs, draggableEvents } = useDraggable({
+			id: __props.item.id,
+			isDraggable: __props.isDraggable,
+			isDroppable: __props.isDroppable,
+			onDragEnd
+		});
+		return (_ctx, _cache) => {
+			const _component_SidebarItem = resolveComponent("SidebarItem", true);
+			return unref(hasChildren)(__props.item) && isGroup(__props.item) ? (openBlock(), createBlock(unref(ScalarSidebarSection), mergeProps({
+				key: 0,
+				"data-sidebar-id": __props.item.id
+			}, unref(draggableAttrs), toHandlers(unref(draggableEvents))), {
+				items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filterItems)(__props.layout, __props.item.children), (child) => {
+					return openBlock(), createBlock(_component_SidebarItem, {
+						key: child.id,
+						isDraggable: __props.isDraggable,
+						isDroppable: __props.isDroppable,
+						isExpanded: __props.isExpanded,
+						isSelected: __props.isSelected,
+						item: child,
+						layout: __props.layout,
+						options: __props.options,
+						onOnDragEnd: onDragEnd,
+						onSelectItem: _cache[0] || (_cache[0] = (id) => emit("selectItem", id)),
+						onToggleGroup: _cache[1] || (_cache[1] = (id) => emit("toggleGroup", id))
+					}, createSlots({ _: 2 }, [
+						slots.decorator ? {
+							name: "decorator",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "decorator", mergeProps({ ref_for: true }, slotProps))]),
+							key: "0"
+						} : void 0,
+						slots.empty ? {
+							name: "empty",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "empty", mergeProps({ ref_for: true }, slotProps))]),
+							key: "1"
+						} : void 0,
+						slots.icon ? {
+							name: "icon",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, slotProps))]),
+							key: "2"
+						} : void 0
+					]), 1032, [
+						"isDraggable",
+						"isDroppable",
+						"isExpanded",
+						"isSelected",
+						"item",
+						"layout",
+						"options"
+					]);
+				}), 128))]),
+				default: withCtx(() => [createTextVNode(toDisplayString(__props.item.title) + " ", 1)]),
+				_: 3
+			}, 16, ["data-sidebar-id"])) : unref(isSidebarFolder)(__props.layout, __props.item, slots.empty !== void 0) ? (openBlock(), createBlock(unref(ScalarSidebarGroup), mergeProps({
+				key: 1,
+				active: __props.isSelected(__props.item.id),
+				class: "relative",
+				controlled: "",
+				"data-sidebar-id": __props.item.id
+			}, unref(draggableAttrs), {
+				discrete: __props.layout === "reference" && __props.item.type === "text",
+				open: __props.isExpanded(__props.item.id)
+			}, toHandlers(unref(draggableEvents)), {
+				onClick: _cache[4] || (_cache[4] = () => emit("selectItem", __props.item.id)),
+				onToggle: _cache[5] || (_cache[5] = () => emit("toggleGroup", __props.item.id))
+			}), createSlots({
+				items: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(filterItems)(__props.layout, __props.item.children ?? []), (child) => {
+					return openBlock(), createBlock(_component_SidebarItem, {
+						key: child.id,
+						isDraggable: __props.isDraggable,
+						isDroppable: __props.isDroppable,
+						isExpanded: __props.isExpanded,
+						isSelected: __props.isSelected,
+						item: child,
+						layout: __props.layout,
+						options: __props.options,
+						parentIds: [],
+						onOnDragEnd: onDragEnd,
+						onSelectItem: _cache[2] || (_cache[2] = (id) => emit("selectItem", id)),
+						onToggleGroup: _cache[3] || (_cache[3] = (id) => emit("toggleGroup", id))
+					}, createSlots({ _: 2 }, [
+						slots.decorator ? {
+							name: "decorator",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "decorator", mergeProps({ ref_for: true }, slotProps))]),
+							key: "0"
+						} : void 0,
+						slots.empty ? {
+							name: "empty",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "empty", mergeProps({ ref_for: true }, slotProps))]),
+							key: "1"
+						} : void 0,
+						slots.icon ? {
+							name: "icon",
+							fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, slotProps))]),
+							key: "2"
+						} : void 0
+					]), 1032, [
+						"isDraggable",
+						"isDroppable",
+						"isExpanded",
+						"isSelected",
+						"item",
+						"layout",
+						"options"
+					]);
+				}), 128)), slots.empty && (__props.item.children?.length ?? 0) === 0 ? renderSlot(_ctx.$slots, "empty", {
+					key: 0,
+					item: __props.item
+				}) : createCommentVNode("", true)]),
+				default: withCtx(() => [isDeprecated(__props.item) ? (openBlock(), createElementBlock("span", _hoisted_1, [createVNode(SidebarItemLabel_default, {
+					item: __props.item,
+					operationTitleSource: __props.options?.operationTitleSource
+				}, null, 8, ["item", "operationTitleSource"])])) : (openBlock(), createBlock(SidebarItemLabel_default, {
+					key: 1,
+					item: __props.item,
+					operationTitleSource: __props.options?.operationTitleSource
+				}, null, 8, ["item", "operationTitleSource"]))]),
+				_: 2
+			}, [
+				__props.item.type === "document" ? {
+					name: "icon",
+					fn: withCtx(({ open }) => [renderSlot(_ctx.$slots, "icon", {
+						item: __props.item,
+						open
+					}, () => [createVNode(unref(LibraryIcon), {
+						class: "block",
+						src: "icon" in __props.item && __props.item.icon || "interface-content-folder"
+					}, null, 8, ["src"])])]),
+					key: "0"
+				} : void 0,
+				"method" in __props.item ? {
+					name: "aside",
+					fn: withCtx(() => [createVNode(SidebarHttpBadge_default, {
+						active: __props.isSelected(__props.item.id),
+						class: normalizeClass(["mr-1 ml-2 h-4 self-start", { "group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0": slots.decorator }]),
+						method: __props.item.method,
+						webhook: __props.item.type === "webhook"
+					}, null, 8, [
+						"active",
+						"class",
+						"method",
+						"webhook"
+					])]),
+					key: "1"
+				} : void 0,
+				slots.decorator ? {
+					name: "after",
+					fn: withCtx(() => [createVNode(SidebarItemDecorator_default, null, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "decorator", { item: __props.item })]),
+						_: 3
+					})]),
+					key: "2"
+				} : void 0
+			]), 1040, [
+				"active",
+				"data-sidebar-id",
+				"discrete",
+				"open"
+			])) : (openBlock(), createBlock(unref(ScalarSidebarItem), mergeProps({
+				key: 2,
+				is: "button"
+			}, unref(draggableAttrs), {
+				class: "relative",
+				"data-sidebar-id": __props.item.id,
+				selected: __props.isSelected(__props.item.id)
+			}, toHandlers(unref(draggableEvents)), { onClick: _cache[6] || (_cache[6] = () => emit("selectItem", __props.item.id)) }), createSlots({
+				default: withCtx(() => [isDeprecated(__props.item) ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(SidebarItemLabel_default, {
+					item: __props.item,
+					operationTitleSource: __props.options?.operationTitleSource
+				}, null, 8, ["item", "operationTitleSource"])])) : (openBlock(), createBlock(SidebarItemLabel_default, {
+					key: 1,
+					item: __props.item,
+					operationTitleSource: __props.options?.operationTitleSource
+				}, null, 8, ["item", "operationTitleSource"]))]),
+				_: 2
+			}, [
+				slots.icon ? {
+					name: "icon",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {
+						item: __props.item,
+						open: true
+					})]),
+					key: "0"
+				} : void 0,
+				"method" in __props.item ? {
+					name: "aside",
+					fn: withCtx(() => ["method" in __props.item ? (openBlock(), createBlock(SidebarHttpBadge_default, {
+						key: 0,
+						active: __props.isSelected(__props.item.id),
+						class: normalizeClass(["ml-2 h-4 self-start", { "group-hover/button:opacity-0 group-focus-visible/button:opacity-0 group-has-[~*_[aria-expanded=true]]/button:opacity-0 group-has-[~*:focus-within]/button:opacity-0 group-has-[~*:hover]/button:opacity-0": slots.decorator }]),
+						method: __props.item.method,
+						webhook: __props.item.type === "webhook"
+					}, null, 8, [
+						"active",
+						"class",
+						"method",
+						"webhook"
+					])) : createCommentVNode("", true)]),
+					key: "1"
+				} : void 0,
+				slots.decorator ? {
+					name: "after",
+					fn: withCtx(() => [createVNode(SidebarItemDecorator_default, null, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "decorator", { item: __props.item })]),
+						_: 3
+					})]),
+					key: "2"
+				} : void 0
+			]), 1040, ["data-sidebar-id", "selected"]));
+		};
+	}
+});
+//#endregion
+//#region src/components/ScalarSidebar.vue
+var ScalarSidebar_default = /* @__PURE__ */ defineComponent({
+	__name: "ScalarSidebar",
+	props: {
+		layout: {},
+		items: {},
+		isSelected: { type: Function },
+		isExpanded: { type: Function },
+		options: {},
+		indent: { default: 20 },
+		isDraggable: {},
+		isDroppable: { type: Function }
+	},
+	emits: [
+		"reorder",
+		"selectItem",
+		"toggleGroup"
+	],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		/**
+		* Handle drag and drop reordering of sidebar items.
+		* Emit the reorder event to the parent component for handling.
+		*/
+		const handleDragEnd = (draggingItem, hoveredItem) => {
+			emit("reorder", draggingItem, hoveredItem);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(ScalarSidebar), {
+				class: "flex min-h-0 flex-col",
+				style: normalizeStyle({ "--scalar-sidebar-indent": __props.indent + "px" })
+			}, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "header"),
+					renderSlot(_ctx.$slots, "default", {}, () => [createVNode(unref(ScalarSidebarItems), { class: "custom-scroll" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "before"), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(filterItems)(__props.layout, __props.items), (item) => {
+							return openBlock(), createBlock(SidebarItem_default, {
+								key: item.id,
+								isDraggable: __props.isDraggable ?? __props.layout === "client",
+								isDroppable: __props.isDroppable,
+								isExpanded: __props.isExpanded,
+								isSelected: __props.isSelected,
+								item,
+								layout: __props.layout,
+								options: __props.options,
+								onOnDragEnd: handleDragEnd,
+								onSelectItem: _cache[0] || (_cache[0] = (id) => emit("selectItem", id)),
+								onToggleGroup: _cache[1] || (_cache[1] = (id) => emit("toggleGroup", id))
+							}, createSlots({ _: 2 }, [
+								slots.decorator ? {
+									name: "decorator",
+									fn: withCtx((props) => [renderSlot(_ctx.$slots, "decorator", mergeProps({ ref_for: true }, props))]),
+									key: "0"
+								} : void 0,
+								slots.empty ? {
+									name: "empty",
+									fn: withCtx((props) => [renderSlot(_ctx.$slots, "empty", mergeProps({ ref_for: true }, props))]),
+									key: "1"
+								} : void 0,
+								slots.icon ? {
+									name: "icon",
+									fn: withCtx((props) => [renderSlot(_ctx.$slots, "icon", mergeProps({ ref_for: true }, props))]),
+									key: "2"
+								} : void 0
+							]), 1032, [
+								"isDraggable",
+								"isDroppable",
+								"isExpanded",
+								"isSelected",
+								"item",
+								"layout",
+								"options"
+							]);
+						}), 128))]),
+						_: 3
+					}), renderSlot(_ctx.$slots, "spacer", {}, () => [_cache[2] || (_cache[2] = createElementVNode("div", { class: "flex-1" }, null, -1))])]),
+					renderSlot(_ctx.$slots, "footer")
+				]),
+				_: 3
+			}, 8, ["style"]);
+		};
+	}
+});
+//#endregion
+//#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
+//#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
+//#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
+//#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 { HttpMethod_default as HttpMethod, ScalarSidebar_default as ScalarSidebar, SidebarHttpBadge_default as SidebarHttpBadge, SidebarItem_default as SidebarItem, createSidebarState, generateReverseIndex, getChildEntry, scrollSidebarToTop, useDraggable };
+
+//# sourceMappingURL=index.js.map