@mastra/playground-ui 51.2.0 → 51.3.0-alpha.1

package/dist/src/domains/traces/hooks/use-trace-or-branch-spans.d.ts

@@ -1,5 +1,5 @@
-import { LightSpanRecord } from '@mastra/core/storage';
 import { TraceListMode } from '../trace-filters';
+import { SearchableSpan } from '../types';
 export interface UseTraceOrBranchSpansArgs {
     traceId: string | null | undefined;
     /** Required when `listMode === 'branches'` — the anchor span identifying the displayed
@@ -10,7 +10,7 @@ export interface UseTraceOrBranchSpansArgs {
     depth?: number;
 }
 export interface UseTraceOrBranchSpansResult {
-    spans: LightSpanRecord[] | undefined;
+    spans: SearchableSpan[] | undefined;
     /** Set in branches mode; undefined in traces mode (which uses parentSpanId == null). */
     anchorSpanId: string | undefined;
     isLoading: boolean;
@@ -21,5 +21,8 @@ export interface UseTraceOrBranchSpansResult {
  * Unified data source for the trace/span detail panel. Returns trace spans (full tree from the
  * root) in traces mode, or branch spans (subtree rooted at `anchorSpanId`) in branches mode.
  * Only the active query fires; the inactive one is disabled via its `enabled` flag.
+ *
+ * Both modes carry full span payloads: the panel renders and searches them, so a lightweight
+ * projection here would hide content from the reader looking straight at it.
  */
 export declare function useTraceOrBranchSpans({ traceId, anchorSpanId, listMode, depth, }: UseTraceOrBranchSpansArgs): UseTraceOrBranchSpansResult;

package/dist/src/domains/traces/hooks/use-trace-search.d.ts

@@ -0,0 +1,27 @@
+import { SearchableSpan } from '../types';
+export interface UseTraceSearchResult {
+    /** The immediate, user-facing input value. Bind this to the search field. */
+    query: string;
+    setQuery: (query: string) => void;
+    /** Rows matching the deferred query. An empty query returns the input array reference. */
+    results: SearchableSpan[];
+    /** True while the deferred value is behind `query` (the list is still catching up). */
+    isPending: boolean;
+}
+/**
+ * Client-side search over a flat span list.
+ *
+ * Matching is a substring test against `searchText`, the haystack built once per span when
+ * the query resolved (see `toSearchableSpans`). That is what makes the open-ended `metadata`
+ * and `error` payloads searchable: their shapes are unknown, so no fixed list of fields can
+ * read them. Both sides are already lowercased, so the test is a bare `includes`.
+ *
+ * Filtering is keyed on a deferred copy of the query, so typing stays responsive while a
+ * large list re-filters at lower priority — bind the input to `query`, not to the deferred
+ * value. A matching span keeps its ancestors and its whole subtree, so the hierarchy stays
+ * intact.
+ *
+ * `spans` is required. Resolving the loading/empty state is the caller's job — a component
+ * holding a query result passes `data?.spans ?? []`.
+ */
+export declare function useTraceSearch(spans: SearchableSpan[]): UseTraceSearchResult;

package/dist/src/domains/traces/hooks/use-trace-spans.d.ts

@@ -1,6 +1,15 @@
-import { LightSpanRecord } from '@mastra/core/storage';
 import { UseQueryResult } from '@tanstack/react-query';
+import { SearchableSpan } from '../types';
+/**
+ * Every span of a single trace, with its full payload.
+ *
+ * The lightweight projection exists to keep blob columns off the read path of a
+ * *list*, where the cost is paid once per trace on screen. A trace that is open
+ * has already narrowed that to one, and the panel both renders and searches
+ * these spans -- `input`, `output` and `attributes` included -- so the
+ * projection would only hide content the reader is looking at.
+ */
 export declare function useTraceSpans(traceId: string | null | undefined): UseQueryResult<{
     traceId: string;
-    spans: LightSpanRecord[];
+    spans: SearchableSpan[];
 } | null>;

package/dist/src/domains/traces/types.d.ts

@@ -1,5 +1,21 @@
 import { EntityType } from '@mastra/core/observability';
+import { LightSpanRecord } from '@mastra/core/storage';
 import { ReactNode } from 'react';
+/**
+ * A light span carrying a precomputed haystack of everything it holds.
+ *
+ * `LightSpanRecord` exposes searchable content across a fixed set of columns
+ * plus open-ended payloads whose shape is unknown, so a search cannot read it
+ * field by field. `searchText` is that content flattened once — see
+ * `flattenToSearchText` — so filtering is a substring test per span instead of
+ * a re-walk of every payload on every keystroke.
+ *
+ * It holds field names as well as values, so a span is findable by the shape of
+ * its payload and not only by its content.
+ */
+export type SearchableSpan = LightSpanRecord & {
+    searchText: string;
+};
 export type UISpan = {
     id: string;
     name: string;

package/dist/src/domains/traces/utils/filter-spans-keeping-ancestors.d.ts

@@ -0,0 +1,19 @@
+import { LightSpanRecord } from '@mastra/core/storage';
+/**
+ * Filter a flat span list down to the spans matching `predicate`, plus every
+ * ancestor needed to keep those spans connected to their root, plus the whole
+ * subtree below each match — a matching span is shown intact, not truncated.
+ *
+ * `spans` may arrive in any order. Trace payloads are flat lists sorted by
+ * `startedAt` (and the list API defaults to `direction: 'DESC'`), so children
+ * routinely precede their parents; the traversal below indexes the list up
+ * front rather than assuming a topological order.
+ *
+ * The output preserves the input's relative order, so it can be fed straight
+ * into `formatHierarchicalSpans`. `predicate` is called exactly once per span.
+ *
+ * Generic over the span type: only `spanId` and `parentSpanId` are read, and the
+ * exact input type comes back out, so enriched spans such as `SearchableSpan`
+ * survive the filter instead of being widened to `LightSpanRecord`.
+ */
+export declare function filterSpansKeepingAncestors<T extends Pick<LightSpanRecord, 'spanId' | 'parentSpanId'>>(spans: T[], predicate: (span: T) => boolean): T[];

package/dist/src/domains/traces/utils/flatten-to-search-text.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Flatten an arbitrary value into a single space-separated string containing
+ * every searchable token it holds, however deeply nested.
+ *
+ * Built for span payloads whose shape is not known ahead of time (`attributes`,
+ * `output`, `errorInfo`): the caller cannot enumerate fields, so this walks
+ * whatever it is handed.
+ *
+ * **Keys are emitted alongside their values**, so a field name is searchable
+ * even when its value is not — `{ error: null }` still answers a search for
+ * `error`. The cost is that structural names present on every span (`traceId`,
+ * `usage`, …) are searchable too, which makes short generic terms match widely.
+ *
+ * Values that no one can usefully search for are dropped rather than
+ * stringified: `null`, `undefined`, `NaN`, infinities, functions, symbols,
+ * invalid dates and whitespace-only strings. Dropping them keeps the output
+ * free of noise words like `"Invalid Date"` that would produce false hits.
+ * Array indices are dropped for the same reason — `0 1 2` is not content.
+ *
+ * Cycles are detected along the current path, so a self-referencing object
+ * terminates while a value referenced twice as a sibling is emitted twice.
+ * Only own, string-keyed properties are read, and a getter that throws is
+ * skipped instead of taking the whole trace down.
+ */
+export declare function flattenToSearchText(value: unknown): string;

package/dist/src/domains/traces/utils/index.d.ts

@@ -1 +1,4 @@
+export { filterSpansKeepingAncestors } from './filter-spans-keeping-ancestors';
+export { flattenToSearchText } from './flatten-to-search-text';
+export { selectSearchableSpans, toSearchableSpans } from './to-searchable-spans';
 export { formatSpanDuration, getInputPreview, isTokenLimitExceeded, getTokenLimitMessage } from './span-utils';

package/dist/src/domains/traces/utils/to-searchable-spans.d.ts

@@ -0,0 +1,41 @@
+import { LightSpanRecord } from '@mastra/core/storage';
+import { SearchableSpan } from '../types';
+/**
+ * Attach a precomputed search haystack to each span.
+ *
+ * Run this once, where the span list is resolved — not per keystroke. Flattening
+ * walks every nested payload, so doing it inside a filter would repeat the whole
+ * walk for every character typed.
+ *
+ * The whole record is flattened, which is what reaches `metadata` and `error`:
+ * their shapes are open-ended, so no fixed list of fields can read them. The
+ * text is lowercased here so matching is a bare `includes` with no per-span
+ * `toLowerCase` on every keystroke.
+ *
+ * Inputs are left untouched; each result is a new object.
+ */
+export declare function toSearchableSpans(spans: LightSpanRecord[]): SearchableSpan[];
+/**
+ * React Query `select` for the `{ traceId, spans }` payload returned by
+ * `getTraceLight` and `getBranch`.
+ *
+ * Enriching here rather than in a component means the flattening runs once per
+ * fetch and is cached with the query, so it survives the panel unmounting and
+ * remounting. Keep this a module-level reference: React Query re-runs `select`
+ * whenever its identity changes, and an inline arrow would re-flatten the whole
+ * trace on every render.
+ *
+ * Deliberately not generic: TypeScript cannot infer a query's `TData` from a
+ * generic function passed as `select`, and silently falls back to the unselected
+ * type — which would leave `searchText` missing at the call sites.
+ *
+ * `null` is passed through because a query may resolve to it. `undefined` is not
+ * in the signature: React Query only runs `select` once data exists.
+ */
+export declare function selectSearchableSpans(data: {
+    traceId: string;
+    spans: LightSpanRecord[];
+} | null): {
+    traceId: string;
+    spans: SearchableSpan[];
+} | null;

package/dist/src/ds/components/Arrival/arrival.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ArrivalScope } from './arrival';
+declare const meta: Meta<typeof ArrivalScope>;
+export default meta;
+type Story = StoryObj<typeof ArrivalScope>;
+export declare const ExistingAndNewContent: Story;

package/dist/src/ds/components/Card/card.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Default: Story;
+export declare const AppearancesAndElevation: Story;
+export declare const InteractiveLinks: Story;

package/dist/src/ds/components/Columns/columns.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Columns } from './index';
+declare const meta: Meta<typeof Columns>;
+export default meta;
+type Story = StoryObj<typeof Columns>;
+export declare const ResponsiveGrid: Story;
+export declare const HorizontallyScrollable: Story;

package/dist/src/ds/components/DataDetailsPanel/data-details-panel.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DataDetailsPanel } from './index';
+declare const meta: Meta<typeof DataDetailsPanel>;
+export default meta;
+type Story = StoryObj<typeof DataDetailsPanel>;
+export declare const Populated: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const Collapsed: Story;

package/dist/src/ds/components/DataFilter/select-data-filter.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SelectDataFilter } from './select-data-filter';
+declare const meta: Meta<typeof SelectDataFilter>;
+export default meta;
+type Story = StoryObj<typeof SelectDataFilter>;
+export declare const Default: Story;
+export declare const WithActiveFilters: Story;
+export declare const Disabled: Story;

package/dist/src/ds/components/DateRangeTimeline/date-range-timeline.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DateRangeTimeline } from './DateRangeTimeline';
+declare const meta: Meta<typeof DateRangeTimeline>;
+export default meta;
+type Story = StoryObj<typeof DateRangeTimeline>;
+export declare const Default: Story;
+export declare const SingleDay: Story;
+export declare const MultiYear: Story;

package/dist/src/ds/components/ErrorState/error-state.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ErrorState } from './ErrorState';
+declare const meta: Meta<typeof ErrorState>;
+export default meta;
+type Story = StoryObj<typeof ErrorState>;
+export declare const Default: Story;
+export declare const WithRecoveryAction: Story;

package/dist/src/ds/components/FormFieldBlocks/fields/search-field-block.d.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import { InputProps } from '../../Input';
 export type SearchFieldBlockProps = {
     name: string;
@@ -19,5 +20,7 @@ export type SearchFieldBlockProps = {
     variant?: InputProps['variant'];
     isMinimized?: boolean;
     onMinimizedChange?: (minimized: boolean) => void;
+    /** Gives the caller access to the underlying input, e.g. to focus it from a keyboard shortcut. */
+    inputRef?: RefObject<HTMLInputElement | null>;
 };
-export declare function SearchFieldBlock({ name, helpText, errorMsg, required, disabled, value, label, labelIsHidden, layout, placeholder, onChange, onReset, className, size, variant, isMinimized, onMinimizedChange, }: SearchFieldBlockProps): import("react").JSX.Element;
+export declare function SearchFieldBlock({ name, helpText, errorMsg, required, disabled, value, label, labelIsHidden, layout, placeholder, onChange, onReset, className, size, variant, isMinimized, onMinimizedChange, inputRef: externalInputRef, }: SearchFieldBlockProps): import("react").JSX.Element;

package/dist/src/ds/components/ListSearch/list-search.d.ts

@@ -12,5 +12,10 @@ export type ListSearchProps = {
      */
     value?: string;
     variant?: InputProps['variant'];
+    /**
+     * Opts out of the Cmd/Ctrl+Shift+F focus shortcut. Pass this on secondary
+     * instances so two search fields on the same page don't fight over focus.
+     */
+    shortcutDisabled?: boolean;
 };
-export declare const ListSearch: ({ onSearch, label, placeholder, debounceMs, size, value: controlledValue, variant, }: ListSearchProps) => import("react").JSX.Element;
+export declare const ListSearch: ({ onSearch, label, placeholder, debounceMs, size, value: controlledValue, variant, shortcutDisabled, }: ListSearchProps) => import("react").JSX.Element;

package/dist/src/ds/components/ListSearch/list-search.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ListSearch } from './list-search';
+declare const meta: Meta<typeof ListSearch>;
+export default meta;
+type Story = StoryObj<typeof ListSearch>;
+export declare const Default: Story;
+export declare const PresetValue: Story;

package/dist/src/ds/components/LogsDataList/logs-data-list.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { LogsDataList } from './index';
+declare const meta: Meta<typeof LogsDataList>;
+export default meta;
+type Story = StoryObj<typeof LogsDataList>;
+export declare const Populated: Story;
+export declare const NoMatches: Story;
+export declare const Loading: Story;

package/dist/src/ds/components/MessageScroller/message-scroller.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MessageScroller } from './message-scroller';
+declare const meta: Meta<typeof MessageScroller>;
+export default meta;
+type Story = StoryObj<typeof MessageScroller>;
+export declare const Conversation: Story;
+export declare const AutoFollow: Story;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MetricsLineChart } from './metrics-line-chart';
+declare const meta: Meta<typeof MetricsLineChart>;
+export default meta;
+type Story = StoryObj<typeof MetricsLineChart>;
+export declare const MultipleSeries: Story;
+export declare const SinglePoint: Story;
+export declare const FixedDomain: Story;

package/dist/src/ds/components/PageHeader/page-header.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PageHeader } from './page-header';
+declare const meta: Meta<typeof PageHeader>;
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
+export declare const Default: Story;
+export declare const Loading: Story;
+export declare const SmallerTitle: Story;

package/dist/src/ds/components/PageLayout/page-layout.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PageLayout } from './index';
+declare const meta: Meta<typeof PageLayout>;
+export default meta;
+type Story = StoryObj<typeof PageLayout>;
+export declare const FullPage: Story;
+export declare const NarrowSettings: Story;
+export declare const CenteredEmptyState: Story;

package/dist/src/ds/components/PendingIndicator/pending-indicator.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PendingIndicator } from './pending-indicator';
+declare const meta: Meta<typeof PendingIndicator>;
+export default meta;
+type Story = StoryObj<typeof PendingIndicator>;
+export declare const Default: Story;
+export declare const InConversation: Story;

package/dist/src/ds/components/PermissionDenied/permission-denied.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PermissionDenied } from './PermissionDenied';
+declare const meta: Meta<typeof PermissionDenied>;
+export default meta;
+type Story = StoryObj<typeof PermissionDenied>;
+export declare const Default: Story;
+export declare const ResourceSpecific: Story;
+export declare const CustomRecovery: Story;

package/dist/src/ds/components/PrevNextNav/prev-next-nav.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { PrevNextNav } from './prev-next-nav';
+declare const meta: Meta<typeof PrevNextNav>;
+export default meta;
+type Story = StoryObj<typeof PrevNextNav>;
+export declare const BetweenItems: Story;
+export declare const FirstItem: Story;
+export declare const LastItem: Story;

package/dist/src/ds/components/SessionExpired/session-expired.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SessionExpired } from './SessionExpired';
+declare const meta: Meta<typeof SessionExpired>;
+export default meta;
+type Story = StoryObj<typeof SessionExpired>;
+export declare const Default: Story;
+export declare const CustomCopy: Story;

package/dist/src/ds/components/Shimmer/shimmer.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Shimmer } from './shimmer';
+declare const meta: Meta<typeof Shimmer>;
+export default meta;
+type Story = StoryObj<typeof Shimmer>;
+export declare const Default: Story;
+export declare const ActiveToSettled: Story;

package/dist/src/ds/components/StatusBadge/status-badge.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { StatusBadge } from './StatusBadge';
+declare const meta: Meta<typeof StatusBadge>;
+export default meta;
+type Story = StoryObj<typeof StatusBadge>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const SizesAndPulse: Story;

package/dist/src/ds/components/ThreadList/thread-list.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ThreadList } from './thread-list';
+declare const meta: Meta<typeof ThreadList>;
+export default meta;
+type Story = StoryObj<typeof ThreadList>;
+export declare const Default: Story;
+export declare const Embedded: Story;
+export declare const Empty: Story;

package/dist/src/ds/components/ThreadRail/thread-rail.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ThreadRail } from './thread-rail';
+declare const meta: Meta<typeof ThreadRail>;
+export default meta;
+type Story = StoryObj<typeof ThreadRail>;
+export declare const ConversationTimeline: Story;
+export declare const Empty: Story;

package/dist/src/ds/components/TokenBudget/token-budget.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TokenBudget } from './token-budget';
+declare const meta: Meta<typeof TokenBudget>;
+export default meta;
+type Story = StoryObj<typeof TokenBudget>;
+export declare const Default: Story;
+export declare const Budgets: Story;
+export declare const Details: Story;

package/dist/src/ds/components/ai/message-reveal/index.d.ts

@@ -0,0 +1 @@
+export * from './message-reveal';

package/dist/src/ds/components/ai/message-reveal/message-reveal.d.ts

@@ -0,0 +1,22 @@
+import { MastraDBMessage } from '@mastra/core/agent/message-list';
+type MessagePart = MastraDBMessage['content']['parts'][number];
+/** What the reveal paces: the whole message, rows and cards written in as beats between the prose. */
+export declare function messageScript(parts: MessagePart[]): string;
+/**
+ * The parts of a message a reveal has reached, `shown` being a prefix of the script.
+ *
+ * A reply is not only prose: a tool row, a card, a reasoning block sit between its
+ * passages, and they were written in that order. Pacing the prose alone would lay a
+ * sentence down word by word while the row that follows it is already on screen — so
+ * every part waits its turn on the one clock, and the reader is handed the answer in
+ * the order it was written.
+ */
+export declare function revealedParts(parts: MessagePart[], shown: string): MessagePart[];
+/**
+ * A message's parts as far as the reveal has laid them down. Hand the result to
+ * `MessageFactory` in place of the message's own parts and the whole reply — prose,
+ * reasoning, tool rows, cards — arrives at the pace it was written, from one clock,
+ * without a renderer having to know a reveal is running.
+ */
+export declare function useRevealedParts(parts: MessagePart[], streaming: boolean): MessagePart[];
+export {};

package/dist/src/hooks/use-text-highlight.d.ts

@@ -0,0 +1,18 @@
+import { RefCallback } from 'react';
+export interface UseTextHighlightResult<TElement extends HTMLElement> {
+    ref: RefCallback<TElement>;
+}
+/**
+ * Paints every occurrence of `search` inside the referenced subtree using the CSS Custom
+ * Highlight API. Only text under an element carrying `data-highlight` is painted, so a
+ * surface names its searchable regions and everything else — headers, labels, metadata —
+ * is left alone by default. The DOM is never mutated — no wrapper elements are injected — so text
+ * selection, copy/paste and virtualised renderers are unaffected. Styling lives in
+ * `use-text-highlight.css` (`::highlight(search-result)`).
+ *
+ * Terms shorter than two characters are ignored — they match too much to be useful.
+ * Matching is case-insensitive and literal (the term is escaped, not a pattern). The
+ * subtree is re-scanned on content changes, coalesced to one scan per frame. Browsers
+ * without the API simply render nothing highlighted.
+ */
+export declare function useTextHighlight<TElement extends HTMLElement = HTMLElement>(search: string): UseTextHighlightResult<TElement>;

package/dist/src/test/highlight-api.d.ts

@@ -0,0 +1,28 @@
+import { vi } from 'vitest';
+/**
+ * Minimal fakes for the CSS Custom Highlight API, which jsdom does not implement.
+ * Install with `installHighlightApi()` in `beforeEach` and undo with the returned
+ * `restore` in `afterEach`.
+ */
+export interface FakeStaticRange {
+    startContainer: Node;
+    startOffset: number;
+    endContainer: Node;
+    endOffset: number;
+}
+export declare class FakeHighlight {
+    readonly ranges: FakeStaticRange[];
+    constructor(...ranges: FakeStaticRange[]);
+}
+export interface HighlightApiHarness {
+    highlights: {
+        set: ReturnType<typeof vi.fn>;
+        delete: ReturnType<typeof vi.fn>;
+    };
+    /** The text covered by the ranges of the most recent registration. */
+    highlightedText: () => string[] | undefined;
+    /** The elements owning the highlighted text of the most recent registration. */
+    highlightedIn: () => (HTMLElement | null)[];
+    restore: () => void;
+}
+export declare function installHighlightApi(): HighlightApiHarness;

package/dist/style.css

@@ -1621,6 +1621,10 @@
     margin-right: var(--spacing-8);
   }
 
+  .mr-12 {
+    margin-right: var(--spacing-12);
+  }
+
   .-mb-12 {
     margin-bottom: calc(var(--spacing-12) * -1);
   }
@@ -1706,6 +1710,14 @@
     margin-left: var(--spacing-8);
   }
 
+  .ml-10 {
+    margin-left: var(--spacing-10);
+  }
+
+  .ml-12 {
+    margin-left: var(--spacing-12);
+  }
+
   .ml-\[14px\] {
     margin-left: 14px;
   }
@@ -1988,6 +2000,10 @@
     height: var(--spacing-40);
   }
 
+  .h-56 {
+    height: var(--spacing-56);
+  }
+
   .h-60 {
     height: var(--spacing-60);
   }
@@ -1996,10 +2012,18 @@
     height: var(--spacing-64);
   }
 
+  .h-72 {
+    height: var(--spacing-72);
+  }
+
   .h-80 {
     height: var(--spacing-80);
   }
 
+  .h-96 {
+    height: var(--spacing-96);
+  }
+
   .h-\[1\.8rem\] {
     height: 1.8rem;
   }
@@ -2012,6 +2036,22 @@
     height: 30vh;
   }
 
+  .h-\[32rem\] {
+    height: 32rem;
+  }
+
+  .h-\[34rem\] {
+    height: 34rem;
+  }
+
+  .h-\[36rem\] {
+    height: 36rem;
+  }
+
+  .h-\[38rem\] {
+    height: 38rem;
+  }
+
   .h-\[160px\] {
     height: 160px;
   }
@@ -2241,10 +2281,18 @@
     min-height: var(--spacing-60);
   }
 
+  .min-h-64 {
+    min-height: var(--spacing-64);
+  }
+
   .min-h-72 {
     min-height: var(--spacing-72);
   }
 
+  .min-h-\[34rem\] {
+    min-height: 34rem;
+  }
+
   .min-h-\[70cqh\] {
     min-height: 70cqh;
   }
@@ -2501,6 +2549,30 @@
     width: calc(100vw - 2rem);
   }
 
+  .w-\[min\(24rem\,calc\(100vw-2rem\)\)\] {
+    width: min(24rem, 100vw - 2rem);
+  }
+
+  .w-\[min\(34rem\,calc\(100vw-3rem\)\)\] {
+    width: min(34rem, 100vw - 3rem);
+  }
+
+  .w-\[min\(42rem\,calc\(100vw-3rem\)\)\] {
+    width: min(42rem, 100vw - 3rem);
+  }
+
+  .w-\[min\(44rem\,calc\(100vw-2rem\)\)\] {
+    width: min(44rem, 100vw - 2rem);
+  }
+
+  .w-\[min\(48rem\,calc\(100vw-3rem\)\)\] {
+    width: min(48rem, 100vw - 3rem);
+  }
+
+  .w-\[min\(52rem\,calc\(100vw-3rem\)\)\] {
+    width: min(52rem, 100vw - 3rem);
+  }
+
   .w-\[var\(--active-tab-width\)\] {
     width: var(--active-tab-width);
   }
@@ -9268,6 +9340,14 @@
       max-height: none;
     }
 
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .md\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
     .md\:grid-cols-\[13rem_minmax\(0\,1fr\)\] {
       grid-template-columns: 13rem minmax(0, 1fr);
     }