@exegia/corpora-ui 1.0.0 → 2.0.0

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

@@ -0,0 +1,170 @@
+import { EASE_OUT } from "@/lib/ease.ts"
+import type { IFlatResource, ISidebarResource, TSidebarResourceDropPosition, ISidebarResourceMove } from "./type.ts"
+
+export const ROW_REVEAL = {
+  duration: 0.16,
+  ease: EASE_OUT,
+} as const
+
+export function canContain(item: ISidebarResource) {
+  return item.kind === "folder" || item.kind === "project"
+}
+
+export function flattenResources(
+  items: ISidebarResource[],
+  expanded: ReadonlySet<string>,
+  depth = 0,
+  parentId: string | null = null
+): IFlatResource[] {
+  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: ISidebarResource[],
+  id: string
+): ISidebarResource | 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
+  }
+}
+
+
+/** Ids of every ancestor of `id` (nearest last); empty when absent. */
+export function ancestorIdsOf(
+  items: ISidebarResource[],
+  id: string
+): string[] {
+  const walk = (nodes: ISidebarResource[], trail: string[]): string[] | null => {
+    for (const node of nodes) {
+      if (node.id === id) return trail
+      if (node.children) {
+        const found = walk(node.children, [...trail, node.id])
+        if (found) return found
+      }
+    }
+    return null
+  }
+  return walk(items, []) ?? []
+}
+
+/** Ids of every row that can hold children and has some — the set
+ * `expandAll` opens. */
+export function expandableIdsOf(items: ISidebarResource[]): string[] {
+  return items.flatMap((item) =>
+    item.children?.length && canContain(item)
+      ? [item.id, ...expandableIdsOf(item.children)]
+      : []
+  )
+}
+
+export function containsResource(item: ISidebarResource, id: string): boolean {
+  return (
+    item.id === id ||
+    item.children?.some((child) => containsResource(child, id)) === true
+  );
+}
+
+export function removeResource(
+  items: ISidebarResource[],
+  id: string,
+): { items: ISidebarResource[]; removed?: ISidebarResource } {
+  let removed: ISidebarResource | undefined;
+  const next: ISidebarResource[] = [];
+
+  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: ISidebarResource[],
+  resource: ISidebarResource,
+  targetId: string | null,
+  position: TSidebarResourceDropPosition,
+): ISidebarResource[] {
+  if (targetId === null) return [...items, resource];
+
+  const next: ISidebarResource[] = [];
+  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: ISidebarResource[],
+  move: ISidebarResourceMove,
+): ISidebarResource[] | 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: ISidebarResource[],
+  id: string,
+  label: string,
+): ISidebarResource[] {
+  return items.map((item) => ({
+    ...item,
+    label: item.id === id ? label : item.label,
+    children: item.children
+      ? renameResource(item.children, id, label)
+      : undefined,
+  }));
+}

package/src/components/blocks/types.ts

@@ -0,0 +1,6 @@
+export type * from "./auth/type"
+export type * from "./chat/type"
+export type * from "./sidebar/type"
+export type * from "./profile/type"
+export type * from "./scaffold/type"
+export type * from "./shell/type"

package/src/components/composed/action-bar/__tests__/action-bar.test.tsx

@@ -1,32 +1,61 @@
 import { describe, expect, test } from "bun:test";
-import { render } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import { BoldIcon } from "lucide-react";
 import ActionBar from "../toolbar";
 import { Action, Separator } from "../action";
-import type { ActionKey, ActionMap } from "../types";
+import type { TActionKey, TActionMap } from "../types";
 
 const act = (id: string) => () => (
   <Action Icon={BoldIcon} action={() => {}} id={id} tooltip={id} />
 );
 
-const bar = (actions: ActionMap<ActionKey>) => {
-  const { container } = render(<ActionBar id="bar" variant="default" actions={actions} />);
+const bar = (actions: TActionMap<TActionKey>) => {
+  const { container } = render(
+    <ActionBar id="bar" variant="default" actions={actions} />
+  );
   return {
     groups: container.querySelectorAll('[data-slot="toolbar-group"]').length,
-    separators: container.querySelectorAll('[data-slot="toolbar-separator"]').length,
+    separators: container.querySelectorAll('[data-slot="toolbar-separator"]')
+      .length,
     // TooltipTrigger's data-slot wins over ToolbarButton's in the render
     // merge, so actions are matched by tag rather than by slot.
     buttons: container.querySelectorAll("button[data-tooltip]").length,
     // A group that rendered with no actions inside is the failure this guards.
     emptyGroups: [
       ...container.querySelectorAll('[data-slot="toolbar-group"]'),
-    ].filter((g) => g.querySelectorAll("button[data-tooltip]").length === 0).length,
+    ].filter((g) => g.querySelectorAll("button[data-tooltip]").length === 0)
+      .length,
   };
 };
 
 describe("ActionBar grouping", () => {
+  test("multiple toolbars keep their tooltips and labels independent", async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <ActionBar
+          id="first-bar"
+          variant="default"
+          actions={{ "action-first": act("first") }}
+        />
+        <ActionBar
+          id="second-bar"
+          variant="default"
+          actions={{ "action-second": act("second") }}
+        />
+      </>
+    );
+    await user.tab();
+    await waitFor(() => expect(screen.getByText("first")).toBeDefined());
+    await user.tab();
+    await waitFor(() => expect(screen.getByText("second")).toBeDefined());
+  });
   test("no separator renders flat — no ToolbarGroup is added", () => {
-    const r = bar({ "action-a": act("a"), "action-b": act("b") } as ActionMap<ActionKey>);
+    const r = bar({
+      "action-a": act("a"),
+      "action-b": act("b"),
+    } as TActionMap<TActionKey>);
     expect(r.groups).toBe(0);
     expect(r.separators).toBe(0);
     expect(r.buttons).toBe(2);
@@ -37,7 +66,7 @@ describe("ActionBar grouping", () => {
       "action-a": act("a"),
       "separator-1": Separator,
       "action-b": act("b"),
-    } as ActionMap<ActionKey>);
+    } as TActionMap<TActionKey>);
     expect(r.groups).toBe(2);
     expect(r.separators).toBe(1);
     expect(r.emptyGroups).toBe(0);
@@ -48,7 +77,7 @@ describe("ActionBar grouping", () => {
       "separator-1": Separator,
       "action-a": act("a"),
       "action-b": act("b"),
-    } as ActionMap<ActionKey>);
+    } as TActionMap<TActionKey>);
     expect(r.groups).toBe(1);
     expect(r.emptyGroups).toBe(0);
   });
@@ -57,7 +86,7 @@ describe("ActionBar grouping", () => {
     const r = bar({
       "action-a": act("a"),
       "separator-1": Separator,
-    } as ActionMap<ActionKey>);
+    } as TActionMap<TActionKey>);
     expect(r.groups).toBe(1);
     expect(r.emptyGroups).toBe(0);
   });
@@ -68,7 +97,7 @@ describe("ActionBar grouping", () => {
       "separator-1": Separator,
       "separator-2": Separator,
       "action-b": act("b"),
-    } as ActionMap<ActionKey>);
+    } as TActionMap<TActionKey>);
     expect(r.groups).toBe(2);
     expect(r.separators).toBe(2);
     expect(r.emptyGroups).toBe(0);
@@ -84,12 +113,12 @@ describe("ActionBar grouping", () => {
             "action-first": act("first"),
             "separator-1": Separator,
             "action-second": act("second"),
-          } as ActionMap<ActionKey>
+          } as TActionMap<TActionKey>
         }
-      />,
+      />
     );
     const order = [...container.querySelectorAll("[data-tooltip]")].map((b) =>
-      b.getAttribute("data-tooltip"),
+      b.getAttribute("data-tooltip")
     );
     expect(order).toEqual(["first", "second"]);
   });

package/src/components/composed/action-bar/action.tsx

@@ -1,24 +1,20 @@
 import { ToolbarButton, ToolbarSeparator } from "@/components/ui/toolbar"
-import type { ActionButtonProps } from "./types"
+import type { IActionButtonProps } from "./types"
 import { TooltipTrigger } from "@/components/ui/tooltip"
-import { Text } from "@/components/atoms"
-import type { SpanProps } from "@/components/atoms/text"
-import { tooltipHandle } from "./utils"
+import { useContext } from "react"
+import { ActionTooltipContext } from "./utils"
 import type { ToolbarSeparatorProps } from "@base-ui/react"
 
-function Payload({ children }: SpanProps) {
-  return <Text.Span>{children}</Text.Span>
-}
-
 export function Action({
   tooltip,
   action,
   Icon,
-}: Omit<ActionButtonProps<string>, "children">) {
+}: Omit<IActionButtonProps<string>, "children">) {
+  const tooltipHandle = useContext(ActionTooltipContext)
   return (
     <TooltipTrigger
       handle={tooltipHandle}
-      payload={Payload}
+      payload={tooltip}
       // The icon is aria-hidden, so without this the button has no accessible
       // name at all — `data-tooltip` is not exposed to assistive tech.
       render={
@@ -60,14 +56,15 @@ export function EmojiAction({
   label: string
   action: () => void
 }) {
+  const tooltipHandle = useContext(ActionTooltipContext)
   return (
     <TooltipTrigger
       handle={tooltipHandle}
-      payload={Payload}
+      payload={label}
       render={
         <ToolbarButton
           aria-label={label}
-          className="size-8 cursor-pointer rounded-full text-base leading-none outline-0! transition-[background-color,scale] duration-150 ease-smooth-out hover:bg-black/6 focus-visible:bg-transparent active:scale-90 motion-reduce:transition-none motion-reduce:active:scale-100 dark:hover:bg-white/10"
+          className="size-8 text-base hover:bg-black/6 dark:hover:bg-white/10 cursor-pointer rounded-full leading-none outline-0! transition-[background-color,scale] duration-150 ease-smooth-out focus-visible:bg-transparent active:scale-90 motion-reduce:transition-none motion-reduce:active:scale-100"
           data-emoji={emoji}
           data-tooltip={label}
           onClick={action}

package/src/components/composed/action-bar/emojis.tsx

@@ -8,7 +8,7 @@ import { motion } from "motion/react"
 import ActionBar from "./toolbar"
 import { BOUNCE_IN_OUT } from "@/lib/ease"
 
-import type { ActionKey, ActionMap, EmojiActionBarProps } from "./types"
+import type { TActionKey, TActionMap, IEmojiActionBarProps } from "./types"
 import {
   EmojiPicker,
   EmojiPickerContent,
@@ -29,7 +29,7 @@ export function EmojiActionBar({
   onEmojiSelect,
   reactions = QUICK_REACTIONS,
   hideMore = false,
-}: EmojiActionBarProps): React.ReactElement {
+}: IEmojiActionBarProps): React.ReactElement {
   const {
     actions: quickReactions,
     isFullPicker,
@@ -38,10 +38,10 @@ export function EmojiActionBar({
   } = useEmojiPicker({ onEmojiSelect, reactions, hideMore })
 
   const actions = useMemo(() => {
-    return quickReactions.reduce<ActionMap<ActionKey>>((acc, item) => {
+    return quickReactions.reduce<TActionMap<TActionKey>>((acc, item) => {
       // Replace spaces with hyphens and convert to lowercase for the action key
       const label = item.label.replace(/\s+/g, "-").toLowerCase()
-      const key: ActionKey = `action-${label}` as const
+      const key: TActionKey = `action-${label}` as const
       // Create the action component, using the more action if the label includes "more"
       const moreAction = (
         <Action

package/src/components/composed/action-bar/index.ts

@@ -5,14 +5,14 @@ import Toolbar from "./toolbar"
 
 export { useActionBar, useEmojiPicker, QUICK_REACTIONS } from "./utils"
 export type {
-  ActionBarProps,
-  ActionBarSegment,
-  ActionButtonProps,
-  EmojiActionBarProps,
-  ActionEntry,
-  ActionItemsByGroup,
-  ActionKey,
-  ActionMap,
+  IActionBarProps,
+  TActionBarSegment,
+  IActionButtonProps,
+  IEmojiActionBarProps,
+  TActionEntry,
+  TActionItemsByGroup,
+  TActionKey,
+  TActionMap,
 } from "./types"
 
 export const ActionBar = {

package/src/components/composed/action-bar/toolbar.tsx

@@ -4,10 +4,15 @@ import {
   Toolbar as ToolbarPrimitive,
   ToolbarGroup,
 } from "@/components/ui/toolbar"
-import { Tooltip, TooltipPopup } from "@/components/ui/tooltip"
+import { useState } from "react"
+import {
+  Tooltip,
+  TooltipCreateHandle,
+  TooltipPopup,
+} from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
-import { tooltipHandle, useActionBar } from "./utils"
-import type { ActionBarProps } from "./types"
+import { ActionTooltipContext, useActionBar } from "./utils"
+import type { IActionBarProps } from "./types"
 
 /**
  * Toolbar chrome. "default" keeps the bordered card surface; "ghost" and
@@ -25,36 +30,37 @@ export default function Toolbar({
   actions,
   variant = "default",
   className,
-}: ActionBarProps) {
+}: IActionBarProps) {
   const { segments, entries, hasGroups } = useActionBar({ actions })
+  const [tooltipHandle] = useState(() => TooltipCreateHandle<string>())
 
   return (
-    <ToolbarPrimitive
-      className={cn(toolbarVariants[variant], className)}
-      data-slot="action-bar"
-      data-variant={variant}
-      id={id}
-    >
-      {hasGroups
-        ? segments.map((segment) =>
-            segment.type === "separator" ? (
-              <segment.Separator key={segment.key} />
-            ) : (
-              <ToolbarGroup key={segment.key}>
-                {segment.items.map(([key, Action]) => (
-                  <Action key={key} />
-                ))}
-              </ToolbarGroup>
+    <ActionTooltipContext value={tooltipHandle}>
+      <ToolbarPrimitive
+        className={cn(toolbarVariants[variant], className)}
+        data-slot="action-bar"
+        data-variant={variant}
+        id={id}
+      >
+        {hasGroups
+          ? segments.map((segment) =>
+              segment.type === "separator" ? (
+                <segment.Separator key={segment.key} />
+              ) : (
+                <ToolbarGroup key={segment.key}>
+                  {segment.items.map(([key, Action]) => (
+                    <Action key={key} />
+                  ))}
+                </ToolbarGroup>
+              )
             )
-          )
-        : entries.map(([key, Action]) => <Action key={key} />)}
-      <Tooltip handle={tooltipHandle}>
-        {({ payload: Payload, ...props }) => (
-          <TooltipPopup {...props}>
-            {Payload !== undefined && <Payload />}
-          </TooltipPopup>
-        )}
-      </Tooltip>
-    </ToolbarPrimitive>
+          : entries.map(([key, Action]) => <Action key={key} />)}
+        <Tooltip handle={tooltipHandle}>
+          {({ payload, ...props }) => (
+            <TooltipPopup {...props}>{payload}</TooltipPopup>
+          )}
+        </Tooltip>
+      </ToolbarPrimitive>
+    </ActionTooltipContext>
   )
 }

package/src/components/composed/action-bar/types.ts

@@ -1,20 +1,20 @@
-import type { ButtonProps } from "@/components/ui/button";
-import type { PopoverGlassProps } from "@/components/ui/popover-glass";
+import type { TButtonProps } from "@/components/ui/button";
+import type { TPopoverGlassProps } from "@/components/ui/popover-glass";
 import type { ToolbarSeparatorProps } from "@base-ui/react";
 import type { Emoji } from "frimousse";
 import type { LucideIcon } from "lucide-react";
 import type { FunctionComponent } from "react";
 
 
-export interface ActionButtonProps<T extends string> extends Omit<ButtonProps, "variant" | "glassVariant" | "size"> {
+export interface IActionButtonProps<T extends string> extends Omit<TButtonProps, "variant" | "glassVariant" | "size"> {
   action: () => void;
   tooltip?: string;
   Icon: LucideIcon | Emoji;
   id: T;
 }
 
-type ActionBarItemType = "action" | "separator";
-export type ActionKey<T extends string = string, Type extends ActionBarItemType = "action"> = `${Type}-${T}`;
+type TActionBarItemType = "action" | "separator";
+export type TActionKey<T extends string = string, Type extends TActionBarItemType = "action"> = `${Type}-${T}`;
 
 /**
  * Insertion order is the contract: the bar groups positionally, so the order
@@ -22,33 +22,33 @@ export type ActionKey<T extends string = string, Type extends ActionBarItemType
  * is a non-numeric `${type}-${name}` string, which `Object.entries` preserves
  * — but a map built by spreading or `Object.fromEntries` must keep that order.
  */
-export type ActionMap<T extends ActionKey> = Record<T, FunctionComponent<ActionButtonProps<T> | ToolbarSeparatorProps>>;
+export type TActionMap<T extends TActionKey> = Record<T, FunctionComponent<IActionButtonProps<T> | ToolbarSeparatorProps>>;
 
-export type ActionEntry = readonly [
+export type TActionEntry = readonly [
   key: string,
-  Item: FunctionComponent<ActionButtonProps<string> | ToolbarSeparatorProps>,
+  Item: FunctionComponent<IActionButtonProps<string> | ToolbarSeparatorProps>,
 ];
 
 /** Actions between two separators, rendered inside one `ToolbarGroup`. */
-export type ActionItemsByGroup = Record<string, ActionEntry[]>;
+export type TActionItemsByGroup = Record<string, TActionEntry[]>;
 
 /**
  * The bar as an ordered, render-ready list. A "group" is a run of consecutive
  * actions; a "separator" is whatever component the map supplied for that key.
  * Empty groups (leading, trailing or back-to-back separators) are dropped.
  */
-export type ActionBarSegment =
-  | { type: "group"; key: string; items: ActionEntry[] }
+export type TActionBarSegment =
+  | { type: "group"; key: string; items: TActionEntry[] }
   | { type: "separator"; key: string; Separator: FunctionComponent<ToolbarSeparatorProps> };
 
-export interface ActionBarProps extends Omit<PopoverGlassProps, "variant" | "children"> {
+export interface IActionBarProps extends Omit<TPopoverGlassProps, "variant" | "children"> {
   id: string;
   variant: "default" | "ghost" | "glass";
-  actions: ActionMap<ActionKey>;
+  actions: TActionMap<TActionKey>;
 }
 
 
-export interface EmojiActionBarProps {
+export interface IEmojiActionBarProps {
   /** Fires for both a quick reaction and a pick from the full picker. */
   onEmojiSelect?: (emoji: Emoji) => void
   /** Quick row contents. Defaults to {@link QUICK_REACTIONS}. */

package/src/components/composed/action-bar/utils.ts

@@ -1,20 +1,19 @@
-import { type ComponentType, useMemo, useState } from "react"
+import { createContext, useMemo, useState } from "react"
 import { Tooltip } from "@base-ui/react/tooltip"
-import { TooltipCreateHandle } from "@/components/ui/tooltip"
 import type {
-  ActionBarSegment,
-  ActionEntry,
-  ActionItemsByGroup,
-  ActionKey,
-  ActionMap,
-  EmojiActionBarProps,
+  TActionBarSegment,
+  TActionEntry,
+  TActionItemsByGroup,
+  TActionKey,
+  TActionMap,
+  IEmojiActionBarProps,
 } from "./types"
 import type { Emoji } from "frimousse"
 
-// Annotated, not inferred: the emitted .d.ts cannot name base-ui's
-// `TooltipHandle` on its own (TS2883).
-export const tooltipHandle: Tooltip.Handle<ComponentType> =
-  TooltipCreateHandle<ComponentType>()
+// Each toolbar owns its handle; a shared handle cannot control multiple roots.
+export const ActionTooltipContext = createContext<
+  Tooltip.Handle<string> | undefined
+>(undefined)
 
 export const isSeparator = (key: string): boolean => key.includes("separator")
 
@@ -29,12 +28,12 @@ export const isSeparator = (key: string): boolean => key.includes("separator")
 export const useActionBar = ({
   actions,
 }: {
-  actions: ActionMap<ActionKey>
+  actions: TActionMap<TActionKey>
 }) => {
   return useMemo(() => {
-    const entries = Object.entries(actions) as ActionEntry[]
-    const segments: ActionBarSegment[] = []
-    let open: ActionEntry[] = []
+    const entries = Object.entries(actions) as TActionEntry[]
+    const segments: TActionBarSegment[] = []
+    let open: TActionEntry[] = []
 
     const closeGroup = (): void => {
       if (open.length === 0) return
@@ -59,7 +58,7 @@ export const useActionBar = ({
     // once the caller has actually asked for grouping.
     const hasGroups = segments.some((s) => s.type === "separator")
 
-    const actionItemsByGroup: ActionItemsByGroup = Object.fromEntries(
+    const actionItemsByGroup: TActionItemsByGroup = Object.fromEntries(
       groups.map((group) => [group.key, group.items])
     )
 
@@ -106,7 +105,7 @@ export const useEmojiPicker = ({
   onEmojiSelect,
   reactions,
   hideMore,
-}: EmojiActionBarProps) => {
+}: IEmojiActionBarProps) => {
   const [isFullPicker, setShowAll] = useState(false)
 
   // Toggles the picker between quick reactions and the full picker.

package/src/components/composed/ai/__tests__/ai.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, mock, test } from "bun:test"
 import { render, screen } from "@testing-library/react"
 import { Message } from "../message"
-import type { AIContentProps } from "../types"
+import type { TAIContentProps } from "../types"
 
 describe("Message", () => {
   test("renders the agent identity row and the body as a polite live region", () => {
@@ -10,7 +10,6 @@ describe("Message", () => {
     )
 
     expect(screen.getByText("Exegia")).toBeDefined()
-    expect(screen.getByText("Agent")).toBeDefined()
     expect(screen.getByText("AI Scholar")).toBeDefined()
 
     const root = container.querySelector('[data-slot="ai-message"]')
@@ -35,8 +34,8 @@ describe("Message", () => {
   })
 
   test("hands AttachedContent the message type as `kind` plus contentProps", () => {
-    const seen = mock<(props: AIContentProps<"chart">) => void>(() => {})
-    const Attached = (props: AIContentProps<"chart">) => {
+    const seen = mock<(props: TAIContentProps<"chart">) => void>(() => {})
+    const Attached = (props: TAIContentProps<"chart">) => {
       seen(props)
       return <div data-testid="attached">chart goes here</div>
     }