@brainfish-ai/components 0.26.0 → 0.26.1

package/dist/esm/chunks/sidebar.BamKohb5.js

@@ -1,803 +0,0 @@
-import * as React from 'react';
-import { ScrollArea } from '../components/ui/scroll-area.js';
-import { c as cn } from './utils.Cwtlq8dh.js';
-import { ArrowBendUpLeft, X, MagnifyingGlass, Folder, FolderOpen, FolderDashed, DotsThree, Plus, FileDashed, File, Lightning, Article } from '@phosphor-icons/react';
-import { B as Button } from './button.DQL6gCAt.js';
-import { useToggle, useDebounceValue } from 'usehooks-ts';
-import { Input } from '../components/ui/input.js';
-import { TreeStateContext, Button as Button$1, useTreeData, useDragAndDrop, DropIndicator, Tree, TreeItem, TreeItemContent, Collection } from 'react-aria-components';
-import { ButtonGroup } from '../components/ui/button-group.js';
-import { Spinner } from '../components/ui/spinner.js';
-import { u as useSubstringFilter } from './hooks.BWVaVAT-.js';
-
-const SidebarContext = React.createContext(null);
-function SidebarProvider({
-  collapsed,
-  ItemLinkComponent: ItemLinkComponent2,
-  activeArticleId,
-  onSelectArticle,
-  onExpandArticle,
-  onSearchArticles,
-  onAddArticle,
-  onMoreActions,
-  canMoveArticle,
-  onMoveArticle,
-  children
-}) {
-  const [isSearching, setIsSearching] = React.useState(false);
-  const [searchValue, setSearchValue] = React.useState("");
-  const [lastSelectedArticleId, setLastSelectedArticleId] = React.useState(null);
-  const handleSearchArticles = React.useCallback(
-    (value) => {
-      const trimmedValue = value.trim();
-      setIsSearching(trimmedValue !== "");
-      onSearchArticles?.(value);
-    },
-    [onSearchArticles]
-  );
-  const contextValue = React.useMemo(
-    () => ({
-      collapsed,
-      ItemLinkComponent: ItemLinkComponent2,
-      activeArticleId,
-      onSearchArticles,
-      onSelectArticle,
-      onExpandArticle,
-      onAddArticle,
-      onMoreActions,
-      canMoveArticle,
-      onMoveArticle,
-      isSearching,
-      searchValue,
-      setSearchValue,
-      lastSelectedArticleId,
-      setLastSelectedArticleId,
-      handleSearchArticles
-    }),
-    [
-      isSearching,
-      searchValue,
-      lastSelectedArticleId,
-      collapsed,
-      ItemLinkComponent2,
-      activeArticleId,
-      onSelectArticle,
-      onExpandArticle,
-      onSearchArticles,
-      onAddArticle,
-      onMoreActions,
-      canMoveArticle,
-      onMoveArticle,
-      handleSearchArticles
-    ]
-  );
-  return /* @__PURE__ */ React.createElement(SidebarContext.Provider, { value: contextValue }, children);
-}
-function useSidebar() {
-  const sidebarContext = React.useContext(SidebarContext);
-  if (!sidebarContext) throw new Error("useSidebar must be used within SidebarProvider");
-  return sidebarContext;
-}
-
-function AppNav({ className, items, activeId, showBack, onBack }) {
-  const { collapsed, ItemLinkComponent } = useSidebar();
-  const hasBack = !!showBack && !!onBack;
-  return /* @__PURE__ */ React.createElement("nav", { className: cn("flex flex-col gap-2", className), "aria-label": "App navigation" }, hasBack && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "link",
-      className: cn("py-2 text-base text-default w-full mx-4", collapsed ? "justify-center" : "justify-start"),
-      size: "icon",
-      onClick: onBack
-    },
-    /* @__PURE__ */ React.createElement(ArrowBendUpLeft, { "aria-hidden": "true" }),
-    /* @__PURE__ */ React.createElement("span", { className: cn(collapsed && "sr-only") }, "back to Brainfish")
-  ), /* @__PURE__ */ React.createElement(ScrollArea, { className: "min-h-0 max-h-[calc(100dvh-var(--header-nav-height)-5rem)]" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2 mx-4" }, items?.map((item) => /* @__PURE__ */ React.createElement(
-    ItemLinkComponent,
-    {
-      key: item.id,
-      className: cn(
-        "flex p-2 rounded-lg gap-1 text-base text-default items-center hover:text-primary-foreground focus:text-primary-foreground",
-        item.id === activeId ? "bg-primary text-primary-foreground font-bold" : "hover:bg-lime-100 focus:bg-lime-100"
-      ),
-      href: item.href,
-      "data-sidebar-item-id": item.id,
-      "data-sidebar-item-type": "app",
-      "data-sidebar-app-nav-item-selected": item.id === activeId
-    },
-    item.Icon ? /* @__PURE__ */ React.createElement(item.Icon, { weight: item.id === activeId ? "fill" : "regular", size: 16 }) : null,
-    /* @__PURE__ */ React.createElement("span", { className: cn("transition-opacity duration-200", collapsed && "opacity-0 sr-only") }, item.label)
-  )))));
-}
-
-function ArticleSearch() {
-  const { handleSearchArticles, searchValue, setSearchValue } = useSidebar();
-  const [searchInteracted, , setSearchInteracted] = useToggle(false);
-  const searchInputRef = React.useRef(null);
-  React.useEffect(() => {
-    if (searchInteracted) handleSearchArticles?.(searchValue);
-  }, [searchValue, handleSearchArticles, searchInteracted]);
-  return /* @__PURE__ */ React.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React.createElement(
-    Input,
-    {
-      ref: searchInputRef,
-      className: "h-auto text-subtlest border-border-subtle",
-      startIcon: MagnifyingGlass,
-      endIcon: searchValue ? X : void 0,
-      onEndIconClick: () => {
-        setSearchValue("");
-        handleSearchArticles?.("");
-      },
-      value: searchValue,
-      onChange: (e) => {
-        const value = e.target.value;
-        if (!searchInteracted) {
-          setSearchInteracted(true);
-        }
-        setSearchValue(value);
-        if (value.trim() === "") {
-          handleSearchArticles("");
-          setSearchInteracted(false);
-        }
-      },
-      placeholder: "Find an article",
-      "aria-label": "Find an article",
-      type: "search"
-    }
-  ));
-}
-
-function FolderSlotButton({ children }) {
-  return /* @__PURE__ */ React.createElement(Button$1, { slot: "chevron", className: "relative z-30 flex p-0" }, /* @__PURE__ */ React.createElement("span", { className: "relative inline-flex size-3 items-center justify-center" }, children));
-}
-function ArticleItem({
-  item,
-  hasChildItems,
-  isSelected,
-  isExpanded,
-  ItemLinkComponent: ItemLinkComponent2,
-  onAddArticle,
-  isAddingArticle,
-  isLoadingChildren,
-  onMoreActions,
-  level
-}) {
-  const { isSearching } = useSidebar();
-  const treeState = React.useContext(TreeStateContext);
-  const shouldPreventNavigation = Boolean(isSelected);
-  const handleAddClick = (e) => {
-    e.stopPropagation();
-    onAddArticle?.(item.value.id);
-  };
-  const handleMoreClick = (e) => {
-    e.stopPropagation();
-    onMoreActions?.(item.value.id);
-  };
-  const handleItemClick = (e) => {
-    if (shouldPreventNavigation) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-    if (hasChildItems && treeState) {
-      treeState.toggleKey(item.key);
-    }
-  };
-  const showActions = !!(onAddArticle && !isAddingArticle || onMoreActions);
-  const isDraft = item.value.status === "draft";
-  let statusLabel;
-  switch (item.value.status) {
-    case "draft":
-      statusLabel = "(draft)";
-      break;
-    case "unpublished":
-      statusLabel = "(unpublished changes)";
-      break;
-    default:
-      statusLabel = "";
-  }
-  const folderIcon = /* @__PURE__ */ React.createElement(FolderSlotButton, null, /* @__PURE__ */ React.createElement(
-    Folder,
-    {
-      "aria-hidden": "true",
-      weight: "fill",
-      className: cn(
-        "absolute size-3 transition-opacity duration-200 ease-out",
-        isExpanded ? "opacity-0" : "opacity-100"
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    FolderOpen,
-    {
-      "aria-hidden": "true",
-      weight: "fill",
-      className: cn(
-        "absolute size-3 transition-opacity duration-200 ease-out",
-        isExpanded ? "opacity-100" : "opacity-0"
-      )
-    }
-  ));
-  const folderWithChangesIcon = /* @__PURE__ */ React.createElement(FolderSlotButton, null, /* @__PURE__ */ React.createElement(
-    FolderDashed,
-    {
-      "aria-hidden": "true",
-      weight: "fill",
-      className: cn(
-        "absolute size-3 transition-opacity duration-200 ease-out",
-        isExpanded ? "opacity-0" : "opacity-100"
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    FolderOpen,
-    {
-      "aria-hidden": "true",
-      weight: "fill",
-      className: cn(
-        "absolute size-3 transition-opacity duration-200 ease-out",
-        isExpanded ? "opacity-100" : "opacity-0"
-      )
-    }
-  ));
-  const discoveryIconContent = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Knowledge Discovery"), /* @__PURE__ */ React.createElement(Lightning, { "aria-hidden": "true", weight: "fill", className: "size-3 shrink-0 text-blue-600" }));
-  const discoveryIcon = hasChildItems ? /* @__PURE__ */ React.createElement(FolderSlotButton, null, /* @__PURE__ */ React.createElement("span", { className: "text-blue-600" }, discoveryIconContent)) : /* @__PURE__ */ React.createElement("span", { className: "flex size-3 shrink-0 items-center justify-center text-blue-600" }, discoveryIconContent);
-  const fileIcon = /* @__PURE__ */ React.createElement("span", { className: "flex size-3 shrink-0 items-center justify-center" }, /* @__PURE__ */ React.createElement(File, { "aria-hidden": "true", className: "size-3" }));
-  const fileWithChangesIcon = /* @__PURE__ */ React.createElement("span", { className: "flex size-3 shrink-0 items-center justify-center" }, /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Unpublished Changes"), /* @__PURE__ */ React.createElement(FileDashed, { "aria-hidden": "true", className: "size-3" }));
-  const loadingFolderIcon = /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: "flex size-3 shrink-0 items-center justify-center",
-      role: "status",
-      "aria-label": `Loading nested articles for ${item.value.label}`
-    },
-    /* @__PURE__ */ React.createElement(Spinner, { "aria-hidden": "true", className: "size-3 text-current" }),
-    /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Loading nested articles for ", item.value.label)
-  );
-  const renderStatusIcon = (status, hasChildItems2) => {
-    if (status === "discovery") {
-      return discoveryIcon;
-    }
-    const hasChanges = status === "unpublished" || status === "draft";
-    if (hasChildItems2) {
-      return hasChanges ? folderWithChangesIcon : folderIcon;
-    } else {
-      return hasChanges ? fileWithChangesIcon : fileIcon;
-    }
-  };
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: { ["--line-offset"]: "0.875rem" },
-      "aria-busy": isLoadingChildren || void 0,
-      className: cn(
-        "group relative flex items-center gap-1 rounded-md py-1 pl-1 ml-[calc((var(--tree-item-level)-1)*var(--line-offset))] pr-4 h-9",
-        isDraft && "text-subtlest italic",
-        isSelected ? "bg-lime-100 text-primary-foreground font-bold after:absolute after:-right-0.5 after:top-1/2 after:h-1/2 after:w-1 after:-translate-y-1/2 after:bg-lime-400" : "hover:bg-dark-200 hover:text-accent-foreground"
-      )
-    },
-    Array.from({ length: level - 1 }, (_, i) => /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        key: `${item.value.label}-${i + 1}`,
-        style: { ["--item-line-level"]: i + 1 },
-        className: "absolute w-[1px] bg-dark-400 -top-2 h-9 left-[calc(-4px-var(--line-offset)*(var(--item-line-level)-1))]",
-        "aria-hidden": true
-      }
-    )),
-    /* @__PURE__ */ React.createElement(Button$1, { slot: "drag", className: "sr-only" }, "Drag ", item.value.label),
-    isSearching ? null : isLoadingChildren ? loadingFolderIcon : renderStatusIcon(item.value.status, hasChildItems),
-    /* @__PURE__ */ React.createElement(
-      ItemLinkComponent2,
-      {
-        href: item.value.href,
-        title: `${item.value.label} ${statusLabel}`,
-        "data-sidebar-item-id": item.value.id,
-        "data-sidebar-item-type": "article",
-        className: cn(
-          "min-w-0 text-inherit text-sm truncate flex-1 after:absolute after:inset-0 after:z-10 pr-1",
-          isSelected && "text-primary-foreground"
-        ),
-        onClick: handleItemClick
-      },
-      item.value.label
-    ),
-    showActions && /* @__PURE__ */ React.createElement(
-      ButtonGroup,
-      {
-        orientation: "horizontal",
-        className: cn(
-          "absolute h-4 my-auto right-0.5 top-0 bottom-0 z-20 hidden items-center rounded-xl",
-          "group-hover:flex group-focus-within:flex",
-          isSelected ? "bg-lime-100 text-primary-foreground" : "bg-dark-200"
-        )
-      },
-      onMoreActions && /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          "aria-label": `More actions for ${item.value.label}`,
-          className: "size-4 [&_svg]:size-3.5",
-          onClick: handleMoreClick
-        },
-        /* @__PURE__ */ React.createElement(DotsThree, { "aria-hidden": "true", weight: "bold" })
-      ),
-      onAddArticle && !isAddingArticle && /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          "aria-label": `Add article to ${item.value.label}`,
-          className: "size-4 [&_svg]:size-3.5",
-          onClick: handleAddClick
-        },
-        /* @__PURE__ */ React.createElement(Plus, { "aria-hidden": "true" })
-      )
-    )
-  );
-}
-
-function getNewlyExpandedKeys(previous, next) {
-  const previousKeys = new Set(Array.from(previous, (key) => key.toString()));
-  return Array.from(next, (key) => key.toString()).filter((key) => !previousKeys.has(key));
-}
-
-function flattenArticles(items, parentId = null, depth = 0, result = []) {
-  items.forEach((item, index) => {
-    result.push({ item, parentId, index, depth });
-    if (item.items?.length) {
-      flattenArticles(item.items, item.id, depth + 1, result);
-    }
-  });
-  return result;
-}
-function haveSameValue(a, b) {
-  return a.label === b.label && a.href === b.href && a.status === b.status && a.hasChildren === b.hasChildren && a.isLoadingChildren === b.isLoadingChildren;
-}
-function buildArticleTreeSyncOperations(currentArticles, nextArticles) {
-  const currentEntries = flattenArticles(currentArticles);
-  const nextEntries = flattenArticles(nextArticles);
-  const currentMap = new Map(currentEntries.map((entry) => [entry.item.id, entry]));
-  const nextMap = new Map(nextEntries.map((entry) => [entry.item.id, entry]));
-  const operations = [];
-  currentEntries.filter((entry) => !nextMap.has(entry.item.id)).sort((a, b) => b.depth - a.depth).forEach((entry) => {
-    operations.push({ type: "remove", id: entry.item.id });
-  });
-  nextEntries.forEach((entry) => {
-    const currentEntry = currentMap.get(entry.item.id);
-    if (!currentEntry) {
-      operations.push({
-        type: "insert",
-        parentId: entry.parentId,
-        index: entry.index,
-        item: entry.item
-      });
-      return;
-    }
-    if (currentEntry.parentId !== entry.parentId || currentEntry.index !== entry.index) {
-      operations.push({
-        type: "move",
-        id: entry.item.id,
-        parentId: entry.parentId,
-        index: entry.index
-      });
-    }
-    if (!haveSameValue(currentEntry.item, entry.item)) {
-      operations.push({
-        type: "update",
-        id: entry.item.id,
-        item: entry.item
-      });
-    }
-  });
-  return operations;
-}
-
-let placeholderCounter = 0;
-function getParentKeys(items, targetId, parents = []) {
-  for (const item of items) {
-    if (item.id === targetId) {
-      return parents;
-    }
-    if (item.items && item.items.length > 0) {
-      const result = getParentKeys(item.items, targetId, [...parents, item.id]);
-      if (result) return result;
-    }
-  }
-  return null;
-}
-function treeNodesToArticleNavItems(items) {
-  return items.map((item) => ({
-    ...item.value,
-    items: item.children?.length ? treeNodesToArticleNavItems(item.children) : item.value.items
-  }));
-}
-function ArticleTree({ articles, isSearching, renderEmptyState }) {
-  const {
-    ItemLinkComponent,
-    activeArticleId,
-    lastSelectedArticleId,
-    setLastSelectedArticleId,
-    onSelectArticle,
-    onExpandArticle,
-    handleSearchArticles,
-    setSearchValue,
-    canMoveArticle,
-    onMoveArticle,
-    onAddArticle,
-    onMoreActions
-  } = useSidebar();
-  const effectiveActiveId = activeArticleId ?? lastSelectedArticleId ?? void 0;
-  const articlesTree = useTreeData({
-    initialItems: articles,
-    getKey: (articleItem) => articleItem.id,
-    getChildren: (articleItem) => articleItem.items ?? []
-  });
-  const prevArticlesRef = React.useRef(articles);
-  React.useEffect(() => {
-    if (prevArticlesRef.current === articles) return;
-    prevArticlesRef.current = articles;
-    const currentArticles = treeNodesToArticleNavItems(articlesTree.items);
-    const operations = buildArticleTreeSyncOperations(currentArticles, articles);
-    if (operations.length === 0) return;
-    operations.forEach((operation) => {
-      switch (operation.type) {
-        case "remove":
-          articlesTree.remove(operation.id);
-          break;
-        case "insert":
-          articlesTree.insert(operation.parentId, operation.index, operation.item);
-          break;
-        case "move":
-          articlesTree.move(operation.id, operation.parentId, operation.index);
-          break;
-        case "update":
-          articlesTree.update(operation.id, operation.item);
-          break;
-      }
-    });
-  }, [articles, articlesTree]);
-  const { dragAndDropHooks } = useDragAndDrop({
-    getItems: (_keys, items) => items.map((item) => ({
-      "text/plain": item.value.label
-    })),
-    onMove: (e) => {
-      if (isSearching) return;
-      const movedArticleId = Array.from(e.keys)[0];
-      if (!movedArticleId) return;
-      const targetItem = articlesTree.getItem(e.target.key);
-      if (!targetItem) return;
-      let movedToParentId;
-      let movedToIndex;
-      if (e.target.dropPosition === "on") {
-        movedToParentId = e.target.key.toString();
-        movedToIndex = targetItem.children?.length ?? 0;
-      } else {
-        movedToParentId = targetItem.parentKey?.toString() ?? null;
-        const siblings = movedToParentId ? articlesTree.getItem(movedToParentId)?.children ?? [] : articlesTree.items;
-        const targetIndex = siblings.findIndex((i) => i.key === e.target.key);
-        movedToIndex = e.target.dropPosition === "before" ? targetIndex : targetIndex + 1;
-      }
-      const moveDetails = {
-        id: movedArticleId.toString(),
-        parentId: movedToParentId,
-        index: movedToIndex
-      };
-      if (canMoveArticle && !canMoveArticle(moveDetails)) {
-        return;
-      }
-      const movedItem = articlesTree.getItem(movedArticleId);
-      const originalParentId = movedItem?.parentKey?.toString() ?? null;
-      const originalSiblings = originalParentId ? articlesTree.getItem(originalParentId)?.children ?? [] : articlesTree.items;
-      const originalIndex = originalSiblings.findIndex((i) => i.key === movedArticleId);
-      if (e.target.dropPosition === "on") {
-        articlesTree.move(movedArticleId, movedToParentId, movedToIndex);
-      } else if (e.target.dropPosition === "before") {
-        articlesTree.moveBefore(e.target.key, e.keys);
-      } else {
-        articlesTree.moveAfter(e.target.key, e.keys);
-      }
-      const result = onMoveArticle?.(moveDetails);
-      if (result && typeof result.then === "function") {
-        result.catch(() => {
-          articlesTree.move(movedArticleId, originalParentId, originalIndex);
-        });
-      }
-    },
-    renderDropIndicator: (target) => /* @__PURE__ */ React.createElement(
-      DropIndicator,
-      {
-        target,
-        className: "outline outline-1 outline-lime-200 ml-[calc(var(--tree-item-level)*0.5rem)]"
-      }
-    )
-  });
-  const [localSelectedKeys, setLocalSelectedKeys] = React.useState(/* @__PURE__ */ new Set());
-  const selectedKeys = React.useMemo(
-    () => effectiveActiveId != null ? /* @__PURE__ */ new Set([effectiveActiveId]) : localSelectedKeys,
-    [effectiveActiveId, localSelectedKeys]
-  );
-  const pathToActive = React.useMemo(() => {
-    if (!effectiveActiveId || isSearching || !articles.length) return [];
-    const path = getParentKeys(articles, effectiveActiveId);
-    return path ?? [];
-  }, [articles, effectiveActiveId, isSearching]);
-  const [expandedKeysState, setExpandedKeysState] = React.useState(/* @__PURE__ */ new Set());
-  const expandedKeys = React.useMemo(
-    () => /* @__PURE__ */ new Set([...pathToActive, ...expandedKeysState]),
-    [pathToActive, expandedKeysState]
-  );
-  React.useEffect(() => {
-    if (!activeArticleId) return;
-    setLastSelectedArticleId(null);
-  }, [activeArticleId, lastSelectedArticleId, setLastSelectedArticleId]);
-  const pendingAddIdsRef = React.useRef(/* @__PURE__ */ new Set());
-  const [pendingAddIds, setPendingAddIds] = React.useState(/* @__PURE__ */ new Set());
-  const handleAddArticle = React.useCallback(
-    (parentId) => {
-      if (isSearching || !onAddArticle || pendingAddIdsRef.current.has(parentId)) return;
-      pendingAddIdsRef.current.add(parentId);
-      setPendingAddIds(new Set(pendingAddIdsRef.current));
-      const tempId = `__placeholder_${++placeholderCounter}`;
-      const placeholder = { id: tempId, label: "Untitled", href: "", status: "draft" };
-      articlesTree.append(parentId, placeholder);
-      setExpandedKeysState((prev) => /* @__PURE__ */ new Set([...prev, parentId]));
-      onAddArticle(parentId).then(
-        (created) => {
-          articlesTree.remove(tempId);
-          articlesTree.append(parentId, created);
-          setLocalSelectedKeys(/* @__PURE__ */ new Set([created.id]));
-          onSelectArticle?.(created.id);
-          pendingAddIdsRef.current.delete(parentId);
-          setPendingAddIds(new Set(pendingAddIdsRef.current));
-        },
-        () => {
-          articlesTree.remove(tempId);
-          pendingAddIdsRef.current.delete(parentId);
-          setPendingAddIds(new Set(pendingAddIdsRef.current));
-        }
-      );
-    },
-    [isSearching, onAddArticle, articlesTree, onSelectArticle]
-  );
-  const navigateToArticleId = React.useCallback(
-    (articleId) => {
-      onSelectArticle?.(articleId);
-      if (activeArticleId == null) {
-        setLocalSelectedKeys(/* @__PURE__ */ new Set([articleId]));
-      }
-      if (isSearching) {
-        setLastSelectedArticleId(articleId);
-        setSearchValue("");
-        handleSearchArticles?.("");
-      }
-    },
-    [activeArticleId, handleSearchArticles, isSearching, onSelectArticle, setLastSelectedArticleId, setSearchValue]
-  );
-  return /* @__PURE__ */ React.createElement(
-    Tree,
-    {
-      "aria-label": isSearching ? "Search results" : "Articles tree",
-      items: articlesTree.items,
-      renderEmptyState,
-      dragAndDropHooks: isSearching ? void 0 : dragAndDropHooks,
-      className: "flex flex-col",
-      selectionBehavior: "toggle",
-      selectionMode: "single",
-      expandedKeys,
-      onExpandedChange: (nextExpandedKeys) => {
-        const newlyExpandedKeys = getNewlyExpandedKeys(expandedKeys, nextExpandedKeys);
-        newlyExpandedKeys.forEach((key) => {
-          onExpandArticle?.(key);
-        });
-        setExpandedKeysState(nextExpandedKeys);
-      },
-      selectedKeys,
-      disallowEmptySelection: true,
-      onSelectionChange: (selection) => {
-        if (selection !== "all") {
-          if (effectiveActiveId == null) setLocalSelectedKeys(selection);
-          const selected = Array.from(selection)?.[0];
-          if (selected) {
-            navigateToArticleId(selected.toString());
-          }
-        }
-      }
-    },
-    function renderItem(item) {
-      return /* @__PURE__ */ React.createElement(
-        TreeItem,
-        {
-          className: "list-none",
-          textValue: item.value.label,
-          id: item.value.id,
-          hasChildItems: item.value.hasChildren
-        },
-        /* @__PURE__ */ React.createElement(TreeItemContent, null, (props) => /* @__PURE__ */ React.createElement(
-          ArticleItem,
-          {
-            ItemLinkComponent,
-            item,
-            onAddArticle: !isSearching && onAddArticle ? handleAddArticle : void 0,
-            isAddingArticle: !isSearching && pendingAddIds.has(item.value.id),
-            isLoadingChildren: !isSearching && item.value.isLoadingChildren,
-            onMoreActions: onMoreActions ? (articleId) => onMoreActions(articleId) : void 0,
-            ...props
-          }
-        )),
-        !isSearching && item.children && /* @__PURE__ */ React.createElement(Collection, { items: item.children }, renderItem)
-      );
-    }
-  );
-}
-
-const ARTICLE_TREE_SEARCH_DEBOUNCE_MS = 400;
-const ARTICLE_TREE_SEARCH_DEBOUNCE_OPTIONS = { leading: true, trailing: true };
-function ArticleNav({ articles, className, isLoadingArticles }) {
-  const { isSearching, searchValue, onAddArticle } = useSidebar();
-  const { contains } = useSubstringFilter();
-  const trimmedQuery = searchValue.trim();
-  const [debouncedTreeQuery] = useDebounceValue(
-    isSearching ? trimmedQuery : "",
-    isSearching ? ARTICLE_TREE_SEARCH_DEBOUNCE_MS : 0,
-    isSearching ? ARTICLE_TREE_SEARCH_DEBOUNCE_OPTIONS : void 0
-  );
-  const shouldShowLoadingState = !isSearching && (isLoadingArticles ?? articles === void 0);
-  const renderLoadingEmptyState = React.useCallback(
-    () => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "flex min-h-20 items-center justify-center text-muted-foreground",
-        role: "status",
-        "aria-live": "polite",
-        "aria-label": "Loading articles list"
-      },
-      /* @__PURE__ */ React.createElement(Spinner, { className: "size-5", "aria-hidden": "true" }),
-      /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Loading articles list")
-    ),
-    []
-  );
-  const noArticles = !shouldShowLoadingState && !isSearching && (!articles || articles.length === 0);
-  const filteredArticles = React.useMemo(() => {
-    if (isSearching) {
-      if (trimmedQuery === "" || debouncedTreeQuery === "") {
-        return [];
-      }
-      const result = [];
-      const query = debouncedTreeQuery;
-      const traverse = (nodes) => {
-        for (const item of nodes) {
-          if (contains(item.label, query)) {
-            result.push({ ...item, hasChildren: false, items: [] });
-          }
-          if (item.items?.length) {
-            traverse(item.items);
-          }
-        }
-      };
-      traverse(articles ?? []);
-      return result;
-    }
-    if (articles && articles.length > 0) {
-      return articles;
-    }
-    return [];
-  }, [articles, isSearching, trimmedQuery, debouncedTreeQuery, contains]);
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col gap-0.5 px-4", className) }, noArticles && /* @__PURE__ */ React.createElement(Button, { variant: "ghost", className: "text-subtlest", onClick: () => onAddArticle?.(null).catch(() => {
-  }) }, /* @__PURE__ */ React.createElement(Article, { "aria-hidden": "true" }), "Create first article or folder"), shouldShowLoadingState ? /* @__PURE__ */ React.createElement(ArticleTree, { articles: [], renderEmptyState: renderLoadingEmptyState }) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ArticleSearch, null), /* @__PURE__ */ React.createElement("nav", { "aria-label": "Articles navigation" }, /* @__PURE__ */ React.createElement(
-    ArticleTree,
-    {
-      key: isSearching ? trimmedQuery === "" ? "search:empty" : `search:${debouncedTreeQuery}` : "browse",
-      articles: filteredArticles ?? []
-    }
-  ))));
-}
-
-function SectionNav({ className, items, activeId }) {
-  const { ItemLinkComponent } = useSidebar();
-  return /* @__PURE__ */ React.createElement("nav", { className: cn("flex flex-col", className), "aria-label": "App section navigation" }, items.map((item) => /* @__PURE__ */ React.createElement(
-    ItemLinkComponent,
-    {
-      key: item.id,
-      href: item.href,
-      "data-sidebar-item-id": item.id,
-      "data-sidebar-item-type": "section",
-      "data-sidebar-section-nav-item-selected": item.id === activeId,
-      className: cn(
-        "flex p-2 mx-4 text-base text-default relative rounded-lg",
-        "after:transition-opacity after:absolute after:top-0 after:bottom-0 after:-right-4 after:w-2 after:bg-primary after:rounded-l-md after:opacity-0",
-        "hover:bg-lime-100 focus:bg-lime-100 hover:text-primary-foreground focus:text-primary-foreground",
-        item.id === activeId && "font-bold after:opacity-100"
-      )
-    },
-    item.label
-  )));
-}
-
-const Sidebar = React.forwardRef(function Sidebar2({
-  className,
-  ItemLinkComponent,
-  collapsed,
-  showAppBack,
-  onAppBack,
-  appNavItems,
-  appNavActiveId,
-  isLoadingArticles,
-  sectionNavItems,
-  sectionNavActiveId,
-  activeArticleId,
-  showArticles,
-  articles,
-  onSelectArticle,
-  onExpandArticle,
-  onSearchArticles,
-  onAddArticle,
-  onMoreActions,
-  canMoveArticle,
-  onMoveArticle,
-  ...props
-}, ref) {
-  const [atScrollBottom, setAtScrollBottom] = React.useState(false);
-  const handleScroll = (event) => {
-    const { scrollHeight, scrollTop, clientHeight } = event.currentTarget;
-    setAtScrollBottom(scrollTop + clientHeight >= scrollHeight);
-  };
-  return /* @__PURE__ */ React.createElement(
-    SidebarProvider,
-    {
-      collapsed: !!collapsed,
-      ItemLinkComponent,
-      activeArticleId,
-      onSelectArticle,
-      onExpandArticle,
-      onSearchArticles,
-      onAddArticle,
-      onMoreActions,
-      canMoveArticle,
-      onMoveArticle
-    },
-    /* @__PURE__ */ React.createElement(
-      "aside",
-      {
-        ref,
-        ...props,
-        className: cn(
-          "py-4 transition-width duration-200 ease-in-out flex flex-col h-dvh",
-          collapsed ? "w-[64px]" : "w-[260px]",
-          className
-        ),
-        "aria-label": "Application navigation"
-      },
-      /* @__PURE__ */ React.createElement(
-        AppNav,
-        {
-          className: cn(
-            "flex-shrink-0",
-            appNavItems && appNavItems.length > 0 && "pb-4",
-            !collapsed && "border-b border-border-subtle"
-          ),
-          showBack: showAppBack,
-          items: appNavItems,
-          activeId: appNavActiveId,
-          onBack: onAppBack
-        }
-      ),
-      !collapsed && /* @__PURE__ */ React.createElement(React.Fragment, null, showArticles && /* @__PURE__ */ React.createElement(ScrollArea, { onScroll: handleScroll }, /* @__PURE__ */ React.createElement(
-        ArticleNav,
-        {
-          className: "py-4 max-w-[var(--left-nav-width,inherit)]",
-          articles,
-          isLoadingArticles
-        }
-      )), sectionNavItems && sectionNavItems.length > 0 && /* @__PURE__ */ React.createElement(
-        SectionNav,
-        {
-          className: cn("pt-4 flex-shrink-0", !collapsed && !atScrollBottom && "border-t border-subtle"),
-          items: sectionNavItems,
-          activeId: sectionNavActiveId
-        }
-      ))
-    )
-  );
-});
-
-export { Sidebar as S, useSidebar as u };
-//# sourceMappingURL=sidebar.BamKohb5.js.map