@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/composed/records-table.story.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { RecordsTable } from "./chat/records-table"
+
+export const story = defineStory({
+  Component: RecordsTable as FC<
+    Pick<ComponentProps<typeof RecordsTable>, "rows" | "maxTags">
+  >,
+  args: {
+    initial: {
+      rows: [
+        {
+          id: "1",
+          name: "Iliad",
+          initial: "I",
+          tags: [
+            {
+              label: "Epic",
+            },
+          ],
+          lastInteraction: "Today",
+          strength: "Strong",
+        },
+        {
+          id: "2",
+          name: "Odyssey",
+          initial: "O",
+          tags: [
+            {
+              label: "Epic",
+            },
+          ],
+          lastInteraction: "Yesterday",
+          strength: "Strong",
+        },
+      ],
+      maxTags: 2,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/research-answer.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { ResearchAnswer } from "./ai/research-answer"
+
+export const story = defineStory({
+  Component: ResearchAnswer as FC<
+    Pick<
+      ComponentProps<typeof ResearchAnswer>,
+      | "content"
+      | "kicker"
+      | "kickerSub"
+      | "source"
+      | "date"
+      | "authors"
+      | "bare"
+    >
+  >,
+  args: {
+    initial: {
+      content: "Homeric verse uses repeated formulas to fit the meter.",
+      source: "Iliad · Homer corpus",
+      authors: "Homer",
+      date: "c. 750 BCE",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/social-providers.story.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { SocialProviders } from "./social-providers"
+
+export const story = defineStory({
+  Component: SocialProviders as FC<
+    Pick<
+      ComponentProps<typeof SocialProviders>,
+      "providers" | "action" | "layout" | "loadingProvider" | "disabled"
+    >
+  >,
+  args: {
+    initial: {
+      action: "continue",
+      layout: "stack",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/streaming-text.story.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { StreamingText } from "./ai/streaming-text"
+
+export const story = defineStory({
+  Component: StreamingText as FC<
+    Pick<
+      ComponentProps<typeof StreamingText>,
+      "paragraphs" | "streaming" | "wordMs"
+    >
+  >,
+  args: {
+    initial: {
+      paragraphs: ["The Iliad opens with an invocation to the Muse."],
+      streaming: true,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/tree/__tests__/tree-atom.test.tsx

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { createStore } from "jotai"
 
-import { ExegiaProvider } from "@/state"
+import { ExegiaProvider } from "@/lib/state"
 import { Tree, useTreeActions, useTreeState } from "../index"
 import {
   DEFAULT_TREE_CONFIG,

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

@@ -289,7 +289,7 @@ describe("Tree · sidebar", () => {
     // to size-5 and foreground colour — the icon is the whole row.
     const row = screen.getByRole("button", { name: "Search" })
     expect(row.className).toContain("h-10!")
-    expect(row.className).toContain("rounded-xl!")
+    expect(row.className).toContain("rounded-md!")
     expect(row.className).toContain("justify-center")
     expect(row.className).toContain("w-full")
     const icon = row.querySelector('[data-slot="tree-row-icon"]')

package/src/components/composed/tree/tree-node.tsx

@@ -363,7 +363,7 @@ function TreeRowImpl({ node, depth }: TreeRowProps): React.ReactElement {
         aria-label={variant === "sidebar" && collapsed ? node.label : undefined}
         className={cn(
           "transform cursor-pointer! justify-start transition-transform ease-smooth-out",
-          variant === "sidebar" && collapsed ? "h-10! rounded-xl!" : undefined,
+          variant === "sidebar" && collapsed ? "h-10! rounded-md!" : undefined,
           rowClassName
         )}
         disabled={node.disabled}

package/src/components/composed/tree/use-tree.ts

@@ -152,29 +152,43 @@ export function useTree(options: UseTreeOptions): TreeController {
   const projectCollapsed = useSetAtom(projectTreeCollapsedAtom(treeId))
   const revealAncestors = useSetAtom(revealTreeAncestorsAtom(treeId))
 
+  // Reads BEFORE the write effects, and the writes in passive effects: jotai
+  // (v3) subscribes `useAtomValue` in its own `useEffect` with no
+  // post-subscription recheck, so a write from a `useLayoutEffect` (or from
+  // any effect declared before the reads) lands before the subscription
+  // exists and the tree never re-renders with the seeded state.
+  // Never `treeItemsAtom` — see the note on `treeOwnedItemsAtom`.
+  const ownedItems = useAtomValue(treeOwnedItemsAtom(treeId))
+  const items = options.items ?? ownedItems
+  const activeId = useAtomValue(treeActiveIdAtom(treeId))
+  const expandedIds = useAtomValue(treeExpandedIdsAtom(treeId))
+  const collapsed = useAtomValue(treeCollapsedAtom(treeId))
+  const renamingId = useAtomValue(treeRenamingIdAtom(treeId))
+  const canRename = useAtomValue(treeCanRenameAtom(treeId))
+  const canMove = useAtomValue(treeCanMoveAtom(treeId))
+
   // Handlers first — they must be in the store before any action can fire.
   // Rewritten every commit; no read atom depends on them, so nobody
   // re-renders for it.
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     publishHandlers(handlers)
   }, [publishHandlers, handlers])
 
-  // Before paint, so a seeded branch never paints closed for a frame.
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     mount(config, seed)
   }, [mount, config, seed])
 
   // Controlled props stay the source of truth; the store carries a projection
   // so the action atoms and remote readers see current data.
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (options.items !== undefined) projectItems(options.items)
   }, [options.items, projectItems])
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (options.activeId !== undefined) projectActiveId(options.activeId)
   }, [options.activeId, projectActiveId])
 
-  React.useLayoutEffect(() => {
+  React.useEffect(() => {
     if (options.collapsed !== undefined) projectCollapsed(options.collapsed)
   }, [options.collapsed, projectCollapsed])
 
@@ -185,16 +199,6 @@ export function useTree(options: UseTreeOptions): TreeController {
     return () => removeTreeInstance(treeId)
   }, [treeId, options.treeId])
 
-  // Never `treeItemsAtom` — see the note on `treeOwnedItemsAtom`.
-  const ownedItems = useAtomValue(treeOwnedItemsAtom(treeId))
-  const items = options.items ?? ownedItems
-  const activeId = useAtomValue(treeActiveIdAtom(treeId))
-  const expandedIds = useAtomValue(treeExpandedIdsAtom(treeId))
-  const collapsed = useAtomValue(treeCollapsedAtom(treeId))
-  const renamingId = useAtomValue(treeRenamingIdAtom(treeId))
-  const canRename = useAtomValue(treeCanRenameAtom(treeId))
-  const canMove = useAtomValue(treeCanMoveAtom(treeId))
-
   // Navigating into a nested entry from elsewhere reveals its ancestors, even
   // ones the reader had collapsed. In a layout effect, so the branch is open
   // before the frame paints.

package/src/components/composed/tree.story.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { Tree } from "./tree"
+
+function TreePreview({ sound }: { sound: boolean }) {
+  return (
+    <Tree
+      sound={sound}
+      variant="navigation"
+      items={[
+        {
+          id: "corpora",
+          label: "Corpora",
+          children: [
+            { id: "iliad", label: "Iliad" },
+            { id: "odyssey", label: "Odyssey" },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+export const story = defineStory({
+  Component: TreePreview,
+  args: { initial: { sound: true } },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/user/index.ts

@@ -0,0 +1,14 @@
+import { Info } from "./info"
+import { Message } from "./message"
+import { Pill } from "./pill"
+import type { UserInfoProps, UserPillProps } from "./types"
+
+const User = {
+  Info,
+  Message,
+  Pill,
+}
+
+export type { UserInfoProps, UserPillProps }
+
+export default User

package/src/components/composed/user/info.tsx

@@ -0,0 +1,48 @@
+import { Avatar } from "@/components/atoms"
+import { Badge } from "@/components/ui/badge"
+import type { UserInfoProps } from "./types"
+import { cn } from "@/lib/utils"
+
+/**
+ * This component displays a user's information in a compact format.
+ * that can be used to display a user's name and role,
+ * in the chat bubble header or sidebar profile.
+ * @param {UserInfoProps['user']} user - The user to display.
+ * @param {UserInfoProps['description']} description - The description to display.
+ *
+ * @description Displays a user's name and role in a compact format.
+ *
+ */
+export function Info({
+  user,
+  description,
+  direction = "sender",
+  audio,
+  size,
+}: UserInfoProps) {
+  return (
+    <div
+      slot="info"
+      className={cn("flex flex-row items-center gap-1.5", {
+        "flex-row-reverse": direction === "sender",
+      })}
+    >
+      <Avatar size={size ?? "default"} user={user} audio={audio} />
+      <div className="flex flex-col">
+        <div className={cn("flex items-center flex-row gap-1.5", { "flex-row-reverse": direction === "sender" })}>
+          <span className="text-sm font-semibold">
+            {user.firstName} {user.lastName}
+          </span>
+          {user.role && (
+            <Badge variant="invert" size="xs">
+              {user.role}
+            </Badge>
+          )}
+        </div>
+        {description && (
+          <span className="text-xs text-muted-foreground">{description}</span>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/composed/user/message.tsx

@@ -0,0 +1,10 @@
+import { Bubble } from "@/components/atoms";
+
+
+export function Message({ children }: { children: React.ReactNode }) {
+  return <Bubble>
+    
+    {children}
+  </Bubble>
+  
+}

package/src/components/composed/user/pill.tsx

@@ -0,0 +1,20 @@
+import { Avatar } from "@/components/atoms"
+import type { UserPillProps } from "./types"
+import { Button } from "@/components/ui/button"
+
+/**
+ * This component displays a user's information in a compact format.
+ * that can be used to display a user's name and role,
+ * in the chat bubble header or sidebar profile.
+ * @param {UserPillProps['user']} user - The user to display.
+ * @description Displays a user's name and role in a compact format.
+ *
+ */
+export function Pill({ user }: UserPillProps) {
+  return (
+    <Button size="sm" className="gap-1 rounded-full pl-0.5">
+      <Avatar user={user} size="sm" />
+      <span className="text-xs">@{user.firstName}</span>
+    </Button>
+  )
+}

package/src/components/composed/user/types.ts

@@ -0,0 +1,27 @@
+import type { UserType, AvatarProps } from "@/components/atoms";
+import type { BubbleVariant } from "@/components/atoms/bubble";
+import type React from "react";
+
+
+export type TUserInfo<T extends UserType> = T & {
+  description?: string
+  audio?: AvatarProps<T>['audio']
+  size?: AvatarProps<T>['size']
+  direction?: Exclude<BubbleVariant, "ai">
+}
+
+export type TUserVariant = "pill" | "info"
+
+export interface IUserBaseProps<T extends UserType, Variant extends TUserVariant = TUserVariant> {
+  user: T
+  variant: Variant
+}
+
+export interface IUserMessageProps<T extends UserType> extends IUserBaseProps<T> {
+  children: React.ReactNode
+  size?: AvatarProps<T>['size']
+  
+}
+
+export type UserInfoProps<T extends UserType = UserType> = Exclude<IUserBaseProps<T, "info">, "variant"> & TUserInfo<T>
+export type UserPillProps<T extends UserType = UserType> = Exclude<IUserBaseProps<T, "pill">, "variant" | "size">

package/src/components/composed/user.story.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Info } from "./user/info"
+
+export const story = defineStory({
+  Component: Info as FC<
+    Pick<
+      ComponentProps<typeof Info>,
+      "variant" | "user" | "description" | "size" | "direction" | "audio"
+    >
+  >,
+  args: {
+    initial: {
+      variant: "info",
+      user: {
+        firstName: "Jenny",
+        lastName: "Hamilton",
+        role: "Editor",
+      },
+      description: "Corpus researcher",
+    },
+  },
+})
+
+export const Preview = story.WithControl

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

@@ -0,0 +1,57 @@
+import { describe, expect, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { Verse, VerseNote, VerseSpan } from "../verse"
+
+function DemoVerse() {
+  return (
+    <Verse
+      chapter="1:1"
+      chapterPopover={<p>Chapter body</p>}
+      href="#gen-1"
+      size="small"
+    >
+      In the beginning{" "}
+      <VerseSpan popover={<p>Span body</p>}>God created</VerseSpan> the earth
+      <VerseNote popover={<p>Note body</p>}>a</VerseNote>.
+    </Verse>
+  )
+}
+
+describe("verse", () => {
+  test("renders the chapter as a link and the note as a subscript", () => {
+    render(<DemoVerse />)
+
+    const chapter = screen.getByText("1:1")
+    expect(chapter.tagName).toBe("A")
+    expect(chapter.getAttribute("href")).toBe("#gen-1")
+    expect(screen.getByText("a").tagName).toBe("SUB")
+    expect(screen.getByText(/the earth/).closest("[data-verse]")).toBeTruthy()
+  })
+
+  test("chapter, span and note each open their own popover on click", async () => {
+    const user = userEvent.setup()
+    render(<DemoVerse />)
+
+    await user.click(screen.getByText("1:1"))
+    expect(await screen.findByText("Chapter body")).toBeTruthy()
+
+    await user.click(screen.getByText("God created"))
+    expect(await screen.findByText("Span body")).toBeTruthy()
+
+    await user.click(screen.getByText("a"))
+    expect(await screen.findByText("Note body")).toBeTruthy()
+  })
+
+  test("a chapter without a popover renders a plain link", () => {
+    render(
+      <Verse chapter="2:4" href="#gen-2">
+        A generations heading.
+      </Verse>
+    )
+
+    const chapter = screen.getByText("2:4")
+    expect(chapter.tagName).toBe("A")
+    expect(chapter.getAttribute("role")).toBeNull()
+  })
+})

package/src/components/composed/verse/index.ts

@@ -0,0 +1,2 @@
+export { Verse, VerseNote, VerseSpan } from "./verse"
+export type { VerseNoteProps, VerseProps, VerseSpanProps } from "./types"

package/src/components/composed/verse/types.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from "react"
+import type { TextSize } from "../../atoms/text/types"
+import type { TextClickPopoverProps } from "../../atoms/text-selection/types"
+
+export interface VerseProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  "children"
+> {
+  children?: ReactNode
+  className?: string
+  /** Chapter reference rendered as a leading link, e.g. "3:16". */
+  chapter?: ReactNode
+  /** Destination of the chapter link. */
+  href?: string
+  /** Popover content opened by clicking the chapter link. */
+  chapterPopover?: TextClickPopoverProps["popover"]
+  renderChapterPopover?: TextClickPopoverProps["renderPopover"]
+  /** Type scale shared with nested verse spans and notes. */
+  size?: TextSize
+}
+
+export type VerseSpanProps = Omit<TextClickPopoverProps, "type">
+
+export type VerseNoteProps = Omit<TextClickPopoverProps, "type">

package/src/components/composed/verse/verse.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import { createContext, useContext } from "react"
+import type { ReactElement } from "react"
+import { cn } from "@/lib/utils"
+import { Text } from "../../atoms/text/default"
+import { TextClickPopover } from "../../atoms/text-selection/click-popover"
+import type { TextSize } from "../../atoms/text/types"
+import type { VerseNoteProps, VerseProps, VerseSpanProps } from "./types"
+
+const VerseSizeContext = createContext<TextSize | undefined>(undefined)
+
+const chapterClassName =
+  "mr-1.5 align-super text-[0.7em] font-medium no-underline hover:underline"
+
+export function Verse({
+  chapter,
+  chapterPopover,
+  children,
+  className,
+  href,
+  renderChapterPopover,
+  size = "medium",
+  ...props
+}: VerseProps): ReactElement {
+  const hasChapterPopover =
+    renderChapterPopover !== undefined ||
+    (chapterPopover !== undefined && chapterPopover !== null)
+
+  return (
+    <VerseSizeContext.Provider value={size}>
+      <Text
+        {...props}
+        className={className}
+        data-verse=""
+        size={size}
+        type="paragraph"
+      >
+        {chapter !== undefined && chapter !== null ? (
+          hasChapterPopover ? (
+            <TextClickPopover
+              className={chapterClassName}
+              href={href}
+              popover={chapterPopover}
+              renderPopover={renderChapterPopover}
+              size={size}
+              type="link"
+            >
+              {chapter}
+            </TextClickPopover>
+          ) : (
+            <Text
+              className={chapterClassName}
+              href={href}
+              size={size}
+              type="link"
+            >
+              {chapter}
+            </Text>
+          )
+        ) : null}
+        {children}
+      </Text>
+    </VerseSizeContext.Provider>
+  )
+}
+
+export function VerseSpan({
+  className,
+  size,
+  ...props
+}: VerseSpanProps): ReactElement {
+  const verseSize = useContext(VerseSizeContext)
+  return (
+    <TextClickPopover
+      {...props}
+      className={cn(
+        "underline decoration-muted-foreground/50 decoration-dotted underline-offset-4",
+        className
+      )}
+      size={size ?? verseSize}
+    />
+  )
+}
+
+export function VerseNote({
+  className,
+  size,
+  ...props
+}: VerseNoteProps): ReactElement {
+  const verseSize = useContext(VerseSizeContext)
+  return (
+    <TextClickPopover
+      {...props}
+      className={cn("mx-0.5 text-[0.75em]", className)}
+      size={size ?? verseSize}
+      type="subscript"
+    />
+  )
+}

package/src/components/composed/verse.story.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Verse } from "./verse"
+
+export const story = defineStory({
+  Component: Verse as FC<
+    Pick<ComponentProps<typeof Verse>, "chapter" | "href" | "size" | "children">
+  >,
+  args: {
+    initial: {
+      chapter: "1:1",
+      children: "In the beginning God created the heavens and the earth.",
+    },
+  },
+})
+
+export const Preview = story.WithControl