@exegia/corpora-ui 3.0.0 → 4.0.0

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

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

@@ -1,6 +0,0 @@
-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/__tests__/logo.test.tsx

@@ -1,60 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
-
-import { Logo } from "../logo"
-
-const root = () => document.querySelector<HTMLElement>('[data-slot="logo"]')
-const wordmark = () =>
-  document.querySelector<HTMLElement>('[data-slot="logo-wordmark"]')
-const monogram = () =>
-  document.querySelector<HTMLElement>('[data-slot="logo-monogram"]')
-
-describe("Logo", () => {
-  test("defaults: monogram tile from the name, name as the wordmark", () => {
-    render(<Logo name="Corpora Codex" />)
-    expect(monogram()?.textContent).toBe("CC")
-    expect(wordmark()?.textContent).toBe("Corpora Codex")
-    expect(root()?.tagName).toBe("SPAN")
-    expect(root()?.getAttribute("data-variant")).toBe("full")
-  })
-
-  test("a custom mark wins over src; src renders a decorative image", () => {
-    const { rerender } = render(
-      <Logo name="Corpora" src="https://example.com/mark.png" />
-    )
-    expect(monogram()).toBeNull()
-    expect(document.querySelector("img")?.getAttribute("alt")).toBe("")
-    rerender(
-      <Logo
-        name="Corpora"
-        src="https://example.com/mark.png"
-        mark={<svg data-testid="mark" />}
-      />
-    )
-    expect(document.querySelector("img")).toBeNull()
-    expect(screen.getByTestId("mark")).toBeTruthy()
-  })
-
-  test("href renders a link named for AT regardless of variant", () => {
-    render(<Logo name="Corpora" href="/" variant="mark" />)
-    const link = screen.getByRole("link", { name: "Corpora" })
-    expect(link.getAttribute("href")).toBe("/")
-    expect(link.getAttribute("data-slot")).toBe("logo")
-  })
-
-  test("variant=mark folds the wordmark: hidden from AT, root keeps the name", () => {
-    const { rerender } = render(<Logo name="Corpora" variant="mark" />)
-    expect(wordmark()?.getAttribute("aria-hidden")).toBe("true")
-    expect(root()?.getAttribute("aria-label")).toBe("Corpora")
-    expect(root()?.getAttribute("data-variant")).toBe("mark")
-    // Unfolded, the visible wordmark is the name — no double label.
-    rerender(<Logo name="Corpora" variant="full" />)
-    expect(wordmark()?.getAttribute("aria-hidden")).toBeNull()
-    expect(root()?.getAttribute("aria-label")).toBeNull()
-  })
-
-  test("a custom wordmark replaces the name text", () => {
-    render(<Logo name="Corpora" wordmark={<span>corpora/ui</span>} />)
-    expect(wordmark()?.textContent).toBe("corpora/ui")
-  })
-})

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

@@ -1,125 +0,0 @@
-import { describe, expect, test } from "bun:test";
-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 { TActionKey, TActionMap } from "../types";
-
-const act = (id: string) => () => (
-  <Action Icon={BoldIcon} action={() => {}} id={id} tooltip={id} />
-);
-
-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,
-    // 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,
-  };
-};
-
-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 TActionMap<TActionKey>);
-    expect(r.groups).toBe(0);
-    expect(r.separators).toBe(0);
-    expect(r.buttons).toBe(2);
-  });
-
-  test("a separator splits the actions either side of it into two groups", () => {
-    const r = bar({
-      "action-a": act("a"),
-      "separator-1": Separator,
-      "action-b": act("b"),
-    } as TActionMap<TActionKey>);
-    expect(r.groups).toBe(2);
-    expect(r.separators).toBe(1);
-    expect(r.emptyGroups).toBe(0);
-  });
-
-  test("a leading separator does not render an empty group before it", () => {
-    const r = bar({
-      "separator-1": Separator,
-      "action-a": act("a"),
-      "action-b": act("b"),
-    } as TActionMap<TActionKey>);
-    expect(r.groups).toBe(1);
-    expect(r.emptyGroups).toBe(0);
-  });
-
-  test("a trailing separator does not render an empty group after it", () => {
-    const r = bar({
-      "action-a": act("a"),
-      "separator-1": Separator,
-    } as TActionMap<TActionKey>);
-    expect(r.groups).toBe(1);
-    expect(r.emptyGroups).toBe(0);
-  });
-
-  test("back-to-back separators do not render an empty group between them", () => {
-    const r = bar({
-      "action-a": act("a"),
-      "separator-1": Separator,
-      "separator-2": Separator,
-      "action-b": act("b"),
-    } as TActionMap<TActionKey>);
-    expect(r.groups).toBe(2);
-    expect(r.separators).toBe(2);
-    expect(r.emptyGroups).toBe(0);
-  });
-
-  test("groups preserve the map's insertion order", () => {
-    const { container } = render(
-      <ActionBar
-        id="bar"
-        variant="default"
-        actions={
-          {
-            "action-first": act("first"),
-            "separator-1": Separator,
-            "action-second": act("second"),
-          } as TActionMap<TActionKey>
-        }
-      />
-    );
-    const order = [...container.querySelectorAll("[data-tooltip]")].map((b) =>
-      b.getAttribute("data-tooltip")
-    );
-    expect(order).toEqual(["first", "second"]);
-  });
-});

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

@@ -1,77 +0,0 @@
-import { ToolbarButton, ToolbarSeparator } from "@/components/ui/toolbar"
-import type { IActionButtonProps } from "./types"
-import { TooltipTrigger } from "@/components/ui/tooltip"
-import { useContext } from "react"
-import { ActionTooltipContext } from "./utils"
-import type { ToolbarSeparatorProps } from "@base-ui/react"
-
-export function Action({
-  tooltip,
-  action,
-  Icon,
-}: Omit<IActionButtonProps<string>, "children">) {
-  const tooltipHandle = useContext(ActionTooltipContext)
-  return (
-    <TooltipTrigger
-      handle={tooltipHandle}
-      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={
-        <ToolbarButton
-          aria-label={tooltip}
-          data-tooltip={tooltip}
-          onClick={action}
-        />
-      }
-    >
-      {"emoji" in Icon ? (
-        <span>{Icon.emoji}</span>
-      ) : (
-        <Icon size={18} aria-hidden="true" />
-      )}
-    </TooltipTrigger>
-  )
-}
-
-/**
- * Group boundary. Pass it under a `separator-*` key in `actions` and the bar
- * wraps the runs of actions either side of it in their own `ToolbarGroup`.
- */
-export function Separator(props: ToolbarSeparatorProps) {
-  return <ToolbarSeparator orientation="vertical" {...props} />
-}
-
-/**
- * An action labelled by an emoji glyph rather than a Lucide icon. The glyph is
- * `aria-hidden` — `label` is the accessible name, so a screen reader reads
- * "thumbs up" rather than announcing the character.
- */
-export function EmojiAction({
-  emoji,
-  label,
-  action,
-}: {
-  emoji: string
-  label: string
-  action: () => void
-}) {
-  const tooltipHandle = useContext(ActionTooltipContext)
-  return (
-    <TooltipTrigger
-      handle={tooltipHandle}
-      payload={label}
-      render={
-        <ToolbarButton
-          aria-label={label}
-          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}
-        />
-      }
-    >
-      <span aria-hidden="true">{emoji}</span>
-    </TooltipTrigger>
-  )
-}

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

@@ -1,97 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-import type * as React from "react"
-import { MoreHorizontal, X } from "lucide-react"
-import { Action, EmojiAction, Separator } from "./action"
-import { motion } from "motion/react"
-import ActionBar from "./toolbar"
-import { BOUNCE_IN_OUT } from "@/lib/ease"
-
-import type { TActionKey, TActionMap, IEmojiActionBarProps } from "./types"
-import {
-  EmojiPicker,
-  EmojiPickerContent,
-  EmojiPickerFooter,
-  EmojiPickerSearch,
-} from "@/components/ui/emoji-picker"
-import { isSeparator, QUICK_REACTIONS, useEmojiPicker } from "./utils"
-import { Button } from "@/components/ui/button";
-
-/**
- * Compact reaction picker: a toolbar of quick emoji, then a "More" action that
- * swaps the surface for the full frimousse picker. Meant to sit inside a
- * `PopoverGlass variant="glass"` — swapping the two surfaces resizes the popup,
- * which is why the popup's viewport padding variable has to be zeroed rather
- * than only its padding (see `BubbleReactionsButton`).
- */
-export function EmojiActionBar({
-  onEmojiSelect,
-  reactions = QUICK_REACTIONS,
-  hideMore = false,
-}: IEmojiActionBarProps): React.ReactElement {
-  const {
-    actions: quickReactions,
-    isFullPicker,
-    togglePicker,
-    selectEmoji,
-  } = useEmojiPicker({ onEmojiSelect, reactions, hideMore })
-
-  const actions = useMemo(() => {
-    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: TActionKey = `action-${label}` as const
-      // Create the action component, using the more action if the label includes "more"
-      const moreAction = (
-        <Action
-          Icon={MoreHorizontal}
-          action={togglePicker}
-          id={label}
-          tooltip={item.label}
-        />
-      )
-      const action = label.includes("more") ? (
-        moreAction
-      ) : (
-        <EmojiAction
-          emoji={item.emoji}
-          label={item.label}
-          action={() => selectEmoji(item)}
-        />
-      )
-      // Store the action in the acc, using a separator if the key starts with "separator-"
-      acc[key] = () => (isSeparator(key) ? <Separator /> : action)
-      return acc
-    }, {})
-  }, [quickReactions, selectEmoji, togglePicker])
-
-  return (
-    <motion.div className="relative" initial={{ height: "auto" }} exit={{ height: "auto" }} animate={{ height: isFullPicker ? 326 : "auto" }} transition={BOUNCE_IN_OUT}>
-     
-      {isFullPicker ? (
-        <EmojiPicker
-          className="h-full relative"
-          onEmojiSelect={selectEmoji}
-        >
-          <div className="flex items-center">
-               <EmojiPickerSearch />
-            <Button variant="secondary" size="icon-xs" onClick={togglePicker}>
-              <X className="size-3 stroke-3" />
-            </Button>
-          </div>
-       
-          <EmojiPickerContent />
-          <EmojiPickerFooter />
-        </EmojiPicker>
-      ) : (
-        <ActionBar
-          actions={actions}
-          id="emoji-action-bar"
-          variant="default"
-          className="pr-3 pl-1.5"
-        />
-      )}
-    </motion.div>
-  )
-}

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

@@ -1,24 +0,0 @@
-import { EmojiActionBar } from "./emojis"
-import { Action, EmojiAction, Separator } from "./action"
-
-import Toolbar from "./toolbar"
-
-export { useActionBar, useEmojiPicker, QUICK_REACTIONS } from "./utils"
-export type {
-  IActionBarProps,
-  TActionBarSegment,
-  IActionButtonProps,
-  IEmojiActionBarProps,
-  TActionEntry,
-  TActionItemsByGroup,
-  TActionKey,
-  TActionMap,
-} from "./types"
-
-export const ActionBar = {
-  Emoji: EmojiActionBar,
-  Separator,
-  EmojiAction,
-  Action,
-}
-export default Toolbar

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

@@ -1,66 +0,0 @@
-"use client"
-
-import {
-  Toolbar as ToolbarPrimitive,
-  ToolbarGroup,
-} from "@/components/ui/toolbar"
-import { useState } from "react"
-import {
-  Tooltip,
-  TooltipCreateHandle,
-  TooltipPopup,
-} from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
-import { ActionTooltipContext, useActionBar } from "./utils"
-import type { IActionBarProps } from "./types"
-
-/**
- * Toolbar chrome. "default" keeps the bordered card surface; "ghost" and
- * "glass" drop it so the bar can sit inside a surface that already paints one
- * — a `PopoverGlass variant="glass"`, for instance.
- */
-const toolbarVariants = {
-  default: "border-none bg-transparent backdrop-blur-none!",
-  ghost: "border-0 bg-transparent! shadow-none",
-  glass: "border-0 bg-transparent! shadow-sm shadow-black",
-} as const
-
-export default function Toolbar({
-  id,
-  actions,
-  variant = "default",
-  className,
-}: IActionBarProps) {
-  const { segments, entries, hasGroups } = useActionBar({ actions })
-  const [tooltipHandle] = useState(() => TooltipCreateHandle<string>())
-
-  return (
-    <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, ...props }) => (
-            <TooltipPopup {...props}>{payload}</TooltipPopup>
-          )}
-        </Tooltip>
-      </ToolbarPrimitive>
-    </ActionTooltipContext>
-  )
-}

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

@@ -1,58 +0,0 @@
-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 IActionButtonProps<T extends string> extends Omit<TButtonProps, "variant" | "glassVariant" | "size"> {
-  action: () => void;
-  tooltip?: string;
-  Icon: LucideIcon | Emoji;
-  id: 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
- * keys are written is the order they render. Safe because every `ActionKey`
- * 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 TActionMap<T extends TActionKey> = Record<T, FunctionComponent<IActionButtonProps<T> | ToolbarSeparatorProps>>;
-
-export type TActionEntry = readonly [
-  key: string,
-  Item: FunctionComponent<IActionButtonProps<string> | ToolbarSeparatorProps>,
-];
-
-/** Actions between two separators, rendered inside one `ToolbarGroup`. */
-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 TActionBarSegment =
-  | { type: "group"; key: string; items: TActionEntry[] }
-  | { type: "separator"; key: string; Separator: FunctionComponent<ToolbarSeparatorProps> };
-
-export interface IActionBarProps extends Omit<TPopoverGlassProps, "variant" | "children"> {
-  id: string;
-  variant: "default" | "ghost" | "glass";
-  actions: TActionMap<TActionKey>;
-}
-
-
-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}. */
-  reactions?: readonly Emoji[]
-  /** Hides the trailing "More" action, leaving the quick row only. */
-  hideMore?: boolean
-}