@veevarts/design-system 2.0.0-alpha.62 → 2.0.0-alpha.63

package/dist/patterns/ArtifactCard/ArtifactCard.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'react';
+import { ArtifactCardProps } from './types';
+/**
+ * A saved artifact (a table, a chart, a report) shown in a conversation or a
+ * list: kind, title, a preview, its save status in words, and the caller's
+ * actions. A HeroUI `Card`.
+ *
+ * The status line is one polite live region whose role never changes, so
+ * "Saving…" turning into "Saved" or "Couldn't save" is announced once, and a
+ * card that mounts already failed (a conversation reopened) interrupts no one.
+ * An assertive error belongs to `AssistantNotice`, as in the rest of the
+ * family. A failed save keeps its preview, so the work stays in view; a
+ * deleted one drops it.
+ */
+export declare function ArtifactCard({ title, kindLabel, icon, status, statusLabel, meta, badge, children, actions, titleAs: TitleElement, className, 'data-testid': dataTestId, }: ArtifactCardProps): JSX.Element;
+export declare namespace ArtifactCard {
+    var displayName: string;
+}
+export default ArtifactCard;

package/dist/patterns/ArtifactCard/index.d.ts

@@ -0,0 +1,2 @@
+export { ArtifactCard } from './ArtifactCard';
+export type { ArtifactCardProps, ArtifactCardStatus } from './types';

package/dist/patterns/ArtifactCard/styles.d.ts

@@ -0,0 +1,31 @@
+import { ArtifactCardStatus } from './types';
+/**
+ * Every slot class of `ArtifactCard`. HeroUI semantic colours only, so the
+ * card works under `.dark`: `content1` card, `divider` edges, `foreground`
+ * text, `default-600` secondary text (it also sits on `default-100`, where
+ * `default-500` falls under 4.5:1). Status tones use the 700 step, which
+ * stays readable in both themes because HeroUI's dark scales are reversed.
+ */
+export declare const artifactCardClass: {
+    readonly base: "w-full border border-default-200 bg-content1 shadow-none";
+    readonly deleted: "border-dashed";
+    readonly header: "flex flex-col items-start gap-1 px-4 pb-0 pt-3";
+    readonly kindRow: "flex min-w-0 flex-wrap items-center gap-2 text-xs text-default-600";
+    readonly kind: "inline-flex items-center gap-1.5 font-medium";
+    readonly badge: "inline-flex items-center gap-1 rounded-md border border-default-300 bg-default-100 px-1.5 py-0.5 text-[0.6875rem] font-semibold uppercase tracking-wide text-default-700";
+    readonly title: "m-0 min-w-0 text-sm font-semibold text-foreground [overflow-wrap:anywhere]";
+    readonly titleDeleted: "text-default-600";
+    readonly meta: "text-xs tabular-nums text-default-600 [overflow-wrap:anywhere]";
+    readonly body: "min-w-0 px-4 py-3";
+    readonly skeleton: "flex flex-col gap-2";
+    readonly skeletonLine: "h-3 rounded-md";
+    /** Three lines of a preview that has not arrived yet. */
+    readonly skeletonWidths: readonly ["w-3/4", "w-full", "w-2/3"];
+    readonly footer: "flex flex-wrap items-center justify-between gap-2 border-t border-divider px-4 py-2.5";
+    readonly status: "flex min-w-0 items-center gap-1.5 text-xs font-medium [overflow-wrap:anywhere]";
+    /** HeroUI's small spinner is 20px; sized to the 14px status icons so the footer keeps its height when the save ends. */
+    readonly spinner: "size-3.5";
+    readonly actions: "flex flex-wrap items-center gap-1.5";
+};
+export declare const artifactCardStatusClass: Record<ArtifactCardStatus, string>;
+export declare const ARTIFACT_CARD_STATUS_ICON: Record<Exclude<ArtifactCardStatus, 'saving'>, string>;

package/dist/patterns/ArtifactCard/types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * Where a saved artifact stands. `saving` while it is written, `saved` once
+ * it is kept, `failed` when it could not be saved (too large, an error), and
+ * `deleted` once its owner removed it.
+ */
+export type ArtifactCardStatus = 'saving' | 'saved' | 'failed' | 'deleted';
+export interface ArtifactCardProps {
+    /** The artifact's title, e.g. "Renewals in Q1 with red health". */
+    title: string;
+    /** What kind of artifact it is, e.g. "Table", "Chart", "Report". */
+    kindLabel: string;
+    /** Iconify name for the kind. */
+    icon?: string;
+    /** Defaults to `saved`. */
+    status?: ArtifactCardStatus;
+    /**
+     * The status in words, always shown: "Saved · private to you", "Saving…",
+     * "Couldn't save: the report is over the size limit", "Deleted".
+     */
+    statusLabel: ReactNode;
+    /** A short line under the title, e.g. "12 rows · 4 columns". */
+    meta?: ReactNode;
+    /** A small marker next to the kind, e.g. "Internal". Styled by the card so it reads the same everywhere. */
+    badge?: ReactNode;
+    /** A preview: the first rows, a small chart, the first lines. Hidden once `deleted`; a skeleton while `saving` without one. */
+    children?: ReactNode;
+    /** Controls (Open, Download, Delete, a narrower request). Rendered as given. */
+    actions?: ReactNode;
+    /** The title's element. Defaults to `p`; pick a heading that fits the page's outline. */
+    titleAs?: 'h2' | 'h3' | 'h4' | 'p';
+    /** Classes on the card. */
+    className?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `artifact-card`. */
+    'data-testid'?: string;
+}

package/dist/patterns/AssistantMarkdown/AssistantMarkdown.d.ts

@@ -0,0 +1,17 @@
+import { JSX } from 'react';
+import { AssistantMarkdownProps } from './types';
+/**
+ * An assistant's answer, rendered from a safe Markdown subset: headings,
+ * paragraphs, lists, bold and italic, inline code, code blocks, tables,
+ * blockquotes and links. No raw HTML, no images, no auto-linked URLs; links
+ * open in a new tab, show their domain, and pass `linkPolicy` first.
+ *
+ * markdown-it parses (a peer dependency, shared with `@tiptap/pm`); every
+ * token is turned into a React element from an allowlist, and nothing reaches
+ * the DOM as HTML.
+ */
+export declare function AssistantMarkdown({ source, linkPolicy, headingOffset, renderCitation, newTabLabel, tableLabel, codeLabel, className, 'data-testid': dataTestId, }: AssistantMarkdownProps): JSX.Element;
+export declare namespace AssistantMarkdown {
+    var displayName: string;
+}
+export default AssistantMarkdown;

package/dist/patterns/AssistantMarkdown/index.d.ts

@@ -0,0 +1,3 @@
+export { AssistantMarkdown } from './AssistantMarkdown';
+export { defaultAssistantLinkPolicy } from './links';
+export type { AssistantMarkdownLinkPolicy, AssistantMarkdownProps } from './types';

package/dist/patterns/AssistantMarkdown/links.d.ts

@@ -0,0 +1,43 @@
+import { AssistantMarkdownLinkPolicy } from './types';
+/**
+ * The href a rendered link may carry, so the domain shown next to it is where
+ * it goes. `AssistantMarkdown` applies it to whatever the link policy returns,
+ * the default or the caller's. Only three schemes get through, plus hrefs with
+ * no scheme:
+ * - `http:` and `https:` must name their host (`https://…`), and come back in
+ *   canonical form, so the domain shown and the target are read from one
+ *   string. `https:evil.example` and `https:/evil.example` read as
+ *   evil.example on their own, but a browser resolves them against the page,
+ *   as paths on the page's own origin: refused (`null`).
+ * - `mailto:` is refused when its address is empty, can't be decoded, or
+ *   holds a control, a space or an invisible format character (a right-to-left
+ *   override would make `moc.doog@live.example` read as an address at
+ *   good.com). Otherwise it comes back rebuilt from that address plus its
+ *   `subject` and `body` fields only: `to=`, `cc=`, `bcc=`, every other field,
+ *   a `subject` or `body` holding an encoded `&`, and the `#` fragment are
+ *   dropped, so the address shown is everyone the email goes to.
+ * - Every other scheme is refused: `javascript:`, `vbscript:`, `data:`,
+ *   `file:`, `tel:` and the rest, however the policy came by it (say, by
+ *   decoding a redirect's `url=` parameter).
+ * - An href with no scheme that names a host (`//evil.example`) leaves the
+ *   page, but no domain can be shown for it: refused. Any other href with no
+ *   scheme (a path on the app) is returned as is.
+ */
+export declare function checkedLinkHref(href: string): string | null;
+/**
+ * The link policy used when the caller passes none: absolute `http://` and
+ * `https://` URLs, and `mailto:`, only (each through `checkedLinkHref`).
+ * markdown-it has already refused `javascript:`, `vbscript:`, `file:` and
+ * non-image `data:` links by then (it lets `data:image/*` through, which this
+ * policy refuses); this also refuses relative links, because only the app
+ * knows where they would go.
+ *
+ * A `mailto:` keeps its address only: `?subject=`, `body=`, `cc=`, `bcc=` and
+ * a `#` fragment are dropped, so a link can't open an email already filled in.
+ */
+export declare const defaultAssistantLinkPolicy: AssistantMarkdownLinkPolicy;
+/**
+ * Where a link goes, shown next to it: the host for `http(s):` (without
+ * `www.`), the address for `mailto:`. Empty when it can't be read.
+ */
+export declare function linkDestination(href: string): string;

package/dist/patterns/AssistantMarkdown/parser.d.ts

@@ -0,0 +1,5 @@
+import { default as MarkdownIt } from 'markdown-it';
+/** markdown-it's token, without importing a deep path that the bundle would also have to keep external. */
+export type MarkdownToken = ReturnType<MarkdownIt['parse']>[number];
+/** One shared parser: building one is the costly part, and its settings never change. */
+export declare function assistantMarkdownParser(): MarkdownIt;

package/dist/patterns/AssistantMarkdown/styles.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Every slot class of `AssistantMarkdown`. HeroUI semantic colours plus
+ * `ai-accent` for links, so the rendered answer works under `.dark`. Text
+ * tones: `foreground` for body, `default-600` for quotes, `default-500` only
+ * for the link domain on a plain card (4.83:1 light, 6.9:1 dark).
+ */
+export declare const assistantMarkdownClass: {
+    readonly root: "min-w-0 space-y-3 text-sm leading-relaxed text-foreground [overflow-wrap:anywhere]";
+    readonly paragraph: "m-0";
+    readonly heading: Record<number, string>;
+    readonly bulletList: "m-0 list-disc space-y-1 ps-5";
+    readonly orderedList: "m-0 list-decimal space-y-1 ps-5";
+    readonly listItem: "ps-1 [&>ol]:mt-1 [&>ul]:mt-1";
+    /** Quoted third-party text (an email, a call note): set apart, never styled as the assistant's own words. */
+    readonly blockquote: "m-0 space-y-2 border-s-2 border-default-300 ps-3 text-default-600";
+    readonly code: "rounded bg-default-100 px-1 py-0.5 font-mono text-[0.8125em]";
+    /** The code block's scroll box: named and focusable like the table's, so a long line can be scrolled by keyboard in every browser. */
+    readonly codeWrap: "max-w-full overflow-x-auto rounded-md bg-default-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ai-focus";
+    readonly pre: "m-0 whitespace-pre p-3 font-mono text-xs [overflow-wrap:normal]";
+    readonly rule: "my-3 border-0 border-t border-divider";
+    readonly tableWrap: "max-w-full overflow-x-auto rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ai-focus";
+    readonly table: "w-full border-collapse text-sm";
+    /**
+     * Cells break between words only (the root's `overflow-wrap: anywhere`
+     * would split them mid-word and squeeze a wide table to fit), and headers
+     * stay on one line, so a wide table scrolls inside its box instead.
+     */
+    readonly headerCell: "whitespace-nowrap border-b border-divider px-2 py-1.5 font-semibold";
+    readonly cell: "border-b border-divider px-2 py-1.5 align-top [overflow-wrap:normal]";
+    readonly align: Record<string, string>;
+    readonly link: "text-ai-accent underline underline-offset-2 hover:no-underline";
+    /**
+     * `inline-block` keeps the link's underline off the domain. `isolate`
+     * keeps a bidi control in the link's text from changing how the domain
+     * reads, even if the box stops being an inline-block.
+     */
+    readonly linkDomain: "inline-block text-default-500 [unicode-bidi:isolate]";
+    readonly srOnly: "sr-only";
+};

package/dist/patterns/AssistantMarkdown/types.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+/**
+ * Decides what a link may do: return the href to use (as is, or rewritten),
+ * or `null` to show the link's text without a link.
+ */
+export type AssistantMarkdownLinkPolicy = (href: string) => string | null;
+export interface AssistantMarkdownProps {
+    /** The Markdown to render. Untrusted: raw HTML, images and bare or angle-bracket URLs render as text. */
+    source: string;
+    /**
+     * Defaults to `defaultAssistantLinkPolicy`: absolute `http://` and `https://`
+     * URLs, and `mailto:` (address only), only. Whatever a policy returns is
+     * checked too, so the domain shown is where the link goes: only `http(s):`,
+     * `mailto:` and hrefs with no scheme can render (`javascript:`, `data:`,
+     * `tel:` and every other scheme are refused); an `http(s)` href must name
+     * its host (`https://…`) and is rendered in canonical form; a `mailto:`
+     * address with a control, a space or an invisible format character (a
+     * bidi override) is refused, and a `mailto:` keeps only its address,
+     * `subject` and `body` (no `to`, `cc`, `bcc`, `#` fragment, or `&` hidden
+     * in a kept value); and an href with no scheme that names a host (`//…`)
+     * is refused.
+     */
+    linkPolicy?: AssistantMarkdownLinkPolicy;
+    /**
+     * Shifts heading levels so an answer fits under the page's own headings:
+     * `#` renders as `h(1 + headingOffset)`, capped at `h6`. Defaults to 2.
+     */
+    headingOffset?: number;
+    /**
+     * Renders each `[n]` in the text (n from 1 to 999), for example with
+     * `CitationMarker`. Not inside link text, where a control would nest in a
+     * link, and not for an escaped `\\[n\\]`. Without it, `[n]` stays text.
+     * A `[n]` inside a quote (`>`) is handed over too, so an answer can cite
+     * the email it quotes; quoted text can also hold a `[n]` the assistant
+     * never wrote, so check `n` against the sources you have.
+     */
+    renderCitation?: (index: number) => ReactNode;
+    /** Read by screen readers after each link. Defaults to "opens in a new tab". */
+    newTabLabel?: string;
+    /** Accessible name of each table's scroll box (a `group`, not a landmark). Defaults to "Table". */
+    tableLabel?: string;
+    /** Accessible name of each code block's scroll box (a `group`, not a landmark). Defaults to "Code". */
+    codeLabel?: string;
+    /** Classes on the root. */
+    className?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `assistant-markdown`. */
+    'data-testid'?: string;
+}

package/dist/patterns/CitationMarker/CitationMarker.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { CitationMarkerProps } from './types';
+/**
+ * A `[n]` marker inside an assistant's answer, pointing at one of its sources.
+ * Pressed, it calls `onSelect` (reveal the source, open it); without
+ * `onSelect` it is plain text with the same look.
+ *
+ * A native `<button>`, not HeroUI's: it sits inside a sentence and must align
+ * to the text baseline at text size, which HeroUI's Button (a fixed-height
+ * control with a minimum width) is not built for.
+ */
+export declare function CitationMarker({ index, label, onSelect, 'data-testid': dataTestId, }: CitationMarkerProps): JSX.Element;
+export declare namespace CitationMarker {
+    var displayName: string;
+}
+export default CitationMarker;

package/dist/patterns/CitationMarker/index.d.ts

@@ -0,0 +1,2 @@
+export { CitationMarker } from './CitationMarker';
+export type { CitationMarkerProps } from './types';

package/dist/patterns/CitationMarker/styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Every slot class of `CitationMarker`. The `ai-*` palette marks it as the
+ * assistant's: `ai-accent` on `ai-fill` measures 5.49:1 light and 8.15:1 dark
+ * (`src/tokens/__test__/assistant-surface.test.ts`), enough for 11px bold.
+ */
+/**
+ * The `[n]` badge, shared with `SourcePill`'s marker: the two exist to be
+ * matched by eye, so they must never drift apart.
+ */
+export declare const citationBadgeClass = "inline-flex items-center rounded border border-ai-border bg-ai-fill px-1 text-[0.6875rem] font-semibold leading-4 tabular-nums text-ai-accent";
+export declare const citationMarkerClass: {
+    /**
+     * Inline in a sentence: baseline-aligned, a left margin only (a right one
+     * would strand the punctuation after it), no fixed height.
+     */
+    readonly base: "ms-0.5 align-baseline inline-flex items-center rounded border border-ai-border bg-ai-fill px-1 text-[0.6875rem] font-semibold leading-4 tabular-nums text-ai-accent";
+    readonly interactive: "cursor-pointer transition-colors hover:border-ai-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ai-focus motion-reduce:transition-none";
+    readonly srOnly: "sr-only";
+};

package/dist/patterns/CitationMarker/types.d.ts

@@ -0,0 +1,13 @@
+export interface CitationMarkerProps {
+    /** What the marker shows: `1` renders as `[1]`; `E1` as `[E1]`. */
+    index: number | string;
+    /**
+     * The accessible name, e.g. "Show source 1: email, Renewal pricing". The
+     * visible `[1]` alone says nothing to a screen reader.
+     */
+    label: string;
+    /** Called when the marker is pressed, typically to reveal its source. Omitted, the marker is plain text. */
+    onSelect?: () => void;
+    /** Test id of the marker. Defaults to `citation-marker-<index>`; pass one per occurrence when a source is cited twice. */
+    'data-testid'?: string;
+}

package/dist/patterns/SourceList/SourceList.d.ts

@@ -0,0 +1,14 @@
+import { SourceListHandle, SourceListProps } from './types';
+/**
+ * The sources behind an assistant's answer, "Sources (n)", grouped by kind
+ * and closed by default. A HeroUI `Accordion` with one item; each source is a
+ * `SourcePill`.
+ *
+ * `reveal(id)` (through a ref) opens the list, moves focus to one source and
+ * scrolls it into view, so a `CitationMarker` can lead to the source it
+ * points at.
+ */
+export declare const SourceList: import('react').ForwardRefExoticComponent<SourceListProps & import('react').RefAttributes<SourceListHandle>> & {
+    displayName: string;
+};
+export default SourceList;

package/dist/patterns/SourceList/index.d.ts

@@ -0,0 +1,2 @@
+export { SourceList } from './SourceList';
+export type { SourceListHandle, SourceListItem, SourceListProps } from './types';

package/dist/patterns/SourceList/styles.d.ts

@@ -0,0 +1,20 @@
+/** Every slot class of `SourceList`. HeroUI semantic colours only. */
+export declare const sourceListClass: {
+    readonly base: "w-full px-0";
+    readonly item: "shadow-none";
+    readonly trigger: "gap-2 py-1.5 motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly title: "text-sm font-medium text-default-700";
+    readonly count: "ms-1 tabular-nums text-default-600";
+    readonly indicator: "text-default-500";
+    readonly content: "pb-2 pt-0";
+    readonly groups: "flex flex-col gap-3";
+    readonly group: "flex flex-col gap-1.5";
+    readonly groupLabel: "m-0 text-xs font-semibold uppercase tracking-wide text-default-600";
+    readonly list: "m-0 flex list-none flex-wrap gap-1.5 p-0";
+    /**
+     * The item takes focus only from `reveal()`, a script focus that follows a
+     * mouse click as often as a key, and `:focus-visible` would not match the
+     * click. So the ring is on `:focus`: the revealed source is marked either way.
+     */
+    readonly listItem: "max-w-full rounded-full outline-none focus:ring-2 focus:ring-ai-focus";
+};

package/dist/patterns/SourceList/types.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { SourcePillProps } from '../SourcePill';
+export interface SourceListItem extends Omit<SourcePillProps, 'data-testid'> {
+    /** Stable key; also what `reveal(id)` takes. */
+    id: string;
+    /** Sources with the same `groupKey` are listed together, groups in order of first appearance. */
+    groupKey: string;
+    /** The group's heading, e.g. "Emails". */
+    groupLabel: string;
+}
+export interface SourceListHandle {
+    /** Opens the list and moves focus to the source with this id, e.g. when its `[n]` is pressed. */
+    reveal: (id: string) => void;
+}
+export interface SourceListProps {
+    /** The sources: each a `SourcePill`'s props plus its `id` and group. */
+    items: SourceListItem[];
+    /** The toggle's text, e.g. "Sources". The count is added after it. */
+    title: ReactNode;
+    /** Plain-text `title`, needed when `title` is not a string (React Aria's type-to-select). */
+    titleText?: string;
+    /** Controlled open state. */
+    isExpanded?: boolean;
+    /** Uncontrolled initial state. Defaults to closed. */
+    defaultExpanded?: boolean;
+    /** Called when the list opens or closes, including when `reveal` opens it. */
+    onExpandedChange?: (isExpanded: boolean) => void;
+    /** Classes on the accordion. */
+    className?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `source-list`. */
+    'data-testid'?: string;
+}

package/dist/patterns/SourcePill/SourcePill.d.ts

@@ -0,0 +1,13 @@
+import { JSX } from 'react';
+import { SourcePillProps } from './types';
+/**
+ * One source an assistant used: its kind, title and date, with the `[n]` it
+ * answers to in the text. With `onOpen` it is a button that opens the source;
+ * without it, plain text. A source that can no longer be opened says why, in
+ * words, instead of showing a dead button.
+ */
+export declare function SourcePill({ kindLabel, title, date, icon, marker, onOpen, isDisabled, disabledReason, 'data-testid': dataTestId, }: SourcePillProps): JSX.Element;
+export declare namespace SourcePill {
+    var displayName: string;
+}
+export default SourcePill;

package/dist/patterns/SourcePill/index.d.ts

@@ -0,0 +1,2 @@
+export { SourcePill } from './SourcePill';
+export type { SourcePillProps } from './types';

package/dist/patterns/SourcePill/styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Every slot class of `SourcePill`. HeroUI semantic colours plus the `ai-*`
+ * marker badge. Secondary text is `default-600`, because the pill's hover fill
+ * is `default-100` and `default-500` falls under 4.5:1 there.
+ */
+export declare const sourcePillClass: {
+    readonly base: "inline-flex h-auto min-h-8 min-w-0 max-w-full items-center justify-start gap-1.5 rounded-full border border-default-200 bg-content1 px-2.5 py-1 text-xs text-foreground";
+    readonly interactive: "data-[hover=true]:bg-default-100 data-[focus-visible=true]:outline-none data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ai-focus";
+    readonly disabled: "border-dashed";
+    /** The same badge as `CitationMarker`, so `[n]` in the text and on the pill match. */
+    readonly marker: "flex-none inline-flex items-center rounded border border-ai-border bg-ai-fill px-1 text-[0.6875rem] font-semibold leading-4 tabular-nums text-ai-accent";
+    readonly srOnly: "sr-only";
+    readonly icon: "flex-none text-default-600";
+    readonly kind: "flex-none font-semibold";
+    readonly title: "min-w-0 truncate";
+    readonly date: "flex-none tabular-nums text-default-600";
+    readonly reason: "flex flex-none items-center gap-1 text-default-600";
+    readonly separator: "flex-none text-default-600";
+};

package/dist/patterns/SourcePill/types.d.ts

@@ -0,0 +1,20 @@
+export interface SourcePillProps {
+    /** What kind of source it is, e.g. "Email", "Call", "Case". */
+    kindLabel: string;
+    /** The source's short title. Long titles are cut with an ellipsis; the full text stays in the accessible name. */
+    title: string;
+    /** A preformatted date, e.g. "12 Oct". */
+    date?: string;
+    /** Iconify name for the kind. */
+    icon?: string;
+    /** The `[n]` this source answers to in the text, shown first so the two can be matched by eye. */
+    marker?: number | string;
+    /** Opens the source. Omitted, the pill is plain text. */
+    onOpen?: () => void;
+    /** The source can't be opened (deleted, no longer linked). Shown with `disabledReason`, never as a dead button. */
+    isDisabled?: boolean;
+    /** Why it can't be opened, shown next to it, e.g. "No longer available". */
+    disabledReason?: string;
+    /** Test id of the root; its parts add suffixes (see Test ids in the docs). Defaults to `source-pill`. */
+    'data-testid'?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@veevarts/design-system",
     "private": false,
-    "version": "2.0.0-alpha.62",
+    "version": "2.0.0-alpha.63",
     "type": "module",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -112,6 +112,7 @@
         "@tiptap/pm": "^2.27.0",
         "@tiptap/react": "^2.27.0",
         "@tiptap/starter-kit": "^2.27.0",
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^24.10.9",
         "@types/react": "^19.2.5",
         "@types/react-dom": "^19.2.3",
@@ -127,6 +128,7 @@
         "globals": "^16.5.0",
         "jsdom": "^27.4.0",
         "lucide-react": "^0.562.0",
+        "markdown-it": "^14.1.0",
         "playwright": "^1.56.1",
         "postcss": "^8.5.6",
         "react": "19.2.3",