@exegia/corpora-ui 1.0.0 → 3.0.0

package/src/components/composed/chat/chart/evilcharts/echarts-tooltip.tsx

@@ -0,0 +1,125 @@
+import { indicatorBackground, type ResolvedColors } from "./echarts-chart";
+import type { TooltipComponentOption } from "echarts/components";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Tooltip — the shared HTML shell/row primitives and the chart-agnostic option
+// fields. The tooltip DOM lives inside `[data-chart={id}]`, so the injected
+// `--color-*` vars and Tailwind classes resolve directly (no color read). Each
+// chart composes its own rows but shares the shell/styling and base option.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type TooltipVariant = "default" | "frosted-glass";
+export type TooltipRoundness = "sm" | "md" | "lg" | "xl";
+// Tooltip anchoring: "variable" follows both axes (ECharts default, current
+// behavior); "fixed" tracks the pointer's X (centered) but stays pinned near
+// the top (fixed Y).
+export type TooltipPosition = "fixed" | "variable";
+
+export const roundnessClass: Record<TooltipRoundness, string> = {
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+};
+
+export const tooltipVariantClass: Record<TooltipVariant, string> = {
+  default: "bg-background",
+  "frosted-glass": "bg-background/50 backdrop-blur-md",
+};
+
+// The standard series indicator swatch — a rounded square filled with the
+// series' solid var or multi-stop gradient (indicatorBackground). A chart drops
+// this into a tooltipRow's `indicatorHtml`.
+export function tooltipIndicatorHtml(key: string, colorsCount: number): string {
+  return `<div class="h-2.5 w-2.5 shrink-0 rounded-[2px]" style="background:${indicatorBackground(key, colorsCount)}"></div>`;
+}
+
+// One tooltip row: indicator swatch + label/value pair. `dimmed` is a class
+// fragment (e.g. " opacity-30") appended to the row so the selection/hover dim
+// stays byte-identical to the inlined markup.
+export function tooltipRow({
+  indicatorHtml,
+  labelText,
+  valueText,
+  dimmed,
+}: {
+  indicatorHtml: string;
+  labelText: string;
+  valueText: string;
+  dimmed: string;
+}): string {
+  return `<div class="flex w-full flex-wrap items-center gap-2${dimmed}">
+          ${indicatorHtml}
+          <div class="flex flex-1 items-center justify-between gap-4 leading-none">
+            <span class="text-muted-foreground">${labelText}</span>
+            <span class="text-foreground font-mono font-medium tabular-nums">${valueText}</span>
+          </div>
+        </div>`;
+}
+
+// The outer tooltip surface — border, padding, shadow, roundness + variant
+// classes — wrapping the axis label and the composed rows.
+export function tooltipShell({
+  label,
+  body,
+  roundness,
+  variant,
+}: {
+  label: string;
+  body: string;
+  roundness: TooltipRoundness;
+  variant: TooltipVariant;
+}): string {
+  return `<div class="grid min-w-32 items-start gap-1.5 border border-border/50 px-2.5 py-1.5 text-xs shadow-xl ${roundnessClass[roundness]} ${tooltipVariantClass[variant]}">
+      <div class="font-medium text-primary">${label}</div>
+      <div class="grid gap-1.5">${body}</div>
+    </div>`;
+}
+
+// Maps the TooltipPosition prop onto the ECharts tooltip `position` field.
+// "variable" → undefined (default follow-both-axes, current behavior); "fixed" →
+// a callback that centers the tooltip on the pointer's X but pins it near the
+// top (fixed Y).
+export function resolveTooltipPosition(
+  position: TooltipPosition,
+): TooltipComponentOption["position"] {
+  if (position === "variable") return undefined;
+  return (point, _params, _dom, _rect, size) => [point[0] - size.contentSize[0] / 2, 8];
+}
+
+// The chart-agnostic tooltip option fields (show, trigger, confine,
+// background/border/padding/extraCssText, axisPointer, position). The chart
+// supplies only `formatter` and spreads this in. `axisPointerColor` is the
+// pre-resolved cursor-line color, so this helper needs no live token read.
+export function tooltipBaseOption(params: {
+  present: boolean;
+  cursor: boolean;
+  tokens: ResolvedColors["tokens"];
+  position: TooltipPosition;
+  axisPointerColor: string;
+  strokeWidth: number;
+}): TooltipComponentOption {
+  const { present, cursor, position, axisPointerColor, strokeWidth } = params;
+
+  return {
+    show: present,
+    trigger: "axis",
+    confine: true,
+    displayTransition: false,
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    padding: 0,
+    extraCssText: "box-shadow:none;",
+    axisPointer: cursor
+      ? {
+          type: "line",
+          lineStyle: {
+            color: axisPointerColor,
+            width: strokeWidth,
+            type: [3, 3] as [number, number],
+          },
+        }
+      : { type: "none" },
+    position: resolveTooltipPosition(position),
+  };
+}

package/src/components/composed/chat/chart/index.ts

@@ -0,0 +1,13 @@
+export { ChartRoot as Chart, ChartRoot } from "./chart-root"
+export { useChartContext } from "./chart-context"
+export { useChartActions, useChartState } from "./use-chart-state"
+export {
+  chartSelectedKeyAtom,
+  chartStateAtom,
+  selectChartKeyAtom,
+  toggleChartKeyAtom,
+  resetChartAtom,
+  removeChartInstance,
+} from "./chart-atom"
+export { CHART_TYPE_LABEL, CHART_DEFAULT_HEIGHT } from "./constants"
+export type * from "./type"

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

@@ -0,0 +1,88 @@
+import type { useRender } from "@base-ui/react/use-render"
+import type * as React from "react"
+import type { Reference } from "@/components/atoms/reference"
+import type {
+  AreaProps,
+  CurveType,
+  TooltipProps,
+  XAxisProps,
+  YAxisProps,
+} from "./evilcharts/echarts-area-chart"
+import type { BarProps } from "./evilcharts/echarts-bar-chart"
+import type { LineProps } from "./evilcharts/echarts-line-chart"
+import type { PieProps } from "./evilcharts/echarts-pie-chart"
+import type { BrushProps } from "./evilcharts/echarts-brush"
+import type { EChartsRenderer } from "./evilcharts/echarts-chart"
+
+export type TChartType = "pie" | "area" | "line" | "bar"
+export type TChartVariant =
+  "default" | "stacked" | "percent" | "donut" | "horizontal"
+export type TChartInstanceId = string
+export type TChartDatum = {
+  label: string
+  [key: string]: string | number | null
+}
+export interface IChartSeries {
+  key: string
+  label: React.ReactNode
+  color?: string
+  format?: (value: number) => React.ReactNode
+  area?: Omit<AreaProps, "dataKey" | "children">
+  line?: Omit<LineProps, "dataKey" | "children">
+  bar?: Omit<BarProps, "dataKey">
+}
+export interface IChartState {
+  selectedKey: string | null
+}
+export interface IChartStateActions {
+  select: (key: string | null) => void
+  toggle: (key: string) => void
+  clearSelection: () => void
+  reset: () => void
+}
+export interface IChartProps extends Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "title"
+> {
+  type: TChartType
+  /** Unique within the current Jotai store. Omit for an isolated generated id. */
+  chartId?: TChartInstanceId
+  title?: React.ReactNode
+  subtitle?: React.ReactNode
+  badge?: React.ReactNode
+  reference?: React.ComponentProps<typeof Reference>
+  data: TChartDatum[]
+  series: IChartSeries[]
+  center?: { value: React.ReactNode; label?: React.ReactNode }
+  headerless?: boolean
+  /** Outer component width. Numbers are pixels; CSS lengths such as "100%" work. */
+  width?: React.CSSProperties["width"]
+  /** Outer component height, including header and legend. Plot fills remaining space. */
+  height?: React.CSSProperties["height"]
+  /** Explicit plot height takes precedence over filling the outer height. */
+  plotHeight?: React.CSSProperties["height"]
+  /** Replace the outer element using the coss/Base UI render API. */
+  render?: useRender.ComponentProps<"div">["render"]
+  /** stacked/percent: area or bar; horizontal: bar; donut: pie. */
+  variant?: TChartVariant
+  renderer?: EChartsRenderer
+  animation?: boolean
+  loading?: boolean
+  emptyContent?: React.ReactNode
+  showLegend?: boolean
+  interactive?: boolean
+  selectedKey?: string | null
+  defaultSelectedKey?: string | null
+  onSelectionChange?: (key: string | null) => void
+  curveType?: CurveType
+  grid?: boolean
+  xAxis?: boolean | XAxisProps
+  yAxis?: boolean | YAxisProps
+  tooltip?: boolean | TooltipProps
+  brush?: boolean | BrushProps
+  pie?: Omit<PieProps, "children">
+  /** ECharts options override generated options at the top level. */
+  chartOptions?: Record<string, unknown>
+  /** Selection methods; also available via useChartActions(chartId). */
+  ref?: React.Ref<IChartStateActions>
+}

package/src/components/composed/chat/chart/use-chart-state.ts

@@ -0,0 +1,22 @@
+"use client"
+import { useMemo } from "react"
+import { useAtomValue, useSetAtom } from "jotai"
+import {
+  chartStateAtom,
+  selectChartKeyAtom,
+  toggleChartKeyAtom,
+  resetChartAtom,
+} from "./chart-atom"
+import type { IChartStateActions, TChartInstanceId } from "./type"
+export function useChartState(id: TChartInstanceId) {
+  return useAtomValue(chartStateAtom(id))
+}
+export function useChartActions(id: TChartInstanceId): IChartStateActions {
+  const select = useSetAtom(selectChartKeyAtom(id))
+  const toggle = useSetAtom(toggleChartKeyAtom(id))
+  const reset = useSetAtom(resetChartAtom(id))
+  return useMemo(
+    () => ({ select, toggle, reset, clearSelection: () => select(null) }),
+    [select, toggle, reset]
+  )
+}

package/src/components/composed/chat/chart/use-chart.ts

@@ -0,0 +1,70 @@
+"use client"
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
+import { useStore } from "jotai"
+import {
+  chartConfigAtom,
+  chartSelectedKeyAtom,
+  removeChartInstance,
+} from "./chart-atom"
+import { useChartActions, useChartState } from "./use-chart-state"
+import type { IChartProps } from "./type"
+const useClientLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect
+export function useChart(props: IChartProps) {
+  const generatedId = useId()
+  const id = props.chartId ?? generatedId
+  const store = useStore()
+  const [initial] = useState(props.defaultSelectedKey ?? null)
+  const lifecycle = useRef(0)
+  const keys = useMemo(
+    () =>
+      props.type === "pie"
+        ? props.data.map((row) => row.label)
+        : props.series.map((s) => s.key),
+    [props.type, props.data, props.series]
+  )
+  const state = useChartState(id)
+  const actions = useChartActions(id)
+  useClientLayoutEffect(() => {
+    const generation = ++lifecycle.current
+    store.set(chartSelectedKeyAtom(id), initial)
+    // Named instances persist until removeChartInstance; generated ids have no external consumers.
+    return () => {
+      queueMicrotask(() => {
+        if (!props.chartId && lifecycle.current === generation)
+          removeChartInstance(id)
+      })
+    }
+  }, [id, store, initial, props.chartId])
+  useClientLayoutEffect(() => {
+    store.set(chartConfigAtom(id), {
+      controlled: props.selectedKey !== undefined,
+      initial,
+      keys,
+      onChange: props.onSelectionChange,
+    })
+    const current =
+      props.selectedKey !== undefined
+        ? props.selectedKey
+        : store.get(chartSelectedKeyAtom(id))
+    store.set(
+      chartSelectedKeyAtom(id),
+      current !== null && keys.includes(current) ? current : null
+    )
+  }, [id, store, initial, keys, props.selectedKey, props.onSelectionChange])
+  const candidate =
+    props.selectedKey !== undefined ? props.selectedKey : state.selectedKey
+  return {
+    id,
+    selectedKey:
+      candidate !== null && keys.includes(candidate) ? candidate : null,
+    actions,
+  }
+}

package/src/components/composed/chat/chart/utils.ts

@@ -0,0 +1,47 @@
+import type { ChartConfig } from "./evilcharts/echarts-chart"
+import type { IChartSeries, TChartDatum, TChartType } from "./type"
+export function chartSeriesColor(series: IChartSeries, index: number) {
+  return series.color ?? `var(--chart-series-${(index % 5) + 1})`
+}
+export function formatChartValue(
+  series: IChartSeries | undefined,
+  value: unknown
+) {
+  return typeof value === "number" && series?.format
+    ? series.format(value)
+    : String(value ?? "—")
+}
+export function buildChartConfig(
+  type: TChartType,
+  data: TChartDatum[],
+  series: IChartSeries[]
+): ChartConfig {
+  const entries =
+    type === "pie"
+      ? data.map(
+          (row, index) =>
+            [
+              row.label,
+              {
+                label: row.label,
+                colors: { light: [`var(--chart-series-${(index % 5) + 1})`] },
+              },
+            ] as const
+        )
+      : series.map(
+          (item, index) =>
+            [
+              item.key,
+              {
+                label: item.label,
+                colors: { light: [chartSeriesColor(item, index)] },
+              },
+            ] as const
+        )
+  return Object.fromEntries(
+    entries.map(([key, value]) => [
+      key,
+      { ...value, colors: { light: [...value.colors.light] } },
+    ])
+  )
+}

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

@@ -1,193 +1,3 @@
 "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 DotTone } from "@/components/ui/chat"
-
-export type ChartType = "pie" | "area" | "line" | "bar"
-
-export interface ChartSeries {
-  /** 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 ChartDatum = { label: string; [key: string]: string | number }
-
-export interface ChartProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
-  type: ChartType
-  title?: React.ReactNode
-  subtitle?: React.ReactNode
-  /** Pill text; defaults to the capitalised type. */
-  badge?: React.ReactNode
-  data: ChartDatum[]
-  /** Series to plot; pie uses the first one. */
-  series: ChartSeries[]
-  /** 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<ChartType, string> = { pie: "Pie", area: "Area", line: "Line", bar: "Bar" }
-
-const seriesColor = (s: ChartSeries, i: number) => s.color ?? `var(--chart-series-${(i % 5) + 1})`
-const seriesTone = (i: number) => `series-${(i % 5) + 1}` as DotTone
-
-const fmt = (s: ChartSeries | undefined, v: unknown): React.ReactNode =>
-  typeof v === "number" && s?.format ? s.format(v) : String(v)
-
-interface TooltipRow { name?: unknown; value?: unknown; color?: string; payload?: ChartDatum }
-
-/** Hover card: category label, then one dot · series · value row per series. */
-function ChartTooltip({ active, payload, label, series }: { active?: boolean; payload?: TooltipRow[]; label?: unknown; series: ChartSeries[] }): 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 rounded-md border border-border-default bg-surface-card px-2.5 py-2 shadow-md">
-      {heading !== undefined ? <div className="mb-1.5 text-[11px] font-medium leading-3 text-text-secondary">{String(heading)}</div> : null}
-      <ul className="flex flex-col gap-1">
-        {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="flex items-center gap-2 text-[11px] leading-3">
-              <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="ml-auto pl-3 font-medium 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", interval: 0 as const }
-
-/**
- * 320×244 chart card: title, subtitle, type pill, plot, x labels, 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, data, series, center, headerless = false, plotHeight, className, ...props
-}: ChartProps): 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="flex items-center gap-6">
-          <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="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
-                <span className="text-[17px] font-semibold leading-5 text-text-primary">{center.value}</span>
-                {center.label ? <span className="text-[11px] leading-3 text-text-secondary">{center.label}</span> : null}
-              </div>
-            ) : null}
-          </div>
-          {empty ? null : (
-            <ul className="flex min-w-0 flex-1 flex-col gap-3.5">
-              {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="flex flex-wrap gap-4">
-              {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("flex w-80 max-w-full flex-col gap-2", 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="flex flex-row items-start justify-between gap-3 px-3.5 py-3">
-        <div className="flex min-w-0 flex-col gap-0.5">
-          <span className="truncate text-[13px] font-semibold leading-4 text-text-primary">{title}</span>
-          {subtitle ? <span className="truncate text-[11px] leading-3 text-text-secondary">{subtitle}</span> : null}
-        </div>
-        <Pill>{badge ?? TYPE_LABEL[type]}</Pill>
-      </CardFrameHeader>
-      <Card>
-        <CardPanel className="flex flex-col gap-3 p-3.5">{plot}</CardPanel>
-      </Card>
-    </CardFrame>
-  )
-}
+// Compatibility entry point; implementation follows the scaffold module layout.
+export * from "./chart/index"

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

@@ -7,16 +7,16 @@ import { Card, CardFrame, CardFrameHeader } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { SegmentedToggle } from "@/components/ui/chat"
 
-export interface CodeDiffLine {
+export interface ICodeDiffLine {
   type?: "add" | "remove" | "context"
   text: string
 }
 
-export interface CodeBlockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onCopy"> {
+export interface ICodeBlockProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onCopy"> {
   filename?: React.ReactNode
   code: string
   /** Optional diff view; when absent the toggle is hidden. */
-  diff?: CodeDiffLine[]
+  diff?: ICodeDiffLine[]
   view?: "code" | "diff"
   defaultView?: "code" | "diff"
   onViewChange?: (view: "code" | "diff") => void
@@ -79,11 +79,11 @@ const VIEWS = [{ value: "code", label: "Code" }, { value: "diff", label: "Diff"
  *
  * @sketch "Component / Code Block"
  */
-export function CodeBlock({ filename, code, diff, view, defaultView = "code", onViewChange, onCopy, keywords, className, ...props }: CodeBlockProps): React.ReactElement {
+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: CodeDiffLine[] = current === "diff" && diff ? diff : code.split("\n").map((text) => ({ text }))
+  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}>

package/src/components/composed/chat/composer/BEAUTIFUL-UI-LICENSE.txt

@@ -0,0 +1,23 @@
+Prompt Bar layout adapted from https://www.beautifului.dev/#prompt-bar
+
+MIT License
+
+Copyright (c) 2026 Shane Levine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -1,22 +1,29 @@
-import { Button, type ButtonProps } from "@/components/ui/button";
-import { Plus } from "lucide-react";
-import type { PopoverTriggerState } from "@base-ui/react";
-import { cn } from "@/lib/utils";
+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, ...props}: ButtonProps & { state: PopoverTriggerState }) {
-  // One attach button for both shapes: it is absolutely positioned in each,
-  // so the class swap moves it and `layout` glides it between the two spots
-  // rather than mounting a second control.
+export function AddButton({
+  state,
+  className,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  state?: PopoverTriggerState
+}) {
   return (
-    <Button
+    <button
       {...props}
-      aria-label={"Add attachment"}
-      className={cn("bg-background/50 [&_svg]:transition-transform [&_svg]:duration-200 [&_svg]:ease-smooth-out hover:[&_svg]:rotate-90 data-popup-open:[&_svg]:rotate-45 motion-reduce:hover:[&_svg]:rotate-0", state.open && "data-popup-open")}
-      size="icon-lg"
-      glassVariant="liquid-refract"
-      variant="glass"
+      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 className="size-4 stroke-3" />
-    </Button>
+      <Plus aria-hidden className="size-4" />
+    </button>
   )
-}
+}