@exegia/corpora-ui 2.0.0 → 3.1.0

package/src/components/composed/chat/chart.tsx

@@ -1,401 +0,0 @@
-"use client"
-
-import { useReducedMotion } from "motion/react"
-import type * as React from "react"
-import {
-  Area,
-  AreaChart,
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Cell,
-  Line,
-  LineChart,
-  Pie,
-  PieChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-} from "recharts"
-import { cn } from "@/lib/utils"
-import {
-  Card,
-  CardFrame,
-  CardFrameHeader,
-  CardPanel,
-} from "@/components/ui/card"
-import { Dot, LegendItem, Pill, type TDotTone } from "@/components/ui/chat"
-import { Reference } from "@/components/atoms/reference"
-
-export type TChartType = "pie" | "area" | "line" | "bar"
-
-export interface IChartSeries {
-  /** Key into each data row. */
-  key: string
-  label: React.ReactNode
-  /** Defaults to `var(--chart-series-N)` by position. */
-  color?: string
-  /** Renders a value in the legend and tooltip (`v => \`${v}%\``). */
-  format?: (value: number) => React.ReactNode
-}
-
-export type TChartDatum = { label: string; [key: string]: string | number }
-
-export interface IChartProps extends Omit<
-  React.ComponentPropsWithoutRef<"div">,
-  "title"
-> {
-  type: TChartType
-  title?: React.ReactNode
-  subtitle?: React.ReactNode
-  /** Pill text; defaults to the capitalised type. */
-  badge?: React.ReactNode
-  /** The passage or Strong's entry behind the data. Replaces the type badge. */
-  reference?: React.ComponentProps<typeof Reference>
-  data: TChartDatum[]
-  /** Series to plot; pie uses the first one. */
-  series: IChartSeries[]
-  /** Pie only: big number and caption in the donut's centre. */
-  center?: { value: React.ReactNode; label?: React.ReactNode }
-  /** Drop the title row (InsightCards embeds a bare plot). */
-  headerless?: boolean
-  /** Plot height in px; the card is 244 tall with the header. */
-  plotHeight?: number
-}
-
-const TYPE_LABEL: Record<TChartType, string> = {
-  pie: "Pie",
-  area: "Area",
-  line: "Line",
-  bar: "Bar",
-}
-
-const seriesColor = (s: IChartSeries, i: number) =>
-  s.color ?? `var(--chart-series-${(i % 5) + 1})`
-const seriesTone = (i: number) => `series-${(i % 5) + 1}` as TDotTone
-
-const fmt = (s: IChartSeries | undefined, v: unknown): React.ReactNode =>
-  typeof v === "number" && s?.format ? s.format(v) : String(v)
-
-interface ITooltipRow {
-  name?: unknown
-  value?: unknown
-  color?: string
-  payload?: TChartDatum
-}
-
-/** Hover card: category label, then one dot · series · value row per series. */
-function ChartTooltip({
-  active,
-  payload,
-  label,
-  series,
-}: {
-  active?: boolean
-  payload?: ITooltipRow[]
-  label?: unknown
-  series: IChartSeries[]
-}): React.ReactElement | null {
-  if (!active || !payload?.length) return null
-  // Pie rows already carry the category as their name, so no heading there.
-  const heading =
-    series.length > 1 || label !== undefined
-      ? (label ?? payload[0].payload?.label)
-      : undefined
-  return (
-    <div
-      data-slot="chart-tooltip"
-      className="min-w-28 px-2.5 py-2 shadow-md rounded-md border border-border-default bg-surface-card"
-    >
-      {heading !== undefined ? (
-        <div className="mb-1.5 font-medium leading-3 text-[11px] text-text-secondary">
-          {String(heading)}
-        </div>
-      ) : null}
-      <ul className="gap-1 flex flex-col">
-        {payload.map((row, i) => {
-          const si = Math.max(
-            0,
-            series.findIndex((s) => s.key === row.name)
-          )
-          const s = series[si]
-          return (
-            <li
-              key={i}
-              className="gap-2 leading-3 flex items-center text-[11px]"
-            >
-              <Dot tone={seriesTone(series.length > 1 ? si : i)} />
-              <span className="truncate text-text-secondary">
-                {series.length > 1
-                  ? s?.label
-                  : (row.payload?.label ?? s?.label)}
-              </span>
-              <span className="pl-3 font-medium ml-auto text-text-primary">
-                {fmt(s, row.value)}
-              </span>
-            </li>
-          )
-        })}
-      </ul>
-    </div>
-  )
-}
-
-const AXIS = {
-  tick: { fontSize: 11, fill: "var(--text-secondary)" },
-  axisLine: false,
-  tickLine: false,
-  dataKey: "label",
-  padding: { left: 12, right: 12 },
-  interval: 0 as const,
-}
-
-/**
- * Compact chart card: title, subtitle, reference or type pill, plot and legend.
- * Series colours are the `--chart-series-*` tokens, grid is `--chart-grid`.
- *
- * @sketch "Component / Chart / {Pie, Area, Line, Bar}"
- */
-export function Chart({
-  type,
-  title,
-  subtitle,
-  badge,
-  reference,
-  data,
-  series,
-  center,
-  headerless = false,
-  plotHeight,
-  className,
-  ...props
-}: IChartProps): React.ReactElement {
-  const height = plotHeight ?? (type === "pie" ? 140 : 150)
-  const empty = data.length === 0 || series.length === 0
-  const reduceMotion = useReducedMotion()
-  const anim = {
-    isAnimationActive: !reduceMotion,
-    animationDuration: 700,
-    animationEasing: "ease-out" as const,
-  }
-  const tooltip = (
-    <Tooltip
-      content={<ChartTooltip series={series} />}
-      cursor={{
-        stroke: "var(--chart-grid)",
-        fill: "var(--chart-grid)",
-        fillOpacity: 0.4,
-      }}
-      isAnimationActive={!reduceMotion}
-      animationDuration={150}
-    />
-  )
-
-  const plot = (
-    <>
-      {type === "pie" ? (
-        <div className="gap-6 flex flex-wrap items-center justify-center">
-          <div className="relative shrink-0" style={{ width: height, height }}>
-            {empty ? null : (
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
-                  {tooltip}
-                  <Pie
-                    data={data}
-                    dataKey={series[0].key}
-                    nameKey="label"
-                    innerRadius="66%"
-                    outerRadius="100%"
-                    paddingAngle={2}
-                    stroke="none"
-                    {...anim}
-                  >
-                    {data.map((_, i) => (
-                      <Cell
-                        key={i}
-                        fill={`var(--chart-series-${(i % 5) + 1})`}
-                        className="transition-opacity duration-200 hover:opacity-80"
-                      />
-                    ))}
-                  </Pie>
-                </PieChart>
-              </ResponsiveContainer>
-            )}
-            {center ? (
-              <div className="inset-0 pointer-events-none absolute flex flex-col items-center justify-center">
-                <span className="font-semibold leading-5 text-[17px] text-text-primary">
-                  {center.value}
-                </span>
-                {center.label ? (
-                  <span className="leading-3 text-[11px] text-text-secondary">
-                    {center.label}
-                  </span>
-                ) : null}
-              </div>
-            ) : null}
-          </div>
-          {empty ? null : (
-            <ul className="min-w-24 gap-3.5 flex flex-1 flex-col">
-              {data.map((d, i) => (
-                <li key={d.label} className="flex">
-                  <LegendItem
-                    tone={seriesTone(i)}
-                    value={fmt(series[0], d[series[0].key])}
-                    className="w-full"
-                  >
-                    {d.label}
-                  </LegendItem>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
-      ) : (
-        <>
-          <div style={{ height }} className="w-full">
-            {empty ? null : (
-              <ResponsiveContainer width="100%" height="100%">
-                {type === "bar" ? (
-                  <BarChart
-                    data={data}
-                    margin={{ top: 4, right: 4, bottom: 0, left: 4 }}
-                    barCategoryGap="30%"
-                  >
-                    <CartesianGrid
-                      vertical={false}
-                      stroke="var(--chart-grid)"
-                    />
-                    <XAxis {...AXIS} />
-                    {tooltip}
-                    {series.map((s, i) => (
-                      <Bar
-                        key={s.key}
-                        dataKey={s.key}
-                        fill={seriesColor(s, i)}
-                        radius={[4, 4, 0, 0]}
-                        {...anim}
-                      />
-                    ))}
-                  </BarChart>
-                ) : type === "line" ? (
-                  <LineChart
-                    data={data}
-                    margin={{ top: 4, right: 8, bottom: 0, left: 8 }}
-                  >
-                    <CartesianGrid
-                      vertical={false}
-                      stroke="var(--chart-grid)"
-                    />
-                    <XAxis {...AXIS} />
-                    {tooltip}
-                    {series.map((s, i) => (
-                      <Line
-                        key={s.key}
-                        type="monotone"
-                        dataKey={s.key}
-                        stroke={seriesColor(s, i)}
-                        strokeWidth={2}
-                        dot={{
-                          r: 3,
-                          strokeWidth: 2,
-                          fill: "var(--surface-card)",
-                        }}
-                        activeDot={{ r: 5, strokeWidth: 0 }}
-                        {...anim}
-                      />
-                    ))}
-                  </LineChart>
-                ) : (
-                  <AreaChart
-                    data={data}
-                    margin={{ top: 4, right: 8, bottom: 0, left: 8 }}
-                  >
-                    <CartesianGrid
-                      vertical={false}
-                      stroke="var(--chart-grid)"
-                    />
-                    <XAxis {...AXIS} />
-                    {tooltip}
-                    {series.map((s, i) => (
-                      <Area
-                        key={s.key}
-                        type="monotone"
-                        dataKey={s.key}
-                        stroke={seriesColor(s, i)}
-                        strokeWidth={2}
-                        fill={
-                          i === 0 ? "var(--chart-area-fill)" : seriesColor(s, i)
-                        }
-                        fillOpacity={1}
-                        activeDot={{ r: 5, strokeWidth: 0 }}
-                        {...anim}
-                      />
-                    ))}
-                  </AreaChart>
-                )}
-              </ResponsiveContainer>
-            )}
-          </div>
-          {empty ? null : (
-            <div className="gap-4 flex flex-wrap">
-              {series.map((s, i) => (
-                <LegendItem key={s.key} tone={seriesTone(i)}>
-                  {s.label}
-                </LegendItem>
-              ))}
-            </div>
-          )}
-        </>
-      )}
-    </>
-  )
-
-  // Embedded (InsightCards) plots stay bare; a titled chart is a framed card.
-  if (headerless) {
-    return (
-      <div
-        data-slot="chart"
-        data-type={type}
-        className={cn("w-80 gap-2 flex max-w-full flex-col", className)}
-        {...props}
-      >
-        {plot}
-      </div>
-    )
-  }
-  return (
-    <CardFrame
-      data-slot="chart"
-      data-type={type}
-      className={cn(
-        "w-80 max-w-full [--frame-radius:var(--radius-md)]",
-        className
-      )}
-      {...props}
-    >
-      <CardFrameHeader className="gap-x-3 gap-y-2 px-3.5 py-3 flex flex-row flex-wrap items-start justify-between">
-        <div className="min-w-0 basis-36 gap-0.5 flex flex-1 flex-col">
-          <span className="font-semibold leading-4 text-[13px] text-text-primary">
-            {title}
-          </span>
-          {subtitle ? (
-            <span className="leading-3 text-[11px] text-text-secondary">
-              {subtitle}
-            </span>
-          ) : null}
-        </div>
-        {reference ? (
-          <Reference
-            {...reference}
-            className={cn("max-w-full shrink-0", reference.className)}
-          />
-        ) : (
-          <Pill>{badge ?? TYPE_LABEL[type]}</Pill>
-        )}
-      </CardFrameHeader>
-      <Card>
-        <CardPanel className="gap-3 p-3.5 flex flex-col">{plot}</CardPanel>
-      </Card>
-    </CardFrame>
-  )
-}

package/src/components/composed/chat/code-block.tsx

@@ -1,123 +0,0 @@
-"use client"
-
-import { Copy, FileCode } from "lucide-react"
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import { Card, CardFrame, CardFrameHeader } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { SegmentedToggle } from "@/components/ui/chat"
-
-export interface ICodeDiffLine {
-  type?: "add" | "remove" | "context"
-  text: string
-}
-
-export interface ICodeBlockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onCopy"> {
-  filename?: React.ReactNode
-  code: string
-  /** Optional diff view; when absent the toggle is hidden. */
-  diff?: ICodeDiffLine[]
-  view?: "code" | "diff"
-  defaultView?: "code" | "diff"
-  onViewChange?: (view: "code" | "diff") => void
-  onCopy?: (code: string) => void
-  /** Extra keywords for the tokenizer. */
-  keywords?: string[]
-}
-
-const KEYWORDS = new Set(["export", "import", "from", "async", "await", "function", "const", "let", "var", "return", "if", "else", "null", "true", "false", "new", "class", "type", "interface"])
-function isIdentifierStart(char: string): boolean {
-  const code = char.charCodeAt(0)
-  return char === "$" || char === "_" || (code >= 65 && code <= 90) || (code >= 97 && code <= 122)
-}
-
-function isIdentifierPart(char: string): boolean {
-  const code = char.charCodeAt(0)
-  return isIdentifierStart(char) || (code >= 48 && code <= 57)
-}
-
-/** Minimal highlighter: string literals and keywords only, as in the design. */
-export function tokenize(line: string, keywords: ReadonlySet<string>): React.ReactNode[] {
-  const out: React.ReactNode[] = []
-  let i = 0
-  while (i < line.length) {
-    const start = i
-    const quote = line[i]
-
-    if (quote === '"' || quote === "'" || quote === "`") {
-      for (i++; i < line.length; i++) {
-        if (line[i] === "\\") i++
-        else if (line[i] === quote) {
-          i++
-          break
-        }
-      }
-      out.push(<span key={start} className="text-code-string">{line.slice(start, i)}</span>)
-      continue
-    }
-
-    if (isIdentifierStart(line[i])) {
-      i++
-      while (i < line.length && isIdentifierPart(line[i])) i++
-      const word = line.slice(start, i)
-      out.push(keywords.has(word) ? <span key={start} className="text-code-keyword">{word}</span> : word)
-      continue
-    }
-
-    i++
-    while (i < line.length && line[i] !== '"' && line[i] !== "'" && line[i] !== "`" && !isIdentifierStart(line[i])) i++
-    out.push(line.slice(start, i))
-  }
-  return out
-}
-
-const VIEWS = [{ value: "code", label: "Code" }, { value: "diff", label: "Diff" }] as const
-
-/**
- * Code card: filename header, Code | Diff toggle, Copy; gutter line numbers
- * and keyword / string tinting from the `--code-*` tokens.
- *
- * @sketch "Component / Code Block"
- */
-export function CodeBlock({ filename, code, diff, view, defaultView = "code", onViewChange, onCopy, keywords, className, ...props }: ICodeBlockProps): React.ReactElement {
-  const [internal, setInternal] = React.useState<"code" | "diff">(defaultView)
-  const current = view ?? internal
-  const kw = React.useMemo(() => (keywords ? new Set([...KEYWORDS, ...keywords]) : KEYWORDS), [keywords])
-  const lines: ICodeDiffLine[] = current === "diff" && diff ? diff : code.split("\n").map((text) => ({ text }))
-
-  return (
-    <CardFrame data-slot="code-block" data-view={current} className={cn("w-[420px] max-w-full", className)} {...props}>
-      <CardFrameHeader className="flex h-11 flex-row items-center gap-2 px-4 py-0">
-        <FileCode className="size-[15px] text-icon" />
-        <span className="flex-1 truncate font-mono text-[12px] font-semibold text-text-primary">{filename}</span>
-        {diff ? (
-          <SegmentedToggle
-            label="Code view"
-            options={VIEWS}
-            value={current}
-            onValueChange={(v) => {
-              if (view === undefined) setInternal(v)
-              onViewChange?.(v)
-            }}
-          />
-        ) : null}
-        <Button variant="ghost" size="xs" onClick={() => onCopy?.(code)} className="h-6 gap-1.5 rounded-md px-2 text-[11.5px] font-medium text-text-secondary hover:bg-surface-subtle hover:text-text-primary sm:h-6 [&_svg]:size-3.5! [&_svg]:opacity-100">
-          <Copy />Copy
-        </Button>
-      </CardFrameHeader>
-      <Card className="overflow-hidden">
-      <pre className="overflow-x-auto bg-surface-code py-3 font-mono text-[11.5px] leading-[21px] text-text-primary">
-        {lines.map((line, i) => (
-          <div
-            key={i}
-            className={cn("flex", line.type === "add" && "bg-semantic-success-subtle", line.type === "remove" && "bg-semantic-danger-subtle")}
-          >
-            <span className="w-10 shrink-0 select-none border-r border-border-default pr-2.5 text-right text-[11px] text-text-muted">{line.type === "add" ? "+" : line.type === "remove" ? "−" : i + 1}</span>
-            <span className="whitespace-pre pl-3">{tokenize(line.text, kw)}</span>
-          </div>
-        ))}
-      </pre>
-      </Card>
-    </CardFrame>
-  )
-}

package/src/components/composed/chat/composer/add-button.tsx

@@ -1,29 +0,0 @@
-import { Plus } from "lucide-react"
-import type { PopoverTriggerState } from "@base-ui/react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-
-export function AddButton({
-  state,
-  className,
-  ...props
-}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  state?: PopoverTriggerState
-}) {
-  return (
-    <button
-      {...props}
-      type="button"
-      aria-label="Add attachment"
-      data-cuelume-press=""
-      data-cuelume-release=""
-      className={cn(
-        "size-7 flex items-center justify-center rounded-lg text-muted-foreground hover:bg-foreground/5 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-40",
-        state?.open && "bg-foreground/5",
-        className
-      )}
-    >
-      <Plus aria-hidden className="size-4" />
-    </button>
-  )
-}