@adres/mgda-ui 0.0.0-stage → 0.0.2

package/src/components/chat-message.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import * as React from "react"
+import { AlertCircle, Bot } from "lucide-react"
+import { cn } from "../lib/cn"
+import { Avatar, AvatarFallback, type AvatarProps } from "./avatar"
+import { Separator } from "./separator"
+import { Text } from "./text"
+import { TextLink } from "./text-link"
+
+export interface ChatAvatarProps extends Omit<AvatarProps, "children"> {
+  /** Replaces the default bot icon, e.g. with an `AvatarImage`. */
+  children?: React.ReactNode
+}
+
+/** The assistant's identity mark: a small tinted avatar with a bot icon. */
+export const ChatAvatar = React.forwardRef<React.ElementRef<typeof Avatar>, ChatAvatarProps>(
+  ({ className, size = "sm", children, ...props }, ref) => (
+    <Avatar ref={ref} size={size} className={cn("ax:shrink-0", className)} {...props}>
+      {children ?? (
+        <AvatarFallback className="ax:bg-primary-weaker ax:text-primary-foreground">
+          <Bot className="ax:size-4" aria-hidden />
+        </AvatarFallback>
+      )}
+    </Avatar>
+  ),
+)
+ChatAvatar.displayName = "ChatAvatar"
+
+export interface ChatDividerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Short system note, e.g. "Today" or "Conversation restarted". */
+  label: string
+}
+
+/** A labelled rule between turns for system notes and date breaks. */
+export const ChatDivider = React.forwardRef<HTMLDivElement, ChatDividerProps>(
+  ({ label, className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="chat-divider"
+      role="separator"
+      aria-label={label}
+      className={cn("ax:flex ax:items-center ax:gap-sm", className)}
+      {...props}
+    >
+      <Separator className="ax:flex-1" />
+      <Text size="1" color="muted">{label}</Text>
+      <Separator className="ax:flex-1" />
+    </div>
+  ),
+)
+ChatDivider.displayName = "ChatDivider"
+
+export type ChatMessageFrom = "assistant" | "user"
+export type ChatMessageStatus = "sent" | "failed"
+
+export interface ChatMessageProps extends React.HTMLAttributes<HTMLElement> {
+  /** Who wrote it. Named `from` so it never clashes with the ARIA `role` attribute. */
+  from: ChatMessageFrom
+  /** Assistant only. None by default; pass `<ChatAvatar />` to show one beside the turn. */
+  avatar?: React.ReactNode
+  /** Drops the bubble so `children` lay out freely, e.g. steps, tool runs or a cited answer. */
+  bare?: boolean
+  /** User only. `failed` tints the bubble and swaps `meta` for a retry line. */
+  status?: ChatMessageStatus
+  onRetry?: () => void
+  /** Content under the bubble, such as listing cards or a sources line. */
+  attachments?: React.ReactNode
+  /** Assistant only. Usually `MessageActions`; sits after `meta` in the footer row. */
+  actions?: React.ReactNode
+  /** Small muted footer text, e.g. the time or "Delivered · 10:42". */
+  meta?: React.ReactNode
+  /** Extra classes for the column that holds the bubble and footer. */
+  bodyClassName?: string
+}
+
+function Body({ children }: { children: React.ReactNode }) {
+  return typeof children === "string" ? <Text as="p" size="2" wrap="pretty">{children}</Text> : <>{children}</>
+}
+
+function FailedLine({ onRetry }: { onRetry?: () => void }) {
+  return (
+    <Text as="p" size="1" color="destructive" className="ax:flex ax:items-center ax:gap-1">
+      <AlertCircle className="ax:size-3.5" aria-hidden />
+      Not delivered.
+      {onRetry && (
+        <TextLink asChild size="1" underline="always" className="ax:text-destructive-foreground">
+          <button type="button" onClick={onRetry}>Retry</button>
+        </TextLink>
+      )}
+    </Text>
+  )
+}
+
+/**
+ * ChatMessage - one turn in a conversation. Assistant turns sit in a
+ * primary-tinted bubble at the start with an actions and meta footer; user
+ * turns align to the end in a muted rounded bubble with a delivery line that
+ * offers retry when sending failed.
+ *
+ * @example
+ *   <ChatMessage from="assistant" actions={<MessageActions copyText={text} />} meta="10:42">{text}</ChatMessage>
+ *   <ChatMessage from="user" status="failed" onRetry={retry}>{text}</ChatMessage>
+ */
+export const ChatMessage = React.forwardRef<HTMLElement, ChatMessageProps>(
+  ({ from, avatar, bare = false, status = "sent", onRetry, attachments, actions, meta, bodyClassName, className, children, ...props }, ref) => {
+    if (from === "user") {
+      const failed = status === "failed"
+      return (
+        <article
+          ref={ref}
+          data-slot="chat-message"
+          data-from="user"
+          aria-label="Your message"
+          className={cn("ax:group/message ax:flex ax:flex-col ax:items-end ax:gap-1", className)}
+          {...props}
+        >
+          {bare ? children : (
+            <div
+              className={cn(
+                "ax:max-w-[90%] ax:rounded-xl ax:px-md ax:py-xs",
+                failed ? "ax:bg-destructive-weakest" : "ax:bg-muted",
+              )}
+            >
+              <Body>{children}</Body>
+            </div>
+          )}
+          {attachments}
+          {failed ? <FailedLine onRetry={onRetry} /> : meta && <Text size="1" color="muted">{meta}</Text>}
+        </article>
+      )
+    }
+
+    return (
+      <article
+        ref={ref}
+        data-slot="chat-message"
+        data-from="assistant"
+        aria-label="Assistant message"
+        className={cn("ax:group/message ax:flex ax:gap-sm", className)}
+        {...props}
+      >
+        {avatar}
+        <div className={cn("ax:flex ax:min-w-0 ax:flex-1 ax:flex-col ax:gap-xs", bodyClassName)}>
+          {bare ? children : (
+            <div className="ax:self-start ax:rounded-xl ax:bg-primary-weakest ax:px-md ax:py-xs ax:max-w-[90%]">
+              <Body>{children}</Body>
+            </div>
+          )}
+          {attachments}
+          {(actions || meta) && (
+            // With the time first, it marks the bubble's edge; MessageActions drops the inset that otherwise aligns its first icon there.
+            <div className={cn("ax:flex ax:items-center ax:gap-sm", meta && "ax:*:data-[slot=message-actions]:ms-0")}>
+              {meta && <Text size="1" color="muted">{meta}</Text>}
+              {actions}
+            </div>
+          )}
+        </div>
+      </article>
+    )
+  },
+)
+ChatMessage.displayName = "ChatMessage"

package/src/components/checkbox-card.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { CheckboxCard, CheckboxCardDescription, CheckboxCardGroup, CheckboxCardTitle } from "./checkbox-card"
+
+const meta: Meta<typeof CheckboxCardGroup> = {
+  title: "Components/CheckboxCard",
+  component: CheckboxCardGroup,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof CheckboxCardGroup>
+
+export const Default: Story = {
+  render: () => (
+    <CheckboxCardGroup className="ax:max-w-md">
+      <CheckboxCard defaultChecked>
+        <CheckboxCardTitle>Email alerts</CheckboxCardTitle>
+        <CheckboxCardDescription>Receive updates about your account.</CheckboxCardDescription>
+      </CheckboxCard>
+      <CheckboxCard>
+        <CheckboxCardTitle>SMS alerts</CheckboxCardTitle>
+        <CheckboxCardDescription>Get text messages for urgent events.</CheckboxCardDescription>
+      </CheckboxCard>
+    </CheckboxCardGroup>
+  ),
+}

package/src/components/checkbox-card.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+export type CheckboxCardSize        = "sm" | "base" | "lg"
+export type CheckboxCardOrientation = "horizontal" | "vertical"
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface CheckboxCardGroupContextValue {
+  size:        CheckboxCardSize
+  compact:     boolean
+  orientation: CheckboxCardOrientation
+}
+
+const CheckboxCardGroupContext = React.createContext<CheckboxCardGroupContextValue>({
+  size:        "base",
+  compact:     false,
+  orientation: "vertical",
+})
+
+// ─── Group ────────────────────────────────────────────────────────────────────
+
+// Multi-select layout wrapper. Each contained CheckboxCard manages its own
+// checked state: the group only provides shared size + layout context.
+export interface CheckboxCardGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?:        CheckboxCardSize
+  compact?:     boolean
+  orientation?: CheckboxCardOrientation
+}
+
+export const CheckboxCardGroup = React.forwardRef<HTMLDivElement, CheckboxCardGroupProps>(
+  ({ className, size = "base", compact = false, orientation = "vertical", ...props }, ref) => (
+    <CheckboxCardGroupContext.Provider value={{ size, compact, orientation }}>
+      <div
+        ref={ref}
+        role="group"
+        className={cn(
+          compact
+            ? orientation === "horizontal" ? "ax:flex ax:flex-row" : "ax:flex ax:flex-col"
+            : "ax:grid ax:gap-3",
+          className
+        )}
+        {...props}
+      />
+    </CheckboxCardGroupContext.Provider>
+  )
+)
+CheckboxCardGroup.displayName = "CheckboxCardGroup"
+
+// ─── Card ─────────────────────────────────────────────────────────────────────
+
+const checkboxCardVariants = cva(
+  [
+    "ax:relative ax:flex ax:items-start ax:cursor-pointer ax:border ax:border-border ax:bg-card",
+    "ax:transition-colors ax:transition-snappy",
+    // Selected border matches the selected title/icon colour (primary-strong /
+    // dark:primary) rather than the base --primary.
+    "ax:has-[[data-state=checked]]:border-primary",
+    "ax:dark:has-[[data-state=checked]]:border-primary",
+    // Selected background - a weak brand tint (mode-aware, auto-inverts in dark).
+    "ax:has-[[data-state=checked]]:bg-primary-muted",
+    // Hover only on unchecked cards - darker brand-aware border (≈30% foreground)
+    // for a clearly visible interactivity cue. `hover:z-10` lifts the hovered
+    // card above its compact-mode neighbours so the new border isn't clipped
+    // by the adjacent card's idle border.
+    "ax:[&:not(:has([data-state=checked]))]:hover:border-neutral-weak",
+    "ax:[&:not(:has([data-state=checked]))]:hover:z-10",
+    "ax:has-[[data-disabled]]:cursor-not-allowed ax:has-[[data-disabled]]:opacity-50",
+    // Checked-state title tint - mirrors RadioCard so both cards read the same way.
+    "ax:[&:has([data-state=checked])_[data-slot=checkbox-card-title]]:text-primary-foreground",
+    // Dark mode: primary-strong reads muddy on a dark card, so brighten the selected
+    // title (matches RadioCard and the bright check indicator).
+    "ax:dark:[&:has([data-state=checked])_[data-slot=checkbox-card-title]]:text-primary-foreground",
+    // Trailing check icon - three states:
+    //   idle (unchecked, no hover) → transparent (slot still reserves space, no layout shift)
+    //   hover on unchecked         → --input (tinted to match the border at rest)
+    //   checked                    → primary-strong / dark:primary, mirrors the selected title colour
+    "ax:[&_[data-slot=checkbox-card-check]]:text-transparent",
+    "ax:[&:not(:has([data-state=checked])):hover_[data-slot=checkbox-card-check]]:text-input",
+    "ax:[&:has([data-state=checked])_[data-slot=checkbox-card-check]]:text-primary",
+    "ax:dark:[&:has([data-state=checked])_[data-slot=checkbox-card-check]]:text-primary",
+  ],
+  {
+    variants: {
+      size: {
+        sm:   "ax:p-3 ax:gap-3 ax:text-xs",
+        base: "ax:p-4 ax:gap-3 ax:text-sm",
+        lg:   "ax:p-5 ax:gap-4 ax:text-base",
+      },
+    },
+    defaultVariants: { size: "base" },
+  }
+)
+
+const COMPACT_LAYOUT: Record<CheckboxCardOrientation, string> = {
+  horizontal: [
+    "ax:rounded-none",
+    "ax:first:rounded-l-(--input-radius) ax:last:rounded-r-(--input-radius)",
+    "ax:[&:not(:first-child)]:-ml-px",
+    "ax:has-[[data-state=checked]]:z-10",
+  ].join(" "),
+  vertical: [
+    "ax:rounded-none",
+    "ax:first:rounded-t-(--input-radius) ax:last:rounded-b-(--input-radius)",
+    "ax:[&:not(:first-child)]:-mt-px",
+    "ax:has-[[data-state=checked]]:z-10",
+  ].join(" "),
+}
+
+const CHECK_SIZE: Record<CheckboxCardSize, string> = {
+  sm:   "ax:size-3.5",
+  base: "ax:size-4",
+  lg:   "ax:size-4",
+}
+
+export interface CheckboxCardProps
+  extends VariantProps<typeof checkboxCardVariants>,
+    Pick<
+      React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+      "checked" | "defaultChecked" | "onCheckedChange" | "disabled" | "name" | "value" | "required"
+    > {
+  className?: string
+  children?: React.ReactNode
+}
+
+export const CheckboxCard = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxCardProps
+>(
+  (
+    { className, size: sizeProp, children, checked, defaultChecked, onCheckedChange, disabled, name, value, required },
+    ref
+  ) => {
+    const { size: ctxSize, compact, orientation } = React.useContext(CheckboxCardGroupContext)
+    const size = sizeProp ?? ctxSize
+    const id = React.useId()
+
+    return (
+      <label
+        htmlFor={id}
+        className={cn(
+          checkboxCardVariants({ size }),
+          compact ? COMPACT_LAYOUT[orientation] : "ax:rounded-(--input-radius)",
+          className
+        )}
+      >
+        <div className="ax:flex-1 ax:min-w-0">{children}</div>
+        <Check
+          data-slot="checkbox-card-check"
+          aria-hidden="true"
+          className={cn(
+            "ax:shrink-0 ax:mt-0.5 ax:transition-colors ax:transition-snappy",
+            CHECK_SIZE[size]
+          )}
+        />
+        <CheckboxPrimitive.Root
+          ref={ref}
+          id={id}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          onCheckedChange={onCheckedChange}
+          disabled={disabled}
+          name={name}
+          value={value}
+          required={required}
+          className="ax:sr-only"
+        />
+      </label>
+    )
+  }
+)
+CheckboxCard.displayName = "CheckboxCard"
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+export const CheckboxCardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="checkbox-card-title"
+    className={cn("ax:t-label-sm ax:text-foreground", className)}
+    {...props}
+  />
+))
+CheckboxCardTitle.displayName = "CheckboxCardTitle"
+
+export const CheckboxCardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("ax:text-[0.875em] ax:text-muted-foreground ax:mt-1", className)} {...props} />
+))
+CheckboxCardDescription.displayName = "CheckboxCardDescription"

package/src/components/checkbox.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Checkbox } from "./checkbox"
+import { Label } from "./input"
+
+const meta: Meta<typeof Checkbox> = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+  render: () => (
+    <div className="ax:flex ax:items-center ax:gap-sm">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+}
+
+export const Checked: Story = {
+  render: () => <Checkbox defaultChecked />,
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check, Minus } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../lib/cn"
+
+const checkboxVariants = cva(
+  [
+    "ax:peer ax:shrink-0 ax:rounded-xs ax:border ax:border-input",
+    "ax:transition-colors ax:transition-snappy",
+    "ax:focus-visible:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2 ax:focus-visible:ring-offset-background",
+    "ax:cursor-pointer ax:disabled:cursor-not-allowed ax:disabled:opacity-50",
+    // Selected: primary-weak fill + primary-strong glyph, matches RadioGroup. The
+    // fill auto-inverts to a light-ish tint in dark, so the glyph flips to a dark
+    // `primary-muted` there (dark: override) to keep contrast on that lighter fill.
+    "ax:data-[state=checked]:bg-primary-weak ax:data-[state=checked]:border-primary-weak ax:data-[state=checked]:text-primary-strong ax:dark:data-[state=checked]:text-primary-muted",
+    "ax:data-[state=indeterminate]:bg-primary-weak ax:data-[state=indeterminate]:border-primary-weak ax:data-[state=indeterminate]:text-primary-strong ax:dark:data-[state=indeterminate]:text-primary-muted",
+  ],
+  {
+    variants: {
+      size: {
+        sm:   "ax:size-3",
+        base: "ax:size-4",
+        lg:   "ax:size-5",
+      },
+    },
+    defaultVariants: { size: "base" },
+  }
+)
+
+const ICON_SIZE: Record<NonNullable<VariantProps<typeof checkboxVariants>["size"]>, string> = {
+  sm:   "ax:size-2",
+  base: "ax:size-3",
+  lg:   "ax:size-4",
+}
+
+export interface CheckboxProps
+  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
+    VariantProps<typeof checkboxVariants> {}
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, size, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(checkboxVariants({ size }), className)}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="ax:flex ax:items-center ax:justify-center ax:text-current">
+      {props.checked === "indeterminate" ? (
+        <Minus className={ICON_SIZE[size ?? "base"]} strokeWidth={2} />
+      ) : (
+        <Check className={ICON_SIZE[size ?? "base"]} strokeWidth={4} />
+      )}
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName

package/src/components/citations.stories.tsx

@@ -0,0 +1,64 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Home, LineChart, Newspaper } from "lucide-react"
+import { CitationMarker, SourceList, UnsupportedClaim, type CitationSource } from "./citations"
+import { Text } from "./text"
+import { TooltipProvider } from "./tooltip"
+
+const SOURCES: CitationSource[] = [
+  {
+    id: 1,
+    title: "Saadiyat Lagoons, Apt 1316",
+    publisher: "Adres listings",
+    date: "2026-09-28",
+    url: "#",
+    excerpt: "Asking AED 4,162,000 for 1,734 sqft, three bedrooms with a lagoon view.",
+    kind: { label: "Listing", icon: Home },
+  },
+  {
+    id: 2,
+    title: "Saadiyat Lagoons registered sales, Q3 2026",
+    publisher: "DLD",
+    date: "2026-09-30",
+    url: "#",
+    excerpt: "Median AED 2,550 per sqft across 42 registered sales.",
+    kind: { label: "Registered sales", icon: LineChart },
+  },
+  {
+    id: 3,
+    title: "Saadiyat schools guide",
+    publisher: "The National",
+    date: "2025-11-02",
+    url: "#",
+    excerpt: "Two international schools sit within a ten-minute drive.",
+    kind: { label: "Article", icon: Newspaper },
+  },
+]
+
+const meta: Meta<typeof SourceList> = {
+  title: "Components/Citations",
+  component: SourceList,
+  tags: ["autodocs"],
+  decorators: [(Story) => <TooltipProvider><div style={{ maxWidth: 640 }}><Story /></div></TooltipProvider>],
+  args: { sources: SOURCES, asOf: "2026-10-06" },
+}
+
+export default meta
+type Story = StoryObj<typeof SourceList>
+
+export const Sources: Story = {}
+
+export const Collapsed: Story = { args: { initial: 2, onExpand: () => undefined } }
+
+export const Highlighted: Story = { args: { highlighted: 2 } }
+
+export const CitedAnswer: Story = {
+  render: () => (
+    <Text as="p" size="2" wrap="pretty">
+      Apt 1316 is listed at about AED 2,400 per sqft
+      <CitationMarker source={SOURCES[0]!} />, below the area median of AED 2,550
+      <CitationMarker source={SOURCES[1]!} />.{" "}
+      <UnsupportedClaim>Prices here are likely to rise next year.</UnsupportedClaim>
+    </Text>
+  ),
+}

package/src/components/citations.test.tsx

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { CitationMarker, SourceCard, SourceList, UnsupportedClaim, formatSourceDate, isStale, type CitationSource } from "./citations"
+import { TooltipProvider } from "./tooltip"
+
+const source = (id: number, date = "2026-09-28"): CitationSource => ({
+  id,
+  title: `Source ${id} title`,
+  publisher: "Adres listings",
+  date,
+  url: "https://example.com",
+  excerpt: "The passage used.",
+})
+
+describe("isStale", () => {
+  it("is false up to the limit and true after it", () => {
+    expect(isStale("2026-04-06", "2026-10-06")).toBe(false)
+    expect(isStale("2026-03-01", "2026-10-06")).toBe(true)
+  })
+
+  it("takes a custom limit in days", () => {
+    expect(isStale("2026-09-01", "2026-10-06", 30)).toBe(true)
+  })
+})
+
+describe("formatSourceDate", () => {
+  it("formats in UTC as day, short month, year", () => {
+    expect(formatSourceDate("2026-10-06")).toBe("6 Oct 2026")
+  })
+})
+
+describe("SourceCard", () => {
+  it("marks old sources only when asOf is given", () => {
+    expect(renderToStaticMarkup(<SourceCard source={source(1, "2025-01-01")} asOf="2026-10-06" />)).toContain("Older than 6 months")
+    expect(renderToStaticMarkup(<SourceCard source={source(1, "2025-01-01")} />)).not.toContain("Older than 6 months")
+  })
+})
+
+describe("SourceList", () => {
+  it("shows the first sources and offers the rest", () => {
+    const html = renderToStaticMarkup(
+      <SourceList sources={[source(1), source(2), source(3)]} initial={2} onExpand={() => undefined} getSourceId={(id) => `s-${id}`} />,
+    )
+    expect(html).toContain('id="s-1"')
+    expect(html).not.toContain('id="s-3"')
+    expect(html).toContain("Show 1 more source")
+  })
+})
+
+describe("CitationMarker and UnsupportedClaim", () => {
+  it("names the marker by number and title", () => {
+    expect(renderToStaticMarkup(<CitationMarker source={source(2)} />)).toContain('aria-label="Source 2: Source 2 title"')
+  })
+
+  it("gives the unsupported mark a reachable button", () => {
+    const html = renderToStaticMarkup(<TooltipProvider><UnsupportedClaim>Prices will rise.</UnsupportedClaim></TooltipProvider>)
+    expect(html).toContain('aria-label="Not backed by a source"')
+    expect(html).toContain("Prices will rise.")
+  })
+})