@effected/cli 0.9.0 → 0.11.0

package/ui/Toggle.js

@@ -0,0 +1,32 @@
+import { Fmt } from "../Fmt.js";
+import { inkModules } from "./internal/ink.js";
+import { Styled, useGlyphs, useTerminalSize } from "./UiTheme.js";
+import { lineText } from "./internal/lineText.js";
+
+//#region src/ui/Toggle.ts
+/**
+* An on/off row: a check glyph and a label.
+*
+* @public
+*/
+var Toggle = class {
+	constructor() {}
+	/**
+	* Draw a toggle row: `◉` on or `◯` off (`[x]` and `[ ]` under ASCII glyphs), then the label, cut to the width with
+	* the glyph set's ellipsis. A highlighted row starts with the arrow glyph and is painted with the accent token.
+	*
+	* @param props - the label, the value and whether the row is highlighted
+	*/
+	static View = (props) => {
+		const { ink, react } = inkModules();
+		const glyphs = useGlyphs();
+		const { columns } = useTerminalSize();
+		const check = props.value ? glyphs.kind === "unicode" ? "◉" : "[x]" : glyphs.kind === "unicode" ? "◯" : "[ ]";
+		const lead = props.highlighted ? glyphs.arrow : " ".repeat(Fmt.width(glyphs.arrow));
+		const text = Fmt.truncate(`${lead} ${check} ${lineText(props.label)}`, columns, { ellipsis: glyphs.ellipsis });
+		return props.highlighted ? react.createElement(Styled, { token: "accent" }, text) : react.createElement(ink.Text, null, text);
+	};
+};
+
+//#endregion
+export { Toggle };

package/ui/UiKey.js

@@ -0,0 +1,44 @@
+//#region src/ui/UiKey.ts
+const named = (name) => ({
+	_tag: "Named",
+	name
+});
+const CONTROL = /[\u0000-\u001f\u007f]/;
+/**
+* Normalising Ink's input into {@link UiKey}s.
+*
+* @public
+*/
+const UiKey = {
+	fromInk: (input, key) => {
+		if (key.upArrow) return named("up");
+		if (key.downArrow) return named("down");
+		if (key.leftArrow) return named("left");
+		if (key.rightArrow) return named("right");
+		if (key.pageUp) return named("pageup");
+		if (key.pageDown) return named("pagedown");
+		if (key.home) return named("home");
+		if (key.end) return named("end");
+		if (key.return) return named("enter");
+		if (key.escape) return named("escape");
+		if (key.ctrl && input === "c") return named("ctrl+c");
+		if (key.tab) return named(key.shift ? "shift+tab" : "tab");
+		if (key.backspace) return named("backspace");
+		if (key.delete) return named("delete");
+		if (key.ctrl || key.meta) return void 0;
+		if (input === " ") return named("space");
+		if (input === "" || CONTROL.test(input)) return void 0;
+		return {
+			_tag: "Char",
+			char: input
+		};
+	},
+	named,
+	char: (char) => ({
+		_tag: "Char",
+		char
+	})
+};
+
+//#endregion
+export { UiKey };

package/ui/UiProvider.js

@@ -0,0 +1,60 @@
+import { inkModules } from "./internal/ink.js";
+import { screenContext } from "./internal/ScreenContext.js";
+import { uiProviders } from "./internal/UiProviders.js";
+
+//#region src/ui/UiProvider.ts
+/**
+* Provide the kit's context to an Ink tree the kit did not mount, so `useTheme`, `useGlyphs`, `Styled` and
+* `useTerminalSize` work in it.
+*
+* @remarks
+* Take the value from `CliUi.context`, which also loads Ink and React: the provider and the kit's hooks render with
+* the modules the kit loaded. A screen mounted by `CliUi.run` already has this context.
+*
+* With `size`, `useTerminalSize` reads it instead of the stdout Ink draws on, less one column and one row as ever.
+* Give it to Ink's `renderToString`, whose terminal hooks see the process's own stdout rather than the width it lays
+* out at: `renderToString(tree, { columns })` with `size: { columns, rows }` keeps the kit's widgets cut to that
+* width. A tree given a `size` no longer follows the terminal's resizes.
+*
+* Standalone, there is no screen to end: a kit widget's own quit key, such as `Select`'s `q`, does nothing, and an
+* input handler a kit widget registers is called as is, so what it throws escapes as Ink leaves it. Nested inside a `CliUi.run` screen, it overrides only the theme, the glyphs and the size: the screen's
+* cancel and its defect route pass through, so `q` still cancels and a throwing handler is still the screen's defect.
+* Ink's colour level is the host's: `Styled` passes the theme's props, none at colour `none`.
+*
+* @param props - the context, and the tree
+*
+* @public
+*/
+const UiProvider = (props) => {
+	const { react } = inkModules();
+	const { theme, glyphs, size } = props.value;
+	const columns = size?.columns;
+	const rows = size?.rows;
+	const parent = react.useContext(screenContext());
+	const cancel = parent?.cancel;
+	const die = parent?.die;
+	const neutralize = props.value.neutralizeWorkflowCommands === true || parent?.neutralizeWorkflowCommands === true;
+	const value = react.useMemo(() => ({
+		theme,
+		glyphs,
+		...columns === void 0 || rows === void 0 ? {} : { size: {
+			columns,
+			rows
+		} },
+		...cancel === void 0 ? {} : { cancel },
+		...die === void 0 ? {} : { die },
+		...neutralize ? { neutralizeWorkflowCommands: true } : {}
+	}), [
+		theme,
+		glyphs,
+		columns,
+		rows,
+		cancel,
+		die,
+		neutralize
+	]);
+	return uiProviders(value, props.children);
+};
+
+//#endregion
+export { UiProvider };

package/ui/UiStreams.js

@@ -0,0 +1,18 @@
+import { processStreams } from "./internal/processStreams.js";
+import { Context } from "effect";
+
+//#region src/ui/UiStreams.ts
+/**
+* The streams a screen mounts on, the process's own standard streams by default.
+*
+* @remarks
+* A `Context.Reference`, so it never appears in `R`: the default reads the process streams when first used, never
+* at import, and a test provides in-memory streams with `Effect.provideService(UiStreams, streams)`. `./ui` binds
+* Node's process streams.
+*
+* @public
+*/
+var UiStreams = class extends Context.Reference("@effected/cli/ui/UiStreams", { defaultValue: () => processStreams() }) {};
+
+//#endregion
+export { UiStreams };

package/ui/UiTheme.js

@@ -0,0 +1,119 @@
+import { inkModules } from "./internal/ink.js";
+import { screenContext } from "./internal/ScreenContext.js";
+
+//#region src/ui/UiTheme.ts
+const OUTSIDE = "@effected/cli/ui: a theme hook was used outside a screen mounted by CliUi.run or a UiProvider";
+const useScreen = () => {
+	const screen = inkModules().react.useContext(screenContext());
+	if (screen === void 0) throw new Error(OUTSIDE);
+	return screen;
+};
+/**
+* The Ink `Text` props for `style` at `color`.
+*
+* @remarks
+* At `"none"` it gives no styling props at all, not even bold or dim, so a frame is escape-free by construction;
+* Ink's colour level held at 0 is the backstop. A flag set to `false` adds no prop.
+*
+* Omit `color` in an Ink tree the kit did not mount, which has no colour level of its own to pass: every prop is
+* emitted, as at any level but `"none"`, and Ink's own chalk gates what reaches the terminal.
+*
+* @param style - the resolved style
+* @param color - the stream's colour level; omitted, every prop is emitted for Ink's chalk to gate
+*
+* @public
+*/
+const inkProps = (style, color) => color === "none" ? {} : {
+	...style.fg === void 0 ? {} : { color: style.fg },
+	...style.bold === true ? { bold: true } : {},
+	...style.dim === true ? { dimColor: true } : {},
+	...style.italic === true ? { italic: true } : {},
+	...style.underline === true ? { underline: true } : {}
+};
+/**
+* The theme of the stream the mounted screen draws on.
+*
+* @remarks
+* A React hook: call it from a component rendered inside a `CliUi.run` screen or a `UiProvider`.
+*
+* @public
+*/
+const useTheme = () => useScreen().theme;
+/**
+* The glyph set of the mounted screen, so a component draws Unicode or ASCII glyphs to match the rest of the output.
+*
+* @remarks
+* A React hook: call it from a component rendered inside a `CliUi.run` screen or a `UiProvider`.
+*
+* @public
+*/
+const useGlyphs = () => useScreen().glyphs;
+/**
+* Text painted with a theme token or style, through the mounted screen's theme.
+*
+* @remarks
+* Its children are drawn as given. The kit's widgets sanitise every string they draw from data (escapes removed,
+* line breaks folded) before handing it here; text a consumer passes to `Styled`, or to Ink's own `Text`, is the
+* consumer's to sanitise, with `Fmt.sanitize`. Ink keeps the escape sequences it is handed, so text from data drawn
+* unsanitised can paint colour at colour `none` or plant a hyperlink, and a line break in it adds a row the screen's
+* height budget did not count.
+*
+* @param props - the token or style, and the text
+*
+* @public
+*/
+const Styled = (props) => {
+	const theme = useTheme();
+	const { ink, react } = inkModules();
+	return react.createElement(ink.Text, inkProps(theme.style(props.token), theme.color), props.children);
+};
+/** A reported size, or `fallback` when it is unknown: absent, or not positive (a pty `script` opens reports 0x0). */
+const known = (reported, fallback) => reported !== void 0 && reported > 0 ? reported : fallback;
+/**
+* The usable terminal size: the stdout Ink draws on, less one column and one row, re-read on every render and when
+* the terminal resizes; or, under a `UiProvider` given a `size`, that size less one column and one row.
+*
+* @remarks
+* A width or height the stream does not report, or reports as 0 (a pty that `script` opens says `0 0`), is unknown and
+* reads as 80 columns by 24 rows, so a screen never lays itself out at width 0. This is not Ink's own fallback, which
+* first asks the process's terminal (`terminal-size`: the tty, `COLUMNS`, `tput`) and only then uses 80x24; the kit
+* reads no `process` here. On a 0x0 pty with `COLUMNS=50`, Ink lays out at 50 while these rows are cut at 79.
+*
+* The override exists for Ink's `renderToString`, whose `useStdout` is the process's own stdout whatever width it
+* lays out at; without it, the kit's widgets would cut their rows to the wrong width there.
+*
+* Never feed `columns` into a `Box`'s `width`. On a resize Ink re-lays out the tree it already has and repaints
+* before React re-renders with the new size, so a width taken from this hook is one paint stale. After a shrink,
+* that stale, wider frame wraps in the narrower terminal and leaves a copy stranded above the live one. For a
+* one-column margin use `marginRight: 1`, which Ink recomputes within its own resize. Text cut to `columns` lags the
+* same paint, so give a long row Ink's `wrap: "truncate-end"` too: on a shrink Ink then clips it rather than letting
+* the terminal wrap it.
+*
+* A React hook: call it from a component rendered inside an Ink tree; it needs no screen, but reads a `UiProvider`'s
+* size when there is one.
+*
+* @public
+*/
+const useTerminalSize = () => {
+	const { ink, react } = inkModules();
+	const { stdout } = ink.useStdout();
+	const override = react.useContext(screenContext())?.size;
+	const [, redraw] = react.useReducer((count) => count + 1, 0);
+	const followsStdout = override === void 0;
+	react.useEffect(() => {
+		if (!followsStdout) return void 0;
+		stdout.on("resize", redraw);
+		return () => {
+			stdout.off("resize", redraw);
+		};
+	}, [stdout, followsStdout]);
+	const columns = override?.columns ?? stdout.columns;
+	const rows = override?.rows ?? stdout.rows;
+	return {
+		columns: Math.max(1, known(columns, 80) - 1),
+		rows: Math.max(1, known(rows, 24) - 1)
+	};
+};
+
+//#endregion
+export { Styled, inkProps, useGlyphs, useTerminalSize, useTheme };

package/ui/Viewport.js

@@ -0,0 +1,204 @@
+import { inkModules } from "./internal/ink.js";
+import { useTerminalSize } from "./UiTheme.js";
+import { KeyTable } from "./KeyTable.js";
+
+//#region src/ui/Viewport.ts
+/**
+* Throws on a repeated item key. Checked before React sees the rows: React reports a duplicate key on
+* `console.error`, which under a screen's unpatched console lands on the real stderr, over the frame.
+*/
+const assertUniqueItemKeys = (rows) => {
+	const seen = /* @__PURE__ */ new Set();
+	for (const row of rows) {
+		if (row._tag !== "Item") continue;
+		if (seen.has(row.key)) throw new Error(`@effected/cli/ui: Viewport item keys must be unique; "${row.key}" repeats`);
+		seen.add(row.key);
+	}
+};
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+/** The offset that keeps `cursor` in view, moving as little as possible, never past the last full window. */
+const follow = (cursor, offset, height, count) => {
+	if (count === 0) return 0;
+	let next = offset;
+	if (cursor < next) next = cursor;
+	if (cursor >= next + height) next = cursor - height + 1;
+	return clamp(next, 0, Math.max(0, count - height));
+};
+const init = (count, height, cursor = 0) => {
+	const items = Math.max(0, Math.floor(count));
+	const window = Math.max(1, Math.floor(height));
+	const selected = items === 0 ? 0 : clamp(Math.floor(cursor), 0, items - 1);
+	return {
+		cursor: selected,
+		offset: follow(selected, 0, window, items),
+		height: window,
+		count: items
+	};
+};
+const step = (state, move) => {
+	if (state.count === 0) return state;
+	const last = state.count - 1;
+	const target = move === "up" ? state.cursor - 1 : move === "down" ? state.cursor + 1 : move === "home" ? 0 : move === "end" ? last : move === "pageup" ? state.cursor - state.height : state.cursor + state.height;
+	const cursor = clamp(target, 0, last);
+	return {
+		...state,
+		cursor,
+		offset: follow(cursor, state.offset, state.height, state.count)
+	};
+};
+const resize = (state, height) => {
+	const window = Math.max(1, Math.floor(height));
+	return {
+		...state,
+		height: window,
+		offset: follow(state.cursor, state.offset, window, state.count)
+	};
+};
+/**
+* The rows to draw, as indexes into `rows`, for a window of `budget` lines starting at item `start`: the section
+* header of the first item first (re-emitted when it has scrolled off), then rows in order until the budget is spent.
+*/
+const linesFrom = (rows, items, start, budget) => {
+	const first = items[start] ?? 0;
+	const lines = [];
+	if (budget > 1) {
+		for (let index = first - 1; index >= 0; index--) if (rows[index]?._tag === "Header") {
+			lines.push(index);
+			break;
+		}
+	}
+	for (let index = first; index < rows.length && lines.length < budget; index++) lines.push(index);
+	return lines;
+};
+/**
+* The visible slice, starting where the window last started (`previous`, or the state's offset on first draw) and
+* moving only as far as the selected item needs: back to it when it is above the window, forward until it is drawn
+* when it is below. So moving inside the window moves only the highlight, even when headers take lines the
+* item-counting reducer does not. The cursor is clamped into the items here, for both the slice and the highlight.
+*/
+const slice = (rows, state, budget, previous) => {
+	const items = rows.flatMap((row, index) => row._tag === "Item" ? [index] : []);
+	if (items.length === 0) return {
+		lines: rows.slice(0, budget).map((_, index) => index),
+		start: 0,
+		selected: -1
+	};
+	const cursor = clamp(state.cursor, 0, items.length - 1);
+	const selected = items[cursor] ?? 0;
+	let start = clamp(previous ?? state.offset, 0, cursor);
+	let lines = linesFrom(rows, items, start, budget);
+	while (!lines.includes(selected) && start < cursor) {
+		start++;
+		lines = linesFrom(rows, items, start, budget);
+	}
+	while (lines.length < budget && start > 0) {
+		const earlier = linesFrom(rows, items, start - 1, budget);
+		if (!earlier.includes(selected)) break;
+		start--;
+		lines = earlier;
+	}
+	return {
+		lines,
+		start,
+		selected
+	};
+};
+/**
+* A scrolling list: a pure reducer over a window of items, its key table, and a view that draws the window.
+*
+* @remarks
+* The view never draws more lines than fit: its height is `min(state.height, terminal rows - 1 - reserved)`, and
+* every row is clipped to one line of `columns - 1` cells, so a frame never fills the terminal and Ink never clears
+* the screen and scrollback to redraw it. A section header stays visible: when the header of the first visible item
+* has scrolled off, it is drawn again atop the slice.
+*
+* @public
+*/
+var Viewport = class {
+	constructor() {}
+	/**
+	* A viewport over `count` items, `height` of them in view, with `cursor` selected (clamped; 0 by default).
+	*
+	* @param count - how many items
+	* @param height - how many fit (at least 1)
+	* @param cursor - the item to select
+	*/
+	static init = init;
+	/**
+	* Move the cursor, clamped at both ends with no wrap, keeping it in view. A page is the window height.
+	*
+	* @param state - where the viewport is
+	* @param move - the move
+	*/
+	static step = step;
+	/**
+	* Change the window height, keeping the cursor where it is and in view.
+	*
+	* @param state - where the viewport is
+	* @param height - the new height (at least 1)
+	*/
+	static resize = resize;
+	/** The keys: ↑/↓ move, pgup/pgdn page, home top, end bottom. */
+	static keys = KeyTable.make([
+		{
+			keys: ["up"],
+			action: "up",
+			help: "move"
+		},
+		{
+			keys: ["down"],
+			action: "down",
+			help: "move"
+		},
+		{
+			keys: ["pageup"],
+			action: "pageup",
+			help: "page"
+		},
+		{
+			keys: ["pagedown"],
+			action: "pagedown",
+			help: "page"
+		},
+		{
+			keys: ["home"],
+			action: "home",
+			help: "top"
+		},
+		{
+			keys: ["end"],
+			action: "end",
+			help: "bottom"
+		}
+	]);
+	/**
+	* Draw the window: the visible rows, each clipped to one line. A repeated item key is a defect: the view throws, so
+	* the screen dies with the reason.
+	*
+	* @param props - the rows, the state, how to draw a row, and the lines reserved for the rest of the screen
+	*/
+	static View = (props) => {
+		assertUniqueItemKeys(props.rows);
+		const { ink, react } = inkModules();
+		const size = useTerminalSize();
+		const budget = Math.max(1, Math.min(props.state.height, size.rows - (props.reserved ?? 0)));
+		const started = react.useRef(void 0);
+		const { lines, start, selected } = slice(props.rows, props.state, budget, started.current);
+		started.current = start;
+		return react.createElement(ink.Box, {
+			flexDirection: "column",
+			width: size.columns
+		}, ...lines.map((index) => {
+			const row = props.rows[index];
+			return react.createElement(ink.Box, {
+				key: row._tag === "Item" ? `item:${row.key}` : `header:${index}`,
+				height: 1,
+				width: size.columns,
+				overflow: "hidden"
+			}, props.renderRow(row, index === selected));
+		}));
+	};
+};
+
+//#endregion
+export { Viewport };

package/ui/internal/ErrorBoundary.js

@@ -0,0 +1,30 @@
+import { fromReact } from "./ink.js";
+
+//#region src/ui/internal/ErrorBoundary.ts
+/**
+* The screen's error boundary: catches a render error anywhere in the screen, renders nothing, and reports it.
+*
+* @remarks
+* It sits inside Ink's own boundary, so Ink's `ErrorOverview` (which Ink writes to stdout) never renders: a probe on
+* fake streams found zero bytes of it with this boundary in place, against an `ERROR` header, a stack and a
+* screen-and-scrollback clear without it. A class over the loaded React, built on first use, because the kit holds
+* no runtime React at module scope.
+*
+* @internal
+*/
+const errorBoundary = fromReact((react) => class ScreenErrorBoundary extends react.Component {
+	static displayName = "CliUiErrorBoundary";
+	static getDerivedStateFromError() {
+		return { failed: true };
+	}
+	state = { failed: false };
+	componentDidCatch(error) {
+		this.props.onError(error);
+	}
+	render() {
+		return this.state.failed ? this.props.fallback?.() ?? null : this.props.children ?? null;
+	}
+});
+
+//#endregion
+export { errorBoundary };

package/ui/internal/Holder.js

@@ -0,0 +1,74 @@
+import { fromReact } from "./ink.js";
+
+//#region src/ui/internal/Holder.ts
+/**
+* A component that shows one element and lets its owner swap it in place.
+*
+* @remarks
+* Everything above the holder stays mounted across a swap: the screen's error boundary, its context, the root keys
+* and the colour hold. Only the held subtree changes, so the screen's `ScreenControl` keeps meaning the same screen.
+* The swap function is handed over in a layout effect, before the first frame is written, and taken back in that
+* effect's cleanup. A swap is a state update, which React commits in a microtask rather than at once, so a swap can
+* ask to be told when its element is committed: the live view waits for that before it draws on or unmounts. Built on
+* the loaded React, like every kit component; the screen harness's `rerender` and the live view's pushes use it.
+*
+* @internal
+*/
+const holder = fromReact((react) => {
+	const Holder = (props) => {
+		const [shown, setShown] = react.useState(() => ({
+			element: props.initial,
+			committed: void 0
+		}));
+		react.useLayoutEffect(() => {
+			props.bind((element, committed) => setShown({
+				element,
+				committed
+			}));
+			return () => props.bind(void 0);
+		}, [props.bind]);
+		react.useLayoutEffect(() => shown.committed?.(), [shown]);
+		return shown.element;
+	};
+	Holder.displayName = "CliUiHolder";
+	return Holder;
+});
+/**
+* A fresh {@link HolderSlot}.
+*
+* @internal
+*/
+const holderSlot = () => {
+	let bound;
+	const pending = [];
+	const release = (through) => {
+		for (const committed of pending.splice(0, through + 1)) committed();
+	};
+	return {
+		bind: (swap) => {
+			bound = swap;
+			if (swap === void 0) release(pending.length - 1);
+		},
+		isBound: () => bound !== void 0,
+		swap: (next, committed) => {
+			if (bound === void 0) {
+				committed?.();
+				return false;
+			}
+			if (committed === void 0) {
+				bound(next);
+				return true;
+			}
+			const own = () => committed();
+			pending.push(own);
+			bound(next, () => {
+				const at = pending.indexOf(own);
+				if (at !== -1) release(at);
+			});
+			return true;
+		}
+	};
+};
+
+//#endregion
+export { holder, holderSlot };

package/ui/internal/ScreenContext.js

@@ -0,0 +1,52 @@
+import { fromReact, inkModules } from "./ink.js";
+
+//#region src/ui/internal/ScreenContext.ts
+/**
+* The React context carrying {@link ScreenContextValue}, built on the loaded React.
+*
+* @internal
+*/
+const screenContext = fromReact((react) => react.createContext(void 0));
+const ignore = () => void 0;
+/**
+* The mounted screen's cancel, for a widget whose own key (such as Select's `q`) ends the screen.
+*
+* @remarks
+* A React hook; throws outside a screen mounted by `CliUi.run` or a `UiProvider`. Under a tree that is not a screen
+* (a `UiProvider`, a live view) there is nothing to cancel, and it does nothing.
+*
+* @internal
+*/
+const useScreenCancel = () => {
+	const screen = inkModules().react.useContext(screenContext());
+	if (screen === void 0) throw new Error("@effected/cli/ui: a widget was used outside a screen mounted by CliUi.run or a UiProvider");
+	return screen.cancel ?? ignore;
+};
+/**
+* Wrap an input handler so a throw ends the screen as a defect instead of escaping.
+*
+* @remarks
+* Ink calls `useInput` and `usePaste` handlers from its stdin listener, outside React's render, so an error boundary
+* never sees what they throw: unguarded, it is an uncaught exception (the process dies, Effect finalizers skipped)
+* or, where something keeps the process alive, a screen left waiting. Guarded, the screen dies with the error and
+* `CliUi.run` unmounts it like any other defect. Outside a screen mounted by `CliUi.run`, a `UiProvider` tree
+* included, a handler is called as is.
+*
+* A React hook.
+*
+* @internal
+*/
+const useScreenGuard = () => {
+	const die = inkModules().react.useContext(screenContext())?.die;
+	return (handler) => (...args) => {
+		if (die === void 0) return handler(...args);
+		try {
+			handler(...args);
+		} catch (error) {
+			die(error);
+		}
+	};
+};
+
+//#endregion
+export { screenContext, useScreenCancel, useScreenGuard };

package/ui/internal/UiProviders.js

@@ -0,0 +1,21 @@
+import { inkModules } from "./ink.js";
+import { screenContext } from "./ScreenContext.js";
+
+//#region src/ui/internal/UiProviders.ts
+/**
+* Wrap `children` in the kit's providers: the theme, the glyph set, the optional size override, and a screen's cancel
+* and defect route when it has them.
+*
+* @remarks
+* The one place a kit tree's context is built, for `CliUi.run`'s screens, a live view and the public `UiProvider`,
+* so every kit hook reads the same value under each.
+*
+* @internal
+*/
+const uiProviders = (value, children) => inkModules().react.createElement(screenContext().Provider, {
+	value,
+	children
+});
+
+//#endregion
+export { uiProviders };