@exegia/corpora-ui 3.0.0 → 3.1.0

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

@@ -1,157 +0,0 @@
-import type * as React from "react"
-
-import type { IMenuCommandItem } from "@/components/ui/menu-command"
-import type { TAttachmentProps } from "./attachment"
-import type { HTMLMotionProps } from "motion/react"
-import type { TAtomSize } from "@/components/atoms/types"
-
-export type TComposerMode = "answer" | "fix" | "ask"
-
-/** A tray chip: any Attachment kind plus a stable id. */
-type ComposerAttachment<T> = T extends TAttachmentProps
-  ? Omit<T, "variant" | "onRemove" | "removable"> & { id: string }
-  : never
-export type TComposerAttachment = ComposerAttachment<TAttachmentProps>
-
-export interface IComposerModel {
-  id: string
-  label: string
-  description?: string
-}
-
-export interface IComposerOption {
-  id: string
-  label: string
-  description?: string
-  icon?: React.ReactNode
-  /** Text to insert instead of @label or /id. */
-  insertText?: string
-  onSelect?: () => void
-}
-
-export interface IComposerMenuProps {
-  disabled?: boolean
-  items?: IMenuCommandItem[]
-  onCommand?: (item: IMenuCommandItem) => void
-  onAttach?: () => void
-}
-
-export interface IComposerSuggestionsProps {
-  prompts?: React.ReactNode
-  label?: (count: number) => React.ReactNode
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-export interface IComposerSubmitButtonProps<
-  S extends boolean = boolean,
-  E extends boolean = boolean,
-> {
-  onStop?: () => void
-  disabled?: boolean
-  isStreaming: S
-  isExpanded: E
-}
-
-export interface IComposerModeProps {
-  mode: TComposerMode
-  onModeChange?: (mode: TComposerMode) => void
-}
-
-export interface IComposerBaseProps<
-  S extends boolean = boolean,
-  E extends boolean = boolean,
-  M extends TComposerMode = TComposerMode,
-  A extends TComposerAttachment = TComposerAttachment,
-> {
-  shape?: "rounded" | "pill"
-  sources?: IComposerOption[]
-  commands?: IComposerOption[]
-  models?: IComposerModel[]
-  model?: string
-  defaultModel?: string
-  onModelChange?: (model: string) => void
-  onSourceSelect?: (source: IComposerOption) => void
-  onCommand?: (command: IComposerOption) => void
-  /** Receives local files; uploading remains the consuming app's responsibility. */
-  onFilesChange?: (files: File[]) => void
-  accept?: string
-  /** Hide the microphone. Unsupported browsers show it disabled otherwise. */
-  dictation?: boolean
-  value?: string
-  onValueChange?: (value: string) => void
-  composerId?: string
-  /** Seeds the tray once on mount; the atoms own it from then on. */
-  attachments?: A[]
-  /** Keep the text above the controls even for a short message. */
-  expanded?: E
-  isStreaming?: S
-  disabled?: boolean
-  safetyNote?: React.ReactNode
-  placeholder?: string
-  onSubmit?: (value: string, mode: M, attachments: A[]) => void
-  /** Fires from the streaming Stop button and the Escape key. */
-  onStop?: () => void
-  className?: string
-  defaultValue?: string
-}
-
-export interface IComposerProps<
-  IMode extends IComposerModeProps = IComposerModeProps,
-  S extends boolean = boolean,
-  E extends boolean = boolean,
-> extends IComposerBaseProps<S, E> {
-  /** Replaces the default `SendButton`. Receives the streaming/expanded state. */
-  SubmitButton?: React.FC<IComposerSubmitButtonProps<S, E>>
-  ModeComponent?: React.FC<IMode>
-  Suggestions?: React.FC<IComposerSuggestionsProps>
-  ComposerMenu?: React.FC<IComposerMenuProps>
-}
-
-export interface ISuggestedPromptsProps extends Omit<
-  HTMLMotionProps<"div">,
-  "children"
-> {
-  /** The `SuggestedPrompt` rows. */
-  children: React.ReactNode
-  /** Overrides the count derived from `children`. */
-  count?: number
-  /** Names the disclosure. `Suggestions (n)` by default. */
-  label?: (count: number) => React.ReactNode
-  defaultOpen?: boolean
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-export type TBubbleActionPayload =
-  string | number | Record<string, unknown> | undefined
-export type TBubbleActionSize = Extract<TAtomSize, "sm" | "default" | "lg">
-export type TBubbleActionKey =
-  "copy" | "edit" | "delete" | "share" | "retry" | "more" | "download"
-export interface IBubbleActionBaseProps<
-  S extends TBubbleActionSize = TBubbleActionSize,
-  K extends TBubbleActionKey = TBubbleActionKey,
-  P extends TBubbleActionPayload = TBubbleActionPayload,
-> {
-  key: K
-  onClick?: (key: K, payload: P) => void
-  icon?: React.ReactNode
-  tooltip?: string
-  size?: S
-}
-
-export type TIBubbleActionProps<
-  K extends TBubbleActionKey = TBubbleActionKey,
-  S extends TBubbleActionSize = TBubbleActionSize,
-  P extends TBubbleActionPayload = TBubbleActionPayload,
-> = IBubbleActionBaseProps<S, K, P>
-export interface IBubbleActionsProps<
-  K extends TBubbleActionKey = TBubbleActionKey,
-  S extends TBubbleActionSize = TBubbleActionSize,
-  P extends TBubbleActionPayload = TBubbleActionPayload,
-> {
-  size?: S
-  onClick?: (key: K, payload: P) => void
-  actions: { [key in K]?: TIBubbleActionProps<K, S, P> }
-}

package/src/components/composed/logo.tsx

@@ -1,171 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { motion, useReducedMotion } from "motion/react"
-import type { Variants } from "motion/react"
-
-import { EASE_OUT } from "@/lib/ease.ts"
-import { cn } from "@/lib/utils"
-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 TLogoVariant = "full" | "mark"
-
-export interface ILogoProps 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
-   * is given.
-   */
-  name: string
-  /** Custom mark — an inline SVG sized to fill its box. Wins over `src`. */
-  mark?: React.ReactNode
-  /** Image URL for the mark. Decorative — `name` labels the logo. */
-  src?: string
-  /** Wordmark content. Defaults to `name`. */
-  wordmark?: React.ReactNode
-  /** `full` (default) or `mark` — the wordmark folds away, animated. */
-  variant?: TLogoVariant
-  /** Renders the logo as a link — the usual "mark goes home" affordance. */
-  href?: string
-}
-
-/** Wordmark fold/unfold — the same envelope the profile card's identity
- * lines use, so a logo and a profile card folding in the same rail move as
- * one. Kept local: composed components do not reach into blocks. Expressed
- * as named variants for consistency with the profile card's fold envelope —
- * house style for multi-property fold states, not a motion requirement. */
-const WORDMARK_VARIANTS: Variants = {
-  open: {
-    width: "auto",
-    opacity: 1,
-    x: 0,
-    transition: { duration: 0.2, delay: 0.08, ease: EASE_OUT },
-  },
-  folded: {
-    width: 0,
-    opacity: 0,
-    x: -4,
-    transition: { duration: 0.12, ease: EASE_OUT },
-  },
-}
-
-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 },
-  },
-}
-
-/**
- * Brand lockup: a mark beside a wordmark. The mark is whatever the brand
- * has — an SVG (`mark`), an image (`src`), or, given neither, a monogram
- * tile derived from `name`. `variant="mark"` folds the wordmark away with
- * the same motion a collapsing rail uses, so the lockup can sit in one and
- * follow its fold. With `href` the whole lockup is a link named by `name`.
- *
- * Sizing rides on the mark: it defaults to `size-8`; restyle via
- * `[&_[data-slot=logo-mark]]:size-*` or wrap in a text-size context for the
- * wordmark, which inherits.
- */
-export function Logo({
-  name,
-  mark,
-  src,
-  wordmark,
-  variant = "full",
-  href,
-  className,
-  ...props
-}: ILogoProps): React.ReactElement {
-  const reduce = useReducedMotion()
-  const folded = variant === "mark"
-
-  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 text-[45cqw] font-semibold text-background"
-        data-slot="logo-monogram"
-      >
-        {initialsFrom(name)}
-      </span>
-    ))
-
-  const content = (
-    <>
-      <span
-        className="@container size-8 shrink-0 [&_svg]:size-full"
-        data-slot="logo-mark"
-      >
-        {markNode}
-      </span>
-      <motion.span
-        animate={folded ? "folded" : "open"}
-        variants={reduce ? WORDMARK_VARIANTS_REDUCED : WORDMARK_VARIANTS}
-        // Folded, the wordmark is gone for AT too — the root's label names
-        // the brand on its own.
-        aria-hidden={folded || undefined}
-        className={cn(
-          "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.
-          folded && "-ml-2"
-        )}
-        data-slot="logo-wordmark"
-        initial={false}
-      >
-        {wordmark ?? name}
-      </motion.span>
-    </>
-  )
-
-  const rootClassName = cn(
-    "inline-flex shrink-0 items-center gap-2 text-foreground",
-    className
-  )
-
-  return href !== undefined ? (
-    <a
-      // Always labelled: the folded state hides the wordmark, and a link
-      // must not lose its name mid-animation.
-      aria-label={name}
-      className={rootClassName}
-      data-slot="logo"
-      data-variant={variant}
-      href={href}
-      {...props}
-    >
-      {content}
-    </a>
-  ) : (
-    <span
-      aria-label={folded ? name : undefined}
-      className={rootClassName}
-      data-slot="logo"
-      data-variant={variant}
-      role={folded ? "img" : undefined}
-      {...props}
-    >
-      {content}
-    </span>
-  )
-}

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

@@ -1,179 +0,0 @@
-"use client";
-
-import { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import * as React from "react";
-
-import { Button } from "@/components/ui/button";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/components/ui/input-group";
-import { playCue } from "@/lib/sound";
-import { cn } from "@/lib/utils";
-
-// transitions.dev motion scale
-const EASE = [0.22, 1, 0.36, 1] as const;
-
-export const passwordRequirements = [
-  { regex: /.{8,}/, text: "At least 8 characters" },
-  { regex: /[0-9]/, text: "At least 1 number" },
-  { regex: /[a-z]/, text: "At least 1 lowercase letter" },
-  { regex: /[A-Z]/, text: "At least 1 uppercase letter" },
-] as const;
-
-export function getPasswordStrength(password: string): number {
-  return passwordRequirements.filter((req) => req.regex.test(password)).length;
-}
-
-const STRENGTH_COLORS = [
-  "bg-border",
-  "bg-red-500",
-  "bg-orange-500",
-  "bg-amber-500",
-  "bg-emerald-500",
-] as const;
-
-export interface IPasswordInputProps
-  extends Omit<React.ComponentProps<typeof InputGroupInput>, "type" | "size"> {
-  /** Render the eye toggle button. */
-  visibilityToggle?: boolean;
-  /** Render the animated strength meter and requirement checklist. */
-  showStrength?: boolean;
-  /** Play reveal/hide cues on the visibility toggle. Inert until bindSounds(). */
-  sound?: boolean;
-}
-
-/**
- * Password field with visibility toggle and optional strength meter.
- * Composition of InputGroup + Button (coss particles p-input-9 and
- * p-input-group-26).
- */
-export function PasswordInput({
-  visibilityToggle = true,
-  showStrength = false,
-  sound = true,
-  className,
-  value: valueProp,
-  defaultValue,
-  onChange,
-  ...props
-}: IPasswordInputProps) {
-  const [visible, setVisible] = React.useState(false);
-  const [uncontrolled, setUncontrolled] = React.useState(
-    String(defaultValue ?? ""),
-  );
-  const value = valueProp !== undefined ? String(valueProp) : uncontrolled;
-  const score = getPasswordStrength(value);
-
-  return (
-    <div className={cn("flex w-full flex-col gap-3", className)}>
-      <InputGroup>
-        <InputGroupInput
-          placeholder="Enter your password"
-          {...props}
-          type={visible ? "text" : "password"}
-          value={value}
-          onChange={(event) => {
-            setUncontrolled(event.target.value);
-            onChange?.(event);
-          }}
-        />
-        {visibilityToggle && (
-          <InputGroupAddon align="inline-end">
-            <Button
-              aria-label={visible ? "Hide password" : "Show password"}
-              onClick={() => {
-                // Semantic cues from the cuelume palette: bloom = reveal,
-                // droplet = dismiss. Press/release stays off to avoid layering.
-                if (sound) playCue(visible ? "droplet" : "bloom");
-                setVisible((v) => !v);
-              }}
-              size="icon-xs"
-              variant="ghost"
-              sound={false}
-            >
-              <AnimatePresence mode="wait" initial={false}>
-                <motion.span
-                  key={visible ? "off" : "on"}
-                  className="inline-flex"
-                  initial={{ opacity: 0, scale: 0.8, filter: "blur(2px)" }}
-                  animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
-                  exit={{ opacity: 0, scale: 0.8, filter: "blur(2px)" }}
-                  transition={{ duration: 0.15, ease: EASE }}
-                >
-                  {visible ? (
-                    <EyeOffIcon aria-hidden="true" />
-                  ) : (
-                    <EyeIcon aria-hidden="true" />
-                  )}
-                </motion.span>
-              </AnimatePresence>
-            </Button>
-          </InputGroupAddon>
-        )}
-      </InputGroup>
-
-      <AnimatePresence initial={false}>
-        {showStrength && (
-          <motion.div
-            className="flex flex-col gap-2 overflow-hidden"
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: "auto", opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.25, ease: EASE }}
-          >
-            <div
-              aria-label="Password strength"
-              aria-valuemax={4}
-              aria-valuemin={0}
-              aria-valuenow={score}
-              className="h-1 w-full overflow-hidden rounded-full bg-border"
-              role="progressbar"
-            >
-              <motion.div
-                className={cn("h-full rounded-full", STRENGTH_COLORS[score])}
-                animate={{ width: `${(score / 4) * 100}%` }}
-                transition={{ duration: 0.4, ease: EASE }}
-              />
-            </div>
-            <ul
-              aria-label="Password requirements"
-              className="flex flex-col gap-1"
-            >
-              {passwordRequirements.map((req) => {
-                const met = req.regex.test(value);
-                return (
-                  <li className="flex items-center gap-2 text-xs" key={req.text}>
-                    {met ? (
-                      <CheckIcon
-                        aria-hidden="true"
-                        className="size-3.5 text-emerald-500"
-                      />
-                    ) : (
-                      <XIcon
-                        aria-hidden="true"
-                        className="size-3.5 text-muted-foreground/80"
-                      />
-                    )}
-                    <span
-                      className={
-                        met ? "text-emerald-600" : "text-muted-foreground"
-                      }
-                    >
-                      {req.text}
-                      <span className="sr-only">
-                        {met ? " - met" : " - not met"}
-                      </span>
-                    </span>
-                  </li>
-                );
-              })}
-            </ul>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

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

@@ -1,32 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import type { IAppliedMarkProps } from "./type"
-
-export function AppliedMark({
-  nodeId,
-  className,
-  children,
-  ...props
-}: IAppliedMarkProps): 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

@@ -1,49 +0,0 @@
-"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 { IApplyToastProps } from "./type"
-
-export function ApplyToast({
-  open = true,
-  message = "Change applied and recorded in version history.",
-  onUndo,
-  className,
-}: IApplyToastProps): 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

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

@@ -1,26 +0,0 @@
-"use client"
-
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import type { ISelectionHighlightProps } from "./type"
-
-export function SelectionHighlight({
-  range,
-  className,
-  children,
-  ...props
-}: ISelectionHighlightProps): 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>
-  )
-}