1ch 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,7 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { ReactNode, CSSProperties, RefObject } from 'react';
-
 type Style = {
     text: string;
     color?: string;
@@ -125,11 +121,19 @@ type Theme = {
 declare function isTableLine(line: Line): boolean;
 declare function preserveTableTag(source: Line, target: Line): void;
 
+type ScrollRegionMeta = {
+    onScroll: (offset: number) => void;
+    totalLines: number;
+    maxHeight: number;
+    offset: number;
+};
+
 declare function pad(s: string, w: number, right?: boolean): string;
 declare function hl(n: number): string;
 declare function bar(val: number, max: number, w: number): string;
 declare function spark(data: number[], w: number): string;
 declare function padLine(line: Line, w: number): Line;
+declare function truncate(text: string, width: number, ellipsis?: string): string;
 
 type BoxAction = {
     label: string;
@@ -147,8 +151,32 @@ declare function hstack(children: LayoutFn[], opts?: {
     widths?: number[];
 }): LayoutFn;
 declare function vstack(...children: LayoutFn[]): LayoutFn;
-declare function separator(color?: string): LayoutFn;
-declare function blank(): LayoutFn;
+declare function separator(color?: string, char?: string): LayoutFn;
+declare function blank(count?: number): LayoutFn;
+declare function divider(label: string, opts?: {
+    color?: string;
+    char?: string;
+    labelColor?: string;
+}): LayoutFn;
+declare function grid(cells: LayoutFn[], opts: {
+    cols: number;
+    gap?: number;
+    rowGap?: number;
+}): LayoutFn;
+declare function scroll(content: LayoutFn, opts: {
+    maxHeight: number;
+    offset?: number;
+    scrollbarColor?: string;
+    onScroll?: (offset: number) => void;
+}): LayoutFn;
+declare function padding(content: LayoutFn, opts?: {
+    x?: number;
+    y?: number;
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}): LayoutFn;
 
 type Column<T extends Record<string, unknown> = Record<string, unknown>> = {
     key: keyof T & string;
@@ -159,6 +187,7 @@ type Column<T extends Record<string, unknown> = Record<string, unknown>> = {
     headerBold?: boolean;
     color?: string | ((value: unknown, row: T) => string | undefined);
     dim?: boolean | ((value: unknown, row: T) => boolean);
+    onClick?: (value: unknown, row: T) => void;
 };
 declare function table<T extends Record<string, unknown>>(columns: Column<T>[], data: T[], opts?: {
     borderColor?: string;
@@ -187,6 +216,37 @@ declare function badge(label: string, opts?: {
     onClick?: () => void;
     theme?: Theme;
 }): Segment;
+type KVPair = {
+    key: string;
+    value: string | Segment[];
+    keyColor?: string;
+    valueColor?: string;
+    onClick?: () => void;
+};
+declare function kv(pairs: KVPair[], opts?: {
+    separator?: string;
+    keyColor?: string;
+    valueColor?: string;
+    keyWidth?: number;
+}): LayoutFn;
+declare function callout(content: LayoutFn | string, opts?: {
+    color?: string;
+    accent?: string;
+    label?: string;
+}): LayoutFn;
+declare function checkbox(checked: boolean, label: string, opts?: {
+    color?: string;
+    checkColor?: string;
+    onClick?: () => void;
+}): LayoutFn;
+declare function inputField(value: string, opts?: {
+    placeholder?: string;
+    width?: number;
+    focused?: boolean;
+    color?: string;
+    borderColor?: string;
+    onClick?: () => void;
+}): LayoutFn;
 
 type JsonNode = {
     type: "vstack";
@@ -243,6 +303,7 @@ declare function fromJsonNode(node: JsonNode): LayoutFn;
 
 type TreeNode = {
     label: string;
+    onClick?: () => void;
     children?: TreeNode[];
 };
 declare function tree(data: TreeNode[], opts?: {
@@ -250,7 +311,12 @@ declare function tree(data: TreeNode[], opts?: {
     branchColor?: string;
     leafColor?: string;
 }): LayoutFn;
-declare function list(items: string[], opts?: {
+type ListItem = string | {
+    text: string;
+    color?: string;
+    onClick?: () => void;
+};
+declare function list(items: ListItem[], opts?: {
     ordered?: boolean;
     bulletColor?: string;
     color?: string;
@@ -272,11 +338,12 @@ declare function code(source: string, opts?: {
     copyable?: boolean;
     action?: BoxAction;
 }): LayoutFn;
-declare function diff(value: string, opts?: {
-    addColor?: string;
-    removeColor?: string;
-    metaColor?: string;
-    theme?: Theme;
+
+declare function chart(data: number[], opts?: {
+    height?: number;
+    color?: string;
+    axisColor?: string;
+    fill?: boolean;
 }): LayoutFn;
 
 type DocumentSource = {
@@ -291,12 +358,173 @@ type DocumentSource = {
 };
 type MarkdownThemeOverrides = Partial<ThemeMarkdown>;
 
-declare function fromMarkdown(markdown: string, opts?: {
+type TermAction = {
+    type: "action";
+    id?: string;
+    text: string;
+    tag: string;
+    dataset: Record<string, string>;
+    sourceElement?: Element;
+} | {
+    type: "link";
+    href?: string;
+    text: string;
+    tag: string;
+    dataset: Record<string, string>;
+    sourceElement?: Element;
+};
+type TermIRNode = {
+    kind: "stack";
+    gap: number;
+    children: TermIRNode[];
+} | {
+    kind: "hstack";
+    gap: number;
+    widths?: number[];
+    children: TermIRNode[];
+} | {
+    kind: "grid";
+    cols: number;
+    gap: number;
+    rowGap: number;
+    children: TermIRNode[];
+} | {
+    kind: "box";
+    title?: string;
+    borderColor?: string;
+    gap: number;
+    children: TermIRNode[];
+} | {
+    kind: "blank";
+    lines: number;
+} | {
+    kind: "separator";
+    color?: string;
+    char?: string;
+} | {
+    kind: "divider";
+    label: string;
+    color?: string;
+    char?: string;
+    labelColor?: string;
+} | {
+    kind: "paragraph";
+    text: string;
+    color?: string;
+} | {
+    kind: "heading";
+    level: number;
+    text: string;
+    markerColor?: string;
+} | {
+    kind: "list";
+    ordered: boolean;
+    start: number;
+    items: string[];
+} | {
+    kind: "blockquote";
+    text: string;
+    markerColor?: string;
+    color?: string;
+} | {
+    kind: "pre";
+    lines: string[];
+    language?: string;
+    textColor?: string;
+    borderColor?: string;
+    emptyColor?: string;
+} | {
+    kind: "markdown";
+    value: string;
+} | {
+    kind: "json";
+    value: unknown;
+    title?: string;
+} | {
+    kind: "chart";
+    data: number[];
+    height?: number;
+    color?: string;
+    axisColor?: string;
+    fill?: boolean;
+} | {
+    kind: "statusbar";
+    left: string;
+    right: string;
+    bg?: string;
+    color?: string;
+} | {
+    kind: "bar";
+    label?: string;
+    value: number;
+    max: number;
+    width?: number;
+    color?: string;
+    showPercent?: boolean;
+} | {
+    kind: "table";
+    headers: string[];
+    rows: string[][];
+    headerColor?: string;
+    borderColor?: string;
+} | {
+    kind: "button";
+    label: string;
+    color?: string;
+    bg?: string;
+    action: TermAction;
+} | {
+    kind: "link";
+    text: string;
+    color?: string;
+    action: TermAction;
+};
+
+type ActionSeed = {
+    type: "action";
+    id?: string;
+    text: string;
+} | {
+    type: "link";
+    href?: string;
+    text: string;
+};
+type HtmlTagCompiler = (el: Element, ctx: HtmlCompileContext) => TermIRNode | null;
+type HtmlCompileContext = {
+    theme: Theme;
+    overrides?: MarkdownThemeOverrides;
+    compileChildren: (el: Element) => TermIRNode[];
+    compileNode: (node: ChildNode) => TermIRNode | null;
+    actionFromElement: (el: Element, seed: ActionSeed) => TermAction;
+};
+type CompileHtmlToIROptions = {
+    theme: Theme;
+    overrides?: MarkdownThemeOverrides;
+    containerGap?: number;
+};
+declare function registerHtmlTagCompiler(tag: string, compiler: HtmlTagCompiler): void;
+declare function compileHtmlElementToIR(root: Element, options: CompileHtmlToIROptions): TermIRNode;
+declare function compileHtmlToIR(html: string, options: CompileHtmlToIROptions): TermIRNode;
+
+type LayoutFromIROptions = {
+    theme: Theme;
+    overrides?: MarkdownThemeOverrides;
+    onAction?: (action: TermAction) => void;
+};
+declare function layoutFromIR(node: TermIRNode, options: LayoutFromIROptions): LayoutFn;
+
+type HtmlAction = TermAction;
+type HtmlRenderOptions = {
     theme?: Theme;
     overrides?: MarkdownThemeOverrides;
-}): LayoutFn;
+    onAction?: (action: HtmlAction) => void;
+};
+
+declare function registerHtmlCompiler(tag: string, compiler: HtmlTagCompiler): void;
+declare function fromHtmlElement(root: Element, opts?: HtmlRenderOptions): LayoutFn;
+declare function fromHtml(html: string, opts?: HtmlRenderOptions): LayoutFn;
 
-declare function fromHtml(html: string, opts?: {
+declare function fromMarkdown(markdown: string, opts?: {
     theme?: Theme;
     overrides?: MarkdownThemeOverrides;
 }): LayoutFn;
@@ -348,306 +576,32 @@ declare function themeToCssVars(theme: Theme): Record<string, string>;
 declare function parseThemeSpec(json: string): ThemeValidationResult;
 declare function validateThemeSpec(value: unknown): ThemeValidationResult;
 
-type TermThemeContextValue = {
-    themeSpec: ThemeSpec;
-    modePreference: ThemePreference;
-    systemMode: ThemeMode;
-    theme: Theme;
-    setThemeSpec: (next: ThemeSpec) => void;
-    setModePreference: (next: ThemePreference) => void;
-};
-type TermThemeProviderProps = {
-    children: ReactNode;
-    initialTheme?: ThemeSpec;
-    initialMode?: ThemePreference;
-};
-declare function TermThemeProvider({ children, initialTheme, initialMode, }: TermThemeProviderProps): react_jsx_runtime.JSX.Element;
-declare function useTermTheme(): TermThemeContextValue;
-
-type TermUIProps = {
-    block?: Block;
-    children?: ReactNode;
-    width?: number;
-    theme?: Theme;
-    themeSpec?: ThemeSpec;
-    mode?: ThemePreference;
-    markdownOverrides?: MarkdownThemeOverrides;
-    className?: string;
-    style?: CSSProperties;
-};
-type TermDocumentProps = {
-    source: DocumentSource;
-    width?: number;
-    theme?: Theme;
-    themeSpec?: ThemeSpec;
-    mode?: ThemePreference;
-    jsonTitle?: string;
-    markdownOverrides?: MarkdownThemeOverrides;
-    className?: string;
-    style?: CSSProperties;
-};
-declare function TermUIBase({ block, children, width, theme, themeSpec, mode, markdownOverrides, className, style, }: TermUIProps): react_jsx_runtime.JSX.Element;
-declare const TermUI: react.MemoExoticComponent<typeof TermUIBase>;
-
-declare function TermDocument({ source, width, theme, themeSpec, mode, jsonTitle, markdownOverrides, className, style, }: TermDocumentProps): react_jsx_runtime.JSX.Element;
-
-type BaseProps = {
-    children?: ReactNode;
-};
-type TVStackProps = BaseProps & {
-    gap?: number;
-};
-type THStackProps = BaseProps & {
-    gap?: number;
-    widths?: number[];
-};
-type TBoxProps = BaseProps & {
-    title?: string;
-    borderColor?: string;
-    gap?: number;
-    action?: BoxAction;
-};
-type TSeparatorProps = {
-    color?: string;
-};
-type TRawProps = {
-    text?: string;
-    color?: string;
-    bg?: string;
-    bold?: boolean;
-    dim?: boolean;
-    blink?: boolean;
-    inverted?: boolean;
-    onClick?: () => void;
-    children?: ReactNode;
-};
-type TTableProps<T extends Record<string, unknown> = Record<string, unknown>> = {
-    columns: Column<T>[];
-    data: T[];
-    borderColor?: string;
-    fillWidth?: boolean;
-    headerColor?: string;
-    cellPadding?: number;
-};
-type TTabProps = {
-    name: string;
-    children?: ReactNode;
-};
-type TTabsProps = {
-    active: number;
-    activeColor?: string;
-    activeBg?: string;
-    inactiveColor?: string;
-    separatorColor?: string;
-    onSelect?: (index: number) => void;
-    children?: ReactNode;
-};
-type TStatusbarProps = {
-    left: string | Segment[];
-    right: string | Segment[];
-    bg?: string;
-    color?: string;
-};
-type TMarkdownProps = {
-    value: string;
-    themeOverrides?: MarkdownThemeOverrides;
-};
-type TJsonProps = {
-    value: unknown;
-    title?: string;
-};
-type THtmlProps = {
-    value: string;
-    themeOverrides?: MarkdownThemeOverrides;
-};
-type TLineProps = {
-    children?: ReactNode;
-};
-type TSpanProps = {
-    text?: string;
-    children?: ReactNode;
-    color?: string;
-    bg?: string;
-    bold?: boolean;
-    dim?: boolean;
-    inverted?: boolean;
-    blink?: boolean;
-};
-type TLayoutProps = {
-    layout: LayoutFn;
-};
-type TTreeProps = {
-    data: TreeNode[];
-    color?: string;
-    branchColor?: string;
-    leafColor?: string;
-};
-type TCodeProps = {
-    code: string;
-    language?: string;
-    title?: string;
-    borderColor?: string;
-    action?: BoxAction;
-    copyable?: boolean;
-};
-type TDiffProps = {
-    value: string;
-    addColor?: string;
-    removeColor?: string;
-    metaColor?: string;
-};
-type TBarProps = {
-    label: string;
-    value: number;
-    max?: number;
-    color?: string;
-};
-type TSparkProps = {
-    data: number[];
-    color?: string;
-};
-type TListProps = {
-    items: string[];
-    ordered?: boolean;
-    bulletColor?: string;
-    color?: string;
-};
-type TButtonProps = {
-    label: string;
-    onClick?: () => void;
-    color?: string;
-    bg?: string;
-};
-type RenderTermOptions = {
-    theme?: Theme;
-    themeSpec?: ThemeSpec;
-    mode?: ThemePreference;
-    markdownOverrides?: MarkdownThemeOverrides;
-};
-declare function TVStack({ children, gap }: TVStackProps): react.ReactElement<{
-    gap: number | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function THStack({ children, gap, widths }: THStackProps): react.ReactElement<{
-    gap: number | undefined;
-    widths: number[] | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TBox({ children, title, borderColor, gap, action }: TBoxProps): react.ReactElement<{
-    title: string | undefined;
-    borderColor: string | undefined;
-    gap: number | undefined;
-    action: BoxAction | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TSeparator({ color }: TSeparatorProps): react.ReactElement<{
-    color: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TBlank(): react.DOMElement<{}, Element>;
-declare function TRaw({ children, text, color, bg, bold, dim, blink, inverted, onClick }: TRawProps): react.DOMElement<{
-    text: string | undefined;
-    color: string | undefined;
-    bg: string | undefined;
-    bold: boolean | undefined;
-    dim: boolean | undefined;
-    blink: boolean | undefined;
-    inverted: boolean | undefined;
-    onClick: (() => void) | undefined;
-}, Element>;
-declare function TTable<T extends Record<string, unknown>>({ columns, data, borderColor, fillWidth, headerColor, cellPadding, }: TTableProps<T>): react.ReactElement<{
-    columns: Column<T>[];
-    data: T[];
-    borderColor: string | undefined;
-    fillWidth: boolean | undefined;
-    headerColor: string | undefined;
-    cellPadding: number | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TTab({ name, children }: TTabProps): react.ReactElement<{
-    name: string;
-}, string | react.JSXElementConstructor<any>>;
-declare function TTabs({ children, active, activeColor, activeBg, inactiveColor, separatorColor, onSelect, }: TTabsProps): react.ReactElement<{
-    active: number;
-    activeColor: string | undefined;
-    activeBg: string | undefined;
-    inactiveColor: string | undefined;
-    separatorColor: string | undefined;
-    onSelect: ((index: number) => void) | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TStatusbar({ left, right, bg, color }: TStatusbarProps): react.ReactElement<{
-    left: string | Segment[];
-    right: string | Segment[];
-    bg: string | undefined;
-    color: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TMarkdown({ value, themeOverrides }: TMarkdownProps): react.ReactElement<{
-    value: string;
-    themeOverrides: Partial<ThemeMarkdown> | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TJson({ value, title }: TJsonProps): react.ReactElement<{
-    value: unknown;
-    title: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function THtml({ value, themeOverrides }: THtmlProps): react.ReactElement<{
-    value: string;
-    themeOverrides: Partial<ThemeMarkdown> | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TLine({ children }: TLineProps): react.DOMElement<{}, Element>;
-declare function TSpan({ children, text, color, bg, bold, dim, inverted, blink }: TSpanProps): react.ReactElement<{
-    text: string | undefined;
-    color: string | undefined;
-    bg: string | undefined;
-    bold: boolean | undefined;
-    dim: boolean | undefined;
-    inverted: boolean | undefined;
-    blink: boolean | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TLayout({ layout }: TLayoutProps): react.ReactElement<{
-    layout: LayoutFn;
-}, string | react.JSXElementConstructor<any>>;
-declare function TTree({ data, color, branchColor, leafColor }: TTreeProps): react.ReactElement<{
-    data: TreeNode[];
-    color: string | undefined;
-    branchColor: string | undefined;
-    leafColor: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TCode({ code, language, title, borderColor, action, copyable }: TCodeProps): react.ReactElement<{
-    code: string;
-    language: string | undefined;
-    title: string | undefined;
-    borderColor: string | undefined;
-    action: BoxAction | undefined;
-    copyable: boolean | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TDiff({ value, addColor, removeColor, metaColor }: TDiffProps): react.ReactElement<{
-    value: string;
-    addColor: string | undefined;
-    removeColor: string | undefined;
-    metaColor: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TBar({ label, value, max, color }: TBarProps): react.ReactElement<{
-    label: string;
-    value: number;
-    max: number | undefined;
-    color: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TSpark({ data, color }: TSparkProps): react.ReactElement<{
-    data: number[];
-    color: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TList({ items, ordered, bulletColor, color }: TListProps): react.ReactElement<{
-    items: string[];
-    ordered: boolean | undefined;
-    bulletColor: string | undefined;
-    color: string | undefined;
-}, string | react.JSXElementConstructor<any>>;
-declare function TButton({ label, onClick, color, bg }: TButtonProps): react.DOMElement<{
-    label: string;
-    onClick: (() => void) | undefined;
-    color: string | undefined;
-    bg: string | undefined;
-}, Element>;
-declare function renderTermReact(tree: ReactNode, opts?: RenderTermOptions): LayoutFn;
-
-declare function useSpinner(ms?: number): string;
-declare function useTick(ms?: number): number;
-declare function useTermWidth(ref: RefObject<HTMLElement | null>, fallback?: number): number;
-declare function useStreamingText(text: string, lerp?: number): string;
+type TermUIActionEvent = CustomEvent<HtmlAction>;
+declare class TermUIElement extends HTMLElement {
+    static observedAttributes: readonly ["width", "mode", "source", "source-format", "json-title"];
+    private readonly frame;
+    private readonly root;
+    private layoutOverride?;
+    private resizeObserver?;
+    private mutationObserver?;
+    private mediaQuery?;
+    private mediaQueryListener?;
+    private scheduled;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    render(): void;
+    get layout(): LayoutFn | undefined;
+    set layout(next: LayoutFn | null | undefined);
+    private queueRender;
+    private onAction;
+    private measureCharacterWidth;
+    private resolveColumns;
+    private resolveTheme;
+    private renderNow;
+}
+declare const TERM_UI_TAG = "term-ui";
+declare function registerTermUIElement(tagName?: string): void;
 
-export { type Block, type BoxAction, type Column, type DocumentSource, type JsonNode, type LayoutFn, type Line, type MarkdownThemeOverrides, type RenderTermOptions, type Segment, type Style, TBar, type TBarProps, TBlank, TBox, type TBoxProps, TButton, type TButtonProps, TCode, type TCodeProps, TDiff, type TDiffProps, THStack, type THStackProps, THtml, type THtmlProps, TJson, type TJsonProps, TLayout, type TLayoutProps, TLine, type TLineProps, TList, type TListProps, TMarkdown, type TMarkdownProps, TRaw, type TRawProps, TSeparator, type TSeparatorProps, TSpan, type TSpanProps, TSpark, type TSparkProps, TStatusbar, type TStatusbarProps, TTab, type TTabProps, TTable, type TTableProps, TTabs, type TTabsProps, TTree, type TTreeProps, TVStack, type TVStackProps, TermDocument, type TermDocumentProps, type TermThemeContextValue, TermThemeProvider, type TermThemeProviderProps, TermUI, type TermUIProps, type Theme, type ThemeComponents, type ThemeMarkdown, type ThemeMode, type ThemeModeTokens, type ThemePalette, type ThemePreference, type ThemeSemantic, type ThemeSpec, type ThemeSyntax, type ThemeValidationIssue, type ThemeValidationResult, type Token, type TokenType, type TreeNode, badge, bar, blank, box, builtinThemes, code, dark, defaultThemeSpec, diff, fromDocument, fromHtml, fromJson, fromJsonNode, fromMarkdown, hl, hstack, isTableLine, light, lines, list, pad, padLine, parseThemeSpec, preserveTableTag, renderTermReact, resolveTheme, resolveThemeMode, separator, spark, statusbar, table, tabs, themeToCssVars, tokenColor, tokenize, tree, useSpinner, useStreamingText, useTermTheme, useTermWidth, useTick, validateThemeSpec, vstack };
+export { type Block, type BoxAction, type Column, type CompileHtmlToIROptions, type DocumentSource, type HtmlAction, type HtmlCompileContext, type HtmlRenderOptions, type HtmlTagCompiler, type JsonNode, type KVPair, type LayoutFn, type LayoutFromIROptions, type Line, type ListItem, type MarkdownThemeOverrides, type ScrollRegionMeta, type Segment, type Style, TERM_UI_TAG, type TermAction, type TermIRNode, type TermUIActionEvent, TermUIElement, type Theme, type ThemeComponents, type ThemeMarkdown, type ThemeMode, type ThemeModeTokens, type ThemePalette, type ThemePreference, type ThemeSemantic, type ThemeSpec, type ThemeSyntax, type ThemeValidationIssue, type ThemeValidationResult, type Token, type TokenType, type TreeNode, badge, bar, blank, box, builtinThemes, callout, chart, checkbox, code, compileHtmlElementToIR, compileHtmlToIR, dark, defaultThemeSpec, divider, fromDocument, fromHtml, fromHtmlElement, fromJson, fromJsonNode, fromMarkdown, grid, hl, hstack, inputField, isTableLine, kv, layoutFromIR, light, lines, list, pad, padLine, padding, parseThemeSpec, preserveTableTag, registerHtmlCompiler, registerHtmlTagCompiler, registerTermUIElement, resolveTheme, resolveThemeMode, scroll, separator, spark, statusbar, table, tabs, themeToCssVars, tokenColor, tokenize, tree, truncate, validateThemeSpec, vstack };