@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,150 +0,0 @@
-"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

@@ -1,67 +0,0 @@
-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/marquee-label.tsx

@@ -1,59 +0,0 @@
-import { motion, useReducedMotion } from "motion/react"
-import { useEffect, useRef, useState } from "react"
-import { ROW_REVEAL } from "./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/blocks/sidebar/sidebar-context.ts

@@ -1,15 +0,0 @@
-"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

@@ -1,14 +0,0 @@
-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

@@ -1,378 +0,0 @@
-"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"