@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/icons/file-wordmark-corpus.tsx

@@ -1,4 +1,4 @@
-import type { FileIconProps } from "./types"
+import type { IFileIconProps } from "./types"
 
 /**
  * Corpus file icon — wordmark variant.
@@ -9,7 +9,7 @@ export function FileWordmarkCorpus({
   title = "Corpus file",
   className,
   ...props
-}: FileIconProps) {
+}: IFileIconProps) {
   return (
     <svg
       viewBox="0 -48 1024 1114"

package/src/components/icons/file-wordmark-pdf.tsx

@@ -1,4 +1,4 @@
-import type { FileIconProps } from "./types"
+import type { IFileIconProps } from "./types"
 
 /**
  * PDF file icon — wordmark variant.
@@ -9,7 +9,7 @@ export function FileWordmarkPdf({
   title = "PDF file",
   className,
   ...props
-}: FileIconProps) {
+}: IFileIconProps) {
   return (
     <svg
       viewBox="0 -48 1024 1114"

package/src/components/icons/file-wordmark-tei.tsx

@@ -1,4 +1,4 @@
-import type { FileIconProps } from "./types"
+import type { IFileIconProps } from "./types"
 
 /**
  * TEI file icon — wordmark variant.
@@ -9,7 +9,7 @@ export function FileWordmarkTei({
   title = "TEI file",
   className,
   ...props
-}: FileIconProps) {
+}: IFileIconProps) {
   return (
     <svg
       viewBox="0 -48 1024 1114"

package/src/components/icons/file-wordmark-tf.tsx

@@ -1,4 +1,4 @@
-import type { FileIconProps } from "./types"
+import type { IFileIconProps } from "./types"
 
 /**
  * TF file icon — wordmark variant.
@@ -9,7 +9,7 @@ export function FileWordmarkTf({
   title = "TF file",
   className,
   ...props
-}: FileIconProps) {
+}: IFileIconProps) {
   return (
     <svg
       viewBox="0 -48 1024 1114"

package/src/components/icons/file-wordmark-txt.tsx

@@ -1,4 +1,4 @@
-import type { FileIconProps } from "./types"
+import type { IFileIconProps } from "./types"
 
 /**
  * TXT file icon — wordmark variant.
@@ -9,7 +9,7 @@ export function FileWordmarkTxt({
   title = "TXT file",
   className,
   ...props
-}: FileIconProps) {
+}: IFileIconProps) {
   return (
     <svg
       viewBox="0 -48 1024 1114"

package/src/components/icons/file-wordmark-xml.tsx

@@ -1,4 +1,4 @@
-import type { FileIconProps } from "./types"
+import type { IFileIconProps } from "./types"
 
 /**
  * XML file icon — wordmark variant.
@@ -9,7 +9,7 @@ export function FileWordmarkXml({
   title = "XML file",
   className,
   ...props
-}: FileIconProps) {
+}: IFileIconProps) {
   return (
     <svg
       viewBox="0 -48 1024 1114"

package/src/components/icons/index.ts

@@ -1,4 +1,4 @@
-export type { FileIconProps } from './types';
+export type { IFileIconProps } from './types';
 
 export { FileBadgeCfm } from './file-badge-cfm';
 export { FileBadgeCorpus } from './file-badge-corpus';

package/src/components/icons/types.ts

@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react';
 
-export interface FileIconProps extends Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface IFileIconProps extends Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> {
   /** Rendered width and height. Defaults to 64. */
   size?: number | string;
   /** Accessible name. Pass `null` to mark the icon decorative. */

package/src/components/motion/overflow-actions.tsx

@@ -21,9 +21,9 @@ import { EASE_OUT } from "@/lib/ease";
 import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
 import { cn } from "@/lib/utils";
 
-export type OverflowActionsSize = "sm" | "md";
+export type TOverflowActionsSize = "sm" | "md";
 
-export type OverflowActionItem = {
+export type TOverflowActionItem = {
   id: string;
   label: ReactNode;
   icon?: ReactNode;
@@ -32,7 +32,7 @@ export type OverflowActionItem = {
   ariaLabel?: string;
 };
 
-export type OverflowActionsClassNames = {
+export type TOverflowActionsClassNames = {
   root?: string;
   track?: string;
   action?: string;
@@ -43,19 +43,19 @@ export type OverflowActionsClassNames = {
   label?: string;
 };
 
-export interface OverflowActionsProps {
-  primaryActions: OverflowActionItem[];
-  overflowActions: OverflowActionItem[];
+export interface IOverflowActionsProps {
+  primaryActions: TOverflowActionItem[];
+  overflowActions: TOverflowActionItem[];
   expanded?: boolean;
   defaultExpanded?: boolean;
   onExpandedChange?: (expanded: boolean) => void;
-  onAction?: (item: OverflowActionItem) => void;
+  onAction?: (item: TOverflowActionItem) => void;
   collapseOnAction?: boolean;
-  size?: OverflowActionsSize;
+  size?: TOverflowActionsSize;
   openLabel?: string;
   closeLabel?: string;
   className?: string;
-  classNames?: OverflowActionsClassNames;
+  classNames?: TOverflowActionsClassNames;
 }
 
 // This needs a softer layout spring than the app defaults, so the overflow group
@@ -87,27 +87,27 @@ const OVERFLOW_ACTION_VARIANTS: Variants = {
   exit: { opacity: 0, filter: "blur(4px)" },
 };
 
-const TRACK_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+const TRACK_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
   sm: "gap-1 p-1 text-xs",
   md: "gap-1.5 p-1.5 text-sm",
 };
 
-const GROUP_GAP_CLASS: Record<OverflowActionsSize, string> = {
+const GROUP_GAP_CLASS: Record<TOverflowActionsSize, string> = {
   sm: "gap-1",
   md: "gap-1.5",
 };
 
-const ACTION_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+const ACTION_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
   sm: "h-8 min-w-8 gap-1.5 px-3",
   md: "h-9 min-w-9 gap-2 px-3.5",
 };
 
-const TOGGLE_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+const TOGGLE_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
   sm: "h-8 w-8",
   md: "h-9 w-9",
 };
 
-const ICON_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+const ICON_SIZE_CLASS: Record<TOverflowActionsSize, string> = {
   sm: "h-3.5 w-3.5",
   md: "h-4 w-4",
 };
@@ -151,7 +151,7 @@ export function OverflowActions({
   closeLabel = "Hide extra actions",
   className,
   classNames,
-}: OverflowActionsProps) {
+}: IOverflowActionsProps) {
   const reduce = useReducedMotion();
   const canHover = useHoverCapable();
   const overflowId = useId();
@@ -181,7 +181,7 @@ export function OverflowActions({
     overflowWrapperLeftRef.current = overflowNode.getBoundingClientRect().left;
   }, [isExpanded]);
 
-  const handleAction = (item: OverflowActionItem) => {
+  const handleAction = (item: TOverflowActionItem) => {
     item.onClick?.();
     onAction?.(item);
     if (collapseOnAction) setIsExpanded(false);
@@ -312,14 +312,14 @@ function ActionButton({
   iconClassName,
   labelClassName,
 }: {
-  item: OverflowActionItem;
-  size: OverflowActionsSize;
+  item: TOverflowActionItem;
+  size: TOverflowActionsSize;
   reduce: boolean | null;
   canHover: boolean;
   overflow?: boolean;
   visible?: boolean;
   variants?: Variants;
-  onAction: (item: OverflowActionItem) => void;
+  onAction: (item: TOverflowActionItem) => void;
   layoutTransition: Transition;
   className?: string;
   iconClassName?: string;

package/src/components/motion/popover-morph.tsx

@@ -21,10 +21,10 @@ import { usePopoverPortalPosition } from "@/components/motion/popover-position";
 import { EASE_OUT, SPRING_PANEL } from "@/lib/ease";
 import { cn } from "@/lib/utils";
 
-type Side = "top" | "bottom";
-type Align = "start" | "end";
+type TSide = "top" | "bottom";
+type TAlign = "start" | "end";
 
-type MorphContextValue = {
+type TMorphContextValue = {
   open: boolean;
   setOpen: (open: boolean) => void;
   toggle: () => void;
@@ -35,7 +35,7 @@ type MorphContextValue = {
   contentRef: React.MutableRefObject<HTMLDivElement | null>;
 };
 
-const MorphContext = createContext<MorphContextValue | null>(null);
+const MorphContext = createContext<TMorphContextValue | null>(null);
 
 function useMorphContext(component: string) {
   const ctx = useContext(MorphContext);
@@ -43,7 +43,7 @@ function useMorphContext(component: string) {
   return ctx;
 }
 
-export interface MorphPopoverProps {
+export interface IMorphPopoverProps {
   children: ReactNode;
   /** Controlled open state. */
   open?: boolean;
@@ -64,7 +64,7 @@ export function MorphPopover({
   defaultOpen = false,
   onOpenChange,
   className,
-}: MorphPopoverProps) {
+}: IMorphPopoverProps) {
   const baseId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLElement | null>(null);
@@ -102,7 +102,7 @@ export function MorphPopover({
     };
   }, [open, setOpen]);
 
-  const ctx = useMemo<MorphContextValue>(
+  const ctx = useMemo<TMorphContextValue>(
     () => ({
       open,
       setOpen,
@@ -127,7 +127,7 @@ export function MorphPopover({
   );
 }
 
-export interface MorphPopoverTriggerProps {
+export interface IMorphPopoverTriggerProps {
   children: ReactElement;
 }
 
@@ -142,7 +142,7 @@ function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
 }
 
 /** Wraps a single element, toggling the popover on click. */
-export function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {
+export function MorphPopoverTrigger({ children }: IMorphPopoverTriggerProps) {
   const ctx = useMorphContext("MorphPopoverTrigger");
   if (!isValidElement(children)) return children;
 
@@ -167,12 +167,12 @@ export function MorphPopoverTrigger({ children }: MorphPopoverTriggerProps) {
   });
 }
 
-const originFor = (side: Side, align: Align) =>
+const originFor = (side: TSide, align: TAlign) =>
   `${side === "bottom" ? "top" : "bottom"} ${align === "end" ? "right" : "left"}`;
 
 // A clip that hides everything but the corner nearest the trigger, so the
 // panel appears to grow out of it. inset(top right bottom left).
-function clipHidden(side: Side, align: Align, radius: number) {
+function clipHidden(side: TSide, align: TAlign, radius: number) {
   const top = side === "bottom" ? "0%" : "92%";
   const bottom = side === "bottom" ? "92%" : "0%";
   const right = align === "end" ? "0%" : "92%";
@@ -185,10 +185,10 @@ const clipShown = (radius: number) => `inset(0% 0% 0% 0% round ${radius}px)`;
 // clip-path so it cannot snap when the spring resolves its final distance.
 const MORPH_CLIP_TRANSITION = { duration: 0.32, ease: EASE_OUT } as const;
 
-export interface MorphPopoverContentProps {
+export interface IMorphPopoverContentProps {
   children: ReactNode;
-  side?: Side;
-  align?: Align;
+  side?: TSide;
+  align?: TAlign;
   /** Gap between trigger and panel, in px. Default 8. */
   sideOffset?: number;
   /** Panel corner radius, in px. Default 16. */
@@ -203,7 +203,7 @@ export function MorphPopoverContent({
   sideOffset = 8,
   radius = 16,
   className,
-}: MorphPopoverContentProps) {
+}: IMorphPopoverContentProps) {
   const ctx = useMorphContext("MorphPopoverContent");
   const { contentId, setContentRef, triggerId } = ctx;
   const reduce = useReducedMotion() ?? false;

package/src/components/motion/popover-position.ts

@@ -7,7 +7,7 @@ import {
   useState,
 } from "react";
 
-export type PortalLayout = {
+export type TPortalLayout = {
   trigger: {
     left: number;
     top: number;
@@ -20,7 +20,7 @@ export type PortalLayout = {
   };
 };
 
-function sameLayout(a: PortalLayout | null, b: PortalLayout) {
+function sameLayout(a: TPortalLayout | null, b: TPortalLayout) {
   return (
     a?.trigger.left === b.trigger.left &&
     a.trigger.top === b.trigger.top &&
@@ -40,7 +40,7 @@ export function usePopoverPortalPosition<
   contentRef: MutableRefObject<ContentElement | null>,
   active: boolean,
 ) {
-  const [layout, setLayout] = useState<PortalLayout | null>(null);
+  const [layout, setLayout] = useState<TPortalLayout | null>(null);
 
   const update = useCallback(() => {
     const trigger = triggerRef.current;
@@ -48,7 +48,7 @@ export function usePopoverPortalPosition<
     if (!trigger || !content) return;
 
     const rect = trigger.getBoundingClientRect();
-    const next: PortalLayout = {
+    const next: TPortalLayout = {
       trigger: {
         left: rect.left,
         top: rect.top,

package/src/components/motion/shared-layout-bg.tsx

@@ -23,7 +23,7 @@ import {
 import { SPRING_LAYOUT } from "@/lib/ease";
 import { cn } from "@/lib/utils";
 
-export interface SharedLayoutBgProps
+export interface ISharedLayoutBgProps
   extends Omit<HTMLAttributes<HTMLElement>, "children"> {
   children: ReactNode;
   /** Semantic container used for the children. */
@@ -49,7 +49,7 @@ const reducedVariants: Variants = {
   exit: (isActive: boolean) => (!isActive ? { opacity: 0 } : {}),
 };
 
-export const SharedLayoutBg = forwardRef<HTMLElement, SharedLayoutBgProps>(
+export const SharedLayoutBg = forwardRef<HTMLElement, ISharedLayoutBgProps>(
   function SharedLayoutBg(
     {
       children,

package/src/components/stories/attachment.story.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory, type TStoryData } from "@/registry/story"
+
+import { Attachment } from "@/components/composed/chat/attachment"
+
+type TPreviewProps = TStoryData<
+  Pick<
+    ComponentProps<typeof Attachment>,
+    | "kind"
+    | "variant"
+    | "title"
+    | "meta"
+    | "removable"
+    | "src"
+    | "thumbnail"
+    | "previewText"
+  >
+>
+
+function AttachmentPreview(props: TPreviewProps) {
+  return <Attachment {...props} />
+}
+
+export const story = defineStory({
+  Component: AttachmentPreview,
+  args: {
+    initial: {
+      kind: "document",
+      variant: "default",
+      title: "Iliad annotations.pdf",
+      meta: "PDF · 2.4 MB",
+      previewText:
+        "Iliad · Book 1\n\nAnnotation notes\n¶12 — Compare the paragraph boundary with the source edition.\n¶17 — Check the speaker attribution and lemma links.",
+    },
+  },
+})
+
+export const Preview = story.WithControl

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

@@ -0,0 +1,17 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { AuthFlowBlock } from "@/components/blocks/auth/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/stories/avatar.story.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Avatar } from "@/components/atoms/avatar"
+
+type TPreviewProps = Pick<
+  ComponentProps<typeof Avatar>,
+  "user" | "size" | "audio" | "loading"
+>
+
+function AvatarPreview(props: TPreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="">
+        <Avatar {...props} />
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: AvatarPreview,
+  args: {
+    initial: {
+      size: "lg",
+      loading: false,
+      user: { firstName: "John", lastName: "Doe", status: "online" },
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/base.story.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import { useState, type ComponentProps } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { composerDemoOptions } from "@/registry/demos/composer-options"
+import { Bubble } from "@/components/atoms"
+import {
+  Attachment,
+  type TComposerAttachment,
+} from "@/components/composed/chat"
+import { AiPanel } from "@/components/blocks/chat/base"
+
+type TPreviewProps = Pick<
+  ComponentProps<typeof AiPanel>,
+  "scope" | "headerTitle" | "className" | "thread" | "locked"
+>
+
+function BlockPreview(props: TPreviewProps) {
+  const [messages, setMessages] = useState<
+    { text: string; attachments: TComposerAttachment[] }[]
+  >([])
+  return (
+    <AiPanel
+      {...props}
+      thread={
+        <>
+          {props.thread}
+          {messages.map((message, index) => (
+            <Bubble key={index} variant="sender">
+              {message.text && <Bubble.Message>{message.text}</Bubble.Message>}
+              {message.attachments.length > 0 && (
+                <Bubble.Message unstyled>
+                  {message.attachments.map((attachment) => (
+                    <Attachment
+                      key={attachment.id}
+                      {...attachment}
+                      variant="default"
+                      removable={false}
+                    />
+                  ))}
+                </Bubble.Message>
+              )}
+            </Bubble>
+          ))}
+        </>
+      }
+      composerProps={{
+        ...composerDemoOptions,
+        onSubmit: (text, _mode, attachments) =>
+          setMessages((items) => [...items, { text, attachments }]),
+      }}
+    />
+  )
+}
+
+export const story = defineStory({
+  Component: BlockPreview,
+  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

package/src/components/stories/bubble.story.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Bubble } from "@/components/atoms/bubble"
+import User from "@/components/composed/user"
+import AI from "@/components/composed/ai"
+
+type TPreviewProps = Pick<
+  ComponentProps<typeof Bubble>,
+  "variant" | "continued"
+>
+
+function BubblePreview({ variant = "recipient", continued }: TPreviewProps) {
+  const message = "Can you check whether this passage keeps the boundary?"
+  return (
+    <div className="p-6 max-w-lg w-full">
+      {variant === "ai" ? (
+        <Bubble variant="ai" continued={continued}>
+          {!continued && (
+            <Bubble.Header>
+              <AI.Avatar />
+            </Bubble.Header>
+          )}
+          <Bubble.Message>{message}</Bubble.Message>
+        </Bubble>
+      ) : (
+        <User.Message
+          variant="info"
+          continued={continued}
+          user={{
+            firstName: "John",
+            lastName: "Doe",
+            description: "10 min ago",
+            direction: variant,
+          }}
+          reactions={{
+            reactions: [
+              {
+                id: "heart",
+                emoji: "❤️",
+                count: 4,
+                reacted: true,
+                label: "heart",
+              },
+            ],
+          }}
+        >
+          {message}
+        </User.Message>
+      )}
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: BubblePreview,
+  args: { initial: { variant: "recipient", continued: false } },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/button.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory, type TStoryData } from "@/registry/story"
+import { Button } from "@/components/ui/button"
+
+type TPreviewProps = TStoryData<
+  Pick<
+    ComponentProps<typeof Button>,
+    "variant" | "size" | "loading" | "disabled" | "sound" | "children"
+  >
+>
+
+function ButtonPreview(props: TPreviewProps) {
+  return <Button {...props} />
+}
+
+export const story = defineStory({
+  Component: ButtonPreview,
+  args: {
+    initial: {
+      children: "Consult manuscript",
+      variant: "outline",
+      size: "default",
+      loading: false,
+      disabled: false,
+      sound: true,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/card.story.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Card, CardHeader, CardPanel, CardTitle } from "@/components/ui/card"
+
+type TPreviewProps = Pick<ComponentProps<typeof Card>, "className"> & {
+  children: string
+}
+
+function CardPreview({ children, ...props }: TPreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <Card {...props}>
+          <CardHeader>
+            <CardTitle>Manuscript</CardTitle>
+          </CardHeader>
+          <CardPanel>{children}</CardPanel>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: CardPreview,
+  args: {
+    initial: {
+      className: "",
+      children: "Explore this passage and its annotations.",
+    },
+  },
+})
+
+export const Preview = story.WithControl