@surrealdb/ui 1.2.24 → 2.0.1

package/dist/ui.d.ts

@@ -1,42 +1,53 @@
 import { ActionIconProps } from '@mantine/core';
 import { AlertProps } from '@mantine/core';
+import { AnchorProps } from '@mantine/core';
+import { BadgeFactory } from '@mantine/core';
 import { BadgeProps } from '@mantine/core';
+import { BadgeVariant } from '@mantine/core';
 import { BoxProps } from '@mantine/core';
+import { ButtonFactory } from '@mantine/core';
 import { ButtonProps } from '@mantine/core';
+import { ButtonStylesNames } from '@mantine/core';
+import { ButtonVariant } from '@mantine/core';
+import { CodeFactory } from '@mantine/core';
 import { CodeProps } from '@mantine/core';
 import { Command } from '@codemirror/view';
+import { ComponentPropsWithoutRef } from 'react';
 import { ComponentType } from 'react';
 import { CSSProperties } from 'react';
+import { CSSVariablesResolver } from '@mantine/core';
 import { default as default_2 } from 'github-slugger';
 import { EditorSelection } from '@codemirror/state';
 import { EditorState } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
 import { ElementProps } from '@mantine/core';
 import { Extension } from '@codemirror/state';
+import { Factory } from '@mantine/core';
 import { FC } from 'react';
-import { GroupProps } from '@mantine/core';
 import { Highlighter } from '@lezer/highlight';
 import { HighlightStyle } from '@codemirror/language';
-import { HTMLAttributes } from 'react';
-import { ImageProps } from '@mantine/core';
 import { KeyBinding } from '@codemirror/view';
 import { Language as Language_2 } from '@codemirror/language';
 import { MantineColor } from '@mantine/core';
 import { MantineColorScheme } from '@mantine/core';
+import { MantineColorsTuple } from '@mantine/core';
+import { MantineComponent } from '@mantine/core';
+import { MantineComponentStaticProperties } from '@mantine/core';
 import { MantineFontSize } from '@mantine/core';
+import { MantinePolymorphicComponent } from '@mantine/core';
 import { MantineRadius } from '@mantine/core';
 import { MantineSize } from '@mantine/core';
 import { MantineSpacing } from '@mantine/core';
 import { MantineThemeOverride } from '@mantine/core';
-import { PaperProps } from '@mantine/core';
+import { PolymorphicFactory } from '@mantine/core';
 import * as portals from 'react-reverse-portal';
 import { PropsWithChildren } from 'react';
-import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
 import { SelectProps } from '@mantine/core';
 import { StateEffectType } from '@codemirror/state';
 import { StateField } from '@codemirror/state';
+import { StylesApiProps } from '@mantine/core';
 import { SyntaxNode } from '@lezer/common';
 import { TabsListProps } from '@mantine/core';
 import { TabsProps as TabsProps_2 } from '@mantine/core';
@@ -46,6 +57,7 @@ import { TimelineProps } from '@mantine/core';
 import { TitleOrder } from '@mantine/core';
 import { TitleProps } from '@mantine/core';
 import { Tree } from '@lezer/common';
+import { VariantColorsResolver } from '@mantine/core';
 import { VideoHTMLAttributes } from 'react';
 
 /**
@@ -77,6 +89,50 @@ declare type AnyFn = (...rest: any[]) => any;
  */
 export declare function applyAutoFolding(view: EditorView, autoCollapseDepth: number): void;
 
+/**
+ * A text link whose trailing arrow nudges forward on hover.
+ *
+ * The inline counterpart of {@link ArrowButton}, for the quieter "read on" links
+ * that sit under a paragraph rather than beside a heading.
+ */
+export declare const ArrowAnchor: MantinePolymorphicComponent<ArrowAnchorFactory>;
+
+export declare type ArrowAnchorFactory = PolymorphicFactory<{
+    props: ArrowAnchorProps;
+    defaultComponent: "a";
+    defaultRef: HTMLAnchorElement;
+    stylesNames: "root";
+}>;
+
+export declare interface ArrowAnchorProps extends AnchorProps, ElementProps<"a", "color"> {
+    /** Points the arrow out of the page, for a destination on another site. */
+    external?: boolean;
+}
+
+/**
+ * A button whose trailing arrow nudges forward on hover.
+ *
+ * The movement is the hover signal for a forward action, which is why the plain
+ * `Button` neither fills nor glows. Reach for it on calls to action, not on the
+ * dense controls of an app toolbar.
+ *
+ * Button's own Styles API passes straight through, so `classNames`, `styles`
+ * and `vars` address Button's parts as usual.
+ */
+export declare const ArrowButton: MantinePolymorphicComponent<ArrowButtonFactory>;
+
+export declare type ArrowButtonFactory = PolymorphicFactory<{
+    props: ArrowButtonProps;
+    defaultComponent: "button";
+    defaultRef: HTMLButtonElement;
+    stylesNames: ButtonStylesNames;
+}>;
+
+export declare interface ArrowButtonProps extends ButtonProps, ElementProps<"button", "color"> {
+    /** Points the arrow out of the page, for a destination on another site. */
+    external?: boolean;
+}
+
 export declare interface BooleanHandle {
     open: () => void;
     close: () => void;
@@ -84,6 +140,19 @@ export declare interface BooleanHandle {
     set: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+/**
+ * The foreground each brand fill uses.
+ *
+ * Contrast mode flips a fill to black only where black measures better:
+ * white on Lilac is 3.25:1 against 6.47:1 for black, and white on Pink is
+ * 3.65:1 against 5.76:1. Purple (7.57:1) and Violet (5.45:1) read better with
+ * white, so they never flip.
+ */
+export declare const BRAND_FOREGROUNDS: Record<string, {
+    default: string;
+    contrast: string;
+}>;
+
 export declare const brandAgno: string;
 
 export declare const brandAirbyte: string;
@@ -360,7 +429,32 @@ export declare const brandZedDark: string;
 
 export declare const brandZedLight: string;
 
-export declare const BreadcrumbButton: FC<ButtonProps & ElementProps<"button">>;
+/** A quiet, compact control standing in for one step of a breadcrumb trail. */
+export declare const BreadcrumbButton: MantineComponent<BreadcrumbButtonFactory>;
+
+/** Button props that are not part of its Styles API, which this component owns instead. */
+declare type BreadcrumbButtonBaseProps = Omit<ButtonProps, keyof StylesApiProps<ButtonFactory>>;
+
+/**
+ * Button reads its palette from these, and the style this component hands it is
+ * merged after Button's own variables, so setting them here wins.
+ */
+export declare type BreadcrumbButtonCssVariables = {
+    root: "--button-color" | "--button-hover" | "--button-hover-color";
+};
+
+export declare type BreadcrumbButtonFactory = Factory<{
+    props: BreadcrumbButtonProps;
+    ref: HTMLButtonElement;
+    stylesNames: BreadcrumbButtonStylesNames;
+    vars: BreadcrumbButtonCssVariables;
+    variant: ButtonVariant;
+}>;
+
+export declare interface BreadcrumbButtonProps extends BreadcrumbButtonBaseProps, StylesApiProps<BreadcrumbButtonFactory>, ElementProps<"button", "color"> {
+}
+
+export declare type BreadcrumbButtonStylesNames = "root";
 
 /**
  * Builds the ordered list of rows RichTimeline renders.
@@ -394,12 +488,20 @@ export declare const CDN_ID_PATTERN: RegExp;
 
 export declare const CDN_URL_PATTERN: RegExp;
 
-export declare function Check({ children, ...props }: CheckProps): ReactNode;
+/** A line of text marked as confirmed, led by a check glyph. */
+export declare const Check: MantineComponent<CheckFactory>;
 
-export declare interface CheckProps extends GroupProps {
-    children?: ReactNode;
+export declare type CheckFactory = Factory<{
+    props: CheckProps;
+    ref: HTMLDivElement;
+    stylesNames: CheckStylesNames;
+}>;
+
+export declare interface CheckProps extends BoxProps, StylesApiProps<CheckFactory>, ElementProps<"div"> {
 }
 
+export declare type CheckStylesNames = "root" | "icon" | "label";
+
 declare interface ChoiceNode {
     type: "Choice";
     default?: number;
@@ -408,20 +510,34 @@ declare interface ChoiceNode {
 
 export declare function clsx(...args: unknown[]): string;
 
-/**
- * Enhanced code block component with copy button, title, and highlight regions
- */
-export declare const CodeBlock: FC<CodeBlockProps>;
+/** A read-only code panel with a caption and a copy button. */
+export declare const CodeBlock: MantineComponent<CodeBlockFactory>;
+
+export declare type CodeBlockFactory = Factory<{
+    props: CodeBlockProps;
+    ref: HTMLDivElement;
+    stylesNames: CodeBlockStylesNames;
+}>;
 
-export declare interface CodeBlockProps extends Omit<PaperProps, "children" | "styles"> {
+export declare interface CodeBlockProps extends BoxProps, StylesApiProps<CodeBlockFactory>, ElementProps<"div", "title"> {
+    /** Caption rendered in a header strip above the code. */
     title?: string;
+    /** Source to render. */
     value: string;
+    /** Language id passed to the syntax parser. @default `"text"` */
     lang?: string;
+    /** Turn the block into a color-scheme island instead of following the page. */
     colorScheme?: MantineColorScheme;
+    /** Props forwarded to the copy button. */
     copyCodeProps?: ActionIconProps;
+    /** Render a line-number gutter. @default `false` */
     withLineNumbers?: boolean;
+    /** Draw a hairline around the block. @default `true` */
+    withBorder?: boolean;
 }
 
+export declare type CodeBlockStylesNames = "root" | "header" | "title" | "body" | "code" | "copy";
+
 export declare const CodeEditor: FC<CodeEditorProps>;
 
 export declare interface CodeEditorProps extends BoxProps {
@@ -508,10 +624,6 @@ export declare interface CodeRendererProps {
 /** Map of lower-cased fenced-code info string to renderer registration. */
 export declare type CodeRenderers = Record<string, CodeRendererDef>;
 
-export declare type ColorScheme = keyof ThemeConfig;
-
-declare type ColorScheme_2 = keyof ThemeConfig_2;
-
 declare interface CommentNode {
     type: "Comment";
     text: string;
@@ -549,9 +661,12 @@ export declare interface ConfirmOptions<T> {
 export declare function coveredEphemeral(items: StackerItem[], topId: string): StackerItem[];
 
 /**
- * Get a cached style highlighter for the given color scheme
+ * Returns the highlighter for a syntax style.
+ *
+ * The palette is expressed in CSS variables, so one highlighter serves both
+ * color schemes and the default is cached for the life of the page.
  */
-export declare function createHighlighter(colorScheme: MantineColorScheme): Highlighter;
+export declare function createHighlighter(style?: HighlightStyle): Highlighter;
 
 /**
  * Create a new serialized editor state from a document string.
@@ -562,9 +677,19 @@ export declare function createHighlighter(colorScheme: MantineColorScheme): High
 export declare function createSerializedState(doc: string): EditorStateSnapshot;
 
 /**
- * Create a style highlighter for the given color scheme and syntax theme
+ * Builds a Lezer highlighter from a syntax style.
+ *
+ * The "class" each tag resolves to is a color value, which callers apply as an
+ * inline `color`. That works with CSS variables, which is what makes a single
+ * scheme-agnostic style possible.
+ */
+export declare function createStyleHighlighter(style?: HighlightStyle): Highlighter;
+
+/**
+ * An island is made by setting the CSS `color-scheme` property, never by
+ * stamping a data attribute. See doc/adr/0001-light-dark-color-scheme-islands.md.
  */
-export declare function createStyleHighlighter(theme: ThemeConfig_2, colorScheme: ColorScheme_2): Highlighter;
+export declare const CSS_COLOR_SCHEME: Record<MantineColorScheme, string>;
 
 /**
  * A custom variant of the history keymap that uses
@@ -599,24 +724,79 @@ export declare type DefaultSort = {
     [key: string]: unknown;
 };
 
-/**
- * Details component for collapsible content sections
- * Styled with obsidian border and surreal purple/pink accents
- */
-export declare const Details: FC<DetailsProps> & {
-    Summary: FC<SummaryProps>;
-};
+/** A flat, square disclosure panel for collapsible content. */
+export declare const Details: MantineComponent<DetailsFactory>;
 
-export declare interface DetailsProps extends Omit<BoxProps, "component" | "children"> {
-    children: ReactNode;
+export declare type DetailsFactory = Factory<{
+    props: DetailsProps;
+    ref: HTMLDetailsElement;
+    stylesNames: DetailsStylesNames;
+    staticComponents: {
+        Summary: typeof DetailsSummary;
+    };
+}>;
+
+export declare interface DetailsProps extends BoxProps, StylesApiProps<DetailsFactory>, ElementProps<"details"> {
+    /** Content of the disclosure, starting with a `Details.Summary`. */
+    children?: ReactNode;
+}
+
+export declare type DetailsStylesNames = "root";
+
+/** The clickable header of a {@link Details} disclosure. */
+export declare const DetailsSummary: MantineComponent<DetailsSummaryFactory>;
+
+export declare type DetailsSummaryFactory = Factory<{
+    props: DetailsSummaryProps;
+    ref: HTMLElement;
+    stylesNames: DetailsSummaryStylesNames;
+}>;
+
+export declare interface DetailsSummaryProps extends BoxProps, StylesApiProps<DetailsSummaryFactory>, ElementProps<"summary"> {
+    /** Label of the disclosure. */
+    children?: ReactNode;
 }
 
+export declare type DetailsSummaryStylesNames = "summary" | "chevron";
+
 export declare interface DiagramNode {
     type: "Diagram";
     padding?: [number, number, number, number];
     children: RailroadNode[];
 }
 
+/**
+ * A marketing-scale title.
+ *
+ * Headings `h1`–`h6` are sized for interactive apps. Hero and section titles use
+ * this fluid scale instead, and `order` keeps the document outline correct
+ * regardless of how large the type is drawn.
+ */
+export declare const Display: MantinePolymorphicComponent<DisplayFactory>;
+
+export declare type DisplayCssVariables = {
+    root: "--display-fz" | "--display-lh" | "--display-lts";
+};
+
+export declare type DisplayFactory = PolymorphicFactory<{
+    props: DisplayProps;
+    defaultComponent: "h1";
+    defaultRef: HTMLHeadingElement;
+    stylesNames: DisplayStylesNames;
+    vars: DisplayCssVariables;
+}>;
+
+export declare interface DisplayProps extends BoxProps, StylesApiProps<DisplayFactory>, ElementProps<"h1"> {
+    /** Visual size on the display scale. @default `"lg"` */
+    size?: DisplaySize;
+    /** Heading level rendered, independent of the visual size. @default `1` */
+    order?: TitleOrder;
+}
+
+export declare type DisplaySize = "md" | "lg" | "xl";
+
+export declare type DisplayStylesNames = "root";
+
 export declare const Drawer: DrawerCompound;
 
 declare function DrawerBody({ lane, children, className, ...rest }: DrawerBodyProps): ReactNode;
@@ -708,10 +888,10 @@ export declare interface EditorOptions {
      */
     fields?: StateFields;
     /**
-     * The theme to use for the editor.
-     * @default VIVID_THEME
+     * The syntax style to highlight with.
+     * @default SYNTAX_STYLE
      */
-    theme?: ThemeConfig;
+    theme?: HighlightStyle;
     /**
      * The initial document to use for the editor.
      * Do not set this if you are using the `state` prop.
@@ -764,10 +944,8 @@ export declare interface EditorOptions {
 
 export declare type EditorStateSnapshot = Record<string, unknown>;
 
-/**
- * Use a specific syntax theme with the given color scheme
- */
-export declare function editorTheme(theme: ThemeConfig_2, colorScheme: MantineColorScheme): Extension;
+/** Highlights an editor with a syntax style. Defaults to {@link SYNTAX_STYLE}. */
+export declare function editorTheme(style?: HighlightStyle): Extension;
 
 /** Estimated reading time in minutes (minimum 1). */
 export declare function estimateMarkdownReadTimeMinutes(markdown: string): number;
@@ -796,6 +974,35 @@ export declare interface ExtractHeadingsOptions {
  */
 export declare function extractTest(input: string): ExtractedCode;
 
+/**
+ * The short uppercase line that names a section or product above a title.
+ *
+ * Monospace, tracked out, and drawn in the accent of the surrounding subtree, so
+ * stamping `data-surreal-accent="memory"` turns it violet without a prop.
+ */
+export declare const Eyebrow: MantinePolymorphicComponent<EyebrowFactory>;
+
+export declare type EyebrowCssVariables = {
+    root: "--eyebrow-fz" | "--eyebrow-color";
+};
+
+export declare type EyebrowFactory = PolymorphicFactory<{
+    props: EyebrowProps;
+    defaultComponent: "p";
+    defaultRef: HTMLParagraphElement;
+    stylesNames: EyebrowStylesNames;
+    vars: EyebrowCssVariables;
+}>;
+
+export declare interface EyebrowProps extends BoxProps, StylesApiProps<EyebrowFactory>, ElementProps<"p"> {
+    /** Text size. @default `"xs"` */
+    size?: MantineSize;
+    /** Overrides the accent color the eyebrow is drawn in. */
+    color?: MantineColor;
+}
+
+export declare type EyebrowStylesNames = "root";
+
 /** Case-insensitive filter over command titles and keywords. */
 export declare function filterSlashCommands(commands: readonly SlashCommand[], query: string): SlashCommand[];
 
@@ -821,6 +1028,39 @@ export declare function getMarkdownEditorReady(state: EditorState): boolean;
  */
 export declare function getMarkdownMode(state: EditorState): MarkdownEditMode;
 
+/**
+ * A static brand wash that breaks up a large empty surface.
+ *
+ * It is decorative and deliberately motionless. It fills its nearest positioned
+ * ancestor, such as the content area of an app shell, and sits behind the
+ * content without catching the eye.
+ */
+export declare const Glow: MantineComponent<GlowFactory>;
+
+export declare type GlowCssVariables = {
+    root: "--surreal-glow-x" | "--surreal-glow-y" | "--surreal-glow-size" | "--glow-opacity";
+};
+
+export declare type GlowFactory = Factory<{
+    props: GlowProps;
+    ref: HTMLDivElement;
+    stylesNames: GlowStylesNames;
+    vars: GlowCssVariables;
+}>;
+
+export declare type GlowPosition = "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right";
+
+export declare interface GlowProps extends BoxProps, StylesApiProps<GlowFactory>, ElementProps<"div"> {
+    /** Where the wash originates. @default `"top-left"` */
+    position?: GlowPosition;
+    /** How far the wash reaches. Any CSS length. @default `"clamp(20rem, 45vw, 44rem)"` */
+    size?: string;
+    /** Strength of the wash, 0 to 1. @default `1` */
+    opacity?: number;
+}
+
+export declare type GlowStylesNames = "root";
+
 /** A document heading with slug id, plain text, and depth. */
 declare interface Heading {
     id: string;
@@ -847,26 +1087,42 @@ export declare interface HeadingTitleBounds {
 
 export declare function headingTitleBounds(node: SyntaxNode, source: MarkdownSource): HeadingTitleBounds;
 
-export declare const Highlighting: FC<HighlightingProps>;
+/** Syntax-highlighted, read-only source code. */
+export declare const Highlighting: MantineComponent<HighlightingFactory>;
+
+export declare type HighlightingCssVariables = {
+    root: "--highlighting-gutter";
+};
+
+export declare type HighlightingFactory = Factory<{
+    props: HighlightingProps;
+    ref: HTMLPreElement;
+    stylesNames: HighlightingStylesNames;
+    vars: HighlightingCssVariables;
+}>;
 
-export declare interface HighlightingProps extends BoxProps {
+export declare interface HighlightingProps extends BoxProps, StylesApiProps<HighlightingFactory>, ElementProps<"pre", "children"> {
+    /** Source to render. */
     value: string;
+    /** Language id passed to the syntax parser, e.g. `"surql"`. */
     language: string;
+    /** Turn the block into a color-scheme island instead of following the page. */
     colorScheme?: MantineColorScheme;
+    /** Line ranges, zero-based and inclusive, to call out. */
     highlightRegions?: HighlightRegion[];
+    /** Render a line-number gutter. @default `false` */
     withLineNumbers?: boolean;
 }
 
+export declare type HighlightingStylesNames = "root" | "line" | "lineNumber";
+
 export declare interface HighlightRegion {
     start: number;
     end: number;
 }
 
-export declare function HoverGlow({ className, ...props }: HoverGlowProps): ReactNode;
-
-export declare type HoverGlowProps = PropsWithChildren<BoxProps>;
-
-export declare const Icon: FC<IconProps>;
+/** A single-path SVG glyph, sized in step with the text around it. */
+export declare const Icon: MantineComponent<IconFactory>;
 
 export declare const iconAccount: string;
 
@@ -998,6 +1254,10 @@ export declare const iconCopy: string;
 
 export declare const iconCreditCard: string;
 
+export declare type IconCssVariables = {
+    root: "--icon-size" | "--icon-color";
+};
+
 export declare const iconCursor: string;
 
 export declare const iconDatabase: string;
@@ -1038,12 +1298,22 @@ export declare const iconEye: string;
 
 export declare const iconEyeOff: string;
 
+export declare type IconFactory = Factory<{
+    props: IconProps;
+    ref: SVGSVGElement;
+    stylesNames: IconStylesNames;
+    vars: IconCssVariables;
+}>;
+
 export declare const iconFile: string;
 
 export declare const iconFilter: string;
 
 export declare const iconFlag: string;
 
+/** How the glyph is mirrored. */
+export declare type IconFlip = "horizontal" | "vertical" | "both";
+
 export declare const iconFloppy: string;
 
 export declare const iconFolderPlus: string;
@@ -1174,12 +1444,17 @@ export declare const iconPower: string;
 
 export declare const iconProgressClock: string;
 
-export declare interface IconProps extends BoxProps, Omit<HTMLAttributes<SVGElement>, "style"> {
+export declare interface IconProps extends BoxProps, StylesApiProps<IconFactory>, SvgElementProps {
+    /** Path data of the glyph, drawn on a `0 0 240 240` viewBox. */
+    path: string;
+    /** Edge length of the glyph. Relative sizes track the surrounding font size. @default `"md"` */
     size?: MantineFontSize | number;
+    /** Glyph color. Inherits the surrounding text color when omitted. */
     color?: MantineColor;
+    /** Spins the glyph continuously, for inline loading states. @default `false` */
     spin?: boolean;
-    path: string;
-    flip?: "horizontal" | "vertical" | "both";
+    /** Mirrors the glyph along one or both axes. */
+    flip?: IconFlip;
 }
 
 export declare const iconQuery: string;
@@ -1226,6 +1501,8 @@ export declare const iconStop: string;
 
 export declare const iconStudio: string;
 
+export declare type IconStylesNames = "root" | "path";
+
 export declare const iconSun: string;
 
 export declare const iconSurreal: string;
@@ -1281,6 +1558,9 @@ export declare type Identified<T = object, I = string> = T & {
     id: I;
 };
 
+/** Image presentation attributes collide with Box's style props, so they yield. */
+declare type ImgElementProps = Omit<ComponentPropsWithoutRef<"img">, keyof BoxProps | "style" | "color" | "src">;
+
 /**
  * Build a `run` that inserts a block-level JSX tag on its own line with blank lines before when needed.
  */
@@ -1310,13 +1590,45 @@ export declare function isVideoUrl(src: string): boolean;
 /** How `<Component />` tags are handled. */
 export declare type JsxMode = "render" | "throw" | "graceful" | "omit";
 
-export declare function Label({ label, ...props }: LabelProps): ReactNode;
+declare type Language = "csharp" | "rust" | "javascript" | "typescript" | "surrealql" | "json" | "yaml" | "java" | "go" | "python" | "html" | "bash" | "cli" | "php" | "markdown" | "syntax";
+
+/** Surreal Lilac — the primary action color, and the Database product color. */
+export declare const LILAC: MantineColorsTuple;
 
-export declare interface LabelProps extends Omit<BadgeProps, "children"> {
-    label: string;
+/**
+ * A whole card that is one link.
+ *
+ * Hovering lifts the surface a step and nudges the arrow forward. That movement
+ * is the affordance the old hover glow used to provide.
+ */
+export declare const LinkCard: MantinePolymorphicComponent<LinkCardFactory>;
+
+export declare type LinkCardFactory = PolymorphicFactory<{
+    props: LinkCardProps;
+    defaultComponent: "a";
+    defaultRef: HTMLAnchorElement;
+    stylesNames: LinkCardStylesNames;
+}>;
+
+export declare interface LinkCardProps extends BoxProps, StylesApiProps<LinkCardFactory>, ElementProps<"a", "title" | "media"> {
+    /** A leading visual: an icon, picto or logo. */
+    media?: ReactNode;
+    /** The card's heading. */
+    title?: ReactNode;
+    /** Supporting copy below the title. */
+    description?: ReactNode;
+    /** A badge rendered beside the title, typically naming the product. */
+    label?: ReactNode;
+    /**
+     * Call-to-action text shown with a trailing arrow. Without it the card shows
+     * a chevron on the trailing edge instead.
+     */
+    action?: ReactNode;
+    /** Points the arrow out of the page, for a destination on another site. */
+    external?: boolean;
 }
 
-declare type Language = "csharp" | "rust" | "javascript" | "typescript" | "surrealql" | "json" | "yaml" | "java" | "go" | "python" | "html" | "bash" | "cli" | "php" | "markdown" | "syntax";
+export declare type LinkCardStylesNames = "root" | "media" | "body" | "header" | "title" | "description" | "action" | "arrow";
 
 /**
  * A CodeMirror extension that provides support for live markdown editing.
@@ -1348,7 +1660,25 @@ export declare interface LiveMarkdownEditorOptions {
 }
 
 /**
- * The Mantine theme configurtation
+ * The SurrealDB Mantine theme.
+ *
+ * Pair it with `surrealCssVariablesResolver` and the kit's stylesheet:
+ *
+ * ```tsx
+ * import "@surrealdb/ui/styles.css";
+ * import "@surrealdb/ui/fonts.css";
+ * import { MANTINE_THEME, surrealCssVariablesResolver } from "@surrealdb/ui";
+ *
+ * <MantineProvider
+ *   theme={MANTINE_THEME}
+ *   cssVariablesResolver={surrealCssVariablesResolver}
+ * >
+ *   {children}
+ * </MantineProvider>
+ * ```
+ *
+ * Sizing convention: interactive apps use the `xs` and `sm` sizes, marketing
+ * surfaces use `md` and up. There is deliberately no separate density mode.
  */
 export declare const MANTINE_THEME: MantineThemeOverride;
 
@@ -1709,6 +2039,7 @@ export declare function mergeMarkdownComponents(components?: MarkdownComponents)
  */
 export declare const MermaidCodeRenderer: CodeRenderer;
 
+/** Embed options, serialised into the mini's query string. */
 export declare interface MiniConfig {
     url?: string;
     dataset?: "surreal-deal-store-mini" | `/${string}.surql`;
@@ -1724,6 +2055,7 @@ export declare interface MiniConfig {
     nonumbers?: boolean;
 }
 
+/** Imperative handle for an embedded {@link SurrealistMini}, over `postMessage`. */
 export declare class MiniController {
     private frameRef;
     constructor(frameRef: RefObject<HTMLIFrameElement | null>);
@@ -1758,46 +2090,80 @@ export declare class MiniController {
     executeQuery(query: string): void;
 }
 
-export declare function NewsletterCTA({ idPrefix, bg, title, titleColor, titleSize, description, descriptionColor, stacked, tone, radius, flatInput, }: NewsletterCTAProps): ReactNode;
+/**
+ * Drops a run of text to the secondary color.
+ *
+ * Used for the two-tone title: the leading sentence carries the message and the
+ * remainder recedes.
+ *
+ * ```tsx
+ * <Display>Memory on top. <Muted>Database at the core.</Muted></Display>
+ * ```
+ */
+export declare const Muted: MantinePolymorphicComponent<MutedFactory>;
+
+export declare type MutedFactory = PolymorphicFactory<{
+    props: MutedProps;
+    defaultComponent: "span";
+    defaultRef: HTMLSpanElement;
+    stylesNames: MutedStylesNames;
+}>;
 
-export declare interface NewsletterCTAProps {
-    idPrefix?: string;
-    bg?: string;
-    title?: string;
-    titleColor?: string;
-    titleSize?: number;
-    description?: string;
-    /** Override the description text color (Mantine color key or any CSS color). */
-    descriptionColor?: string;
-    stacked?: boolean;
-    /** Light, editorial block for newsroom-style pages. */
-    tone?: "dark" | "editorial";
-    /** Override the Paper corner radius. Defaults to `0` for a fully flat band. */
-    radius?: MantineRadius | number;
-    /** Render the email input as a flat dark control matching the /platform/surrealdb stroke. */
-    flatInput?: boolean;
+export declare interface MutedProps extends BoxProps, StylesApiProps<MutedFactory>, ElementProps<"span"> {
 }
 
+export declare type MutedStylesNames = "root";
+
 declare interface NonTerminalNode {
     type: "NonTerminal";
     text: string;
 }
 
-/**
- * Note/Callout component with variants: note, important, warning, caution
- */
-export declare const Note: FC<NoteProps>;
+/** A callout that flags a note, a tip, or something important, risky or dangerous. */
+export declare const Note: MantineComponent<NoteFactory>;
 
 export declare const NOTE_KINDS: readonly ["note", "tip", "important", "warning", "caution"];
 
+/** Alert owns its own styles API, so Note takes those names over. */
+declare type NoteAlertProps = Omit<AlertProps, "title" | "children" | "classNames" | "styles" | "vars" | "attributes" | "unstyled" | "variant">;
+
+export declare type NoteFactory = Factory<{
+    props: NoteProps;
+    ref: HTMLDivElement;
+    stylesNames: NoteStylesNames;
+}>;
+
 export declare type NoteKind = (typeof NOTE_KINDS)[number];
 
-export declare interface NoteProps extends Omit<AlertProps, "title" | "children"> {
+export declare interface NoteProps extends NoteAlertProps, StylesApiProps<NoteFactory> {
+    /** Severity of the callout, which picks the color and the icon. */
     kind: NoteKind;
-    title?: string;
-    children: ReactNode;
+    /** Heading of the callout. Defaults to the capitalised `kind`. */
+    title?: ReactNode;
+    /** Body of the callout. */
+    children?: ReactNode;
 }
 
+export declare type NoteStylesNames = "root" | "title" | "icon" | "label";
+
+/**
+ * Obsidian — the purple-tinted neutral used for every surface and hairline.
+ *
+ * Never use Obsidian for text; text roles live on {@link SLATE}.
+ * Anchors come from the brand toolkit: `#F9FAFE` light surface, `#DADFE7` light
+ * hairline, and `#242131` raised / `#191722` surface / `#13121A` page for the
+ * dark steps.
+ *
+ * The toolkit's deepest neutral, `#0C0C12`, has no slot of its own: a Mantine
+ * tuple holds ten shades and the dark end needs four. It is recovered where it
+ * is actually used, as `--surreal-bg-sunken` darkening shade 9 by 0.03 OKLCH
+ * lightness, which lands within a thousandth of the original.
+ *
+ * The two halves do not overlap. Light roles read shades 0 to 4, dark roles read
+ * 5 to 9, and shade 5 is the one both schemes share, for disabled text.
+ */
+export declare const OBSIDIAN: MantineColorsTuple;
+
 declare interface OneOrMoreNode {
     type: "OneOrMore";
     child: RailroadNode;
@@ -1855,1509 +2221,508 @@ export declare interface ParseMarkdownTreeOptions {
 
 export declare const picto2106: string;
 
-export declare const picto2106Gradient: string;
-
-export declare const picto2106Solid: string;
-
 export declare const picto360DegreeView: string;
 
-export declare const picto360DegreeViewGradient: string;
-
-export declare const picto360DegreeViewSolid: string;
-
 export declare const picto5Stars: string;
 
-export declare const picto5StarsGradient: string;
-
-export declare const picto5StarsSolid: string;
-
 export declare const pictoACID: string;
 
-export declare const pictoACIDGradient: string;
-
-export declare const pictoACIDSolid: string;
-
 export declare const pictoAgno: string;
 
-export declare const pictoAgnoGradient: string;
-
-export declare const pictoAgnoSolid: string;
-
 export declare const pictoAI: string;
 
-export declare const pictoAIGradient: string;
-
-export declare const pictoAISolid: string;
-
 export declare const pictoAPI: string;
 
-export declare const pictoAPIGradient: string;
-
-export declare const pictoAPISolid: string;
-
 export declare const pictoArrowDown: string;
 
-export declare const pictoArrowDownGradient: string;
-
-export declare const pictoArrowDownSolid: string;
-
 export declare const pictoArrows: string;
 
-export declare const pictoArrowsGradient: string;
-
-export declare const pictoArrowsSolid: string;
-
 export declare const pictoArrowTopRight: string;
 
-export declare const pictoArrowTopRightGradient: string;
-
-export declare const pictoArrowTopRightSolid: string;
-
 export declare const pictoArrowUp: string;
 
-export declare const pictoArrowUpGradient: string;
-
-export declare const pictoArrowUpSolid: string;
-
 export declare const pictoAtom: string;
 
-export declare const pictoAtomGradient: string;
-
-export declare const pictoAtomSolid: string;
-
 export declare const pictoAudioClip: string;
 
-export declare const pictoAudioClipGradient: string;
-
-export declare const pictoAudioClipSolid: string;
-
 export declare const pictoBackups: string;
 
-export declare const pictoBackupsGradient: string;
-
-export declare const pictoBackupsSolid: string;
-
 export declare const pictoBadgeAccess: string;
 
-export declare const pictoBadgeAccessGradient: string;
-
-export declare const pictoBadgeAccessSolid: string;
-
 export declare const pictoBank: string;
 
-export declare const pictoBankGradient: string;
-
-export declare const pictoBankSolid: string;
-
 export declare const pictoBars: string;
 
-export declare const pictoBarsGradient: string;
-
-export declare const pictoBarsSolid: string;
-
 export declare const pictoBegin: string;
 
-export declare const pictoBeginGradient: string;
-
-export declare const pictoBeginSolid: string;
-
 export declare const pictoBicycle: string;
 
-export declare const pictoBicycleGradient: string;
-
-export declare const pictoBicycleSolid: string;
-
 export declare const pictoBinary: string;
 
-export declare const pictoBinaryGradient: string;
-
-export declare const pictoBinarySolid: string;
-
 export declare const pictoBlocks: string;
 
-export declare const pictoBlocksGradient: string;
-
-export declare const pictoBlocksSolid: string;
-
 export declare const pictoBlog: string;
 
-export declare const pictoBlogGradient: string;
-
-export declare const pictoBlogSolid: string;
-
 export declare const pictoBook: string;
 
-export declare const pictoBookGradient: string;
-
 export declare const pictoBookmark: string;
 
-export declare const pictoBookmarkGradient: string;
-
-export declare const pictoBookmarkSolid: string;
-
-export declare const pictoBookSolid: string;
-
 export declare const pictoBot: string;
 
-export declare const pictoBotGradient: string;
-
-export declare const pictoBotSolid: string;
-
 export declare const pictoBrain: string;
 
-export declare const pictoBrainGradient: string;
-
-export declare const pictoBrainSolid: string;
-
 export declare const pictoBreakfast: string;
 
-export declare const pictoBreakfastGradient: string;
-
-export declare const pictoBreakfastSolid: string;
-
 export declare const pictoBucket: string;
 
-export declare const pictoBucketGradient: string;
-
-export declare const pictoBucketSolid: string;
-
 export declare const pictoCalculator: string;
 
-export declare const pictoCalculatorGradient: string;
-
-export declare const pictoCalculatorSolid: string;
-
 export declare const pictoCancel: string;
 
-export declare const pictoCancelGradient: string;
-
-export declare const pictoCancelSolid: string;
-
-export declare const pictoCapabilites: string;
-
-export declare const pictoCapabilitesGradient: string;
-
-export declare const pictoCapabilitesSolid: string;
+export declare const pictoCapabilities: string;
 
 export declare const pictoCBOR: string;
 
-export declare const pictoCBORGradient: string;
-
-export declare const pictoCBORSolid: string;
-
 export declare const pictoChatHeart: string;
 
-export declare const pictoChatHeartGradient: string;
-
-export declare const pictoChatHeartSolid: string;
-
 export declare const pictoChecklist: string;
 
-export declare const pictoChecklistGradient: string;
-
-export declare const pictoChecklistSolid: string;
-
 export declare const pictoChristmas: string;
 
-export declare const pictoChristmasGradient: string;
-
-export declare const pictoChristmasSolid: string;
-
 export declare const pictoCircle: string;
 
-export declare const pictoCircleGradient: string;
-
 export declare const pictoCircles: string;
 
-export declare const pictoCirclesGradient: string;
-
-export declare const pictoCircleSolid: string;
-
-export declare const pictoCirclesSolid: string;
-
 export declare const pictoClaimsManagement: string;
 
-export declare const pictoClaimsManagementGradient: string;
-
-export declare const pictoClaimsManagementSolid: string;
-
 export declare const pictoClaude: string;
 
-export declare const pictoClaudeGradient: string;
-
-export declare const pictoClaudeSolid: string;
-
 export declare const pictoCline: string;
 
-export declare const pictoClineGradient: string;
-
-export declare const pictoClineSolid: string;
-
 export declare const pictoClipboard: string;
 
-export declare const pictoClipboardGradient: string;
-
-export declare const pictoClipboardSolid: string;
-
 export declare const pictoClisdb: string;
 
-export declare const pictoClisdbGradient: string;
-
-export declare const pictoClisdbSolid: string;
-
 export declare const pictoClock: string;
 
-export declare const pictoClockGradient: string;
-
-export declare const pictoClockSolid: string;
-
 export declare const pictoCloud: string;
 
-export declare const pictoCloudGradient: string;
-
 export declare const pictoCloudNodes: string;
 
-export declare const pictoCloudNodesGradient: string;
-
-export declare const pictoCloudNodesSolid: string;
-
-export declare const pictoCloudSolid: string;
-
 export declare const pictoColor: string;
 
-export declare const pictoColorGradient: string;
-
-export declare const pictoColorSolid: string;
-
-export declare const pictoCommit: string;
-
-export declare const pictoCommitGradient: string;
+export declare const pictoCommit: string;
 
 export declare const pictoCommitQueue: string;
 
-export declare const pictoCommitQueueGradient: string;
-
-export declare const pictoCommitQueueSolid: string;
-
-export declare const pictoCommitSolid: string;
-
 export declare const pictoCompass: string;
 
-export declare const pictoCompassGradient: string;
-
-export declare const pictoCompassSolid: string;
-
 export declare const pictoCompute: string;
 
-export declare const pictoComputeGradient: string;
-
 export declare const pictoComputer: string;
 
-export declare const pictoComputerGradient: string;
-
-export declare const pictoComputerSolid: string;
-
-export declare const pictoComputeSolid: string;
-
 export declare const pictoConflictDetection: string;
 
-export declare const pictoConflictDetectionGradient: string;
-
-export declare const pictoConflictDetectionSolid: string;
-
 export declare const pictoConnect: string;
 
-export declare const pictoConnectGradient: string;
-
-export declare const pictoConnectSolid: string;
-
 export declare const pictoContext: string;
 
-export declare const pictoContextGradient: string;
-
-export declare const pictoContextSolid: string;
-
 export declare const pictoCopyright: string;
 
-export declare const pictoCopyrightGradient: string;
-
-export declare const pictoCopyrightSolid: string;
-
 export declare const pictoCore: string;
 
-export declare const pictoCoreGradient: string;
-
-export declare const pictoCoreSolid: string;
-
 export declare const pictoCreate: string;
 
-export declare const pictoCreateGradient: string;
-
-export declare const pictoCreateSolid: string;
-
 export declare const pictoCrop: string;
 
-export declare const pictoCropGradient: string;
-
-export declare const pictoCropSolid: string;
-
 export declare const pictoCrown: string;
 
-export declare const pictoCrownGradient: string;
-
-export declare const pictoCrownSolid: string;
-
 export declare const pictoCurlyBraces: string;
 
-export declare const pictoCurlyBracesGradient: string;
-
-export declare const pictoCurlyBracesSolid: string;
-
 export declare const pictoCursor: string;
 
-export declare const pictoCursorGradient: string;
-
-export declare const pictoCursorSolid: string;
-
 export declare const pictoCustomAPIEndpoints: string;
 
-export declare const pictoCustomAPIEndpointsGradient: string;
-
-export declare const pictoCustomAPIEndpointsSolid: string;
-
 export declare const pictoDarthVader: string;
 
-export declare const pictoDarthVaderGradient: string;
-
-export declare const pictoDarthVaderSolid: string;
-
 export declare const pictoDedicatedSupport: string;
 
-export declare const pictoDedicatedSupportGradient: string;
-
-export declare const pictoDedicatedSupportSolid: string;
-
 export declare const pictoDev: string;
 
 export declare const pictoDevelopment: string;
 
-export declare const pictoDevelopmentGradient: string;
-
-export declare const pictoDevelopmentSolid: string;
-
-export declare const pictoDevGradient: string;
-
-export declare const pictoDevSolid: string;
-
 export declare const pictoDiagram: string;
 
-export declare const pictoDiagramGradient: string;
-
-export declare const pictoDiagramSolid: string;
-
 export declare const pictoDiscord: string;
 
-export declare const pictoDiscordGradient: string;
-
-export declare const pictoDiscordSolid: string;
-
 export declare const pictoDocument: string;
 
-export declare const pictoDocumentGradient: string;
-
 export declare const pictoDocumentSearch: string;
 
-export declare const pictoDocumentSearchGradient: string;
-
-export declare const pictoDocumentSearchSolid: string;
-
-export declare const pictoDocumentSolid: string;
-
 export declare const pictoDollar: string;
 
-export declare const pictoDollarGradient: string;
-
-export declare const pictoDollarSolid: string;
-
 export declare const pictoDownload: string;
 
-export declare const pictoDownloadGradient: string;
-
-export declare const pictoDownloadSolid: string;
-
 export declare const pictoDragCursor: string;
 
-export declare const pictoDragCursorGradient: string;
-
-export declare const pictoDragCursorSolid: string;
-
 export declare const pictoEar: string;
 
-export declare const pictoEarGradient: string;
-
-export declare const pictoEarSolid: string;
-
 export declare const pictoEmbeddedDevices: string;
 
-export declare const pictoEmbeddedDevicesGradient: string;
-
-export declare const pictoEmbeddedDevicesSolid: string;
-
 export declare const pictoEmbeddedEdge: string;
 
-export declare const pictoEmbeddedEdgeGradient: string;
-
-export declare const pictoEmbeddedEdgeSolid: string;
-
-export declare const pictoEmbeddingg: string;
-
-export declare const pictoEmbeddinggGradient: string;
-
-export declare const pictoEmbeddinggSolid: string;
+export declare const pictoEmbedding: string;
 
 export declare const pictoEntertainment: string;
 
-export declare const pictoEntertainmentGradient: string;
-
-export declare const pictoEntertainmentSolid: string;
-
 export declare const pictoEV: string;
 
-export declare const pictoEVGradient: string;
-
-export declare const pictoEVSolid: string;
-
 export declare const pictoExpand: string;
 
-export declare const pictoExpandGradient: string;
-
-export declare const pictoExpandSolid: string;
-
 export declare const pictoFile: string;
 
-export declare const pictoFileGradient: string;
-
-export declare const pictoFileSolid: string;
-
 export declare const pictoFilmMovie: string;
 
-export declare const pictoFilmMovieGradient: string;
-
-export declare const pictoFilmMovieSolid: string;
-
 export declare const pictoFingerPrints: string;
 
-export declare const pictoFingerPrintsGradient: string;
-
-export declare const pictoFingerPrintsSolid: string;
-
 export declare const pictoFlexible: string;
 
-export declare const pictoFlexibleGradient: string;
-
-export declare const pictoFlexibleSolid: string;
-
 export declare const pictoFloat: string;
 
-export declare const pictoFloatGradient: string;
-
-export declare const pictoFloatSolid: string;
-
 export declare const pictoForm: string;
 
-export declare const pictoFormGradient: string;
-
-export declare const pictoFormSolid: string;
-
 export declare const pictoFraudDetection: string;
 
-export declare const pictoFraudDetectionGradient: string;
-
-export declare const pictoFraudDetectionSolid: string;
-
 export declare const pictoFrown: string;
 
-export declare const pictoFrownGradient: string;
-
-export declare const pictoFrownSolid: string;
-
 export declare const pictoFullTextSearch: string;
 
-export declare const pictoFullTextSearchGradient: string;
-
-export declare const pictoFullTextSearchSolid: string;
-
 export declare const pictoGenerativeAI: string;
 
-export declare const pictoGenerativeAIGradient: string;
-
-export declare const pictoGenerativeAISolid: string;
-
 export declare const pictoGeospatial: string;
 
-export declare const pictoGeospatialGradient: string;
-
-export declare const pictoGeospatialSolid: string;
-
 export declare const pictoGitHub: string;
 
-export declare const pictoGitHubGradient: string;
-
-export declare const pictoGitHubSolid: string;
-
 export declare const pictoGlitter: string;
 
-export declare const pictoGlitterGradient: string;
-
-export declare const pictoGlitterSolid: string;
-
 export declare const pictoGlobe: string;
 
-export declare const pictoGlobeGradient: string;
-
-export declare const pictoGlobeSolid: string;
-
 export declare const pictoGQL: string;
 
-export declare const pictoGQLGradient: string;
-
-export declare const pictoGQLSolid: string;
-
 export declare const pictoGraph: string;
 
-export declare const pictoGraphGradient: string;
-
 export declare const pictoGraphQL: string;
 
-export declare const pictoGraphQLGradient: string;
-
-export declare const pictoGraphQLSolid: string;
-
 export declare const pictoGraphRAG: string;
 
-export declare const pictoGraphRAGGradient: string;
-
-export declare const pictoGraphRAGSolid: string;
-
-export declare const pictoGraphSolid: string;
-
 export declare const pictoGrid: string;
 
-export declare const pictoGridGradient: string;
-
-export declare const pictoGridSolid: string;
-
 export declare const pictoGrowth: string;
 
-export declare const pictoGrowthGradient: string;
-
-export declare const pictoGrowthSolid: string;
-
 export declare const pictoHands: string;
 
-export declare const pictoHandsGradient: string;
-
 export declare const pictoHandsOn: string;
 
-export declare const pictoHandsOnGradient: string;
-
-export declare const pictoHandsOnSolid: string;
-
-export declare const pictoHandsSolid: string;
-
 export declare const pictoHardDisc: string;
 
-export declare const pictoHardDiscGradient: string;
-
-export declare const pictoHardDiscSolid: string;
-
 export declare const pictoHealthBubble: string;
 
-export declare const pictoHealthBubbleGradient: string;
-
-export declare const pictoHealthBubbleSolid: string;
-
 export declare const pictoHealthChat: string;
 
-export declare const pictoHealthChatGradient: string;
-
-export declare const pictoHealthChatSolid: string;
-
 export declare const pictoHealthInsurance: string;
 
-export declare const pictoHealthInsuranceGradient: string;
-
-export declare const pictoHealthInsuranceSolid: string;
-
 export declare const pictoHeart: string;
 
-export declare const pictoHeartGradient: string;
-
-export declare const pictoHeartSolid: string;
-
 export declare const pictoHomeSetup: string;
 
-export declare const pictoHomeSetupGradient: string;
-
-export declare const pictoHomeSetupSolid: string;
-
 export declare const pictoHTTP: string;
 
-export declare const pictoHTTPGradient: string;
-
-export declare const pictoHTTPSolid: string;
-
 export declare const pictoHyperlink: string;
 
-export declare const pictoHyperlinkGradient: string;
-
-export declare const pictoHyperlinkSolid: string;
-
 export declare const pictoImage: string;
 
-export declare const pictoImageGradient: string;
-
-export declare const pictoImageSolid: string;
-
 export declare const pictoInbox: string;
 
-export declare const pictoInboxGradient: string;
-
-export declare const pictoInboxSolid: string;
-
 export declare const pictoInclusiveCommunication: string;
 
-export declare const pictoInclusiveCommunicationGradient: string;
-
-export declare const pictoInclusiveCommunicationSolid: string;
-
 export declare const pictoInstagram: string;
 
-export declare const pictoInstagramGradient: string;
-
-export declare const pictoInstagramSolid: string;
-
 export declare const pictoInstanceVersion: string;
 
-export declare const pictoInstanceVersionGradient: string;
-
-export declare const pictoInstanceVersionSolid: string;
-
 export declare const pictoIntegrations: string;
 
-export declare const pictoIntegrationsGradient: string;
-
-export declare const pictoIntegrationsSolid: string;
-
 export declare const pictoIntegrationSupport: string;
 
-export declare const pictoIntegrationSupportGradient: string;
-
-export declare const pictoIntegrationSupportSolid: string;
-
 export declare const pictoIntercom: string;
 
-export declare const pictoIntercomGradient: string;
-
-export declare const pictoIntercomSolid: string;
-
 export declare const pictoJavascript: string;
 
-export declare const pictoJavascriptGradient: string;
-
-export declare const pictoJavascriptSolid: string;
-
 export declare const pictoJSON: string;
 
 export declare const pictoJSONFile: string;
 
-export declare const pictoJSONFileGradient: string;
-
-export declare const pictoJSONFileSolid: string;
-
-export declare const pictoJSONGradient: string;
-
-export declare const pictoJSONSolid: string;
-
 export declare const pictoKey: string;
 
-export declare const pictoKeyGradient: string;
-
-export declare const pictoKeySolid: string;
-
 export declare const pictoKeyValue: string;
 
-export declare const pictoKeyValueGradient: string;
-
-export declare const pictoKeyValueSolid: string;
-
 export declare const pictoKnowledgeGraph: string;
 
-export declare const pictoKnowledgeGraphGradient: string;
-
-export declare const pictoKnowledgeGraphSolid: string;
-
 export declare const pictoKV: string;
 
-export declare const pictoKVGradient: string;
-
-export declare const pictoKVSolid: string;
-
 export declare const pictoLangChain: string;
 
-export declare const pictoLangChainGradient: string;
-
-export declare const pictoLangChainSolid: string;
-
 export declare const pictoLaptop: string;
 
-export declare const pictoLaptopGradient: string;
-
-export declare const pictoLaptopSolid: string;
-
 export declare const pictoLearn: string;
 
-export declare const pictoLearnGradient: string;
-
-export declare const pictoLearnSolid: string;
-
 export declare const pictoLifebuoy: string;
 
-export declare const pictoLifebuoyGradient: string;
-
-export declare const pictoLifebuoySolid: string;
-
 export declare const pictoLightbulb: string;
 
-export declare const pictoLightbulbGradient: string;
-
-export declare const pictoLightbulbSolid: string;
-
 export declare const pictoLinkedIn: string;
 
-export declare const pictoLinkedInGradient: string;
-
-export declare const pictoLinkedInSolid: string;
-
 export declare const pictoLunch: string;
 
-export declare const pictoLunchGradient: string;
-
-export declare const pictoLunchSolid: string;
-
 export declare const pictoMachineLearning: string;
 
-export declare const pictoMachineLearningGradient: string;
-
-export declare const pictoMachineLearningSolid: string;
-
 export declare const pictoMail: string;
 
-export declare const pictoMailGradient: string;
-
-export declare const pictoMailSolid: string;
-
 export declare const pictoManInCircle: string;
 
-export declare const pictoManInCircleGradient: string;
-
-export declare const pictoManInCircleSolid: string;
-
 export declare const pictoMCP: string;
 
-export declare const pictoMCPGradient: string;
-
-export declare const pictoMCPSolid: string;
-
 export declare const pictoMediaFile: string;
 
-export declare const pictoMediaFileGradient: string;
-
-export declare const pictoMediaFileSolid: string;
-
 export declare const pictoMedium: string;
 
-export declare const pictoMediumGradient: string;
-
-export declare const pictoMediumSolid: string;
-
 export declare const pictoMemory: string;
 
-export declare const pictoMemoryGradient: string;
-
-export declare const pictoMemorySolid: string;
-
 export declare const pictoMentalHealth: string;
 
-export declare const pictoMentalHealthGradient: string;
-
-export declare const pictoMentalHealthSolid: string;
-
 export declare const pictoMergeQueue: string;
 
-export declare const pictoMergeQueueGradient: string;
-
-export declare const pictoMergeQueueSolid: string;
-
 export declare const pictoMicrophone: string;
 
-export declare const pictoMicrophoneGradient: string;
-
-export declare const pictoMicrophoneSolid: string;
-
 export declare const pictoML: string;
 
-export declare const pictoMLGradient: string;
-
-export declare const pictoMLSolid: string;
-
 export declare const pictoMonitoring: string;
 
-export declare const pictoMonitoringGradient: string;
-
-export declare const pictoMonitoringSolid: string;
-
 export declare const pictoMoon: string;
 
-export declare const pictoMoonGradient: string;
-
-export declare const pictoMoonSolid: string;
-
 export declare const pictoN8n: string;
 
-export declare const pictoN8nGradient: string;
-
-export declare const pictoN8nSolid: string;
-
 export declare const pictoNature: string;
 
-export declare const pictoNatureGradient: string;
-
-export declare const pictoNatureSolid: string;
-
 export declare const pictoNinja: string;
 
-export declare const pictoNinjaGradient: string;
-
-export declare const pictoNinjaSolid: string;
-
 export declare const pictoNode: string;
 
 export declare const pictoNodeBrain: string;
 
-export declare const pictoNodeBrainGradient: string;
-
-export declare const pictoNodeBrainSolid: string;
-
-export declare const pictoNodeGradient: string;
-
-export declare const pictoNodeSolid: string;
-
 export declare const pictoNotification: string;
 
-export declare const pictoNotificationGradient: string;
-
-export declare const pictoNotificationSolid: string;
-
 export declare const pictoOnDisk: string;
 
-export declare const pictoOnDiskGradient: string;
-
-export declare const pictoOnDiskSolid: string;
-
 export declare const pictoOpenAI: string;
 
-export declare const pictoOpenAIGradient: string;
-
-export declare const pictoOpenAISolid: string;
-
 export declare const pictoOperationalReadiness: string;
 
-export declare const pictoOperationalReadinessGradient: string;
-
-export declare const pictoOperationalReadinessSolid: string;
-
 export declare const pictoPadlockClosed: string;
 
-export declare const pictoPadlockClosedGradient: string;
-
-export declare const pictoPadlockClosedSolid: string;
-
 export declare const pictoPadlockOpen: string;
 
-export declare const pictoPadlockOpenGradient: string;
-
-export declare const pictoPadlockOpenSolid: string;
-
 export declare const pictoPalette: string;
 
-export declare const pictoPaletteGradient: string;
-
-export declare const pictoPaletteSolid: string;
-
 export declare const pictoPaperclip: string;
 
-export declare const pictoPaperclipGradient: string;
-
-export declare const pictoPaperclipSolid: string;
-
 export declare const pictoPasskey: string;
 
-export declare const pictoPasskeyGradient: string;
-
-export declare const pictoPasskeySolid: string;
-
 export declare const pictoPath: string;
 
-export declare const pictoPathGradient: string;
-
-export declare const pictoPathSolid: string;
-
 export declare const pictoPDF: string;
 
-export declare const pictoPDFGradient: string;
-
-export declare const pictoPDFSolid: string;
-
 export declare const pictoPen: string;
 
-export declare const pictoPenGradient: string;
-
 export declare const pictoPension: string;
 
-export declare const pictoPensionGradient: string;
-
-export declare const pictoPensionSolid: string;
-
-export declare const pictoPenSolid: string;
-
 export declare const pictoPercentage: string;
 
-export declare const pictoPercentageGradient: string;
-
-export declare const pictoPercentageSolid: string;
-
 export declare const pictoPerformance: string;
 
-export declare const pictoPerformanceGradient: string;
-
-export declare const pictoPerformanceSolid: string;
-
 export declare const pictoPersonalizedPolicy: string;
 
-export declare const pictoPersonalizedPolicyGradient: string;
-
-export declare const pictoPersonalizedPolicySolid: string;
-
 export declare const pictoPieChart: string;
 
-export declare const pictoPieChartGradient: string;
-
-export declare const pictoPieChartSolid: string;
-
 export declare const pictoPin: string;
 
-export declare const pictoPinGradient: string;
-
-export declare const pictoPinSolid: string;
-
 export declare const pictoPlay: string;
 
-export declare const pictoPlayGradient: string;
-
 export declare const pictoPlayPause: string;
 
-export declare const pictoPlayPauseGradient: string;
-
-export declare const pictoPlayPauseSolid: string;
-
-export declare const pictoPlaySolid: string;
-
 export declare const pictoPlugins: string;
 
-export declare const pictoPluginsGradient: string;
-
-export declare const pictoPluginsSolid: string;
-
 export declare const pictoPlus: string;
 
-export declare const pictoPlusGradient: string;
-
-export declare const pictoPlusSolid: string;
-
 export declare const pictoPortability: string;
 
-export declare const pictoPortabilityGradient: string;
-
-export declare const pictoPortabilitySolid: string;
-
 export declare const pictoPortfolioRiskManagement: string;
 
-export declare const pictoPortfolioRiskManagementGradient: string;
-
-export declare const pictoPortfolioRiskManagementSolid: string;
-
 export declare const pictoPresentation: string;
 
-export declare const pictoPresentationGradient: string;
-
-export declare const pictoPresentationSolid: string;
-
 export declare const pictoPriceTag: string;
 
-export declare const pictoPriceTagGradient: string;
-
-export declare const pictoPriceTagSolid: string;
-
 export declare const pictoProblemDangerError: string;
 
-export declare const pictoProblemDangerErrorGradient: string;
-
-export declare const pictoProblemDangerErrorSolid: string;
-
 export declare const pictoPuzzle: string;
 
-export declare const pictoPuzzleGradient: string;
-
-export declare const pictoPuzzleSolid: string;
-
 export declare const pictoPython: string;
 
-export declare const pictoPythonGradient: string;
-
-export declare const pictoPythonSolid: string;
-
 export declare const pictoQL: string;
 
-export declare const pictoQLGradient: string;
-
-export declare const pictoQLSolid: string;
-
 export declare const pictoQuestion: string;
 
-export declare const pictoQuestionGradient: string;
-
-export declare const pictoQuestionSolid: string;
-
 export declare const pictoQuotationMarks: string;
 
-export declare const pictoQuotationMarksGradient: string;
-
-export declare const pictoQuotationMarksSolid: string;
-
 export declare const pictoQuote: string;
 
-export declare const pictoQuoteGradient: string;
-
-export declare const pictoQuoteSolid: string;
-
 export declare const pictoRAG: string;
 
-export declare const pictoRAGGradient: string;
-
-export declare const pictoRAGSolid: string;
-
 export declare const pictoRealTimeApplications: string;
 
-export declare const pictoRealTimeApplicationsGradient: string;
-
-export declare const pictoRealTimeApplicationsSolid: string;
-
 export declare const pictoReddit: string;
 
-export declare const pictoRedditGradient: string;
-
-export declare const pictoRedditSolid: string;
-
 export declare const pictoReferenceGuides: string;
 
-export declare const pictoReferenceGuidesGradient: string;
-
-export declare const pictoReferenceGuidesSolid: string;
-
 export declare const pictoRegulatoryCompliance: string;
 
-export declare const pictoRegulatoryComplianceGradient: string;
-
-export declare const pictoRegulatoryComplianceSolid: string;
-
 export declare const pictoRelational: string;
 
-export declare const pictoRelationalGradient: string;
-
-export declare const pictoRelationalSolid: string;
-
 export declare const pictoREST: string;
 
-export declare const pictoRESTGradient: string;
-
-export declare const pictoRESTSolid: string;
-
 export declare const pictoRiskManagement: string;
 
-export declare const pictoRiskManagementGradient: string;
-
-export declare const pictoRiskManagementSolid: string;
-
 export declare const pictoRocket: string;
 
-export declare const pictoRocketGradient: string;
-
-export declare const pictoRocketSolid: string;
-
 export declare const pictoRPC: string;
 
-export declare const pictoRPCGradient: string;
-
-export declare const pictoRPCSolid: string;
-
 export declare const pictoRust: string;
 
-export declare const pictoRustGradient: string;
-
-export declare const pictoRustSolid: string;
-
 export declare const pictoSafe: string;
 
-export declare const pictoSafeGradient: string;
-
-export declare const pictoSafeSolid: string;
-
 export declare const pictoSaveFloppyDisc: string;
 
-export declare const pictoSaveFloppyDiscGradient: string;
-
-export declare const pictoSaveFloppyDiscSolid: string;
-
 export declare const pictoScale: string;
 
-export declare const pictoScaleGradient: string;
-
-export declare const pictoScaleSolid: string;
-
 export declare const pictoSDBCloud: string;
 
-export declare const pictoSDBCloudGradient: string;
-
-export declare const pictoSDBCloudSolid: string;
-
 export declare const pictoSDKs: string;
 
-export declare const pictoSDKsGradient: string;
-
-export declare const pictoSDKsSolid: string;
-
 export declare const pictoSecureDocument: string;
 
-export declare const pictoSecureDocumentGradient: string;
-
-export declare const pictoSecureDocumentSolid: string;
-
 export declare const pictoSettings: string;
 
-export declare const pictoSettingsGradient: string;
-
-export declare const pictoSettingsSolid: string;
-
 export declare const pictoShield: string;
 
-export declare const pictoShieldGradient: string;
-
-export declare const pictoShieldSolid: string;
-
 export declare const pictoSidekick: string;
 
-export declare const pictoSidekickGradient: string;
-
-export declare const pictoSidekickSolid: string;
-
 export declare const pictoSignal: string;
 
-export declare const pictoSignalGradient: string;
-
-export declare const pictoSignalSolid: string;
-
 export declare const pictoSmartphone: string;
 
-export declare const pictoSmartphoneGradient: string;
-
-export declare const pictoSmartphoneSolid: string;
-
 export declare const pictoSmile: string;
 
-export declare const pictoSmileGradient: string;
-
-export declare const pictoSmileSolid: string;
-
 export declare const pictoSpectron: string;
 
-export declare const pictoSpectronGradient: string;
-
-export declare const pictoSpectronSolid: string;
-
 export declare const pictoSpeed: string;
 
-export declare const pictoSpeedGradient: string;
-
-export declare const pictoSpeedSolid: string;
-
 export declare const pictoSQLBackends: string;
 
-export declare const pictoSQLBackendsGradient: string;
-
-export declare const pictoSQLBackendsSolid: string;
-
 export declare const pictoStability: string;
 
-export declare const pictoStabilityGradient: string;
-
-export declare const pictoStabilitySolid: string;
-
 export declare const pictoStackOverflow: string;
 
-export declare const pictoStackOverflowGradient: string;
-
-export declare const pictoStackOverflowSolid: string;
-
 export declare const pictoStar: string;
 
-export declare const pictoStarGradient: string;
-
-export declare const pictoStarSolid: string;
-
 export declare const pictoSun: string;
 
-export declare const pictoSunGradient: string;
-
-export declare const pictoSunSolid: string;
-
 export declare const pictoSurrealDB: string;
 
-export declare const pictoSurrealDBGradient: string;
-
-export declare const pictoSurrealDBSolid: string;
-
 export declare const pictoSurrealism: string;
 
-export declare const pictoSurrealismGradient: string;
-
-export declare const pictoSurrealismSolid: string;
-
-export declare const pictoSurrealist: string;
-
-export declare const pictoSurrealistGradient: string;
-
-export declare const pictoSurrealistSolid: string;
+export declare const pictoSurrealist: string;
 
 export declare const pictoSurrealKV: string;
 
-export declare const pictoSurrealKVGradient: string;
-
-export declare const pictoSurrealKVSolid: string;
-
 export declare const pictoSurrealMCP: string;
 
-export declare const pictoSurrealMCPGradient: string;
-
-export declare const pictoSurrealMCPSolid: string;
-
 export declare const pictoSurrealML: string;
 
-export declare const pictoSurrealMLGradient: string;
-
-export declare const pictoSurrealMLSolid: string;
-
 export declare const pictoSwag: string;
 
-export declare const pictoSwagGradient: string;
-
-export declare const pictoSwagSolid: string;
-
 export declare const pictoSwatch: string;
 
-export declare const pictoSwatchGradient: string;
-
-export declare const pictoSwatchSolid: string;
-
 export declare const pictoTables: string;
 
-export declare const pictoTablesGradient: string;
-
-export declare const pictoTablesSolid: string;
-
 export declare const pictoText: string;
 
-export declare const pictoTextGradient: string;
-
-export declare const pictoTextSolid: string;
-
 export declare const pictoThreads: string;
 
-export declare const pictoThreadsGradient: string;
-
-export declare const pictoThreadsSolid: string;
-
 export declare const pictoThumbnail: string;
 
-export declare const pictoThumbnailGradient: string;
-
-export declare const pictoThumbnailSolid: string;
-
 export declare const pictoThumbsDown: string;
 
-export declare const pictoThumbsDownGradient: string;
-
-export declare const pictoThumbsDownSolid: string;
-
 export declare const pictoThumbsUp: string;
 
-export declare const pictoThumbsUpGradient: string;
-
-export declare const pictoThumbsUpSolid: string;
-
 export declare const pictoTimeline: string;
 
-export declare const pictoTimelineGradient: string;
-
-export declare const pictoTimelineSolid: string;
-
 export declare const pictoTimeSeries: string;
 
-export declare const pictoTimeSeriesGradient: string;
-
-export declare const pictoTimeSeriesSolid: string;
-
 export declare const pictoTOML: string;
 
-export declare const pictoTOMLGradient: string;
-
-export declare const pictoTOMLSolid: string;
-
 export declare const pictoTravel: string;
 
-export declare const pictoTravelGradient: string;
-
-export declare const pictoTravelSolid: string;
-
 export declare const pictoTrigger: string;
 
-export declare const pictoTriggerGradient: string;
-
-export declare const pictoTriggerSolid: string;
-
 export declare const pictoTutorials: string;
 
-export declare const pictoTutorialsGradient: string;
-
-export declare const pictoTutorialsSolid: string;
-
 export declare const pictoTwoCircles: string;
 
-export declare const pictoTwoCirclesGradient: string;
-
-export declare const pictoTwoCirclesSolid: string;
-
 export declare const pictoUniversity: string;
 
-export declare const pictoUniversityGradient: string;
-
-export declare const pictoUniversitySolid: string;
-
 export declare const pictoUpdate: string;
 
-export declare const pictoUpdateGradient: string;
-
-export declare const pictoUpdateSolid: string;
-
 export declare const pictoUpscale: string;
 
-export declare const pictoUpscaleGradient: string;
-
-export declare const pictoUpscaleSolid: string;
-
 export declare const pictoValue: string;
 
-export declare const pictoValueGradient: string;
-
-export declare const pictoValueSolid: string;
-
 export declare const pictoVectorSearch: string;
 
-export declare const pictoVectorSearchGradient: string;
-
-export declare const pictoVectorSearchSolid: string;
-
 export declare const pictoVectorStores: string;
 
-export declare const pictoVectorStoresGradient: string;
-
-export declare const pictoVectorStoresSolid: string;
-
 export declare const pictoVideoFile: string;
 
-export declare const pictoVideoFileGradient: string;
-
-export declare const pictoVideoFileSolid: string;
-
 export declare const pictoVisualStudioCode: string;
 
-export declare const pictoVisualStudioCodeGradient: string;
-
-export declare const pictoVisualStudioCodeSolid: string;
-
 export declare const pictoWasm: string;
 
-export declare const pictoWasmGradient: string;
-
-export declare const pictoWasmSolid: string;
-
 export declare const pictoWindsurf: string;
 
-export declare const pictoWindsurfGradient: string;
-
-export declare const pictoWindsurfSolid: string;
-
 export declare const pictoX: string;
 
-export declare const pictoXGradient: string;
-
-export declare const pictoXSolid: string;
-
 export declare const pictoYoga: string;
 
-export declare const pictoYogaGradient: string;
-
-export declare const pictoYogaSolid: string;
-
 export declare const pictoYoutube: string;
 
-export declare const pictoYoutubeGradient: string;
-
-export declare const pictoYoutubeSolid: string;
-
 export declare const pictoYUApp: string;
 
-export declare const pictoYUAppGradient: string;
-
-export declare const pictoYUAppSolid: string;
-
 export declare const pictoZapier: string;
 
-export declare const pictoZapierGradient: string;
-
-export declare const pictoZapierSolid: string;
-
 export declare const pictoZed: string;
 
-export declare const pictoZedGradient: string;
-
-export declare const pictoZedSolid: string;
-
 export declare const pictoZoomIn: string;
 
-export declare const pictoZoomInGradient: string;
-
-export declare const pictoZoomInSolid: string;
+/** Surreal Pink — an accent hue with no product binding. */
+export declare const PINK: MantineColorsTuple;
 
 /**
  * Process highlight regions in code
@@ -3367,12 +2732,28 @@ export declare function processHighlightRegions(code: string): {
     processedCode: string;
 };
 
-export declare function RailroadDiagram({ ast, ...props }: RailroadDiagramProps): ReactNode;
+/** Which brand palette each product is coupled to. */
+export declare const PRODUCT_COLORS: Record<SurrealProduct, string>;
+
+/** Surreal Purple — the ground color for hero sections, active navigation and the logo. */
+export declare const PURPLE: MantineColorsTuple;
+
+/** A railroad (syntax) diagram drawn from a parsed grammar tree. */
+export declare const RailroadDiagram: MantineComponent<RailroadDiagramFactory>;
 
-export declare interface RailroadDiagramProps extends BoxProps {
+export declare type RailroadDiagramFactory = Factory<{
+    props: RailroadDiagramProps;
+    ref: HTMLDivElement;
+    stylesNames: RailroadDiagramStylesNames;
+}>;
+
+export declare interface RailroadDiagramProps extends BoxProps, StylesApiProps<RailroadDiagramFactory>, ElementProps<"div"> {
+    /** Syntax tree to draw. Nothing renders when it is missing or has no children. */
     ast?: DiagramNode;
 }
 
+export declare type RailroadDiagramStylesNames = "root" | "diagram" | "terminal" | "nonTerminal" | "comment";
+
 export declare type RailroadNode = DiagramNode | SequenceNode | TerminalNode | NonTerminalNode | OptionalNode | ChoiceNode | OneOrMoreNode | ZeroOrMoreNode | CommentNode;
 
 /**
@@ -3409,27 +2790,52 @@ export declare function resolveLiveKind(items: StackerItem[], isMobile: boolean,
 export declare function resolveMarkdownComponent(def: MarkdownComponentDef | undefined): MarkdownComponentConfig | undefined;
 
 export declare interface ResponsiveTabItem {
+    /** Value reported by `onChange` when this tab is picked. */
     value: string;
+    /** Label rendered inside the tab. */
     label: ReactNode;
+    /** Plain-text label used by the select, when `label` is not a string. */
     selectLabel?: string;
+    /** Props forwarded to this tab only. */
     tabProps?: Omit<TabsTabProps, "value" | "children">;
 }
 
+/**
+ * A declarative wrapper around Mantine's `Tabs` that swaps to a `Select` once the
+ * viewport crosses a breakpoint.
+ *
+ * Every Mantine `Tabs` prop still applies, including the `classNames`, `styles`
+ * and `variant` styles API, so this owns no styling of its own.
+ */
 export declare function ResponsiveTabs({ tabs, value, defaultValue, onChange, breakpoint, showSelectWhen, mediaQuery, tabsListProps, tabProps, selectProps, ...tabsProps }: ResponsiveTabsProps): ReactNode;
 
 export declare interface ResponsiveTabsProps extends Omit<TabsProps_2, "children" | "value" | "defaultValue" | "onChange"> {
+    /** Tabs to render, in order. The first one is active by default. */
     tabs: ResponsiveTabItem[];
+    /** Controlled active value. */
     value?: string;
+    /** Uncontrolled initial value. */
     defaultValue?: string;
+    /** Called with the newly active value. */
     onChange?: (value: string | null) => void;
+    /** Width at which the tabs collapse into a select. @default `768` */
     breakpoint?: number | string;
+    /** Whether the select replaces the tabs above or below `breakpoint`. @default `"above"` */
     showSelectWhen?: "above" | "below";
+    /** Media query that overrides `breakpoint` and `showSelectWhen` outright. */
     mediaQuery?: string;
+    /** Props forwarded to the tabs list. */
     tabsListProps?: TabsListProps;
+    /** Props forwarded to every tab. */
     tabProps?: Omit<TabsTabProps, "value" | "children">;
+    /** Props forwarded to the select. */
     selectProps?: Omit<SelectProps, "data" | "value" | "defaultValue" | "onChange">;
 }
 
+/**
+ * A data-driven vertical timeline. Rows come from a render-prop so the caller owns the layout,
+ * and long lists are windowed automatically.
+ */
 export declare const RichTimeline: RichTimelineCompound;
 
 export declare const RichTimelineActions: FC<{
@@ -3443,6 +2849,24 @@ declare interface RichTimelineBadgeProps {
     color?: string;
 }
 
+/**
+ * Every prop that does not depend on the entry type. Split out so the Styles
+ * API has a concrete, non-generic props type to describe.
+ */
+export declare interface RichTimelineBaseProps extends BoxProps, StylesApiProps<RichTimelineFactory>, ElementProps<"div", "children"> {
+    order?: RichTimelineOrder;
+    selectedKey?: string;
+    /** Keys to render with the "invalid" treatment. */
+    invalidKeys?: ReadonlySet<string>;
+    /** Keys expanded on first render (expansion is uncontrolled thereafter). */
+    initialExpandedKeys?: ReadonlySet<string>;
+    /** `true`/options forces windowing; omitted, it auto-enables past 100 rows. */
+    virtualize?: boolean | VirtualizeOptions;
+    cardLayout?: RichTimelineCardLayout;
+    hideMarkerOnMobile?: boolean;
+    emptyMessage?: ReactNode;
+}
+
 export declare const RichTimelineCard: FC<RichTimelineCardProps>;
 
 /** Card density: `stacked` is a padded multi-line card, `compact` is a single dense row. */
@@ -3467,30 +2891,13 @@ declare interface RichTimelineCardProps {
 declare type RichTimelineChildren<T> = (props: RichTimelineRenderProps<T>) => ReactNode;
 
 /**
- * Public type of the `RichTimeline` compound: callable as a component, with the ready-made
- * `RichTimeline.Event` and the neutral layout slots attached as static members (`RichTimeline.Card`,
- * `RichTimeline.Row`, …).
+ * Public type of the `RichTimeline` compound: callable as a generic component, with the Styles
+ * API statics (`classes`, `extend`, `withProps`), the ready-made `RichTimeline.Event` and the
+ * neutral layout slots attached as static members (`RichTimeline.Card`, `RichTimeline.Row`, …).
  */
-export declare interface RichTimelineCompound {
-    <T>(props: RichTimelineProps<T>): ReactNode;
-    Event: typeof RichTimelineEvent;
-    Marker: typeof RichTimelineMarker;
-    StatusMarker: typeof RichTimelineStatusMarker;
-    IndexMarker: typeof RichTimelineIndexMarker;
-    Card: typeof RichTimelineCard;
-    Gap: typeof RichTimelineGap;
-    Row: typeof RichTimelineRow;
-    Header: typeof RichTimelineHeader;
-    Title: typeof RichTimelineTitle;
-    Badge: typeof RichTimelineBadge;
-    Description: typeof RichTimelineDescription;
-    Meta: typeof RichTimelineMeta;
-    Actions: typeof RichTimelineActions;
-    RowPrimary: typeof RichTimelineRowPrimary;
-    Details: typeof RichTimelineDetails;
-    DetailsToggle: typeof RichTimelineDetailsToggle;
-    Summary: typeof RichTimelineSummary;
-}
+export declare type RichTimelineCompound = RichTimelineFactory["signature"] & MantineComponentStaticProperties<RichTimelineFactory> & {
+    displayName: string;
+};
 
 export declare const RichTimelineDescription: FC<RichTimelineDescriptionProps>;
 
@@ -3586,6 +2993,32 @@ export declare interface RichTimelineEventProps {
     staggerIndex?: number;
 }
 
+export declare type RichTimelineFactory = Factory<{
+    props: RichTimelineBaseProps;
+    ref: HTMLDivElement;
+    stylesNames: RichTimelineStylesNames;
+    signature: <T>(props: RichTimelineProps<T>) => ReactNode;
+    staticComponents: {
+        Event: typeof RichTimelineEvent;
+        Marker: typeof RichTimelineMarker;
+        StatusMarker: typeof RichTimelineStatusMarker;
+        IndexMarker: typeof RichTimelineIndexMarker;
+        Card: typeof RichTimelineCard;
+        Gap: typeof RichTimelineGap;
+        Row: typeof RichTimelineRow;
+        Header: typeof RichTimelineHeader;
+        Title: typeof RichTimelineTitle;
+        Badge: typeof RichTimelineBadge;
+        Description: typeof RichTimelineDescription;
+        Meta: typeof RichTimelineMeta;
+        Actions: typeof RichTimelineActions;
+        RowPrimary: typeof RichTimelineRowPrimary;
+        Details: typeof RichTimelineDetails;
+        DetailsToggle: typeof RichTimelineDetailsToggle;
+        Summary: typeof RichTimelineSummary;
+    };
+}>;
+
 export declare const RichTimelineGap: FC<RichTimelineGapProps>;
 
 declare interface RichTimelineGapProps {
@@ -3640,29 +3073,17 @@ export declare const RichTimelineMeta: FC<{
 /** Direction the display list is sorted in: most recent at the top or at the bottom. */
 export declare type RichTimelineOrder = "newest-first" | "oldest-first";
 
-export declare interface RichTimelineProps<T> {
+export declare interface RichTimelineProps<T> extends RichTimelineBaseProps {
     /** Source data; sorting, filtering and gap insertion are derived from these. */
     entries: T[];
     /** Stable React key for an entry. */
     getKey: (entry: T) => string;
-    order?: RichTimelineOrder;
     /** Sort value; takes precedence over `getIndex`. */
     getSortKey?: (entry: T) => number;
     /** Returns `true` for entries that should stay visible. */
     filter?: (entry: T) => boolean;
     /** Positional index; supplying it lets filtered-out runs collapse into gap rows. */
     getIndex?: (entry: T) => number;
-    selectedKey?: string;
-    /** Keys to render with the "invalid" treatment. */
-    invalidKeys?: ReadonlySet<string>;
-    /** Keys expanded on first render (expansion is uncontrolled thereafter). */
-    initialExpandedKeys?: ReadonlySet<string>;
-    /** `true`/options forces windowing; omitted, it auto-enables past 100 rows. */
-    virtualize?: boolean | VirtualizeOptions;
-    cardLayout?: RichTimelineCardLayout;
-    hideMarkerOnMobile?: boolean;
-    emptyMessage?: ReactNode;
-    className?: string;
     /** Render-prop returning the row for each display item (entry or gap). */
     children: RichTimelineChildren<T>;
 }
@@ -3697,6 +3118,12 @@ declare interface RichTimelineStatusMarkerProps {
     className?: string;
 }
 
+/**
+ * The list element and its empty state. Rows are composed by the caller from
+ * the exported slots, which carry their own classes.
+ */
+export declare type RichTimelineStylesNames = "root" | "empty";
+
 /** Optional "Showing N of M" / "N entries" caption; hidden when there's nothing useful to say. */
 export declare const RichTimelineSummary: FC<RichTimelineSummaryProps>;
 
@@ -3710,23 +3137,92 @@ export declare const RichTimelineTitle: FC<{
     children: ReactNode;
 }>;
 
-export declare function SectionTitle({ order, kicker, description, kickerProps, titleProps, descriptionProps, children, ...boxProps }: PropsWithChildren<SectionTitle>): ReactElement;
+/**
+ * A full-width band of page.
+ *
+ * Sections carry the marketing rhythm: a background tone, vertical breathing
+ * room, and a centred measure. A band can also be a scheme island, so a light
+ * section inside a dark page recolors everything within it, and it can stamp a
+ * product accent so a whole region turns violet for Agent Memory.
+ */
+export declare const Section: MantineComponent<SectionFactory>;
+
+/** A brand hue a section can be painted with. */
+export declare type SectionBrandTone = "pink" | "lilac" | "purple" | "violet";
+
+export declare type SectionCssVariables = {
+    root: "--section-bg" | "--section-py" | "--section-measure";
+};
+
+export declare type SectionFactory = Factory<{
+    props: SectionProps;
+    ref: HTMLElement;
+    stylesNames: SectionStylesNames;
+    vars: SectionCssVariables;
+}>;
+
+/** A neutral surface step a section can be painted with. */
+export declare type SectionNeutralTone = "canvas" | "surface" | "sunken";
+
+export declare interface SectionProps extends BoxProps, StylesApiProps<SectionFactory>, ElementProps<"section"> {
+    /** Background the band is painted with. @default `"canvas"` */
+    tone?: SectionTone;
+    /** Vertical rhythm. @default `"md"` */
+    size?: SectionSize;
+    /**
+     * Forces a color scheme for this band and everything inside it, by setting
+     * the CSS `color-scheme` property. Leave unset to inherit the page.
+     */
+    scheme?: "light" | "dark";
+    /** Stamps a product accent on the band, recoloring everything inside it. */
+    accent?: SurrealProduct;
+    /** Constrains the content to the measure and adds gutters. @default `true` */
+    container?: boolean;
+    /** Overrides the content width. Accepts any CSS length. */
+    measure?: string;
+}
+
+export declare type SectionSize = "sm" | "md" | "lg";
+
+export declare type SectionStylesNames = "root" | "inner";
+
+/**
+ * A section heading: an eyebrow, a title and a description.
+ *
+ * This is the standard opening of a section in both registers, so reach for it
+ * rather than assembling the three by hand. The eyebrow is the {@link Eyebrow}
+ * primitive, so it carries the accent of the surrounding subtree.
+ *
+ * For a marketing hero, where the title belongs on the fluid display scale
+ * rather than the heading scale, compose `Eyebrow` with `Display` instead.
+ */
+export declare const SectionTitle: MantineComponent<SectionTitleFactory>;
+
+export declare type SectionTitleFactory = Factory<{
+    props: SectionTitleProps;
+    ref: HTMLElement;
+    stylesNames: SectionTitleStylesNames;
+}>;
 
-export declare interface SectionTitle extends BoxProps {
-    /** The kicker text to display above the title */
-    kicker?: ReactNode;
-    /** Heading order (1-6), controls `font-size` when `size` is not set on the title. @default `1` */
+export declare interface SectionTitleProps extends BoxProps, StylesApiProps<SectionTitleFactory>, ElementProps<"hgroup", "title"> {
+    /** Short uppercase line naming the section or product, above the heading. */
+    eyebrow?: ReactNode;
+    /** Heading level of the title, 1 through 6. @default `1` */
     order?: TitleOrder;
-    /** A description text to display below the title */
-    description?: string;
-    /** Props to pass to the kicker component */
-    kickerProps?: TextProps;
-    /** Props to pass to the title component */
+    /** Supporting copy below the heading, in the secondary text colour. */
+    description?: ReactNode;
+    /** Props forwarded to the eyebrow. */
+    eyebrowProps?: EyebrowProps;
+    /** Props forwarded to the title. */
     titleProps?: TitleProps;
-    /** Props to pass to the description component */
+    /** Props forwarded to the description. */
     descriptionProps?: TextProps;
 }
 
+export declare type SectionTitleStylesNames = "root" | "eyebrow" | "title" | "description";
+
+export declare type SectionTone = SectionNeutralTone | SectionBrandTone;
+
 declare interface SequenceNode {
     type: "Sequence";
     children: RailroadNode[];
@@ -3751,13 +3247,34 @@ export declare const setMarkdownMode: StateEffectType<MarkdownEditMode>;
  */
 export declare function shouldDismiss(closeAmount: number, extent: number, towardsVelocity: number): boolean;
 
-export declare function Since({ v, prefix, ...props }: SinceProps): ReactNode;
+/**
+ * An annotation marking the release a feature first shipped in.
+ *
+ * It is a plain Badge, so it takes the theme's label styling: square, tinted,
+ * uppercase monospace, and following the surrounding product accent. Pass any
+ * Badge prop to depart from that.
+ */
+export declare const Since: MantineComponent<SinceFactory>;
+
+/** Badge props that are not part of its Styles API, which this component owns instead. */
+declare type SinceBadgeProps = Omit<BadgeProps, keyof StylesApiProps<BadgeFactory> | "children">;
+
+export declare type SinceFactory = Factory<{
+    props: SinceProps;
+    ref: HTMLDivElement;
+    stylesNames: SinceStylesNames;
+    variant: BadgeVariant;
+}>;
 
-export declare interface SinceProps extends Omit<BadgeProps, "children"> {
+export declare interface SinceProps extends SinceBadgeProps, StylesApiProps<SinceFactory>, ElementProps<"div", "color" | "prefix"> {
+    /** Version the annotated feature became available in. */
     v: string;
+    /** Text placed in front of the version. @default `"Available since: "` */
     prefix?: string;
 }
 
+export declare type SinceStylesNames = "root";
+
 /**
  * A single slash command. `run` receives the live editor and the range
  * covering the `/query` text to replace with boilerplate.
@@ -3846,6 +3363,15 @@ export declare interface SlashStore {
     getSnapshot(): SlashState | null;
 }
 
+/**
+ * Slate — the blue-tinted neutral used for every text role.
+ *
+ * Never use Slate for surfaces. Shades are picked so that the text roles land
+ * on values proven by the marketing site, and every role clears WCAG AA on both
+ * the light and dark canvas.
+ */
+export declare const SLATE: MantineColorsTuple;
+
 export declare type SortDirection = "asc" | "desc" | undefined;
 
 export declare interface SortHandle<T = DefaultSort> {
@@ -3859,16 +3385,45 @@ export declare interface SortOptions<T = DefaultSort> {
     defaultSort?: SortDirection;
 }
 
-export declare const Spacer: FC<BoxProps>;
+/** An empty element that eats the free space between its siblings in a flex row or column. */
+export declare const Spacer: MantineComponent<SpacerFactory>;
+
+export declare type SpacerFactory = Factory<{
+    props: SpacerProps;
+    ref: HTMLDivElement;
+    stylesNames: SpacerStylesNames;
+}>;
+
+export declare interface SpacerProps extends BoxProps, StylesApiProps<SpacerFactory>, ElementProps<"div"> {
+}
+
+export declare type SpacerStylesNames = "root";
+
+/** An indeterminate loading indicator. */
+export declare const Spinner: MantineComponent<SpinnerFactory>;
 
-export declare function Spinner({ size, color, className, title, ...props }: SpinnerProps): ReactNode;
+export declare type SpinnerCssVariables = {
+    root: "--spinner-size" | "--spinner-color";
+};
+
+export declare type SpinnerFactory = Factory<{
+    props: SpinnerProps;
+    ref: SVGSVGElement;
+    stylesNames: SpinnerStylesNames;
+    vars: SpinnerCssVariables;
+}>;
 
-export declare interface SpinnerProps extends BoxProps {
+export declare interface SpinnerProps extends BoxProps, StylesApiProps<SpinnerFactory>, SvgElementProps_2 {
+    /** Diameter of the spinner. @default `"md"` */
     size?: MantineSize;
+    /** Stroke color. Defaults to the accent of the surrounding subtree. */
     color?: MantineColor;
+    /** Accessible name announced while loading. @default `"Loading"` */
     title?: string;
 }
 
+export declare type SpinnerStylesNames = "root" | "group" | "circle";
+
 export declare const STACKER_INITIAL_STATE: StackerState;
 
 export declare type StackerAction = {
@@ -3995,18 +3550,34 @@ export declare type StateFields = {
     [prop: string]: StateField<any>;
 };
 
-/** A circular, tinted status badge — a status glyph (success/warning/error/neutral) on a tone chip. */
-export declare const StatusIcon: FC<StatusIconProps>;
+/** A circular, tinted status chip — a status glyph on a tone of its own color. */
+export declare const StatusIcon: MantineComponent<StatusIconFactory>;
 
-export declare interface StatusIconProps extends Omit<BoxProps, "children"> {
+export declare type StatusIconCssVariables = {
+    root: "--status-icon-size";
+};
+
+export declare type StatusIconFactory = Factory<{
+    props: StatusIconProps;
+    ref: HTMLSpanElement;
+    stylesNames: StatusIconStylesNames;
+    vars: StatusIconCssVariables;
+    variant: StatusVariant;
+}>;
+
+export declare interface StatusIconProps extends BoxProps, StylesApiProps<StatusIconFactory>, ElementProps<"span", "color" | "children"> {
+    /** Status the chip reports. */
     variant: StatusVariant;
+    /** Diameter of the chip. @default `"md"` */
     size?: StatusIconSize;
-    /** Accessible name. When omitted the icon is treated as decorative (`aria-hidden`). */
+    /** Accessible name. When omitted the chip is treated as decorative (`aria-hidden`). */
     label?: string;
 }
 
 export declare type StatusIconSize = "sm" | "md" | "xl";
 
+export declare type StatusIconStylesNames = "root" | "icon";
+
 export declare type StatusVariant = "success" | "warning" | "error" | "neutral";
 
 /**
@@ -4014,7 +3585,13 @@ export declare type StatusVariant = "success" | "warning" | "error" | "neutral";
  * numbered bullet and a clickable title; activating a step collapses the others
  * and reveals its content, with an optional button to advance to the next step.
  */
-export declare function StepperTimeline({ items, active, defaultActive, onActivate, continueLabel, hideContinue, bulletSize, lineWidth, classNames, ...other }: StepperTimelineProps): ReactNode;
+export declare const StepperTimeline: MantineComponent<StepperTimelineFactory>;
+
+export declare type StepperTimelineFactory = Factory<{
+    props: StepperTimelineProps;
+    ref: HTMLDivElement;
+    stylesNames: StepperTimelineStylesNames;
+}>;
 
 export declare interface StepperTimelineItem {
     /** Heading shown next to the bullet — clicking it activates the step. */
@@ -4023,51 +3600,142 @@ export declare interface StepperTimelineItem {
     content: ReactNode;
 }
 
-export declare interface StepperTimelineProps extends Omit<TimelineProps, "active" | "children" | "onChange"> {
+export declare interface StepperTimelineProps extends Omit<TimelineProps, "active" | "children" | "attributes" | "classNames" | "styles" | "unstyled" | "variant" | "vars">, StylesApiProps<StepperTimelineFactory> {
     /** Ordered list of steps to render. */
     items: StepperTimelineItem[];
     /** Index of the active (expanded) step in controlled mode. */
     active?: number;
-    /** Initial active index in uncontrolled mode. Defaults to `0`. */
+    /** Initial active index in uncontrolled mode. @default `0` */
     defaultActive?: number;
     /** Called with the new index whenever a step is activated. */
     onActivate?: (index: number) => void;
     /** Label for the button that advances to the next step. */
     continueLabel?: ReactNode;
-    /** Hide the "continue to next step" button. Defaults to `false`. */
+    /** Hide the "continue to next step" button. @default `false` */
     hideContinue?: boolean;
 }
 
+export declare type StepperTimelineStylesNames = "root" | "item" | "bullet" | "title" | "content" | "continue";
+
 /**
  * Suggest completions at the start of each line
  */
 export declare const suggestCompletions: Command;
 
-export declare interface SummaryProps extends Omit<BoxProps, "component" | "children"> {
-    children: ReactNode;
-}
-
 export declare const SURREAL_CDN_BASE = "https://cdn.surrealdb.com";
 
-export declare function SurrealistMini({ config, frameRef, ...props }: SurrealistMiniProps): ReactNode;
+/** Every palette the UI Kit adds on top of Mantine's defaults. */
+export declare const SURREAL_COLORS: Record<SurrealColor, MantineColorsTuple>;
+
+/** The name of every palette the UI Kit adds on top of Mantine's defaults. */
+export declare type SurrealColor = "pink" | "lilac" | "purple" | "violet" | "obsidian" | "slate";
+
+/**
+ * The UI Kit's CSS variables resolver.
+ *
+ * It does two things Mantine cannot do on its own:
+ *
+ * 1. Rewrites every scheme-dependent Mantine variable as a `light-dark()`
+ *    expression so that scheme islands work (ADR 0001).
+ * 2. Emits the brand foreground tokens, switching Lilac and Pink to a black
+ *    foreground when `theme.other.contrastMode` is enabled (ADR 0003).
+ */
+export declare const surrealCssVariablesResolver: CSSVariablesResolver;
+
+/** An embedded Surrealist playground, driven entirely by its URL. */
+export declare const SurrealistMini: MantineComponent<SurrealistMiniFactory>;
 
-export declare interface SurrealistMiniProps extends BoxProps {
+export declare type SurrealistMiniFactory = Factory<{
+    props: SurrealistMiniProps;
+    ref: HTMLDivElement;
+    stylesNames: SurrealistMiniStylesNames;
+}>;
+
+export declare interface SurrealistMiniProps extends BoxProps, StylesApiProps<SurrealistMiniFactory>, ElementProps<"div"> {
+    /** Embed configuration. Every entry becomes a query parameter on the frame URL. */
     config?: MiniConfig;
+    /** Ref attached to the embedded frame — pair it with {@link useMiniController}. */
     frameRef?: RefObject<HTMLIFrameElement | null>;
+    /** Accessible name of the embedded frame. @default `"Surrealist Mini"` */
+    frameTitle?: string;
 }
 
-export declare const SYNTAX_THEME_CONFIG: ThemeConfig;
+export declare type SurrealistMiniStylesNames = "root" | "frame";
+
+/** A brand color that a SurrealDB product is bound to. */
+export declare type SurrealProduct = "database" | "memory";
+
+/**
+ * Resolves variant colors for the UI Kit.
+ *
+ * Two departures from Mantine's default:
+ *
+ * 1. A control that did not ask for a color follows the surrounding product
+ *    accent, so a region stamped for Agent Memory turns violet without a prop.
+ * 2. Brand fills keep a white foreground, including where Mantine's luminance
+ *    check would pick black. The foreground comes from a token so that
+ *    `other.contrastMode` can flip it where black genuinely measures better.
+ *    See `doc/adr/0003-white-foreground-on-brand-fills.md`.
+ */
+export declare const surrealVariantColorsResolver: VariantColorsResolver;
+
+/** SVG presentation attributes collide with Box's style props, so they yield. */
+declare type SvgElementProps = Omit<ComponentPropsWithoutRef<"svg">, keyof BoxProps | "style" | "color" | "path">;
+
+/** SVG presentation attributes collide with Box's style props, so they yield. */
+declare type SvgElementProps_2 = Omit<ComponentPropsWithoutRef<"svg">, keyof BoxProps | "style" | "color">;
+
+/**
+ * The syntax palette.
+ *
+ * Every role points at a `--surreal-syntax-*` token rather than a hex value, so
+ * there is one definition instead of a light copy and a dark copy, and code
+ * inside a scheme island recolors with everything else.
+ *
+ * Keywords carry the brand in Lilac. Operators were split off them and made
+ * neutral so the keyword is the only thing shouting, and literal types moved to
+ * a cooler blue so they no longer read as a second keyword.
+ * Token values live in `src/assets/styles/tokens.scss`.
+ */
+export declare const SYNTAX_COLORS: {
+    readonly keyword: "var(--surreal-syntax-keyword)";
+    readonly operator: "var(--surreal-syntax-operator)";
+    readonly string: "var(--surreal-syntax-string)";
+    readonly comment: "var(--surreal-syntax-comment)";
+    readonly property: "var(--surreal-syntax-property)";
+    readonly class: "var(--surreal-syntax-class)";
+    readonly variable: "var(--surreal-syntax-variable)";
+    readonly type: "var(--surreal-syntax-type)";
+    readonly function: "var(--surreal-syntax-function)";
+    readonly punctuation: "var(--surreal-syntax-punctuation)";
+    readonly link: "var(--surreal-syntax-link)";
+};
+
+/** The highlight style used by every editor and renderer in the kit. */
+export declare const SYNTAX_STYLE: HighlightStyle;
 
 export declare interface TabItem {
+    /** Label of the tab, which doubles as its value. */
     label: string;
+    /** Optional icon path, reserved for future use by the tab label. */
     icon?: string;
+    /** Panel rendered while the tab is active. */
     content: ReactNode;
 }
 
+/**
+ * A declarative wrapper around Mantine's `Tabs`, which takes its tabs and panels
+ * as data and can keep its selection in sync across the page.
+ *
+ * Every Mantine `Tabs` prop still applies, including the `classNames`, `styles`
+ * and `variant` styles API, so this owns no styling of its own.
+ */
 export declare function Tabs({ items, syncKey, ...props }: TabsProps): ReactNode;
 
 export declare interface TabsProps extends Omit<TabsProps_2, "children" | "value" | "onChange"> {
+    /** Tabs to render, in order. The first one is active by default. */
     items: TabItem[];
+    /** Share the active tab with every other `Tabs` using the same key. */
     syncKey?: string;
 }
 
@@ -4076,26 +3744,32 @@ declare interface TerminalNode {
     text: string;
 }
 
-export declare type ThemeConfig = {
-    light: HighlightStyle;
-    dark: HighlightStyle;
-};
-
-declare type ThemeConfig_2 = {
-    light: HighlightStyle;
-    dark: HighlightStyle;
-};
+/** An image pair that swaps with the color scheme of the subtree it sits in. */
+export declare const ThemedImage: MantineComponent<ThemedImageFactory>;
 
-/**
- * ThemedImage component that displays different images based on the current color scheme.
- */
-export declare const ThemedImage: FC<ThemedImageProps>;
+export declare type ThemedImageFactory = Factory<{
+    props: ThemedImageProps;
+    ref: HTMLDivElement;
+    stylesNames: ThemedImageStylesNames;
+}>;
 
-export declare interface ThemedImageProps extends ImageProps {
+export declare interface ThemedImageProps extends BoxProps, StylesApiProps<ThemedImageFactory>, ImgElementProps {
+    /** Image shown in both schemes unless a scheme-specific source overrides it. */
+    src?: string;
+    /** Image shown while the surrounding scheme is light. Falls back to `src`. */
     lightSrc?: string;
+    /** Image shown while the surrounding scheme is dark. Falls back to `src`. */
     darkSrc?: string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`. */
+    radius?: MantineRadius;
+    /** Controls `object-fit` of both images. @default `"cover"` */
+    fit?: CSSProperties["objectFit"];
+    /** Image url used as a fallback if an image cannot be loaded. */
+    fallbackSrc?: string;
 }
 
+export declare type ThemedImageStylesNames = "root" | "light" | "dark";
+
 /** The top-most open item, or undefined when nothing is open. */
 export declare function topOpened(items: StackerItem[]): StackerItem | undefined;
 
@@ -4164,6 +3838,7 @@ export declare function useMarkdownSlashStore(): SlashStore;
  */
 export declare function useMarkdownWidgetStore(): WidgetStore;
 
+/** Creates a frame ref and the {@link MiniController} that drives it. */
 export declare function useMiniController(): [RefObject<HTMLIFrameElement | null>, MiniController];
 
 export declare function useSort<T = DefaultSort>(options?: SortOptions<T>): SortHandle<T>;
@@ -4194,27 +3869,63 @@ export declare function useSwitch(initialState?: boolean, callbacks?: {
     onClose?: () => void;
 }): readonly [boolean, BooleanHandle];
 
-export declare function Version({ version, ...props }: VersionProps): ReactNode;
+/** A version string rendered as inline code. */
+export declare const Version: MantineComponent<VersionFactory>;
+
+/** Code props that are not part of its Styles API, which this component owns instead. */
+declare type VersionCodeProps = Omit<CodeProps, keyof StylesApiProps<CodeFactory> | "children">;
+
+export declare type VersionFactory = Factory<{
+    props: VersionProps;
+    ref: HTMLElement;
+    stylesNames: VersionStylesNames;
+}>;
 
-export declare interface VersionProps extends CodeProps {
+export declare interface VersionProps extends VersionCodeProps, StylesApiProps<VersionFactory>, ElementProps<"code", "color"> {
+    /** Version string to render. */
     version: string;
 }
 
+export declare type VersionStylesNames = "root";
+
 export declare type VideoControlsPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
-export declare const VideoPlayer: FC<VideoPlayerProps>;
+/**
+ * A video with its own play, mute and reset controls and a scrubbable progress
+ * bar. The controls stay hidden until the player is hovered, focused or paused.
+ */
+export declare const VideoPlayer: MantineComponent<VideoPlayerFactory>;
+
+export declare type VideoPlayerFactory = Factory<{
+    props: VideoPlayerProps;
+    ref: HTMLDivElement;
+    stylesNames: VideoPlayerStylesNames;
+}>;
 
-export declare interface VideoPlayerProps extends BoxProps {
+export declare interface VideoPlayerProps extends BoxProps, StylesApiProps<VideoPlayerFactory>, ElementProps<"div"> {
+    /** Source of the video to play. */
     src: string;
+    /** Still shown until playback starts, and again if the video fails to load. */
     thumbnail?: string;
+    /** Native poster frame, shown by the video element itself. */
     poster?: string;
+    /** Play once the player scrolls into view, pause when it leaves. @default `false` */
     autoPlay?: boolean;
+    /** Restart when playback reaches the end. @default `false` */
     loop?: boolean;
+    /** Start muted. @default `false` */
     initialMuted?: boolean;
+    /** Corner the control cluster sits in. @default `"bottom-left"` */
     controlsPosition?: VideoControlsPosition;
+    /** Extra props forwarded to the underlying `<video>` element. */
     videoProps?: Omit<VideoHTMLAttributes<HTMLVideoElement>, "autoPlay" | "loop" | "poster" | "controls" | "src" | "muted">;
 }
 
+export declare type VideoPlayerStylesNames = "root" | "thumbnail" | "video" | "controls" | "control" | "progress" | "progressFill" | "progressTooltip";
+
+/** Surreal Violet — the Agent Memory product color. */
+export declare const VIOLET: MantineColorsTuple;
+
 /** Tuning passed through to TanStack Virtual when the list is windowed. */
 export declare interface VirtualizeOptions {
     /** Estimated px height of an entry row. */
@@ -4226,11 +3937,6 @@ export declare interface VirtualizeOptions {
     scrollHeight?: number | string;
 }
 
-/**
- * The default UI Kit editor theme
- */
-export declare const VIVID_THEME: ThemeConfig_2;
-
 /**
  * Registered widget host + render closure for `createPortal`. Map identity uses `portalKey`, not `id`.
  */
@@ -4270,134 +3976,35 @@ declare interface ZeroOrMoreNode {
 export { }
 
 declare module "@mantine/core" {
-    type SurrealVariant = "surreal";
-    type SurrealInputVariant = SurrealVariant | "gradient";
-    interface ActionIconProps {
-        variant?: import("@mantine/core").ActionIconVariant | SurrealVariant;
-    }
-    interface ThemeIconProps {
-        variant?: import("@mantine/core").ThemeIconVariant | SurrealVariant;
-    }
-    interface ButtonProps {
-        variant?: import("@mantine/core").ButtonVariant | SurrealVariant;
-    }
-    interface TextInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface InputBaseProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface AutocompleteProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface TextareaProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface NumberInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface TagsInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface MultiSelectProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface DividerProps {
-        variant?: import("@mantine/core").DividerVariant | SurrealVariant;
-    }
-    interface CloseButtonProps {
-        variant?: import("@mantine/core").CloseButtonVariant | SurrealVariant;
-    }
-    interface AnchorProps {
-        variant?: import("@mantine/core").AnchorVariant | SurrealVariant | "glow" | "vibrant";
-    }
-    interface SelectProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface BadgeProps {
-        variant?: import("@mantine/core").BadgeVariant | SurrealVariant;
-    }
-    interface CheckboxProps {
-        variant?: import("@mantine/core").CheckboxVariant | SurrealVariant | "gradient";
-    }
-    interface RadioProps {
-        variant?: import("@mantine/core").RadioVariant | SurrealVariant | "gradient";
-    }
-    interface PasswordInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface PinInputProps {
-        variant?: import("@mantine/core").InputVariant | SurrealInputVariant;
-    }
-    interface NavLinkProps {
-        variant?: import("@mantine/core").NavLinkVariant | SurrealVariant;
-    }
-    interface PaperProps {
-        variant?: SurrealVariant | "gradient";
-    }
-    interface ScrollAreaProps {
-        variant?: SurrealVariant;
-    }
-    interface TooltipProps {
-        variant?: SurrealVariant;
-    }
-    interface PopoverDropdownProps {
-        variant?: SurrealVariant | "transparent";
-    }
-    interface HoverCardDropdownProps {
-        variant?: SurrealVariant | "transparent";
-    }
-    interface MenuDropdownProps {
-        variant?: SurrealVariant;
-    }
-    interface LoaderProps {
-        variant?: SurrealVariant;
-    }
-    interface ModalProps {
-        variant?: SurrealVariant;
-    }
-    interface OverlayProps {
-        variant?: SurrealVariant;
-    }
-    interface SkeletonProps {
-        variant?: SurrealVariant;
-    }
-    interface SegmentedControlProps {
-        variant?: "gradient";
-    }
-    interface KbdProps {
-        variant?: SurrealVariant;
-    }
-    interface SwitchProps {
-        variant?: SurrealVariant | "gradient";
-    }
-    interface TitleProps {
-        variant?: "gradient" | "surreal-gradient";
-    }
-    interface PaginationProps {
-        variant?: SurrealVariant;
-    }
-    interface TabsProps {
-        variant?: "default" | "outline" | "pills" | "gradient" | SurrealVariant;
-    }
-    interface TableProps {
-        variant?: SurrealVariant;
-    }
-    interface NotificationProps {
-        variant?: SurrealVariant | "spaced";
+    /**
+     * Theme settings the UI Kit adds on top of Mantine's.
+     *
+     * These are read by the kit's CSS variables resolver, so changing one
+     * re-emits the affected tokens rather than requiring component changes.
+     */
+    interface MantineThemeOther {
+        /**
+         * Switches the foreground on brand fills from white to black, but only
+         * where black measures better: Lilac and Pink. Purple and Violet always
+         * keep a white foreground.
+         *
+         * @default false
+         */
+        contrastMode: boolean;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomColors = "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
+    type ExtendedCustomColors = "pink" | "lilac" | "purple" | "violet" | "obsidian" | "slate" | import("@mantine/core").DefaultMantineColor;
     interface MantineThemeColorsOverride {
         colors: Record<ExtendedCustomColors, import("@mantine/core").MantineColorsTuple>;
     }
 }
 
 declare module "@mantine/core" {
-    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl";
+    type ExtendedCustomSizes = import("@mantine/core").DefaultMantineSize | "2xl" | "3xl" | "4xl" | "5xl";
     interface MantineThemeSizesOverride {
         spacing: Record<ExtendedCustomSizes, string>;
+        fontSizes: Record<ExtendedCustomSizes, string>;
     }
 }