@exegia/corpora-ui 0.29.0 → 1.0.0

package/src/components/atoms/bubble/reactions.tsx

@@ -0,0 +1,194 @@
+"use client"
+
+import { AnimatePresence, motion, useReducedMotion } from "motion/react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { EASE_IN_OUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease"
+import { useBubbleVariant } from "./context"
+import { MorphIcon } from "morphicons/react";
+import type {
+  BubbleReactionsProps,
+  BubbleReactionChipProps,
+  BubbleReactionsButtonProps,
+} from "./types"
+import { reactionKey } from "./utils"
+import { GlassContainer } from "@/components/ui/glasscn/glass-container"
+import {
+  Popover,
+  PopoverGlass,
+  PopoverTrigger,
+} from "@/components/ui/popover-glass"
+import { ActionBar } from "@/components/composed/action-bar"
+import { useState } from "react"
+import { FaceSlightlySmilingPlus, X } from "lucide"
+
+/**
+ * One emoji + count inside the pill. Pressing it springs the emoji, and a
+ * count change slides the old number out as the new one drops in.
+ */
+export function BubbleReactionChip({
+  reaction,
+  index,
+  onToggle,
+  className,
+  ...props
+}: BubbleReactionChipProps): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  const showCount = reaction.count != null && reaction.count > 0
+
+  return (
+    <motion.button
+      aria-label={reaction.label}
+      aria-pressed={reaction.reacted ?? false}
+      className={cn(
+        "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-1.5 font-bold text-neutral-600 transition-colors duration-150 ease-smooth-out outline-none hover:bg-black/6 focus-visible:ring-0 focus-visible:ring-ring dark:text-neutral-300 dark:hover:bg-white/8",
+        reaction.reacted && "text-foreground",
+        className
+      )}
+      data-reacted={reaction.reacted ? "" : undefined}
+      data-slot="bubble-reaction"
+      onClick={() => onToggle?.(reaction, index)}
+      transition={SPRING_PRESS}
+      type="button"
+      whileTap={reduceMotion ? undefined : { scale: 0.88 }}
+      {...props}
+    >
+      <motion.span
+        animate={
+          reduceMotion
+            ? { scale: 1 }
+            : { scale: reaction.reacted ? [1, 1.35, 1] : 1 }
+        }
+        aria-hidden={reaction.label ? true : undefined}
+        className="block text-xs/snug select-none"
+        transition={
+          reduceMotion
+            ? { duration: 0 }
+            : { duration: 0.36, ease: EASE_IN_OUT, times: [0, 0.45, 1] }
+        }
+      >
+        {reaction.emoji}
+      </motion.span>
+      {showCount ? (
+        <span className="relative inline-grid overflow-hidden tabular-nums">
+          <AnimatePresence initial={false} mode="popLayout">
+            <motion.span
+              animate={{ y: 0, opacity: 1 }}
+              className="text-xs/snug select-none"
+              exit={{ y: reduceMotion ? 0 : -10, opacity: 0 }}
+              initial={{ y: reduceMotion ? 0 : 10, opacity: 0 }}
+              key={reaction.count}
+              transition={reduceMotion ? { duration: 0 } : SPRING_SWAP}
+            >
+              {reaction.count}
+            </motion.span>
+          </AnimatePresence>
+        </span>
+      ) : null}
+    </motion.button>
+  )
+}
+
+export function BubbleReactionsButton({
+  className,
+  onClick,
+  onEmojiSelect
+}: BubbleReactionsButtonProps): React.ReactElement {
+
+  const [open, setOpen] = useState(false)
+  return (
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger
+        render={(_props, state) => (
+          <button
+            aria-label="Add reaction"
+            className={cn(
+              "inline-flex cursor-pointer items-center gap-1 rounded-lg px-1 py-2 font-bold text-neutral-600 duration-150 ease-smooth-out outline-none hover:bg-black/6 focus-visible:ring-0 dark:text-neutral-300 dark:hover:bg-white/8",
+              className
+            )}
+            data-slot="bubble-reaction-button"
+            type="button"
+            {..._props}
+            // After the spread, and composed: base-ui's own onClick is what
+            // opens the popover, so overwriting it would wedge the trigger and
+            // letting it win would swallow the caller's handler.
+            onClick={(event) => {
+              _props.onClick?.(event)
+              onClick?.(event)
+            }}
+          >
+             <MorphIcon icon={state.open ? X : FaceSlightlySmilingPlus} size={16} />
+          </button>
+        )}
+      />
+       
+      <PopoverGlass
+        align="center"
+        alignOffset={-25}
+  
+        glassVariant="frosted"
+        sideOffset={5}
+        side="top"
+      >
+        <ActionBar.Emoji
+          onEmojiSelect={(picked) => {
+            onEmojiSelect?.(picked)
+            setOpen(false)
+          }}
+        />
+      </PopoverGlass>
+    </Popover>
+  )
+}
+
+/**
+ * Glass reaction pill that hangs off the bubble's bottom trailing corner.
+ * Pass `reactions` for the standard chips, or children for a custom row —
+ * both share the pill.
+ */
+export function BubbleReactions({
+  reactions = [],
+  onToggle,
+  onEmojiSelect,
+  className,
+  children,
+  ...props
+}: BubbleReactionsProps): React.ReactElement {
+  const variant = useBubbleVariant()
+  return (
+    <div
+      className={cn(
+        "absolute -bottom-5 z-[1] flex max-h-8 w-fit flex-1 items-center",
+        variant === "sender" ? "left-4" : "right-4",
+        className
+      )}
+    >
+      <GlassContainer
+        glassVariant="frosted"
+        refraction={3}
+        bezel={12}
+        blur={5}
+        saturation={2}
+        className={cn(
+          "inline-flex h-full w-fit items-center rounded-xl",
+          className
+        )}
+        data-slot="bubble-reactions"
+        {...props}
+      >
+        <div className={cn("mx-1.5 inline-flex h-full items-center")}>
+          {reactions.map((reaction, index) => (
+            <BubbleReactionChip
+              index={index}
+              key={reactionKey(reaction, index)}
+              onToggle={onToggle}
+              reaction={reaction}
+            />
+          ))}
+          <BubbleReactionsButton onEmojiSelect={onEmojiSelect} />
+          {children}
+        </div>
+      </GlassContainer>
+    </div>
+  )
+}

package/src/components/atoms/bubble/types.ts

@@ -0,0 +1,79 @@
+import type { HTMLMotionProps } from "motion/react"
+import type { ComponentPropsWithoutRef, ReactNode } from "react"
+
+/**
+ * Who the bubble belongs to:
+ * - "sender"    — the current user's outgoing message (right-aligned, inverted)
+ * - "recipient" — an incoming message from another person (left-aligned, muted)
+ * - "ai"        — generated output (left-aligned, chrome-less prose)
+ */
+export type BubbleVariant = "ai" | "sender" | "recipient"
+
+export interface BubbleProps extends ComponentPropsWithoutRef<"div"> {
+  variant?: BubbleVariant
+  /**
+   * A follow-up in a run of messages from the same author: tucks under the
+   * previous bubble. Render `Bubble.Header` on the first of the run only.
+   */
+  continued?: boolean
+}
+
+export type BubbleMessageProps = ComponentPropsWithoutRef<"div">
+
+export type BubbleHeaderProps = ComponentPropsWithoutRef<"div">
+
+export interface BubbleReaction {
+  /** Stable key; falls back to the label/emoji when omitted. */
+  id?: string
+  emoji: ReactNode | string
+  count?: number
+  /** Whether the current user has this reaction. */
+  reacted?: boolean
+  /** Accessible name, e.g. "thumbs up". Required when emoji is not a string. */
+  label?: string
+}
+
+/** An emoji chosen from the picker. Mirrors frimousse's payload so the
+ *  library never re-exports a dependency's type on its public surface. */
+export interface BubblePickedEmoji {
+  emoji: string
+  label: string
+}
+
+export interface BubbleReactionsProps extends Omit<
+  ComponentPropsWithoutRef<"div">,
+  "onToggle"
+> {
+  reactions?: BubbleReaction[]
+  onToggle?: (reaction: BubbleReaction, index: number) => void
+  /** Fires when an emoji is picked from the add-reaction popover. */
+  onEmojiSelect?: (emoji: BubblePickedEmoji) => void
+}
+
+export type BubbleActionsProps = ComponentPropsWithoutRef<"div">
+
+export interface BubbleReactionChipProps extends Omit<
+  HTMLMotionProps<"button">,
+  "onToggle" | "children"
+> {
+  reaction: BubbleReaction
+  index: number
+  onToggle?: (reaction: BubbleReaction, index: number) => void
+}
+
+export type BubbleReactionsButtonProps = Omit<
+  HTMLMotionProps<"button">,
+  "onToggle" | "children" | "onClick"
+> & {
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  /** Fires when an emoji is picked from the popover. */
+  onEmojiSelect?: (emoji: BubblePickedEmoji) => void
+}
+
+/**
+ * Only what the chip actually forwards. It renders through `Button`, which is
+ * either a `<button>` or — with an href — an `<a>`, so the full anchor prop
+ * set cannot be honoured (and `type` means two different things across the
+ * two elements). Declaring the anchor set wholesale only advertised props the
+ * chip silently dropped.
+ */

package/src/components/atoms/bubble/utils.ts

@@ -0,0 +1,46 @@
+import type { ClassValue } from "clsx"
+import type { BubbleReaction, BubbleVariant } from "./types"
+import { cn } from "@/lib/utils"
+
+/** Returns a stable key for a reaction, falling back to the emoji label if no ID is provided. */
+export function reactionKey(reaction: BubbleReaction, index: number): string {
+  return reaction.id ?? `${reaction.label ?? String(reaction.emoji)}-${index}`
+}
+
+/** Root alignment: outgoing hugs the right edge, everything else the left. */
+export const twBubbleAlignClasses: Record<BubbleVariant, ClassValue> = {
+  sender: "items-end",
+  recipient: "items-start",
+  ai: "items-start",
+}
+
+/**
+ * The inner column shrink-wraps the message so the header, reaction pill
+ * and action row all align to the bubble's own edges rather than the
+ * thread's. Generated output stays full-bleed.
+ */
+export const twBubbleColumnClasses: Record<BubbleVariant, ClassValue> = {
+  sender: "items-end max-w-[80%] min-w-0 mr-4",
+  recipient: "items-start max-w-[80%] min-w-0 ml-4",
+  ai: "w-full items-stretch min-w-0",
+}
+
+/**
+ * Message surface per variant. The two people's bubbles are inverted
+ * mirrors — a lit surface (top highlight, shaded base) for the sender and
+ * a dim one for the recipient — with the tail corner pinched only on the
+ * last bubble of a run (a following `continued` bubble un-pinches it) and
+ * both bottom corners squared to `lg` when an attachment sits inside; the ai
+ * variant renders as plain prose so generated output never masquerades as
+ * a person's message.
+ */
+
+const defaultClasses = "w-fit  rounded-full text-xs leading-4 font-medium relative"
+export const twBubbleMessageClasses: Record<BubbleVariant, ClassValue> = {
+  sender: cn(defaultClasses,
+    "inset-shadow-lit inset-shadow-dim inset-shadow-dim-b-1 inset-shadow-dim-r inset-shadow-lit-l-1 inset-shadow-lit-t-1 inset-shadow-blur-1 rounded-br-[8px] group-has-[+[data-continued]]/bubble:rounded-br-full has-[[data-slot=attachment]]:rounded-b-md has-[[data-slot=attachment]]:rounded-t-md bg-indigo-700 dark:bg-neutral-100 text-background chat-bubble bubble-sender text-left pl-6 pr-4 py-3"),
+  recipient: cn(defaultClasses,
+    "inset-shadow-lit inset-shadow-dim/20 dark:inset-shadow-lit/20 dark:inset-shadow-dim/50 inset-shadow-dim-b-1 inset-shadow-dim-r inset-shadow-lit-t-1 inset-shadow-lit-l-1 inset-shadow-blur-1 rounded-bl-[8px] group-has-[+[data-continued]]/bubble:rounded-bl-full has-[[data-slot=attachment]]:rounded-b-md has-[[data-slot=attachment]]:rounded-t-md bg-neutral-100 dark:bg-neutral-800 text-foreground chat-bubble bubble-recipient text-right pl-4 pr-6 py-3"),
+  ai: cn(defaultClasses,
+    "text-sm leading-5 my-1 text-foreground w-full"),
+}

package/src/components/atoms/chip.tsx

@@ -0,0 +1,61 @@
+import { ChevronDown, ConeIcon } from "lucide-react";
+import { AMBER } from "../composed/chat/flowchart/constant";
+
+/* ── chips used inside the condition card ── */
+export function SourceChip() {
+  return (
+    <span
+      data-ui
+      className="inline-flex h-6 shrink-0 items-center gap-1 rounded-[6px] bg-surface px-1.5 text-[12px] font-medium text-ink shadow-btn"
+    >
+      <span className="text-ink-2">
+        <ConeIcon size={12} />
+      </span>
+      order
+    </span>
+  );
+}
+
+export function SelectChip({
+  id,
+  value,
+  dot,
+  open,
+  onToggle
+}: {
+  id: string;
+  value: string;
+  dot?: boolean;
+  items: { name: string; tag?: string }[];
+  width: string;
+  align?: "left" | "right";
+  open: boolean;
+  onToggle: (id: string) => void;
+  onPick: (id: string, name: string) => void;
+}) {
+  return (
+    <span data-ui className="relative inline-flex min-w-0">
+      <button
+        type="button"
+        aria-expanded={open}
+        onClick={() => onToggle(id)}
+        className={`inline-flex h-6 min-w-0 cursor-pointer items-center gap-1 rounded-[6px] px-1.5
+          text-[12px] font-medium text-ink transition-colors duration-100
+          ${open ? "bg-hover-2" : "bg-field hover:bg-hover-2"}`}
+      >
+        {dot && <span className="size-1.5 shrink-0 rounded-full" style={{ background: AMBER }} />}
+        <span className="min-w-0 truncate">{value}</span>
+        <ChevronDown />
+      </button>
+      {/*{open && (
+        <Menu
+          items={items}
+          value={value}
+          width={width}
+          align={align}
+          onPick={(name) => onPick(id, name)}
+        />
+      )}*/}
+    </span>
+  );
+}

package/src/components/atoms/index.ts

@@ -0,0 +1,52 @@
+export * from "./bubble"
+export { SelectChip, SourceChip as FlowchartSourceChip } from "./chip"
+export * from "./text"
+export * from "./background"
+export * from "./avatar"
+export * from "./loader"
+export * from "./reference"
+
+export type { ReferenceProps } from "./types"
+
+export {
+  HighlightPopover,
+  TextClickPopover,
+  TextSelection,
+} from "./text-selection"
+export {
+  initialSelectionState,
+  resetSelectionAtom,
+  selectionAtom,
+  setCurrentSelectionAtom,
+  setPopoverPositionAtom,
+  setSelectionAtom,
+  setSelectionPopoverAtom,
+  setSelectionPositionAtom,
+  setShowPopoverAtom,
+  updateSelectionAtom,
+} from "./text-selection/selection-atom"
+export { useSelection } from "./text-selection/use-selection"
+export type {
+  HighlightPopoverPrimitiveProps,
+  HighlightPopoverProps,
+  SelectionPosition,
+  SelectionPopoverComponent,
+  SelectionRenderProps,
+  SelectionState,
+  SelectionStateUpdate,
+  TextClickPopoverProps,
+  TextPopoverRenderProps,
+  TextSelectionProps,
+} from "./text-selection/types"
+export type {
+  UseSelectionOptions,
+  UseSelectionResult,
+} from "./text-selection/types"
+export type {
+  AvatarAudio,
+  AvatarProps,
+  AvatarSize,
+  AvatarStatus,
+  UserType,
+} from "./avatar/types"
+export type { ILoaderProps, TLoaderType } from "./loader"

package/src/components/atoms/loader.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+import { Spinner } from "@/components/ui/spinner";
+import type { AtomSize } from "./types";
+
+
+export type TLoaderType = "spinner" | "dots";
+export interface ILoaderProps {
+  type?: TLoaderType;
+  className?: string;
+  size?: AtomSize;
+}
+
+
+const sizeMap: Record<AtomSize, string> = {
+  xs: 'w-0.5 h-0.5',
+  sm: 'w-1 h-1',
+  default: 'w-2 h-2',
+  lg: 'w-3 h-3',
+  xl: 'w-4 h-4',
+  xxl: 'w-5 h-5',
+} as const;
+
+export function Loader({ type = "spinner", className, size }: ILoaderProps) {
+
+  if (type === "dots") {
+    return (
+      <div className={cn('flex gap-1 justify-center items-center', className)}>
+        {[0, 1, 2].map((i) => (
+          <span 
+            key={i}
+            className={cn("bg-foreground animate-bounce rounded-full", sizeMap[size ?? 'default'])}
+            style={{ animationDelay: `${i * 0.15}s` }}
+          />
+        ))}
+      </div>
+    );
+  }
+  
+  return (
+    <Spinner className={cn('text-foreground', className)} size={size} />
+  );
+}

package/src/components/atoms/reference.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { Link2 } from "lucide-react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import type { ReferenceProps } from "./types";
+import { Button } from "@/components/ui/button";
+import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "@/components/ui/preview-card"
+
+/**
+ * "Reference 1 ↗" — a translucent tag pointing at the node, passage or
+ * source a suggestion is grounded in. Follows the card it sits in.
+ */
+export function Reference({
+  href,
+  onClick,
+  className,
+  children,
+  preview,
+  ...props
+}: ReferenceProps): React.ReactElement {
+
+  // The rest is forwarded: `ReferenceProps` is anchor props, so `target`,
+  // `rel`, `aria-label` and friends type-check and have to land somewhere.
+  const chip = (
+    <Button {...props} variant="glass" glassVariant="liquid" data-slot="reference-chip" className={cn("inline-flex border border-foreground/10 shadow-none! bg-input/30 h-6.5! pl-2 group", className)} onClick={onClick} render={href ? <a href={href} /> : undefined}>
+      <Link2 size={14} className="-rotate-45 stroke-amber-600 dark:stroke-amber-400" />
+      <span className="truncate text-xs text-foreground/90 group-hover:underline">{children}</span>
+    </Button>
+  )
+  if (preview === undefined || preview === null) return chip
+  return (
+    <PreviewCard>
+      <PreviewCardTrigger delay={300} render={chip} />
+      <PreviewCardPopup className="w-72 flex-col gap-1.5 p-3" data-slot="reference-preview">
+        <span className="truncate text-[11px] font-semibold leading-4 text-muted-foreground">{children}</span>
+        <div className="border-l-2 border-amber-500/70 pl-2.5 text-xs leading-4 text-foreground/90">{preview}</div>
+      </PreviewCardPopup>
+    </PreviewCard>
+  )
+}

package/src/components/atoms/text/__tests__/text.test.tsx

@@ -0,0 +1,47 @@
+import { describe, expect, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+import { Text } from "../index"
+
+describe("Text", () => {
+  test("maps variants to semantic elements", () => {
+    render(
+      <>
+        <Text.Root>Default</Text.Root>
+        <Text.Heading>Heading</Text.Heading>
+        <Text.Paragraph>Paragraph</Text.Paragraph>
+        <Text.Root href="#activity" type="link">
+          Link
+        </Text.Root>
+        <Text.Root type="subscript">Note</Text.Root>
+      </>
+    )
+
+    expect(screen.getByText("Default").tagName).toBe("SPAN")
+    expect(screen.getByText("Heading").tagName).toBe("H2")
+    expect(screen.getByText("Paragraph").tagName).toBe("P")
+    expect(
+      screen.getByRole("link", { name: "Link" }).getAttribute("href")
+    ).toBe("#activity")
+    expect(screen.getByText("Note").tagName).toBe("SUB")
+  })
+
+  test("supports named and numeric sizes", () => {
+    render(
+      <>
+        <Text.Span size="small">Small</Text.Span>
+        <Text.Root size={18}>Custom</Text.Root>
+      </>
+    )
+
+    expect(screen.getByText("Small").className).toContain("text-sm")
+    expect(screen.getByText("Custom").style.fontSize).toBe("18px")
+  })
+
+  test("marks selected text without relying on color alone", () => {
+    render(<Text.Root selection="node-17">Selected corpus text</Text.Root>)
+
+    const selected = screen.getByText("Selected corpus text")
+    expect(selected.getAttribute("data-selection")).toBe("node-17")
+    expect(selected.className).toContain("outline")
+  })
+})

package/src/components/atoms/text/default.tsx

@@ -0,0 +1,59 @@
+import { createElement } from "react"
+import { cn } from "@/lib/utils"
+import type { TextProps, TextSize, TextVariant } from "./types"
+
+const variantClasses: Record<TextVariant, string> = {
+  default: "text-foreground",
+  heading: "font-heading text-2xl font-semibold tracking-tight text-foreground",
+  paragraph: "leading-7 text-foreground",
+  link: "text-primary underline underline-offset-4 hover:text-primary/80",
+  subscript: "align-sub text-xs text-muted-foreground",
+}
+
+const sizeClasses: Record<Exclude<TextSize, number>, string> = {
+  small: "text-sm",
+  medium: "text-base",
+  large: "text-lg",
+}
+
+const defaultTags: Record<TextVariant, keyof HTMLElementTagNameMap> = {
+  default: "span",
+  heading: "h2",
+  paragraph: "p",
+  link: "a",
+  subscript: "sub",
+}
+
+export function Text({
+  children,
+  className,
+  id,
+  selection,
+  size = "medium",
+  style,
+  type = "default",
+  ...props
+}: TextProps) {
+  const tag = defaultTags[type]
+  const fontSize = typeof size === "number" ? `${size}px` : undefined
+  const selectionValue =
+    typeof selection === "string" ? selection : selection ? "" : undefined
+
+  return createElement(
+    tag,
+    {
+      ...props,
+      className: cn(
+        variantClasses[type],
+        typeof size === "number" ? undefined : sizeClasses[size],
+        selectionValue !== undefined &&
+          "rounded-xs outline-1 outline-offset-2 outline-accent/45",
+        className
+      ),
+      "data-selection": selectionValue,
+      id,
+      style: { ...style, ...(fontSize ? { fontSize } : {}) },
+    },
+    children
+  )
+}

package/src/components/atoms/text/heading.tsx

@@ -0,0 +1,61 @@
+import { cn } from "@/lib/utils"
+import { TextSelection } from "../text-selection"
+import type { TextSelectionProps } from "../text-selection"
+import { Text } from "./default"
+import type { TextProps } from "./types"
+import { twClasses } from "./utils";
+
+export type HeadingProps = Omit<TextProps, "type"> &
+  Omit<TextSelectionProps, "children" | "className">
+
+export function Heading({
+  children,
+  selected,
+  popover,
+  component,
+  componentProps,
+  popoverComponent,
+  popoverProps,
+  renderPopover,
+  onSelectionStart,
+  onSelectionEnd,
+  onPopoverShow,
+  onPopoverHide,
+  offset,
+  zIndex,
+  className,
+  alignment,
+  minSelectionLength,
+  ...textProps
+}: HeadingProps) {
+  return (
+    <TextSelection
+      alignment={alignment}
+      component={component}
+      componentProps={componentProps}
+      minSelectionLength={minSelectionLength}
+      offset={offset}
+      onPopoverHide={onPopoverHide}
+      onPopoverShow={onPopoverShow}
+      onSelectionEnd={onSelectionEnd}
+      onSelectionStart={onSelectionStart}
+      popover={popover}
+      popoverComponent={popoverComponent}
+      popoverProps={popoverProps}
+      renderPopover={renderPopover}
+      selected={selected}
+      zIndex={zIndex}
+    >
+      <Text
+        {...textProps}
+        className={cn(
+          twClasses["default"],
+          className
+        )}
+        type="heading"
+      >
+        {children}
+      </Text>
+    </TextSelection>
+  )
+}