@exegia/corpora-ui 0.28.0 → 1.0.0

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

@@ -0,0 +1,58 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { FilterTable } from "./chat/filter-table"
+
+export const story = defineStory({
+  Component: FilterTable<{ id: string; status: string; passage: string }> as FC<
+    Pick<
+      ComponentProps<
+        typeof FilterTable<{ id: string; status: string; passage: string }>
+      >,
+      "statuses" | "columns" | "rows" | "filter" | "allLabel"
+    >
+  >,
+  args: {
+    initial: {
+      statuses: [
+        {
+          id: "review",
+          label: "Review",
+          tone: "warning",
+        },
+        {
+          id: "done",
+          label: "Completed",
+          tone: "success",
+        },
+      ],
+      columns: [
+        {
+          key: "passage",
+          header: "Passage",
+        },
+        {
+          key: "status",
+          header: "Status",
+        },
+      ],
+      rows: [
+        {
+          id: "1",
+          passage: "Iliad 1.1",
+          status: "review",
+        },
+        {
+          id: "2",
+          passage: "Iliad 1.2",
+          status: "done",
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

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

@@ -0,0 +1,24 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Flowchart } from "./chat/flowchart"
+
+export const story = defineStory({
+  Component: Flowchart.Root as FC<
+    Pick<
+      ComponentProps<typeof Flowchart.Root>,
+      "height" | "zoomable" | "readOnly"
+    >
+  >,
+  args: {
+    initial: {
+      zoomable: true,
+      height: 500,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/insight-cards.story.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { InsightCards } from "./chat/insight-cards"
+
+export const story = defineStory({
+  Component: InsightCards as FC<
+    Pick<ComponentProps<typeof InsightCards>, "insights" | "header" | "index">
+  >,
+  args: {
+    initial: {
+      insights: [
+        {
+          summary: "Iliad lemma coverage reached 79%.",
+          stats: [
+            {
+              label: "Coverage",
+              value: "79%",
+              tone: "series-1",
+            },
+          ],
+          followUp: "Which lemmas are unresolved?",
+        },
+        {
+          summary: "14 lemmas need review.",
+          allocation: {
+            label: "Flagged lemmas",
+            value: "14",
+            segments: [
+              {
+                key: "ambiguous",
+                label: "Ambiguous",
+                value: 8,
+              },
+              {
+                key: "variant",
+                label: "Variants",
+                value: 6,
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+})
+
+export const Preview = story.WithControl

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

@@ -0,0 +1,21 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Logo } from "./logo"
+
+export const story = defineStory({
+  Component: Logo as FC<
+    Pick<ComponentProps<typeof Logo>, "name" | "variant" | "href">
+  >,
+  args: {
+    initial: {
+      name: "Corpora",
+      variant: "full",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/logo.tsx

@@ -6,14 +6,16 @@ import type { Variants } from "motion/react"
 
 import { EASE_OUT } from "@/lib/ease.ts"
 import { cn } from "@/lib/utils"
-import { initialsFrom } from "@/components/user-avatar"
+import { initialsFrom } from "@/components/atoms/avatar/utils"
 
 /** `full` shows mark + wordmark; `mark` folds the wordmark away — an icon
  * rail, a favicon-sized corner. */
 export type LogoVariant = "full" | "mark"
 
-export interface LogoProps
-  extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+export interface LogoProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children"
+> {
   /**
    * Brand name. Labels the logo for AT (and the link, when `href` renders
    * one), drives the default wordmark, and the monogram tile when no mark
@@ -53,8 +55,18 @@ const WORDMARK_VARIANTS: Variants = {
 }
 
 const WORDMARK_VARIANTS_REDUCED: Variants = {
-  open: { width: "auto", opacity: 1, x: 0, transition: { duration: 0.16, ease: EASE_OUT } },
-  folded: { width: 0, opacity: 0, x: 0, transition: { duration: 0.16, ease: EASE_OUT } },
+  open: {
+    width: "auto",
+    opacity: 1,
+    x: 0,
+    transition: { duration: 0.16, ease: EASE_OUT },
+  },
+  folded: {
+    width: 0,
+    opacity: 0,
+    x: 0,
+    transition: { duration: 0.16, ease: EASE_OUT },
+  },
 }
 
 /**
@@ -81,26 +93,26 @@ export function Logo({
   const reduce = useReducedMotion()
   const folded = variant === "mark"
 
-  const markNode = mark ?? (
-    src !== undefined ? (
+  const markNode =
+    mark ??
+    (src !== undefined ? (
       // Decorative: the root's `name` (visible wordmark or aria-label)
       // already names the brand.
       <img alt="" className="size-full object-contain" src={src} />
     ) : (
       <span
         aria-hidden="true"
-        className="flex size-full items-center justify-center rounded-lg bg-foreground font-semibold text-background text-[45cqw]"
+        className="flex size-full items-center justify-center rounded-lg bg-foreground text-[45cqw] font-semibold text-background"
         data-slot="logo-monogram"
       >
         {initialsFrom(name)}
       </span>
-    )
-  )
+    ))
 
   const content = (
     <>
       <span
-        className="size-8 shrink-0 @container [&_svg]:size-full"
+        className="@container size-8 shrink-0 [&_svg]:size-full"
         data-slot="logo-mark"
       >
         {markNode}
@@ -112,7 +124,7 @@ export function Logo({
         // the brand on its own.
         aria-hidden={folded || undefined}
         className={cn(
-          "min-w-0 overflow-hidden font-semibold whitespace-nowrap tracking-tight",
+          "min-w-0 overflow-hidden font-semibold tracking-tight whitespace-nowrap",
           folded && "pointer-events-none",
           // 0px wide while folded, but the flex gap before it would still
           // offset the mark — pull it back by that gap.

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

@@ -0,0 +1,21 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Markdown } from "./chat/markdown"
+
+export const story = defineStory({
+  Component: Markdown as FC<
+    Pick<ComponentProps<typeof Markdown>, "source" | "view" | "bare">
+  >,
+  args: {
+    initial: {
+      source:
+        "# Corpus notes\n\nThe **Iliad** preserves several formulaic expressions.",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/password-input.story.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import type { ComponentProps } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { PasswordInput } from "./password-input"
+
+type PreviewProps = Pick<
+  ComponentProps<typeof PasswordInput>,
+  | "visibilityToggle"
+  | "showStrength"
+  | "sound"
+  | "placeholder"
+  | "disabled"
+  | "aria-label"
+>
+
+function PasswordInputPreview(props: PreviewProps) {
+  return (
+    <div className="flex justify-center p-6">
+      <PasswordInput {...props} className="w-full max-w-sm" />
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: PasswordInputPreview,
+  args: {
+    initial: {
+      showStrength: true,
+      placeholder: "Enter a password",
+      "aria-label": "Password",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/composed/reader/applied-mark.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import type { AppliedMarkProps } from "./type"
+
+export function AppliedMark({
+  nodeId,
+  className,
+  children,
+  ...props
+}: AppliedMarkProps): React.ReactElement {
+  return (
+    <span
+      className={cn(
+        "relative border-b-2 border-amber-400/70 text-inherit",
+        className
+      )}
+      data-applied-mark="true"
+      data-node-id={nodeId}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className="absolute -start-4 top-1/2 text-xs text-amber-600 dark:text-amber-300/90"
+      >
+        ◆
+      </span>
+      {children}
+    </span>
+  )
+}

package/src/components/composed/reader/apply-toast.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { motion, useReducedMotion } from "motion/react"
+import type * as React from "react"
+import { EASE_OUT_STRONG } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import type { ApplyToastProps } from "./type"
+
+export function ApplyToast({
+  open = true,
+  message = "Change applied and recorded in version history.",
+  onUndo,
+  className,
+}: ApplyToastProps): React.ReactElement | null {
+  const reduceMotion = useReducedMotion()
+  if (!open) return null
+  return (
+    <motion.div
+      animate={{ opacity: 1, y: 0 }}
+      aria-live="assertive"
+      className={cn(
+        "flex w-full items-center gap-3 rounded-sm border border-success/32 bg-popover px-3 py-2.5 text-xs text-popover-foreground shadow-lg",
+        className
+      )}
+      data-slot="apply-toast"
+      initial={reduceMotion ? false : { opacity: 0, y: 24 }}
+      role="status"
+      transition={
+        reduceMotion
+          ? { duration: 0 }
+          : { duration: 0.35, ease: EASE_OUT_STRONG }
+      }
+    >
+      <span className="text-success">✓</span>
+      <span className="flex-1">{message}</span>
+      {onUndo ? (
+        <Button
+          className="text-success underline underline-offset-2 ring-offset-0 hover:text-success"
+          onClick={onUndo}
+          size="xs"
+          variant="link"
+        >
+          Undo
+        </Button>
+      ) : null}
+    </motion.div>
+  )
+}

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

@@ -0,0 +1,10 @@
+import { SelectionPopover } from "./selection-popover"
+
+export type * from "./type"
+
+export { SelectionPopover }
+export { SelectionHighlight } from "./selection-highlight"
+export { AppliedMark } from "./applied-mark"
+export { ApplyToast } from "./apply-toast"
+
+export default SelectionPopover

package/src/components/composed/reader/selection-highlight.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import type { SelectionHighlightProps } from "./type"
+
+export function SelectionHighlight({
+  range,
+  className,
+  children,
+  ...props
+}: SelectionHighlightProps): React.ReactElement {
+  return (
+    <span
+      aria-label={range ? `Selected ${range}` : "Selected text"}
+      className={cn(
+        "rounded-xs bg-accent/25 outline-1 outline-accent/45",
+        className
+      )}
+      data-selection-highlight="true"
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}

package/src/components/composed/reader/selection-popover.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import {
+  PreviewCard,
+  PreviewCardPopup,
+  PreviewCardTrigger,
+} from "@/components/ui/preview-card"
+import {
+  accentRing,
+  AiIcon,
+  CloseIcon,
+  ghostMuted,
+  mutedText,
+  surface,
+} from "@/components/composed/ai/shared"
+import type { SelectionPopoverProps } from "./type"
+
+/**
+ * The reader entry point, built on the preview-card atom: hovering or
+ * focusing the selection reveals the card. The word and node variants
+ * deliberately share one shell so there is one, and only one, AI action for
+ * every kind of selection.
+ */
+export function SelectionPopover({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  variant,
+  word,
+  node,
+  onAddToChat,
+  onClose,
+  children,
+  className,
+}: SelectionPopoverProps): React.ReactElement {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen)
+  const isOpen = open ?? internalOpen
+
+  const handleOpenChange = (next: boolean) => {
+    if (open === undefined) setInternalOpen(next)
+    onOpenChange?.(next)
+    if (!next) onClose?.()
+  }
+
+  useEffect(() => {
+    if (!isOpen) return
+    const handleShortcut = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "j") {
+        event.preventDefault()
+        onAddToChat?.()
+      }
+    }
+    document.addEventListener("keydown", handleShortcut)
+    return () => document.removeEventListener("keydown", handleShortcut)
+  }, [isOpen, onAddToChat])
+
+  return (
+    <PreviewCard onOpenChange={handleOpenChange} open={isOpen}>
+      {children ? (
+        <PreviewCardTrigger render={<span />}>{children}</PreviewCardTrigger>
+      ) : null}
+      <PreviewCardPopup
+        align="start"
+        aria-label="Selection actions"
+        className={cn(
+          "w-64 flex-col overflow-hidden rounded-sm p-0",
+          surface,
+          className
+        )}
+      >
+        <div className="flex items-start justify-between gap-3 px-3.5 py-3">
+          <div className="min-w-0">
+            {variant === "word" && word ? (
+              <>
+                <p className="truncate font-medium text-foreground">{word.lemma}</p>
+                <p className={mutedText}>
+                  {[
+                    word.partOfSpeech ?? word.pos,
+                    word.frequency !== undefined && `${word.frequency}×`,
+                  ]
+                    .filter(Boolean)
+                    .join(" · ")}
+                </p>
+              </>
+            ) : node ? (
+              <>
+                <p className="font-medium text-foreground">{node.range}</p>
+                <p className={mutedText}>
+                  {node.nodeIds.length} node
+                  {node.nodeIds.length === 1 ? "" : "s"} · {node.wordCount}{" "}
+                  words
+                </p>
+                <p className="mt-1 truncate text-[11px] text-muted-foreground/70">
+                  {node.nodeIds.join(" · ")}
+                </p>
+              </>
+            ) : null}
+          </div>
+          {onClose ? (
+            <Button
+              aria-label="Close selection actions"
+              className={ghostMuted}
+              onClick={() => handleOpenChange(false)}
+              size="icon-xs"
+              variant="ghost"
+            >
+              <CloseIcon />
+            </Button>
+          ) : null}
+        </div>
+        {variant === "word" && word ? (
+          <>
+            <Separator />
+            <Button
+              className={cn(
+                "h-auto w-full justify-start rounded-none px-3.5 py-2.5 font-normal text-muted-foreground hover:text-foreground sm:h-auto",
+                accentRing
+              )}
+              onClick={word.onViewDetails}
+              variant="ghost"
+            >
+              View details
+            </Button>
+          </>
+        ) : null}
+        <Separator className="mx-3.5 data-[orientation=horizontal]:w-auto" />
+        <Button
+          className={cn(
+            "h-auto min-h-11 w-full justify-start gap-2 rounded-none px-3.5 text-amber-700 hover:bg-amber-400/8 hover:text-amber-700 dark:text-amber-300/90 dark:hover:text-amber-300/90 sm:h-auto",
+            accentRing
+          )}
+          onClick={onAddToChat}
+          variant="ghost"
+        >
+          <AiIcon />
+          <span>Add to chat</span>
+          <kbd className="ml-auto rounded-sm border border-amber-500/25 px-1.5 py-0.5 text-[10px] font-normal opacity-75">
+            ⌘J
+          </kbd>
+        </Button>
+      </PreviewCardPopup>
+    </PreviewCard>
+  )
+}

package/src/components/composed/reader/type.ts

@@ -0,0 +1,48 @@
+import type * as React from "react"
+
+/** A single selected word in the reader. */
+export interface WordSelection {
+  lemma: string
+  partOfSpeech?: string
+  pos?: string
+  frequency?: number | string
+  onViewDetails?: () => void
+}
+
+/** A selected run of reader nodes. */
+export interface NodeSelection {
+  range: string
+  nodeIds: string[]
+  wordCount: number
+}
+
+export interface SelectionPopoverProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  variant: "word" | "node"
+  word?: WordSelection
+  node?: NodeSelection
+  onAddToChat?: () => void
+  onClose?: () => void
+  /** The selected reader content — rendered as the hover/focus trigger. */
+  children?: React.ReactNode
+  className?: string
+}
+
+export interface SelectionHighlightProps
+  extends React.ComponentPropsWithoutRef<"span"> {
+  range?: string
+}
+
+export interface AppliedMarkProps
+  extends React.ComponentPropsWithoutRef<"span"> {
+  nodeId?: string
+}
+
+export interface ApplyToastProps {
+  open?: boolean
+  message?: React.ReactNode
+  onUndo?: () => void
+  className?: string
+}

package/src/components/composed/recommendation-card.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { RecommendationCard } from "./chat/recommendation"
+
+export const story = defineStory({
+  Component: RecommendationCard as FC<
+    Pick<
+      ComponentProps<typeof RecommendationCard>,
+      | "title"
+      | "description"
+      | "confidence"
+      | "state"
+      | "step"
+      | "defaultOpen"
+      | "acceptLabel"
+      | "rejectLabel"
+    >
+  >,
+  args: {
+    initial: {
+      title: "Review these lemma links?",
+      description: "Resolve ambiguous forms in the Iliad",
+      confidence: "high",
+    },
+  },
+})
+
+export const Preview = story.WithControl