@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,46 +0,0 @@
-import type { ClassValue } from "clsx"
-import type { IBubbleReaction, TBubbleVariant } 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: IBubbleReaction, 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<TBubbleVariant, ClassValue> = {
-  sender: "items-end",
-  recipient: "items-start",
-  ai: "items-start",
-}
-
-/**
- * The inner column shrink-wraps the message, reactions and actions.
- * Headers offset this inset to reach the thread edge. Generated output
- * stays full-bleed.
- */
-export const twBubbleColumnClasses: Record<TBubbleVariant, 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<TBubbleVariant, ClassValue> = {
-  sender: cn(defaultClasses,
-    "bezel-lit-t-2 bezel-lit-blur-3 bezel-lit/14 bezel-dim-b-2 bezel-dim-blur-3 bezel-dim/78 dark:bezel-lit-blur-2 dark:bezel-lit/57 dark:bezel-dim/11 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,
-    "bezel-lit-t-2 bezel-lit-blur-2 bezel-lit/57 bezel-dim-b-2 bezel-dim-blur-3 bezel-dim/11 dark:bezel-lit-blur-3 dark:bezel-lit/14 dark:bezel-dim/78 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

@@ -1,61 +0,0 @@
-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/field.tsx

@@ -1,43 +0,0 @@
-import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field";
-import type { IInputFieldProps, TInputFieldSize } from "./types";
-import { Input } from "@/components/ui/input";
-
-const inputFieldSizeClasses: TInputFieldSize = {
-  label: {
-    sm: "text-sm",
-    default: "text-base",
-    lg: "text-lg",
-  },
-  input: {
-    sm: "w-64",
-    default: "w-full",
-    lg: "w-96"
-  },
-  description: {
-    sm: "w-64",
-    default: "w-full",
-    lg: "w-96",
-  },
-  icon: {
-    sm: "w-64",
-    default: "w-full",
-    lg: "w-96"
-  },
-};
-
-export function InputField({ invalid, label, description, error, size = "default", ...props }: IInputFieldProps) {
-
-  const renderDescription = () => {
-    if (!description || !error) return
-    if (error) return <FieldError match={Boolean(invalid)}>{error}</FieldError>
-    return <FieldDescription className={inputFieldSizeClasses.description[size]}>{description}</FieldDescription>
-  }
-
-  return (
-    <Field>
-      <FieldLabel className={inputFieldSizeClasses.label[size]}>{label}</FieldLabel>
-      <Input {...props} className={inputFieldSizeClasses.input[size]} />
-      {renderDescription()}
-    </Field>
-  );
-}

package/src/components/atoms/index.ts

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

package/src/components/atoms/loader.tsx

@@ -1,33 +0,0 @@
-import { cn } from "@/lib/utils";
-import { Spinner } from "@/components/ui/spinner";
-import type { TAtomSize, ILoaderProps } from "./types";
-
-const sizeMap: Record<TAtomSize, 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

@@ -1,41 +0,0 @@
-"use client"
-
-import { Link2 } from "lucide-react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import type { IReferenceProps } 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
-}: IReferenceProps): 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

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

@@ -1,59 +0,0 @@
-import { createElement } from "react"
-import { cn } from "@/lib/utils"
-import type { TTextProps, TTextSize, TTextVariant } from "./types"
-
-const variantClasses: Record<TTextVariant, 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<TTextSize, number>, string> = {
-  small: "text-sm",
-  medium: "text-base",
-  large: "text-lg",
-}
-
-const defaultTags: Record<TTextVariant, 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
-}: TTextProps) {
-  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

@@ -1,58 +0,0 @@
-import { cn } from "@/lib/utils"
-import { TextSelection } from "../text-selection"
-import { Text } from "./default"
-import type { THeadingProps } from "./types"
-import { twClasses } from "./utils";
-
-
-export function Heading({
-  children,
-  selected,
-  popover,
-  component,
-  componentProps,
-  popoverComponent,
-  popoverProps,
-  renderPopover,
-  onSelectionStart,
-  onSelectionEnd,
-  onPopoverShow,
-  onPopoverHide,
-  offset,
-  zIndex,
-  className,
-  alignment,
-  minSelectionLength,
-  ...textProps
-}: THeadingProps) {
-  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>
-  )
-}

package/src/components/atoms/text/index.ts

@@ -1,28 +0,0 @@
-import { Text as TextDefault } from "./default"
-import { Heading } from "./heading"
-import { Paragraph } from "./paragraph"
-import { Span } from "./span"
-import { Label } from "./label"
-export type {
-  THeadingProps,
-  TParagraphProps,
-  TSpanProps,
-  TTextProps,
-  TTextSize,
-  TTextVariant,
-} from "./types"
-
-export const Text = {
-  /** The polymorphic base the presets below are built on — the only member
-   * that takes `type`, so it is what reaches `link` and `subscript`. The
-   * presets are reachable through the atoms barrel, and without this it
-   * would not be: `export *` does not carry a default export. */
-  Root: TextDefault,
-  Heading,
-  Paragraph,
-  Span,
-  Label,
-}
-
-export { TextDefault as default }
-

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

@@ -1,16 +0,0 @@
-import type { TLabelProps } from "./types"
-import { cn } from "@/lib/utils"
-import { twLabelClasses } from "./utils"
-export function Label({ children, level = "title", className }: TLabelProps) {
-  return (
-    <div
-      className={cn(
-        "leading-1 select-none",
-        level && twLabelClasses[level],
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}

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

@@ -1,55 +0,0 @@
-import { TextSelection } from "../text-selection"
-import { Text } from "./default"
-import type { TParagraphProps } from "./types"
-import { cn } from "@/lib/utils"
-import { twClasses } from "./utils"
-
-
-export function Paragraph({
-  children,
-  selected,
-  popover,
-  component,
-  componentProps,
-  popoverComponent,
-  popoverProps,
-  renderPopover,
-  onSelectionStart,
-  onSelectionEnd,
-  onPopoverShow,
-  onPopoverHide,
-  offset,
-  zIndex,
-  alignment,
-  className,
-  minSelectionLength,
-  ...textProps
-}: TParagraphProps) {
-  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="paragraph"
-      >
-        {children}
-      </Text>
-    </TextSelection>
-  )
-}

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

@@ -1,14 +0,0 @@
-import type { TSpanProps } from "./types"
-import { Text } from "./default"
-import { cn } from "@/lib/utils"
-
-
-export function Span(props: TSpanProps) {
-  return (
-    <Text
-      {...props}
-      className={cn("select-text selection:bg-transparent", props.className)}
-      type="default"
-    />
-  )
-}

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

@@ -1,41 +0,0 @@
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react"
-import type { ITextSelectionProps } from "../text-selection"
-
-export type TTextVariant =
-  "default" | "heading" | "paragraph" | "link" | "subscript"
-export type TTextSize = "small" | "medium" | "large" | number
-
-export type TTextProps = Omit<
-  HTMLAttributes<HTMLElement>,
-  "children" | "style"
-> & {
-  id?: string
-  children?: ReactNode
-  className?: string
-  /** Named sizes use the type scale; a number is interpreted as pixels. */
-  size?: TTextSize
-  type?: TTextVariant
-  href?: string
-  /** Marks a reader selection. A string is also exposed as data-selection. */
-  selection?: string | boolean
-  style?: CSSProperties
-}
-
-export type THeadingProps = Omit<TTextProps, "type"> &
-  Omit<ITextSelectionProps, "children" | "className">
-
-
-export type TSpanProps = Omit<TTextProps, "type">
-export type TParagraphProps = Omit<TTextProps, "type"> &
-  Omit<ITextSelectionProps, "children" | "className">
-
-
-export type TLabelLevel = "heading" | "title" | "caption" | "subtitle"
-
-export type TLabelProps = {
-  children: ReactNode
-  className?: string
-  /** Type scale of the label. Defaults to "title". */
-  level?: TLabelLevel
-  id?: string
-}

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

@@ -1,16 +0,0 @@
-import type { ClassValue } from "clsx"
-import type { TLabelProps } from "./types"
-
-export const twClasses: Record<string, ClassValue> = {
-  default: "selection:text-amber-500 dark:selection:text-amber-400",
-}
-
-export const twLabelClasses: Record<
-  NonNullable<TLabelProps["level"]>,
-  Element["className"]
-> = {
-  title: "text-lg text-neutral-500",
-  subtitle: "text-md text-neutral-500",
-  caption: "text-xs text-neutral-400 dark:text-neutral-700",
-  heading: "text-sm text-neutral-500"
-}

package/src/components/atoms/text-selection/__tests__/click-popover.test.tsx

@@ -1,61 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { TextClickPopover } from "../click-popover"
-
-describe("text click popover", () => {
-  test("clicking the text opens the popover content", async () => {
-    const user = userEvent.setup()
-    render(
-      <TextClickPopover popover={<p>Popover body</p>} size="small">
-        Clickable span
-      </TextClickPopover>
-    )
-
-    expect(screen.queryByText("Popover body")).toBeNull()
-
-    await user.click(screen.getByText("Clickable span"))
-    expect(await screen.findByText("Popover body")).toBeTruthy()
-  })
-
-  test("keeps the text element semantics for link and subscript", async () => {
-    const user = userEvent.setup()
-    render(
-      <>
-        <TextClickPopover popover={<p>Link body</p>} type="link">
-          Link text
-        </TextClickPopover>
-        <TextClickPopover popover={<p>Subscript body</p>} type="subscript">
-          Subscript note
-        </TextClickPopover>
-      </>
-    )
-
-    expect(screen.getByText("Link text").tagName).toBe("A")
-    expect(screen.getByText("Subscript note").tagName).toBe("SUB")
-
-    await user.click(screen.getByText("Subscript note"))
-    expect(await screen.findByText("Subscript body")).toBeTruthy()
-  })
-
-  test("renderPopover receives close and dismisses the popup", async () => {
-    const user = userEvent.setup()
-    render(
-      <TextClickPopover
-        renderPopover={({ close }) => (
-          <button onClick={close} type="button">
-            Dismiss
-          </button>
-        )}
-      >
-        Clickable text
-      </TextClickPopover>
-    )
-
-    await user.click(screen.getByText("Clickable text"))
-    const dismiss = await screen.findByText("Dismiss")
-
-    await user.click(dismiss)
-    expect(screen.queryByText("Dismiss")).toBeNull()
-  })
-})