@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/layouts/sidebar/article-nav/article-tree.js

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { useTreeData, useDragAndDrop, DropIndicator, Tree, TreeItem, TreeItemContent, Collection } from 'react-aria-components';
+import { ArticleItem } from './article-item.js';
+import { ArticleSearchResults } from './article-search-results.js';
+import { useSidebar } from '../context.js';
+import { getNewlyExpandedKeys } from './expansion.js';
+import { buildArticleTreeSyncOperations } from './tree-sync.js';
+
+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,
+    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]));
+      }
+    },
+    [activeArticleId, onSelectArticle]
+  );
+  if (isSearching) {
+    return /* @__PURE__ */ React.createElement(ArticleSearchResults, { articles });
+  }
+  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)
+      );
+    }
+  );
+}
+
+export { ArticleTree, getParentKeys };

package/dist/esm/layouts/sidebar/article-nav/expansion.js

@@ -0,0 +1,6 @@
+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));
+}
+
+export { getNewlyExpandedKeys };

package/dist/esm/layouts/sidebar/article-nav/status-icons/article-status-icon.js

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DiscoveryIcon } from './discovery-icon.js';
+import { FileStatusIcon, getFileStatusIconVariant } from './file/file-status-icon.js';
+import { FolderStatusIcon, getFolderStatusIconVariant } from './folder/folder-status-icon.js';
+
+function hasArticleChanges(status) {
+  return status === "unpublished" || status === "draft";
+}
+function isArticleInternal(siteEnabled) {
+  return siteEnabled === false;
+}
+function ArticleStatusIcon({
+  status,
+  hasChildItems,
+  isExpanded,
+  siteEnabled,
+  isLoadingChildren,
+  label
+}) {
+  if (isLoadingChildren) {
+    return /* @__PURE__ */ React.createElement(FolderStatusIcon, { variant: "loading", label, chevron: false });
+  }
+  if (status === "discovery") {
+    return /* @__PURE__ */ React.createElement(DiscoveryIcon, { chevron: hasChildItems });
+  }
+  const hasChanges = hasArticleChanges(status);
+  const isInternal = isArticleInternal(siteEnabled);
+  if (hasChildItems) {
+    return /* @__PURE__ */ React.createElement(FolderStatusIcon, { variant: getFolderStatusIconVariant(isExpanded, hasChanges, isInternal) });
+  }
+  return /* @__PURE__ */ React.createElement(FileStatusIcon, { variant: getFileStatusIconVariant(hasChanges, isInternal) });
+}
+
+export { ArticleStatusIcon };

package/dist/esm/layouts/sidebar/article-nav/status-icons/chevron-slot.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Button } from 'react-aria-components';
+
+function FolderSlotButton({ children }) {
+  return /* @__PURE__ */ React.createElement(Button, { slot: "chevron", className: "relative z-30 flex p-0" }, /* @__PURE__ */ React.createElement("span", { className: "relative inline-flex size-4 items-center justify-center" }, children));
+}
+
+export { FolderSlotButton };

package/dist/esm/layouts/sidebar/article-nav/status-icons/constant.js

@@ -0,0 +1,3 @@
+const ICON_SIZE = "size-4";
+
+export { ICON_SIZE };

package/dist/esm/layouts/sidebar/article-nav/status-icons/discovery-icon.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Lightning } from '@phosphor-icons/react';
+import { FolderSlotButton } from './chevron-slot.js';
+import { ICON_SIZE } from './constant.js';
+import { StatusIconShell } from './icon-shell.js';
+
+function DiscoveryIcon({ chevron }) {
+  const icon = /* @__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: `${ICON_SIZE} shrink-0 text-blue-600` }));
+  if (chevron) {
+    return /* @__PURE__ */ React.createElement(FolderSlotButton, null, /* @__PURE__ */ React.createElement("span", { className: "text-blue-600" }, icon));
+  }
+  return /* @__PURE__ */ React.createElement(StatusIconShell, { className: "shrink-0 text-blue-600" }, icon);
+}
+
+export { DiscoveryIcon };

package/dist/esm/layouts/sidebar/article-nav/status-icons/file/file-status-icon.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { File, FileLock, FileDashed } from '@phosphor-icons/react';
+import { ICON_SIZE } from '../constant.js';
+import { StatusIconShell } from '../icon-shell.js';
+
+function getFileStatusIconVariant(hasChanges, isInternal) {
+  if (hasChanges) {
+    return "hasChanges";
+  }
+  if (isInternal) {
+    return "locked";
+  }
+  return "default";
+}
+function getIcon(variant) {
+  switch (variant) {
+    case "hasChanges":
+      return FileDashed;
+    case "locked":
+      return FileLock;
+    default:
+      return File;
+  }
+}
+function FileStatusIcon({ variant }) {
+  const Icon = getIcon(variant);
+  const weight = variant === "default" ? "regular" : "fill";
+  return /* @__PURE__ */ React.createElement(StatusIconShell, null, /* @__PURE__ */ React.createElement(Icon, { "aria-hidden": "true", weight, className: ICON_SIZE }));
+}
+
+export { FileStatusIcon, getFileStatusIconVariant };

package/dist/esm/layouts/sidebar/article-nav/status-icons/folder/folder-status-icon.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Folder, FolderLock, FolderDashed, FolderOpen } from '@phosphor-icons/react';
+import { FolderSlotButton } from '../chevron-slot.js';
+import { ICON_SIZE } from '../constant.js';
+import { StatusIconShell } from '../icon-shell.js';
+import { Spinner } from '../../../../../components/ui/spinner.js';
+import { cn } from '../../../../../lib/utils.js';
+
+function getFolderStatusIconVariant(isExpanded, hasChanges, isInternal) {
+  if (isExpanded) {
+    return "expanded";
+  }
+  if (hasChanges) {
+    return "hasChanges";
+  }
+  if (isInternal) {
+    return "locked";
+  }
+  return "collapsed";
+}
+function getIcon(variant) {
+  switch (variant) {
+    case "expanded":
+      return FolderOpen;
+    case "hasChanges":
+      return FolderDashed;
+    case "locked":
+      return FolderLock;
+    default:
+      return Folder;
+  }
+}
+function wrapWithChevronSlot(content, chevron) {
+  if (!chevron) {
+    return content;
+  }
+  return /* @__PURE__ */ React.createElement(FolderSlotButton, null, content);
+}
+function FolderStatusIcon({
+  variant,
+  label,
+  chevron
+}) {
+  const useChevron = chevron ?? variant !== "loading";
+  if (variant === "loading") {
+    const loadingLabel = label ? `Loading nested articles for ${label}` : "Loading nested articles";
+    return wrapWithChevronSlot(
+      /* @__PURE__ */ React.createElement(StatusIconShell, { role: "status", "aria-label": loadingLabel }, /* @__PURE__ */ React.createElement(Spinner, { "aria-hidden": "true", className: cn(ICON_SIZE, "text-current") }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, loadingLabel)),
+      useChevron
+    );
+  }
+  const Icon = getIcon(variant);
+  return wrapWithChevronSlot(
+    /* @__PURE__ */ React.createElement(StatusIconShell, null, /* @__PURE__ */ React.createElement(Icon, { "aria-hidden": "true", weight: "fill", className: ICON_SIZE })),
+    useChevron
+  );
+}
+
+export { FolderStatusIcon, getFolderStatusIconVariant };

package/dist/esm/layouts/sidebar/article-nav/status-icons/icon-shell.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { cn } from '../../../../lib/utils.js';
+
+function StatusIconShell({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ React.createElement("span", { className: cn("inline-flex items-center justify-center", className), ...props }, children);
+}
+
+export { StatusIconShell };

package/dist/esm/layouts/sidebar/article-nav/tree-sync.js

@@ -0,0 +1,52 @@
+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.siteEnabled === b.siteEnabled && 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;
+}
+
+export { buildArticleTreeSyncOperations };

package/dist/esm/layouts/sidebar/context.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+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;
+}
+
+export { SidebarProvider, useSidebar };

package/dist/esm/layouts/sidebar/section-nav/section-nav.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useSidebar } from '../context.js';
+import { cn } from '../../../lib/utils.js';
+
+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 ml-4 text-sm 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-dark-200 focus:bg-dark-200 hover:text-accent-foreground focus:text-accent-foreground",
+        item.id === activeId && "font-bold after:opacity-100"
+      )
+    },
+    item.label
+  )));
+}
+
+export { SectionNav };

package/dist/esm/layouts/sidebar/sidebar.js

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { SidebarProvider } from './context.js';
+import { ScrollArea } from '../../components/ui/scroll-area.js';
+import { cn } from '../../lib/utils.js';
+import { AppNav } from './app-nav/app-nav.js';
+import { ArticleNav } from './article-nav/article-nav.js';
+
+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) {
+  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,
+          sectionNavItems,
+          sectionNavActiveId
+        }
+      ),
+      !collapsed && /* @__PURE__ */ React.createElement(React.Fragment, null, showArticles && /* @__PURE__ */ React.createElement(ScrollArea, null, /* @__PURE__ */ React.createElement(
+        ArticleNav,
+        {
+          className: "py-4 max-w-[var(--left-nav-width,inherit)]",
+          articles,
+          isLoadingArticles
+        }
+      )))
+    )
+  );
+});
+
+export { Sidebar };

package/dist/esm/layouts/sidebar.js

@@ -1,2 +1,2 @@
-export{S as Sidebar,u as useSidebar}from"../chunks/sidebar.CM8HDZg0.js";
-//# sourceMappingURL=sidebar.js.map
+export { Sidebar } from './sidebar/sidebar.js';
+export { useSidebar } from './sidebar/context.js';