@exegia/corpora-ui 3.0.0 → 4.0.0

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

@@ -1,182 +0,0 @@
-"use client"
-
-import AI from "@/components/composed/ai"
-import { PasswordInput } from "@/components/composed/password-input"
-import { SocialProviders } from "@/components/composed/social-providers"
-import {
-  Chart,
-  ContextCards,
-  RecommendationCard,
-} from "@/components/composed/chat"
-import User from "@/components/composed/user"
-import { Verse } from "@/components/composed/verse"
-
-import { GalleryTile } from "./atoms-gallery"
-
-const COVERAGE = [
-  { label: "Iliad", value: 79 },
-  { label: "Odyssey", value: 72 },
-  { label: "Hesiod", value: 61 },
-]
-
-export function ComponentsGallery() {
-  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="/composed/research-answer"
-        name="Research answer"
-        blurb="Grounded answers with source metadata and actions"
-        className="md:col-span-2 md:row-span-2"
-      >
-        <div className="flex justify-center">
-          <AI.ResearchAnswer
-            kickerSub="Answered from 3 passages · 0.8 s"
-            content="Apollo’s plague forces an assembly—the first boundary of the poem."
-            source="Iliad · Homer corpus"
-            date="c. 750 BCE"
-            authors="Homer · M. L. West"
-          />
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={1}
-        href="/composed/password-input"
-        name="Password Input"
-        blurb="Visibility controls and live strength feedback"
-        className="md:col-span-2"
-      >
-        <div className="max-w-sm mx-auto">
-          <PasswordInput
-            aria-label="Example password"
-            defaultValue="Iliad2026"
-            showStrength
-            sound={false}
-          />
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={2}
-        href="/composed/user"
-        name="User"
-        blurb="Identity rows, roles, presence and mentions"
-      >
-        <div className="flex justify-center">
-          <User.Info
-            description="Corpus editor"
-            user={{
-              firstName: "Jenny",
-              lastName: "Hamilton",
-              role: "Editor",
-              status: "online",
-            }}
-            variant="info"
-          />
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={3}
-        href="/composed/social-providers"
-        name="Social Providers"
-        blurb="Provider actions in compact or stacked layouts"
-      >
-        <SocialProviders
-          layout="row"
-          providers={["google", "apple", "github"]}
-        />
-      </GalleryTile>
-
-      <GalleryTile
-        index={4}
-        href="/composed/verse"
-        name="Verse"
-        blurb="Corpus text with references and inline annotations"
-        className="md:col-span-2"
-      >
-        <div className="max-w-lg mx-auto text-center">
-          <Verse chapter="1:1" href="/composed/verse" size="large">
-            Sing, goddess, the anger of Peleus&apos; son Achilles.
-          </Verse>
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={5}
-        href="/composed/chart"
-        name="Chart"
-        blurb="Token-aware corpus data visualizations"
-        className="md:col-span-2"
-      >
-        <div className="flex justify-center">
-          <Chart
-            className="w-full max-w-[360px]"
-            type="bar"
-            title="Lemma coverage"
-            subtitle="Resolved tokens"
-            data={COVERAGE}
-            series={[
-              {
-                key: "value",
-                label: "Coverage",
-                format: (value) => `${value}%`,
-              },
-            ]}
-            plotHeight={100}
-          />
-        </div>
-      </GalleryTile>
-
-      <GalleryTile
-        index={6}
-        href="/composed/recommendation-card"
-        name="Recommendation card"
-        blurb="Human-in-the-loop review with confidence signals"
-        className="md:col-span-2 md:row-span-2"
-        stageClassName="items-start"
-      >
-        <RecommendationCard
-          acceptLabel="Apply fix"
-          confidence="high"
-          description="Change label from paragraph to p on"
-          entity={{ name: "node p-17", initials: "P" }}
-          leadTime="2 min"
-          title="Fix the label mismatch?"
-        />
-      </GalleryTile>
-
-      <GalleryTile
-        index={7}
-        href="/composed/context-cards"
-        name="Context cards"
-        blurb="Retrieved passages with compact source metadata"
-        className="md:col-span-2 md:row-span-2"
-        stageClassName="items-start"
-      >
-        <div className="flex justify-center">
-          <ContextCards
-            count={32}
-            cards={[
-              {
-                title: "Iliad 1.1",
-                meta: "290 characters",
-                snippet: "Sing, goddess, the anger of Achilles.",
-                file: { name: "iliad.txt", type: "TXT" },
-              },
-              {
-                title: "Iliad 1.12",
-                meta: "184 characters",
-                snippet: "Apollo came down from Olympus in anger.",
-                file: { name: "iliad.xml", type: "XML" },
-              },
-            ]}
-          />
-        </div>
-      </GalleryTile>
-    </div>
-  )
-}
-
-export default ComponentsGallery

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

@@ -1,142 +0,0 @@
-"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,
-} from "@/components/ui/select"
-
-/** Lightweight controls for docs demos; never part of the npm surface. */
-export function DemoSelect<T extends string>({
-  label,
-  value,
-  options,
-  onChange,
-}: {
-  label?: string
-  value: T
-  options: readonly T[]
-  onChange: (value: T) => void
-}) {
-  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>
-      ) : null}
-      <Select
-        items={items}
-        onValueChange={(next) => onChange(next as T)}
-        value={value}
-      >
-        <SelectTrigger
-          className="h-7 min-w-0 text-xs rounded-sm capitalize"
-          size="sm"
-        >
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {items.map((item) => (
-            <SelectItem key={item.value} value={item.value}>
-              {item.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </Field>
-  )
-}
-
-/** Stand-in brand mark for demos of a block's logo slot. */
-export function DemoBrandMark() {
-  return (
-    <svg
-      aria-label="Example logo"
-      role="img"
-      viewBox="0 0 32 32"
-      className="text-foreground"
-    >
-      <rect
-        x="2"
-        y="2"
-        width="28"
-        height="28"
-        rx="9"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2.5"
-      />
-      <path
-        d="M11 20.5V11.5h4.5a3.5 3.5 0 0 1 0 7H11"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  )
-}
-
-export function DemoToggle({
-  label,
-  checked,
-  onChange,
-}: {
-  label: string
-  checked: boolean
-  onChange: (checked: boolean) => void
-}) {
-  return (
-    <Field className="ml-0 w-full">
-      <FieldLabel className="ml-0 w-full justify-between capitalize">
-        {label}
-        <Switch
-          checked={checked}
-          onCheckedChange={(value) => onChange(value)}
-        />
-      </FieldLabel>
-    </Field>
-  )
-}
-
-/** Standard layout for live examples. */
-export function DemoStage({
-  controls,
-  children,
-  canvasClassName,
-}: {
-  controls?: React.ReactNode
-  children: React.ReactNode
-  canvasClassName?: string
-}) {
-  return (
-    <div className="not-prose relative flex w-full flex-col items-center">
-      {controls ? (
-        <Card className="top-3 right-3 min-w-48 shadow-lg absolute z-20 rounded-lg">
-          <CardContent className="gap-2 flex flex-col items-start">
-            {controls}
-          </CardContent>
-        </Card>
-      ) : null}
-      <div
-        className={
-          canvasClassName ?? "min-h-24 flex w-full items-center justify-center"
-        }
-      >
-        {children}
-      </div>
-    </div>
-  )
-}

package/src/components/docs/hero.tsx

@@ -1,197 +0,0 @@
-"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 TStepNode,
-} 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: TStepNode[] = [
-  {
-    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" }}
-            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

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

package/src/components/icons/README.md

@@ -1,91 +0,0 @@
-# Corpora file icons
-
-Fourteen React SVG components covering seven file formats in two visual families.
-Every icon carries **both** a light and a dark artwork layer and picks one with
-Tailwind's `dark` variant — no props, no context, no JavaScript.
-
-Generated from `exegia-prod.sketch` → page `icons`, then simplified (dead defs
-removed, light/dark-identical defs shared, ids stripped). Do not hand-edit the
-`.tsx` files; regenerate them from Sketch instead (see
-[Regenerating](#regenerating)).
-
-## Usage
-
-```tsx
-import { FileBadgeTei, FileWordmarkPdf } from '@/components/icons';
-
-<FileBadgeTei />                        // 64×64, follows the app's dark class
-<FileBadgeTei size={128} />             // any size
-<FileWordmarkPdf title={null} />        // decorative: aria-hidden, no accessible name
-<FileBadgeTei title="TEI source file" /> // custom accessible name
-<FileBadgeTei className="shrink-0" />   // merged with the internal class
-```
-
-All remaining props are forwarded to the root `<svg>`.
-
-## Components
-
-| Format | Badge | Wordmark |
-| --- | --- | --- |
-| TEI | `FileBadgeTei` | `FileWordmarkTei` |
-| XML | `FileBadgeXml` | `FileWordmarkXml` |
-| TXT | `FileBadgeTxt` | `FileWordmarkTxt` |
-| TF | `FileBadgeTf` | `FileWordmarkTf` |
-| CFM | `FileBadgeCfm` | `FileWordmarkCfm` |
-| PDF | `FileBadgePdf` | `FileWordmarkPdf` |
-| Corpus | `FileBadgeCorpus` | `FileWordmarkCorpus` |
-
-**Badge** — colour-coded pill overlapping the left edge of the sheet.
-**Wordmark** — `.EXT` set along the bottom of the sheet.
-
-## Theming
-
-Each icon renders two `<g data-theme-layer>` groups and shows exactly one via
-Tailwind's `dark` variant: the light layer is `dark:hidden`, the dark layer
-`hidden dark:inline`. Whatever drives `dark:` in the app drives the icons —
-here that is `@custom-variant dark (&:is(.dark *))` in `index.css`, so the
-icons follow the `.dark` class exactly like every other component, with no
-inline stylesheet and no media query of their own.
-
-To force a theme on one subtree, scope the class:
-
-```tsx
-<div className="dark">
-  <FileBadgeTei />   {/* dark artwork regardless of the app theme */}
-</div>
-```
-
-Because the switch is pure CSS it is SSR-safe and cannot flash the wrong theme
-on hydration. The `data-theme-layer` attributes stay on the groups as styling
-and test hooks.
-
-## Notes
-
-- **Text is outlined.** Labels are vector paths, not live `<text>`, so the
-  icons do not depend on *TikTok Sans Display* being installed.
-- **IDs are namespaced** per component and per theme layer (`tei-badge-l-…`),
-  so gradients and filters never collide when several icons share a page.
-  Only referenced defs carry ids; decorative group ids were stripped.
-- **Both layers ship in every component,** but defs that are identical in
-  both themes (sheet geometry, badge plates, label glyphs) exist once and are
-  referenced from both layers — a `<defs>` entry resolves regardless of which
-  layer it sits in, hidden or not. Theme-specific gradients and filters stay
-  per layer, so the two themes remain pixel-faithful to Sketch.
-- **Filter regions were widened** to the SVG default (`-50% / 200%`). Sketch
-  exports tight regions such as `height="76.2%"` that clip real geometry in
-  spec-compliant renderers — the third sheet line disappears without this.
-
-## Regenerating
-
-1. In Sketch, edit the symbols on the `icons` page of `exegia-prod`.
-2. Re-export each symbol to SVG, and export each label inside an exact-size
-   bounding box to PDF (the PDF round-trip is what outlines the type).
-3. Run the generator, which splices the outlined labels into the SVG, namespaces
-   the IDs, widens the filter regions and emits the `.tsx` files.
-4. Run `bun scripts/simplify-icons.mjs` (from `react/`), which swaps the layer
-   switching onto Tailwind's `dark` variant, drops dead and duplicated defs,
-   strips unreferenced ids and default-value attributes, and verifies that
-   every remaining `url(#…)` / `href="#…"` reference resolves.
-
-Colours are driven by the `file/*` swatches in the Sketch document, so a palette
-change there propagates to every symbol before export.