@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,86 +0,0 @@
-"use client";
-
-import {
-  type MutableRefObject,
-  useCallback,
-  useLayoutEffect,
-  useState,
-} from "react";
-
-export type TPortalLayout = {
-  trigger: {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-  };
-  content: {
-    width: number;
-    height: number;
-  };
-};
-
-function sameLayout(a: TPortalLayout | null, b: TPortalLayout) {
-  return (
-    a?.trigger.left === b.trigger.left &&
-    a.trigger.top === b.trigger.top &&
-    a.trigger.width === b.trigger.width &&
-    a.trigger.height === b.trigger.height &&
-    a.content.width === b.content.width &&
-    a.content.height === b.content.height
-  );
-}
-
-/** Measures a trigger and portalled panel in viewport coordinates. */
-export function usePopoverPortalPosition<
-  TriggerElement extends HTMLElement,
-  ContentElement extends HTMLElement,
->(
-  triggerRef: MutableRefObject<TriggerElement | null>,
-  contentRef: MutableRefObject<ContentElement | null>,
-  active: boolean,
-) {
-  const [layout, setLayout] = useState<TPortalLayout | null>(null);
-
-  const update = useCallback(() => {
-    const trigger = triggerRef.current;
-    const content = contentRef.current;
-    if (!trigger || !content) return;
-
-    const rect = trigger.getBoundingClientRect();
-    const next: TPortalLayout = {
-      trigger: {
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height,
-      },
-      content: {
-        width: content.offsetWidth,
-        height: content.offsetHeight,
-      },
-    };
-    setLayout((current) => (sameLayout(current, next) ? current : next));
-  }, [contentRef, triggerRef]);
-
-  useLayoutEffect(() => {
-    update();
-    if (!active) return;
-
-    const trigger = triggerRef.current;
-    const content = contentRef.current;
-    const observer = new ResizeObserver(update);
-    if (trigger) observer.observe(trigger);
-    if (content) observer.observe(content);
-
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-    };
-  }, [active, contentRef, triggerRef, update]);
-
-  return layout;
-}

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

@@ -1,151 +0,0 @@
-"use client";
-
-import {
-  AnimatePresence,
-  type HTMLMotionProps,
-  motion,
-  useReducedMotion,
-  type Variants,
-} from "motion/react";
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  type HTMLAttributes,
-  isValidElement,
-  type MouseEvent,
-  type ReactElement,
-  type ReactNode,
-  type Ref,
-  useId,
-  useState,
-} from "react";
-import { SPRING_LAYOUT } from "@/lib/ease";
-import { cn } from "@/lib/utils";
-
-export interface ISharedLayoutBgProps
-  extends Omit<HTMLAttributes<HTMLElement>, "children"> {
-  children: ReactNode;
-  /** Semantic container used for the children. */
-  as?: "div" | "ul";
-  /** Tailwind class applied to the moving pill. Defaults to a subtle foreground tint. */
-  pillClassName?: string;
-  /** Horizontal inset of the pill relative to each row (px). Default 20. */
-  inset?: number;
-  /** Optional positioning override for the pill wrapper inside each item. */
-  pillContainerClassName?: string;
-}
-
-const variants: Variants = {
-  initial: { opacity: 0, filter: "blur(6px)" },
-  animate: { opacity: 1, filter: "blur(0px)" },
-  exit: (isActive: boolean) =>
-    !isActive ? { opacity: 0, filter: "blur(6px)" } : {},
-};
-
-const reducedVariants: Variants = {
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: (isActive: boolean) => (!isActive ? { opacity: 0 } : {}),
-};
-
-export const SharedLayoutBg = forwardRef<HTMLElement, ISharedLayoutBgProps>(
-  function SharedLayoutBg(
-    {
-      children,
-      as = "div",
-      className,
-      onMouseLeave,
-      pillClassName,
-      pillContainerClassName,
-      inset = 20,
-      ...props
-    },
-    forwardedRef,
-  ) {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const uid = useId();
-  const reduce = useReducedMotion();
-
-    const renderedChildren = Children.toArray(children)
-      .filter(isValidElement)
-      .map((child, index) => {
-        const el = child as ReactElement<{
-          className?: string;
-          onMouseEnter?: () => void;
-          children?: ReactNode;
-        }>;
-        const childKey = el.key ? String(el.key) : `item-${index}`;
-        return cloneElement(
-          el,
-          {
-            key: childKey,
-            className: cn("relative", el.props.className),
-            onMouseEnter: () => {
-              el.props.onMouseEnter?.();
-              setActiveId(childKey);
-            },
-          },
-          <>
-            <AnimatePresence custom={activeId !== null}>
-              {activeId !== null ? (
-                <motion.div
-                  variants={reduce ? reducedVariants : variants}
-                  initial="initial"
-                  animate="animate"
-                  exit="exit"
-                  custom={activeId !== null}
-                  className={cn(
-                    "pointer-events-none absolute inset-y-0",
-                    pillContainerClassName,
-                  )}
-                  style={{ left: -inset, right: -inset }}
-                >
-                  {activeId === childKey ? (
-                    <motion.div
-                      layoutId={`shared-bg-${uid}`}
-                      transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
-                      className={cn(
-                        "pointer-events-none h-full w-full rounded-2xl bg-primary/[0.06]",
-                        pillClassName,
-                      )}
-                    />
-                  ) : null}
-                </motion.div>
-              ) : null}
-            </AnimatePresence>
-            <div className="relative z-10">{el.props.children}</div>
-          </>,
-        );
-      });
-
-    const handleMouseLeave = (event: MouseEvent<HTMLElement>) => {
-      setActiveId(null);
-      onMouseLeave?.(event);
-    };
-
-    // layoutRoot scopes the pill's layout projection to this list, so fixed or
-    // scrolled ancestors can't smear scroll offsets into its movement.
-    return as === "ul" ? (
-      <motion.ul
-        {...(props as HTMLMotionProps<"ul">)}
-        ref={forwardedRef as Ref<HTMLUListElement>}
-        layoutRoot
-        onMouseLeave={handleMouseLeave}
-        className={cn("flex w-full flex-col", className)}
-      >
-        {renderedChildren}
-      </motion.ul>
-    ) : (
-      <motion.div
-        {...(props as HTMLMotionProps<"div">)}
-        ref={forwardedRef as Ref<HTMLDivElement>}
-        layoutRoot
-        onMouseLeave={handleMouseLeave}
-        className={cn("flex w-full flex-col", className)}
-      >
-        {renderedChildren}
-      </motion.div>
-    );
-  },
-);

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

@@ -1,40 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,33 +0,0 @@
-"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

@@ -1,70 +0,0 @@
-"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

@@ -1,61 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-"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

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

@@ -1,69 +0,0 @@
-"use client"
-
-import type { ComponentProps } from "react"
-import { defineStory, type TStoryData } from "@/registry/story"
-
-import { Chart } from "@/components/composed/chat/chart"
-import { wordOccurrences } from "@/registry/demos/corpus-chart-data"
-
-type TPreviewProps = TStoryData<
-  Pick<
-    ComponentProps<typeof Chart>,
-    | "type"
-    | "title"
-    | "subtitle"
-    | "badge"
-    | "reference"
-    | "data"
-    | "series"
-    | "center"
-    | "headerless"
-    | "plotHeight"
-    | "width"
-    | "height"
-    | "variant"
-    | "interactive"
-    | "loading"
-    | "showLegend"
-    | "animation"
-    | "renderer"
-  >
->
-
-function ChartPreview(props: TPreviewProps) {
-  return <Chart {...props} />
-}
-
-export const story = defineStory({
-  Component: ChartPreview,
-  args: {
-    initial: {
-      type: "bar",
-      variant: "default",
-      interactive: true,
-      loading: false,
-      showLegend: true,
-      animation: true,
-      renderer: "canvas",
-      title: "Word occurrences by book",
-      subtitle: "Illustrative counts · selected Bible books",
-      reference: {
-        children: "Strong’s G26",
-        preview:
-          "Matched tokens grouped by Strong’s entry and Bible book. These counts are illustrative.",
-      },
-      headerless: false,
-      width: "100%",
-      height: 360,
-      data: wordOccurrences,
-      series: [
-        {
-          key: "occurrences",
-          label: "Occurrences",
-        },
-      ],
-    },
-  },
-})
-
-export const Preview = story.WithControl

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

@@ -1,30 +0,0 @@
-"use client"
-
-import type { ComponentProps } from "react"
-import { defineStory } from "@/registry/story"
-import { Checkbox } from "@/components/ui/checkbox"
-
-type TPreviewProps = Pick<
-  ComponentProps<typeof Checkbox>,
-  "indeterminate" | "disabled" | "sound"
->
-
-function CheckboxPreview(props: TPreviewProps) {
-  return (
-    <div className="p-6">
-      <div className="">
-        <label className="flex items-center gap-2">
-          <Checkbox {...props} />
-          Include this passage
-        </label>
-      </div>
-    </div>
-  )
-}
-
-export const story = defineStory({
-  Component: CheckboxPreview,
-  args: { initial: { indeterminate: false, disabled: false, sound: true } },
-})
-
-export const Preview = story.WithControl

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

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

@@ -1,35 +0,0 @@
-"use client"
-
-import type { ComponentProps } from "react"
-import { defineStory, type TStoryData } from "@/registry/story"
-
-import { CodeBlock } from "@/components/composed/chat/code-block"
-
-type TPreviewProps = TStoryData<
-  Pick<
-    ComponentProps<typeof CodeBlock>,
-    "filename" | "code" | "diff" | "view" | "defaultView" | "keywords"
-  >
->
-
-function CodeBlockPreview(props: TPreviewProps) {
-  return <CodeBlock {...props} />
-}
-
-export const story = defineStory({
-  Component: CodeBlockPreview,
-  args: {
-    initial: {
-      filename: "corpus.ts",
-      view: "code",
-      diff: [
-        { type: "context", text: 'const corpus = "Iliad";' },
-        { type: "remove", text: "const book = 2;" },
-        { type: "add", text: "const book = 1;" },
-      ],
-      code: 'const corpus = "Iliad";\nconst book = 1;',
-    },
-  },
-})
-
-export const Preview = story.WithControl