@powerhousedao/design-system 6.1.0-dev.13 → 6.1.0-dev.15

package/dist/ui/components/select-field/subcomponents/CommandItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandItemList.js","names":["cn","Icon","React","CommandItem","renderIcon","IconComponent","CommandItemList","options","selectedValues","multiple","selectionIcon","selectionIconPosition","hasAnyIcon","toggleOption","tabIndex","map","opt","isSelected","includes","value","label","disabled","icon"],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { cn, Icon } from \"#design-system\";\nimport React from \"react\";\nimport { CommandItem } from \"../../command/command.js\";\nimport type { SelectProps } from \"../../enum-field/types.js\";\n\ninterface FavoriteOptionsProps {\n  options: SelectProps[\"options\"];\n  selectedValues: string[];\n  multiple?: boolean;\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  hasAnyIcon: boolean;\n  toggleOption: (value: string) => void;\n  tabIndex?: number;\n}\n\nconst renderIcon = (\n  IconComponent:\n    | IconName\n    | React.ComponentType<{ className?: string }>\n    | undefined,\n) => {\n  if (typeof IconComponent === \"string\") {\n    return (\n      <Icon\n        name={IconComponent}\n        size={16}\n        className={cn(\"text-gray-700 dark:text-gray-400\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent\n        className={cn(\"size-4\", \"text-gray-700 dark:text-gray-400\")}\n      />\n    )\n  );\n};\n\nexport const CommandItemList: React.FC<FavoriteOptionsProps> = ({\n  options = [],\n  selectedValues,\n  multiple,\n  selectionIcon,\n  selectionIconPosition,\n  hasAnyIcon,\n  toggleOption,\n  tabIndex,\n}) => {\n  return (\n    <>\n      {options.map((opt) => {\n        const isSelected = selectedValues.includes(opt.value);\n        return (\n          <CommandItem\n            tabIndex={tabIndex}\n            key={`favorite-${opt.value}`}\n            value={opt.label}\n            onSelect={() => !opt.disabled && toggleOption(opt.value)}\n            disabled={opt.disabled}\n            className={cn(\n              \"cursor-pointer\",\n              \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-gray-900\",\n              opt.disabled &&\n                \"pointer-events-auto! cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent\",\n            )}\n            role=\"option\"\n            aria-selected={isSelected}\n          >\n            {selectionIcon === \"auto\" &&\n              (multiple ? (\n                <div\n                  className={cn(\n                    \"flex size-4 items-center justify-center rounded-md border\",\n                    \"border-gray-700 dark:border-gray-400\",\n                    isSelected &&\n                      \"bg-gray-900 text-slate-50 dark:bg-gray-400 dark:text-black\",\n                  )}\n                >\n                  {isSelected && <Icon name=\"Checkmark\" size={16} />}\n                </div>\n              ) : (\n                <div\n                  className={cn(\n                    \"relative size-4 rounded-full border\",\n                    isSelected\n                      ? \"border-gray-900 dark:border-gray-400\"\n                      : \"border-gray-800 dark:border-gray-400\",\n                    \"bg-transparent dark:bg-transparent\",\n                  )}\n                >\n                  {isSelected && (\n                    <div className=\"absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-gray-400\" />\n                  )}\n                </div>\n              ))}\n            {selectionIcon === \"checkmark\" &&\n              !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                <div className=\"size-4\">\n                  {selectionIconPosition === \"left\" && isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n            {renderIcon(opt.icon)}\n            <span\n              className={cn(\n                \"flex-1 truncate text-sm/4 font-normal\",\n                \"text-gray-700 dark:text-gray-500\",\n                opt.disabled && \"text-gray-600 dark:text-gray-600\",\n              )}\n            >\n              {opt.label}\n            </span>\n            {selectionIcon === \"checkmark\" &&\n              selectionIconPosition === \"right\" && (\n                <div className=\"size-4\">\n                  {isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-gray-50\"\n                    />\n                  )}\n                </div>\n              )}\n          </CommandItem>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;AAiBA,MAAMI,cACJC,kBAIG;AACH,KAAI,OAAOA,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWL,GAAG,mCAAmC;EACjD,CAAA;AAGN,QACEK,iBACE,oBAAC,eAAD,EACE,WAAWL,GAAG,UAAU,mCAAmC,EAE9D,CAAA;;AAIL,MAAaM,mBAAmD,EAC9DC,UAAU,EAAE,EACZC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,MAAM;AACrD,SACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,MAAM;GACxD,UAAUH,IAAIK;GACd,WAAWrB,GACT,kBACA,0EACAgB,IAAIK,YACF,yFACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWT,GACT,6DACA,wCACAiB,cACE,6DACH;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWjB,GACT,uCACAiB,aACI,yCACA,wCACJ,qCACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,+FAChB,CAAA;KAEJ,CAAA;IACFP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZD,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACFb,WAAWY,IAAIM,KAAK;IACrB,oBAAC,QAAD;KACE,WAAWtB,GACT,yCACA,oCACAgB,IAAIK,YAAY,mCACjB;eAEAL,IAAII;KACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZM,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACS;KA1EP,YAAYD,IAAIG,QA0ET;GAEhB,EACD,CAAA"}
+{"version":3,"file":"CommandItemList.js","names":["Icon","twMerge","React","CommandItem","renderIcon","IconComponent","CommandItemList","options","selectedValues","multiple","selectionIcon","selectionIconPosition","hasAnyIcon","toggleOption","tabIndex","map","opt","isSelected","includes","value","label","disabled","icon"],"sources":["../../../../../src/ui/components/select-field/subcomponents/CommandItemList.tsx"],"sourcesContent":["import type { IconName } from \"#design-system\";\nimport { Icon } from \"#design-system\";\nimport { twMerge } from \"tailwind-merge\";\nimport React from \"react\";\nimport { CommandItem } from \"../../command/command.js\";\nimport type { SelectProps } from \"../../enum-field/types.js\";\n\ninterface FavoriteOptionsProps {\n  options: SelectProps[\"options\"];\n  selectedValues: string[];\n  multiple?: boolean;\n  selectionIcon: \"auto\" | \"checkmark\";\n  selectionIconPosition: \"left\" | \"right\";\n  hasAnyIcon: boolean;\n  toggleOption: (value: string) => void;\n  tabIndex?: number;\n}\n\nconst renderIcon = (\n  IconComponent:\n    | IconName\n    | React.ComponentType<{ className?: string }>\n    | undefined,\n) => {\n  if (typeof IconComponent === \"string\") {\n    return (\n      <Icon\n        name={IconComponent}\n        size={16}\n        className={twMerge(\"text-gray-700 dark:text-slate-200\")}\n      />\n    );\n  }\n  return (\n    IconComponent && (\n      <IconComponent\n        className={twMerge(\"size-4\", \"text-gray-700 dark:text-slate-200\")}\n      />\n    )\n  );\n};\n\nexport const CommandItemList: React.FC<FavoriteOptionsProps> = ({\n  options = [],\n  selectedValues,\n  multiple,\n  selectionIcon,\n  selectionIconPosition,\n  hasAnyIcon,\n  toggleOption,\n  tabIndex,\n}) => {\n  return (\n    <>\n      {options.map((opt) => {\n        const isSelected = selectedValues.includes(opt.value);\n        return (\n          <CommandItem\n            tabIndex={tabIndex}\n            key={`favorite-${opt.value}`}\n            value={opt.label}\n            onSelect={() => !opt.disabled && toggleOption(opt.value)}\n            disabled={opt.disabled}\n            className={twMerge(\n              \"cursor-pointer\",\n              \"data-[selected=true]:bg-gray-100 dark:data-[selected=true]:bg-slate-500\",\n              opt.disabled &&\n                \"pointer-events-auto! cursor-not-allowed hover:bg-transparent dark:hover:bg-slate-500\",\n            )}\n            role=\"option\"\n            aria-selected={isSelected}\n          >\n            {selectionIcon === \"auto\" &&\n              (multiple ? (\n                <div\n                  className={twMerge(\n                    \"flex size-4 items-center justify-center rounded-md border\",\n                    \"border-gray-700 dark:border-slate-200\",\n                    isSelected &&\n                      \"bg-gray-900 text-gray-50 dark:bg-slate-50 dark:text-slate-900\",\n                  )}\n                >\n                  {isSelected && <Icon name=\"Checkmark\" size={16} />}\n                </div>\n              ) : (\n                <div\n                  className={twMerge(\n                    \"relative size-4 rounded-full border\",\n                    isSelected\n                      ? \"border-gray-900 dark:border-slate-50\"\n                      : \"border-gray-800 dark:border-slate-100\",\n                    \"bg-transparent\",\n                  )}\n                >\n                  {isSelected && (\n                    <div className=\"absolute top-1/2 left-1/2 size-2.5 -translate-1/2 rounded-full bg-gray-900 dark:bg-slate-50\" />\n                  )}\n                </div>\n              ))}\n            {selectionIcon === \"checkmark\" &&\n              !(selectionIconPosition === \"right\" && hasAnyIcon) && (\n                <div className=\"size-4\">\n                  {selectionIconPosition === \"left\" && isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-slate-50\"\n                    />\n                  )}\n                </div>\n              )}\n            {renderIcon(opt.icon)}\n            <span\n              className={twMerge(\n                \"flex-1 truncate text-sm/4 font-normal\",\n                \"text-gray-700 dark:text-slate-200\",\n                opt.disabled && \"text-gray-700 dark:text-slate-200\",\n              )}\n            >\n              {opt.label}\n            </span>\n            {selectionIcon === \"checkmark\" &&\n              selectionIconPosition === \"right\" && (\n                <div className=\"size-4\">\n                  {isSelected && (\n                    <Icon\n                      name=\"Checkmark\"\n                      size={16}\n                      className=\"text-gray-900 dark:text-slate-50\"\n                    />\n                  )}\n                </div>\n              )}\n          </CommandItem>\n        );\n      })}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAkBA,MAAMI,cACJC,kBAIG;AACH,KAAI,OAAOA,kBAAkB,SAC3B,QACE,oBAAC,MAAD;EACE,MAAMA;EACN,MAAM;EACN,WAAWJ,QAAQ,oCAAoC;EACvD,CAAA;AAGN,QACEI,iBACE,oBAAC,eAAD,EACE,WAAWJ,QAAQ,UAAU,oCAAoC,EAEpE,CAAA;;AAIL,MAAaK,mBAAmD,EAC9DC,UAAU,EAAE,EACZC,gBACAC,UACAC,eACAC,uBACAC,YACAC,cACAC,eACI;AACJ,QACE,oBAAA,YAAA,EAAA,UACGP,QAAQQ,KAAKC,QAAQ;EACpB,MAAMC,aAAaT,eAAeU,SAASF,IAAIG,MAAM;AACrD,SACE,qBAAC,aAAD;GACYL;GAEV,OAAOE,IAAII;GACX,gBAAgB,CAACJ,IAAIK,YAAYR,aAAaG,IAAIG,MAAM;GACxD,UAAUH,IAAIK;GACd,WAAWpB,QACT,kBACA,2EACAe,IAAIK,YACF,uFACH;GACD,MAAK;GACL,iBAAeJ;aAbjB;IAeGP,kBAAkB,WAChBD,WACC,oBAAC,OAAD;KACE,WAAWR,QACT,6DACA,yCACAgB,cACE,gEACH;eAEAA,cAAc,oBAAC,MAAD;MAAM,MAAK;MAAY,MAAM;MAAM,CAAA;KAC9C,CAAA,GAEN,oBAAC,OAAD;KACE,WAAWhB,QACT,uCACAgB,aACI,yCACA,yCACJ,iBACD;eAEAA,cACC,oBAAC,OAAD,EAAK,WAAU,+FAChB,CAAA;KAEJ,CAAA;IACFP,kBAAkB,eACjB,EAAEC,0BAA0B,WAAWC,eACrC,oBAAC,OAAD;KAAK,WAAU;eACZD,0BAA0B,UAAUM,cACnC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACFb,WAAWY,IAAIM,KAAK;IACrB,oBAAC,QAAD;KACE,WAAWrB,QACT,yCACA,qCACAe,IAAIK,YAAY,oCACjB;eAEAL,IAAII;KACD,CAAA;IACLV,kBAAkB,eACjBC,0BAA0B,WACxB,oBAAC,OAAD;KAAK,WAAU;eACZM,cACC,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAU;MAEb,CAAA;KAEJ,CAAA;IACS;KA1EP,YAAYD,IAAIG,QA0ET;GAEhB,EACD,CAAA"}

package/dist/ui/components/select-field/use-select-field.d.ts

@@ -1,4 +1,4 @@
-import { C as SelectProps } from "../../../index-BEiWWMW2.js";
+import { C as SelectProps } from "../../../index--hDSfvJT.js";
 import * as react from "react";
 
 //#region src/ui/components/select-field/use-select-field.d.ts

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

@@ -0,0 +1,4 @@
+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";
+import { n as SidebarProps, t as Sidebar } from "../../../sidebar-DOoE4krt.js";
+import { n as useSidebar, t as SidebarProvider } from "../../../sidebar-provider-C2eyz9TL.js";
+export { FlattenedNode, NodeSortComparisonFn, NodeSortOrder, NodeSortType, NodeStatus, Sidebar, SidebarIcon, SidebarNode, SidebarProps, SidebarProvider, useSidebar };

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

@@ -0,0 +1,3 @@
+import { SidebarProvider, useSidebar } from "./subcomponents/sidebar-provider/sidebar-provider.js";
+import { Sidebar } from "./sidebar.js";
+export { Sidebar, SidebarProvider, useSidebar };

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

@@ -0,0 +1,2 @@
+import { n as SidebarProps, t as Sidebar } from "../../../sidebar-DOoE4krt.js";
+export { Sidebar, SidebarProps };

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

@@ -0,0 +1,110 @@
+import { t as Icon } from "../../../icon-C4QOpsdI.js";
+import { triggerEvent } from "./utils.js";
+import { useSidebar } from "./subcomponents/sidebar-provider/sidebar-provider.js";
+import { SidebarContentArea } from "./subcomponents/sidebar-content-area.js";
+import { SidebarHeader } from "./subcomponents/sidebar-header.js";
+import { SidebarPinningArea } from "./subcomponents/sidebar-pinning-area.js";
+import { SidebarSearch } from "./subcomponents/sidebar-search/sidebar-search.js";
+import { useSidebarResize } from "./use-sidebar-resize.js";
+import { useCallback, useEffect } from "react";
+import { twMerge } from "tailwind-merge";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/sidebar.tsx
+/**
+* Sidebar component that provides a collapsible and resizable navigation panel
+* with support for hierarchical data, search, pinning, and custom styling.
+*/
+const Sidebar = ({ activeNodeId, onActiveNodeChange, nodes, sidebarIcon, sidebarTitle, defaultLevel = 1, enableMacros = 0, allowPinning = true, resizable = true, showSearchBar = true, showStatusFilter = false, extraFooterContent, initialWidth = 300, maxWidth, className, handleOnTitleClick, isLoading = false, nodeSortType, nodeSortOrder = "asc" }) => {
+	const { sidebarRef, startResizing, isResizing, isSidebarOpen, handleToggleSidebar } = useSidebarResize({
+		defaultWidth: initialWidth,
+		minWidth: 220,
+		maxWidth
+	});
+	const { pinnedNodePath, setNodes, openLevel, togglePin, syncActiveNodeId, setActiveNodeChangeCallback, nodes: providerNodes, nodeSortType: currentSortType, nodeSortOrder: currentSortOrder } = useSidebar();
+	useEffect(() => {
+		if (nodes) setNodes(nodes, nodeSortType, nodeSortOrder);
+	}, [
+		nodes,
+		setNodes,
+		nodeSortType,
+		nodeSortOrder
+	]);
+	useEffect(() => {
+		if (!nodes && providerNodes.length > 0 && (nodeSortType !== currentSortType || nodeSortOrder !== currentSortOrder)) setNodes(providerNodes, nodeSortType, nodeSortOrder);
+	}, [
+		nodes,
+		providerNodes,
+		setNodes,
+		nodeSortType,
+		nodeSortOrder,
+		currentSortType,
+		currentSortOrder
+	]);
+	useEffect(() => {
+		if (defaultLevel > 1) openLevel(defaultLevel);
+	}, [defaultLevel]);
+	const handleActiveNodeChange = useCallback((node) => {
+		onActiveNodeChange?.(node);
+		triggerEvent("sidebar:change", { node }, sidebarRef.current);
+	}, [onActiveNodeChange, sidebarRef]);
+	useEffect(() => {
+		syncActiveNodeId(activeNodeId);
+	}, [activeNodeId, syncActiveNodeId]);
+	useEffect(() => {
+		setActiveNodeChangeCallback(handleActiveNodeChange);
+	}, [handleActiveNodeChange, setActiveNodeChangeCallback]);
+	useEffect(() => {
+		const hasPinnedNodes = pinnedNodePath.length > 0;
+		if (!allowPinning && hasPinnedNodes) {
+			const lastPinnedNodeId = pinnedNodePath[pinnedNodePath.length - 1].id;
+			togglePin(lastPinnedNodeId);
+		}
+	}, [
+		allowPinning,
+		pinnedNodePath,
+		togglePin
+	]);
+	return /* @__PURE__ */ jsxs("aside", {
+		ref: sidebarRef,
+		style: { width: "min(100%, var(--sidebar-width))" },
+		className: twMerge("group peer relative flex h-svh max-h-screen flex-col bg-gray-50 shadow-lg transition-[width] duration-75 ease-linear dark:bg-slate-600", isResizing && "transition-none", className),
+		children: [isSidebarOpen && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(SidebarHeader, {
+				sidebarTitle,
+				sidebarIcon,
+				enableMacros,
+				handleOnTitleClick
+			}),
+			allowPinning && pinnedNodePath.length > 0 && /* @__PURE__ */ jsx(SidebarPinningArea, {}),
+			/* @__PURE__ */ jsx(SidebarContentArea, {
+				allowPinning,
+				isLoading
+			}),
+			showSearchBar && /* @__PURE__ */ jsx(SidebarSearch, { showStatusFilter }),
+			extraFooterContent && /* @__PURE__ */ jsx("div", {
+				className: "w-full border-t border-gray-300 p-2 dark:border-slate-800",
+				children: extraFooterContent
+			})
+		] }), resizable && /* @__PURE__ */ jsx("div", {
+			className: "group/sidebar-resizer absolute top-0 right-0 h-full w-[10px] translate-x-1/2 cursor-ew-resize select-none",
+			onMouseDown: startResizing,
+			children: /* @__PURE__ */ jsx("div", {
+				className: twMerge("relative h-full w-px translate-x-[5px] transition-colors group-hover/sidebar-resizer:bg-gray-500 dark:group-hover/sidebar-resizer:bg-slate-600", isResizing && "cursor-default bg-blue-500", !isSidebarOpen && "bg-gray-300 dark:bg-slate-600"),
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: twMerge("absolute top-14 right-0 size-4 translate-x-1/2 rounded-full bg-gray-500 dark:bg-slate-900", "opacity-0 transition-opacity group-hover/sidebar-resizer:opacity-100"),
+					onClick: handleToggleSidebar,
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "Caret",
+						size: 16,
+						className: twMerge("min-w-4 text-gray-50 dark:text-slate-500", isSidebarOpen && "-rotate-180")
+					})
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { Sidebar };
+
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":["useCallback","useEffect","twMerge","Icon","SidebarContentArea","SidebarHeader","SidebarPinningArea","useSidebar","SidebarSearch","useSidebarResize","triggerEvent","Sidebar","activeNodeId","onActiveNodeChange","nodes","sidebarIcon","sidebarTitle","defaultLevel","enableMacros","allowPinning","resizable","showSearchBar","showStatusFilter","extraFooterContent","initialWidth","maxWidth","className","handleOnTitleClick","isLoading","nodeSortType","nodeSortOrder","sidebarRef","startResizing","isResizing","isSidebarOpen","handleToggleSidebar","defaultWidth","minWidth","pinnedNodePath","setNodes","openLevel","togglePin","syncActiveNodeId","setActiveNodeChangeCallback","providerNodes","currentSortType","currentSortOrder","length","handleActiveNodeChange","node","current","hasPinnedNodes","lastPinnedNodeId","id","width"],"sources":["../../../../src/ui/components/sidebar/sidebar.tsx"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { Icon } from \"../../../powerhouse/index.js\";\nimport { SidebarContentArea } from \"./subcomponents/sidebar-content-area.js\";\nimport { SidebarHeader } from \"./subcomponents/sidebar-header.js\";\nimport { SidebarPinningArea } from \"./subcomponents/sidebar-pinning-area.js\";\nimport { useSidebar } from \"./subcomponents/sidebar-provider/index.js\";\nimport { SidebarSearch } from \"./subcomponents/sidebar-search/index.js\";\nimport type { NodeSortOrder, NodeSortType, SidebarNode } from \"./types.js\";\nimport { useSidebarResize } from \"./use-sidebar-resize.js\";\nimport { triggerEvent } from \"./utils.js\";\n\nexport interface SidebarProps {\n  /**\n   * The ID of the currently active node\n   */\n  activeNodeId?: string;\n  /**\n   * Callback function to update the active node\n   */\n  onActiveNodeChange?: (newNode: SidebarNode) => void;\n  /**\n   * The nodes to be displayed in the sidebar\n   */\n  nodes?: SidebarNode[];\n  /**\n   * Which level should be shown by default (i.e., level 1).\n   * @default 1 It is 1-indexed.\n   */\n  defaultLevel?: number;\n  /**\n   * Enables the vertical resizing of the sidebar\n   * @default true\n   */\n  resizable?: boolean;\n  /**\n   * Whether pinning functionality is enabled for nodes\n   * @default true\n   */\n  allowPinning?: boolean;\n  /**\n   * Configurable levels (e.g., 4). If its zero, then no buttons are shown (default).\n   * @default 0\n   */\n  enableMacros?: number;\n  /**\n   * Whether to display the search bar in the sidebar\n   * @default true\n   */\n  showSearchBar?: boolean;\n  /**\n   * Whether to display the status filter button in the sidebar. This option is ignored if `showSearchBar` is `false`.\n   * @default false\n   */\n  showStatusFilter?: boolean;\n  /**\n   * The title that appears at the top of the sidebar, providing context or a heading for the hierarchy displayed within it.\n   */\n  sidebarTitle?: string;\n  /**\n   * An optional icon that can be displayed next to the sidebar title or at the top of the sidebar.\n   */\n  sidebarIcon?: React.ReactNode;\n  /**\n   * An optional footer content that can be displayed at the bottom of the sidebar.\n   */\n  extraFooterContent?: React.ReactNode;\n  /**\n   * The initial width of the sidebar.\n   * @default 300\n   */\n  initialWidth?: number;\n  /**\n   * The maximum width of the sidebar.\n   */\n  maxWidth?: number;\n  /**\n   * Optional className for the sidebar container\n   */\n  className?: string;\n\n  /**\n   * Callback function triggered when the sidebar title is clicked.\n   */\n  handleOnTitleClick?: () => void;\n\n  /**\n   * Whether the sidebar is in a loading state, displaying skeleton items\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * The type of sorting to apply to all nodes recursively.\n   * Can be \"alphabetical\", \"natural\", or a custom comparison function.\n   * When undefined, nodes maintain their original order.\n   * Affects all levels of the tree hierarchy.\n   */\n  nodeSortType?: NodeSortType;\n  /**\n   * The order direction for sorting nodes (\"asc\" or \"desc\").\n   * Only applicable when nodeSortType is defined.\n   * @default \"asc\"\n   */\n  nodeSortOrder?: NodeSortOrder;\n}\n\n/**\n * Sidebar component that provides a collapsible and resizable navigation panel\n * with support for hierarchical data, search, pinning, and custom styling.\n */\nexport const Sidebar: React.FC<SidebarProps> = ({\n  activeNodeId,\n  onActiveNodeChange,\n  nodes,\n  sidebarIcon,\n  sidebarTitle,\n  defaultLevel = 1,\n  enableMacros = 0,\n  allowPinning = true,\n  resizable = true,\n  showSearchBar = true,\n  showStatusFilter = false,\n  extraFooterContent,\n  initialWidth = 300,\n  maxWidth,\n  className,\n  handleOnTitleClick,\n  isLoading = false,\n  nodeSortType,\n  nodeSortOrder = \"asc\",\n}) => {\n  const {\n    sidebarRef,\n    startResizing,\n    isResizing,\n    isSidebarOpen,\n    handleToggleSidebar,\n  } = useSidebarResize({\n    defaultWidth: initialWidth,\n    minWidth: 220,\n    maxWidth,\n  });\n\n  const {\n    pinnedNodePath,\n    setNodes,\n    openLevel,\n    togglePin,\n    syncActiveNodeId,\n    setActiveNodeChangeCallback,\n    nodes: providerNodes,\n    nodeSortType: currentSortType,\n    nodeSortOrder: currentSortOrder,\n  } = useSidebar();\n\n  useEffect(() => {\n    if (nodes) {\n      setNodes(nodes, nodeSortType, nodeSortOrder);\n    }\n  }, [nodes, setNodes, nodeSortType, nodeSortOrder]);\n\n  useEffect(() => {\n    if (\n      !nodes &&\n      providerNodes.length > 0 &&\n      (nodeSortType !== currentSortType || nodeSortOrder !== currentSortOrder)\n    ) {\n      setNodes(providerNodes, nodeSortType, nodeSortOrder);\n    }\n  }, [\n    nodes,\n    providerNodes,\n    setNodes,\n    nodeSortType,\n    nodeSortOrder,\n    currentSortType,\n    currentSortOrder,\n  ]);\n\n  // Initialize default expanded level on mount.\n  // openLevel intentionally omitted — it changes every time currentRoots\n  // changes, which would cause an infinite loop.\n  useEffect(() => {\n    if (defaultLevel > 1) {\n      openLevel(defaultLevel);\n    }\n  }, [defaultLevel]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleActiveNodeChange = useCallback(\n    (node: SidebarNode) => {\n      onActiveNodeChange?.(node);\n      triggerEvent(\"sidebar:change\", { node }, sidebarRef.current);\n    },\n    [onActiveNodeChange, sidebarRef],\n  );\n  useEffect(() => {\n    syncActiveNodeId(activeNodeId);\n  }, [activeNodeId, syncActiveNodeId]);\n\n  useEffect(() => {\n    setActiveNodeChangeCallback(handleActiveNodeChange);\n  }, [handleActiveNodeChange, setActiveNodeChangeCallback]);\n\n  useEffect(() => {\n    const hasPinnedNodes = pinnedNodePath.length > 0;\n    if (!allowPinning && hasPinnedNodes) {\n      const lastPinnedNodeId = pinnedNodePath[pinnedNodePath.length - 1].id;\n      togglePin(lastPinnedNodeId);\n    }\n  }, [allowPinning, pinnedNodePath, togglePin]);\n\n  return (\n    <aside\n      ref={sidebarRef}\n      style={{ width: \"min(100%, var(--sidebar-width))\" }}\n      className={twMerge(\n        \"group peer relative flex h-svh max-h-screen flex-col bg-gray-50 shadow-lg transition-[width] duration-75 ease-linear dark:bg-slate-600\",\n        isResizing && \"transition-none\",\n        className,\n      )}\n    >\n      {isSidebarOpen && (\n        <>\n          <SidebarHeader\n            sidebarTitle={sidebarTitle}\n            sidebarIcon={sidebarIcon}\n            enableMacros={enableMacros}\n            handleOnTitleClick={handleOnTitleClick}\n          />\n\n          {allowPinning && pinnedNodePath.length > 0 && <SidebarPinningArea />}\n          <SidebarContentArea\n            allowPinning={allowPinning}\n            isLoading={isLoading}\n          />\n          {showSearchBar && (\n            <SidebarSearch showStatusFilter={showStatusFilter} />\n          )}\n          {extraFooterContent && (\n            <div className=\"w-full border-t border-gray-300 p-2 dark:border-slate-800\">\n              {extraFooterContent}\n            </div>\n          )}\n        </>\n      )}\n\n      {resizable && (\n        <div\n          className=\"group/sidebar-resizer absolute top-0 right-0 h-full w-[10px] translate-x-1/2 cursor-ew-resize select-none\"\n          onMouseDown={startResizing}\n        >\n          <div\n            className={twMerge(\n              \"relative h-full w-px translate-x-[5px] transition-colors group-hover/sidebar-resizer:bg-gray-500 dark:group-hover/sidebar-resizer:bg-slate-600\",\n              isResizing && \"cursor-default bg-blue-500\",\n              !isSidebarOpen && \"bg-gray-300 dark:bg-slate-600\",\n            )}\n          >\n            <button\n              type=\"button\"\n              className={twMerge(\n                \"absolute top-14 right-0 size-4 translate-x-1/2 rounded-full bg-gray-500 dark:bg-slate-900\",\n                \"opacity-0 transition-opacity group-hover/sidebar-resizer:opacity-100\",\n              )}\n              onClick={handleToggleSidebar}\n            >\n              <Icon\n                name=\"Caret\"\n                size={16}\n                className={twMerge(\n                  \"min-w-4 text-gray-50 dark:text-slate-500\",\n                  isSidebarOpen && \"-rotate-180\",\n                )}\n              />\n            </button>\n          </div>\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8GA,MAAaW,WAAmC,EAC9CC,cACAC,oBACAC,OACAC,aACAC,cACAC,eAAe,GACfC,eAAe,GACfC,eAAe,MACfC,YAAY,MACZC,gBAAgB,MAChBC,mBAAmB,OACnBC,oBACAC,eAAe,KACfC,UACAC,WACAC,oBACAC,YAAY,OACZC,cACAC,gBAAgB,YACZ;CACJ,MAAM,EACJC,YACAC,eACAC,YACAC,eACAC,wBACE1B,iBAAiB;EACnB2B,cAAcZ;EACda,UAAU;EACVZ;EACD,CAAC;CAEF,MAAM,EACJa,gBACAC,UACAC,WACAC,WACAC,kBACAC,6BACA7B,OAAO8B,eACPf,cAAcgB,iBACdf,eAAegB,qBACbvC,YAAY;AAEhBN,iBAAgB;AACd,MAAIa,MACFyB,UAASzB,OAAOe,cAAcC,cAAc;IAE7C;EAAChB;EAAOyB;EAAUV;EAAcC;EAAc,CAAC;AAElD7B,iBAAgB;AACd,MACE,CAACa,SACD8B,cAAcG,SAAS,MACtBlB,iBAAiBgB,mBAAmBf,kBAAkBgB,kBAEvDP,UAASK,eAAef,cAAcC,cAAc;IAErD;EACDhB;EACA8B;EACAL;EACAV;EACAC;EACAe;EACAC;EACD,CAAC;AAKF7C,iBAAgB;AACd,MAAIgB,eAAe,EACjBuB,WAAUvB,aAAa;IAExB,CAACA,aAAa,CAAC;CAElB,MAAM+B,yBAAyBhD,aAC5BiD,SAAsB;AACrBpC,uBAAqBoC,KAAK;AAC1BvC,eAAa,kBAAkB,EAAEuC,MAAM,EAAElB,WAAWmB,QAAQ;IAE9D,CAACrC,oBAAoBkB,WACvB,CAAC;AACD9B,iBAAgB;AACdyC,mBAAiB9B,aAAa;IAC7B,CAACA,cAAc8B,iBAAiB,CAAC;AAEpCzC,iBAAgB;AACd0C,8BAA4BK,uBAAuB;IAClD,CAACA,wBAAwBL,4BAA4B,CAAC;AAEzD1C,iBAAgB;EACd,MAAMkD,iBAAiBb,eAAeS,SAAS;AAC/C,MAAI,CAAC5B,gBAAgBgC,gBAAgB;GACnC,MAAMC,mBAAmBd,eAAeA,eAAeS,SAAS,GAAGM;AACnEZ,aAAUW,iBAAiB;;IAE5B;EAACjC;EAAcmB;EAAgBG;EAAU,CAAC;AAE7C,QACE,qBAAC,SAAD;EACE,KAAKV;EACL,OAAO,EAAEuB,OAAO,mCAAmC;EACnD,WAAWpD,QACT,0IACA+B,cAAc,mBACdP,UACD;YAPH,CASGQ,iBACC,qBAAA,YAAA,EAAA,UAAA;GACE,oBAAC,eAAD;IACgBlB;IACDD;IACCG;IACMS;IAAmB,CAAA;GAGxCR,gBAAgBmB,eAAeS,SAAS,KAAK,oBAAC,oBAAD,EAAsB,CAAA;GACpE,oBAAC,oBAAD;IACgB5B;IACHS;IAAU,CAAA;GAEtBP,iBACC,oBAAC,eAAD,EAAiCC,kBAClC,CAAA;GACAC,sBACC,oBAAC,OAAD;IAAK,WAAU;cACZA;IAEJ,CAAA;GAEJ,EAAA,CAAA,EAEAH,aACC,oBAAC,OAAD;GACE,WAAU;GACV,aAAaY;aAEb,oBAAC,OAAD;IACE,WAAW9B,QACT,kJACA+B,cAAc,8BACd,CAACC,iBAAiB,gCACnB;cAED,oBAAC,UAAD;KACE,MAAK;KACL,WAAWhC,QACT,6FACA,uEACD;KACD,SAASiC;eAET,oBAAC,MAAD;MACE,MAAK;MACL,MAAM;MACN,WAAWjC,QACT,4CACAgC,iBAAiB,cAClB;MAAC,CAAA;KAEE,CAAA;IACL,CAAA;GAER,CAAA,CACK"}

package/dist/ui/components/sidebar/subcomponents/sidebar-content-area.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/components/sidebar/subcomponents/sidebar-content-area.d.ts
+interface SidebarContentAreaProps {
+  allowPinning?: boolean;
+  isLoading?: boolean;
+}
+declare const SidebarContentArea: ({
+  allowPinning,
+  isLoading
+}: SidebarContentAreaProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SidebarContentArea };
+//# sourceMappingURL=sidebar-content-area.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content-area.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-content-area.tsx"],"mappings":";;;UAOU,uBAAA;EACR,YAAA;EACA,SAAA;AAAA;AAAA,cAGW,kBAAA;EAAsB,YAAA;EAAA;AAAA,GAGhC,uBAAA,KAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/components/sidebar/subcomponents/sidebar-content-area.js

@@ -0,0 +1,56 @@
+import { t as Icon } from "../../../../icon-C4QOpsdI.js";
+import { SidebarItem } from "./sidebar-item.js";
+import { useSidebar } from "./sidebar-provider/sidebar-provider.js";
+import { SidebarSkeleton } from "./sidebar-skeleton.js";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AutoSizer, List } from "react-virtualized";
+//#region src/ui/components/sidebar/subcomponents/sidebar-content-area.tsx
+const SidebarContentArea = ({ allowPinning, isLoading }) => {
+	const { flattenedNodes, toggleNode, togglePin, searchTerm, searchResults, activeSearchIndex, pinnedNodePath, activeNodeId, virtualListRef, onActiveNodeChange } = useSidebar();
+	const hasPinnedItems = allowPinning && pinnedNodePath.length > 0;
+	const renderNode = ({ index, key, style }) => {
+		const node = flattenedNodes[index];
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			node,
+			toggleNode,
+			togglePin,
+			searchTerm,
+			searchResults,
+			activeSearchIndex,
+			allowPinning: allowPinning ?? false,
+			isActive: activeNodeId === node.id,
+			onChange: onActiveNodeChange,
+			style
+		}, key);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: twMerge("flex flex-1 flex-col gap-1 overflow-y-auto", hasPinnedItems && "pt-0.5"),
+		children: isLoading ? /* @__PURE__ */ jsx(SidebarSkeleton, {}) : flattenedNodes.length === 0 ? /* @__PURE__ */ jsxs("div", {
+			className: "flex max-w-full items-center gap-2 p-2 text-sm/5 text-gray-400 dark:text-slate-400",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "TreeViewSlash",
+				size: 16,
+				className: "min-w-4"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: "This node is empty"
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx(AutoSizer, { children: ({ width, height }) => /* @__PURE__ */ jsx(List, {
+				ref: virtualListRef,
+				className: "p-2",
+				width,
+				height,
+				rowCount: flattenedNodes.length,
+				rowHeight: 40,
+				rowRenderer: renderNode
+			}) })
+		})
+	});
+};
+//#endregion
+export { SidebarContentArea };
+
+//# sourceMappingURL=sidebar-content-area.js.map

package/dist/ui/components/sidebar/subcomponents/sidebar-content-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-content-area.js","names":["AutoSizer","List","twMerge","SidebarItem","useSidebar","SidebarSkeleton","Icon","SidebarContentArea","allowPinning","isLoading","flattenedNodes","toggleNode","togglePin","searchTerm","searchResults","activeSearchIndex","pinnedNodePath","activeNodeId","virtualListRef","onActiveNodeChange","hasPinnedItems","length","renderNode","index","key","style","node","id","width","height"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-content-area.tsx"],"sourcesContent":["import { AutoSizer, List } from \"react-virtualized\";\nimport { twMerge } from \"tailwind-merge\";\nimport { SidebarItem } from \"./sidebar-item.js\";\nimport { useSidebar } from \"./sidebar-provider/index.js\";\nimport { SidebarSkeleton } from \"./sidebar-skeleton.js\";\nimport { Icon } from \"../../../../powerhouse/index.js\";\n\ninterface SidebarContentAreaProps {\n  allowPinning?: boolean;\n  isLoading?: boolean;\n}\n\nexport const SidebarContentArea = ({\n  allowPinning,\n  isLoading,\n}: SidebarContentAreaProps) => {\n  const {\n    flattenedNodes,\n    toggleNode,\n    togglePin,\n    searchTerm,\n    searchResults,\n    activeSearchIndex,\n    pinnedNodePath,\n    activeNodeId,\n    virtualListRef,\n    onActiveNodeChange,\n  } = useSidebar();\n  const hasPinnedItems = allowPinning && pinnedNodePath.length > 0;\n\n  const renderNode = ({\n    index,\n    key,\n    style,\n  }: {\n    index: number;\n    key: string;\n    style: React.CSSProperties;\n  }) => {\n    const node = flattenedNodes[index];\n\n    return (\n      <SidebarItem\n        key={key}\n        node={node}\n        toggleNode={toggleNode}\n        togglePin={togglePin}\n        searchTerm={searchTerm}\n        searchResults={searchResults}\n        activeSearchIndex={activeSearchIndex}\n        allowPinning={allowPinning ?? false}\n        isActive={activeNodeId === node.id}\n        onChange={onActiveNodeChange}\n        style={style}\n      />\n    );\n  };\n\n  return (\n    <div\n      className={twMerge(\n        \"flex flex-1 flex-col gap-1 overflow-y-auto\",\n        hasPinnedItems && \"pt-0.5\",\n      )}\n    >\n      {isLoading ? (\n        <SidebarSkeleton />\n      ) : flattenedNodes.length === 0 ? (\n        <div className=\"flex max-w-full items-center gap-2 p-2 text-sm/5 text-gray-400 dark:text-slate-400\">\n          <Icon name=\"TreeViewSlash\" size={16} className=\"min-w-4\" />\n          <span className=\"truncate\">This node is empty</span>\n        </div>\n      ) : (\n        <div className=\"flex-1 overflow-hidden\">\n          <AutoSizer>\n            {({ width, height }) => (\n              <List\n                ref={virtualListRef}\n                className=\"p-2\"\n                width={width}\n                height={height}\n                rowCount={flattenedNodes.length}\n                rowHeight={32 + 8}\n                rowRenderer={renderNode}\n              />\n            )}\n          </AutoSizer>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAYA,MAAaO,sBAAsB,EACjCC,cACAC,gBAC6B;CAC7B,MAAM,EACJC,gBACAC,YACAC,WACAC,YACAC,eACAC,mBACAC,gBACAC,cACAC,gBACAC,uBACEf,YAAY;CAChB,MAAMgB,iBAAiBZ,gBAAgBQ,eAAeK,SAAS;CAE/D,MAAMC,cAAc,EAClBC,OACAC,KACAC,YAKI;EACJ,MAAMC,OAAOhB,eAAea;AAE5B,SACE,oBAAC,aAAD;GAEQG;GACMf;GACDC;GACCC;GACGC;GACIC;GACnB,cAAcP,gBAAgB;GAC9B,UAAUS,iBAAiBS,KAAKC;GAChC,UAAUR;GACHM;GACP,EAXKD,IAWL;;AAIN,QACE,oBAAC,OAAD;EACE,WAAWtB,QACT,8CACAkB,kBAAkB,SACnB;YAEAX,YACC,oBAAC,iBAAD,EAAmB,CAAA,GACjBC,eAAeW,WAAW,IAC5B,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,MAAD;IAAM,MAAK;IAAgB,MAAM;IAAI,WAAU;IAAS,CAAA,EACxD,oBAAC,QAAD;IAAM,WAAU;cAAW;IAAwB,CAAA,CAC/C;OAEN,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,WAAD,EAAA,WACI,EAAEO,OAAOC,aACT,oBAAC,MAAD;IACE,KAAKX;IACL,WAAU;IACHU;IACCC;IACR,UAAUnB,eAAeW;IACzB,WAAW;IACX,aAAaC;IAEhB,CAAA,EACQ,CAAA;GAEd,CAAA;EACG,CAAA"}

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

@@ -0,0 +1,11 @@
+//#region src/ui/components/sidebar/subcomponents/sidebar-header.d.ts
+interface SidebarHeaderProps {
+  sidebarTitle?: string;
+  sidebarIcon?: React.ReactNode;
+  enableMacros?: number;
+  handleOnTitleClick?: () => void;
+}
+declare const SidebarHeader: React.FC<SidebarHeaderProps>;
+//#endregion
+export { SidebarHeader };
+//# sourceMappingURL=sidebar-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-header.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-header.tsx"],"mappings":";UAGU,kBAAA;EACR,YAAA;EACA,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,YAAA;EACA,kBAAA;AAAA;AAAA,cAGW,aAAA,EAAe,KAAA,CAAM,EAAA,CAAG,kBAAA"}

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

@@ -0,0 +1,45 @@
+import { useSidebar } from "./sidebar-provider/sidebar-provider.js";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/sidebar-header.tsx
+const SidebarHeader = ({ sidebarTitle, sidebarIcon, enableMacros = 0, handleOnTitleClick }) => {
+	const { maxDepth, openLevel } = useSidebar();
+	if (!sidebarTitle && !sidebarIcon && !enableMacros) return null;
+	let titleElement;
+	const baseTitleClasses = "truncate text-sm font-semibold text-gray-700 dark:text-slate-300";
+	if (handleOnTitleClick) titleElement = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: twMerge(baseTitleClasses, "cursor-pointer"),
+		onClick: handleOnTitleClick,
+		children: sidebarTitle
+	});
+	else titleElement = /* @__PURE__ */ jsx("div", {
+		className: baseTitleClasses,
+		children: sidebarTitle
+	});
+	return /* @__PURE__ */ jsxs("header", {
+		className: "flex items-center justify-between gap-2 border-b border-gray-300 bg-gray-50 p-4 dark:border-slate-800 dark:bg-slate-600",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 truncate",
+			children: [sidebarIcon, titleElement]
+		}), enableMacros > 0 && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2 select-none",
+			children: Array.from({ length: Math.min(enableMacros, 4) }).map((_, index) => {
+				const isDisabled = index + 1 > maxDepth;
+				return /* @__PURE__ */ jsx("div", {
+					role: "button",
+					tabIndex: 0,
+					className: twMerge("w-[26px] rounded-lg bg-gray-50 p-1 text-center text-xs text-gray-100 dark:bg-slate-900 dark:text-slate-200", !isDisabled && "hover:bg-gray-100 hover:text-gray-200 dark:hover:bg-slate-600 dark:hover:text-slate-50", isDisabled && "cursor-not-allowed bg-gray-100 text-[#E2E4E7] dark:bg-[#252728] dark:text-slate-500"),
+					onClick: () => {
+						if (!isDisabled) openLevel(index + 1);
+					},
+					children: index + 1
+				}, `macro-${index}`);
+			})
+		})]
+	});
+};
+//#endregion
+export { SidebarHeader };
+
+//# sourceMappingURL=sidebar-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-header.js","names":["twMerge","useSidebar","SidebarHeader","sidebarTitle","sidebarIcon","enableMacros","handleOnTitleClick","maxDepth","openLevel","titleElement","baseTitleClasses","Array","from","length","Math","min","map","_","index","isDisabled"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-header.tsx"],"sourcesContent":["import { twMerge } from \"tailwind-merge\";\nimport { useSidebar } from \"./sidebar-provider/index.js\";\n\ninterface SidebarHeaderProps {\n  sidebarTitle?: string;\n  sidebarIcon?: React.ReactNode;\n  enableMacros?: number;\n  handleOnTitleClick?: () => void;\n}\n\nexport const SidebarHeader: React.FC<SidebarHeaderProps> = ({\n  sidebarTitle,\n  sidebarIcon,\n  enableMacros = 0,\n  handleOnTitleClick,\n}) => {\n  const { maxDepth, openLevel } = useSidebar();\n  if (!sidebarTitle && !sidebarIcon && !enableMacros) {\n    return null;\n  }\n  let titleElement;\n  const baseTitleClasses =\n    \"truncate text-sm font-semibold text-gray-700 dark:text-slate-300\";\n  if (handleOnTitleClick) {\n    titleElement = (\n      <button\n        type=\"button\"\n        className={twMerge(baseTitleClasses, \"cursor-pointer\")}\n        onClick={handleOnTitleClick}\n      >\n        {sidebarTitle}\n      </button>\n    );\n  } else {\n    titleElement = <div className={baseTitleClasses}>{sidebarTitle}</div>;\n  }\n\n  return (\n    <header className=\"flex items-center justify-between gap-2 border-b border-gray-300 bg-gray-50 p-4 dark:border-slate-800 dark:bg-slate-600\">\n      <div className=\"flex items-center gap-2 truncate\">\n        {sidebarIcon}\n        {titleElement}\n      </div>\n\n      {enableMacros > 0 && (\n        <div className=\"flex items-center gap-2 select-none\">\n          {Array.from({ length: Math.min(enableMacros, 4) }).map((_, index) => {\n            const isDisabled = index + 1 > maxDepth;\n\n            return (\n              <div\n                key={`macro-${index}`}\n                role=\"button\"\n                tabIndex={0}\n                className={twMerge(\n                  \"w-[26px] rounded-lg bg-gray-50 p-1 text-center text-xs text-gray-100 dark:bg-slate-900 dark:text-slate-200\",\n                  !isDisabled &&\n                    \"hover:bg-gray-100 hover:text-gray-200 dark:hover:bg-slate-600 dark:hover:text-slate-50\",\n                  isDisabled &&\n                    \"cursor-not-allowed bg-gray-100 text-[#E2E4E7] dark:bg-[#252728] dark:text-slate-500\",\n                )}\n                onClick={() => {\n                  if (!isDisabled) {\n                    openLevel(index + 1);\n                  }\n                }}\n              >\n                {index + 1}\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </header>\n  );\n};\n"],"mappings":";;;;AAUA,MAAaE,iBAA+C,EAC1DC,cACAC,aACAC,eAAe,GACfC,yBACI;CACJ,MAAM,EAAEC,UAAUC,cAAcP,YAAY;AAC5C,KAAI,CAACE,gBAAgB,CAACC,eAAe,CAACC,aACpC,QAAO;CAET,IAAII;CACJ,MAAMC,mBACJ;AACF,KAAIJ,mBACFG,gBACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAWT,QAAQU,kBAAkB,iBAAiB;EACtD,SAASJ;YAERH;EAEJ,CAAA;KAEDM,gBAAe,oBAAC,OAAD;EAAK,WAAWC;YAAmBP;EAAmB,CAAA;AAGvE,QACE,qBAAC,UAAD;EAAQ,WAAU;YAAlB,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACGC,aACAK,aACE;MAEJJ,eAAe,KACd,oBAAC,OAAD;GAAK,WAAU;aACZM,MAAMC,KAAK,EAAEC,QAAQC,KAAKC,IAAIV,cAAc,EAAC,EAAG,CAAC,CAACW,KAAKC,GAAGC,UAAU;IACnE,MAAMC,aAAaD,QAAQ,IAAIX;AAE/B,WACE,oBAAC,OAAD;KAEE,MAAK;KACL,UAAU;KACV,WAAWP,QACT,8GACA,CAACmB,cACC,0FACFA,cACE,sFACH;KACD,eAAe;AACb,UAAI,CAACA,WACHX,WAAUU,QAAQ,EAAE;;eAIvBA,QAAQ;KACL,EAjBC,SAASA,QAiBV;KAER;GAEL,CAAA,CACM"}

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

@@ -0,0 +1,35 @@
+import { s as SidebarNode, t as FlattenedNode } from "../../../../types-CNbvfWjh.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/components/sidebar/subcomponents/sidebar-item.d.ts
+interface SidebarItemProps {
+  node: FlattenedNode;
+  toggleNode?: (nodeId: string) => void;
+  togglePin: (nodeId: string) => void;
+  searchTerm: string;
+  searchResults: SidebarNode[];
+  activeSearchIndex: number;
+  allowPinning: boolean;
+  pinnedMode?: boolean;
+  isPinned?: boolean;
+  isActive?: boolean;
+  style?: React.CSSProperties;
+  onChange?: (node: SidebarNode) => void;
+}
+declare const SidebarItem: ({
+  node,
+  toggleNode,
+  togglePin,
+  searchTerm,
+  searchResults,
+  activeSearchIndex,
+  allowPinning,
+  pinnedMode,
+  isPinned,
+  isActive,
+  style,
+  onChange
+}: SidebarItemProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SidebarItem };
+//# sourceMappingURL=sidebar-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.d.ts","names":[],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-item.tsx"],"mappings":";;;;UAWU,gBAAA;EACR,IAAA,EAAM,aAAA;EACN,UAAA,IAAc,MAAA;EACd,SAAA,GAAY,MAAA;EACZ,UAAA;EACA,aAAA,EAAe,WAAA;EACf,iBAAA;EACA,YAAA;EACA,UAAA;EACA,QAAA;EACA,QAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;EACd,QAAA,IAAY,IAAA,EAAM,WAAA;AAAA;AAAA,cAMP,WAAA;EAAe,IAAA;EAAA,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,YAAA;EAAA,UAAA;EAAA,QAAA;EAAA,QAAA;EAAA,KAAA;EAAA;AAAA,GAazB,gBAAA,KAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,156 @@
+import { a as PinFilled, o as Pin, s as CaretDown, t as Icon } from "../../../../icon-C4QOpsdI.js";
+import { Tooltip, TooltipProvider as Provider } from "../../tooltip/tooltip.js";
+import { NodeStatus } from "../types.js";
+import { useEllipsis } from "../use-ellipsis.js";
+import { StatusIcon } from "./status-icon.js";
+import { cloneElement, forwardRef, useMemo, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/components/sidebar/subcomponents/sidebar-item.tsx
+const TOOLTIP_DELAY = 700;
+const TOOLTIP_DELAY_LONG = 1728e5;
+const SidebarItem = ({ node, toggleNode, togglePin, searchTerm, searchResults, activeSearchIndex, allowPinning, pinnedMode = false, isPinned = false, isActive = false, style, onChange }) => {
+	const paddingLeft = node.depth * 24;
+	const isSearchActive = searchResults.length > 0 && searchResults[activeSearchIndex].id === node.id;
+	const IconComponent = node.isExpanded ? node.expandedIcon ?? node.icon : node.icon;
+	const isDescendenceModified = useMemo(() => {
+		const check = (n) => {
+			if (n.status !== NodeStatus.UNCHANGED && n.status) return true;
+			if (n.children && n.children.length > 0) return n.children.some((child) => check(child));
+			return false;
+		};
+		return check(node);
+	}, [node]);
+	const hasStatus = node.status && node.status !== NodeStatus.UNCHANGED || isDescendenceModified;
+	const computedStyle = {
+		...style,
+		paddingLeft
+	};
+	const ellipsisRef = useRef(null);
+	const hasEllipsis = useEllipsis(ellipsisRef);
+	return /* @__PURE__ */ jsx(Provider, { children: /* @__PURE__ */ jsx(Tooltip, {
+		content: node.title,
+		triggerAsChild: true,
+		side: "bottom",
+		delayDuration: hasEllipsis ? TOOLTIP_DELAY : TOOLTIP_DELAY_LONG,
+		children: /* @__PURE__ */ jsx("div", {
+			style: computedStyle,
+			className: twMerge("group/sidebar-item-wrapper flex w-full items-center", !pinnedMode && "pb-2"),
+			children: /* @__PURE__ */ jsx("div", {
+				tabIndex: 0,
+				"data-testid": "sidebar-item",
+				id: `sidebar-item-${node.id}`,
+				className: twMerge("group/sidebar-item relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-gray-700 select-none hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-900", hasStatus && "pr-6", allowPinning && (hasStatus ? "hover:pr-12" : "hover:pr-6"), isPinned && (hasStatus ? "pr-12" : "pr-6"), isSearchActive && "bg-yellow-100 dark:bg-[#604B0033]", pinnedMode && "after:absolute after:-top-2.5 after:left-[15px] after:h-4 after:w-px after:bg-gray-300 first:group-first/sidebar-item-wrapper:after:hidden hover:bg-gray-50 dark:hover:bg-slate-600", isActive && "bg-gray-200 font-medium text-gray-900 hover:bg-gray-200 dark:bg-slate-900 dark:text-slate-50 dark:hover:bg-slate-900", node.className),
+				onClick: () => {
+					toggleNode?.(node.id);
+					onChange?.(node);
+				},
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex max-w-full items-center gap-2",
+					children: [
+						!pinnedMode && /* @__PURE__ */ jsx("div", {
+							className: "-m-2 -mr-1 h-full rounded-md py-2 pr-1 pl-2 hover:bg-gray-200",
+							onClick: (e) => {
+								e.stopPropagation();
+								toggleNode?.(node.id);
+							},
+							children: /* @__PURE__ */ jsx(CaretDown, {
+								width: "16",
+								height: "16",
+								className: twMerge("min-w-4", node.isExpanded && node.children && node.children.length > 0 ? "" : "-rotate-90", node.children === void 0 || node.children.length === 0 ? "text-gray-300 dark:text-slate-500" : "text-gray-700 dark:text-slate-400")
+							})
+						}),
+						IconComponent ? typeof IconComponent === "string" ? /* @__PURE__ */ jsx(Icon, {
+							name: IconComponent,
+							size: 16,
+							className: "min-w-4"
+						}) : /* @__PURE__ */ cloneElement(IconComponent, { className: "min-w-4 w-4" }) : pinnedMode ? /* @__PURE__ */ jsx(PinnedModeCircleIcon, { isPinned }) : null,
+						/* @__PURE__ */ jsx(RenderTitle, {
+							ref: ellipsisRef,
+							title: node.title,
+							searchTerm,
+							isSearchActive,
+							pinnedMode,
+							className: ""
+						}),
+						allowPinning && /* @__PURE__ */ jsx("div", {
+							className: twMerge("absolute top-1/2 flex -translate-y-1/2 items-center justify-center", hasStatus ? "right-8" : "right-2", isPinned ? "text-gray-700 hover:text-blue-900 dark:text-slate-50 dark:hover:text-blue-900" : "invisible text-gray-300 group-hover/sidebar-item:visible hover:text-gray-700 dark:text-slate-200 dark:hover:text-slate-100"),
+							onClick: (e) => {
+								e.stopPropagation();
+								togglePin(node.id);
+							},
+							children: isPinned ? /* @__PURE__ */ jsx(PinFilled, {
+								width: "16",
+								height: "16"
+							}) : /* @__PURE__ */ jsx(Pin, {
+								width: "16",
+								height: "16"
+							})
+						}),
+						hasStatus && /* @__PURE__ */ jsx("div", {
+							className: twMerge("absolute top-1/2 right-2 flex -translate-y-1/2 items-center justify-center", "text-gray-300 group-hover/sidebar-item:visible hover:text-gray-700 dark:text-slate-600 dark:hover:text-slate-500"),
+							onClick: (e) => {
+								e.stopPropagation();
+								togglePin(node.id);
+							},
+							children: /* @__PURE__ */ jsx(StatusIcon, {
+								status: node.status ?? NodeStatus.UNCHANGED,
+								isDescendenceModified
+							})
+						})
+					]
+				})
+			})
+		})
+	}) });
+};
+const RenderTitle = /* @__PURE__ */ forwardRef(({ title, searchTerm, isSearchActive, pinnedMode, className }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: twMerge("truncate text-sm/5", className),
+		children: searchTerm && title.toLowerCase().includes(searchTerm.toLowerCase()) && !pinnedMode ? (() => {
+			const highlightClass = isSearchActive ? "bg-yellow-300 dark:bg-[#604B00]" : "bg-gray-300 dark:bg-slate-800";
+			const parts = [];
+			let remaining = title;
+			const lowerTerm = searchTerm.toLowerCase();
+			let i = 0;
+			while (remaining.length > 0) {
+				const idx = remaining.toLowerCase().indexOf(lowerTerm);
+				if (idx === -1) {
+					parts.push(remaining);
+					break;
+				}
+				if (idx > 0) parts.push(remaining.slice(0, idx));
+				parts.push(/* @__PURE__ */ jsx("span", {
+					className: highlightClass,
+					children: remaining.slice(idx, idx + searchTerm.length)
+				}, i++));
+				remaining = remaining.slice(idx + searchTerm.length);
+			}
+			return /* @__PURE__ */ jsx(Fragment$1, { children: parts });
+		})() : title
+	});
+});
+RenderTitle.displayName = "RenderTitle";
+const PinnedModeCircleIcon = ({ isPinned }) => /* @__PURE__ */ jsxs("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	className: "min-w-4",
+	children: [/* @__PURE__ */ jsx("rect", {
+		width: "16",
+		height: "16",
+		rx: "6.4",
+		fill: "transparent"
+	}), /* @__PURE__ */ jsx("path", {
+		d: "M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z",
+		fill: "currentColor",
+		className: isPinned ? "text-gray-500 dark:text-slate-500" : "text-gray-300 dark:text-slate-300"
+	})]
+});
+//#endregion
+export { SidebarItem };
+
+//# sourceMappingURL=sidebar-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.js","names":["cloneElement","forwardRef","useMemo","useRef","twMerge","CaretDown","Pin","PinFilled","Tooltip","TooltipProvider","NodeStatus","useEllipsis","StatusIcon","Icon","TOOLTIP_DELAY","TOOLTIP_DELAY_LONG","SidebarItem","node","toggleNode","togglePin","searchTerm","searchResults","activeSearchIndex","allowPinning","pinnedMode","isPinned","isActive","style","onChange","paddingLeft","depth","isSearchActive","length","id","IconComponent","isExpanded","expandedIcon","icon","isDescendenceModified","check","n","status","UNCHANGED","children","some","child","hasStatus","computedStyle","ellipsisRef","hasEllipsis","title","className","e","stopPropagation","undefined","RenderTitle","ref","toLowerCase","includes","highlightClass","parts","remaining","lowerTerm","i","idx","indexOf","push","slice","displayName","PinnedModeCircleIcon"],"sources":["../../../../../src/ui/components/sidebar/subcomponents/sidebar-item.tsx"],"sourcesContent":["import { cloneElement, forwardRef, useMemo, useRef } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport CaretDown from \"../../../../powerhouse/components/icon-components/CaretDown.js\";\nimport Pin from \"../../../../powerhouse/components/icon-components/Pin.js\";\nimport PinFilled from \"../../../../powerhouse/components/icon-components/PinFilled.js\";\nimport { Tooltip, TooltipProvider } from \"../../tooltip/tooltip.js\";\nimport { type FlattenedNode, NodeStatus, type SidebarNode } from \"../types.js\";\nimport { useEllipsis } from \"../use-ellipsis.js\";\nimport { StatusIcon } from \"./status-icon.js\";\nimport { Icon } from \"../../../../powerhouse/index.js\";\n\ninterface SidebarItemProps {\n  node: FlattenedNode;\n  toggleNode?: (nodeId: string) => void;\n  togglePin: (nodeId: string) => void;\n  searchTerm: string;\n  searchResults: SidebarNode[];\n  activeSearchIndex: number;\n  allowPinning: boolean;\n  pinnedMode?: boolean;\n  isPinned?: boolean;\n  isActive?: boolean;\n  style?: React.CSSProperties;\n  onChange?: (node: SidebarNode) => void;\n}\n\nconst TOOLTIP_DELAY = 700;\nconst TOOLTIP_DELAY_LONG = 172800000; // 2 days to simulate no tooltip\n\nexport const SidebarItem = ({\n  node,\n  toggleNode,\n  togglePin,\n  searchTerm,\n  searchResults,\n  activeSearchIndex,\n  allowPinning,\n  pinnedMode = false,\n  isPinned = false,\n  isActive = false,\n  style,\n  onChange,\n}: SidebarItemProps) => {\n  const paddingLeft = node.depth * 24;\n  const isSearchActive =\n    searchResults.length > 0 && searchResults[activeSearchIndex].id === node.id;\n  const IconComponent = node.isExpanded\n    ? (node.expandedIcon ?? node.icon)\n    : node.icon;\n  const isDescendenceModified = useMemo(() => {\n    const check = (n: SidebarNode): boolean => {\n      // Check current node's status first\n      if (n.status !== NodeStatus.UNCHANGED && n.status) {\n        return true;\n      }\n\n      // Then recursively check all children\n      if (n.children && n.children.length > 0) {\n        return n.children.some((child) => check(child));\n      }\n\n      return false;\n    };\n\n    return check(node);\n  }, [node]);\n  const hasStatus =\n    (node.status && node.status !== NodeStatus.UNCHANGED) ||\n    isDescendenceModified;\n\n  const computedStyle = { ...style, paddingLeft };\n\n  // Check if the title has ellipsis to determine if the tooltip should be delayed\n  const ellipsisRef = useRef<HTMLDivElement | null>(null);\n  const hasEllipsis = useEllipsis(ellipsisRef);\n\n  return (\n    <TooltipProvider>\n      <Tooltip\n        content={node.title}\n        triggerAsChild\n        side=\"bottom\"\n        delayDuration={hasEllipsis ? TOOLTIP_DELAY : TOOLTIP_DELAY_LONG}\n      >\n        <div\n          style={computedStyle}\n          className={twMerge(\n            \"group/sidebar-item-wrapper flex w-full items-center\",\n            !pinnedMode && \"pb-2\",\n          )}\n        >\n          <div\n            tabIndex={0}\n            data-testid=\"sidebar-item\"\n            id={`sidebar-item-${node.id}`}\n            className={twMerge(\n              \"group/sidebar-item relative flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-gray-700 select-none hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-900\",\n              hasStatus && \"pr-6\",\n              allowPinning && (hasStatus ? \"hover:pr-12\" : \"hover:pr-6\"),\n              isPinned && (hasStatus ? \"pr-12\" : \"pr-6\"),\n              isSearchActive && \"bg-yellow-100 dark:bg-[#604B0033]\",\n              // line between pinned items\n              pinnedMode &&\n                \"after:absolute after:-top-2.5 after:left-[15px] after:h-4 after:w-px after:bg-gray-300 first:group-first/sidebar-item-wrapper:after:hidden hover:bg-gray-50 dark:hover:bg-slate-600\",\n              isActive &&\n                \"bg-gray-200 font-medium text-gray-900 hover:bg-gray-200 dark:bg-slate-900 dark:text-slate-50 dark:hover:bg-slate-900\",\n              node.className,\n            )}\n            onClick={() => {\n              toggleNode?.(node.id);\n              onChange?.(node);\n            }}\n          >\n            <div className=\"flex max-w-full items-center gap-2\">\n              {!pinnedMode && (\n                <div\n                  className=\"-m-2 -mr-1 h-full rounded-md py-2 pr-1 pl-2 hover:bg-gray-200\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    toggleNode?.(node.id);\n                  }}\n                >\n                  <CaretDown\n                    width=\"16\"\n                    height=\"16\"\n                    className={twMerge(\n                      \"min-w-4\",\n                      node.isExpanded &&\n                        node.children &&\n                        node.children.length > 0\n                        ? \"\"\n                        : \"-rotate-90\",\n                      node.children === undefined || node.children.length === 0\n                        ? \"text-gray-300 dark:text-slate-500\"\n                        : \"text-gray-700 dark:text-slate-400\",\n                    )}\n                  />\n                </div>\n              )}\n\n              {IconComponent ? (\n                typeof IconComponent === \"string\" ? (\n                  <Icon name={IconComponent} size={16} className=\"min-w-4\" />\n                ) : (\n                  // @ts-expect-error -- this is a workaround\n                  cloneElement(IconComponent, { className: \"min-w-4 w-4\" })\n                )\n              ) : pinnedMode ? (\n                <PinnedModeCircleIcon isPinned={isPinned} />\n              ) : null}\n\n              <RenderTitle\n                ref={ellipsisRef}\n                title={node.title}\n                searchTerm={searchTerm}\n                isSearchActive={isSearchActive}\n                pinnedMode={pinnedMode}\n                className=\"\"\n              />\n\n              {allowPinning && (\n                <div\n                  className={twMerge(\n                    \"absolute top-1/2 flex -translate-y-1/2 items-center justify-center\",\n                    hasStatus ? \"right-8\" : \"right-2\",\n                    isPinned\n                      ? \"text-gray-700 hover:text-blue-900 dark:text-slate-50 dark:hover:text-blue-900\"\n                      : \"invisible text-gray-300 group-hover/sidebar-item:visible hover:text-gray-700 dark:text-slate-200 dark:hover:text-slate-100\",\n                  )}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    togglePin(node.id);\n                  }}\n                >\n                  {isPinned ? (\n                    <PinFilled width=\"16\" height=\"16\" />\n                  ) : (\n                    <Pin width=\"16\" height=\"16\" />\n                  )}\n                </div>\n              )}\n              {hasStatus && (\n                <div\n                  className={twMerge(\n                    \"absolute top-1/2 right-2 flex -translate-y-1/2 items-center justify-center\",\n                    \"text-gray-300 group-hover/sidebar-item:visible hover:text-gray-700 dark:text-slate-600 dark:hover:text-slate-500\",\n                  )}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    togglePin(node.id);\n                  }}\n                >\n                  <StatusIcon\n                    status={node.status ?? NodeStatus.UNCHANGED}\n                    isDescendenceModified={isDescendenceModified}\n                  />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n\nconst RenderTitle = forwardRef<\n  HTMLDivElement,\n  {\n    title: string;\n    searchTerm: string;\n    isSearchActive: boolean;\n    pinnedMode: boolean;\n    className?: string;\n  }\n>(({ title, searchTerm, isSearchActive, pinnedMode, className }, ref) => {\n  return (\n    <div ref={ref} className={twMerge(\"truncate text-sm/5\", className)}>\n      {searchTerm &&\n      title.toLowerCase().includes(searchTerm.toLowerCase()) &&\n      !pinnedMode\n        ? (() => {\n            const highlightClass = isSearchActive\n              ? \"bg-yellow-300 dark:bg-[#604B00]\"\n              : \"bg-gray-300 dark:bg-slate-800\";\n            const parts: React.ReactNode[] = [];\n            let remaining = title;\n            const lowerTerm = searchTerm.toLowerCase();\n            let i = 0;\n            while (remaining.length > 0) {\n              const idx = remaining.toLowerCase().indexOf(lowerTerm);\n              if (idx === -1) {\n                parts.push(remaining);\n                break;\n              }\n              if (idx > 0) parts.push(remaining.slice(0, idx));\n              parts.push(\n                <span key={i++} className={highlightClass}>\n                  {remaining.slice(idx, idx + searchTerm.length)}\n                </span>,\n              );\n              remaining = remaining.slice(idx + searchTerm.length);\n            }\n            return <>{parts}</>;\n          })()\n        : title}\n    </div>\n  );\n});\n\nRenderTitle.displayName = \"RenderTitle\";\n\nconst PinnedModeCircleIcon = ({ isPinned }: { isPinned: boolean }) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    className=\"min-w-4\"\n  >\n    <rect width=\"16\" height=\"16\" rx=\"6.4\" fill=\"transparent\" />\n    <path\n      d=\"M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z\"\n      fill=\"currentColor\"\n      className={\n        isPinned\n          ? \"text-gray-500 dark:text-slate-500\"\n          : \"text-gray-300 dark:text-slate-300\"\n      }\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;AA0BA,MAAMc,gBAAgB;AACtB,MAAMC,qBAAqB;AAE3B,MAAaC,eAAe,EAC1BC,MACAC,YACAC,WACAC,YACAC,eACAC,mBACAC,cACAC,aAAa,OACbC,WAAW,OACXC,WAAW,OACXC,OACAC,eACsB;CACtB,MAAMC,cAAcZ,KAAKa,QAAQ;CACjC,MAAMC,iBACJV,cAAcW,SAAS,KAAKX,cAAcC,mBAAmBW,OAAOhB,KAAKgB;CAC3E,MAAMC,gBAAgBjB,KAAKkB,aACtBlB,KAAKmB,gBAAgBnB,KAAKoB,OAC3BpB,KAAKoB;CACT,MAAMC,wBAAwBpC,cAAc;EAC1C,MAAMqC,SAASC,MAA4B;AAEzC,OAAIA,EAAEC,WAAW/B,WAAWgC,aAAaF,EAAEC,OACzC,QAAO;AAIT,OAAID,EAAEG,YAAYH,EAAEG,SAASX,SAAS,EACpC,QAAOQ,EAAEG,SAASC,MAAMC,UAAUN,MAAMM,MAAM,CAAC;AAGjD,UAAO;;AAGT,SAAON,MAAMtB,KAAK;IACjB,CAACA,KAAK,CAAC;CACV,MAAM6B,YACH7B,KAAKwB,UAAUxB,KAAKwB,WAAW/B,WAAWgC,aAC3CJ;CAEF,MAAMS,gBAAgB;EAAE,GAAGpB;EAAOE;EAAa;CAG/C,MAAMmB,cAAc7C,OAA8B,KAAK;CACvD,MAAM8C,cAActC,YAAYqC,YAAY;AAE5C,QACE,oBAAC,UAAD,EAAA,UACE,oBAAC,SAAD;EACE,SAAS/B,KAAKiC;EACd,gBAAA;EACA,MAAK;EACL,eAAeD,cAAcnC,gBAAgBC;YAE7C,oBAAC,OAAD;GACE,OAAOgC;GACP,WAAW3C,QACT,uDACA,CAACoB,cAAc,OAChB;aAED,oBAAC,OAAD;IACE,UAAU;IACV,eAAY;IACZ,IAAI,gBAAgBP,KAAKgB;IACzB,WAAW7B,QACT,4LACA0C,aAAa,QACbvB,iBAAiBuB,YAAY,gBAAgB,eAC7CrB,aAAaqB,YAAY,UAAU,SACnCf,kBAAkB,qCAElBP,cACE,uLACFE,YACE,wHACFT,KAAKkC,UACN;IACD,eAAe;AACbjC,kBAAaD,KAAKgB,GAAG;AACrBL,gBAAWX,KAAK;;cAGlB,qBAAC,OAAD;KAAK,WAAU;eAAf;MACG,CAACO,cACA,oBAAC,OAAD;OACE,WAAU;OACV,UAAU4B,MAAM;AACdA,UAAEC,iBAAiB;AACnBnC,qBAAaD,KAAKgB,GAAG;;iBAGvB,oBAAC,WAAD;QACE,OAAM;QACN,QAAO;QACP,WAAW7B,QACT,WACAa,KAAKkB,cACHlB,KAAK0B,YACL1B,KAAK0B,SAASX,SAAS,IACrB,KACA,cACJf,KAAK0B,aAAaW,KAAAA,KAAarC,KAAK0B,SAASX,WAAW,IACpD,sCACA,oCACL;QAAC,CAAA;OAGP,CAAA;MAEAE,gBACC,OAAOA,kBAAkB,WACvB,oBAAC,MAAD;OAAM,MAAMA;OAAe,MAAM;OAAI,WAAU;OAAY,CAAA,GAG3DlC,6BAAakC,eAAe,EAAEiB,WAAW,eAAe,CAAC,GAEzD3B,aACF,oBAAC,sBAAD,EAAgCC,UAAY,CAAA,GAC1C;MAEJ,oBAAC,aAAD;OACE,KAAKuB;OACL,OAAO/B,KAAKiC;OACA9B;OACIW;OACJP;OACZ,WAAU;OAAE,CAAA;MAGbD,gBACC,oBAAC,OAAD;OACE,WAAWnB,QACT,sEACA0C,YAAY,YAAY,WACxBrB,WACI,kFACA,6HACL;OACD,UAAU2B,MAAM;AACdA,UAAEC,iBAAiB;AACnBlC,kBAAUF,KAAKgB,GAAG;;iBAGnBR,WACC,oBAAC,WAAD;QAAW,OAAM;QAAK,QAAO;QAAO,CAAA,GAEpC,oBAAC,KAAD;QAAK,OAAM;QAAK,QAAO;QACxB,CAAA;OAEJ,CAAA;MACAqB,aACC,oBAAC,OAAD;OACE,WAAW1C,QACT,8EACA,mHACD;OACD,UAAUgD,MAAM;AACdA,UAAEC,iBAAiB;AACnBlC,kBAAUF,KAAKgB,GAAG;;iBAGpB,oBAAC,YAAD;QACE,QAAQhB,KAAKwB,UAAU/B,WAAWgC;QACXJ;QAAsB,CAAA;OAGlD,CAAA;MACE;;IACF,CAAA;GACF,CAAA;EACE,CAAA,EACO,CAAA;;AAItB,MAAMiB,cAActD,4BASjB,EAAEiD,OAAO9B,YAAYW,gBAAgBP,YAAY2B,aAAaK,QAAQ;AACvE,QACE,oBAAC,OAAD;EAAUA;EAAK,WAAWpD,QAAQ,sBAAsB+C,UAAU;YAC/D/B,cACD8B,MAAMO,aAAa,CAACC,SAAStC,WAAWqC,aAAa,CAAC,IACtD,CAACjC,oBACU;GACL,MAAMmC,iBAAiB5B,iBACnB,oCACA;GACJ,MAAM6B,QAA2B,EAAE;GACnC,IAAIC,YAAYX;GAChB,MAAMY,YAAY1C,WAAWqC,aAAa;GAC1C,IAAIM,IAAI;AACR,UAAOF,UAAU7B,SAAS,GAAG;IAC3B,MAAMgC,MAAMH,UAAUJ,aAAa,CAACQ,QAAQH,UAAU;AACtD,QAAIE,QAAQ,IAAI;AACdJ,WAAMM,KAAKL,UAAU;AACrB;;AAEF,QAAIG,MAAM,EAAGJ,OAAMM,KAAKL,UAAUM,MAAM,GAAGH,IAAI,CAAC;AAChDJ,UAAMM,KACJ,oBAAC,QAAD;KAAgB,WAAWP;eACxBE,UAAUM,MAAMH,KAAKA,MAAM5C,WAAWY,OAAO;KAElD,EAHa+B,IAGb,CAAC;AACDF,gBAAYA,UAAUM,MAAMH,MAAM5C,WAAWY,OAAO;;AAEtD,UAAO,oBAAA,YAAA,EAAA,UAAG4B,OAAS,CAAA;MACjB,GACJV;EACA,CAAA;EAER;AAEFK,YAAYa,cAAc;AAE1B,MAAMC,wBAAwB,EAAE5C,eAC9B,qBAAC,OAAD;CACE,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,OAAM;CACN,WAAU;WANZ,CAQE,oBAAC,QAAD;EAAM,OAAM;EAAK,QAAO;EAAK,IAAG;EAAM,MAAK;EAAa,CAAA,EACxD,oBAAC,QAAD;EACE,GAAE;EACF,MAAK;EACL,WACEA,WACI,sCACA;EACL,CAAA,CAGN"}

package/dist/ui/components/sidebar/subcomponents/sidebar-pinning-area.d.ts

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

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

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