@exegia/corpora-ui 0.19.0 → 0.21.0

package/src/components/blocks/nav/sidebar/ai-sidebar.tsx

@@ -1,57 +1,125 @@
-"use client";
+"use client"
 
-import { AnimatePresence } from "motion/react";
-import { cn } from "@/lib/utils";
-import type { AISidebarProps, FlatResource } from "./type"
-import { useAISidebar, type UseAISidebarOptions } from "./use-ai-sidebar"
+import { useMemo } from "react"
+import { AnimatePresence } from "motion/react"
+import { cn } from "@/lib/utils"
+import type {
+  AISidebarComponentProps,
+  AISidebarContextValue,
+  AISidebarController,
+  AISidebarProps,
+  AISidebarViewProps,
+  FlatResource,
+} from "./type"
+import { useAISidebar } from "./use-ai-sidebar"
+import { AISidebarContext } from "./sidebar-context"
 import { ResourceRow } from "./sidebar-row"
 
-export function AISidebar({
+/**
+ * Resource tree for the app rail: nested rows with drag-and-drop reorder,
+ * inline rename, per-row action menus and full keyboard navigation.
+ *
+ * Two ways to drive it. Pass the data and handlers as props and the block
+ * owns its state, or hold a `useAISidebar` controller and pass it as
+ * `controller` — the same rendering, but select, expand, rename, reorder
+ * and menu state are then callable from anywhere in your app.
+ */
+export function AISidebar(props: AISidebarComponentProps) {
+  // Two components rather than one: hooks may not be called conditionally,
+  // and the controller form has no options to build a fallback controller
+  // from. Nobody switches a sidebar between the two forms at runtime.
+  return props.controller ? (
+    <AISidebarView {...viewProps(props)} controller={props.controller} />
+  ) : (
+    <UncontrolledAISidebar {...props} />
+  )
+}
+
+/** The props form: builds its own controller and renders through it. */
+function UncontrolledAISidebar(props: AISidebarProps) {
+  const {
+    renderIcon: _icon,
+    renderMenu: _menu,
+    renderActionsTrigger: _trigger,
+    ariaLabel: _label,
+    className: _className,
+    controller: _controller,
+    ...options
+  } = props
+  const controller = useAISidebar(options)
+  return <AISidebarView {...viewProps(props)} controller={controller} />
+}
+
+function viewProps(props: AISidebarComponentProps): AISidebarViewProps {
+  return {
+    renderIcon: props.renderIcon,
+    renderMenu: props.renderMenu,
+    renderActionsTrigger: props.renderActionsTrigger,
+    ariaLabel: props.ariaLabel,
+    className: props.className,
+  }
+}
+
+/** Rendering only — every piece of state lives on the controller. */
+function AISidebarView({
+  controller,
   renderIcon,
   renderMenu,
   renderActionsTrigger,
   ariaLabel = "Resources",
   className,
-  ...options
-}: AISidebarProps) {
-  const {
-    flat,
-    selectedId,
-    expandedIds,
-    focusedId,
-    setFocusedId,
-    draggingId,
-    dropTarget,
-    hoveredId,
-    hoverLayoutId,
-    handleRowHover,
-    clearHover,
-    menuOpenId,
-    renamingId,
-    setRenamingId,
-    announcement,
-    select,
-    toggle,
-    handleKeyDown,
-    handleRootDragOver,
-    handleDrop,
-    handleRowDragStart,
-    handleRowDragEnd,
-    handleRowDragOver,
-    commitRename,
-    handleMenuOpenChange,
-    setRowRef,
-  } = useAISidebar(options as UseAISidebarOptions);
+}: AISidebarViewProps & { controller: AISidebarController }) {
+  const { dnd, hover } = controller
+  const { draggingId, dropTarget } = dnd
+
+  // Rows take the sidebar's id and the stable handlers, never the controller
+  // — so this value keeps its identity and a hover or a toggle re-renders
+  // only the rows whose own atoms changed. Deps name each function because
+  // `dnd` itself carries live drag state and changes identity with it.
+  const context = useMemo<AISidebarContextValue>(
+    () => ({
+      sidebarId: controller.sidebarId,
+      hoverLayoutId: hover.layoutId,
+      renderIcon,
+      renderMenu,
+      renderActionsTrigger,
+      setRowRef: controller.setRowRef,
+      onRowKeyDown: controller.onRowKeyDown,
+      onRowHover: hover.onRowHover,
+      closeMenu: controller.closeMenu,
+      dnd: {
+        onDrop: dnd.onDrop,
+        onRowDragStart: dnd.onRowDragStart,
+        onRowDragEnd: dnd.onRowDragEnd,
+        onRowDragOver: dnd.onRowDragOver,
+      },
+    }),
+    [
+      controller.sidebarId,
+      controller.setRowRef,
+      controller.onRowKeyDown,
+      controller.closeMenu,
+      hover.layoutId,
+      hover.onRowHover,
+      renderIcon,
+      renderMenu,
+      renderActionsTrigger,
+      dnd.onDrop,
+      dnd.onRowDragStart,
+      dnd.onRowDragEnd,
+      dnd.onRowDragOver,
+    ]
+  )
 
   return (
-    <>
+    <AISidebarContext.Provider value={context}>
       <div
         role="tree"
         aria-label={ariaLabel}
         aria-multiselectable="false"
-        onDragOver={handleRootDragOver}
-        onDrop={handleDrop}
-        onMouseLeave={clearHover}
+        onDragOver={dnd.onRootDragOver}
+        onDrop={dnd.onDrop}
+        onMouseLeave={hover.clear}
         className={cn(
           "relative min-w-0 flex-col gap-0.5 [overflow-anchor:none] group-data-[state=collapsed]/sidebar:hidden",
           draggingId && "pb-9 select-none",
@@ -59,40 +127,8 @@ export function AISidebar({
         )}
       >
         <AnimatePresence initial={false}>
-          {flat.map((row: FlatResource) => (
-            <ResourceRow
-              key={row.item.id}
-              row={row}
-              active={selectedId === row.item.id}
-              expanded={expandedIds.has(row.item.id)}
-              focused={focusedId === row.item.id}
-              draggingId={draggingId}
-              dropTarget={dropTarget}
-              menuOpen={menuOpenId === row.item.id}
-              renaming={renamingId === row.item.id}
-              hoverActive={hoveredId !== null && !draggingId}
-              hoverPill={
-                hoveredId === row.item.id && !draggingId && !row.item.disabled
-              }
-              hoverLayoutId={hoverLayoutId}
-              onHoverChange={(hovered) => handleRowHover(row.item.id, hovered)}
-              onFocus={() => setFocusedId(row.item.id)}
-              onSelect={() => select(row.item.id)}
-              onToggle={() => toggle(row.item.id)}
-              onKeyDown={(event) => handleKeyDown(event, row)}
-              onRenameStart={() => setRenamingId(row.item.id)}
-              onRenameCancel={() => setRenamingId(null)}
-              onRenameCommit={(label) => commitRename(row, label)}
-              onMenuOpenChange={(open) => handleMenuOpenChange(row, open)}
-              onDragStart={handleRowDragStart}
-              onDragEnd={handleRowDragEnd}
-              onDragOver={handleRowDragOver}
-              onDrop={handleDrop}
-              renderIcon={renderIcon}
-              renderMenu={renderMenu}
-              renderActionsTrigger={renderActionsTrigger}
-              setRef={(node) => setRowRef(row.item.id, node)}
-            />
+          {controller.flat.map((row: FlatResource) => (
+            <ResourceRow key={row.item.id} row={row} />
           ))}
         </AnimatePresence>
 
@@ -107,8 +143,8 @@ export function AISidebar({
         )}
       </div>
       <span className="sr-only" aria-live="polite">
-        {announcement}
+        {controller.announcement}
       </span>
-    </>
+    </AISidebarContext.Provider>
   )
 }

package/src/components/blocks/nav/sidebar/index.ts

@@ -3,7 +3,59 @@ import { MarqueeLabel } from "./marquee-label.tsx"
 import { ResourceRow } from "./sidebar-row.tsx"
 import { SidebarIcon } from "./sidebar-icon.tsx"
 export { useAISidebar, type UseAISidebarOptions } from "./use-ai-sidebar.ts"
+export {
+  useAISidebarActions,
+  useAISidebarState,
+} from "./use-ai-sidebar-state.ts"
 export type * from "./type.ts"
+// The public atom surface. `@internal` atoms (config, handlers, mount, the
+// projections, the owned-* loop guards) stay unexported on purpose —
+// `export *` would make every internal a breaking-change surface for
+// consumer apps.
+export {
+  aiSidebarActiveIdAtom,
+  aiSidebarAnnouncementAtom,
+  aiSidebarDraggingIdAtom,
+  aiSidebarDropTargetAtom,
+  aiSidebarExpandedIdsAtom,
+  aiSidebarFlatAtom,
+  aiSidebarFocusedIdAtom,
+  aiSidebarHoverActiveAtom,
+  aiSidebarHoveredIdAtom,
+  aiSidebarItemsAtom,
+  aiSidebarMenuOpenIdAtom,
+  aiSidebarMovePendingAtom,
+  aiSidebarRenamingIdAtom,
+  aiSidebarRowDraggingAtom,
+  aiSidebarRowDropAtom,
+  aiSidebarRowExpandedAtom,
+  aiSidebarRowFocusedAtom,
+  aiSidebarRowHoveredAtom,
+  aiSidebarRowMenuOpenAtom,
+  aiSidebarRowRenamingAtom,
+  aiSidebarRowSelectedAtom,
+  aiSidebarStateAtom,
+  cancelAISidebarRenameAtom,
+  clearAISidebarHoverAtom,
+  closeAISidebarMenuAtom,
+  collapseAISidebarRowAtom,
+  collapseAllAISidebarRowsAtom,
+  endAISidebarDragAtom,
+  expandAISidebarRowAtom,
+  expandAllAISidebarRowsAtom,
+  focusAISidebarRowAtom,
+  moveAISidebarRowAtom,
+  openAISidebarMenuAtom,
+  removeAISidebarInstance,
+  renameAISidebarRowAtom,
+  resetAISidebarAtom,
+  revealAISidebarRowAtom,
+  selectAISidebarRowAtom,
+  setAISidebarHoveredAtom,
+  setAISidebarItemsAtom,
+  startAISidebarRenameAtom,
+  toggleAISidebarRowAtom,
+} from "./ai-sidebar-atom.ts"
 
 export { AISidebar, MarqueeLabel, ResourceRow, SidebarIcon }
 
@@ -11,5 +63,5 @@ export const Sidebar = {
   Wrapper: AISidebar,
   MarqueeLabel,
   Row: ResourceRow,
-  Icon: SidebarIcon
+  Icon: SidebarIcon,
 }

package/src/components/blocks/nav/sidebar/sidebar-context.ts

@@ -0,0 +1,15 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+import type { AISidebarContextValue } from "./type.ts";
+
+export const AISidebarContext = createContext<AISidebarContextValue | null>(
+  null
+);
+
+export function useAISidebarContext(): AISidebarContextValue {
+  const context = useContext(AISidebarContext);
+  if (!context) throw new Error("Sidebar rows must render inside <AISidebar>.");
+  return context;
+}

package/src/components/blocks/nav/sidebar/sidebar-row.tsx

@@ -1,10 +1,15 @@
+"use client"
+
 import {
   cloneElement,
+  memo,
+  useCallback,
   useEffect,
   useRef,
   useState,
   type MouseEvent,
 } from "react"
+import { useAtomValue, useSetAtom } from "jotai"
 import type { ResourceRowProps } from "./type"
 import {
   AnimatePresence,
@@ -15,6 +20,25 @@ import {
 import { ChevronRight, MoreHorizontal, Pencil } from "lucide-react"
 import { SPRING_LAYOUT } from "@/lib/ease.ts"
 import { cn } from "@/lib/utils.ts"
+import {
+  aiSidebarHoverActiveAtom,
+  aiSidebarRowDraggingAtom,
+  aiSidebarRowDropAtom,
+  aiSidebarRowExpandedAtom,
+  aiSidebarRowFocusedAtom,
+  aiSidebarRowHoveredAtom,
+  aiSidebarRowMenuOpenAtom,
+  aiSidebarRowRenamingAtom,
+  aiSidebarRowSelectedAtom,
+  cancelAISidebarRenameAtom,
+  focusAISidebarRowAtom,
+  openAISidebarMenuAtom,
+  renameAISidebarRowAtom,
+  selectAISidebarRowAtom,
+  startAISidebarRenameAtom,
+  toggleAISidebarRowAtom,
+} from "./ai-sidebar-atom.ts"
+import { useAISidebarContext } from "./sidebar-context.ts"
 import { canContain } from "./utils"
 import { SidebarIcon } from "./sidebar-icon"
 import { MarqueeLabel } from "./marquee-label"
@@ -23,7 +47,7 @@ import {
   MorphPopoverContent,
   MorphPopoverTrigger,
 } from "@/components/motion/popover-morph.tsx"
-import { Button } from "@/components/ui/button";
+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
@@ -41,46 +65,74 @@ const reducedPillVariants: Variants = {
   exit: (hoverActive: boolean) => (!hoverActive ? { opacity: 0 } : {}),
 }
 
-export function ResourceRow({
-  row,
-  active,
-  expanded,
-  focused,
-  draggingId,
-  dropTarget,
-  menuOpen,
-  renaming,
-  onDragEnd,
-  onDragOver,
-  onDragStart,
-  onDrop,
-  onFocus,
-  onKeyDown,
-  onMenuOpenChange,
-  onRenameCancel,
-  onRenameCommit,
-  onRenameStart,
-  onSelect,
-  onToggle,
-  hoverActive = false,
-  hoverPill = false,
-  hoverLayoutId,
-  onHoverChange,
-  renderIcon,
-  renderMenu,
-  renderActionsTrigger,
-  setRef,
-}: ResourceRowProps) {
+function ResourceRowImpl({ row }: ResourceRowProps) {
+  const {
+    sidebarId,
+    hoverLayoutId,
+    renderIcon,
+    renderMenu,
+    renderActionsTrigger,
+    setRowRef,
+    onRowKeyDown,
+    onRowHover,
+    closeMenu,
+    dnd,
+  } = useAISidebarContext()
   const reduce = useReducedMotion() ?? false
+
+  // One subscription per field, per row. A row re-renders when its own
+  // selection, expansion, focus, rename, menu, drag or hover state changes
+  // and sits still while a sibling's does — reading the controller off
+  // context instead re-rendered every row on every change.
+  const active = useAtomValue(aiSidebarRowSelectedAtom(sidebarId, row.item.id))
+  const expanded = useAtomValue(
+    aiSidebarRowExpandedAtom(sidebarId, row.item.id)
+  )
+  const focused = useAtomValue(aiSidebarRowFocusedAtom(sidebarId, row.item.id))
+  const renaming = useAtomValue(
+    aiSidebarRowRenamingAtom(sidebarId, row.item.id)
+  )
+  const menuOpen = useAtomValue(
+    aiSidebarRowMenuOpenAtom(sidebarId, row.item.id)
+  )
+  const isDragging = useAtomValue(
+    aiSidebarRowDraggingAtom(sidebarId, row.item.id)
+  )
+  const dropPosition = useAtomValue(
+    aiSidebarRowDropAtom(sidebarId, row.item.id)
+  )
+  const hoverActive = useAtomValue(aiSidebarHoverActiveAtom(sidebarId))
+  const hoverPill =
+    useAtomValue(aiSidebarRowHoveredAtom(sidebarId, row.item.id)) &&
+    !row.item.disabled
+
+  const select = useSetAtom(selectAISidebarRowAtom(sidebarId))
+  const toggleExpanded = useSetAtom(toggleAISidebarRowAtom(sidebarId))
+  const setFocusedRow = useSetAtom(focusAISidebarRowAtom(sidebarId))
+  const startRename = useSetAtom(startAISidebarRenameAtom(sidebarId))
+  const cancelRename = useSetAtom(cancelAISidebarRenameAtom(sidebarId))
+  const rename = useSetAtom(renameAISidebarRowAtom(sidebarId))
+  const openMenu = useSetAtom(openAISidebarMenuAtom(sidebarId))
+
+  const onMenuOpenChange = useCallback(
+    (open: boolean) => {
+      if (open) openMenu(row.item.id)
+      else closeMenu()
+    },
+    [closeMenu, openMenu, row.item.id]
+  )
+
+  const setRef = useCallback(
+    (node: HTMLDivElement | null) => setRowRef(row.item.id, node),
+    [row.item.id, setRowRef]
+  )
+
   const [hovered, setHovered] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
   const skipRenameBlurRef = useRef(false)
   const draggedRef = useRef(false)
   const [draft, setDraft] = useState(row.item.label)
   const acceptsChildren = canContain(row.item)
-  const isDragging = draggingId === row.item.id
-  const dropPosition =
-    dropTarget?.id === row.item.id ? dropTarget.position : null
 
   useEffect(() => {
     if (!renaming) return
@@ -96,14 +148,14 @@ export function ResourceRow({
     close: () => onMenuOpenChange(false),
     rename: () => {
       onMenuOpenChange(false)
-      onRenameStart()
+      startRename(row.item.id)
     },
   }) ?? (
     <button
       type="button"
       onClick={() => {
         onMenuOpenChange(false)
-        onRenameStart()
+        startRename(row.item.id)
       }}
       className="flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-xs text-foreground transition-colors outline-none hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
     >
@@ -127,8 +179,8 @@ export function ResourceRow({
       data-menu-open={menuOpen || undefined}
       data-drop={dropPosition ?? undefined}
       data-dragging={isDragging || undefined}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
+      onFocus={() => setFocusedRow(row.item.id)}
+      onKeyDown={(event) => onRowKeyDown(event, row)}
       onClick={(event) => {
         if (
           event.defaultPrevented ||
@@ -137,34 +189,34 @@ export function ResourceRow({
           row.item.disabled
         )
           return
-        if (acceptsChildren) onToggle()
-        else onSelect()
+        if (acceptsChildren) toggleExpanded(row.item.id)
+        else select(row.item.id)
       }}
       onDoubleClick={(event) => {
         if (acceptsChildren || row.item.disabled) return
         event.preventDefault()
-        onRenameStart()
+        startRename(row.item.id)
       }}
       onMouseEnter={() => {
         setHovered(true)
-        onHoverChange?.(true)
+        onRowHover(row.item.id, true)
       }}
       onMouseLeave={() => {
         setHovered(false)
-        onHoverChange?.(false)
+        onRowHover(row.item.id, false)
       }}
       onDragStartCapture={(event) => {
         draggedRef.current = true
-        onDragStart(event, row.item.id)
+        dnd.onRowDragStart(event, row.item.id)
       }}
       onDragEndCapture={() => {
-        onDragEnd()
+        dnd.onRowDragEnd()
         requestAnimationFrame(() => {
           draggedRef.current = false
         })
       }}
-      onDragOver={(event) => onDragOver(event, row)}
-      onDrop={onDrop}
+      onDragOver={(event) => dnd.onRowDragOver(event, row)}
+      onDrop={dnd.onDrop}
       className={cn(
         "group/resource relative flex min-h-9 min-w-0 cursor-pointer items-center gap-2.5 rounded-md pr-3 text-sm outline-none",
         "text-muted-foreground transition-[color,background-color,scale] duration-150 ease-smooth-out hover:text-foreground motion-reduce:transition-none",
@@ -226,17 +278,17 @@ export function ResourceRow({
           onClick={(event) => event.stopPropagation()}
           onDoubleClick={(event) => event.stopPropagation()}
           onBlur={() => {
-            if (!skipRenameBlurRef.current) onRenameCommit(draft)
+            if (!skipRenameBlurRef.current) rename(row.item.id, draft)
           }}
           onKeyDown={(event) => {
             event.stopPropagation()
             if (event.key === "Enter") {
               skipRenameBlurRef.current = true
-              onRenameCommit(draft)
+              rename(row.item.id, draft)
             }
             if (event.key === "Escape") {
               skipRenameBlurRef.current = true
-              onRenameCancel()
+              cancelRename()
             }
           }}
           className="relative h-7 min-w-0 flex-1 text-sm text-foreground outline-none focus-visible:ring-0 focus-visible:ring-ring"
@@ -307,3 +359,20 @@ export function ResourceRow({
     </motion.div>
   )
 }
+
+/** `flat` is rebuilt whenever expansion changes, so its `FlatResource`
+ * wrappers are fresh objects even for rows nothing happened to. The
+ * comparator looks through the wrapper at what a row actually renders from —
+ * its item (stable unless the data changed), depth and parent — so a sibling
+ * opening does not walk every row. Each row's own state reaches it through
+ * its atoms instead. */
+function sameRow(prev: ResourceRowProps, next: ResourceRowProps): boolean {
+  return (
+    prev.row.item === next.row.item &&
+    prev.row.depth === next.row.depth &&
+    prev.row.parentId === next.row.parentId
+  )
+}
+
+export const ResourceRow = memo(ResourceRowImpl, sameRow)
+ResourceRow.displayName = "ResourceRow"