@exegia/corpora-ui 0.28.0 → 1.0.0

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

@@ -0,0 +1,125 @@
+import type {
+  ComponentProps,
+  ComponentType,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
+} from "react"
+import type { HighlightPopover as HighlightPopoverPrimitive } from "@omsimos/react-highlight-popover"
+import type { PopoverPopup } from "@/components/ui/popover"
+import type { TextProps } from "../text/types"
+
+export interface SelectionPosition {
+  top: number
+  left: number
+}
+
+export interface SelectionState {
+  selected: boolean
+  currentSelection: string
+  showPopover: boolean
+  popoverPosition: SelectionPosition | null
+}
+
+export type SelectionStateUpdate =
+  Partial<SelectionState> | ((state: SelectionState) => Partial<SelectionState>)
+
+export interface SelectionRenderProps {
+  position: SelectionPosition
+  selection: string
+  selected: boolean
+  showPopover: boolean
+  setCurrentSelection: (selection: string) => void
+  setShowPopover: (show: boolean) => void
+  close: () => void
+}
+
+export type SelectionPopoverComponent = ComponentType<SelectionRenderProps>
+
+export type HighlightPopoverPrimitiveProps = ComponentProps<
+  typeof HighlightPopoverPrimitive
+>
+
+export interface HighlightPopoverProps extends Omit<
+  HTMLAttributes<HTMLElement>,
+  "children"
+> {
+  children?: ReactNode
+  /** Render a component around the popover content. */
+  component?: ElementType
+  /** Props forwarded to the custom component. */
+  componentProps?: Record<string, unknown>
+  /** Render function for applications that need full control of the markup. */
+  render?: (props: SelectionRenderProps) => ReactNode
+}
+
+export interface TextSelectionProps extends Omit<
+  HighlightPopoverPrimitiveProps,
+  | "children"
+  | "renderPopover"
+  | "onSelectionStart"
+  | "onSelectionEnd"
+  | "onPopoverShow"
+  | "onPopoverHide"
+> {
+  children: ReactNode
+  selected?: boolean
+  popover?: ReactNode
+  component?: ElementType
+  componentProps?: Record<string, unknown>
+  popoverComponent?: ElementType
+  popoverProps?: Record<string, unknown>
+  renderPopover?: (props: SelectionRenderProps) => ReactNode
+  onSelectionStart?: () => void
+  onSelectionEnd?: (selection: string) => void
+  onPopoverShow?: () => void
+  onPopoverHide?: () => void
+}
+
+
+export interface TextPopoverRenderProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+  close: () => void
+}
+
+export interface TextClickPopoverProps extends Omit<TextProps, "popover"> {
+  /** Popover content rendered when the text is clicked. */
+  popover?: ReactNode
+  /** Render function for applications that need full control of the markup. */
+  renderPopover?: (props: TextPopoverRenderProps) => ReactNode
+  /** Props forwarded to the popup (side, align, className, …). */
+  popoverProps?: ComponentProps<typeof PopoverPopup>
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface UseSelectionOptions {
+  selected?: boolean
+  onSelectionStart?: () => void
+  onSelectionEnd?: (selection: string) => void
+  onPopoverShow?: () => void
+  onPopoverHide?: () => void
+}
+
+export interface UseSelectionResult {
+  state: SelectionState
+  selected: boolean
+  currentSelection: string
+  showPopover: boolean
+  popoverPosition: SelectionState["popoverPosition"]
+  setSelection: (selection: string) => void
+  setPosition: (
+    position: NonNullable<SelectionState["popoverPosition"]>
+  ) => void
+  setShowPopover: (show: boolean) => void
+  update: (update: SelectionStateUpdate) => void
+  reset: () => void
+  selectionProps: {
+    onSelectionStart: () => void
+    onSelectionEnd: (selection: string) => void
+    onPopoverShow: () => void
+    onPopoverHide: () => void
+  }
+}

package/src/components/atoms/text-selection/use-selection.ts

@@ -0,0 +1,84 @@
+"use client"
+
+import { useCallback, useMemo } from "react"
+import { useAtomValue, useSetAtom } from "jotai"
+import {
+  resetSelectionAtom,
+  selectionAtom,
+  setSelectionAtom,
+  setSelectionPopoverAtom,
+  setSelectionPositionAtom,
+  updateSelectionAtom,
+} from "./selection-atom"
+import type { UseSelectionOptions, UseSelectionResult } from "./types"
+
+/**
+ * Coordinates the third-party highlight popover callbacks with the shared
+ * selection atom. The returned `selectionProps` can be spread directly onto
+ * `@omsimos/react-highlight-popover`.
+ */
+export function useSelection(
+  options: UseSelectionOptions = {}
+): UseSelectionResult {
+  const {
+    selected: selectedProp,
+    onSelectionStart: onSelectionStartProp,
+    onSelectionEnd: onSelectionEndProp,
+    onPopoverShow: onPopoverShowProp,
+    onPopoverHide: onPopoverHideProp,
+  } = options
+  const state = useAtomValue(selectionAtom)
+  const setSelection = useSetAtom(setSelectionAtom)
+  const setPosition = useSetAtom(setSelectionPositionAtom)
+  const setShowPopover = useSetAtom(setSelectionPopoverAtom)
+  const update = useSetAtom(updateSelectionAtom)
+  const reset = useSetAtom(resetSelectionAtom)
+
+  const onSelectionStart = useCallback(() => {
+    update({ selected: false, showPopover: false })
+    onSelectionStartProp?.()
+  }, [onSelectionStartProp, update])
+
+  const onSelectionEnd = useCallback(
+    (selection: string) => {
+      setSelection(selection)
+      onSelectionEndProp?.(selection)
+    },
+    [onSelectionEndProp, setSelection]
+  )
+
+  const onPopoverShow = useCallback(() => {
+    setShowPopover(true)
+    onPopoverShowProp?.()
+  }, [onPopoverShowProp, setShowPopover])
+
+  const onPopoverHide = useCallback(() => {
+    setShowPopover(false)
+    onPopoverHideProp?.()
+  }, [onPopoverHideProp, setShowPopover])
+
+  const selectionProps = useMemo(
+    () => ({
+      onSelectionStart,
+      onSelectionEnd,
+      onPopoverShow,
+      onPopoverHide,
+    }),
+    [onPopoverHide, onPopoverShow, onSelectionEnd, onSelectionStart]
+  )
+
+  return {
+    state:
+      selectedProp === undefined ? state : { ...state, selected: selectedProp },
+    selected: selectedProp ?? state.selected,
+    currentSelection: state.currentSelection,
+    showPopover: state.showPopover,
+    popoverPosition: state.popoverPosition,
+    setSelection,
+    setPosition,
+    setShowPopover,
+    update,
+    reset,
+    selectionProps,
+  }
+}

package/src/components/atoms/types.ts

@@ -0,0 +1,18 @@
+export type AtomSize = "xs" | "sm" | "default" | "lg" | "xl" | "xxl"
+
+export interface ReferenceProps {
+  /** With an href the chip renders as a link, otherwise as a button. */
+  href?: string
+  target?: React.HTMLAttributeAnchorTarget
+  rel?: string
+  id?: string
+  className?: string
+  children?: React.ReactNode
+  "aria-label"?: string
+  onClick?: React.MouseEventHandler<HTMLElement>
+  /**
+   * The passage the chip points at, shown in a preview card on hover or
+   * focus. Omitted, the chip is just a link.
+   */
+  preview?: React.ReactNode
+}

package/src/components/blocks/auth/__tests__/auth-flow-block.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } 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 { AuthFlowBlock } from "../auth-flow-block"
 import {
   DEFAULT_AUTH_FLOW_ID,

package/src/components/blocks/auth/__tests__/auth-state-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 {
   DEFAULT_AUTH_FLOW_ID,
   authFlowErrorAtom,

package/src/components/blocks/auth/auth-flow-block.story.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { AuthFlowBlock } from "./auth-flow-block"
+
+export const story = defineStory({
+  Component: AuthFlowBlock,
+  args: {
+    initial: {
+      flowId: "docs-auth-flow-story",
+      successTitle: "You’re signed in",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/code-auth-block.story.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { CodeAuthBlock } from "./code-auth-block"
+
+export const story = defineStory({
+  Component: CodeAuthBlock,
+  args: {
+    initial: {
+      channel: "email",
+      destination: "r•••@example.com",
+      length: 6,
+      autoSubmit: true,
+      resendSeconds: 30,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/forgot-password-block.story.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { ForgotPasswordBlock } from "./forgot-password-block"
+
+export const story = defineStory({
+  Component: ForgotPasswordBlock,
+  args: {
+    initial: {},
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/linked-accounts-block.story.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { LinkedAccountsBlock } from "./linked-accounts-block"
+
+export const story = defineStory({
+  Component: LinkedAccountsBlock,
+  args: {
+    initial: {
+      loading: false,
+      identities: [
+        {
+          id: "researcher",
+          provider: "github",
+          email: "researcher@example.com",
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/linked-accounts-block.tsx

@@ -145,7 +145,7 @@ export function LinkedAccountsBlock({
                         <motion.li
                           key={identity.id}
                           layout
-                          className="flex items-center justify-between gap-3 rounded-lg border px-3 py-2"
+                          className="flex items-center justify-between gap-3 rounded-md border px-3 py-2"
                           initial={{ opacity: 0, y: -4 }}
                           animate={{ opacity: 1, y: 0 }}
                           exit={{ opacity: 0, y: -4 }}

package/src/components/blocks/auth/login-block.story.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { LoginBlock } from "./login-block"
+
+export const story = defineStory({
+  Component: LoginBlock,
+  args: {
+    initial: {
+      title: "Login to your account",
+      showRememberMe: true,
+      showForgotPassword: true,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/onboarding/profile-step.tsx

@@ -178,7 +178,7 @@ export function ProfileStep({
                 id={controlId}
                 aria-invalid={error ? true : undefined}
                 className={cn(
-                  "h-8.5 w-full rounded-lg border border-input bg-background px-[calc(--spacing(3)-1px)] text-base text-foreground shadow-xs/5 outline-none transition-[box-shadow,border-color] duration-150 ease-smooth-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 disabled:opacity-64 aria-invalid:border-destructive/36 sm:h-7.5 sm:text-sm dark:bg-input/32",
+                  "h-8.5 w-full rounded-md border border-input bg-background px-[calc(--spacing(3)-1px)] text-base text-foreground shadow-xs/5 outline-none transition-[box-shadow,border-color] duration-150 ease-smooth-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 disabled:opacity-64 aria-invalid:border-destructive/36 sm:h-7.5 sm:text-sm dark:bg-input/32",
                 )}
                 disabled={submitting}
                 value={String(value ?? "")}

package/src/components/blocks/auth/onboarding-block.story.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { OnboardingBlock } from "./onboarding-block"
+
+export const story = defineStory({
+  Component: OnboardingBlock,
+  args: {
+    initial: { showCompleteScreen: true },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/passkey-manager-block.story.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { PasskeyManagerBlock } from "./passkey-manager-block"
+
+export const story = defineStory({
+  Component: PasskeyManagerBlock,
+  args: {
+    initial: {
+      available: true,
+      loading: false,
+      passkeys: [{ id: "research-laptop", name: "Research laptop" }],
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/passkey-manager-block.tsx

@@ -170,7 +170,7 @@ export function PasskeyManagerBlock({
                         <motion.li
                           key={passkey.id}
                           layout
-                          className="flex flex-col gap-2 rounded-lg border px-3 py-2"
+                          className="flex flex-col gap-2 rounded-md border px-3 py-2"
                           initial={{ opacity: 0, y: -4 }}
                           animate={{ opacity: 1, y: 0 }}
                           exit={{ opacity: 0, y: -4 }}
@@ -275,7 +275,7 @@ export function PasskeyManagerBlock({
 
                           <Reveal show={confirmingId === passkey.id}>
                             <div
-                              className="flex flex-col gap-2 rounded-lg bg-muted/50 p-2"
+                              className="flex flex-col gap-2 rounded-md bg-muted/50 p-2"
                               role="alertdialog"
                               aria-label={`Confirm deleting ${name}`}
                             >

package/src/components/blocks/auth/passkey-sign-in-block.story.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { PasskeySignInBlock } from "./passkey-sign-in-block"
+
+export const story = defineStory({
+  Component: PasskeySignInBlock,
+  args: {
+    initial: { available: true, label: "Sign in with a passkey" },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/signup-block.story.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { SignupBlock } from "./signup-block"
+
+export const story = defineStory({
+  Component: SignupBlock,
+  args: {
+    initial: {
+      showNameField: true,
+      showTerms: true,
+      enforceStrongPassword: true,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/auth/update-password-block.story.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { UpdatePasswordBlock } from "./update-password-block"
+
+export const story = defineStory({
+  Component: UpdatePasswordBlock,
+  args: {
+    initial: { minStrength: 4 },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/blocks/chat/__tests__/ai-panel.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, mock, test } from "bun:test"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { Provider } from "jotai"
+import { AiPanel, SelectionPopover, type AiScope } from "../index"
+import { formatScopeLabel } from "../shared"
+
+const passageScope: AiScope = {
+  kind: "passage",
+  label: "a.1",
+  range: "¶1–¶2",
+  nodeIds: ["p-1", "p-2"],
+}
+
+describe("AI curation component set", () => {
+  test("keeps the word popover content and appends one Add to chat action", async () => {
+    const onAddToChat = mock(() => {})
+    const user = userEvent.setup()
+    render(
+      <SelectionPopover
+        open
+        onAddToChat={onAddToChat}
+        variant="word"
+        word={{
+          lemma: "doctrina",
+          partOfSpeech: "noun",
+          frequency: 12,
+          onViewDetails: mock(() => {}),
+        }}
+      >
+        <span>doctrina in context</span>
+      </SelectionPopover>
+    )
+
+    expect(screen.getByText("doctrina")).toBeDefined()
+    expect(screen.getByText("noun · 12×")).toBeDefined()
+    expect(screen.getByRole("button", { name: /View details/ })).toBeDefined()
+    expect(screen.getAllByRole("button", { name: /Add to chat/ })).toHaveLength(
+      1
+    )
+    await user.click(screen.getByRole("button", { name: /Add to chat/ }))
+    expect(onAddToChat).toHaveBeenCalledTimes(1)
+  })
+
+  test("formats range and pinned scope labels", () => {
+    expect(formatScopeLabel(passageScope)).toBe("a.1 ¶1–¶2 · passage")
+    expect(
+      formatScopeLabel({ kind: "passage", label: "a.1 ¶1–¶2", pinned: true })
+    ).toBe("PINNED · a.1 ¶1–¶2")
+  })
+
+  test("panel is a named region carrying the thread and the composer", () => {
+    render(
+      <Provider>
+        <AiPanel scope={passageScope} thread={<p>Validate this passage.</p>} />
+      </Provider>
+    )
+
+    expect(
+      screen.getByRole("complementary", { name: "AI panel" })
+    ).toBeDefined()
+    expect(screen.getByText("Validate this passage.")).toBeDefined()
+    expect(screen.getByRole("textbox", { name: "Message" })).toBeDefined()
+  })
+})

package/src/components/blocks/chat/banners.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Alert, AlertAction, AlertDescription } from "@/components/ui/alert"
+import type { LockedBannerProps } from "./types"
+
+export function LockedBanner({
+  children = "This published corpus is locked. Ask questions here, or continue in a working draft to make changes.",
+  className,
+}: LockedBannerProps): React.ReactElement {
+  return (
+    <Alert className={cn("rounded-sm text-xs", className)} role="status">
+      <AlertDescription className="text-xs">
+        <span>
+          <span aria-hidden="true">🔒 </span>
+          {children}
+        </span>
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+export interface PinnedThreadBannerProps {
+  className?: string
+}
+
+export function PinnedThreadBanner({
+  className,
+}: PinnedThreadBannerProps): React.ReactElement {
+  return (
+    <Alert className={cn("rounded-sm", className)} role="status">
+      <AlertDescription className="text-xs">
+        Thread follows its passage, not your view.
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+export interface DegradedBannerProps {
+  reason?: React.ReactNode
+  onRetry?: () => void
+  className?: string
+}
+
+export function DegradedBanner({
+  reason = "The model is unavailable right now.",
+  onRetry,
+  className,
+}: DegradedBannerProps): React.ReactElement {
+  return (
+    <Alert className={cn("rounded-sm", className)} variant="warning">
+      <AlertDescription className="text-xs">{reason}</AlertDescription>
+      {onRetry ? (
+        <AlertAction>
+          <Button
+            className="font-normal"
+            onClick={onRetry}
+            size="xs"
+            variant="outline"
+          >
+            Retry
+          </Button>
+        </AlertAction>
+      ) : null}
+    </Alert>
+  )
+}

package/src/components/blocks/chat/base.story.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { AiPanel } from "./base"
+
+export const story = defineStory({
+  Component: AiPanel,
+  args: {
+    initial: {
+      scope: { kind: "passage", label: "a.1", range: "¶1–¶2" },
+      headerTitle: "Context Fabric",
+      className: "h-[32rem] w-full",
+      thread: "Validate this passage against the schema.",
+    },
+  },
+})
+
+export const Preview = story.WithControl