@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,139 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import {
-  getPasswordStrength,
-  PasswordInput,
-} from "@/components/composed/password-input";
-import { Button } from "@/components/ui/button";
-import { Field, FieldLabel } from "@/components/ui/field";
-import { authAccentActionStyles } from "@/lib/auth-accent";
-import { cn } from "@/lib/utils";
-import {
-  AuthCard,
-  AuthError,
-  AuthSuccess,
-  MorphStep,
-  Reveal,
-} from "./auth-shell";
-import type { IUpdatePasswordBlockProps, TAuthStatus } from "./type";
-
-/**
- * Password change form for an already-authenticated user: a strength-metered
- * new password gates the confirm field, which in turn gates the submit
- * button. Mismatch is caught client-side; everything else comes back as a
- * rejection from `onSubmit`.
- */
-export function UpdatePasswordBlock({
-  title = "Update your password",
-  description = "Choose a new password for your account",
-  logo,
-  accent,
-  minStrength = 4,
-  onSubmit,
-  onDone,
-}: IUpdatePasswordBlockProps) {
-  const passwordId = React.useId();
-  const confirmId = React.useId();
-  const [status, setStatus] = React.useState<TAuthStatus>("idle");
-  const [error, setError] = React.useState<string | null>(null);
-  const [password, setPassword] = React.useState("");
-  const [confirmPassword, setConfirmPassword] = React.useState("");
-
-  // Progressive disclosure, matching the signup block: the confirm field
-  // appears once the new password clears the policy, the submit button once
-  // the two match.
-  const strongEnough = getPasswordStrength(password) >= minStrength;
-  const matches = confirmPassword.length > 0 && confirmPassword === password;
-  const canSubmit = strongEnough && matches;
-
-  // Only flag a mismatch once the confirmation has diverged — while it is
-  // still a prefix of the new password the user is simply mid-keystroke, and
-  // nagging on every character would shake the field the whole way through.
-  const mismatch =
-    confirmPassword.length > 0 && !password.startsWith(confirmPassword);
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    // Enter in any field submits the form even while the button is hidden.
-    if (!canSubmit) return;
-    setError(null);
-    setStatus("loading");
-    try {
-      await onSubmit?.({ password });
-      setStatus("success");
-    } catch (cause) {
-      setStatus("idle");
-      setError(
-        cause instanceof Error ? cause.message : "Unable to update password.",
-      );
-    }
-  }
-
-  return (
-    <AuthCard
-      title={title}
-      description={description}
-      logo={logo}
-      accent={accent}
-    >
-      <MorphStep step={status === "success" ? "success" : "form"}>
-        {status === "success" ? (
-          <AuthSuccess
-            title="Password updated"
-            description="Your password has been changed successfully."
-          >
-            {onDone && (
-              <Button variant="link" onClick={onDone}>
-                Continue
-              </Button>
-            )}
-          </AuthSuccess>
-        ) : (
-          <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
-            <Field name="password">
-              <FieldLabel htmlFor={passwordId}>New password</FieldLabel>
-              <PasswordInput
-                id={passwordId}
-                name="password"
-                autoComplete="new-password"
-                required
-                showStrength
-                disabled={status === "loading"}
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
-              />
-            </Field>
-            <Reveal show={strongEnough}>
-              <Field name="confirmPassword">
-                <FieldLabel htmlFor={confirmId}>Confirm new password</FieldLabel>
-                <PasswordInput
-                  id={confirmId}
-                  name="confirmPassword"
-                  autoComplete="new-password"
-                  required
-                  disabled={status === "loading"}
-                  value={confirmPassword}
-                  onChange={(event) => setConfirmPassword(event.target.value)}
-                />
-              </Field>
-            </Reveal>
-            <AuthError
-              message={error ?? (mismatch ? "Passwords do not match." : null)}
-            />
-            <Reveal show={canSubmit}>
-              <Button
-                className={cn("w-full", accent && authAccentActionStyles)}
-                type="submit"
-                loading={status === "loading"}
-              >
-                Update password
-              </Button>
-            </Reveal>
-          </form>
-        )}
-      </MorphStep>
-    </AuthCard>
-  );
-}

package/src/components/blocks/auth/use-auth-state.ts

@@ -1,127 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useAtomValue, useSetAtom } from "jotai"
-
-import {
-  DEFAULT_AUTH_FLOW_ID,
-  authFlowStateAtom,
-  beginAuthAttemptAtom,
-  beginAuthVerificationAtom,
-  completeAuthFlowAtom,
-  endAuthSessionAtom,
-  failAuthFlowAtom,
-  goToAuthStepAtom,
-  resetAuthFlowAtom,
-} from "./auth-flow-atom"
-import {
-  authSessionStateAtom,
-  isAuthenticatedAtom,
-  markUnauthenticatedAtom,
-  signInAtom,
-  updateAuthUserAtom,
-} from "./auth-session-atom"
-import type {
-  IAuthFlowActions,
-  TAuthFlowId,
-  IAuthFlowState,
-  IAuthSessionActions,
-  IAuthSessionState,
-} from "./type"
-
-/**
- * Read the auth flow registered under `flowId` from anywhere below
- * `ExegiaProvider`. Pairs with `useAuthFlowActions` to wire the auth blocks
- * into one flow — the blocks keep passwords and codes in local state, the
- * flow tracks which block shows and what identifier is in flight:
- *
- * ```tsx
- * const flow = useAuthFlow()
- * const { beginVerification, complete, fail } = useAuthFlowActions()
- *
- * {flow.step === "login" && (
- *   <LoginBlock
- *     onSubmit={async ({ email }) => {
- *       await api.requestCode(email)
- *       beginVerification({ identifier: email })
- *     }}
- *   />
- * )}
- * {flow.step === "verify-code" && (
- *   <CodeAuthBlock
- *     destination={flow.maskedIdentifier ?? undefined}
- *     onVerify={async (code) => complete(await api.verify(code))}
- *   />
- * )}
- * ```
- *
- * This returns the whole state object, so the caller re-renders on any
- * change. A component that reads one field should subscribe to that field's
- * atom instead: `useAtomValue(authFlowStepAtom(flowId))`.
- */
-export function useAuthFlow(
-  flowId: TAuthFlowId = DEFAULT_AUTH_FLOW_ID
-): IAuthFlowState {
-  return useAtomValue(authFlowStateAtom(flowId))
-}
-
-/**
- * Drive the auth flow registered under `flowId` from anywhere. Writes only —
- * the caller never re-renders when the flow changes. See `useAuthFlow` for
- * the intended wiring; a block's submit handler typically runs
- * `beginAttempt()` → the API call → `complete(user)` or `fail(message)`.
- */
-export function useAuthFlowActions(
-  flowId: TAuthFlowId = DEFAULT_AUTH_FLOW_ID
-): IAuthFlowActions {
-  const goToStep = useSetAtom(goToAuthStepAtom(flowId))
-  const beginVerification = useSetAtom(beginAuthVerificationAtom(flowId))
-  const beginAttempt = useSetAtom(beginAuthAttemptAtom(flowId))
-  const fail = useSetAtom(failAuthFlowAtom(flowId))
-  const complete = useSetAtom(completeAuthFlowAtom(flowId))
-  const reset = useSetAtom(resetAuthFlowAtom(flowId))
-
-  return React.useMemo(
-    () => ({
-      goToStep,
-      beginVerification,
-      beginAttempt,
-      fail,
-      complete,
-      reset,
-    }),
-    [goToStep, beginVerification, beginAttempt, fail, complete, reset]
-  )
-}
-
-/**
- * Read the session: `status` (`"unknown"` until the app restores or rejects
- * a session at boot), the signed-in `user`, and derived `isAuthenticated`.
- */
-export function useAuthSession(): IAuthSessionState & {
-  isAuthenticated: boolean
-} {
-  const state = useAtomValue(authSessionStateAtom)
-  const isAuthenticated = useAtomValue(isAuthenticatedAtom)
-  return React.useMemo(
-    () => ({ ...state, isAuthenticated }),
-    [state, isAuthenticated]
-  )
-}
-
-/**
- * Drive the session. Writes only. `signOut` is the composite
- * `endAuthSessionAtom`: it clears the session AND returns the default flow
- * to the login step — the one to wire to a logout button.
- */
-export function useAuthSessionActions(): IAuthSessionActions {
-  const signIn = useSetAtom(signInAtom)
-  const updateUser = useSetAtom(updateAuthUserAtom)
-  const markUnauthenticated = useSetAtom(markUnauthenticatedAtom)
-  const signOut = useSetAtom(endAuthSessionAtom)
-
-  return React.useMemo(
-    () => ({ signIn, updateUser, markUnauthenticated, signOut }),
-    [signIn, updateUser, markUnauthenticated, signOut]
-  )
-}

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

@@ -1,65 +0,0 @@
-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 IAiScope } from "../index"
-import { formatScopeLabel } from "../shared"
-
-const passageScope: IAiScope = {
-  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

@@ -1,61 +0,0 @@
-"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 { IDegradedBannerProps, ILockedBannerProps, IPinnedThreadBannerProps } from "./type"
-
-export function LockedBanner({
-  children = "This published corpus is locked. Ask questions here, or continue in a working draft to make changes.",
-  className,
-}: ILockedBannerProps): 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 function PinnedThreadBanner({
-  className,
-}: IPinnedThreadBannerProps): 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 function DegradedBanner({
-  reason = "The model is unavailable right now.",
-  onRetry,
-  className,
-}: IDegradedBannerProps): 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.tsx

@@ -1,84 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Composer } from "@/components/composed/chat/composer"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import Background from "@/components/atoms/background"
-import { AiPanelHeader } from "./header"
-import { SuggestedPrompts } from "./suggested-prompts"
-import type { IAiPanelProps } from "./type"
-
-/**
- * Full-height curation rail, designed to sit inside a host container such as
- * the shell's right panel — it brings no surface chrome or close affordance
- * of its own. Data fetching, streaming and version writes stay with the host
- * application; this component only establishes layout and the focus order
- * shared by all panel states.
- */
-export function AiPanel({
-  onNewThread,
-  thread,
-  prompts = [],
-  onPromptSelect,
-  composerProps,
-  locked = false,
-  headerTitle = "AI panel",
-  className,
-  ...props
-}: IAiPanelProps): React.ReactElement {
-  return (
-    // A landmark, not a bare div: `aria-label` on a roleless element is not
-    // exposed, so the panel would lose both its name and its region.
-    <aside
-      aria-label={headerTitle}
-      className={cn(
-        "relative flex h-full w-full flex-col bg-background",
-        className
-      )}
-      data-slot="ai-panel"
-      {...props}
-    >
-      <Background.Texture
-        variant="paper"
-        className="relative flex h-full w-full flex-col"
-      >
-        <AiPanelHeader
-          locked={locked}
-          onNewThread={onNewThread}
-          title={headerTitle}
-        />
-
-        <div className="relative min-h-0 flex-1">
-          <ScrollArea
-            aria-label="Thread"
-            role="region"
-            scrollFade="bottom"
-            fill
-          >
-            {/* `w-full`, not `mx-auto`: as a flex item, auto margins shrink the
-              column to fit-content, so the thread would drift off the
-              composer's gutters. px-3 lines it up with the footer. */}
-            <div className="flex min-h-0 flex-1 flex-col px-5">
-              <div className="w-full">{thread}</div>
-              {!thread && (
-                <div className="flex h-full min-h-44 flex-col justify-end">
-                  <SuggestedPrompts
-                    onSelect={onPromptSelect}
-                    prompts={prompts}
-                  />
-                </div>
-              )}
-            </div>
-          </ScrollArea>
-        </div>
-        <footer className="shrink-0 px-5 pb-3.5">
-          <Composer
-            {...composerProps}
-            disabled={locked || composerProps?.disabled}
-          />
-        </footer>
-      </Background.Texture>
-    </aside>
-  )
-}

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

@@ -1,60 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Lock, Plus } from "lucide-react"
-import { Tooltip, TooltipPopup, TooltipTrigger } from "@/components/ui/tooltip"
-import type { IAiPanelHeaderProps } from "./type"
-
-function LockedHint({ locked }: { locked?: boolean }): React.ReactElement {
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        disabled={locked}
-        render={
-          <Button variant="ghost" size="icon-xs" className="opacity-50" />
-        }
-      >
-        <Lock className="size-3" />
-      </TooltipTrigger>
-      <TooltipPopup side="bottom">
-        <div>
-          <div className="flex items-center gap-1">
-            <Lock className="size-2.5" />
-            <h6 className="text-sm">Published corpus</h6>
-          </div>
-          <p className="text-xs text-muted-foreground">
-            Editing is disabled. Answers only.
-          </p>
-        </div>
-      </TooltipPopup>
-    </Tooltip>
-  )
-}
-
-/** The panel's sticky top row: title, lock hint and the new-thread button. */
-export function AiPanelHeader({
-  title,
-  locked = false,
-  onNewThread,
-}: IAiPanelHeaderProps): React.ReactElement {
-  return (
-    <header className="sticky top-0 flex shrink-0 flex-col items-center gap-2 border-b border-border bg-sidebar p-3.5">
-      <div className="flex w-full flex-row items-center justify-between">
-        <div className="flex flex-1 items-center">
-          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
-          {!locked && <LockedHint locked={locked} />}
-        </div>
-        <Button
-          className={cn("font-semibold")}
-          onClick={onNewThread}
-          size="icon-xs"
-          variant="ghost"
-        >
-          <Plus className="size-4 stroke-3" />
-        </Button>
-      </div>
-    </header>
-  )
-}

package/src/components/blocks/chat/index.ts

@@ -1,37 +0,0 @@
-import { AiPanel } from "./base"
-
-export { AiPanel }
-export { AiPanelHeader } from "./header"
-export { SuggestedPrompts } from "./suggested-prompts"
-export { RecommendationStack } from "./recommendation-stack"
-export { DegradedBanner, LockedBanner, PinnedThreadBanner } from "./banners"
-export { VersionHistoryRecord } from "./version-history-record"
-
-export {
-  AppliedMark,
-  ApplyToast,
-  SelectionHighlight,
-  SelectionPopover,
-} from "@/components/composed/reader"
-export type {
-  IAppliedMarkProps,
-  IApplyToastProps,
-  ISelectionHighlightProps,
-  ISelectionPopoverProps,
-} from "@/components/composed/reader"
-export type {
-  IAiPanelHeaderProps,
-  IAiPanelProps,
-  ILockedBannerProps,
-  IAiScope,
-  TAiScopeKind,
-  TComposerMode,
-  IDiffRow,
-  INodeSelection,
-  TSuggestionState,
-  IVersionHistoryEntry,
-  ISuggestedPromptsProps,
-  IWordSelection,
-} from "./type"
-
-export default AiPanel

package/src/components/blocks/chat/recommendation-stack.tsx

@@ -1,41 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { Group } from "@/components/ui/group"
-import { cn } from "@/lib/utils"
-import type { IRecommendationStackProps } from "./type"
-
-
-
-/**
- * Fuses a run of RecommendationCards into one bordered stack for the thread.
- *
- * The ui Group only fuses bordered direct children, but each card wraps its
- * frame in a borderless accordion root — so the frames are fused one level
- * down instead, and the Group-injected ::before (which would render as a
- * phantom flex item between the cards) is dropped.
- */
-export function RecommendationStack({
-  className,
-  children,
-  ...props
-}: IRecommendationStackProps): React.ReactElement {
-  return (
-    <Group
-      className={cn(
-        "w-full *:before:content-none mt-3",
-        "[&>*:not(:last-child)_[data-slot=recommendation-card]]:rounded-b-none",
-        "[&>*:not(:last-child)_[data-slot=recommendation-card]]:before:rounded-b-none",
-        "[&>*+*_[data-slot=recommendation-card]]:rounded-t-none",
-        "[&>*+*_[data-slot=recommendation-card]]:border-t-0",
-        "[&>*+*_[data-slot=recommendation-card]]:before:rounded-t-none",
-        className
-      )}
-      data-slot="recommendation-stack"
-      orientation="vertical"
-      {...props}
-    >
-      {children}
-    </Group>
-  )
-}

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

@@ -1,27 +0,0 @@
-// The visual language (accent constants, ✦ icon, close glyph) lives with the
-// reusable AI components in `components/composed/ai`; the block re-uses it
-// from there.
-export {
-  accentRing,
-  accentSolid,
-  accentText,
-  ghostMuted,
-  mutedText,
-  surface,
-} from "@/components/composed/ai/shared"
-
-export function formatScopeLabel(scope: {
-  kind: string
-  label: string
-  location?: string
-  range?: string
-  pinned?: boolean
-}): string {
-  if (scope.pinned) {
-    return `PINNED · ${scope.label}${scope.range ? ` ${scope.range}` : ""}`
-  }
-  if (scope.range && scope.kind === "passage") {
-    return `${scope.label} ${scope.range} · passage`
-  }
-  return `${scope.label} · ${scope.kind}${scope.location ? ` · ${scope.location}` : ""}`
-}

package/src/components/blocks/chat/suggested-prompts.tsx

@@ -1,45 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { accentRing, mutedText } from "./shared"
-import { Sparkles } from "lucide-react"
-import type { ISuggestedPromptsProps } from "./type";
-
-
-export function SuggestedPrompts({
-  prompts = [],
-  onSelect,
-  emptyLabel = "Ask about this selection or validate it against the schema.",
-  className,
-}: ISuggestedPromptsProps): React.ReactElement | null {
-  if (!prompts.length) {
-    return (
-      <p className={cn("px-1 py-3", mutedText, className)} data-empty="true">
-        <Sparkles className="mr-1.5" />
-        {emptyLabel}
-      </p>
-    )
-  }
-  return (
-    <div
-      className={cn("grid gap-1.5", className)}
-      aria-label="Suggested prompts"
-    >
-      {prompts.map((prompt) => (
-        <Button
-          className={cn(
-            "h-auto justify-start border bg-muted/30 px-3 py-2 text-left text-xs font-normal whitespace-normal text-muted-foreground hover:border-amber-500/30 hover:text-foreground sm:h-auto sm:text-xs",
-            accentRing
-          )}
-          key={prompt}
-          onClick={() => onSelect?.(prompt)}
-          variant="ghost"
-        >
-          {prompt}
-        </Button>
-      ))}
-    </div>
-  )
-}