@octanejs/opentui 0.0.1

package/src/slot.ts

@@ -0,0 +1,322 @@
+import {
+	createSlotRegistry,
+	type CliRenderer,
+	type Plugin,
+	type PluginContext,
+	type PluginErrorEvent,
+	type ResolvedSlotRenderer,
+	type SlotMode,
+	type SlotRegistry,
+	type SlotRegistryOptions,
+} from '@opentui/core';
+import {
+	defineUniversalComponent,
+	universalComponent,
+	universalKey,
+	universalTry,
+	useEffect,
+	useRef,
+	useState,
+	type UniversalComponent,
+	type UniversalRenderable,
+} from 'octane/universal';
+import { OPENTUI_RENDERER_ID } from './config.js';
+
+export type { SlotMode };
+
+type SlotMap = Record<string, object>;
+
+export type OctanePlugin<
+	TSlots extends SlotMap,
+	TContext extends PluginContext = PluginContext,
+> = Plugin<UniversalRenderable, TSlots, TContext>;
+
+export type OctaneSlotProps<
+	TSlots extends SlotMap,
+	K extends keyof TSlots,
+	TContext extends PluginContext = PluginContext,
+> = {
+	registry: SlotRegistry<UniversalRenderable, TSlots, TContext>;
+	name: K;
+	mode?: SlotMode;
+	children?: UniversalRenderable;
+	pluginFailurePlaceholder?: (failure: PluginErrorEvent) => UniversalRenderable;
+} & TSlots[K];
+
+export type OctaneBoundSlotProps<TSlots extends SlotMap, K extends keyof TSlots> = {
+	name: K;
+	mode?: SlotMode;
+	children?: UniversalRenderable;
+} & TSlots[K];
+
+export type OctaneRegistrySlotComponent<
+	TSlots extends SlotMap,
+	TContext extends PluginContext = PluginContext,
+> = UniversalComponent<OctaneSlotProps<TSlots, keyof TSlots, TContext>> & {
+	<K extends keyof TSlots>(props: OctaneSlotProps<TSlots, K, TContext>): UniversalRenderable;
+};
+
+export type OctaneSlotComponent<TSlots extends SlotMap> = UniversalComponent<
+	OctaneBoundSlotProps<TSlots, keyof TSlots>
+> & {
+	<K extends keyof TSlots>(props: OctaneBoundSlotProps<TSlots, K>): UniversalRenderable;
+};
+
+export interface OctaneSlotOptions {
+	pluginFailurePlaceholder?: (failure: PluginErrorEvent) => UniversalRenderable;
+}
+
+/** Source-compatible type aliases for code migrating from @opentui/react. */
+export type ReactPlugin<
+	TSlots extends SlotMap,
+	TContext extends PluginContext = PluginContext,
+> = OctanePlugin<TSlots, TContext>;
+export type ReactSlotProps<
+	TSlots extends SlotMap,
+	K extends keyof TSlots,
+	TContext extends PluginContext = PluginContext,
+> = OctaneSlotProps<TSlots, K, TContext>;
+export type ReactBoundSlotProps<
+	TSlots extends SlotMap,
+	K extends keyof TSlots,
+> = OctaneBoundSlotProps<TSlots, K>;
+export type ReactRegistrySlotComponent<
+	TSlots extends SlotMap,
+	TContext extends PluginContext = PluginContext,
+> = OctaneRegistrySlotComponent<TSlots, TContext>;
+export type ReactSlotComponent<TSlots extends SlotMap> = OctaneSlotComponent<TSlots>;
+export type ReactSlotOptions = OctaneSlotOptions;
+
+export function createOctaneSlotRegistry<
+	TSlots extends SlotMap,
+	TContext extends PluginContext = PluginContext,
+>(
+	renderer: CliRenderer,
+	context: TContext,
+	options: SlotRegistryOptions = {},
+): SlotRegistry<UniversalRenderable, TSlots, TContext> {
+	return createSlotRegistry<UniversalRenderable, TSlots, TContext>(
+		renderer,
+		'octane:slot-registry',
+		context,
+		options,
+	);
+}
+
+/** Migration alias retained from the upstream package. */
+export const createReactSlotRegistry = createOctaneSlotRegistry;
+
+interface PendingRenderReport {
+	pluginId: string;
+	slot: string;
+	error: Error;
+}
+
+const SLOT_VERSION = Symbol('opentui.slot.version');
+const SLOT_FAILURES = Symbol('opentui.slot.failures');
+const SLOT_PENDING_REPORTS = Symbol('opentui.slot.pending-reports');
+const SLOT_RESETS = Symbol('opentui.slot.resets');
+const SLOT_RESET_VERSION = Symbol('opentui.slot.reset-version');
+const SLOT_SUBSCRIPTION = Symbol('opentui.slot.subscription');
+const SLOT_REPORT_EFFECT = Symbol('opentui.slot.report-effect');
+const SLOT_RESET_EFFECT = Symbol('opentui.slot.reset-effect');
+
+function normalizeError(error: unknown): Error {
+	if (error instanceof Error) return error;
+	return new Error(typeof error === 'string' ? error : String(error));
+}
+
+function isEmptyRenderable(value: UniversalRenderable): boolean {
+	return value === null || value === undefined || value === false;
+}
+
+function getSlotProps<
+	TSlots extends SlotMap,
+	K extends keyof TSlots,
+	TContext extends PluginContext,
+>(props: OctaneSlotProps<TSlots, K, TContext>): TSlots[K] {
+	const {
+		children: _children,
+		mode: _mode,
+		name: _name,
+		registry: _registry,
+		pluginFailurePlaceholder: _pluginFailurePlaceholder,
+		...slotProps
+	} = props;
+	return slotProps as TSlots[K];
+}
+
+function renderPluginFailurePlaceholder(
+	registry: SlotRegistry<UniversalRenderable, any, any>,
+	placeholder: ((failure: PluginErrorEvent) => UniversalRenderable) | undefined,
+	failure: PluginErrorEvent,
+): UniversalRenderable {
+	if (placeholder === undefined) return null;
+	try {
+		return placeholder(failure);
+	} catch (error) {
+		registry.reportPluginError({
+			pluginId: failure.pluginId,
+			slot: failure.slot,
+			phase: 'error_placeholder',
+			source: 'octane',
+			error,
+		});
+		return null;
+	}
+}
+
+const SlotImplementation = defineUniversalComponent<OctaneSlotProps<any, any, any>>(
+	OPENTUI_RENDERER_ID,
+	(props) => {
+		const [version, setVersion] = useState(0, SLOT_VERSION);
+		const failures = useRef<Map<string, PluginErrorEvent>>(new Map(), SLOT_FAILURES);
+		const pendingReports = useRef<Map<string, PendingRenderReport>>(
+			new Map(),
+			SLOT_PENDING_REPORTS,
+		);
+		const resets = useRef<Map<string, () => void>>(new Map(), SLOT_RESETS);
+		const resetVersion = useRef(version, SLOT_RESET_VERSION);
+		const registry = props.registry;
+		const slotName = String(props.name);
+
+		useEffect(
+			() => registry.subscribe(() => setVersion((current) => current + 1)),
+			[registry],
+			SLOT_SUBSCRIPTION,
+		);
+		useEffect(
+			() => {
+				if (pendingReports.current.size === 0) return;
+				const reports = [...pendingReports.current.values()];
+				pendingReports.current.clear();
+				for (const report of reports) {
+					const failure = registry.reportPluginError({
+						pluginId: report.pluginId,
+						slot: report.slot,
+						phase: 'render',
+						source: 'octane',
+						error: report.error,
+					});
+					failures.current.set(`${report.slot}:${report.pluginId}:render`, failure);
+				}
+			},
+			null,
+			SLOT_REPORT_EFFECT,
+		);
+		useEffect(
+			() => {
+				if (resetVersion.current === version) return;
+				resetVersion.current = version;
+				const pendingResets = [...resets.current.values()];
+				resets.current.clear();
+				for (const reset of pendingResets) reset();
+			},
+			[version],
+			SLOT_RESET_EFFECT,
+		);
+
+		const entries = registry.resolveEntries(props.name) as Array<
+			ResolvedSlotRenderer<UniversalRenderable, object, PluginContext>
+		>;
+		const slotProps = getSlotProps(props);
+
+		const renderFailure = (
+			entry: ResolvedSlotRenderer<UniversalRenderable, object, PluginContext>,
+			error: unknown,
+			fallback: UniversalRenderable = null,
+		): UniversalRenderable => {
+			const normalized = normalizeError(error);
+			const failureKey = `${slotName}:${entry.id}:render`;
+			const previous = failures.current.get(failureKey);
+			const sameFailure = previous?.error.message === normalized.message;
+			if (!sameFailure) {
+				const pending = pendingReports.current.get(failureKey);
+				if (pending?.error.message !== normalized.message) {
+					pendingReports.current.set(failureKey, {
+						pluginId: entry.id,
+						slot: slotName,
+						error: normalized,
+					});
+				}
+			}
+			const failure =
+				sameFailure && previous !== undefined
+					? previous
+					: {
+							pluginId: entry.id,
+							slot: slotName,
+							phase: 'render' as const,
+							source: 'octane',
+							error: normalized,
+							timestamp: Date.now(),
+						};
+			failures.current.set(failureKey, failure);
+			const placeholder = renderPluginFailurePlaceholder(
+				registry,
+				props.pluginFailurePlaceholder,
+				failure,
+			);
+			return isEmptyRenderable(placeholder) ? fallback : placeholder;
+		};
+
+		const renderEntry = (
+			entry: ResolvedSlotRenderer<UniversalRenderable, object, PluginContext>,
+			fallback: UniversalRenderable = null,
+		): UniversalRenderable => {
+			const failureKey = `${slotName}:${entry.id}:render`;
+			let rendered: UniversalRenderable;
+			try {
+				rendered = entry.renderer(registry.context, slotProps);
+			} catch (error) {
+				const failed = renderFailure(entry, error, fallback);
+				return isEmptyRenderable(failed) ? failed : universalKey(`${slotName}:${entry.id}`, failed);
+			}
+			if (isEmptyRenderable(rendered)) return fallback;
+			return universalKey(
+				`${slotName}:${entry.id}`,
+				universalTry(
+					() => {
+						resets.current.delete(failureKey);
+						failures.current.delete(failureKey);
+						pendingReports.current.delete(failureKey);
+						return rendered;
+					},
+					null,
+					(error, reset) => {
+						resets.current.set(failureKey, reset);
+						return renderFailure(entry, error, fallback);
+					},
+				),
+			);
+		};
+
+		if (entries.length === 0) return props.children;
+		if (props.mode === 'single_winner') return renderEntry(entries[0], props.children);
+		if (props.mode === 'replace') {
+			if (entries.length === 1) return renderEntry(entries[0], props.children);
+			const rendered = entries.map((entry) => renderEntry(entry));
+			return rendered.some((value) => !isEmptyRenderable(value)) ? rendered : props.children;
+		}
+		return [props.children, ...entries.map((entry) => renderEntry(entry))];
+	},
+	{ module: '@octanejs/opentui' },
+);
+
+export const Slot = SlotImplementation as OctaneRegistrySlotComponent<any, any>;
+
+export function createSlot<TSlots extends SlotMap, TContext extends PluginContext = PluginContext>(
+	registry: SlotRegistry<UniversalRenderable, TSlots, TContext>,
+	options: OctaneSlotOptions = {},
+): OctaneSlotComponent<TSlots> {
+	return defineUniversalComponent<OctaneBoundSlotProps<TSlots, keyof TSlots>>(
+		OPENTUI_RENDERER_ID,
+		(props) =>
+			universalComponent(OPENTUI_RENDERER_ID, SlotImplementation, {
+				...props,
+				registry,
+				pluginFailurePlaceholder: options.pluginFailurePlaceholder,
+			}),
+		{ module: '@octanejs/opentui' },
+	) as OctaneSlotComponent<TSlots>;
+}

package/src/slots.ts

@@ -0,0 +1,21 @@
+const subSlotCache = new Map<symbol, Map<string, symbol>>();
+
+export function subSlot(slot: symbol | undefined, tag: string): symbol | undefined {
+	if (slot === undefined) return undefined;
+	let byTag = subSlotCache.get(slot);
+	if (byTag === undefined) {
+		byTag = new Map();
+		subSlotCache.set(slot, byTag);
+	}
+	let result = byTag.get(tag);
+	if (result === undefined) {
+		result = Symbol.for(`${slot.description ?? ''}:@octanejs/opentui:${tag}`);
+		byTag.set(tag, result);
+	}
+	return result;
+}
+
+export function splitSlot(args: readonly unknown[]): [readonly unknown[], symbol | undefined] {
+	const tail = args.at(-1);
+	return typeof tail === 'symbol' ? [args.slice(0, -1), tail] : [args, undefined];
+}

package/src/test-utils.ts

@@ -0,0 +1,38 @@
+import { createTestRenderer, type TestRendererOptions } from '@opentui/core/testing';
+import type { UniversalComponent } from 'octane/universal';
+import { act } from './scheduling.js';
+import { createRoot, type Root } from './root.js';
+
+export function testRender(
+	component: UniversalComponent<void | undefined>,
+	options: TestRendererOptions,
+): ReturnType<typeof createTestRenderer>;
+export function testRender<P>(
+	component: UniversalComponent<P>,
+	props: P,
+	options: TestRendererOptions,
+): ReturnType<typeof createTestRenderer>;
+export async function testRender<P>(
+	component: UniversalComponent<P>,
+	propsOrOptions: P | TestRendererOptions,
+	maybeOptions?: TestRendererOptions,
+): ReturnType<typeof createTestRenderer> {
+	const props = maybeOptions === undefined ? undefined : (propsOrOptions as P);
+	const options = (maybeOptions ?? propsOrOptions) as TestRendererOptions;
+	let root: Root | null = null;
+	const testSetup = await createTestRenderer({
+		...options,
+		onDestroy() {
+			root?.unmount();
+			root = null;
+			options.onDestroy?.();
+		},
+	});
+	root = createRoot(testSetup.renderer);
+	await act(() => {
+		if (root === null) return;
+		if (maybeOptions === undefined) root.render(component as UniversalComponent<void>);
+		else root.render(component, props as P);
+	});
+	return testSetup;
+}

package/src/text.ts

@@ -0,0 +1,73 @@
+import {
+	TextAttributes,
+	TextNodeRenderable,
+	type RenderContext,
+	type TextNodeOptions,
+} from '@opentui/core';
+
+export const textNodeKeys = ['span', 'b', 'strong', 'i', 'em', 'u', 'br', 'a'] as const;
+export type TextNodeKey = (typeof textNodeKeys)[number];
+
+export class SpanRenderable extends TextNodeRenderable {
+	constructor(
+		private readonly ctx: RenderContext | null,
+		options: TextNodeOptions,
+	) {
+		super(options);
+	}
+}
+
+class TextModifierRenderable extends SpanRenderable {
+	constructor(options: TextNodeOptions, modifier?: TextNodeKey) {
+		super(null, options);
+		if (modifier === 'b' || modifier === 'strong') {
+			this.attributes = (this.attributes || 0) | TextAttributes.BOLD;
+		} else if (modifier === 'i' || modifier === 'em') {
+			this.attributes = (this.attributes || 0) | TextAttributes.ITALIC;
+		} else if (modifier === 'u') {
+			this.attributes = (this.attributes || 0) | TextAttributes.UNDERLINE;
+		}
+	}
+}
+
+export class BoldSpanRenderable extends TextModifierRenderable {
+	constructor(_ctx: RenderContext | null, options: TextNodeOptions) {
+		super(options, 'b');
+	}
+}
+
+export class ItalicSpanRenderable extends TextModifierRenderable {
+	constructor(_ctx: RenderContext | null, options: TextNodeOptions) {
+		super(options, 'i');
+	}
+}
+
+export class UnderlineSpanRenderable extends TextModifierRenderable {
+	constructor(_ctx: RenderContext | null, options: TextNodeOptions) {
+		super(options, 'u');
+	}
+}
+
+export class LineBreakRenderable extends SpanRenderable {
+	constructor(_ctx: RenderContext | null, options: TextNodeOptions) {
+		super(null, options);
+		this.add();
+	}
+
+	public override add(): number {
+		return super.add('\n');
+	}
+}
+
+export interface LinkOptions extends TextNodeOptions {
+	href: string;
+}
+
+export class LinkRenderable extends SpanRenderable {
+	constructor(_ctx: RenderContext | null, options: LinkOptions) {
+		super(null, {
+			...options,
+			link: { url: options.href },
+		});
+	}
+}

package/src/time-to-first-draw.ts

@@ -0,0 +1,23 @@
+import type { TimeToFirstDrawRenderable } from '@opentui/core';
+import {
+	defineUniversalComponent,
+	universalPlan,
+	universalProps,
+	universalValue,
+} from 'octane/universal';
+import { OPENTUI_RENDERER_ID } from './config.js';
+import type { TimeToFirstDrawProps } from './types.js';
+
+export type { TimeToFirstDrawProps } from './types.js';
+
+const TIME_TO_FIRST_DRAW_PLAN = universalPlan(OPENTUI_RENDERER_ID, {
+	kind: 'host',
+	type: 'time-to-first-draw',
+	propsSlot: 0,
+});
+
+export const TimeToFirstDraw = defineUniversalComponent<TimeToFirstDrawProps>(
+	OPENTUI_RENDERER_ID,
+	(props) => universalValue(TIME_TO_FIRST_DRAW_PLAN, [universalProps([['spread', props]])]),
+	{ module: '@octanejs/opentui' },
+);

package/src/types.ts

@@ -0,0 +1,230 @@
+import type {
+	ASCIIFontOptions,
+	ASCIIFontRenderable,
+	BaseRenderable,
+	BoxOptions,
+	BoxRenderable,
+	CodeOptions,
+	CodeRenderable,
+	ContentChangeEvent,
+	CursorChangeEvent,
+	DiffRenderable,
+	DiffRenderableOptions,
+	ImageRenderable,
+	ImageRenderableOptions,
+	InputRenderable,
+	InputRenderableOptions,
+	KeyEvent,
+	LineNumberOptions,
+	LineNumberRenderable,
+	MarkdownOptions,
+	MarkdownRenderable,
+	RenderContext,
+	RenderableOptions,
+	ScrollBoxOptions,
+	ScrollBoxRenderable,
+	SelectOption,
+	SelectRenderable,
+	SelectRenderableOptions,
+	TabSelectOption,
+	TabSelectRenderable,
+	TabSelectRenderableOptions,
+	TextareaOptions,
+	TextareaRenderable,
+	TextNodeOptions,
+	TextNodeRenderable,
+	TextOptions,
+	TextRenderable,
+	TimeToFirstDrawRenderable,
+} from '@opentui/core';
+import type { UniversalKey, UniversalRenderable } from 'octane/universal';
+
+export type NonStyledProps =
+	| 'id'
+	| 'buffered'
+	| 'live'
+	| 'enableLayout'
+	| 'selectable'
+	| 'renderAfter'
+	| 'renderBefore'
+	| `on${string}`;
+
+export type OpenTUIRef<T> =
+	((value: T | null) => void | (() => void)) | { current: T | null } | readonly OpenTUIRef<T>[];
+
+export type OctaneProps<TRenderable = unknown> = {
+	key?: UniversalKey;
+	ref?: OpenTUIRef<TRenderable>;
+};
+
+/** Source-compatible alias whose refs use Octane's refs-as-props contract. */
+export type ReactProps<TRenderable = unknown> = OctaneProps<TRenderable>;
+
+export type RenderableConstructor<TRenderable extends BaseRenderable = BaseRenderable> = new (
+	ctx: RenderContext,
+	options: any,
+) => TRenderable;
+
+type ExtractRenderableOptions<TConstructor> = TConstructor extends new (
+	ctx: RenderContext,
+	options: infer TOptions,
+) => any
+	? TOptions
+	: never;
+
+type ExtractRenderable<TConstructor> = TConstructor extends new (
+	ctx: RenderContext,
+	options: any,
+) => infer TRenderable
+	? TRenderable
+	: never;
+
+export type GetNonStyledProperties<TConstructor> =
+	TConstructor extends RenderableConstructor<TextRenderable>
+		? NonStyledProps | 'content'
+		: TConstructor extends RenderableConstructor<BoxRenderable>
+			? NonStyledProps | 'title' | 'bottomTitle'
+			: TConstructor extends RenderableConstructor<ASCIIFontRenderable>
+				? NonStyledProps | 'text' | 'selectable'
+				: TConstructor extends RenderableConstructor<InputRenderable>
+					? NonStyledProps | 'placeholder' | 'value'
+					: TConstructor extends RenderableConstructor<TextareaRenderable>
+						? NonStyledProps | 'placeholder' | 'initialValue'
+						: TConstructor extends RenderableConstructor<CodeRenderable>
+							? | NonStyledProps
+								| 'content'
+								| 'filetype'
+								| 'syntaxStyle'
+								| 'treeSitterClient'
+								| 'conceal'
+								| 'drawUnstyledText'
+							: TConstructor extends RenderableConstructor<MarkdownRenderable>
+								? | NonStyledProps
+									| 'content'
+									| 'syntaxStyle'
+									| 'treeSitterClient'
+									| 'conceal'
+									| 'renderNode'
+								: TConstructor extends RenderableConstructor<ImageRenderable>
+									? NonStyledProps | 'source'
+									: NonStyledProps;
+
+type ContainerProps<TOptions> = TOptions & { children?: UniversalRenderable };
+
+type ComponentProps<
+	TOptions extends RenderableOptions<TRenderable>,
+	TRenderable extends BaseRenderable,
+> = TOptions & {
+	style?: Partial<Omit<TOptions, GetNonStyledProperties<RenderableConstructor<TRenderable>>>>;
+} & OctaneProps<TRenderable>;
+
+type TextChildren = UniversalRenderable;
+
+export type TextProps = ComponentProps<TextOptions, TextRenderable> & {
+	children?: TextChildren;
+};
+
+export type SpanProps = ComponentProps<TextNodeOptions, TextNodeRenderable> & {
+	children?: TextChildren;
+};
+
+export type LinkProps = SpanProps & { href: string };
+export type LineBreakProps = Pick<SpanProps, 'id' | 'key' | 'ref'>;
+
+export type BoxProps = ComponentProps<ContainerProps<BoxOptions>, BoxRenderable> & {
+	focused?: boolean;
+};
+
+export type InputProps = ComponentProps<InputRenderableOptions, InputRenderable> & {
+	focused?: boolean;
+	onInput?: (value: string) => void;
+	onChange?: (value: string) => void;
+	onSubmit?: (value: string) => void;
+};
+
+export type TextareaProps = ComponentProps<TextareaOptions, TextareaRenderable> & {
+	focused?: boolean;
+	onSubmit?: () => void;
+	onContentChange?: (event: ContentChangeEvent) => void;
+	onCursorChange?: (event: CursorChangeEvent) => void;
+	onKeyDown?: (event: KeyEvent) => void;
+};
+
+export type CodeProps = ComponentProps<CodeOptions, CodeRenderable>;
+export type ImageProps = ComponentProps<ImageRenderableOptions, ImageRenderable>;
+export type MarkdownProps = ComponentProps<MarkdownOptions, MarkdownRenderable>;
+export type DiffProps = ComponentProps<DiffRenderableOptions, DiffRenderable>;
+
+export type SelectProps = ComponentProps<SelectRenderableOptions, SelectRenderable> & {
+	focused?: boolean;
+	onChange?: (index: number, option: SelectOption | null) => void;
+	onSelect?: (index: number, option: SelectOption | null) => void;
+};
+
+export type ScrollBoxProps = ComponentProps<
+	ContainerProps<ScrollBoxOptions>,
+	ScrollBoxRenderable
+> & {
+	focused?: boolean;
+};
+
+export type AsciiFontProps = ComponentProps<ASCIIFontOptions, ASCIIFontRenderable>;
+
+export type TabSelectProps = ComponentProps<TabSelectRenderableOptions, TabSelectRenderable> & {
+	focused?: boolean;
+	onChange?: (index: number, option: TabSelectOption | null) => void;
+	onSelect?: (index: number, option: TabSelectOption | null) => void;
+};
+
+export type LineNumberProps = ComponentProps<
+	ContainerProps<LineNumberOptions>,
+	LineNumberRenderable
+> & { focused?: boolean };
+
+export type TimeToFirstDrawProps = ExtendedComponentProps<typeof TimeToFirstDrawRenderable>;
+
+export type ExtendedComponentProps<
+	TConstructor extends RenderableConstructor,
+	TOptions = ExtractRenderableOptions<TConstructor>,
+> = TOptions & {
+	children?: UniversalRenderable;
+	style?: Partial<Omit<TOptions, GetNonStyledProperties<TConstructor>>>;
+} & OctaneProps<ExtractRenderable<TConstructor>>;
+
+export type ExtendedIntrinsicElements<
+	TComponentCatalogue extends Record<string, RenderableConstructor>,
+> = {
+	[TComponentName in keyof TComponentCatalogue]: ExtendedComponentProps<
+		TComponentCatalogue[TComponentName]
+	>;
+};
+
+/** Augment this interface to type application-specific tags registered with extend(). */
+export interface OpenTUIComponents {
+	[componentName: string]: RenderableConstructor;
+}
+
+export interface OpenTUIIntrinsicElements extends ExtendedIntrinsicElements<OpenTUIComponents> {
+	box: BoxProps;
+	text: TextProps;
+	span: SpanProps;
+	code: CodeProps;
+	diff: DiffProps;
+	markdown: MarkdownProps;
+	input: InputProps;
+	textarea: TextareaProps;
+	select: SelectProps;
+	scrollbox: ScrollBoxProps;
+	'ascii-font': AsciiFontProps;
+	'tab-select': TabSelectProps;
+	'line-number': LineNumberProps;
+	image: ImageProps;
+	'time-to-first-draw': TimeToFirstDrawProps;
+	b: SpanProps;
+	i: SpanProps;
+	u: SpanProps;
+	strong: SpanProps;
+	em: SpanProps;
+	br: LineBreakProps;
+	a: LinkProps;
+}