@exegia/corpora-ui 0.29.0 → 1.0.0

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

@@ -0,0 +1,286 @@
+"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
+
+function Tile({
+  href,
+  name,
+  blurb,
+  className,
+  stageClassName,
+  children,
+  index,
+}: {
+  href: string
+  name: string
+  blurb: string
+  className?: string
+  stageClassName?: string
+  children: React.ReactNode
+  index: number
+}) {
+  return (
+    <motion.a
+      href={href}
+      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]",
+        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)]",
+          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"
+        />
+        <div className="relative w-full">{children}</div>
+      </div>
+      <div className="flex items-center gap-3 px-4 pt-3 pb-2.5">
+        <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>
+        <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">
+          <ArrowUpRight className="size-3.5" strokeWidth={1.5} />
+        </span>
+      </div>
+    </motion.a>
+  )
+}
+
+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 grid grid-cols-1 gap-4 md:auto-rows-[minmax(11rem,auto)] md:grid-cols-4">
+      <Tile
+        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="mx-auto flex w-full max-w-xs flex-col gap-4">
+          <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>
+      </Tile>
+
+      <Tile
+        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">
+          <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>
+
+      <Tile
+        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">
+          <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>
+      </Tile>
+
+      <Tile
+        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…"
+          >
+            Moby-Dick 1:1
+          </Reference>
+          <Reference>Iliad 1.12</Reference>
+        </div>
+      </Tile>
+
+      <Tile
+        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>
+      </Tile>
+
+      <Tile
+        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">
+          <FileBadgeTei size={44} />
+          <FileBadgeXml size={44} />
+          <FileBadgePdf size={44} />
+          <FileBadgeCorpus size={44} />
+        </div>
+      </Tile>
+
+      <Tile
+        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="w-full max-w-64">
+            <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>
+      </Tile>
+
+      <Tile
+        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">
+            <Checkbox defaultChecked /> Apparatus
+          </Label>
+          <Label className="flex items-center gap-2">
+            <Checkbox /> Variants
+          </Label>
+        </div>
+      </Tile>
+
+      <Tile
+        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">
+          <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>
+    </div>
+  )
+}
+
+export default AtomsGallery

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

@@ -1,3 +1,5 @@
+"use client"
+
 /** Plain code snippet shell — syntax highlighting can be layered in later. */
 export function CodeBlock({ code }: { code: string }) {
   return (

package/src/components/docs/demo-controls.tsx

@@ -1,21 +1,19 @@
+"use client"
+
 import type * as React from "react"
 
+import { Card, CardContent } from "@/components/ui/card"
+import { Field, FieldLabel } from "@/components/ui/field"
+import { Switch } from "@/components/ui/switch"
 import {
   Select,
+  SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-  SelectContent,
 } from "@/components/ui/select"
-import { Field, FieldLabel } from "@/components/ui/field"
-import { Card, CardContent } from "@/components/ui/card"
-import { Switch } from "../ui/switch"
-
-/**
- * Lightweight playground controls for registry demos — docs-only, never
- * part of the published library.
- */
 
+/** Lightweight controls for docs demos; never part of the npm surface. */
 export function DemoSelect<T extends string>({
   label,
   value,
@@ -27,11 +25,16 @@ export function DemoSelect<T extends string>({
   options: readonly T[]
   onChange: (value: T) => void
 }) {
-  const items = options.map((option) => ({ label: option, value: option }))
+  const items = options.map((option) => ({
+    label: option,
+    value: option,
+  }))
 
   return (
     <Field className="ml-0 flex w-full flex-1 flex-row items-center justify-between text-muted-foreground">
-      {label && <FieldLabel className="ml-0 capitalize">{label}</FieldLabel>}
+      {label ? (
+        <FieldLabel className="ml-0 capitalize">{label}</FieldLabel>
+      ) : null}
       <Select
         items={items}
         onValueChange={(next) => onChange(next as T)}
@@ -55,11 +58,7 @@ export function DemoSelect<T extends string>({
   )
 }
 
-/**
- * Stand-in brand mark for demos of the auth blocks' `logo` slot. Deliberately
- * unbranded — it exists to show the slot's spacing and default sizing, not to
- * represent a real product.
- */
+/** Stand-in brand mark for demos of a block's logo slot. */
 export function DemoBrandMark() {
   return (
     <svg
@@ -112,7 +111,7 @@ export function DemoToggle({
   )
 }
 
-/** Standard layout: centered preview canvas above a wrapping controls row. */
+/** Standard layout: centered preview canvas above a controls row. */
 export function DemoStage({
   controls,
   children,
@@ -124,16 +123,17 @@ export function DemoStage({
 }) {
   return (
     <div className="relative flex w-full flex-col items-center">
-      {controls && (
+      {controls ? (
         <Card className="absolute top-3 right-3 z-20 min-w-48 rounded-lg shadow-lg">
           <CardContent className="flex flex-col items-start gap-2">
             {controls}
           </CardContent>
         </Card>
-      )}
+      ) : null}
       <div
         className={
-          canvasClassName ?? "flex min-h-24 w-full items-center justify-center"
+          canvasClassName ??
+          "flex min-h-24 w-full items-center justify-center"
         }
       >
         {children}

package/src/components/docs/hero.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+import * as React from "react"
+import { motion, useReducedMotion } from "motion/react"
+import { Search } from "lucide-react"
+
+import { Bubble } from "@/components/atoms"
+import AI from "@/components/composed/ai"
+import {
+  Flowchart,
+  RecommendationCard,
+  type StepNode,
+} from "@/components/composed/chat"
+import { Verse, VerseNote, VerseSpan } from "@/components/composed/verse"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { Kbd } from "@/components/ui/kbd"
+import { cn } from "@/lib/utils"
+
+/** Docs landing hero: centered copy with live atoms floating behind it.
+ *  Never part of the npm surface. */
+
+const EASE = [0.32, 0.72, 0, 1] as const
+
+const FLOW_NODES: StepNode[] = [
+  {
+    id: "corpus",
+    row: 0,
+    x: 0.5,
+    w: 220,
+    kind: { label: "Corpus", hue: "var(--tag-purple-text)" },
+    hue: "var(--tag-purple-text)",
+    title: "Iliad",
+    caption: "Homer · Greek epic corpus",
+  },
+  {
+    id: "passage",
+    row: 1,
+    x: 0.5,
+    w: 240,
+    kind: { label: "Passage", hue: "var(--tag-amber-text)" },
+    hue: "var(--tag-amber-text)",
+    title: "Book 1 · line 1",
+    caption: "Opening invocation",
+  },
+  {
+    id: "text-node",
+    row: 2,
+    x: 0.5,
+    w: 260,
+    kind: { label: "Text node", hue: "var(--tag-green-text)" },
+    hue: "var(--tag-green-text)",
+    title: "μῆνιν ἄειδε, θεά",
+    caption: "node l-1 · 18 characters",
+  },
+]
+const FLOW_EDGES = [
+  { id: "a", source: "corpus", target: "passage" },
+  { id: "b", source: "passage", target: "text-node" },
+]
+
+function Note({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="grid gap-1">
+      <p className="text-[8px] font-medium tracking-[0.14em] text-muted-foreground uppercase">
+        {label}
+      </p>
+      <p className="text-sm text-foreground">{children}</p>
+    </div>
+  )
+}
+
+function Float({
+  className,
+  delay = 0,
+  children,
+}: {
+  className: string
+  delay?: number
+  children: React.ReactNode
+}) {
+  const reduced = useReducedMotion()
+  return (
+    <motion.div
+      aria-hidden
+      initial={{ opacity: 0, y: 24, filter: "blur(8px)" }}
+      animate={{
+        opacity: 1,
+        filter: "blur(0px)",
+        y: reduced ? 0 : [0, -10, 0],
+      }}
+      transition={{
+        opacity: { duration: 1, delay, ease: EASE },
+        filter: { duration: 1, delay, ease: EASE },
+        y: reduced
+          ? { duration: 1, delay, ease: EASE }
+          : { duration: 7 + delay * 4, delay, repeat: Infinity, ease: "easeInOut" },
+      }}
+      className={cn(
+        "pointer-events-none absolute hidden select-none rounded-lg bg-background/80 p-3 shadow-md ring-1 ring-black/[0.06] backdrop-blur-sm md:block dark:bg-card/80 dark:ring-white/[0.08]",
+        className
+      )}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export function Hero({ children }: { children: React.ReactNode }) {
+  return (
+    <section className="not-prose relative -mx-4 overflow-hidden px-4 py-24 md:py-36">
+      {/* Floating atoms — decorative, fades to the page edges. */}
+      <div
+        aria-hidden
+        className="absolute inset-0 [mask-image:radial-gradient(70%_70%_at_50%_50%,black_30%,transparent_100%)]"
+      >
+        <Float className="top-6 left-[3%] w-72 opacity-80" delay={0.1}>
+          <Verse chapter="1:1" href="#" size="small">
+            In the beginning{" "}
+            <VerseSpan
+              popover={
+                <Note label="Term">
+                  Hebrew <em>bereshit</em> — the opening word of the corpus.
+                </Note>
+              }
+            >
+              God created
+            </VerseSpan>{" "}
+            the heavens and the <VerseSpan>earth</VerseSpan>
+            <VerseNote popover={<Note label="Note a">Some manuscripts differ.</Note>}>
+              a
+            </VerseNote>
+            .
+          </Verse>
+        </Float>
+        <Float className="top-4 right-[3%] w-80 opacity-80" delay={0.3}>
+          <AI.ResearchAnswer
+            kickerSub="Answered from 3 passages · 0.8 s"
+            content="The quarrel opens when Agamemnon refuses Chryses’ ransom. Apollo’s plague follows — the first boundary of the poem (¶12, RC003)."
+            source="Iliad · Homer corpus"
+            date="c. 750 BCE"
+            authors="Homer · M. L. West"
+          />
+        </Float>
+        <Float className="top-[35%] left-[1%] w-[28rem] opacity-70 [&_*]:pointer-events-none" delay={0.5}>
+          <div className="origin-top-left scale-[0.82]">
+            <Flowchart.Root steps={FLOW_NODES} edges={FLOW_EDGES} readOnly />
+          </div>
+        </Float>
+        <Float className="top-[46%] right-[4%] w-60 opacity-60" delay={0.7}>
+          <InputGroup>
+            <InputGroupAddon>
+              <Search strokeWidth={1.5} />
+            </InputGroupAddon>
+            <InputGroupInput placeholder="Search the corpus" readOnly />
+            <InputGroupAddon align="inline-end">
+              <Kbd>⌘K</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+        </Float>
+        <Float className="bottom-2 left-[24%] w-64 opacity-70" delay={0.9}>
+          <Bubble variant="ai" continued>
+            <Bubble.Header>
+              <AI.Avatar />
+            </Bubble.Header>
+            <Bubble.Message>
+              The boundary is valid. Node p-17 has a label mismatch.
+            </Bubble.Message>
+          </Bubble>
+        </Float>
+        <Float className="bottom-4 right-[4%] w-[26rem] opacity-70" delay={1.1}>
+          <RecommendationCard
+            title="Validate the Iliad corpus before the walker runs?"
+            description="Check otype, oslots and section features in"
+            entity={{ name: "Iliad · Homer corpus", initials: "I" }}
+            descriptionSuffix="which takes about"
+            leadTime="2 min"
+            confidence="high"
+          />
+        </Float>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease: EASE }}
+        className="relative mx-auto flex max-w-3xl flex-col items-center gap-6 text-center"
+      >
+        {children}
+      </motion.div>
+    </section>
+  )
+}
+
+export default Hero

package/src/components/docs/mermaid.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { use, useEffect, useId, useState } from "react"
+import { useTheme } from "next-themes"
+
+const cache = new Map<string, Promise<unknown>>()
+
+function cachePromise<T>(key: string, create: () => Promise<T>) {
+  const cached = cache.get(key)
+  if (cached) return cached as Promise<T>
+
+  const promise = create()
+  cache.set(key, promise)
+  return promise
+}
+
+export function Mermaid({ chart }: { chart: string }) {
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => setMounted(true))
+    return () => cancelAnimationFrame(frame)
+  }, [])
+
+  return mounted ? <MermaidContent chart={chart} /> : null
+}
+
+function MermaidContent({ chart }: { chart: string }) {
+  const id = useId()
+  const { resolvedTheme } = useTheme()
+  const { default: mermaid } = use(
+    cachePromise("mermaid", () => import("mermaid"))
+  )
+
+  mermaid.initialize({
+    startOnLoad: false,
+    securityLevel: "strict",
+    fontFamily: "inherit",
+    theme: resolvedTheme === "dark" ? "dark" : "default",
+  })
+
+  const { svg, bindFunctions } = use(
+    cachePromise(`${chart}-${resolvedTheme}`, () => mermaid.render(id, chart))
+  )
+
+  return (
+    <div
+      className="my-6 p-4 flex justify-center overflow-x-auto rounded-lg border bg-card"
+      ref={(container) => {
+        if (container) bindFunctions?.(container)
+      }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  )
+}