@exegia/corpora-ui 0.9.0 → 0.11.0

package/src/components/agents/use-ai-sidebar.ts

@@ -0,0 +1,386 @@
+"use client";
+
+import {
+  type DragEvent,
+  type KeyboardEvent,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import type {
+  AISidebarProps,
+  DropTarget,
+  FlatResource,
+  SidebarResource,
+  SidebarResourceMove,
+} from "@/components/agents/type.ts"
+import {
+  canContain,
+  containsResource,
+  findResource,
+  flattenResources,
+  moveResource,
+  renameResource,
+} from "@/components/agents/utils.ts"
+
+export type UseAISidebarOptions = Pick<
+  AISidebarProps,
+  | "items"
+  | "defaultItems"
+  | "onItemsChange"
+  | "onMove"
+  | "onMoveError"
+  | "onRename"
+  | "activeId"
+  | "defaultActiveId"
+  | "onActiveChange"
+  | "defaultExpandedIds"
+>
+
+export function useAISidebar({
+  items,
+  defaultItems = [],
+  onItemsChange,
+  onMove,
+  onMoveError,
+  onRename,
+  activeId,
+  defaultActiveId = null,
+  onActiveChange,
+  defaultExpandedIds = [],
+}: UseAISidebarOptions) {
+  const [internalItems, setInternalItems] = useState(items ?? defaultItems);
+  const [internalActiveId, setInternalActiveId] = useState(defaultActiveId);
+  const [expandedIds, setExpandedIds] = useState(
+    () => new Set(defaultExpandedIds),
+  );
+  const [focusedId, setFocusedId] = useState<string | null>(
+    activeId ?? defaultActiveId,
+  );
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+  const [menuOpenId, setMenuOpenId] = useState<string | null>(null);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const hoverLayoutId = useId();
+  const [announcement, setAnnouncement] = useState("");
+  const rowRefs = useRef(new Map<string, HTMLDivElement>());
+  const movePendingRef = useRef(false);
+  const renderedItems = internalItems;
+  const selectedId = activeId ?? internalActiveId;
+
+  const [prevItems, setPrevItems] = useState(items);
+  if (items !== prevItems) {
+    setPrevItems(items);
+    if (items) setInternalItems(items);
+  }
+
+  const flat = useMemo(
+    () => flattenResources(renderedItems, expandedIds),
+    [expandedIds, renderedItems],
+  );
+
+  const isFocusedItemStillVisible =
+    focusedId !== null && flat.some((row) => row.item.id === focusedId);
+  if (!isFocusedItemStillVisible) {
+    const firstVisibleItemId = flat[0]?.item.id ?? null;
+    if (focusedId !== firstVisibleItemId) setFocusedId(firstVisibleItemId);
+  }
+
+  useEffect(() => {
+    if (!menuOpenId) return;
+    const frame = requestAnimationFrame(() => {
+      const menus = Array.from(
+        document.querySelectorAll<HTMLElement>("[data-sidebar-resource-menu]"),
+      );
+      menus
+        .find((menu) => menu.dataset.sidebarResourceMenu === menuOpenId)
+        ?.querySelector<HTMLElement>("button, a[href]")
+        ?.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [menuOpenId]);
+
+  const updateItems = useCallback(
+    (next: SidebarResource[]) => {
+      setInternalItems(next);
+      onItemsChange?.(next);
+    },
+    [onItemsChange],
+  );
+
+  const performMove = useCallback(
+    async (move: SidebarResourceMove) => {
+      if (movePendingRef.current) {
+        setAnnouncement("Wait for the current move to finish.");
+        return;
+      }
+      const before = renderedItems;
+      const next = moveResource(before, move);
+      if (!next || next === before) return;
+
+      movePendingRef.current = true;
+      updateItems(next);
+      setDropTarget(null);
+      setDraggingId(null);
+      const moved = findResource(before, move.itemId);
+      const target = move.targetId ? findResource(before, move.targetId) : null;
+      setAnnouncement(
+        target
+          ? `Moved ${moved?.label ?? "item"} ${move.position} ${target.label}.`
+          : `Moved ${moved?.label ?? "item"} to the top level.`,
+      );
+
+      try {
+        await onMove?.(move);
+      } catch (error) {
+        updateItems(before);
+        setAnnouncement(`Move failed. ${moved?.label ?? "Item"} was restored.`);
+        onMoveError?.(error, move);
+      } finally {
+        movePendingRef.current = false;
+      }
+    },
+    [onMove, onMoveError, renderedItems, updateItems],
+  );
+
+  const focusRow = useCallback((id: string) => {
+    setFocusedId(id);
+    requestAnimationFrame(() => rowRefs.current.get(id)?.focus());
+  }, []);
+
+  const select = useCallback(
+    (id: string) => {
+      if (activeId === undefined) setInternalActiveId(id);
+      onActiveChange?.(id);
+    },
+    [activeId, onActiveChange],
+  );
+
+  const toggle = useCallback((id: string) => {
+    setExpandedIds((current) => {
+      const next = new Set(current);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>, row: FlatResource) => {
+      const index = flat.findIndex(({ item }) => item.id === row.item.id);
+      const previous = flat[index - 1];
+      const next = flat[index + 1];
+      const moveModifier = event.altKey && event.shiftKey;
+
+      if (event.key === "ArrowDown" && !moveModifier && next) {
+        event.preventDefault();
+        focusRow(next.item.id);
+        return;
+      }
+      if (event.key === "ArrowUp" && !moveModifier && previous) {
+        event.preventDefault();
+        focusRow(previous.item.id);
+        return;
+      }
+      if (event.key === "Home" && flat[0]) {
+        event.preventDefault();
+        focusRow(flat[0].item.id);
+        return;
+      }
+      if (event.key === "End" && flat.at(-1)) {
+        event.preventDefault();
+        focusRow(flat.at(-1)?.item.id ?? row.item.id);
+        return;
+      }
+
+      if (row.item.disabled) {
+        if (event.key === "ArrowLeft" && row.parentId) {
+          event.preventDefault();
+          focusRow(row.parentId);
+        } else if (
+          moveModifier ||
+          ["ArrowRight", "Enter", " ", "F2", "ContextMenu"].includes(
+            event.key,
+          ) ||
+          (event.shiftKey && event.key === "F10")
+        ) {
+          event.preventDefault();
+        }
+        return;
+      }
+
+      if (moveModifier && event.key === "ArrowUp" && previous) {
+        event.preventDefault();
+        void performMove({ itemId: row.item.id, targetId: previous.item.id, position: "before" });
+        return;
+      }
+      if (moveModifier && event.key === "ArrowDown" && next) {
+        event.preventDefault();
+        void performMove({ itemId: row.item.id, targetId: next.item.id, position: "after" });
+        return;
+      }
+      if (moveModifier && event.key === "ArrowRight" && previous && canContain(previous.item)) {
+        event.preventDefault();
+        setExpandedIds((current) => new Set(current).add(previous.item.id));
+        void performMove({ itemId: row.item.id, targetId: previous.item.id, position: "inside" });
+        return;
+      }
+      if (moveModifier && event.key === "ArrowLeft" && row.parentId) {
+        event.preventDefault();
+        void performMove({ itemId: row.item.id, targetId: row.parentId, position: "after" });
+        return;
+      }
+
+      if (event.key === "ArrowRight" && canContain(row.item)) {
+        event.preventDefault();
+        if (!expandedIds.has(row.item.id)) toggle(row.item.id);
+        else if (next?.parentId === row.item.id) focusRow(next.item.id);
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        if (expandedIds.has(row.item.id)) toggle(row.item.id);
+        else if (row.parentId) focusRow(row.parentId);
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (canContain(row.item)) toggle(row.item.id);
+        else select(row.item.id);
+      } else if (event.key === "F2") {
+        event.preventDefault();
+        setRenamingId(row.item.id);
+      } else if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
+        event.preventDefault();
+        setMenuOpenId(row.item.id);
+      }
+    },
+    [expandedIds, flat, focusRow, performMove, select, toggle],
+  );
+
+  const handleRootDragOver = useCallback(
+    (event: DragEvent<HTMLDivElement>) => {
+      if (!draggingId || event.target !== event.currentTarget) return;
+      event.preventDefault();
+      setDropTarget({ id: null, position: "after" });
+    },
+    [draggingId],
+  );
+
+  const handleDrop = useCallback(
+    (event: DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (draggingId && dropTarget) {
+        void performMove({
+          itemId: draggingId,
+          targetId: dropTarget.id,
+          position: dropTarget.position,
+        });
+      }
+    },
+    [draggingId, dropTarget, performMove],
+  );
+
+  const handleRowDragStart = useCallback(
+    (event: DragEvent<HTMLDivElement>, id: string) => {
+      setDraggingId(id);
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", id);
+    },
+    [],
+  );
+
+  const handleRowDragEnd = useCallback(() => {
+    setDraggingId(null);
+    setDropTarget(null);
+  }, []);
+
+  const handleRowDragOver = useCallback(
+    (event: DragEvent<HTMLDivElement>, targetRow: FlatResource) => {
+      if (!draggingId || draggingId === targetRow.item.id) return;
+      const source = findResource(renderedItems, draggingId);
+      if (source && containsResource(source, targetRow.item.id)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const rect = event.currentTarget.getBoundingClientRect();
+      const ratio = (event.clientY - rect.top) / rect.height;
+      const position =
+        !targetRow.item.disabled &&
+        canContain(targetRow.item) &&
+        ratio >= 0.25 &&
+        ratio <= 0.75
+          ? "inside"
+          : ratio < 0.5
+            ? "before"
+            : "after";
+      setDropTarget({ id: targetRow.item.id, position });
+    },
+    [draggingId, renderedItems],
+  );
+
+  const commitRename = useCallback(
+    (row: FlatResource, label: string) => {
+      const trimmed = label.trim();
+      setRenamingId(null);
+      if (!trimmed || trimmed === row.item.label) return;
+      const before = renderedItems;
+      updateItems(renameResource(before, row.item.id, trimmed));
+      void Promise.resolve(onRename?.(row.item, trimmed)).catch(() => {
+        updateItems(before);
+        setAnnouncement(`Rename failed. ${row.item.label} was restored.`);
+      });
+    },
+    [onRename, renderedItems, updateItems],
+  );
+
+  const handleMenuOpenChange = useCallback(
+    (row: FlatResource, open: boolean) => {
+      setMenuOpenId(open ? row.item.id : null);
+      if (!open) focusRow(row.item.id);
+    },
+    [focusRow],
+  );
+
+  const handleRowHover = useCallback((id: string, hovered: boolean) => {
+    setHoveredId((current) =>
+      hovered ? id : current === id ? null : current,
+    );
+  }, []);
+
+  const clearHover = useCallback(() => setHoveredId(null), []);
+
+  const setRowRef = useCallback((id: string, node: HTMLDivElement | null) => {
+    if (node) rowRefs.current.set(id, node);
+    else rowRefs.current.delete(id);
+  }, []);
+
+  return {
+    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,
+  };
+}

package/src/components/agents/utils.ts

@@ -0,0 +1,142 @@
+import { EASE_OUT } from "@/lib/ease.ts"
+import type { FlatResource, SidebarResource, SidebarResourceDropPosition, SidebarResourceMove } from "@/components/agents/type.ts"
+
+export const ROW_REVEAL = {
+  duration: 0.16,
+  ease: EASE_OUT,
+} as const
+
+export function canContain(item: SidebarResource) {
+  return item.kind === "folder" || item.kind === "project"
+}
+
+export function flattenResources(
+  items: SidebarResource[],
+  expanded: Set<string>,
+  depth = 0,
+  parentId: string | null = null
+): FlatResource[] {
+  return items.flatMap((item) => {
+    const row = { item, depth, parentId }
+    if (!item.children?.length || !expanded.has(item.id)) return [row]
+    return [
+      row,
+      ...flattenResources(item.children, expanded, depth + 1, item.id),
+    ]
+  })
+}
+
+export function findResource(
+  items: SidebarResource[],
+  id: string
+): SidebarResource | undefined {
+  for (const item of items) {
+    if (item.id === id) return item
+    const child = item.children ? findResource(item.children, id) : undefined
+    if (child) return child
+  }
+}
+
+
+export function containsResource(item: SidebarResource, id: string): boolean {
+  return (
+    item.id === id ||
+    item.children?.some((child) => containsResource(child, id)) === true
+  );
+}
+
+export function removeResource(
+  items: SidebarResource[],
+  id: string,
+): { items: SidebarResource[]; removed?: SidebarResource } {
+  let removed: SidebarResource | undefined;
+  const next: SidebarResource[] = [];
+
+  for (const item of items) {
+    if (item.id === id) {
+      removed = item;
+      continue;
+    }
+
+    if (item.children?.length) {
+      const childResult = removeResource(item.children, id);
+      if (childResult.removed) {
+        removed = childResult.removed;
+        next.push({ ...item, children: childResult.items });
+        continue;
+      }
+    }
+
+    next.push(item);
+  }
+
+  return { items: next, removed };
+}
+
+export function insertResource(
+  items: SidebarResource[],
+  resource: SidebarResource,
+  targetId: string | null,
+  position: SidebarResourceDropPosition,
+): SidebarResource[] {
+  if (targetId === null) return [...items, resource];
+
+  const next: SidebarResource[] = [];
+  for (const item of items) {
+    if (item.id === targetId) {
+      if (position === "before") next.push(resource, item);
+      else if (position === "after") next.push(item, resource);
+      else next.push({ ...item, children: [...(item.children ?? []), resource] });
+      continue;
+    }
+
+    if (item.children?.length) {
+      next.push({
+        ...item,
+        children: insertResource(item.children, resource, targetId, position),
+      });
+    } else {
+      next.push(item);
+    }
+  }
+  return next;
+}
+
+export function moveResource(
+  items: SidebarResource[],
+  move: SidebarResourceMove,
+): SidebarResource[] | null {
+  const source = findResource(items, move.itemId);
+  if (!source || source.disabled) return null;
+  if (move.targetId && containsResource(source, move.targetId)) return null;
+
+  const target = move.targetId ? findResource(items, move.targetId) : undefined;
+  if (
+    move.position === "inside" &&
+    (!target || target.disabled || !canContain(target))
+  )
+    return null;
+
+  const removed = removeResource(items, move.itemId);
+  if (!removed.removed) return null;
+  return insertResource(
+    removed.items,
+    removed.removed,
+    move.targetId,
+    move.position,
+  );
+}
+
+export function renameResource(
+  items: SidebarResource[],
+  id: string,
+  label: string,
+): SidebarResource[] {
+  return items.map((item) => ({
+    ...item,
+    label: item.id === id ? label : item.label,
+    children: item.children
+      ? renameResource(item.children, id, label)
+      : undefined,
+  }));
+}

package/src/components/beste/piece/browser-frame.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { Globe } from "lucide-react"
+import { cn } from "@/lib/utils"
+import type { IBrowserProps } from "./type"
+import { titleBarStyle } from "./utils"
+
+export function BrowserFrame({
+  url,
+  title,
+  className,
+  titleStyle,
+  children,
+}: IBrowserProps) {
+
+
+
+  return (
+    <div
+      className={cn(
+        "relative flex size-full items-center justify-center",
+        className
+      )}
+    >
+      <div className="flex min-h-96 w-full flex-col overflow-hidden rounded-lg border border-border bg-neutral-50 shadow-lg dark:bg-neutral-900 relative">
+        <div id="title-bar" className={cn("flex flex-1 w-full items-center gap-2 px-4 py-3 z-20", titleBarStyle(titleStyle, 'title'))}>
+          <div className="flex items-center gap-2" aria-hidden="true">
+            <span className="size-3 cursor-pointer rounded-full bg-rose-500 shadow-md outline outline-rose-800" />
+            <span className="size-3 cursor-pointer rounded-full bg-amber-500 shadow-md outline outline-amber-800" />
+            <span className="size-3 cursor-pointer rounded-full bg-emerald-500 shadow-md outline outline-emerald-800" />
+          </div>
+          {url && !title && (
+            <div className="flex max-w-1/3 flex-1 items-center gap-1.5 rounded-sm border border-border bg-card p-1">
+              <Globe
+                className="size-3 shrink-0 text-muted-foreground"
+                aria-hidden="true"
+              />
+              <span className="truncate font-mono text-xs text-muted-foreground">
+                {url}
+              </span>
+            </div>
+          )}
+          {title && !url && (
+            <div className="flex w-full flex-1 justify-center select-none">
+              <span className="text-sm text-foreground ml-2">{title}</span>
+            </div>
+          )}
+        </div>
+        <div className={cn("flex flex-1 ", titleBarStyle(titleStyle, "frame"))}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/beste/piece/type.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react"
+
+export type TitleStyleType = "hidden" | "titlebar" | "expanded"
+
+export interface IBrowserProps {
+  url?: string
+  title?: string
+  className?: string
+  children: ReactNode
+  titleStyle: TitleStyleType
+}

package/src/components/beste/piece/utils.ts

@@ -0,0 +1,21 @@
+import type { ClassNameValue } from "tailwind-merge"
+import type { TitleStyleType } from "./type"
+
+export const titleBarStyle = (
+  style: TitleStyleType,
+  component: "title" | "frame"
+): ClassNameValue => {
+  const titleBarClassName: Record<TitleStyleType, ClassNameValue> = {
+    titlebar: "",
+    hidden: "top-0 left-0 absolute",
+    expanded: "",
+  }
+
+  const bodyClassName: Record<TitleStyleType, ClassNameValue> = {
+    titlebar: "",
+    hidden: "",
+    expanded: "",
+  }
+
+  return component == "title" ? titleBarClassName[style] : bodyClassName[style]
+}

package/src/components/blocks/auth/__tests__/linked-accounts-block.test.tsx

@@ -89,6 +89,24 @@ describe("LinkedAccountsBlock", () => {
     expect(onUnlink).not.toHaveBeenCalled();
   });
 
+  test("lifts the guard when another sign-in method exists off-list", async () => {
+    const user = userEvent.setup();
+    const onUnlink = mock(async () => {});
+    render(
+      <LinkedAccountsBlock
+        identities={[IDENTITIES[0]!]}
+        hasOtherSignInMethods
+        onUnlink={onUnlink}
+      />,
+    );
+
+    const button = screen.getByRole("button", { name: "Disconnect Google" });
+    expect(button.hasAttribute("disabled")).toBe(false);
+
+    await user.click(button);
+    expect(onUnlink).toHaveBeenCalledWith("id-1");
+  });
+
   test("surfaces a failing link as an error", async () => {
     const user = userEvent.setup();
     render(