@exegia/corpora-ui 0.10.0 → 0.11.0

package/package.json

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

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

@@ -0,0 +1,116 @@
+"use client";
+
+import { AnimatePresence } from "motion/react";
+import { cn } from "@/lib/utils";
+import type { AISidebarProps } from "@/components/agents/type.ts"
+import { useAISidebar } from "@/components/agents/use-ai-sidebar.ts"
+import { ResourceRow } from "@/components/agents/sidebar-row.tsx"
+
+export function AISidebar({
+  renderIcon,
+  renderMenu,
+  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);
+
+  return (
+    <>
+      <div
+        role="tree"
+        aria-label={ariaLabel}
+        aria-multiselectable="false"
+        onDragOver={handleRootDragOver}
+        onDrop={handleDrop}
+        onMouseLeave={clearHover}
+        className={cn(
+          "relative flex min-w-0 flex-col gap-0.5 [overflow-anchor:none] group-data-[state=collapsed]/sidebar:hidden",
+          draggingId && "select-none pb-9",
+          className,
+        )}
+      >
+        <AnimatePresence initial={false}>
+          {flat.map((row) => (
+            <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}
+              setRef={(node) => setRowRef(row.item.id, node)}
+            />
+          ))}
+        </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-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"
+          >
+            Move to top level
+          </div>
+        ) : null}
+      </div>
+      <span className="sr-only" aria-live="polite">
+        {announcement}
+      </span>
+    </>
+  );
+}

package/src/components/agents/index.ts

@@ -0,0 +1,14 @@
+
+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 UseAISidebarOptions } from "./use-ai-sidebar.ts"
+export type * from "./type.ts"
+
+export const Sidebar = {
+  Wrapper: AISidebar,
+  MarqueeLabel,
+  Row: ResourceRow,
+  Icon: SidebarIcon
+}

package/src/components/agents/marquee-label.tsx

@@ -0,0 +1,59 @@
+import { motion, useReducedMotion } from "motion/react"
+import { useEffect, useRef, useState } from "react"
+import { ROW_REVEAL } from "@/components/agents/utils.ts"
+
+export function MarqueeLabel({
+  active,
+  children,
+}: {
+  active: boolean
+  children: string
+}) {
+  const reduce = useReducedMotion() ?? false
+  const viewportRef = useRef<HTMLSpanElement>(null)
+  const labelRef = useRef<HTMLSpanElement>(null)
+  const [distance, setDistance] = useState(0)
+
+  useEffect(() => {
+    const measure = () => {
+      const viewport = viewportRef.current
+      const label = labelRef.current
+      if (!viewport || !label) return
+      setDistance(
+        label.scrollWidth > viewport.clientWidth ? label.scrollWidth + 24 : 0
+      )
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
+    if (viewportRef.current) observer.observe(viewportRef.current)
+    if (labelRef.current) observer.observe(labelRef.current)
+    return () => observer.disconnect()
+  }, [])
+
+  const running = active && distance > 0 && !reduce
+
+  return (
+    <span
+      ref={viewportRef}
+      className="relative block min-w-0 flex-1 overflow-hidden"
+    >
+      <motion.span
+        className="flex w-max items-center gap-6 whitespace-nowrap"
+        animate={{ x: running ? [0, -distance] : 0 }}
+        transition={
+          running
+            ? {
+                duration: Math.max(2.4, distance / 34),
+                ease: "linear",
+                repeat: Number.POSITIVE_INFINITY,
+                repeatDelay: 2,
+              }
+            : ROW_REVEAL
+        }
+      >
+        <span ref={labelRef}>{children}</span>
+        {running ? <span aria-hidden="true">{children}</span> : null}
+      </motion.span>
+    </span>
+  )
+}

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

@@ -0,0 +1,14 @@
+import type { SidebarResource } from "@/components/agents/type.ts"
+import { Bookmark, FileText, Folder, FolderOpen } from "lucide-react"
+
+export function SidebarIcon(item: SidebarResource, 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/agents/sidebar-row.tsx

@@ -0,0 +1,271 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import type { ResourceRowProps } from "@/components/agents/type.ts"
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type Variants,
+} from "motion/react"
+import { 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"
+import { SidebarIcon } from "@/components/agents/sidebar-icon.tsx"
+import { MarqueeLabel } from "@/components/agents/marquee-label.tsx"
+import {
+  MorphPopover,
+  MorphPopoverContent,
+  MorphPopoverTrigger,
+} from "@/components/motion/popover-morph.tsx"
+
+// 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 } : {}),
+}
+
+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,
+  setRef,
+}: ResourceRowProps) {
+  const reduce = useReducedMotion() ?? false
+  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
+    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)
+      onRenameStart()
+    },
+  }) ?? (
+    <button
+      type="button"
+      onClick={() => {
+        onMenuOpenChange(false)
+        onRenameStart()
+      }}
+      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"
+    >
+      <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={onFocus}
+      onKeyDown={onKeyDown}
+      onClick={(event) => {
+        if (
+          event.defaultPrevented ||
+          draggedRef.current ||
+          renaming ||
+          row.item.disabled
+        )
+          return
+        if (acceptsChildren) onToggle()
+        else onSelect()
+      }}
+      onDoubleClick={(event) => {
+        if (acceptsChildren || row.item.disabled) return
+        event.preventDefault()
+        onRenameStart()
+      }}
+      onMouseEnter={() => {
+        setHovered(true)
+        onHoverChange?.(true)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+        onHoverChange?.(false)
+      }}
+      onDragStartCapture={(event) => {
+        draggedRef.current = true
+        onDragStart(event, row.item.id)
+      }}
+      onDragEndCapture={() => {
+        onDragEnd()
+        requestAnimationFrame(() => {
+          draggedRef.current = false
+        })
+      }}
+      onDragOver={(event) => onDragOver(event, row)}
+      onDrop={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-accent text-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-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) onRenameCommit(draft)
+          }}
+          onKeyDown={(event) => {
+            event.stopPropagation()
+            if (event.key === "Enter") {
+              skipRenameBlurRef.current = true
+              onRenameCommit(draft)
+            }
+            if (event.key === "Escape") {
+              skipRenameBlurRef.current = true
+              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"
+        />
+      ) : (
+        <MarqueeLabel active={hovered || menuOpen}>
+          {row.item.label}
+        </MarqueeLabel>
+      )}
+
+      {!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>
+          </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}
+    </motion.div>
+  )
+}

package/src/components/agents/type.ts

@@ -0,0 +1,89 @@
+import type { ReactNode, DragEvent, KeyboardEvent } from "react"
+
+export type SidebarResourceKind = "folder" | "project" | "file" | "bookmark"
+
+export interface SidebarResource {
+  id: string
+  label: string
+  kind: SidebarResourceKind
+  children?: SidebarResource[]
+  disabled?: boolean
+}
+
+export type SidebarResourceDropPosition = "before" | "inside" | "after"
+
+export interface SidebarResourceMove {
+  itemId: string
+  targetId: string | null
+  position: SidebarResourceDropPosition
+}
+
+export interface SidebarResourceMenuControls {
+  close: () => void
+  rename: () => void
+}
+
+export interface AISidebarProps {
+  items?: SidebarResource[]
+  defaultItems?: SidebarResource[]
+  onItemsChange?: (items: SidebarResource[]) => void
+  /** Reject the promise to roll the optimistic move back. */
+  onMove?: (move: SidebarResourceMove) => void | Promise<void>
+  onMoveError?: (error: unknown, move: SidebarResourceMove) => void
+  onRename?: (item: SidebarResource, label: string) => void | Promise<void>
+  activeId?: string | null
+  defaultActiveId?: string | null
+  onActiveChange?: (id: string) => void
+  defaultExpandedIds?: string[]
+  renderIcon?: (item: SidebarResource) => ReactNode
+  renderMenu?: (
+    item: SidebarResource,
+    controls: SidebarResourceMenuControls
+  ) => ReactNode
+  ariaLabel?: string
+  className?: string
+}
+
+export interface FlatResource {
+  item: SidebarResource
+  depth: number
+  parentId: string | null
+}
+
+export interface DropTarget {
+  id: string | null
+  position: SidebarResourceDropPosition
+}
+
+export interface ResourceRowProps {
+  row: FlatResource
+  active: boolean
+  expanded: boolean
+  focused: boolean
+  draggingId: string | null
+  dropTarget: DropTarget | null
+  menuOpen: boolean
+  renaming: boolean
+  onDragEnd: () => void
+  onDragOver: (event: DragEvent<HTMLDivElement>, row: FlatResource) => void
+  onDragStart: (event: DragEvent<HTMLDivElement>, id: string) => void
+  onDrop: (event: DragEvent<HTMLDivElement>) => void
+  onFocus: () => void
+  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
+  onMenuOpenChange: (open: boolean) => void
+  onRenameCancel: () => void
+  onRenameCommit: (label: string) => void
+  onRenameStart: () => void
+  onSelect: () => void
+  onToggle: () => void
+  /** Some row in the tree is hovered — mounts the pill fade wrapper. */
+  hoverActive?: boolean
+  /** This row owns the sliding hover pill. */
+  hoverPill?: boolean
+  /** Shared motion layoutId that lets the pill travel between rows. */
+  hoverLayoutId?: string
+  onHoverChange?: (hovered: boolean) => void
+  renderIcon?: (item: SidebarResource) => ReactNode
+  renderMenu?: AISidebarProps["renderMenu"]
+  setRef: (node: HTMLDivElement | null) => void
+}