@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/layouts/full-layout/left-sidebar-pane.js

@@ -0,0 +1,66 @@
+import React__default from 'react';
+import { Sidebar } from '../sidebar/sidebar.js';
+import { cn } from '../../lib/utils.js';
+
+const FullLayoutLeftSidebar = React__default.forwardRef(
+  ({
+    open,
+    widthPx,
+    onResizeStart,
+    onResizeKeyDown,
+    ariaValuenow,
+    ariaValuemin,
+    ariaValuemax,
+    sidebarProps,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref,
+        id: "left-sidebar-pane",
+        "data-slot": "full-layout-left-sidebar",
+        tabIndex: -1,
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          "min-w-0 overflow-hidden flex flex-col relative transition-[width] data-[state=closed]:w-0 data-[state=closed]:pointer-events-none data-[state=open]:w-full md:data-[state=open]:w-[var(--left-nav-width)]",
+          className
+        ),
+        style: {
+          ["--left-nav-width"]: `${widthPx}px`
+        },
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Sidebar,
+        {
+          ...sidebarProps,
+          collapsed: !open,
+          className: "transition-[width] w-[var(--left-nav-width)] h-[calc(100dvh-var(--header-nav-height,0))]"
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          role: "separator",
+          "aria-orientation": "vertical",
+          "aria-valuenow": ariaValuenow,
+          "aria-valuemin": ariaValuemin,
+          "aria-valuemax": ariaValuemax,
+          "aria-label": "Resize left sidebar",
+          "aria-controls": "left-sidebar-pane",
+          "data-slot": "full-layout-left-sidebar-resize-handle",
+          tabIndex: 0,
+          onMouseDown: onResizeStart,
+          onKeyDown: onResizeKeyDown,
+          className: "hidden lg:block absolute top-0 right-0 bottom-0 w-1 bg-transparent hover:bg-blue-500 cursor-ew-resize shrink-0 [&>div]:pointer-events-none"
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: "absolute inset-y-0 -right-1 w-3" })
+      )
+    );
+  }
+);
+FullLayoutLeftSidebar.displayName = "FullLayoutLeftSidebar";
+
+export { FullLayoutLeftSidebar };

package/dist/esm/layouts/full-layout/right-sidebar-pane.js

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { cn } from '../../lib/utils.js';
+import { ScrollArea } from '../../components/ui/scroll-area.js';
+
+const FullLayoutRightSidebar = React__default.forwardRef(
+  ({ open, scrollable = true, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(
+      "aside",
+      {
+        ref,
+        "data-slot": "full-layout-right-sidebar",
+        "data-state": open ? "open" : "closed",
+        className: cn(
+          "bg-background shadow-lg flex flex-col",
+          "fixed h-[calc(100dvh-var(--header-nav-height))] z-10 w-screen transition-transform duration-300 ease-in-out data-[state=closed]:translate-x-full data-[state=open]:translate-x-0",
+          "md:relative md:h-dvh md:w-96 md:top-0",
+          "border-dark-300 border-l border-r-0 border-t-0 border-b-0",
+          className
+        ),
+        ...props
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col flex-1 min-h-0 overflow-hidden", "data-slot": "full-layout-right-sidebar-content" }, scrollable ? /* @__PURE__ */ React__default.createElement(ScrollArea, { className: "h-[calc(100dvh-var(--header-nav-height))] md:h-dvh" }, children) : children)
+    );
+  }
+);
+FullLayoutRightSidebar.displayName = "FullLayoutRightSidebar";
+
+export { FullLayoutRightSidebar };

package/dist/esm/layouts/full-layout.js

@@ -1,2 +1,5 @@
-export{F as FullLayout,a as FullLayoutHeader,b as FullLayoutLeftSidebar,c as FullLayoutNavStateContext,d as FullLayoutProvider,e as FullLayoutRightSidebar,u as useFullLayoutContext,f as useRightSidebar}from"../chunks/header-pane.D40kbO-a.js";
-//# sourceMappingURL=full-layout.js.map
+export { default as FullLayout } from './full-layout/layout.js';
+export { FullLayoutNavStateContext, FullLayoutProvider, useFullLayoutContext, useRightSidebar } from './full-layout/context.js';
+export { FullLayoutHeader } from './full-layout/header-pane.js';
+export { FullLayoutLeftSidebar } from './full-layout/left-sidebar-pane.js';
+export { FullLayoutRightSidebar } from './full-layout/right-sidebar-pane.js';

package/dist/esm/layouts/header-nav/account-dropdown.js

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Crown, Copy } from '@phosphor-icons/react';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuPortal, DropdownMenuSubContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuShortcut, DropdownMenuItem } from '../../components/ui/dropdown-menu.js';
+import { Avatar, AvatarImage, AvatarFallback, AvatarBadge } from '../../components/ui/avatar.js';
+import { Button } from '../../components/ui/button.js';
+import { cn } from '../../lib/utils.js';
+
+function AccountDropdown({
+  accountPhoto,
+  accountName,
+  accountDropdownItems,
+  teams,
+  side = "bottom",
+  align = "end",
+  isSuperAdmin = false,
+  ...props
+}) {
+  const showTeamName = teams?.length > 1 || isSuperAdmin;
+  const currentTeamName = showTeamName && teams?.find((el) => el.isCurrent)?.name || "";
+  const initial = accountName[0];
+  const groups = Array.isArray(accountDropdownItems[0]) ? accountDropdownItems : [accountDropdownItems];
+  const handleCopy = React.useCallback((value, onCopy) => {
+    return (e) => {
+      e.stopPropagation();
+      if (onCopy) onCopy(value);
+      else navigator.clipboard.writeText(value);
+    };
+  }, []);
+  const renderCopyRow = (secondaryLabel, copyValue, onCopy) => secondaryLabel && /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center gap-1 text-xs text-subtlest ml-7" }, secondaryLabel, copyValue != null && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "size-4 shrink-0 p-0 [&>svg]:!size-3",
+      onClick: handleCopy(copyValue, onCopy),
+      "aria-label": "Copy ID"
+    },
+    /* @__PURE__ */ React.createElement(Copy, { className: "size-3" })
+  ));
+  return /* @__PURE__ */ React.createElement(DropdownMenu, { ...props }, /* @__PURE__ */ React.createElement(DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "default",
+      variant: "ghost",
+      className: "rounded-full p-[1px] border border-dark-300 relative",
+      "aria-label": "Toggle account dropdown"
+    },
+    /* @__PURE__ */ React.createElement(Avatar, null, /* @__PURE__ */ React.createElement(
+      AvatarImage,
+      {
+        src: accountPhoto,
+        alt: `${accountName}'s account`,
+        className: cn(
+          "block rounded-full border border-background",
+          isSuperAdmin && "border-2 border-solid border-red-700 inset-1"
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(AvatarFallback, null, initial), isSuperAdmin && /* @__PURE__ */ React.createElement(AvatarBadge, { className: "bg-red-700 text-white" }, /* @__PURE__ */ React.createElement(Crown, null))),
+    showTeamName && /* @__PURE__ */ React.createElement("span", { className: "text-xs text-default font-semibold pr-1" }, currentTeamName)
+  )), /* @__PURE__ */ React.createElement(
+    DropdownMenuContent,
+    {
+      side,
+      align,
+      className: "border-none shadow-[2px_4px_12px_0px_rgba(0,0,0,0.14)] dark:shadow-[2px_4px_12px_0px_rgba(255,255,255,0.14)]"
+    },
+    groups.map((group, groupIndex) => /* @__PURE__ */ React.createElement(React.Fragment, { key: groupIndex }, groupIndex > 0 && /* @__PURE__ */ React.createElement(DropdownMenuSeparator, null), /* @__PURE__ */ React.createElement(DropdownMenuGroup, null, group.map(
+      (item) => item.type === "submenu" ? /* @__PURE__ */ React.createElement(DropdownMenuSub, { key: item.id }, /* @__PURE__ */ React.createElement(
+        DropdownMenuSubTrigger,
+        {
+          secondaryRow: renderCopyRow(item.secondaryLabel, item.copyValue, item.onCopy)
+        },
+        item.icon,
+        item.label
+      ), /* @__PURE__ */ React.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React.createElement(DropdownMenuSubContent, { className: "border-none shadow-[2px_4px_12px_0px_rgba(0,0,0,0.14)] dark:shadow-[2px_4px_12px_0px_rgba(255,255,255,0.14)]" }, item.value != null && item.onValueChange ? /* @__PURE__ */ React.createElement(DropdownMenuRadioGroup, { value: item.value, onValueChange: item.onValueChange }, item.items.map((option) => /* @__PURE__ */ React.createElement(DropdownMenuRadioItem, { key: option.id, value: option.value }, option.icon, option.label, option.shortcut != null && /* @__PURE__ */ React.createElement(DropdownMenuShortcut, null, option.shortcut)))) : item.items.map((option) => /* @__PURE__ */ React.createElement(DropdownMenuItem, { key: option.id, onClick: option.onClick }, option.icon, option.label, option.shortcut != null && /* @__PURE__ */ React.createElement(DropdownMenuShortcut, null, option.shortcut)))))) : /* @__PURE__ */ React.createElement(
+        DropdownMenuItem,
+        {
+          key: item.id,
+          onClick: item.onClick,
+          secondaryRow: renderCopyRow(item.secondaryLabel, item.copyValue, item.onCopy)
+        },
+        item.icon,
+        item.label,
+        item.shortcut != null && /* @__PURE__ */ React.createElement(DropdownMenuShortcut, null, item.shortcut)
+      )
+    ))))
+  ));
+}
+
+export { AccountDropdown };

package/dist/esm/layouts/header-nav/header-nav.js

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { SidebarSimple, Lightning, Question } from '@phosphor-icons/react';
+import { Logo } from '../../components/logo/logo.js';
+import { Button } from '../../components/ui/button.js';
+import { AccountDropdown } from './account-dropdown.js';
+import { cn } from '../../lib/utils.js';
+import { useBooleanFlagValue } from '../../lib/feature-flags.js';
+import { AIBadge } from '../../components/ai-button/ai-badge.js';
+
+const HEADER_NAV_HEIGHT = 60;
+const HeaderNav = React.forwardRef(function HeaderNav2({
+  className,
+  isSideNavOpen = false,
+  onSideNavigationToggle,
+  onHelpClick,
+  onBrainfishNativeClick,
+  accountName,
+  accountPhoto,
+  accountDropdownItems,
+  teams,
+  side,
+  align,
+  showSuggestionAction,
+  suggestionAction,
+  onSuggestionActionClick,
+  onLogoNav,
+  isHomePath = false,
+  showSidebarToggle = true,
+  isRightSidebarOpen = false,
+  sidebarToggleRef,
+  isSuperAdmin,
+  isViewer,
+  ...props
+}, ref) {
+  const hasSuggestionAction = showSuggestionAction && !!suggestionAction && !!onSuggestionActionClick;
+  const brainfishNativeEnabled = useBooleanFlagValue("platform.brainfish-native.enabled", false);
+  const isHelpButtonEnabled = !isViewer;
+  return /* @__PURE__ */ React.createElement("header", { ref, ...props, className: cn("px-4 py-3 relative", className) }, /* @__PURE__ */ React.createElement("nav", { "aria-label": "Account navigation", className: "flex justify-between items-center" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      href: "/",
+      onClick: (e) => {
+        const isPlainLeftClick = e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+        if (isPlainLeftClick) {
+          e.preventDefault();
+          onLogoNav();
+        }
+      },
+      "aria-current": isHomePath ? "page" : void 0
+    },
+    /* @__PURE__ */ React.createElement(
+      Logo,
+      {
+        variant: "full",
+        color: isHomePath ? "fill" : "outline",
+        width: 130,
+        height: 20,
+        className: "hidden md:block"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Logo,
+      {
+        variant: "mark",
+        color: isHomePath ? "fill" : "outline",
+        width: 37,
+        height: 20,
+        className: "block md:hidden"
+      }
+    )
+  ), showSidebarToggle && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      ref: sidebarToggleRef,
+      size: "icon",
+      variant: "ghost",
+      "aria-label": "Toggle side navigation",
+      className: "[&_svg]:size-6",
+      onClick: onSideNavigationToggle
+    },
+    /* @__PURE__ */ React.createElement(SidebarSimple, { "aria-hidden": "true", weight: isSideNavOpen ? "fill" : "regular" })
+  )), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-4" }, hasSuggestionAction && /* @__PURE__ */ React.createElement(Button, { variant: "suggestion", onClick: onSuggestionActionClick }, /* @__PURE__ */ React.createElement(Lightning, { weight: "fill", "aria-hidden": "true" }), " ", suggestionAction), isHelpButtonEnabled && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      size: "icon",
+      variant: "ghost",
+      "aria-label": "Open help",
+      className: "[&_svg]:size-6",
+      onClick: onHelpClick
+    },
+    /* @__PURE__ */ React.createElement(Question, { "aria-hidden": "true" })
+  ), /* @__PURE__ */ React.createElement(
+    AccountDropdown,
+    {
+      accountName,
+      accountPhoto,
+      accountDropdownItems,
+      teams,
+      side,
+      align,
+      isSuperAdmin
+    }
+  ), brainfishNativeEnabled && !isRightSidebarOpen && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Open Ask Brainfish",
+      className: "flex items-center gap-2 rounded border border-dark-300 bg-surface py-1 pl-1 pr-1.5 cursor-pointer hover:bg-dark-200 active:bg-dark-400 focus-visible:outline-none",
+      onClick: onBrainfishNativeClick
+    },
+    /* @__PURE__ */ React.createElement(AIBadge, { size: 24 }),
+    /* @__PURE__ */ React.createElement("span", { className: "text-xs font-normal text-dark-900 whitespace-nowrap" }, "Ask Brainfish")
+  ))));
+});
+
+export { HEADER_NAV_HEIGHT, HeaderNav };

package/dist/esm/layouts/header-nav.js

@@ -1,2 +1 @@
-export{H as HEADER_NAV_HEIGHT,a as HeaderNav}from"../chunks/header-nav.BQXr30-S.js";
-//# sourceMappingURL=header-nav.js.map
+export { HEADER_NAV_HEIGHT, HeaderNav } from './header-nav/header-nav.js';

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ArrowBendUpLeft } from '@phosphor-icons/react';
+import { useSidebar } from '../context.js';
+import { Button } from '../../../components/ui/button.js';
+import { ScrollArea } from '../../../components/ui/scroll-area.js';
+import { cn } from '../../../lib/utils.js';
+import { SectionNav } from '../section-nav/section-nav.js';
+
+function AppNav({
+  className,
+  items,
+  activeId,
+  showBack,
+  onBack,
+  sectionNavItems,
+  sectionNavActiveId
+}) {
+  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(React.Fragment, { key: item.id }, /* @__PURE__ */ React.createElement(
+    ItemLinkComponent,
+    {
+      className: cn(
+        "flex p-2 rounded-lg gap-1 text-base text-default items-center",
+        item.id === activeId ? "bg-primary text-primary-foreground font-bold hover:text-primary-foreground focus:text-primary-foreground" : "hover:bg-dark-200 focus:bg-dark-200 hover:text-accent-foreground focus:text-accent-foreground"
+      ),
+      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)
+  ), item.id === activeId && sectionNavItems && sectionNavItems.length > 0 && !collapsed && /* @__PURE__ */ React.createElement(SectionNav, { className: cn("flex-shrink-0"), items: sectionNavItems, activeId: sectionNavActiveId }))))));
+}
+
+export { AppNav };

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

@@ -0,0 +1,138 @@
+import * as React from 'react';
+import { DotsThree, Plus } from '@phosphor-icons/react';
+import { TreeStateContext, Button } from 'react-aria-components';
+import { useSidebar } from '../context.js';
+import { cn } from '../../../lib/utils.js';
+import { Button as Button$1 } from '../../../components/ui/button.js';
+import { ButtonGroup } from '../../../components/ui/button-group.js';
+import { ArticleStatusIcon } from './status-icons/article-status-icon.js';
+
+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 = "";
+  }
+  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-default 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, { slot: "drag", className: "sr-only" }, "Drag ", item.value.label),
+    isSearching ? null : /* @__PURE__ */ React.createElement(
+      ArticleStatusIcon,
+      {
+        status: item.value.status,
+        hasChildItems,
+        isExpanded,
+        siteEnabled: item.value.siteEnabled,
+        isLoadingChildren,
+        label: item.value.label
+      }
+    ),
+    /* @__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-default"
+        ),
+        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-default" : "bg-dark-200"
+        )
+      },
+      onMoreActions && /* @__PURE__ */ React.createElement(
+        Button$1,
+        {
+          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$1,
+        {
+          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" })
+      )
+    )
+  );
+}
+
+export { ArticleItem };

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

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Article } from '@phosphor-icons/react';
+import { useDebounceValue } from 'usehooks-ts';
+import { useSidebar } from '../context.js';
+import { ArticleSearch } from './article-search.js';
+import { ArticleTree } from './article-tree.js';
+import { Spinner } from '../../../components/ui/spinner.js';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../../components/ui/button.js';
+import { useSubstringFilter } from '../../../lib/hooks.js';
+
+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, { isSearching, 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",
+      isSearching,
+      articles: filteredArticles ?? []
+    }
+  ))));
+}
+
+export { ArticleNav };

package/dist/esm/layouts/sidebar/article-nav/article-search-results.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useSidebar } from '../context.js';
+import { cn } from '../../../lib/utils.js';
+
+function ArticleSearchResults({ articles }) {
+  const {
+    ItemLinkComponent,
+    activeArticleId,
+    handleSearchArticles,
+    setSearchValue,
+    setLastSelectedArticleId,
+    onSelectArticle
+  } = useSidebar();
+  const handleSearchResultClick = React.useCallback(
+    (articleId) => {
+      setLastSelectedArticleId(articleId);
+      setSearchValue("");
+      handleSearchArticles?.("");
+      onSelectArticle?.(articleId);
+    },
+    [handleSearchArticles, onSelectArticle, setLastSelectedArticleId, setSearchValue]
+  );
+  if (articles.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("ul", { "aria-label": "Search results", className: "flex flex-col list-none" }, articles.map((item) => {
+    const isActive = item.id === activeArticleId;
+    return /* @__PURE__ */ React.createElement("li", { key: item.id }, /* @__PURE__ */ React.createElement(
+      ItemLinkComponent,
+      {
+        href: item.href,
+        title: item.label,
+        "data-sidebar-item-id": item.id,
+        "data-sidebar-item-type": "article",
+        onClick: () => handleSearchResultClick(item.id),
+        className: cn(
+          "relative flex h-9 items-center rounded-md px-1 text-sm truncate",
+          isActive ? "bg-lime-100 font-bold text-primary-foreground 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" : "text-inherit hover:bg-dark-200 hover:text-accent-foreground"
+        )
+      },
+      item.label
+    ));
+  }));
+}
+
+export { ArticleSearchResults };

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { X, MagnifyingGlass } from '@phosphor-icons/react';
+import { useToggle } from 'usehooks-ts';
+import { useSidebar } from '../context.js';
+import { Input } from '../../../components/ui/input.js';
+
+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"
+    }
+  ));
+}
+
+export { ArticleSearch };