@exegia/corpora-ui 0.11.0 → 0.12.0

package/dist-lib/components/agents/__tests__/ai-sidebar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-lib/components/agents/ai-sidebar.d.ts

@@ -1,2 +1,2 @@
 import { AISidebarProps } from './type.ts';
-export declare function AISidebar({ renderIcon, renderMenu, ariaLabel, className, ...options }: AISidebarProps): import("react").JSX.Element;
+export declare function AISidebar({ renderIcon, renderMenu, renderActionsTrigger, ariaLabel, className, ...options }: AISidebarProps): import("react").JSX.Element;

package/dist-lib/components/agents/sidebar-row.d.ts

@@ -1,2 +1,2 @@
 import { ResourceRowProps } from './type.ts';
-export declare function ResourceRow({ row, active, expanded, focused, draggingId, dropTarget, menuOpen, renaming, onDragEnd, onDragOver, onDragStart, onDrop, onFocus, onKeyDown, onMenuOpenChange, onRenameCancel, onRenameCommit, onRenameStart, onSelect, onToggle, hoverActive, hoverPill, hoverLayoutId, onHoverChange, renderIcon, renderMenu, setRef, }: ResourceRowProps): import("react").JSX.Element;
+export declare function ResourceRow({ row, active, expanded, focused, draggingId, dropTarget, menuOpen, renaming, onDragEnd, onDragOver, onDragStart, onDrop, onFocus, onKeyDown, onMenuOpenChange, onRenameCancel, onRenameCommit, onRenameStart, onSelect, onToggle, hoverActive, hoverPill, hoverLayoutId, onHoverChange, renderIcon, renderMenu, renderActionsTrigger, setRef, }: ResourceRowProps): import("react").JSX.Element;

package/dist-lib/components/agents/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, DragEvent, KeyboardEvent } from 'react';
+import { ReactElement, ReactNode, DragEvent, KeyboardEvent } from 'react';
 export type SidebarResourceKind = "folder" | "project" | "file" | "bookmark";
 export interface SidebarResource {
     id: string;
@@ -31,6 +31,11 @@ export interface AISidebarProps {
     defaultExpandedIds?: string[];
     renderIcon?: (item: SidebarResource) => ReactNode;
     renderMenu?: (item: SidebarResource, controls: SidebarResourceMenuControls) => ReactNode;
+    /**
+     * Replaces the default "…" actions button. Must return a single element —
+     * the popover clones it to attach its trigger ref and click handler.
+     */
+    renderActionsTrigger?: (item: SidebarResource) => ReactElement;
     ariaLabel?: string;
     className?: string;
 }
@@ -73,5 +78,6 @@ export interface ResourceRowProps {
     onHoverChange?: (hovered: boolean) => void;
     renderIcon?: (item: SidebarResource) => ReactNode;
     renderMenu?: AISidebarProps["renderMenu"];
+    renderActionsTrigger?: AISidebarProps["renderActionsTrigger"];
     setRef: (node: HTMLDivElement | null) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exegia/corpora-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "shadcn-ready React UI library for the corpora manuscript-research apps.",
   "license": "MIT",
   "repository": {

package/src/components/agents/__tests__/ai-sidebar.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { AISidebar } from "../ai-sidebar"
+import type { SidebarResource } from "../type.ts"
+
+const RESOURCES: SidebarResource[] = [
+  {
+    id: "corpora",
+    label: "Corpora",
+    kind: "project",
+    children: [
+      { id: "manuscripts", label: "Manuscripts", kind: "folder" },
+      { id: "readme", label: "Field notes", kind: "file" },
+    ],
+  },
+  { id: "reading-list", label: "Reading list", kind: "bookmark" },
+  { id: "empty-folder", label: "Empty folder", kind: "folder" },
+]
+
+const chevronOf = (row: HTMLElement) =>
+  row.querySelector("svg.lucide-chevron-right")
+
+describe("AISidebar", () => {
+  test("renders the tree and marks the active row", () => {
+    render(
+      <AISidebar defaultItems={RESOURCES} defaultActiveId="reading-list" />
+    )
+
+    expect(screen.getByRole("tree", { name: "Resources" })).toBeDefined()
+    const active = screen.getByRole("treeitem", { name: /Reading list/ })
+    expect(active.getAttribute("aria-selected")).toBe("true")
+    expect(active.className).toContain("bg-primary/10")
+  })
+
+  test("shows a trailing chevron only on root rows with children", () => {
+    render(
+      <AISidebar defaultItems={RESOURCES} defaultExpandedIds={["corpora"]} />
+    )
+
+    const root = screen.getByRole("treeitem", { name: /Corpora/ })
+    const chevron = chevronOf(root)
+    expect(chevron).not.toBeNull()
+    // Expanded root rows rotate the chevron to point down.
+    expect(chevron?.getAttribute("class")).toContain("rotate-90")
+
+    // Childless root folder and nested folder both render without one.
+    expect(
+      chevronOf(screen.getByRole("treeitem", { name: /Empty folder/ }))
+    ).toBeNull()
+    expect(
+      chevronOf(screen.getByRole("treeitem", { name: /Manuscripts/ }))
+    ).toBeNull()
+  })
+
+  test("chevron sits flat while the root row is collapsed", () => {
+    render(<AISidebar defaultItems={RESOURCES} />)
+
+    const chevron = chevronOf(
+      screen.getByRole("treeitem", { name: /Corpora/ })
+    )
+    expect(chevron).not.toBeNull()
+    expect(chevron?.getAttribute("class")).not.toContain("rotate-90")
+  })
+
+  test("renderActionsTrigger replaces the default actions button", async () => {
+    const user = userEvent.setup()
+    const selected: string[] = []
+    render(
+      <AISidebar
+        defaultItems={RESOURCES}
+        onActiveChange={(id) => selected.push(id)}
+        renderActionsTrigger={(item) => (
+          <button type="button" aria-label={`Custom actions ${item.label}`}>
+            *
+          </button>
+        )}
+      />
+    )
+
+    expect(
+      screen.queryByRole("button", { name: "Actions for Reading list" })
+    ).toBeNull()
+
+    // Opening the menu from the custom trigger must not select the row.
+    await user.click(
+      screen.getByRole("button", { name: "Custom actions Reading list" })
+    )
+    expect(await screen.findByText("Rename")).toBeDefined()
+    expect(selected).toEqual([])
+  })
+})

package/src/components/agents/ai-sidebar.tsx

@@ -9,6 +9,7 @@ import { ResourceRow } from "@/components/agents/sidebar-row.tsx"
 export function AISidebar({
   renderIcon,
   renderMenu,
+  renderActionsTrigger,
   ariaLabel = "Resources",
   className,
   ...options
@@ -93,6 +94,7 @@ export function AISidebar({
               onDrop={handleDrop}
               renderIcon={renderIcon}
               renderMenu={renderMenu}
+              renderActionsTrigger={renderActionsTrigger}
               setRef={(node) => setRowRef(row.item.id, node)}
             />
           ))}
@@ -102,7 +104,7 @@ export function AISidebar({
           <div
             aria-hidden="true"
             data-active={dropTarget?.id === null || undefined}
-            className="absolute inset-x-1 bottom-0 flex h-8 items-center justify-center rounded-lg border border-dashed border-border text-[10px] text-muted-foreground data-[active=true]:border-primary/50 data-[active=true]:bg-primary/10 data-[active=true]:text-foreground"
+            className="absolute inset-x-1 bottom-0 flex h-8 items-center justify-center rounded-md border border-dashed border-border text-[10px] text-muted-foreground data-[active=true]:border-primary/50 data-[active=true]:bg-primary/10 data-[active=true]:text-foreground"
           >
             Move to top level
           </div>

package/src/components/agents/sidebar-row.tsx

@@ -1,7 +1,9 @@
 import {
+  cloneElement,
   useEffect,
   useRef,
   useState,
+  type MouseEvent,
 } from "react"
 import type { ResourceRowProps } from "@/components/agents/type.ts"
 import {
@@ -10,7 +12,7 @@ import {
   useReducedMotion,
   type Variants,
 } from "motion/react"
-import { MoreHorizontal, Pencil } from "lucide-react"
+import { ChevronRight, MoreHorizontal, Pencil } from "lucide-react"
 import { SPRING_LAYOUT } from "@/lib/ease.ts"
 import { cn } from "@/lib/utils.ts"
 import { canContain } from "@/components/agents/utils.ts"
@@ -21,6 +23,7 @@ import {
   MorphPopoverContent,
   MorphPopoverTrigger,
 } from "@/components/motion/popover-morph.tsx"
+import { Button } from "@/components/ui/button";
 
 // Same choreography as SharedLayoutBg: the wrapper only fades/blurs out when
 // the pointer leaves the whole tree; a row-to-row move exits instantly so the
@@ -65,6 +68,7 @@ export function ResourceRow({
   onHoverChange,
   renderIcon,
   renderMenu,
+  renderActionsTrigger,
   setRef,
 }: ResourceRowProps) {
   const reduce = useReducedMotion() ?? false
@@ -175,7 +179,9 @@ export function ResourceRow({
         "data-[drop=inside]:bg-primary/10 data-[drop=inside]:ring-1 data-[drop=inside]:ring-primary/45",
         "data-[drop=before]:before:absolute data-[drop=before]:before:-top-0.5 data-[drop=before]:before:right-2 data-[drop=before]:before:left-2 data-[drop=before]:before:h-0.5 data-[drop=before]:before:rounded-full data-[drop=before]:before:bg-primary",
         "data-[drop=after]:after:absolute data-[drop=after]:after:right-2 data-[drop=after]:after:-bottom-0.5 data-[drop=after]:after:left-2 data-[drop=after]:after:h-0.5 data-[drop=after]:after:rounded-full data-[drop=after]:after:bg-primary",
-        !acceptsChildren && active && "bg-accent text-foreground",
+        !acceptsChildren &&
+          active &&
+          "bg-primary/10 text-primary dark:bg-primary/25 dark:text-primary-foreground",
         row.item.disabled && "cursor-not-allowed opacity-45"
       )}
       style={{ paddingLeft: `${12 + row.depth * 16}px` }}
@@ -196,7 +202,7 @@ export function ResourceRow({
                 <motion.span
                   layoutId={hoverLayoutId}
                   transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
-                  className="block h-full w-full rounded-md bg-muted/50"
+                  className="block h-full w-full rounded-md bg-foreground/8 dark:bg-muted/50"
                 />
               ) : null}
             </motion.span>
@@ -233,7 +239,7 @@ export function ResourceRow({
               onRenameCancel()
             }
           }}
-          className="relative mx-1 h-7 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="relative h-7 min-w-0 flex-1 text-sm text-foreground outline-none focus-visible:ring-0 focus-visible:ring-ring"
         />
       ) : (
         <MarqueeLabel active={hovered || menuOpen}>
@@ -244,16 +250,36 @@ export function ResourceRow({
       {!renaming && !row.item.disabled ? (
         <MorphPopover open={menuOpen} onOpenChange={onMenuOpenChange}>
           <MorphPopoverTrigger>
-            <button
-              type="button"
-              draggable={false}
-              tabIndex={-1}
-              aria-label={`Actions for ${row.item.label}`}
-              onClick={(event) => event.stopPropagation()}
-              className="relative grid size-7 shrink-0 place-items-center rounded-lg opacity-0 transition-opacity duration-150 ease-smooth-out outline-none group-hover/resource:opacity-80 group-hover/resource:delay-150 group-data-[menu-open=true]/resource:opacity-100 hover:bg-foreground/5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
-            >
-              <MoreHorizontal aria-hidden="true" className="size-4" />
-            </button>
+            {(() => {
+              const custom = renderActionsTrigger?.(row.item)
+              if (custom) {
+                // A row click selects/toggles — the trigger must not bubble.
+                const customOnClick = (
+                  custom.props as {
+                    onClick?: (event: MouseEvent<HTMLElement>) => void
+                  }
+                ).onClick
+                return cloneElement(custom, {
+                  draggable: false,
+                  onClick: (event: MouseEvent<HTMLElement>) => {
+                    event.stopPropagation()
+                    customOnClick?.(event)
+                  },
+                } as Partial<unknown>)
+              }
+              return (
+                <Button
+                  draggable={false}
+                  tabIndex={-1}
+                  variant="link"
+                  aria-label={`Actions for ${row.item.label}`}
+                  onClick={(event) => event.stopPropagation()}
+                  className="relative grid size-7 shrink-0 place-items-center rounded-lg opacity-0 transition-opacity duration-150 ease-smooth-out outline-none group-hover/resource:opacity-80 group-hover/resource:delay-150 group-data-[menu-open=true]/resource:opacity-100 hover:bg-foreground/5 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none"
+                >
+                  <MoreHorizontal aria-hidden="true" className="size-4" />
+                </Button>
+              )
+            })()}
           </MorphPopoverTrigger>
           <MorphPopoverContent
             side="bottom"
@@ -266,6 +292,18 @@ export function ResourceRow({
           </MorphPopoverContent>
         </MorphPopover>
       ) : null}
+
+      {row.depth === 0 &&
+      acceptsChildren &&
+      (row.item.children?.length ?? 0) > 0 ? (
+        <ChevronRight
+          aria-hidden="true"
+          className={cn(
+            "relative size-3.5 shrink-0 text-muted-foreground transition-transform duration-200 ease-smooth-out motion-reduce:transition-none",
+            expanded && "rotate-90"
+          )}
+        />
+      ) : null}
     </motion.div>
   )
 }

package/src/components/agents/type.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, DragEvent, KeyboardEvent } from "react"
+import type { ReactElement, ReactNode, DragEvent, KeyboardEvent } from "react"
 
 export type SidebarResourceKind = "folder" | "project" | "file" | "bookmark"
 
@@ -40,6 +40,11 @@ export interface AISidebarProps {
     item: SidebarResource,
     controls: SidebarResourceMenuControls
   ) => ReactNode
+  /**
+   * Replaces the default "…" actions button. Must return a single element —
+   * the popover clones it to attach its trigger ref and click handler.
+   */
+  renderActionsTrigger?: (item: SidebarResource) => ReactElement
   ariaLabel?: string
   className?: string
 }
@@ -85,5 +90,6 @@ export interface ResourceRowProps {
   onHoverChange?: (hovered: boolean) => void
   renderIcon?: (item: SidebarResource) => ReactNode
   renderMenu?: AISidebarProps["renderMenu"]
+  renderActionsTrigger?: AISidebarProps["renderActionsTrigger"]
   setRef: (node: HTMLDivElement | null) => void
 }