@mastra/playground-ui 68.0.0-alpha.2 → 68.0.0

package/dist/src/domains/knowledge/lib/graphShape.d.ts

@@ -0,0 +1,131 @@
+/**
+ * The graph's shape around one focused page: how far each page sits from the focus along parent links,
+ * which pages draw as full labelled circles and which as small dots, and where each one goes on a
+ * radial layout. Pure, so the depth rule and the layout are unit-tested without React Flow.
+ */
+import type { KnowledgePagePayload } from '../pageTypes';
+/** Why a page far from the focus still draws as a labelled circle. */
+export type GraphLevel = 'scope' | 'ancestor';
+/** Most scopes and ancestors beyond the first ring that draw as circles; any more fall back to dots. */
+export declare const HIGHER_LEVEL_CAP = 10;
+/** Full circles carry a label; dots are small coloured markers that name themselves on hover. */
+export type GraphNodeForm = 'full' | 'dot';
+/** Pages at most this many parent links from the focus draw as full circles. */
+export declare const FULL_CIRCLE_DEPTH = 1;
+/**
+ * How many pages one level farther out than the usual circles still draw as circles, so a page with no
+ * children reads like a focused scope instead of a ring of bare dots. The rest of that level, and the level
+ * below, are dots.
+ */
+export declare const ROOT_CIRCLE_CAP = 8;
+/**
+ * The pages promoted to circles at depth two: for a centre with no children, its first siblings, the children
+ * of its parent, since those are the pages around it. A centre with children needs no promotion: its own
+ * children are the circles.
+ */
+export declare function promotedCircles(children: ReadonlyMap<string, readonly KnowledgePagePayload[]>, center: KnowledgePagePayload | undefined): Set<string>;
+/** A dot's diameter. */
+export declare const KNOWLEDGE_DOT_SIZE = 20;
+/** A dot's diameter when it carries its link count. */
+export declare const KNOWLEDGE_COUNTED_DOT_SIZE = 28;
+/** How far past its edge a dot still counts as under the pointer. */
+export declare const KNOWLEDGE_DOT_HIT_MARGIN = 8;
+/** A stand-in dot for a child that hasn't loaded yet; `parentId` is the page whose children it stands for. */
+export declare function isChildPlaceholder(page: Pick<KnowledgePagePayload, 'id'>): boolean;
+/** The circle that says how many more children the centre has than are drawn; it opens nothing. */
+export declare function isRestCircle(page: Pick<KnowledgePagePayload, 'id'>): boolean;
+/** One circle standing for several sibling scopes of one type, e.g. a resource's memory threads. */
+export declare function isScopeGroup(page: Pick<KnowledgePagePayload, 'id'>): boolean;
+export interface GraphShape {
+    /** Parent links between each page and the focus; the focus is 0. Pages the focus can't reach are left out. */
+    depth: Map<string, number>;
+    form: Map<string, GraphNodeForm>;
+    /** The page one link from the focus that each farther page hangs under, so its dot takes that branch's colour. */
+    branch: Map<string, string>;
+    /** The page each one was reached from, walking out from the focus. */
+    via: Map<string, string | null>;
+    /** Pages that sit above others and always draw as labelled circles: scopes, and the focus's ancestors. */
+    level: Map<string, GraphLevel>;
+    /** The focus's link ends drawn as circles: farther pages, not neighbours in the hierarchy. */
+    linked: Set<string>;
+    /** The page the layout centres on: the focus, else the first root; `null` only when there are no pages. */
+    center: string | null;
+}
+/**
+ * Walks parent links out from `focusId` (or, with no focus, from the roots), so each page's depth is how
+ * many links it sits from the focus, whichever way they run: the focus's parent and its children are 1,
+ * its siblings and grandchildren 2. The focus and pages within {@link FULL_CIRCLE_DEPTH} are full circles;
+ * every other page, every page the walk never reaches, and every placeholder is a dot. With no focus the
+ * first root becomes the centre and the other roots sit one link from it. A root is any page whose parent is not loaded, so a page cut off from its parent by a bounded graph is a root too.
+ */
+export declare function graphShape(pages: readonly KnowledgePagePayload[], focusId: string | null, linkEnds?: ReadonlySet<string>): GraphShape;
+type Point = {
+    x: number;
+    y: number;
+};
+/**
+ * Places the focus at the centre and every other page on the ring for its depth, each page's children in
+ * a slice of the circle taken out of its parent's slice, sized by how much hangs under each one (a full
+ * circle counts for more than a dot). The focus's parent gets the slice at the top. Dots that don't fit
+ * along their ring stagger outward in rows. Pages the walk never reached go on one outer ring, except
+ * those in `near` (the focus's links), which sit on a ring close around the focus so they stay in view.
+ */
+export declare function radialLayout(pages: readonly KnowledgePagePayload[], shape: GraphShape, sizeOf: (page: KnowledgePagePayload) => number, near?: ReadonlySet<string>): Map<string, Point>;
+/** Colours for the dots of each branch around the focus, in branch order. */
+export declare const BRANCH_COLORS: string[];
+/** One colour per branch, in the order the branches sit around the focus. */
+export declare function branchColors(pages: readonly KnowledgePagePayload[], shape: GraphShape): Map<string, string>;
+/** Framing never zooms out past this, so circle names stay readable; a bigger graph is panned, not shrunk. */
+export declare const READABLE_MIN_ZOOM = 0.7;
+/** Children a drawn page shows at most; the rest are counted, not drawn. */
+export declare const GRAPH_CHILD_CAP = 48;
+/** How many more children a click on a "+N more" circle draws. */
+export declare const REST_BATCH = 12;
+/** Stand-in dots drawn at most for a page whose children haven't loaded yet. */
+export declare const PLACEHOLDER_CAP = 8;
+/** Most circles whose children are loaded just to draw them as dots around it. */
+export declare const WANTED_CIRCLE_CAP = 24;
+/** Roots drawn beside the root at the centre when nothing is focused. */
+export declare const SIBLING_ROOT_CAP = 8;
+/** Children around a page that fit at full size; past this the circles shrink to make room. */
+export declare const CROWD_START = 16;
+/** Smallest a crowded ring's circles shrink to, as a fraction of their usual size. */
+export declare const CROWD_MIN_SCALE = 0.7;
+/** How much to shrink each of `count` circles sharing a ring, so a page with dozens of children still fits. */
+export declare function crowdScale(count: number): number;
+/** Sibling scopes of one type (e.g. `thread`) collapse into one circle from this many. */
+export declare const SCOPE_GROUP_MIN = 3;
+export interface LazyGraphInput {
+    /** Every page loaded so far (tree levels, the focused page's path), live or not. */
+    pages: readonly KnowledgePagePayload[];
+    /** Parents whose first level of children has loaded; `rootKey` stands for the root scopes. */
+    loadedParents: ReadonlySet<string>;
+    rootKey: string;
+    focusId: string | null;
+    /** Scope groups the user opened, by group id. */
+    openGroups: ReadonlySet<string>;
+    /** Children drawn past the cap, per parent: what clicks on its "+N more" circle have revealed. */
+    revealed?: ReadonlyMap<string, number>;
+    cap?: number;
+}
+export interface LazyGraph {
+    pages: KnowledgePagePayload[];
+    /** Per drawn page whose children have loaded: how many of them are drawn and how many are not. */
+    hiddenChildren: Map<string, {
+        hidden: number;
+        drawn: number;
+    }>;
+    /** Pages the graph wants the next level of: the focus and its parent, or the roots with no focus. */
+    wanted: string[];
+    /** The page the layout centres on: the focus, or with nothing focused the first root scope. */
+    hub: string | null;
+}
+/**
+ * What a lazily loaded graph draws: the focus (or the root scopes), everything within two parent links
+ * of it, and the focus's path up to its root. A page's children are capped; sibling scopes of one type
+ * past {@link SCOPE_GROUP_MIN} collapse into one group circle unless opened (never under the focus
+ * itself); a full-circle page whose children haven't loaded gets stand-in dots, one per child up to
+ * {@link PLACEHOLDER_CAP}.
+ */
+export declare function lazyGraph(input: LazyGraphInput): LazyGraph;
+export {};

package/dist/src/domains/knowledge/lib/linkCountsText.d.ts

@@ -0,0 +1,5 @@
+/** `4 links in, 14 links out`: what the arrows in a link badge say, for its label and a page's tooltip. */
+export declare function linkCountsText(links: {
+    in: number;
+    out: number;
+}, notShown?: number): string;

package/dist/src/domains/knowledge/lib/pageAddress.d.ts

@@ -0,0 +1,5 @@
+import type { KnowledgePagePayload } from '../pageTypes';
+/** The page's place from its root scope down, through the pages the graph holds. */
+export declare function pagePath(page: KnowledgePagePayload, byId: ReadonlyMap<string, KnowledgePagePayload>): string;
+/** How the page is addressed: its scope's address, then the keys down to it. Scopes are just their address. */
+export declare function pageRef(page: KnowledgePagePayload, byId: ReadonlyMap<string, KnowledgePagePayload>): string | undefined;

package/dist/src/domains/knowledge/lib/pageGraph.d.ts

@@ -1,6 +1,6 @@
 /**
  * Pure page-graph logic for the schema-4 explorer: parent links plus resolved
- * mentions between loaded pages → React Flow nodes and edges. Every scope is
+ * mentions and body links between loaded pages → React Flow nodes and edges. Every scope is
  * one size and every page another, so a circle's size says what it is and its
  * name always fits inside.
  */
@@ -8,10 +8,10 @@ import type { Edge, Node } from '@xyflow/react';
 import type { KnowledgePageEdge, KnowledgePagePayload, KnowledgeScopeGrantPayload } from '../pageTypes';
 /**
  * Edges among loaded, live pages: a parent edge for every loaded parent, and
- * the given mention edges merged per source → target (counts summed). Self
- * mentions and edges to unloaded pages are dropped.
+ * the given mention and body-link edges merged per kind and source → target
+ * (counts summed). Self links and edges to unloaded pages are dropped.
  */
-export declare function pageGraphEdges(pages: KnowledgePagePayload[], mentionEdges?: KnowledgePageEdge[]): KnowledgePageEdge[];
+export declare function pageGraphEdges(pages: KnowledgePagePayload[], linkEdges?: KnowledgePageEdge[]): KnowledgePageEdge[];
 /** Id of the placeholder circle for a declared principal that has no scope page yet. */
 export declare function unplacedScopeId(address: string): string;
 /**

package/dist/src/domains/knowledge/lib/pageRefs.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Resolves `[[ref]]` links in page bodies and notes against the pages the explorer has loaded, in the
+ * order core's `run.page(ref)` uses: page id, then `scope#key/key` path, then scope address, then a
+ * unique page name (an ambiguous name resolves to nothing, as it throws in core). The server does not
+ * resolve body links, so a link to a page outside the loaded set stays unresolved.
+ */
+import type { KnowledgePageEdge, KnowledgePagePayload } from '../pageTypes';
+export interface KnowledgePageRefIndex {
+    resolve: (ref: string) => KnowledgePagePayload | undefined;
+}
+export declare function knowledgePageRefIndex(pages: Iterable<KnowledgePagePayload>): KnowledgePageRefIndex;
+/** The `[[ref]]`s in a markdown body, outside code. */
+export declare function bodyLinkRefs(body: string): string[];
+/** One `link` edge per page whose body links another loaded page; `count` is how many times. */
+export declare function bodyLinkEdges(pages: KnowledgePagePayload[]): KnowledgePageEdge[];

package/dist/src/domains/knowledge/lib/pageTree.d.ts

@@ -26,3 +26,5 @@ export declare function buildPageTree(pages: KnowledgePagePayload[]): KnowledgeP
 export declare function visiblePageRows(roots: KnowledgePageTreeNode[], expanded: ReadonlySet<string>): KnowledgePageTreeRow[];
 /** Ids from the root down to (not including) `pageId`; stops at unloaded parents and cycles. */
 export declare function pageAncestorIds(pages: KnowledgePagePayload[], pageId: string): string[];
+/** A page's child count as shown: `1000+` when the server capped the count, so it never reads low. */
+export declare function childCountLabel(page: KnowledgePagePayload): string;

package/dist/src/domains/knowledge/lib/remarkKnowledgeLinks.d.ts

@@ -0,0 +1,13 @@
+import type { Root } from 'mdast';
+/** The hast property a `[[ref]]` carries on its `<span>`; react-markdown hands it to the `span` override. */
+export declare const KNOWLEDGE_REF_PROPERTY = "dataKnowledgeRef";
+/** Set to `'bare'` on a ref written without `[[ ]]`: it only looks like an address, so a host links it once the page resolves. */
+export declare const KNOWLEDGE_BARE_PROPERTY = "dataKnowledgeBare";
+/**
+ * A remark plugin that turns each `[[ref]]` in markdown prose into `<span data-knowledge-ref="ref">ref</span>`,
+ * for a `span` override to draw as a page link. It only splits text nodes, so code, inline code and
+ * existing links are left alone, and the ref stays text: nothing in a body becomes markup.
+ */
+export declare function remarkKnowledgeLinks(): (tree: Root) => void;
+/** `remarkKnowledgeLinks` for chat prose, where a model also writes a page's address bare. */
+export declare function remarkKnowledgeChatLinks(): (tree: Root) => void;

package/dist/src/domains/knowledge/lib/tooltipSide.d.ts

@@ -0,0 +1,40 @@
+export interface Box {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export type TooltipSide = 'top' | 'bottom' | 'right' | 'left';
+export interface TooltipPlacementInput {
+    /** The hovered dot, in the same coordinates as everything else (the screen). */
+    dot: Box;
+    /** The tooltip's size once drawn. */
+    tip: {
+        width: number;
+        height: number;
+    };
+    /** Space between the dot and the tooltip. */
+    gap: number;
+    /** The tooltip must stay inside this. */
+    bounds: Box;
+    /** Things the tooltip must not cover: the focused page, the hovered page's neighbours, the legend, buttons. */
+    obstacles: readonly Box[];
+    /** Lines it must not cover: the hovered page's highlighted edges, as endpoints. */
+    lines: ReadonlyArray<{
+        from: {
+            x: number;
+            y: number;
+        };
+        to: {
+            x: number;
+            y: number;
+        };
+    }>;
+}
+/** Where the tooltip would sit on a side of the dot, centred on it. */
+export declare function tooltipBox(side: TooltipSide, { dot, tip, gap }: Pick<TooltipPlacementInput, 'dot' | 'tip' | 'gap'>): Box;
+/**
+ * Picks the side of the dot whose tooltip covers the least: leaving the bounds costs most, then covering a
+ * line, then covering a page. With nothing in the way (or nothing measured) it stays above.
+ */
+export declare function chooseTooltipSide(input: TooltipPlacementInput): TooltipSide;

package/dist/src/domains/knowledge/lib/useLeavingNodes.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+/** How long a view change takes: nodes glide, resize and fade over this. */
+export declare const KNOWLEDGE_GRAPH_TRANSITION_MS = 700;
+/** Whether the person has not asked the system to cut motion. Without `matchMedia` (a test DOM) nothing animates. */
+export declare function prefersMotion(): boolean;
+/**
+ * The nodes plus, for one transition after a view change, the nodes that just left: drawn where they were,
+ * then faded out, so a page that is not in the next view fades instead of vanishing. With `enabled` false
+ * (reduced motion) it returns the nodes untouched.
+ */
+export declare function useLeavingNodes<N extends {
+    id: string;
+    style?: CSSProperties;
+}>(nodes: N[], enabled: boolean): N[];

package/dist/src/domains/knowledge/lib/useStableWhile.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The previous value for as long as `equal` says the new one is the same. Hosts hand back fresh arrays
+ * every render (a list of query results, say); anything built from them would otherwise change every render.
+ */
+export declare function useStableWhile<T>(next: T, equal: (previous: T, next: T) => boolean): T;

package/dist/src/domains/knowledge/pageTypes.d.ts

@@ -35,6 +35,10 @@ export interface KnowledgePagePayload {
     createdAt: string;
     updatedAt: string;
     deletedAt?: string;
+    /** Pages (and, for a scope, child scopes) directly under this one; tree levels only, from servers that count them. */
+    childCount?: number;
+    /** The server stopped counting child scopes at its scan limit, so `childCount` is a lower bound. */
+    childCountCapped?: boolean;
 }
 export interface KnowledgeNotePayload {
     id: string;
@@ -70,12 +74,13 @@ export interface KnowledgePageActivityPayload {
 /**
  * A graph edge between two pages. `parent`: tree containment (parent → child).
  * `mention`: notes on `source` mention `target`; `count` is how many.
+ * `link`: the body of `source` links `target` with `[[ref]]`; `count` is how many times.
  * `grant`: the `source` scope's holders get `role` on the `target` scope.
  */
 export interface KnowledgePageEdge {
     source: string;
     target: string;
-    kind: 'parent' | 'mention' | 'grant';
+    kind: 'parent' | 'mention' | 'link' | 'grant';
     count?: number;
     role?: KnowledgeRolePayload;
 }

package/dist/src/ds/components/DateTimeRangePicker/date-time-range-picker.d.ts

@@ -1,6 +1,12 @@
 import type { Ref } from 'react';
 import type { TextButtonSize } from '../Button/Button';
 export type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';
+/** A fixed range offered beside the presets, e.g. the current billing period. */
+export type DateTimeRangePickerNamedRange = {
+    label: string;
+    from: Date;
+    to?: Date;
+};
 export interface DateTimeRangePickerProps {
     preset?: DateRangePreset;
     onPresetChange?: (preset: DateRangePreset) => void;
@@ -19,6 +25,11 @@ export interface DateTimeRangePickerProps {
     minDate?: Date;
     /** Subset of presets to show. If omitted, all presets are shown. */
     presets?: readonly DateRangePreset[];
+    /**
+     * Fixed ranges listed above the presets, e.g. `{ label: 'This period', from: periodStart }`.
+     * Picking one applies it as a custom range; while it's applied the trigger shows its label.
+     */
+    namedRanges?: readonly DateTimeRangePickerNamedRange[];
     /** Size of the trigger Button. Defaults to 'sm', the toolbar rung. */
     size?: TextButtonSize;
     /**
@@ -31,4 +42,4 @@ export interface DateTimeRangePickerProps {
     /** The trigger Button. */
     ref?: Ref<HTMLButtonElement>;
 }
-export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, maxRangeMs, minDate, presets, size, defaultPreset, onReset, ref, }: DateTimeRangePickerProps): import("react").JSX.Element;
+export declare function DateTimeRangePicker({ preset, onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, maxRangeMs, minDate, presets, namedRanges, size, defaultPreset, onReset, ref, }: DateTimeRangePickerProps): import("react").JSX.Element;

package/dist/src/ds/components/MarkdownRenderer/markdown-renderer.d.ts

@@ -1,4 +1,6 @@
+import type { Components, Options } from 'react-markdown';
 export type MarkdownExternalLinkTarget = 'tab' | 'window';
+type RemarkPlugins = NonNullable<Options['remarkPlugins']>;
 export interface MarkdownRendererProps {
     children: string;
     className?: string;
@@ -7,6 +9,10 @@ export interface MarkdownRendererProps {
     streaming?: boolean;
     /** Opt in to table copy/download controls; disabled while this text is streaming. */
     tableActions?: boolean;
+    /** Remark plugins run after the built-in ones, e.g. to turn a syntax of the host's into elements. Keep it stable. */
+    remarkPlugins?: RemarkPlugins;
+    /** Element overrides merged over the built-in ones. Keep it stable: a new object re-renders every block. */
+    components?: Components;
 }
 /**
  * Renders a markdown string. Agent output can carry attacker-influenced text
@@ -27,4 +33,5 @@ export interface MarkdownRendererProps {
  * halfway through reading would be both a lie and a screenful of animations at
  * once.
  */
-export declare const MarkdownRenderer: import("react").MemoExoticComponent<({ children, className, externalLinkTarget, streaming, tableActions, }: MarkdownRendererProps) => import("react").JSX.Element>;
+export declare const MarkdownRenderer: import("react").MemoExoticComponent<({ children, className, externalLinkTarget, streaming, tableActions, remarkPlugins: extraRemarkPlugins, components: extraComponents, }: MarkdownRendererProps) => import("react").JSX.Element>;
+export {};

package/dist/src/ds/components/MetricsCard/metrics-card-headline.d.ts

@@ -1,7 +1,7 @@
 /**
  * The header of a card with one large chart (an explorer, a detail page): the label over a large
  * value, the change against the previous period beside it. Cards in a grid use the compact title
- * and `MetricsCard.Total` instead. A skeleton while loading, in the value's own line box.
+ * and `MetricsCard.Total` instead. A skeleton while loading, at the value's own trimmed height.
  */
 export declare function MetricsCardHeadline({ label, value, change, isLoading, className, }: {
     label: string;

package/dist/src/ds/components/MetricsLineChart/metrics-line-chart.d.ts

@@ -57,6 +57,14 @@ export type MetricsLineChartProps = {
     showYAxis?: boolean;
     /** Show a ghost of the chart while data loads, in the chart's own footprint. */
     isLoading?: boolean;
+    /**
+     * Vertical lines at buckets, e.g. where a billing period starts. `x` must be one of the data's
+     * `xKey` values: the axis is categorical, so any other value draws nothing.
+     */
+    markers?: {
+        x: string;
+        label?: string;
+    }[];
     className?: string;
 };
 export declare function MetricsLineChart(props: MetricsLineChartProps): import("react").JSX.Element;

package/dist/src/ds/components/ai/tool-call/tool-phrases.d.ts

@@ -120,6 +120,12 @@ declare const KIND_PHRASES: {
         one: string;
         many: string;
     };
+    'List knowledge': {
+        live: string;
+        done: string;
+        one: string;
+        many: string;
+    };
     'Edit page': {
         live: string;
         done: string;

package/dist/style.css

@@ -806,6 +806,10 @@
     top: calc(var(--spacing) * 12);
   }
 
+  .top-full {
+    top: 100%;
+  }
+
   .-right-1 {
     right: calc(var(--spacing) * -1);
   }
@@ -850,6 +854,10 @@
     right: calc(var(--spacing) * 4);
   }
 
+  .right-full {
+    right: 100%;
+  }
+
   .right-px {
     right: 1px;
   }
@@ -862,10 +870,18 @@
     bottom: 0;
   }
 
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
+
   .bottom-\[calc\(100\%\+0\.5rem\)\] {
     bottom: calc(100% + .5rem);
   }
 
+  .bottom-full {
+    bottom: 100%;
+  }
+
   .bottom-px {
     bottom: 1px;
   }
@@ -1790,6 +1806,10 @@
     margin-right: auto;
   }
 
+  .-mb-1 {
+    margin-bottom: calc(var(--spacing) * -1);
+  }
+
   .-mb-12 {
     margin-bottom: calc(var(--spacing) * -12);
   }
@@ -3975,6 +3995,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-y-1\/2 {
+    --tw-translate-y: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .scale-50 {
     --tw-scale-x: 50%;
     --tw-scale-y: 50%;
@@ -4025,6 +4050,10 @@
     rotate: 0deg;
   }
 
+  .rotate-45 {
+    rotate: 45deg;
+  }
+
   .rotate-90 {
     rotate: 90deg;
   }
@@ -6620,6 +6649,10 @@
     padding-left: 0 !important;
   }
 
+  .pl-0\.5 {
+    padding-left: calc(var(--spacing) * .5);
+  }
+
   .pl-1 {
     padding-left: var(--spacing);
   }
@@ -6724,6 +6757,10 @@
     vertical-align: middle;
   }
 
+  .align-text-bottom {
+    vertical-align: text-bottom;
+  }
+
   .align-top {
     vertical-align: top;
   }
@@ -7003,6 +7040,10 @@
     text-wrap: wrap;
   }
 
+  .\[overflow-wrap\:normal\] {
+    overflow-wrap: normal;
+  }
+
   .break-words {
     overflow-wrap: break-word;
   }
@@ -8064,6 +8105,10 @@
     user-select: none;
   }
 
+  .\!paused {
+    animation-play-state: paused !important;
+  }
+
   .\[--attachment-action-inset\:--spacing\(1\)\] {
     --attachment-action-inset: var(--spacing);
   }
@@ -9776,6 +9821,10 @@
       border-color: var(--border-strong);
     }
 
+    .hover\:border-foreground:hover {
+      border-color: var(--foreground);
+    }
+
     .hover\:bg-badge-amber-strong:hover {
       background-color: var(--badge-amber-strong);
     }
@@ -10332,11 +10381,19 @@
     color: var(--placeholder);
   }
 
+  .disabled\:opacity-40:disabled {
+    opacity: .4;
+  }
+
   .disabled\:opacity-50:disabled {
     opacity: .5;
   }
 
   @media (hover: hover) {
+    .disabled\:hover\:bg-card:disabled:hover {
+      background-color: var(--card);
+    }
+
     .disabled\:hover\:text-muted-foreground:disabled:hover {
       color: var(--muted-foreground);
     }
@@ -10694,8 +10751,16 @@
     border-color: var(--destructive-indicator);
   }
 
-  .aria-pressed\:bg-muted[aria-pressed="true"] {
-    background-color: var(--muted);
+  .aria-pressed\:border-transparent[aria-pressed="true"] {
+    border-color: #0000;
+  }
+
+  .aria-pressed\:bg-fill-inverse[aria-pressed="true"] {
+    background-color: var(--fill-inverse);
+  }
+
+  .aria-pressed\:text-background[aria-pressed="true"] {
+    color: var(--background);
   }
 
   .aria-pressed\:before\:bg-fill[aria-pressed="true"]:before {
@@ -10703,6 +10768,12 @@
     background-color: var(--fill);
   }
 
+  @media (hover: hover) {
+    .aria-pressed\:hover\:bg-fill-inverse[aria-pressed="true"]:hover {
+      background-color: var(--fill-inverse);
+    }
+  }
+
   .aria-selected\:bg-fill[aria-selected="true"] {
     background-color: var(--fill);
   }

package/dist/{tool-approval-1qiB4hhG.cjs → tool-approval-CJvPDL7D.cjs}

@@ -1,8 +1,8 @@
 const require_Button = require("./Button-DLcMcuUL.cjs");
 const require_Txt = require("./Txt-BnoSqxKE.cjs");
-const require_tool_call = require("./tool-call-Bu66PkD-.cjs");
-const require_tool_presentation = require("./tool-presentation-CQlDEwgS.cjs");
-const require_activity = require("./activity-DyB5H3gF.cjs");
+const require_tool_call = require("./tool-call-DBn14X-3.cjs");
+const require_tool_presentation = require("./tool-presentation-D6nzVruN.cjs");
+const require_activity = require("./activity-CcQZeDYi.cjs");
 const require_Badge = require("./Badge-DZ6r6bcw.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
@@ -112,4 +112,4 @@ Object.defineProperty(exports, "ToolApprovalStatus", {
 	}
 });
 
-//# sourceMappingURL=tool-approval-1qiB4hhG.cjs.map
+//# sourceMappingURL=tool-approval-CJvPDL7D.cjs.map

package/dist/{tool-approval-1qiB4hhG.cjs.map → tool-approval-CJvPDL7D.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"tool-approval-1qiB4hhG.cjs","names":["ShieldCheck","Check","X","Badge","Button","presentTool","Activity","ActivityTrigger","ActivityHeader","ActivityIcon","Txt","ActivityContent","ToolCallArguments"],"sources":["../src/ds/components/ai/tool-approval/tool-approval.tsx"],"sourcesContent":["import { Check, ShieldCheck, X } from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { Activity, ActivityContent, ActivityHeader, ActivityIcon, ActivityTrigger } from '../activity';\nimport { presentTool, ToolCallArguments } from '../tool-call';\nimport { Badge } from '@/ds/components/Badge';\nimport type { BadgeVariant } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\ntype ToolApprovalDecision = 'approved' | 'declined';\n\nconst approvalStates = {\n  pending: { label: 'Approval required', variant: 'warning', icon: ShieldCheck },\n  approved: { label: 'Approved', variant: 'success', icon: Check },\n  declined: { label: 'Declined', variant: 'neutral', icon: X },\n} satisfies Record<'pending' | ToolApprovalDecision, { label: string; variant: BadgeVariant; icon: LucideIcon }>;\n\nexport interface ToolApprovalStatusProps {\n  status?: ToolApprovalDecision;\n}\n\nexport function ToolApprovalStatus({ status }: ToolApprovalStatusProps) {\n  const { label, variant, icon: StatusIcon } = approvalStates[status ?? 'pending'];\n  return (\n    <span role=\"status\" className=\"inline-flex shrink-0\">\n      <Badge variant={variant} emphasis=\"subtle\" size=\"sm\" icon={<StatusIcon aria-hidden />}>\n        {label}\n      </Badge>\n    </span>\n  );\n}\n\nexport interface ToolApprovalActionsProps {\n  onApprove: () => void;\n  onDecline: () => void;\n  disabled?: boolean;\n  toolName?: string;\n  autoFocus?: boolean;\n}\n\nexport function ToolApprovalActions({\n  onApprove,\n  onDecline,\n  disabled = false,\n  toolName,\n  autoFocus = false,\n}: ToolApprovalActionsProps) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Button\n        type=\"button\"\n        variant=\"primary\"\n        size=\"sm\"\n        icon={<Check aria-hidden />}\n        aria-label={toolName ? `Approve ${toolName}` : undefined}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onClick={onApprove}\n      >\n        Approve\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        icon={<X aria-hidden />}\n        aria-label={toolName ? `Decline ${toolName}` : undefined}\n        disabled={disabled}\n        onClick={onDecline}\n      >\n        Decline\n      </Button>\n    </div>\n  );\n}\n\nexport interface ToolApprovalProps extends ToolApprovalActionsProps, ToolApprovalStatusProps {\n  toolName: string;\n  args?: unknown;\n  /** Custom details replace the default argument renderer. */\n  children?: ReactNode;\n}\n\nexport function ToolApproval({ toolName, args, status, children, ...actions }: ToolApprovalProps) {\n  const { icon: ToolIcon } = presentTool(toolName, args);\n\n  return (\n    <Activity open foldable={false} className=\"my-2\" aria-label={`Tool approval for ${toolName}`}>\n      <ActivityTrigger>\n        <ActivityHeader className=\"flex-wrap\">\n          <ActivityIcon>\n            <ToolIcon aria-hidden />\n          </ActivityIcon>\n          <Txt as=\"span\" variant=\"caption\" tone=\"muted\" font=\"mono\" className=\"min-w-0 break-all\">\n            {toolName}\n          </Txt>\n          <ToolApprovalStatus status={status} />\n        </ActivityHeader>\n      </ActivityTrigger>\n      <ActivityContent>\n        {children ?? <ToolCallArguments toolName={toolName} args={args} showFullContent />}\n        {!status && <ToolApprovalActions toolName={toolName} {...actions} />}\n      </ActivityContent>\n    </Activity>\n  );\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,iBAAiB;CACrB,SAAS;EAAE,OAAO;EAAqB,SAAS;EAAW,MAAMA,aAAAA;CAAY;CAC7E,UAAU;EAAE,OAAO;EAAY,SAAS;EAAW,MAAMC,aAAAA;CAAM;CAC/D,UAAU;EAAE,OAAO;EAAY,SAAS;EAAW,MAAMC,aAAAA;CAAE;AAC7D;AAMA,SAAgB,mBAAmB,EAAE,UAAmC;CACtE,MAAM,EAAE,OAAO,SAAS,MAAM,eAAe,eAAe,UAAU;CACtE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;GAAgB;GAAS,UAAS;GAAS,MAAK;GAAK,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD,EAAY,eAAA,KAAa,CAAA;GACjF,UAAA;EACI,CAAA;CACH,CAAA;AAEV;AAUA,SAAgB,oBAAoB,EAClC,WACA,WACA,WAAW,OACX,UACA,YAAY,SACe;CAC3B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACH,aAAAA,OAAD,EAAO,eAAA,KAAa,CAAA;GAC1B,cAAY,WAAW,WAAW,aAAa,KAAA;GACpC;GACD;GACV,SAAS;GACV,UAAA;EAEO,CAAA,GACR,iBAAA,GAAA,kBAAA,IAAA,CAACG,eAAAA,QAAD;GACE,MAAK;GACL,MAAK;GACL,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACF,aAAAA,GAAD,EAAG,eAAA,KAAa,CAAA;GACtB,cAAY,WAAW,WAAW,aAAa,KAAA;GACrC;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CACL;;AAET;AASA,SAAgB,aAAa,EAAE,UAAU,MAAM,QAAQ,UAAU,GAAG,WAA8B;CAChG,MAAM,EAAE,MAAM,aAAaG,0BAAAA,YAAY,UAAU,IAAI;CAErD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,UAAD;EAAU,MAAA;EAAK,UAAU;EAAO,WAAU;EAAO,cAAY,qBAAqB;EAAlF,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,iBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,gBAAD;GAAgB,WAAU;GAA1B,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAU,eAAA,KAAa,CAAA,EACX,CAAA;IACd,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAU,MAAK;KAAQ,MAAK;KAAO,WAAU;KACjE,UAAA;IACE,CAAA;IACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAA4B,OAAS,CAAA;GACvB;EACD,CAAA,EAAA,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,iBAAD,EAAA,UAAA,CACG,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,mBAAD;GAA6B;GAAgB;GAAM,iBAAA;EAAiB,CAAA,GAChF,CAAC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;GAA+B;GAAU,GAAI;EAAU,CAAA,CACpD,EAAA,CAAA,CACT;;AAEd"}
+{"version":3,"file":"tool-approval-CJvPDL7D.cjs","names":["ShieldCheck","Check","X","Badge","Button","presentTool","Activity","ActivityTrigger","ActivityHeader","ActivityIcon","Txt","ActivityContent","ToolCallArguments"],"sources":["../src/ds/components/ai/tool-approval/tool-approval.tsx"],"sourcesContent":["import { Check, ShieldCheck, X } from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { Activity, ActivityContent, ActivityHeader, ActivityIcon, ActivityTrigger } from '../activity';\nimport { presentTool, ToolCallArguments } from '../tool-call';\nimport { Badge } from '@/ds/components/Badge';\nimport type { BadgeVariant } from '@/ds/components/Badge';\nimport { Button } from '@/ds/components/Button';\nimport { Txt } from '@/ds/components/Txt';\n\ntype ToolApprovalDecision = 'approved' | 'declined';\n\nconst approvalStates = {\n  pending: { label: 'Approval required', variant: 'warning', icon: ShieldCheck },\n  approved: { label: 'Approved', variant: 'success', icon: Check },\n  declined: { label: 'Declined', variant: 'neutral', icon: X },\n} satisfies Record<'pending' | ToolApprovalDecision, { label: string; variant: BadgeVariant; icon: LucideIcon }>;\n\nexport interface ToolApprovalStatusProps {\n  status?: ToolApprovalDecision;\n}\n\nexport function ToolApprovalStatus({ status }: ToolApprovalStatusProps) {\n  const { label, variant, icon: StatusIcon } = approvalStates[status ?? 'pending'];\n  return (\n    <span role=\"status\" className=\"inline-flex shrink-0\">\n      <Badge variant={variant} emphasis=\"subtle\" size=\"sm\" icon={<StatusIcon aria-hidden />}>\n        {label}\n      </Badge>\n    </span>\n  );\n}\n\nexport interface ToolApprovalActionsProps {\n  onApprove: () => void;\n  onDecline: () => void;\n  disabled?: boolean;\n  toolName?: string;\n  autoFocus?: boolean;\n}\n\nexport function ToolApprovalActions({\n  onApprove,\n  onDecline,\n  disabled = false,\n  toolName,\n  autoFocus = false,\n}: ToolApprovalActionsProps) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Button\n        type=\"button\"\n        variant=\"primary\"\n        size=\"sm\"\n        icon={<Check aria-hidden />}\n        aria-label={toolName ? `Approve ${toolName}` : undefined}\n        autoFocus={autoFocus}\n        disabled={disabled}\n        onClick={onApprove}\n      >\n        Approve\n      </Button>\n      <Button\n        type=\"button\"\n        size=\"sm\"\n        icon={<X aria-hidden />}\n        aria-label={toolName ? `Decline ${toolName}` : undefined}\n        disabled={disabled}\n        onClick={onDecline}\n      >\n        Decline\n      </Button>\n    </div>\n  );\n}\n\nexport interface ToolApprovalProps extends ToolApprovalActionsProps, ToolApprovalStatusProps {\n  toolName: string;\n  args?: unknown;\n  /** Custom details replace the default argument renderer. */\n  children?: ReactNode;\n}\n\nexport function ToolApproval({ toolName, args, status, children, ...actions }: ToolApprovalProps) {\n  const { icon: ToolIcon } = presentTool(toolName, args);\n\n  return (\n    <Activity open foldable={false} className=\"my-2\" aria-label={`Tool approval for ${toolName}`}>\n      <ActivityTrigger>\n        <ActivityHeader className=\"flex-wrap\">\n          <ActivityIcon>\n            <ToolIcon aria-hidden />\n          </ActivityIcon>\n          <Txt as=\"span\" variant=\"caption\" tone=\"muted\" font=\"mono\" className=\"min-w-0 break-all\">\n            {toolName}\n          </Txt>\n          <ToolApprovalStatus status={status} />\n        </ActivityHeader>\n      </ActivityTrigger>\n      <ActivityContent>\n        {children ?? <ToolCallArguments toolName={toolName} args={args} showFullContent />}\n        {!status && <ToolApprovalActions toolName={toolName} {...actions} />}\n      </ActivityContent>\n    </Activity>\n  );\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,iBAAiB;CACrB,SAAS;EAAE,OAAO;EAAqB,SAAS;EAAW,MAAMA,aAAAA;CAAY;CAC7E,UAAU;EAAE,OAAO;EAAY,SAAS;EAAW,MAAMC,aAAAA;CAAM;CAC/D,UAAU;EAAE,OAAO;EAAY,SAAS;EAAW,MAAMC,aAAAA;CAAE;AAC7D;AAMA,SAAgB,mBAAmB,EAAE,UAAmC;CACtE,MAAM,EAAE,OAAO,SAAS,MAAM,eAAe,eAAe,UAAU;CACtE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;GAAgB;GAAS,UAAS;GAAS,MAAK;GAAK,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD,EAAY,eAAA,KAAa,CAAA;GACjF,UAAA;EACI,CAAA;CACH,CAAA;AAEV;AAUA,SAAgB,oBAAoB,EAClC,WACA,WACA,WAAW,OACX,UACA,YAAY,SACe;CAC3B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAK;GACL,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACH,aAAAA,OAAD,EAAO,eAAA,KAAa,CAAA;GAC1B,cAAY,WAAW,WAAW,aAAa,KAAA;GACpC;GACD;GACV,SAAS;GACV,UAAA;EAEO,CAAA,GACR,iBAAA,GAAA,kBAAA,IAAA,CAACG,eAAAA,QAAD;GACE,MAAK;GACL,MAAK;GACL,MAAM,iBAAA,GAAA,kBAAA,IAAA,CAACF,aAAAA,GAAD,EAAG,eAAA,KAAa,CAAA;GACtB,cAAY,WAAW,WAAW,aAAa,KAAA;GACrC;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CACL;;AAET;AASA,SAAgB,aAAa,EAAE,UAAU,MAAM,QAAQ,UAAU,GAAG,WAA8B;CAChG,MAAM,EAAE,MAAM,aAAaG,0BAAAA,YAAY,UAAU,IAAI;CAErD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,UAAD;EAAU,MAAA;EAAK,UAAU;EAAO,WAAU;EAAO,cAAY,qBAAqB;EAAlF,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,iBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,gBAAD;GAAgB,WAAU;GAA1B,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD,EAAU,eAAA,KAAa,CAAA,EACX,CAAA;IACd,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;KAAK,IAAG;KAAO,SAAQ;KAAU,MAAK;KAAQ,MAAK;KAAO,WAAU;KACjE,UAAA;IACE,CAAA;IACL,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAA4B,OAAS,CAAA;GACvB;EACD,CAAA,EAAA,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAAA,CAACC,iBAAAA,iBAAD,EAAA,UAAA,CACG,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,mBAAD;GAA6B;GAAgB;GAAM,iBAAA;EAAiB,CAAA,GAChF,CAAC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;GAA+B;GAAU,GAAI;EAAU,CAAA,CACpD,EAAA,CAAA,CACT;;AAEd"}

package/dist/{tool-approval-B6MFcaKV.js → tool-approval-DyN11vFA.js}

@@ -1,8 +1,8 @@
 import { t as Button } from "./Button-CLXTbAY8.js";
 import { t as Txt } from "./Txt-BM6TVV_c.js";
-import { a as ToolCallArguments } from "./tool-call-Ch9-jjXU.js";
-import { r as presentTool } from "./tool-presentation-DvCsb_kz.js";
-import { b as ActivityTrigger, c as ActivityContent, d as ActivityHeader, p as ActivityIcon$1, s as Activity } from "./activity-rJ1NQl_2.js";
+import { a as ToolCallArguments } from "./tool-call-Dsj43lvJ.js";
+import { r as presentTool } from "./tool-presentation-CvibOP1J.js";
+import { b as ActivityTrigger, c as ActivityContent, d as ActivityHeader, p as ActivityIcon$1, s as Activity } from "./activity-C8Ql81WM.js";
 import { t as Badge } from "./Badge-aVu5iGAF.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ShieldCheck, X } from "lucide-react";
@@ -95,4 +95,4 @@ function ToolApproval({ toolName, args, status, children, ...actions }) {
 }
 export { ToolApprovalActions as n, ToolApprovalStatus as r, ToolApproval as t };
 
-//# sourceMappingURL=tool-approval-B6MFcaKV.js.map
+//# sourceMappingURL=tool-approval-DyN11vFA.js.map