@exegia/corpora-ui 1.0.0 → 2.0.0

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

@@ -1,7 +1,7 @@
 import { Info } from "./info"
 import { Message } from "./message"
 import { Pill } from "./pill"
-import type { UserInfoProps, UserPillProps } from "./types"
+import type { TUserInfoProps, TUserPillProps } from "./types"
 
 const User = {
   Info,
@@ -9,6 +9,6 @@ const User = {
   Pill,
 }
 
-export type { UserInfoProps, UserPillProps }
+export type { TUserInfoProps, TUserPillProps }
 
 export default User

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

@@ -1,14 +1,14 @@
 import { Avatar } from "@/components/atoms"
 import { Badge } from "@/components/ui/badge"
-import type { UserInfoProps } from "./types"
+import type { TUserInfoProps } 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.
+ * @param {TUserInfoProps['user']} user - The user to display.
+ * @param {TUserInfoProps['description']} description - The description to display.
  *
  * @description Displays a user's name and role in a compact format.
  *
@@ -19,17 +19,25 @@ export function Info({
   direction = "sender",
   audio,
   size,
-}: UserInfoProps) {
+}: TUserInfoProps) {
   return (
     <div
       slot="info"
-      className={cn("flex flex-row items-center gap-1.5", {
+      className={cn("gap-1.5 flex flex-row items-center", {
         "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" })}>
+      <div
+        className={cn("flex flex-col", {
+          "items-end text-right": direction === "sender",
+        })}
+      >
+        <div
+          className={cn("gap-1.5 flex flex-row items-center", {
+            "flex-row-reverse": direction === "sender",
+          })}
+        >
           <span className="text-sm font-semibold">
             {user.firstName} {user.lastName}
           </span>

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

@@ -1,10 +1,36 @@
-import { Bubble } from "@/components/atoms";
+"use client"
 
+import { Bubble } from "@/components/atoms"
+import { Info } from "./info"
+import type { IUserMessageProps } from "./types"
 
-export function Message({ children }: { children: React.ReactNode }) {
-  return <Bubble>
-    
-    {children}
-  </Bubble>
-  
+export function Message({
+  children,
+  user,
+  size,
+  continued = false,
+  className,
+  reactions,
+  actions,
+}: IUserMessageProps) {
+  const direction = user?.direction ?? "sender"
+  return (
+    <Bubble variant={direction} continued={continued} className={className}>
+      {user && !continued && (
+        <Bubble.Header>
+          <Info
+            direction={direction}
+            user={user}
+            description={user.description}
+            audio={user.audio}
+            size={size ?? user.size}
+            variant="info"
+          />
+        </Bubble.Header>
+      )}
+      <Bubble.Message>{children}</Bubble.Message>
+      {reactions && <Bubble.Reactions {...reactions} />}
+      {actions}
+    </Bubble>
+  )
 }

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

@@ -1,16 +1,16 @@
 import { Avatar } from "@/components/atoms"
-import type { UserPillProps } from "./types"
+import type { TUserPillProps } 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.
+ * @param {TUserPillProps['user']} user - The user to display.
  * @description Displays a user's name and role in a compact format.
  *
  */
-export function Pill({ user }: UserPillProps) {
+export function Pill({ user }: TUserPillProps) {
   return (
     <Button size="sm" className="gap-1 rounded-full pl-0.5">
       <Avatar user={user} size="sm" />

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

@@ -1,27 +1,47 @@
-import type { UserType, AvatarProps } from "@/components/atoms";
-import type { BubbleVariant } from "@/components/atoms/bubble";
-import type React from "react";
+import type { TUserType, IAvatarProps } from "@/components/atoms/types"
+import type {
+  IBubbleReactionsProps,
+  TBubbleVariant,
+} from "@/components/atoms/bubble"
+import type React from "react"
 
-
-export type TUserInfo<T extends UserType> = T & {
+export type TUserInfo<T extends TUserType> = T & {
   description?: string
-  audio?: AvatarProps<T>['audio']
-  size?: AvatarProps<T>['size']
-  direction?: Exclude<BubbleVariant, "ai">
+  audio?: IAvatarProps<T>["audio"]
+  size?: IAvatarProps<T>["size"]
+  direction?: Exclude<TBubbleVariant, "ai">
 }
 
 export type TUserVariant = "pill" | "info"
 
-export interface IUserBaseProps<T extends UserType, Variant extends TUserVariant = TUserVariant> {
+export interface IUserBaseProps<
+  T extends TUserType,
+  Variant extends TUserVariant = TUserVariant,
+> {
   user: T
   variant: Variant
 }
 
-export interface IUserMessageProps<T extends UserType> extends IUserBaseProps<T> {
+export interface IUserMessageProps<
+  T extends TUserType = TUserType,
+> extends Omit<IUserBaseProps<T>, "user"> {
   children: React.ReactNode
-  size?: AvatarProps<T>['size']
-  
+  size?: IAvatarProps<T>["size"]
+  user?: TUserInfo<T>
+  continued?: boolean
+  className?: string
+  /** Reaction controls rendered beside the message, outside its surface. */
+  reactions?: IBubbleReactionsProps
+  /** Optional message actions, typically composed with Bubble.Actions. */
+  actions?: React.ReactNode
 }
 
-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">
+export type TUserInfoProps<T extends TUserType = TUserType> = Exclude<
+  IUserBaseProps<T, "info">,
+  "variant"
+> &
+  TUserInfo<T>
+export type TUserPillProps<T extends TUserType = TUserType> = Exclude<
+  IUserBaseProps<T, "pill">,
+  "variant" | "size"
+>

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

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

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

@@ -1,8 +1,8 @@
 import type { HTMLAttributes, ReactNode } from "react"
-import type { TextSize } from "../../atoms/text/types"
-import type { TextClickPopoverProps } from "../../atoms/text-selection/types"
+import type { TTextSize } from "../../atoms/text/types"
+import type { ITextClickPopoverProps } from "../../atoms/text-selection/types"
 
-export interface VerseProps extends Omit<
+export interface IVerseProps extends Omit<
   HTMLAttributes<HTMLElement>,
   "children"
 > {
@@ -13,12 +13,12 @@ export interface VerseProps extends Omit<
   /** Destination of the chapter link. */
   href?: string
   /** Popover content opened by clicking the chapter link. */
-  chapterPopover?: TextClickPopoverProps["popover"]
-  renderChapterPopover?: TextClickPopoverProps["renderPopover"]
+  chapterPopover?: ITextClickPopoverProps["popover"]
+  renderChapterPopover?: ITextClickPopoverProps["renderPopover"]
   /** Type scale shared with nested verse spans and notes. */
-  size?: TextSize
+  size?: TTextSize
 }
 
-export type VerseSpanProps = Omit<TextClickPopoverProps, "type">
+export type TVerseSpanProps = Omit<ITextClickPopoverProps, "type">
 
-export type VerseNoteProps = Omit<TextClickPopoverProps, "type">
+export type TVerseNoteProps = Omit<ITextClickPopoverProps, "type">

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

@@ -5,10 +5,10 @@ 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"
+import type { TTextSize } from "../../atoms/text/types"
+import type { TVerseNoteProps, IVerseProps, TVerseSpanProps } from "./types"
 
-const VerseSizeContext = createContext<TextSize | undefined>(undefined)
+const VerseSizeContext = createContext<TTextSize | undefined>(undefined)
 
 const chapterClassName =
   "mr-1.5 align-super text-[0.7em] font-medium no-underline hover:underline"
@@ -22,7 +22,7 @@ export function Verse({
   renderChapterPopover,
   size = "medium",
   ...props
-}: VerseProps): ReactElement {
+}: IVerseProps): ReactElement {
   const hasChapterPopover =
     renderChapterPopover !== undefined ||
     (chapterPopover !== undefined && chapterPopover !== null)
@@ -69,7 +69,7 @@ export function VerseSpan({
   className,
   size,
   ...props
-}: VerseSpanProps): ReactElement {
+}: TVerseSpanProps): ReactElement {
   const verseSize = useContext(VerseSizeContext)
   return (
     <TextClickPopover
@@ -87,7 +87,7 @@ export function VerseNote({
   className,
   size,
   ...props
-}: VerseNoteProps): ReactElement {
+}: TVerseNoteProps): ReactElement {
   const verseSize = useContext(VerseSizeContext)
   return (
     <TextClickPopover

package/src/components/docs/atoms-gallery.tsx

@@ -30,7 +30,7 @@ import { cn } from "@/lib/utils"
 
 const EASE = [0.32, 0.72, 0, 1] as const
 
-function Tile({
+export function GalleryTile({
   href,
   name,
   blurb,
@@ -48,41 +48,43 @@ function Tile({
   index: number
 }) {
   return (
-    <motion.a
-      href={href}
+    <motion.div
       initial={{ opacity: 0, y: 32, filter: "blur(6px)" }}
       whileInView={{ opacity: 1, y: 0, filter: "blur(0px)" }}
       viewport={{ once: true, margin: "-10% 0px" }}
       transition={{ duration: 0.8, ease: EASE, delay: (index % 4) * 0.06 }}
       className={cn(
-        "group not-prose flex flex-col rounded-lg bg-black/[0.035] p-1.5 no-underline ring-1 ring-black/[0.06] transition-transform duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] hover:-translate-y-0.5 active:scale-[0.99] dark:bg-white/[0.04] dark:ring-white/[0.08]",
+        "group not-prose bg-black/[0.035] p-1.5 ring-black/[0.06] hover:-translate-y-0.5 dark:bg-white/[0.04] dark:ring-white/[0.08] flex flex-col rounded-lg no-underline ring-1 transition-transform duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] active:scale-[0.99]",
         className
       )}
     >
       <div
         className={cn(
-          "relative flex flex-1 items-center justify-center overflow-hidden rounded-lg bg-background p-6 shadow-[inset_0_1px_1px_rgba(255,255,255,0.6),0_1px_2px_rgba(0,0,0,0.04)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)]",
+          "p-6 relative flex flex-1 items-center justify-center overflow-hidden rounded-lg bg-background shadow-[inset_0_1px_1px_rgba(255,255,255,0.6),0_1px_2px_rgba(0,0,0,0.04)] dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.06)]",
           stageClassName
         )}
       >
         <div
           aria-hidden
-          className="pointer-events-none absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_0%,color-mix(in_oklch,var(--primary)_10%,transparent),transparent)] opacity-0 transition-opacity duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:opacity-100"
+          className="inset-0 pointer-events-none absolute bg-[radial-gradient(60%_60%_at_50%_0%,color-mix(in_oklch,var(--primary)_10%,transparent),transparent)] opacity-0 transition-opacity duration-700 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:opacity-100"
         />
         <div className="relative w-full">{children}</div>
       </div>
-      <div className="flex items-center gap-3 px-4 pt-3 pb-2.5">
+      <a
+        href={href}
+        className="gap-3 px-4 pt-3 pb-2.5 flex items-center rounded-lg no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+      >
         <div className="min-w-0 flex-1">
           <div className="text-sm font-medium tracking-tight text-foreground">
             {name}
           </div>
-          <div className="truncate text-xs text-muted-foreground">{blurb}</div>
+          <div className="text-xs truncate text-muted-foreground">{blurb}</div>
         </div>
-        <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-black/5 text-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:-translate-y-px group-hover:translate-x-0.5 group-hover:scale-105 dark:bg-white/10">
+        <span className="size-7 bg-black/5 group-hover:translate-x-0.5 dark:bg-white/10 flex shrink-0 items-center justify-center rounded-full text-foreground transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:-translate-y-px group-hover:scale-105">
           <ArrowUpRight className="size-3.5" strokeWidth={1.5} />
         </span>
-      </div>
-    </motion.a>
+      </a>
+    </motion.div>
   )
 }
 
@@ -95,8 +97,8 @@ export function AtomsGallery() {
   const [otp, setOtp] = React.useState("482")
   const [query, setQuery] = React.useState("")
   return (
-    <div className="not-prose grid grid-cols-1 gap-4 md:auto-rows-[minmax(11rem,auto)] md:grid-cols-4">
-      <Tile
+    <div className="not-prose gap-4 md:auto-rows-[minmax(11rem,auto)] md:grid-cols-4 grid grid-cols-1">
+      <GalleryTile
         index={0}
         href="/atoms/bubble"
         name="Bubble"
@@ -104,7 +106,7 @@ export function AtomsGallery() {
         className="md:col-span-2 md:row-span-2"
         stageClassName="items-start"
       >
-        <div className="mx-auto flex w-full max-w-xs flex-col gap-4">
+        <div className="max-w-xs gap-4 mx-auto flex w-full flex-col">
           <Bubble variant="sender" continued>
             <Bubble.Header>
               <User.Info
@@ -124,37 +126,37 @@ export function AtomsGallery() {
               <AI.Avatar />
             </Bubble.Header>
             <Bubble.Message>
-              The boundary is valid. Node p-17 has a label mismatch — accept
-              the fix to align it with the schema.
+              The boundary is valid. Node p-17 has a label mismatch — accept the
+              fix to align it with the schema.
             </Bubble.Message>
           </Bubble>
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={1}
         href="/atoms/button"
         name="Button"
         blurb="Variants, sizes, loading, glass"
         className="md:col-span-2"
       >
-        <div className="flex flex-wrap items-center justify-center gap-3">
+        <div className="gap-3 flex flex-wrap items-center justify-center">
           <Button>Consult manuscript</Button>
           <Button variant="secondary">Annotate</Button>
           <Button variant="outline">Compare</Button>
           <Button variant="ghost">Dismiss</Button>
           <Button loading>Saving</Button>
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={2}
         href="/atoms/avatar"
         name="Avatar"
         blurb="Initials, presence, audio ring"
         className="md:col-span-1"
       >
-        <div className="flex items-center justify-center -space-x-2">
+        <div className="-space-x-2 flex items-center justify-center">
           <Avatar
             size="lg"
             user={{ firstName: "Ada", lastName: "L", status: "online" }}
@@ -166,26 +168,24 @@ export function AtomsGallery() {
           />
           <Avatar size="lg" loading />
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={3}
         href="/atoms/reference"
         name="Reference"
         blurb="Grounding chip with hover preview"
         className="md:col-span-1"
       >
-        <div className="flex flex-wrap items-center justify-center gap-2">
-          <Reference
-            preview="Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse…"
-          >
+        <div className="gap-2 flex flex-wrap items-center justify-center">
+          <Reference preview="Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse…">
             Moby-Dick 1:1
           </Reference>
           <Reference>Iliad 1.12</Reference>
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={4}
         href="/atoms/otp-field"
         name="OTP Field"
@@ -207,24 +207,24 @@ export function AtomsGallery() {
             ))}
           </OTPField>
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={5}
         href="/atoms/file-icons"
         name="File icons"
         blurb="Light and dark artwork, pure CSS"
         className="md:col-span-2"
       >
-        <div className="flex items-center justify-center gap-3">
+        <div className="gap-3 flex items-center justify-center">
           <FileBadgeTei size={44} />
           <FileBadgeXml size={44} />
           <FileBadgePdf size={44} />
           <FileBadgeCorpus size={44} />
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={6}
         href="/atoms/input-group"
         name="Input Group"
@@ -232,7 +232,7 @@ export function AtomsGallery() {
         className="md:col-span-2"
       >
         <div className="flex justify-center">
-          <InputGroup className="w-full max-w-64">
+          <InputGroup className="max-w-64 w-full">
             <InputGroupAddon>
               <Search aria-hidden="true" strokeWidth={1.5} />
             </InputGroupAddon>
@@ -246,39 +246,39 @@ export function AtomsGallery() {
             </InputGroupAddon>
           </InputGroup>
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={7}
         href="/atoms/checkbox"
         name="Checkbox"
         blurb="Sound-cued toggle with label"
         className="md:col-span-2"
       >
-        <div className="flex flex-col items-center gap-3">
-          <Label className="flex items-center gap-2">
+        <div className="gap-3 flex flex-col items-center">
+          <Label className="gap-2 flex items-center">
             <Checkbox defaultChecked /> Apparatus
           </Label>
-          <Label className="flex items-center gap-2">
+          <Label className="gap-2 flex items-center">
             <Checkbox /> Variants
           </Label>
         </div>
-      </Tile>
+      </GalleryTile>
 
-      <Tile
+      <GalleryTile
         index={8}
         href="/atoms/text"
         name="Text"
         blurb="Corpus prose with semantic variants"
         className="md:col-span-2"
       >
-        <div className="mx-auto grid max-w-sm gap-2 text-center">
+        <div className="max-w-sm gap-2 mx-auto grid text-center">
           <Text.Heading size="large">Iliad 1.1</Text.Heading>
           <Text.Paragraph size="small">
             Sing, goddess, the anger of Peleus&apos; son Achilles.
           </Text.Paragraph>
         </div>
-      </Tile>
+      </GalleryTile>
     </div>
   )
 }

package/src/components/docs/block-demo-stage.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { cn } from "@/lib/utils"
+
+/** Block examples keep controls in normal flow so they never cover the preview. */
+export function BlockDemoStage({
+  controls,
+  children,
+  canvasClassName,
+}: {
+  controls?: ReactNode
+  children: ReactNode
+  canvasClassName?: string
+}) {
+  return (
+    <div className="not-prose min-w-0 flex w-full flex-col overflow-hidden rounded-xl border bg-background">
+      <div className="min-w-0 p-4 sm:p-6">
+        <div
+          className={cn(
+            "min-h-32 min-w-0 flex w-full items-center justify-center",
+            canvasClassName
+          )}
+        >
+          {children}
+        </div>
+      </div>
+      {controls ? (
+        <div className="p-4 sm:p-6 border-t bg-muted/30">
+          <p className="mb-4 text-sm font-medium">Example controls</p>
+          <div className="gap-x-8 gap-y-4 sm:grid-cols-2 grid grid-cols-1 items-center">
+            {controls}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}