@exegia/corpora-ui 1.0.0 → 3.0.0

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

@@ -0,0 +1,150 @@
+"use client"
+
+import { useMemo } from "react"
+import { AnimatePresence } from "motion/react"
+import { cn } from "@/lib/utils"
+import type {
+  TAISidebarComponentProps,
+  IAISidebarContextValue,
+  IAISidebarController,
+  IAISidebarProps,
+  TAISidebarViewProps,
+  IFlatResource,
+} from "./type"
+import { useAISidebar } from "./use-ai-sidebar"
+import { AISidebarContext } from "./sidebar-context"
+import { ResourceRow } from "./sidebar-row"
+
+/**
+ * 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: TAISidebarComponentProps) {
+  // 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: IAISidebarProps) {
+  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: TAISidebarComponentProps): TAISidebarViewProps {
+  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,
+}: TAISidebarViewProps & { controller: IAISidebarController }) {
+  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<IAISidebarContextValue>(
+    () => ({
+      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={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",
+          className
+        )}
+      >
+        <AnimatePresence initial={false}>
+          {controller.flat.map((row: IFlatResource) => (
+            <ResourceRow key={row.item.id} row={row} />
+          ))}
+        </AnimatePresence>
+
+        {draggingId && (
+          <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-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>
+        )}
+      </div>
+      <span className="sr-only" aria-live="polite">
+        {controller.announcement}
+      </span>
+    </AISidebarContext.Provider>
+  )
+}

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

@@ -0,0 +1,67 @@
+import { AISidebar } from "./ai-sidebar"
+import { MarqueeLabel } from "./marquee-label.tsx"
+import { ResourceRow } from "./sidebar-row.tsx"
+import { SidebarIcon } from "./sidebar-icon.tsx"
+export { useAISidebar, type IUseAISidebarOptions } 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 }
+
+export const Sidebar = {
+  Wrapper: AISidebar,
+  MarqueeLabel,
+  Row: ResourceRow,
+  Icon: SidebarIcon,
+}

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

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

package/src/components/blocks/sidebar/sidebar-icon.tsx

@@ -0,0 +1,14 @@
+import type { ISidebarResource } from "./type.ts"
+import { Bookmark, FileText, Folder, FolderOpen } from "lucide-react"
+
+export function SidebarIcon(item: ISidebarResource, expanded: boolean) {
+  const Icon =
+    item.kind === "folder" || item.kind === "project"
+      ? expanded
+        ? FolderOpen
+        : Folder
+      : item.kind === "bookmark"
+        ? Bookmark
+        : FileText
+  return <Icon className="size-4" />
+}

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

@@ -0,0 +1,378 @@
+"use client"
+
+import {
+  cloneElement,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+} from "react"
+import { useAtomValue, useSetAtom } from "jotai"
+import type { IResourceRowProps } from "./type"
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type Variants,
+} from "motion/react"
+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"
+import {
+  MorphPopover,
+  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
+// layoutId pill slides instead of crossfading.
+const pillVariants: Variants = {
+  initial: { opacity: 0, filter: "blur(6px)" },
+  animate: { opacity: 1, filter: "blur(0px)" },
+  exit: (hoverActive: boolean) =>
+    !hoverActive ? { opacity: 0, filter: "blur(6px)" } : {},
+}
+
+const reducedPillVariants: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: (hoverActive: boolean) => (!hoverActive ? { opacity: 0 } : {}),
+}
+
+function ResourceRowImpl({ row }: IResourceRowProps) {
+  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)
+
+  useEffect(() => {
+    if (!renaming) return
+    skipRenameBlurRef.current = false
+    // setDraft(row.item.label);
+    requestAnimationFrame(() => {
+      inputRef.current?.focus()
+      inputRef.current?.select()
+    })
+  }, [renaming, row.item.label])
+
+  const menu = renderMenu?.(row.item, {
+    close: () => onMenuOpenChange(false),
+    rename: () => {
+      onMenuOpenChange(false)
+      startRename(row.item.id)
+    },
+  }) ?? (
+    <button
+      type="button"
+      onClick={() => {
+        onMenuOpenChange(false)
+        startRename(row.item.id)
+      }}
+      className="flex h-8 w-full items-center gap-2 rounded-md 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"
+    >
+      <Pencil aria-hidden="true" className="size-3.5" />
+      Rename
+    </button>
+  )
+
+  return (
+    <motion.div
+      ref={setRef}
+      layout="position"
+      transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
+      role="treeitem"
+      aria-level={row.depth + 1}
+      aria-selected={acceptsChildren ? undefined : active}
+      aria-expanded={acceptsChildren ? expanded : undefined}
+      aria-disabled={row.item.disabled || undefined}
+      tabIndex={focused ? 0 : -1}
+      draggable={!row.item.disabled && !renaming}
+      data-menu-open={menuOpen || undefined}
+      data-drop={dropPosition ?? undefined}
+      data-dragging={isDragging || undefined}
+      onFocus={() => setFocusedRow(row.item.id)}
+      onKeyDown={(event) => onRowKeyDown(event, row)}
+      onClick={(event) => {
+        if (
+          event.defaultPrevented ||
+          draggedRef.current ||
+          renaming ||
+          row.item.disabled
+        )
+          return
+        if (acceptsChildren) toggleExpanded(row.item.id)
+        else select(row.item.id)
+      }}
+      onDoubleClick={(event) => {
+        if (acceptsChildren || row.item.disabled) return
+        event.preventDefault()
+        startRename(row.item.id)
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+        onRowHover(row.item.id, true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+        onRowHover(row.item.id, false)
+      }}
+      onDragStartCapture={(event) => {
+        draggedRef.current = true
+        dnd.onRowDragStart(event, row.item.id)
+      }}
+      onDragEndCapture={() => {
+        dnd.onRowDragEnd()
+        requestAnimationFrame(() => {
+          draggedRef.current = false
+        })
+      }}
+      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",
+        !row.item.disabled &&
+          !renaming &&
+          "active:scale-97 motion-reduce:active:scale-100",
+        // Fallback for standalone rows that render without the shared pill.
+        hoverLayoutId === undefined && "hover:bg-muted",
+        "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+        "data-[menu-open=true]:bg-muted data-[menu-open=true]:text-foreground",
+        "data-[dragging=true]:opacity-40",
+        "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-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` }}
+    >
+      {hoverLayoutId ? (
+        <AnimatePresence custom={hoverActive}>
+          {hoverActive ? (
+            <motion.span
+              aria-hidden="true"
+              variants={reduce ? reducedPillVariants : pillVariants}
+              initial="initial"
+              animate="animate"
+              exit="exit"
+              custom={hoverActive}
+              className="pointer-events-none absolute inset-0"
+            >
+              {hoverPill ? (
+                <motion.span
+                  layoutId={hoverLayoutId}
+                  transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
+                  className="block h-full w-full rounded-md bg-foreground/8 dark:bg-muted/50"
+                />
+              ) : null}
+            </motion.span>
+          ) : null}
+        </AnimatePresence>
+      ) : null}
+      <span
+        aria-hidden="true"
+        className="relative grid size-5 shrink-0 place-items-center"
+      >
+        {renderIcon?.(row.item) ?? SidebarIcon(row.item, expanded)}
+      </span>
+
+      {renaming ? (
+        <input
+          ref={inputRef}
+          value={draft}
+          aria-label={`Rename ${row.item.label}`}
+          onChange={(event) => setDraft(event.target.value)}
+          draggable={false}
+          onClick={(event) => event.stopPropagation()}
+          onDoubleClick={(event) => event.stopPropagation()}
+          onBlur={() => {
+            if (!skipRenameBlurRef.current) rename(row.item.id, draft)
+          }}
+          onKeyDown={(event) => {
+            event.stopPropagation()
+            if (event.key === "Enter") {
+              skipRenameBlurRef.current = true
+              rename(row.item.id, draft)
+            }
+            if (event.key === "Escape") {
+              skipRenameBlurRef.current = true
+              cancelRename()
+            }
+          }}
+          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}>
+          {row.item.label}
+        </MarqueeLabel>
+      )}
+
+      {!renaming && !row.item.disabled ? (
+        <MorphPopover open={menuOpen} onOpenChange={onMenuOpenChange}>
+          <MorphPopoverTrigger>
+            {(() => {
+              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-md 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"
+            align="end"
+            sideOffset={8}
+            radius={12}
+            className="w-40 p-1.5"
+          >
+            <div data-sidebar-resource-menu={row.item.id}>{menu}</div>
+          </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>
+  )
+}
+
+/** `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: IResourceRowProps, next: IResourceRowProps): 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"