@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,286 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { motion } from "motion/react"
-import { ArrowUpRight, Search } from "lucide-react"
-
-import { Avatar, Bubble, Reference, Text } from "@/components/atoms"
-import AI from "@/components/composed/ai"
-import User from "@/components/composed/user"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/components/ui/input-group"
-import { Kbd } from "@/components/ui/kbd"
-import { Label } from "@/components/ui/label"
-import { OTPField, OTPFieldInput } from "@/components/ui/otp-field"
-import {
-  FileBadgeCorpus,
-  FileBadgePdf,
-  FileBadgeTei,
-  FileBadgeXml,
-} from "@/components/icons"
-import { cn } from "@/lib/utils"
-
-/** Docs landing gallery: one live tile per atom, bento-laid, linking to its page.
- *  Never part of the npm surface. */
-
-const EASE = [0.32, 0.72, 0, 1] as const
-
-export function GalleryTile({
-  href,
-  name,
-  blurb,
-  className,
-  stageClassName,
-  children,
-  index,
-}: {
-  href: string
-  name: string
-  blurb: string
-  className?: string
-  stageClassName?: string
-  children: React.ReactNode
-  index: number
-}) {
-  return (
-    <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 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(
-          "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="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>
-      <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="text-xs truncate text-muted-foreground">{blurb}</div>
-        </div>
-        <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>
-      </a>
-    </motion.div>
-  )
-}
-
-const REACTIONS = [
-  { id: "heart", emoji: "❤️", count: 4, reacted: true, label: "heart" },
-  { id: "eyes", emoji: "👀", count: 1, label: "eyes" },
-]
-
-export function AtomsGallery() {
-  const [otp, setOtp] = React.useState("482")
-  const [query, setQuery] = React.useState("")
-  return (
-    <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"
-        blurb="Message surface with header, reactions and actions"
-        className="md:col-span-2 md:row-span-2"
-        stageClassName="items-start"
-      >
-        <div className="max-w-xs gap-4 mx-auto flex w-full flex-col">
-          <Bubble variant="sender" continued>
-            <Bubble.Header>
-              <User.Info
-                user={{ firstName: "Sen", lastName: "Der", role: "Admin" }}
-                direction="sender"
-                variant="info"
-              />
-            </Bubble.Header>
-            <Bubble.Message>
-              Does ¶12 keep the RC003 boundary? The walker looks like it split
-              it.
-            </Bubble.Message>
-            <Bubble.Reactions reactions={REACTIONS} />
-          </Bubble>
-          <Bubble variant="ai" continued>
-            <Bubble.Header>
-              <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.
-            </Bubble.Message>
-          </Bubble>
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={1}
-        href="/atoms/button"
-        name="Button"
-        blurb="Variants, sizes, loading, glass"
-        className="md:col-span-2"
-      >
-        <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>
-      </GalleryTile>
-
-      <GalleryTile
-        index={2}
-        href="/atoms/avatar"
-        name="Avatar"
-        blurb="Initials, presence, audio ring"
-        className="md:col-span-1"
-      >
-        <div className="-space-x-2 flex items-center justify-center">
-          <Avatar
-            size="lg"
-            user={{ firstName: "Ada", lastName: "L", status: "online" }}
-          />
-          <Avatar
-            size="lg"
-            user={{ firstName: "Bo", lastName: "K", status: "idle" }}
-            audio="speaking"
-          />
-          <Avatar size="lg" loading />
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={3}
-        href="/atoms/reference"
-        name="Reference"
-        blurb="Grounding chip with hover preview"
-        className="md:col-span-1"
-      >
-        <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>
-      </GalleryTile>
-
-      <GalleryTile
-        index={4}
-        href="/atoms/otp-field"
-        name="OTP Field"
-        blurb="Per-character slots"
-        className="md:col-span-2"
-      >
-        <div className="flex justify-center">
-          <Label className="sr-only" htmlFor="homepage-otp">
-            One-time passcode
-          </Label>
-          <OTPField
-            id="homepage-otp"
-            length={6}
-            value={otp}
-            onValueChange={setOtp}
-          >
-            {Array.from({ length: 6 }, (_, i) => (
-              <OTPFieldInput key={i} aria-label={`Digit ${i + 1} of 6`} />
-            ))}
-          </OTPField>
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={5}
-        href="/atoms/file-icons"
-        name="File icons"
-        blurb="Light and dark artwork, pure CSS"
-        className="md:col-span-2"
-      >
-        <div className="gap-3 flex items-center justify-center">
-          <FileBadgeTei size={44} />
-          <FileBadgeXml size={44} />
-          <FileBadgePdf size={44} />
-          <FileBadgeCorpus size={44} />
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={6}
-        href="/atoms/input-group"
-        name="Input Group"
-        blurb="Leading and trailing addons"
-        className="md:col-span-2"
-      >
-        <div className="flex justify-center">
-          <InputGroup className="max-w-64 w-full">
-            <InputGroupAddon>
-              <Search aria-hidden="true" strokeWidth={1.5} />
-            </InputGroupAddon>
-            <InputGroupInput
-              placeholder="Search the corpus"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-            />
-            <InputGroupAddon align="inline-end">
-              <Kbd>⌘K</Kbd>
-            </InputGroupAddon>
-          </InputGroup>
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={7}
-        href="/atoms/checkbox"
-        name="Checkbox"
-        blurb="Sound-cued toggle with label"
-        className="md:col-span-2"
-      >
-        <div className="gap-3 flex flex-col items-center">
-          <Label className="gap-2 flex items-center">
-            <Checkbox defaultChecked /> Apparatus
-          </Label>
-          <Label className="gap-2 flex items-center">
-            <Checkbox /> Variants
-          </Label>
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={8}
-        href="/atoms/text"
-        name="Text"
-        blurb="Corpus prose with semantic variants"
-        className="md:col-span-2"
-      >
-        <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>
-      </GalleryTile>
-    </div>
-  )
-}
-
-export default AtomsGallery

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

@@ -1,38 +0,0 @@
-"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>
-  )
-}

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

@@ -1,224 +0,0 @@
-"use client"
-
-import { LoginBlock } from "@/components/blocks/auth/login-block"
-import { SignupBlock } from "@/components/blocks/auth/signup-block"
-import { ForgotPasswordBlock } from "@/components/blocks/auth/forgot-password-block"
-import { CodeAuthBlock } from "@/components/blocks/auth/code-auth-block"
-import { UpdatePasswordBlock } from "@/components/blocks/auth/update-password-block"
-import { PasskeySignInBlock } from "@/components/blocks/auth/passkey-sign-in-block"
-import { PasskeyManagerBlock } from "@/components/blocks/auth/passkey-manager-block"
-import { LinkedAccountsBlock } from "@/components/blocks/auth/linked-accounts-block"
-import { OnboardingBlock } from "@/components/blocks/auth/onboarding-block"
-import { AuthFlowBlock } from "@/components/blocks/auth/auth-flow-block"
-import { ProfileCardBlock } from "@/components/blocks/profile/profile-card-block"
-import { ShellLayout } from "@/components/blocks/shell/shell-layout"
-import { Scaffold } from "@/components/blocks/scaffold"
-import { AiPanel } from "@/components/blocks/chat/base"
-import { GalleryTile } from "./atoms-gallery"
-
-const blocks = [
-  {
-    slug: "login",
-    name: "Login",
-    blurb: "Progressive sign-in with social providers",
-    preview: <LoginBlock />,
-  },
-  {
-    slug: "signup",
-    name: "Signup",
-    blurb: "Account creation, password strength and consent",
-    preview: <SignupBlock />,
-  },
-  {
-    slug: "forgot-password",
-    name: "Forgot password",
-    blurb: "Reset requests and inbox confirmation",
-    preview: <ForgotPasswordBlock />,
-  },
-  {
-    slug: "code-auth",
-    name: "Code authentication",
-    blurb: "Email and SMS verification with resend controls",
-    preview: <CodeAuthBlock channel="email" destination="r•••@example.com" />,
-  },
-  {
-    slug: "update-password",
-    name: "Update password",
-    blurb: "Progressive password change with validation",
-    preview: <UpdatePasswordBlock />,
-  },
-  {
-    slug: "passkey-sign-in",
-    name: "Passkey sign-in",
-    blurb: "Passwordless entry with availability handling",
-    preview: <PasskeySignInBlock available />,
-  },
-  {
-    slug: "passkey-manager",
-    name: "Passkey manager",
-    blurb: "Manage registered devices and credentials",
-    preview: (
-      <PasskeyManagerBlock
-        available
-        passkeys={[{ id: "gallery-laptop", name: "Research laptop" }]}
-      />
-    ),
-  },
-  {
-    slug: "linked-accounts",
-    name: "Linked accounts",
-    blurb: "Manage connected sign-in identities",
-    preview: (
-      <LinkedAccountsBlock
-        identities={[
-          {
-            id: "gallery-github",
-            provider: "github",
-            email: "researcher@example.com",
-          },
-        ]}
-      />
-    ),
-  },
-  {
-    slug: "onboarding",
-    name: "Onboarding",
-    blurb: "Guided profile setup with step validation",
-    preview: <OnboardingBlock autoFocus={false} />,
-  },
-  {
-    slug: "auth-flow",
-    name: "Auth flow",
-    blurb: "Connected login, verification and account setup",
-    preview: <AuthFlowBlock flowId="docs-blocks-gallery" />,
-  },
-  {
-    slug: "profile-card",
-    name: "Profile card",
-    blurb: "Account identity and grouped profile actions",
-    preview: (
-      <ProfileCardBlock
-        user={{ name: "Jenny Hamilton", username: "@jennycodes" }}
-        defaultVariant="expanded"
-        sound={false}
-      />
-    ),
-  },
-  {
-    slug: "navbar",
-    name: "Navbar · planned",
-    blurb: "Application navigation with branding and a user menu",
-    preview: (
-      <div className="gap-3 py-12 flex flex-col items-center text-center">
-        <span className="px-3 py-1 text-xs rounded-full border text-muted-foreground">
-          Planned
-        </span>
-        <p className="text-sm text-muted-foreground">
-          This block is not available yet.
-        </p>
-      </div>
-    ),
-  },
-  {
-    slug: "shell",
-    name: "Shell",
-    blurb: "Application frame with collapsible workspace panels",
-    wide: true,
-    preview: (
-      <ShellLayout
-        variant="web"
-        className="h-[24rem] w-full"
-        header="Corpus workspace"
-        panels={{
-          left: {
-            id: "gallery-library",
-            name: "Library",
-            side: "left",
-            open: true,
-            defaultOpen: true,
-            component: (
-              <div className="space-y-4 p-4 text-sm">
-                <p>Library</p>
-                <p>Iliad</p>
-                <p>Odyssey</p>
-                <p>Hesiod</p>
-              </div>
-            ),
-          },
-        }}
-      >
-        <div className="space-y-3 p-6">
-          <h3 className="font-semibold">Iliad · Book I</h3>
-          <p className="text-sm text-muted-foreground">
-            Sing, goddess, the anger of Peleus’ son Achilles.
-          </p>
-        </div>
-      </ShellLayout>
-    ),
-  },
-  {
-    slug: "scaffold",
-    name: "Scaffold",
-    blurb: "Composable workspace panels and inspector",
-    wide: true,
-    preview: (
-      <Scaffold.Root className="h-[24rem] w-full">
-        <Scaffold.Main>
-          <Scaffold.Canvas>
-            <Scaffold.Panel>
-              <div className="space-y-3 p-6">
-                <h3 className="font-semibold">Corpus workspace</h3>
-                <p className="text-sm text-muted-foreground">
-                  Read, annotate and compare passages.
-                </p>
-              </div>
-            </Scaffold.Panel>
-          </Scaffold.Canvas>
-        </Scaffold.Main>
-      </Scaffold.Root>
-    ),
-  },
-  {
-    slug: "chat",
-    name: "Chat",
-    blurb: "Scoped corpus conversations and generated answers",
-    wide: true,
-    preview: (
-      <AiPanel
-        className="h-[28rem] w-full"
-        headerTitle="Context Fabric"
-        scope={{ kind: "passage", label: "Iliad 1.1", range: "¶1–¶2" }}
-        thread={
-          <p className="p-4 text-sm text-muted-foreground">
-            Ask a question about this passage to begin your research.
-          </p>
-        }
-      />
-    ),
-  },
-]
-
-/** The same live gallery tiles used by atoms and composed components. */
-export function BlocksGallery() {
-  return (
-    <div className="not-prose gap-4 md:grid-cols-4 grid grid-cols-1">
-      {blocks.map((block, index) => (
-        <GalleryTile
-          key={block.slug}
-          index={index}
-          href={`/blocks/${block.slug}`}
-          name={block.name}
-          blurb={block.blurb}
-          className={
-            block.wide ? "min-w-0 md:col-span-4" : "min-w-0 md:col-span-2"
-          }
-          stageClassName="min-h-64 px-3 py-6 sm:px-6"
-        >
-          <div className="min-w-0 flex w-full items-center justify-center">
-            {block.preview}
-          </div>
-        </GalleryTile>
-      ))}
-    </div>
-  )
-}

package/src/components/docs/browser.tsx

@@ -1,87 +0,0 @@
-"use client"
-
-import { Globe } from "lucide-react"
-import { cn } from "@/lib/utils"
-import type { ReactNode } from "react"
-import type { ClassNameValue } from "cn"
-
-export type TTitleStyleType = "hidden" | "titlebar" | "expanded"
-
-export interface IBrowserProps {
-  url?: string
-  title?: string
-  className?: string
-  children: ReactNode
-  titleStyle: TTitleStyleType
-}
-
-const titleBarStyle = (
-  style: TTitleStyleType,
-  component: "title" | "frame"
-): ClassNameValue => {
-  const titleBarClassName: Record<TTitleStyleType, ClassNameValue> = {
-    titlebar: "relative",
-    hidden: "top-0 left-0 absolute",
-    expanded: "relative",
-  }
-
-  const bodyClassName: Record<TTitleStyleType, ClassNameValue> = {
-    titlebar: "relative",
-    hidden: "",
-    expanded: "relative",
-  }
-
-  return component == "title" ? titleBarClassName[style] : bodyClassName[style]
-}
-
-export function BrowserFrame({
-  url,
-  title,
-  className,
-  titleStyle,
-  children,
-}: IBrowserProps) {
-  return (
-    <div
-      className={cn(
-        "relative flex size-full items-center justify-center",
-        className
-      )}
-    >
-      <div className="relative flex min-h-32 w-full flex-col overflow-hidden rounded-lg border border-border bg-secondary shadow-lg">
-        <div
-          id="title-bar"
-          className={cn(
-            "z-20 flex flex-1 items-center gap-2 px-4 py-3",
-            titleBarStyle(titleStyle, "title")
-          )}
-        >
-          <div className="flex items-center gap-2" aria-hidden="true">
-            <span className="size-3 cursor-pointer rounded-full bg-rose-500 shadow-md outline outline-rose-800" />
-            <span className="size-3 cursor-pointer rounded-full bg-amber-500 shadow-md outline outline-amber-800" />
-            <span className="size-3 cursor-pointer rounded-full bg-emerald-500 shadow-md outline outline-emerald-800" />
-          </div>
-          {url && !title && (
-            <div className="flex max-w-1/3 flex-1 items-center gap-1.5 rounded-sm border border-border bg-card p-1">
-              <Globe
-                className="size-3 shrink-0 text-muted-foreground"
-                aria-hidden="true"
-              />
-              <span className="truncate font-mono text-xs text-muted-foreground">
-                {url}
-              </span>
-            </div>
-          )}
-          {title && !url && (
-            <div className="flex w-full flex-1 justify-center select-none">
-              <span className="ml-2 text-sm text-foreground">{title}</span>
-            </div>
-          )}
-        </div>
-        <div className={cn("flex flex-1", titleBarStyle(titleStyle, "frame"))}>
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/docs/code-block.tsx

@@ -1,10 +0,0 @@
-"use client"
-
-/** Plain code snippet shell — syntax highlighting can be layered in later. */
-export function CodeBlock({ code }: { code: string }) {
-  return (
-    <pre className="overflow-x-auto rounded-lg border bg-muted/50 p-4 font-mono text-xs leading-relaxed">
-      <code>{code}</code>
-    </pre>
-  )
-}