@powerhousedao/design-system 6.1.0-dev.12 → 6.1.0-dev.14

package/dist/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-result-counter.d.ts","names":[],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.tsx"],"mappings":";UAAU,wBAAA;EACR,WAAA;EACA,WAAA;EACA,YAAA;AAAA;AAAA,cAGW,mBAAA,EAAqB,KAAA,CAAM,EAAA,CAAG,wBAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.js

@@ -0,0 +1,22 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.tsx
+const SearchResultCounter = ({ isSearching, activeIndex, totalResults }) => {
+	if (isSearching) return /* @__PURE__ */ jsx("div", { className: "h-4 w-6 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-800" });
+	return /* @__PURE__ */ jsx("div", {
+		className: "text-xs",
+		children: totalResults > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-gray-700 dark:text-slate-50",
+			children: activeIndex + 1
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-gray-500 dark:text-slate-700",
+			children: ["/", totalResults]
+		})] }) : /* @__PURE__ */ jsx("span", {
+			className: "text-gray-500 dark:text-slate-700",
+			children: "0/0"
+		})
+	});
+};
+//#endregion
+export { SearchResultCounter };
+
+//# sourceMappingURL=search-result-counter.js.map

package/dist/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-result-counter.js","names":["SearchResultCounter","isSearching","activeIndex","totalResults"],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/search-result-counter.tsx"],"sourcesContent":["interface SearchResultCounterProps {\n  isSearching: boolean;\n  activeIndex: number;\n  totalResults: number;\n}\n\nexport const SearchResultCounter: React.FC<SearchResultCounterProps> = ({\n  isSearching,\n  activeIndex,\n  totalResults,\n}) => {\n  if (isSearching) {\n    return (\n      <div className=\"h-4 w-6 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-800\" />\n    );\n  }\n\n  return (\n    <div className=\"text-xs\">\n      {totalResults > 0 ? (\n        <>\n          <span className=\"text-gray-700 dark:text-slate-50\">\n            {activeIndex + 1}\n          </span>\n          <span className=\"text-gray-500 dark:text-slate-700\">\n            /{totalResults}\n          </span>\n        </>\n      ) : (\n        <span className=\"text-gray-500 dark:text-slate-700\">0/0</span>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;AAMA,MAAaA,uBAA2D,EACtEC,aACAC,aACAC,mBACI;AACJ,KAAIF,YACF,QACE,oBAAC,OAAD,EAAK,WAAU,kEAAmE,CAAA;AAItF,QACE,oBAAC,OAAD;EAAK,WAAU;YACZE,eAAe,IACd,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACbD,cAAc;GACX,CAAA,EACN,qBAAC,QAAD;GAAM,WAAU;aAAhB,CAAmD,KAC/CC,aACE;KACL,EAAA,CAAA,GAEH,oBAAC,QAAD;GAAM,WAAU;aAAoC;GACrD,CAAA;EACG,CAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.d.ts

@@ -0,0 +1,8 @@
+//#region src/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.d.ts
+interface SidebarSearchProps {
+  showStatusFilter: boolean;
+}
+declare const SidebarSearch: React.FC<SidebarSearchProps>;
+//#endregion
+export { SidebarSearch };
+//# sourceMappingURL=sidebar-search.d.ts.map

package/dist/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-search.d.ts","names":[],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.tsx"],"mappings":";UAUU,kBAAA;EACR,gBAAA;AAAA;AAAA,cAGW,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.js

@@ -0,0 +1,85 @@
+import { n as Search, r as CrossCircle, t as Tabler } from "../../../../../Tabler-FjvVqX5a.js";
+import { Input } from "../../../input/input.js";
+import { useSidebar } from "../sidebar-provider/sidebar-provider.js";
+import { SearchNavigationArrow } from "./search-navigation-arrow.js";
+import { SearchResultCounter } from "./search-result-counter.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.tsx
+const SidebarSearch = ({ showStatusFilter }) => {
+	const { searchTerm, isSearching, searchResults, activeSearchIndex, isStatusFilterEnabled, changeSearchTerm, nextSearchResult, previousSearchResult, toggleStatusFilter } = useSidebar();
+	const searchControlsRef = useRef(null);
+	const [searchControlsPaddingRight, setSearchControlsPaddingRight] = useState(16);
+	useLayoutEffect(() => {
+		if (searchControlsRef.current) setSearchControlsPaddingRight(searchControlsRef.current.clientWidth + 16);
+	}, [searchTerm]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full gap-2 border-t border-gray-300 p-2 dark:border-slate-800",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative flex-1",
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					type: "search",
+					value: searchTerm,
+					onChange: (e) => changeSearchTerm(e.target.value),
+					onKeyDown: (e) => {
+						if (e.key === "ArrowDown" || e.key === "Enter") nextSearchResult();
+						else if (e.key === "ArrowUp") previousSearchResult();
+					},
+					tabIndex: 1,
+					placeholder: "Search",
+					className: "w-full appearance-none pl-8 [&::-webkit-search-cancel-button]:hidden",
+					style: { paddingRight: searchControlsPaddingRight }
+				}),
+				/* @__PURE__ */ jsx(Search, {
+					height: 16,
+					width: 16,
+					className: "absolute top-1/2 left-2 -translate-y-1/2 text-gray-700 dark:text-slate-50"
+				}),
+				searchTerm && /* @__PURE__ */ jsxs("div", {
+					ref: searchControlsRef,
+					className: "absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-2 select-none",
+					children: [
+						/* @__PURE__ */ jsx(SearchResultCounter, {
+							isSearching,
+							activeIndex: activeSearchIndex,
+							totalResults: searchResults.length
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col text-gray-500 dark:text-slate-700",
+							children: [/* @__PURE__ */ jsx(SearchNavigationArrow, {
+								direction: "up",
+								isDisabled: activeSearchIndex === 0,
+								onClick: previousSearchResult
+							}), /* @__PURE__ */ jsx(SearchNavigationArrow, {
+								direction: "down",
+								isDisabled: activeSearchIndex === searchResults.length - 1,
+								onClick: nextSearchResult
+							})]
+						}),
+						/* @__PURE__ */ jsx(CrossCircle, {
+							onClick: () => changeSearchTerm(""),
+							height: 16,
+							width: 16,
+							className: "cursor-pointer text-gray-500 hover:text-gray-700 active:text-gray-900 dark:text-slate-700 dark:hover:text-slate-600 dark:active:text-slate-300"
+						})
+					]
+				})
+			]
+		}), showStatusFilter && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: toggleStatusFilter,
+			tabIndex: 1,
+			className: twMerge("rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-500", isStatusFilterEnabled ? "border-blue-500 bg-blue-100 text-blue-900" : "hover:bg-gray-100 hover:text-gray-700"),
+			children: /* @__PURE__ */ jsx(Tabler, {
+				height: 16,
+				width: 16
+			})
+		})]
+	});
+};
+//#endregion
+export { SidebarSearch };
+
+//# sourceMappingURL=sidebar-search.js.map

package/dist/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-search.js","names":["useLayoutEffect","useRef","useState","twMerge","Input","CrossCircle","Search","Tabler","useSidebar","SearchNavigationArrow","SearchResultCounter","SidebarSearch","showStatusFilter","searchTerm","isSearching","searchResults","activeSearchIndex","isStatusFilterEnabled","changeSearchTerm","nextSearchResult","previousSearchResult","toggleStatusFilter","searchControlsRef","searchControlsPaddingRight","setSearchControlsPaddingRight","current","clientWidth","e","target","value","key","paddingRight","length"],"sources":["../../../../../../src/ui/components/sidebar/subcomponents/sidebar-search/sidebar-search.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Input } from \"../../../input/input.js\";\nimport CrossCircle from \"../../../../../powerhouse/components/icon-components/CrossCircle.js\";\nimport Search from \"../../../../../powerhouse/components/icon-components/Search.js\";\nimport Tabler from \"../../../../../powerhouse/components/icon-components/Tabler.js\";\nimport { useSidebar } from \"../sidebar-provider/index.js\";\nimport { SearchNavigationArrow } from \"./search-navigation-arrow.js\";\nimport { SearchResultCounter } from \"./search-result-counter.js\";\n\ninterface SidebarSearchProps {\n  showStatusFilter: boolean;\n}\n\nexport const SidebarSearch: React.FC<SidebarSearchProps> = ({\n  showStatusFilter,\n}) => {\n  const {\n    searchTerm,\n    isSearching,\n    searchResults,\n    activeSearchIndex,\n    isStatusFilterEnabled,\n    changeSearchTerm,\n    nextSearchResult,\n    previousSearchResult,\n    toggleStatusFilter,\n  } = useSidebar();\n  const searchControlsRef = useRef<HTMLDivElement>(null);\n  const [searchControlsPaddingRight, setSearchControlsPaddingRight] =\n    useState(16);\n\n  useLayoutEffect(() => {\n    if (searchControlsRef.current) {\n      setSearchControlsPaddingRight(searchControlsRef.current.clientWidth + 16);\n    }\n  }, [searchTerm]);\n\n  return (\n    <div className=\"flex w-full gap-2 border-t border-gray-300 p-2 dark:border-slate-800\">\n      <div className=\"relative flex-1\">\n        <Input\n          type=\"search\"\n          value={searchTerm}\n          onChange={(e) => changeSearchTerm(e.target.value)}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowDown\" || e.key === \"Enter\") {\n              nextSearchResult();\n            } else if (e.key === \"ArrowUp\") {\n              previousSearchResult();\n            }\n          }}\n          tabIndex={1}\n          placeholder=\"Search\"\n          className=\"w-full appearance-none pl-8 [&::-webkit-search-cancel-button]:hidden\"\n          style={{ paddingRight: searchControlsPaddingRight }}\n        />\n\n        <Search\n          height={16}\n          width={16}\n          className=\"absolute top-1/2 left-2 -translate-y-1/2 text-gray-700 dark:text-slate-50\"\n        />\n\n        {/* Search controls - only shown when there's a search term */}\n        {searchTerm && (\n          <div\n            ref={searchControlsRef}\n            className=\"absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-2 select-none\"\n          >\n            <SearchResultCounter\n              isSearching={isSearching}\n              activeIndex={activeSearchIndex}\n              totalResults={searchResults.length}\n            />\n\n            <div className=\"flex flex-col text-gray-500 dark:text-slate-700\">\n              <SearchNavigationArrow\n                direction=\"up\"\n                isDisabled={activeSearchIndex === 0}\n                onClick={previousSearchResult}\n              />\n              <SearchNavigationArrow\n                direction=\"down\"\n                isDisabled={activeSearchIndex === searchResults.length - 1}\n                onClick={nextSearchResult}\n              />\n            </div>\n\n            {/* Clear search button */}\n            <CrossCircle\n              onClick={() => changeSearchTerm(\"\")}\n              height={16}\n              width={16}\n              className=\"cursor-pointer text-gray-500 hover:text-gray-700 active:text-gray-900 dark:text-slate-700 dark:hover:text-slate-600 dark:active:text-slate-300\"\n            />\n          </div>\n        )}\n      </div>\n\n      {showStatusFilter && (\n        <button\n          type=\"button\"\n          onClick={toggleStatusFilter}\n          tabIndex={1}\n          className={twMerge(\n            \"rounded-md border border-gray-300 px-2 py-1 text-sm text-gray-500\",\n            isStatusFilterEnabled\n              ? \"border-blue-500 bg-blue-100 text-blue-900\"\n              : \"hover:bg-gray-100 hover:text-gray-700\",\n          )}\n        >\n          <Tabler height={16} width={16} />\n        </button>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,MAAaW,iBAA+C,EAC1DC,uBACI;CACJ,MAAM,EACJC,YACAC,aACAC,eACAC,mBACAC,uBACAC,kBACAC,kBACAC,sBACAC,uBACEb,YAAY;CAChB,MAAMc,oBAAoBrB,OAAuB,KAAK;CACtD,MAAM,CAACsB,4BAA4BC,iCACjCtB,SAAS,GAAG;AAEdF,uBAAsB;AACpB,MAAIsB,kBAAkBG,QACpBD,+BAA8BF,kBAAkBG,QAAQC,cAAc,GAAG;IAE1E,CAACb,WAAW,CAAC;AAEhB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD;KACE,MAAK;KACL,OAAOA;KACP,WAAWc,MAAMT,iBAAiBS,EAAEC,OAAOC,MAAM;KACjD,YAAYF,MAAM;AAChB,UAAIA,EAAEG,QAAQ,eAAeH,EAAEG,QAAQ,QACrCX,mBAAkB;eACTQ,EAAEG,QAAQ,UACnBV,uBAAsB;;KAG1B,UAAU;KACV,aAAY;KACZ,WAAU;KACV,OAAO,EAAEW,cAAcR,4BAA4B;KAAC,CAAA;IAGtD,oBAAC,QAAD;KACE,QAAQ;KACR,OAAO;KACP,WAAU;KAA2E,CAAA;IAItFV,cACC,qBAAC,OAAD;KACE,KAAKS;KACL,WAAU;eAFZ;MAIE,oBAAC,qBAAD;OACeR;OACb,aAAaE;OACb,cAAcD,cAAciB;OAAO,CAAA;MAGrC,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,uBAAD;QACE,WAAU;QACV,YAAYhB,sBAAsB;QAClC,SAASI;QAAqB,CAAA,EAEhC,oBAAC,uBAAD;QACE,WAAU;QACV,YAAYJ,sBAAsBD,cAAciB,SAAS;QACzD,SAASb;QAAiB,CAAA,CAEzB;;MAGL,oBAAC,aAAD;OACE,eAAeD,iBAAiB,GAAG;OACnC,QAAQ;OACR,OAAO;OACP,WAAU;OAAgJ,CAAA;MAG/J;;IACE;MAEJN,oBACC,oBAAC,UAAD;GACE,MAAK;GACL,SAASS;GACT,UAAU;GACV,WAAWlB,QACT,qEACAc,wBACI,8CACA,wCACL;aAED,oBAAC,QAAD;IAAQ,QAAQ;IAAI,OAAO;IAAG,CAAA;GAEjC,CAAA,CACG"}

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton-item.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/components/sidebar/subcomponents/sidebar-skeleton-item.d.ts
+interface SidebarSkeletonItemProps {
+  depth: number;
+  textWidth: string;
+  style?: React.CSSProperties;
+}
+declare const SidebarSkeletonItem: ({
+  depth,
+  textWidth,
+  style
+}: SidebarSkeletonItemProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SidebarSkeletonItem };
+//# sourceMappingURL=sidebar-skeleton-item.d.ts.map

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-skeleton-item.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-skeleton-item.tsx"],"mappings":";;;UAEU,wBAAA;EACR,KAAA;EACA,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;AAAA;AAAA,cAGH,mBAAA;EAAuB,KAAA;EAAA,SAAA;EAAA;AAAA,GAIjC,wBAAA,KAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton-item.js

@@ -0,0 +1,21 @@
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/sidebar-skeleton-item.tsx
+const SidebarSkeletonItem = ({ depth, textWidth, style }) => {
+	return /* @__PURE__ */ jsx("div", {
+		style,
+		className: "flex items-center px-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex h-8 w-full items-center gap-2 px-2 py-1",
+			style: { paddingLeft: depth * 24 + 8 },
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex size-4 min-w-4 items-center justify-center",
+				children: /* @__PURE__ */ jsx("div", { className: "size-4 min-w-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600" })
+			}), /* @__PURE__ */ jsx("div", { className: twMerge("h-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600", textWidth) })]
+		})
+	});
+};
+//#endregion
+export { SidebarSkeletonItem };
+
+//# sourceMappingURL=sidebar-skeleton-item.js.map

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-skeleton-item.js","names":["twMerge","SidebarSkeletonItem","depth","textWidth","style","paddingLeft"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-skeleton-item.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\n\ninterface SidebarSkeletonItemProps {\n  depth: number;\n  textWidth: string;\n  style?: React.CSSProperties;\n}\n\nexport const SidebarSkeletonItem = ({\n  depth,\n  textWidth,\n  style,\n}: SidebarSkeletonItemProps) => {\n  const paddingLeft = depth * 24;\n\n  return (\n    <div style={style} className=\"flex items-center px-2\">\n      <div\n        className=\"flex h-8 w-full items-center gap-2 px-2 py-1\"\n        style={{ paddingLeft: paddingLeft + 8 }}\n      >\n        {/* Chevron icon skeleton */}\n        <div className=\"flex size-4 min-w-4 items-center justify-center\">\n          <div className=\"size-4 min-w-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600\" />\n        </div>\n\n        {/* Text content skeleton */}\n        <div\n          className={twMerge(\n            \"h-4 animate-pulse rounded-sm bg-gray-200 dark:bg-slate-600\",\n            textWidth,\n          )}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAQA,MAAaC,uBAAuB,EAClCC,OACAC,WACAC,YAC8B;AAG9B,QACE,oBAAC,OAAD;EAAYA;EAAO,WAAU;YAC3B,qBAAC,OAAD;GACE,WAAU;GACV,OAAO,EAAEC,aANKH,QAAQ,KAMc,GAAG;aAFzC,CAKE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD,EAAK,WAAU,yEAAuE,CAAA;IACnF,CAAA,EAGL,oBAAC,OAAD,EACE,WAAWF,QACT,8DACAG,UACD,EAAC,CAAA,CAED;;EACD,CAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/components/sidebar/subcomponents/sidebar-skeleton.d.ts
+declare const SidebarSkeleton: () => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SidebarSkeleton };
+//# sourceMappingURL=sidebar-skeleton.d.ts.map

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-skeleton.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-skeleton.tsx"],"mappings":";;;cAea,eAAA,QAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton.js

@@ -0,0 +1,63 @@
+import { SidebarSkeletonItem } from "./sidebar-skeleton-item.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/sidebar-skeleton.tsx
+const skeletonItems = [
+	{
+		depth: 0,
+		textWidth: "w-32"
+	},
+	{
+		depth: 1,
+		textWidth: "w-28"
+	},
+	{
+		depth: 1,
+		textWidth: "w-36"
+	},
+	{
+		depth: 2,
+		textWidth: "w-24"
+	},
+	{
+		depth: 2,
+		textWidth: "w-30"
+	},
+	{
+		depth: 0,
+		textWidth: "w-40"
+	},
+	{
+		depth: 1,
+		textWidth: "w-26"
+	},
+	{
+		depth: 1,
+		textWidth: "w-34"
+	},
+	{
+		depth: 2,
+		textWidth: "w-22"
+	},
+	{
+		depth: 0,
+		textWidth: "w-38"
+	}
+];
+const SidebarSkeleton = () => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex-1 overflow-hidden p-2",
+		role: "status",
+		"aria-label": "Loading sidebar content",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-2",
+			children: skeletonItems.map((item, index) => /* @__PURE__ */ jsx(SidebarSkeletonItem, {
+				depth: item.depth,
+				textWidth: item.textWidth
+			}, index))
+		})
+	});
+};
+//#endregion
+export { SidebarSkeleton };
+
+//# sourceMappingURL=sidebar-skeleton.js.map

package/dist/ui/components/sidebar/subcomponents/sidebar-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-skeleton.js","names":["SidebarSkeletonItem","skeletonItems","depth","textWidth","SidebarSkeleton","map","item","index"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-skeleton.tsx"],"sourcesContent":["import { SidebarSkeletonItem } from \"./sidebar-skeleton-item.js\";\n\nconst skeletonItems = [\n  { depth: 0, textWidth: \"w-32\" },\n  { depth: 1, textWidth: \"w-28\" },\n  { depth: 1, textWidth: \"w-36\" },\n  { depth: 2, textWidth: \"w-24\" },\n  { depth: 2, textWidth: \"w-30\" },\n  { depth: 0, textWidth: \"w-40\" },\n  { depth: 1, textWidth: \"w-26\" },\n  { depth: 1, textWidth: \"w-34\" },\n  { depth: 2, textWidth: \"w-22\" },\n  { depth: 0, textWidth: \"w-38\" },\n];\n\nexport const SidebarSkeleton = () => {\n  return (\n    <div\n      className=\"flex-1 overflow-hidden p-2\"\n      role=\"status\"\n      aria-label=\"Loading sidebar content\"\n    >\n      <div className=\"flex flex-col gap-2\">\n        {skeletonItems.map((item, index) => (\n          <SidebarSkeletonItem\n            key={index}\n            depth={item.depth}\n            textWidth={item.textWidth}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;AAEA,MAAMC,gBAAgB;CACpB;EAAEC,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAC/B;EAAED,OAAO;EAAGC,WAAW;EAAQ;CAChC;AAED,MAAaC,wBAAwB;AACnC,QACE,oBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,cAAW;YAEX,oBAAC,OAAD;GAAK,WAAU;aACZH,cAAcI,KAAKC,MAAMC,UACxB,oBAAC,qBAAD;IAEE,OAAOD,KAAKJ;IACZ,WAAWI,KAAKH;IAEnB,EAJQI,MAIR,CAAC;GACC,CAAA;EACD,CAAA"}

package/dist/ui/components/sidebar/subcomponents/status-icon.d.ts

@@ -0,0 +1,16 @@
+import { a as NodeStatus } from "../../../../types-CNbvfWjh.js";
+import * as react from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/components/sidebar/subcomponents/status-icon.d.ts
+interface StatusIconProps {
+  status: NodeStatus;
+  isDescendenceModified?: boolean;
+}
+declare const StatusIcon: ({
+  status,
+  isDescendenceModified
+}: StatusIconProps) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+//#endregion
+export { StatusIcon };
+//# sourceMappingURL=status-icon.d.ts.map

package/dist/ui/components/sidebar/subcomponents/status-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-icon.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/status-icon.tsx"],"mappings":";;;;;UAQU,eAAA;EACR,MAAA,EAAQ,UAAA;EACR,qBAAA;AAAA;AAAA,cAwBW,UAAA;EAAc,MAAA;EAAA;AAAA,GAGxB,eAAA,0CAAe,QAAA,CAAA,KAAA,CAAA,SAAA,IAAA,OAAA,sCAAA,KAAA,CAAA,WAAA,GAAA,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA,SAAA,QAAA,CAAA,KAAA,CAAA,SAAA,wBAAA,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/components/sidebar/subcomponents/status-icon.js

@@ -0,0 +1,43 @@
+import { a as DescendenceModified, i as Duplicated, n as Moved, o as Created, r as Modified, t as Removed } from "../../../../Removed-CO_5C1ce.js";
+import { NodeStatus } from "../types.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/status-icon.tsx
+const STATUS_ICON_MAP = {
+	[NodeStatus.CREATED]: { icon: /* @__PURE__ */ jsx(Created, {
+		height: 16,
+		width: 16,
+		className: "text-green-900"
+	}) },
+	[NodeStatus.MODIFIED]: { icon: /* @__PURE__ */ jsx(Modified, {
+		height: 16,
+		width: 16,
+		className: "text-blue-900"
+	}) },
+	[NodeStatus.REMOVED]: { icon: /* @__PURE__ */ jsx(Removed, {
+		height: 16,
+		width: 16,
+		className: "text-red-900"
+	}) },
+	[NodeStatus.MOVED]: { icon: /* @__PURE__ */ jsx(Moved, {
+		height: 16,
+		width: 16,
+		className: "text-blue-900"
+	}) },
+	[NodeStatus.DUPLICATED]: { icon: /* @__PURE__ */ jsx(Duplicated, {
+		height: 16,
+		width: 16,
+		className: "text-blue-900"
+	}) }
+};
+const StatusIcon = ({ status, isDescendenceModified }) => {
+	if (status === NodeStatus.UNCHANGED) return isDescendenceModified ? /* @__PURE__ */ jsx(DescendenceModified, {
+		height: 16,
+		width: 16,
+		className: "text-gray-500"
+	}) : null;
+	return STATUS_ICON_MAP[status].icon;
+};
+//#endregion
+export { StatusIcon };
+
+//# sourceMappingURL=status-icon.js.map

package/dist/ui/components/sidebar/subcomponents/status-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-icon.js","names":["Created","DescendenceModified","Duplicated","Modified","Moved","Removed","NodeStatus","STATUS_ICON_MAP","CREATED","icon","MODIFIED","REMOVED","MOVED","DUPLICATED","StatusIcon","status","isDescendenceModified","UNCHANGED"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/status-icon.tsx"],"sourcesContent":["import Created from \"../../../../powerhouse/components/icon-components/Created.js\";\nimport DescendenceModified from \"../../../../powerhouse/components/icon-components/DescendenceModified.js\";\nimport Duplicated from \"../../../../powerhouse/components/icon-components/Duplicated.js\";\nimport Modified from \"../../../../powerhouse/components/icon-components/Modified.js\";\nimport Moved from \"../../../../powerhouse/components/icon-components/Moved.js\";\nimport Removed from \"../../../../powerhouse/components/icon-components/Removed.js\";\nimport { NodeStatus } from \"../types.js\";\n\ninterface StatusIconProps {\n  status: NodeStatus;\n  isDescendenceModified?: boolean;\n}\n\nconst STATUS_ICON_MAP: Record<\n  Exclude<NodeStatus, NodeStatus.UNCHANGED>,\n  { icon: React.ReactNode }\n> = {\n  [NodeStatus.CREATED]: {\n    icon: <Created height={16} width={16} className=\"text-green-900\" />,\n  },\n  [NodeStatus.MODIFIED]: {\n    icon: <Modified height={16} width={16} className=\"text-blue-900\" />,\n  },\n  [NodeStatus.REMOVED]: {\n    icon: <Removed height={16} width={16} className=\"text-red-900\" />,\n  },\n  [NodeStatus.MOVED]: {\n    icon: <Moved height={16} width={16} className=\"text-blue-900\" />,\n  },\n  [NodeStatus.DUPLICATED]: {\n    icon: <Duplicated height={16} width={16} className=\"text-blue-900\" />,\n  },\n};\n\nexport const StatusIcon = ({\n  status,\n  isDescendenceModified,\n}: StatusIconProps) => {\n  if (status === NodeStatus.UNCHANGED) {\n    return isDescendenceModified ? (\n      <DescendenceModified height={16} width={16} className=\"text-gray-500\" />\n    ) : null;\n  }\n\n  return STATUS_ICON_MAP[status].icon;\n};\n"],"mappings":";;;;AAaA,MAAMO,kBAGF;EACDD,WAAWE,UAAU,EACpBC,MAAM,oBAAC,SAAD;EAAS,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAgB,CAAA,EACjE;EACAH,WAAWI,WAAW,EACrBD,MAAM,oBAAC,UAAD;EAAU,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAe,CAAA,EACjE;EACAH,WAAWK,UAAU,EACpBF,MAAM,oBAAC,SAAD;EAAS,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAc,CAAA,EAC/D;EACAH,WAAWM,QAAQ,EAClBH,MAAM,oBAAC,OAAD;EAAO,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAe,CAAA,EAC9D;EACAH,WAAWO,aAAa,EACvBJ,MAAM,oBAAC,YAAD;EAAY,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAe,CAAA,EACpE;CACD;AAED,MAAaK,cAAc,EACzBC,QACAC,4BACqB;AACrB,KAAID,WAAWT,WAAWW,UACxB,QAAOD,wBACL,oBAAC,qBAAD;EAAqB,QAAQ;EAAI,OAAO;EAAI,WAAU;EAAkB,CAAA,GACtE;AAGN,QAAOT,gBAAgBQ,QAAQN"}

package/dist/ui/components/sidebar/types.d.ts

@@ -0,0 +1,2 @@
+import { a as NodeStatus, i as NodeSortType, n as NodeSortComparisonFn, o as SidebarIcon, r as NodeSortOrder, s as SidebarNode, t as FlattenedNode } from "../../../types-CNbvfWjh.js";
+export { FlattenedNode, NodeSortComparisonFn, NodeSortOrder, NodeSortType, NodeStatus, SidebarIcon, SidebarNode };

package/dist/ui/components/sidebar/types.js

@@ -0,0 +1,14 @@
+//#region src/ui/components/sidebar/types.ts
+let NodeStatus = /* @__PURE__ */ function(NodeStatus) {
+	NodeStatus["CREATED"] = "CREATED";
+	NodeStatus["MODIFIED"] = "MODIFIED";
+	NodeStatus["REMOVED"] = "REMOVED";
+	NodeStatus["MOVED"] = "MOVED";
+	NodeStatus["DUPLICATED"] = "DUPLICATED";
+	NodeStatus["UNCHANGED"] = "UNCHANGED";
+	return NodeStatus;
+}({});
+//#endregion
+export { NodeStatus };
+
+//# sourceMappingURL=types.js.map

package/dist/ui/components/sidebar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["NodeStatus"],"sources":["../../../../src/ui/components/sidebar/types.ts"],"sourcesContent":["import type { IconName } from \"../../../powerhouse/types.js\";\n\nexport enum NodeStatus {\n  CREATED = \"CREATED\",\n  MODIFIED = \"MODIFIED\",\n  REMOVED = \"REMOVED\",\n  MOVED = \"MOVED\",\n  DUPLICATED = \"DUPLICATED\",\n  UNCHANGED = \"UNCHANGED\", // default\n}\n\nexport type SidebarIcon = IconName | React.ReactElement;\n\nexport interface SidebarNode {\n  title: string;\n  id: string;\n  children?: SidebarNode[];\n  icon?: SidebarIcon;\n  expandedIcon?: SidebarIcon;\n  status?: NodeStatus;\n  className?: string;\n}\n\nexport type NodeSortComparisonFn = (\n  valueA: string,\n  valueB: string,\n) => -1 | 0 | 1;\nexport type NodeSortType = \"alphabetical\" | \"natural\" | NodeSortComparisonFn;\nexport type NodeSortOrder = \"asc\" | \"desc\";\n\nexport interface FlattenedNode extends SidebarNode {\n  depth: number;\n  isExpanded: boolean;\n}\n"],"mappings":";AAEA,IAAYA,aAAU,yBAAVA,YAAU;AAAVA,YAAU,aAAA;AAAVA,YAAU,cAAA;AAAVA,YAAU,aAAA;AAAVA,YAAU,WAAA;AAAVA,YAAU,gBAAA;AAAVA,YAAU,eAAA;AAMK,QANfA;EAAU,EAAA,CAAA"}

package/dist/ui/components/sidebar/use-ellipsis.d.ts

@@ -0,0 +1,10 @@
+//#region src/ui/components/sidebar/use-ellipsis.d.ts
+/**
+ * Custom hook to detect if an element's text is truncated with ellipsis
+ * @param ref - The ref of the element to detect ellipsis on
+ * @returns Whether the element's text is truncated with ellipsis
+ */
+declare const useEllipsis: <T extends HTMLElement>(ref: React.RefObject<T | null>) => boolean;
+//#endregion
+export { useEllipsis };
+//# sourceMappingURL=use-ellipsis.d.ts.map

package/dist/ui/components/sidebar/use-ellipsis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ellipsis.d.ts","names":[],"sources":["../../../../src/ui/components/sidebar/use-ellipsis.ts"],"mappings":";;AAOA;;;;cAAa,WAAA,aAAyB,WAAA,EACpC,GAAA,EAAK,KAAA,CAAM,SAAA,CAAU,CAAA"}

package/dist/ui/components/sidebar/use-ellipsis.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+//#region src/ui/components/sidebar/use-ellipsis.ts
+/**
+* Custom hook to detect if an element's text is truncated with ellipsis
+* @param ref - The ref of the element to detect ellipsis on
+* @returns Whether the element's text is truncated with ellipsis
+*/
+const useEllipsis = (ref) => {
+	const [hasEllipsis, setHasEllipsis] = useState(false);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const observer = new ResizeObserver(() => {
+			setHasEllipsis(element.offsetWidth < element.scrollWidth);
+		});
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+		};
+	}, [ref]);
+	return hasEllipsis;
+};
+//#endregion
+export { useEllipsis };
+
+//# sourceMappingURL=use-ellipsis.js.map

package/dist/ui/components/sidebar/use-ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ellipsis.js","names":["useEffect","useState","useEllipsis","ref","hasEllipsis","setHasEllipsis","element","current","observer","ResizeObserver","offsetWidth","scrollWidth","observe","disconnect"],"sources":["../../../../src/ui/components/sidebar/use-ellipsis.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Custom hook to detect if an element's text is truncated with ellipsis\n * @param ref - The ref of the element to detect ellipsis on\n * @returns Whether the element's text is truncated with ellipsis\n */\nexport const useEllipsis = <T extends HTMLElement>(\n  ref: React.RefObject<T | null>,\n): boolean => {\n  const [hasEllipsis, setHasEllipsis] = useState(false);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(() => {\n      setHasEllipsis(element.offsetWidth < element.scrollWidth);\n    });\n    observer.observe(element);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [ref]);\n\n  return hasEllipsis;\n};\n"],"mappings":";;;;;;;AAOA,MAAaE,eACXC,QACY;CACZ,MAAM,CAACC,aAAaC,kBAAkBJ,SAAS,MAAM;AAErDD,iBAAgB;EACd,MAAMM,UAAUH,IAAII;AACpB,MAAI,CAACD,QAAS;EAEd,MAAME,WAAW,IAAIC,qBAAqB;AACxCJ,kBAAeC,QAAQI,cAAcJ,QAAQK,YAAY;IACzD;AACFH,WAASI,QAAQN,QAAQ;AAEzB,eAAa;AACXE,YAASK,YAAY;;IAEtB,CAACV,IAAI,CAAC;AAET,QAAOC"}

package/dist/ui/components/sidebar/use-sidebar-resize.d.ts

@@ -0,0 +1,22 @@
+import * as react from "react";
+
+//#region src/ui/components/sidebar/use-sidebar-resize.d.ts
+interface SidebarResizeProps {
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+}
+declare const useSidebarResize: ({
+  defaultWidth,
+  minWidth,
+  maxWidth
+}: SidebarResizeProps) => {
+  sidebarRef: react.RefObject<HTMLDivElement | null>;
+  startResizing: () => void;
+  isResizing: boolean;
+  isSidebarOpen: boolean;
+  handleToggleSidebar: () => void;
+};
+//#endregion
+export { useSidebarResize };
+//# sourceMappingURL=use-sidebar-resize.d.ts.map

package/dist/ui/components/sidebar/use-sidebar-resize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sidebar-resize.d.ts","names":[],"sources":["../../../../src/ui/components/sidebar/use-sidebar-resize.ts"],"mappings":";;;UAGU,kBAAA;EACR,YAAA;EACA,QAAA;EACA,QAAA;AAAA;AAAA,cAGW,gBAAA;EAAoB,YAAA;EAAA,QAAA;EAAA;AAAA,GAI9B,kBAAA"}

package/dist/ui/components/sidebar/use-sidebar-resize.js

@@ -0,0 +1,72 @@
+import { triggerEvent } from "./utils.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ui/components/sidebar/use-sidebar-resize.ts
+const useSidebarResize = ({ defaultWidth = 300, minWidth = 100, maxWidth }) => {
+	const [isResizing, setIsResizing] = useState(false);
+	const [sidebarWidth, setSidebarWidth] = useState(Math.max(defaultWidth, minWidth));
+	const sidebarRef = useRef(null);
+	const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+	const handleToggleSidebar = useCallback(() => {
+		const newState = !isSidebarOpen;
+		setIsSidebarOpen(newState);
+		triggerEvent("sidebar:resize:toggle", { isSidebarOpen: newState }, sidebarRef.current);
+	}, [isSidebarOpen]);
+	useEffect(() => {
+		const width = isSidebarOpen ? sidebarWidth : 8;
+		document.documentElement.style.setProperty("--sidebar-width", `${width}px`);
+	}, [isSidebarOpen, sidebarWidth]);
+	const startResizing = useCallback(() => {
+		if (!isSidebarOpen) return;
+		setIsResizing(true);
+		triggerEvent("sidebar:resize:start", { isSidebarOpen }, sidebarRef.current);
+	}, [isSidebarOpen]);
+	const stopResizing = useCallback(() => {
+		if (!isResizing) return;
+		setIsResizing(false);
+		triggerEvent("sidebar:resize", {
+			isSidebarOpen,
+			sidebarWidth: isSidebarOpen ? sidebarWidth : 8
+		}, sidebarRef.current);
+	}, [
+		isResizing,
+		isSidebarOpen,
+		sidebarWidth
+	]);
+	const resize = useCallback((mouseMoveEvent) => {
+		if (!isResizing || !sidebarRef.current) return;
+		const sidebarLeft = sidebarRef.current.getBoundingClientRect().left;
+		let newWidth = mouseMoveEvent.clientX - sidebarLeft;
+		newWidth = Math.max(newWidth, minWidth);
+		if (maxWidth !== void 0) newWidth = Math.min(newWidth, maxWidth);
+		setSidebarWidth(newWidth);
+		triggerEvent("sidebar:resize:active", {
+			isSidebarOpen,
+			sidebarWidth: newWidth
+		}, sidebarRef.current);
+	}, [
+		isResizing,
+		minWidth,
+		maxWidth,
+		isSidebarOpen
+	]);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		window.addEventListener("mousemove", resize);
+		window.addEventListener("mouseup", stopResizing);
+		return () => {
+			window.removeEventListener("mousemove", resize);
+			window.removeEventListener("mouseup", stopResizing);
+		};
+	}, [resize, stopResizing]);
+	return {
+		sidebarRef,
+		startResizing,
+		isResizing,
+		isSidebarOpen,
+		handleToggleSidebar
+	};
+};
+//#endregion
+export { useSidebarResize };
+
+//# sourceMappingURL=use-sidebar-resize.js.map

package/dist/ui/components/sidebar/use-sidebar-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sidebar-resize.js","names":["useCallback","useEffect","useRef","useState","triggerEvent","useSidebarResize","defaultWidth","minWidth","maxWidth","isResizing","setIsResizing","sidebarWidth","setSidebarWidth","Math","max","sidebarRef","isSidebarOpen","setIsSidebarOpen","handleToggleSidebar","newState","current","width","document","documentElement","style","setProperty","startResizing","stopResizing","resize","mouseMoveEvent","sidebarLeft","getBoundingClientRect","left","newWidth","clientX","undefined","min","window","addEventListener","removeEventListener"],"sources":["../../../../src/ui/components/sidebar/use-sidebar-resize.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport { triggerEvent } from \"./utils.js\";\n\ninterface SidebarResizeProps {\n  defaultWidth?: number;\n  minWidth?: number;\n  maxWidth?: number;\n}\n\nexport const useSidebarResize = ({\n  defaultWidth = 300,\n  minWidth = 100,\n  maxWidth,\n}: SidebarResizeProps) => {\n  const [isResizing, setIsResizing] = useState<boolean>(false);\n\n  const [sidebarWidth, setSidebarWidth] = useState<number>(\n    Math.max(defaultWidth, minWidth),\n  );\n\n  const sidebarRef = useRef<HTMLDivElement>(null);\n\n  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);\n\n  const handleToggleSidebar = useCallback(() => {\n    const newState = !isSidebarOpen;\n    setIsSidebarOpen(newState);\n\n    // Trigger custom event for external listeners\n    triggerEvent(\n      \"sidebar:resize:toggle\",\n      { isSidebarOpen: newState },\n      sidebarRef.current,\n    );\n  }, [isSidebarOpen]);\n\n  // Update CSS variable when sidebar width or open state changes\n  useEffect(() => {\n    const width = isSidebarOpen ? sidebarWidth : 8;\n    document.documentElement.style.setProperty(\"--sidebar-width\", `${width}px`);\n  }, [isSidebarOpen, sidebarWidth]);\n\n  const startResizing = useCallback(() => {\n    if (!isSidebarOpen) return;\n\n    setIsResizing(true);\n\n    // Trigger custom event for external listeners\n    triggerEvent(\"sidebar:resize:start\", { isSidebarOpen }, sidebarRef.current);\n  }, [isSidebarOpen]);\n\n  const stopResizing = useCallback(() => {\n    if (!isResizing) return;\n\n    setIsResizing(false);\n\n    // Trigger custom event for external listeners\n    triggerEvent(\n      \"sidebar:resize\",\n      {\n        isSidebarOpen,\n        sidebarWidth: isSidebarOpen ? sidebarWidth : 8,\n      },\n      sidebarRef.current,\n    );\n  }, [isResizing, isSidebarOpen, sidebarWidth]);\n\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent) => {\n      if (!isResizing || !sidebarRef.current) return;\n\n      const sidebarLeft = sidebarRef.current.getBoundingClientRect().left;\n      let newWidth = mouseMoveEvent.clientX - sidebarLeft;\n\n      newWidth = Math.max(newWidth, minWidth);\n      if (maxWidth !== undefined) {\n        newWidth = Math.min(newWidth, maxWidth);\n      }\n\n      setSidebarWidth(newWidth);\n\n      // Trigger custom event for external listeners\n      triggerEvent(\n        \"sidebar:resize:active\",\n        {\n          isSidebarOpen,\n          sidebarWidth: newWidth,\n        },\n        sidebarRef.current,\n      );\n    },\n    [isResizing, minWidth, maxWidth, isSidebarOpen],\n  );\n\n  // Set up and clean up event listeners for resize operation\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    window.addEventListener(\"mousemove\", resize);\n    window.addEventListener(\"mouseup\", stopResizing);\n\n    return () => {\n      window.removeEventListener(\"mousemove\", resize);\n      window.removeEventListener(\"mouseup\", stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return {\n    sidebarRef,\n    startResizing,\n    isResizing,\n    isSidebarOpen,\n    handleToggleSidebar,\n  };\n};\n"],"mappings":";;;AASA,MAAaK,oBAAoB,EAC/BC,eAAe,KACfC,WAAW,KACXC,eACwB;CACxB,MAAM,CAACC,YAAYC,iBAAiBP,SAAkB,MAAM;CAE5D,MAAM,CAACQ,cAAcC,mBAAmBT,SACtCU,KAAKC,IAAIR,cAAcC,SACzB,CAAC;CAED,MAAMQ,aAAab,OAAuB,KAAK;CAE/C,MAAM,CAACc,eAAeC,oBAAoBd,SAAkB,KAAK;CAEjE,MAAMe,sBAAsBlB,kBAAkB;EAC5C,MAAMmB,WAAW,CAACH;AAClBC,mBAAiBE,SAAS;AAG1Bf,eACE,yBACA,EAAEY,eAAeG,UAAU,EAC3BJ,WAAWK,QACZ;IACA,CAACJ,cAAc,CAAC;AAGnBf,iBAAgB;EACd,MAAMoB,QAAQL,gBAAgBL,eAAe;AAC7CW,WAASC,gBAAgBC,MAAMC,YAAY,mBAAmB,GAAGJ,MAAK,IAAK;IAC1E,CAACL,eAAeL,aAAa,CAAC;CAEjC,MAAMe,gBAAgB1B,kBAAkB;AACtC,MAAI,CAACgB,cAAe;AAEpBN,gBAAc,KAAK;AAGnBN,eAAa,wBAAwB,EAAEY,eAAe,EAAED,WAAWK,QAAQ;IAC1E,CAACJ,cAAc,CAAC;CAEnB,MAAMW,eAAe3B,kBAAkB;AACrC,MAAI,CAACS,WAAY;AAEjBC,gBAAc,MAAM;AAGpBN,eACE,kBACA;GACEY;GACAL,cAAcK,gBAAgBL,eAAe;GAC9C,EACDI,WAAWK,QACZ;IACA;EAACX;EAAYO;EAAeL;EAAa,CAAC;CAE7C,MAAMiB,SAAS5B,aACZ6B,mBAA+B;AAC9B,MAAI,CAACpB,cAAc,CAACM,WAAWK,QAAS;EAExC,MAAMU,cAAcf,WAAWK,QAAQW,uBAAuB,CAACC;EAC/D,IAAIC,WAAWJ,eAAeK,UAAUJ;AAExCG,aAAWpB,KAAKC,IAAImB,UAAU1B,SAAS;AACvC,MAAIC,aAAa2B,KAAAA,EACfF,YAAWpB,KAAKuB,IAAIH,UAAUzB,SAAS;AAGzCI,kBAAgBqB,SAAS;AAGzB7B,eACE,yBACA;GACEY;GACAL,cAAcsB;GACf,EACDlB,WAAWK,QACZ;IAEH;EAACX;EAAYF;EAAUC;EAAUQ;EACnC,CAAC;AAGDf,iBAAgB;AACd,MAAI,OAAOoC,WAAW,YAAa;AAEnCA,SAAOC,iBAAiB,aAAaV,OAAO;AAC5CS,SAAOC,iBAAiB,WAAWX,aAAa;AAEhD,eAAa;AACXU,UAAOE,oBAAoB,aAAaX,OAAO;AAC/CS,UAAOE,oBAAoB,WAAWZ,aAAa;;IAEpD,CAACC,QAAQD,aAAa,CAAC;AAE1B,QAAO;EACLZ;EACAW;EACAjB;EACAO;EACAE;EACD"}

package/dist/ui/components/sidebar/utils.d.ts

@@ -0,0 +1,14 @@
+import { a as NodeStatus, i as NodeSortType, r as NodeSortOrder, s as SidebarNode } from "../../../types-CNbvfWjh.js";
+
+//#region src/ui/components/sidebar/utils.d.ts
+declare const nodesSearch: (nodes: SidebarNode[], searchTerm: string, searchType?: "bfs" | "dfs") => SidebarNode[];
+declare const getOpenLevels: (items: SidebarNode[], level: number) => Set<string>;
+declare const isOpenLevel: (items: SidebarNode[], expandedNodes: Set<string>, level: number) => boolean;
+declare const getNodePath: (items: SidebarNode[], nodeId: string) => SidebarNode[] | null;
+declare const getMaxDepth: (items: SidebarNode[]) => number;
+declare const filterStatuses: (nodes: SidebarNode[], statuses: NodeStatus[]) => SidebarNode[];
+declare const triggerEvent: (eventType: string, data: unknown, element?: Document | HTMLElement | null) => void;
+declare const sortNodes: (nodes: SidebarNode[], sortType: NodeSortType, sortOrder: NodeSortOrder) => SidebarNode[];
+//#endregion
+export { filterStatuses, getMaxDepth, getNodePath, getOpenLevels, isOpenLevel, nodesSearch, sortNodes, triggerEvent };
+//# sourceMappingURL=utils.d.ts.map

package/dist/ui/components/sidebar/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../../src/ui/components/sidebar/utils.ts"],"mappings":";;;cAQa,WAAA,GACX,KAAA,EAAO,WAAA,IACP,UAAA,UACA,UAAA,qBACC,WAAA;AAAA,cAmDU,aAAA,GACX,KAAA,EAAO,WAAA,IACP,KAAA,aACC,GAAA;AAAA,cAsBU,WAAA,GACX,KAAA,EAAO,WAAA,IACP,aAAA,EAAe,GAAA,UACf,KAAA;AAAA,cAuCW,WAAA,GACX,KAAA,EAAO,WAAA,IACP,MAAA,aACC,WAAA;AAAA,cA2CU,WAAA,GAAe,KAAA,EAAO,WAAA;AAAA,cA2BtB,cAAA,GACX,KAAA,EAAO,WAAA,IACP,QAAA,EAAU,UAAA,OACT,WAAA;AAAA,cA6BU,YAAA,GACX,SAAA,UACA,IAAA,WACA,OAAA,GAAS,QAAA,GAAW,WAAA;AAAA,cAgBT,SAAA,GACX,KAAA,EAAO,WAAA,IACP,QAAA,EAAU,YAAA,EACV,SAAA,EAAW,aAAA,KACV,WAAA"}