@mittwald/cli 1.0.0-alpha.4 → 1.0.0-alpha.41

package/dist/rendering/react/components/Table/model/Column.js

@@ -0,0 +1,38 @@
+import { stdout } from "@oclif/core";
+import { ObservableValue } from "../../../lib/observable-value/ObservableValue.js";
+import { ColumnOptions } from "./ColumnOptions.js";
+import { ColumnName } from "./ColumnName.js";
+import { useWatchObservableValue } from "../../../lib/observable-value/useWatchObservableValue.js";
+import { getTerminalWidth } from "../../../../lib/getTerminalWidth.js";
+export class Column {
+    table;
+    name;
+    options;
+    maxCellWidth = new ObservableValue(0);
+    proportionalWidth = new ObservableValue("0%");
+    constructor(table, name, optionsInput) {
+        this.table = table;
+        this.name = new ColumnName(name);
+        this.table.overallWidth.observe((width) => this.updateProportionalWidth(width));
+        this.options = new ColumnOptions(this, optionsInput);
+    }
+    updateProportionalWidth(overallWidth) {
+        const thisWidth = this.maxCellWidth.value;
+        const quotient = thisWidth / overallWidth;
+        const percentage = Math.round(quotient * 100);
+        this.proportionalWidth.updateValue(`${percentage}%`);
+    }
+    onCellMeasured(dimension) {
+        const termWidth = getTerminalWidth();
+        const boundary = termWidth
+            ? Math.round(termWidth / 2)
+            : Number.MAX_SAFE_INTEGER;
+        const boundedWidth = Math.min(dimension.width, boundary);
+        if (this.maxCellWidth.value < boundedWidth) {
+            this.maxCellWidth.updateValue(boundedWidth);
+        }
+    }
+    useWidth() {
+        return useWatchObservableValue(stdout.isTTY ? this.proportionalWidth : this.maxCellWidth);
+    }
+}

package/dist/rendering/react/components/Table/model/ColumnName.d.ts

@@ -0,0 +1,7 @@
+export declare class ColumnName {
+    readonly value: string;
+    constructor(value: string);
+    matches(name: string | ColumnName): boolean;
+    get humanizedName(): string;
+    static getNameValue(name: string | ColumnName): string;
+}

package/dist/rendering/react/components/Table/model/ColumnName.js

@@ -0,0 +1,17 @@
+import humanizeString from "humanize-string";
+export class ColumnName {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+    matches(name) {
+        return (this.value.toLowerCase().trim() ===
+            ColumnName.getNameValue(name).toLowerCase().trim());
+    }
+    get humanizedName() {
+        return humanizeString(this.value);
+    }
+    static getNameValue(name) {
+        return name instanceof ColumnName ? name.value : name;
+    }
+}

package/dist/rendering/react/components/Table/model/ColumnOptions.d.ts

@@ -0,0 +1,25 @@
+import { Column } from "./Column.js";
+import { ReactNode } from "react";
+type CellRenderer<TData = unknown> = (data: TData) => ReactNode;
+export interface ColumnOptionsInput<TData = unknown> {
+    isVisible?: boolean;
+    isUuid?: boolean;
+    minWidth?: number;
+    header?: ReactNode;
+    extended?: boolean;
+    render?: CellRenderer<TData>;
+}
+export declare class ColumnOptions {
+    private static absoluteMinWidth;
+    readonly column: Column;
+    readonly input?: ColumnOptionsInput;
+    readonly minWidth: number;
+    readonly header?: ReactNode;
+    readonly isVisible: boolean;
+    readonly isExtended: boolean;
+    readonly cellRenderer?: CellRenderer;
+    constructor(column: Column, input?: ColumnOptionsInput);
+    private calculateMinWidth;
+    private getIsVisible;
+}
+export {};

package/dist/rendering/react/components/Table/model/ColumnOptions.js

@@ -0,0 +1,41 @@
+import { getTerminalWidth } from "../../../../lib/getTerminalWidth.js";
+export class ColumnOptions {
+    static absoluteMinWidth = 5;
+    column;
+    input;
+    minWidth;
+    header;
+    isVisible;
+    isExtended;
+    cellRenderer;
+    constructor(column, input) {
+        this.column = column;
+        this.input = input;
+        this.minWidth = this.calculateMinWidth();
+        this.header = input?.header;
+        this.isExtended = input?.extended ?? false;
+        this.isVisible = this.getIsVisible();
+        this.cellRenderer = input?.render;
+    }
+    calculateMinWidth() {
+        if (this.input?.minWidth) {
+            return this.input.minWidth;
+        }
+        if (this.input?.isUuid) {
+            return 36;
+        }
+        const termWidth = getTerminalWidth();
+        const relativeMinWidth = termWidth ? Math.round(termWidth / 20) : 0;
+        return Math.max(ColumnOptions.absoluteMinWidth, relativeMinWidth);
+    }
+    getIsVisible() {
+        if (this.input === undefined) {
+            return false;
+        }
+        const { extended: extendTableOption, visibleColumns } = this.column.table.tableOptions ?? {};
+        const fulfillsExtended = !this.isExtended || extendTableOption === true;
+        const isHidden = !!visibleColumns &&
+            !visibleColumns.some((name) => this.column.name.matches(name));
+        return !isHidden && fulfillsExtended;
+    }
+}

package/dist/rendering/react/components/Table/model/Row.d.ts

@@ -0,0 +1,14 @@
+import { Cell } from "./Cell.js";
+import { Table } from "./Table.js";
+import { ColumnName } from "./ColumnName.js";
+export declare class Row<T = unknown> {
+    readonly table: Table<T>;
+    readonly cells: Cell[];
+    readonly data: T;
+    readonly index: number;
+    private constructor();
+    static fromObject<T>(table: Table<T>, index: number, dataItem: T): Row<T>;
+    private buildCells;
+    getCell(name: string | ColumnName): Cell;
+    collectColumnNamesFromCells(): ColumnName[];
+}

package/dist/rendering/react/components/Table/model/Row.js

@@ -0,0 +1,37 @@
+import { Cell } from "./Cell.js";
+import { ColumnName } from "./ColumnName.js";
+export class Row {
+    table;
+    cells;
+    data;
+    index;
+    constructor(table, index, dataItem) {
+        this.table = table;
+        this.index = index;
+        this.cells = this.buildCells(dataItem);
+        this.data = dataItem;
+    }
+    static fromObject(table, index, dataItem) {
+        return new Row(table, index, dataItem);
+    }
+    buildCells(object) {
+        if (typeof object === "object" && object !== null) {
+            const entries = Object.entries(object);
+            return entries.map(([name, data]) => Cell.fromObject(this, {
+                name,
+                data,
+            }));
+        }
+        return [];
+    }
+    getCell(name) {
+        const cell = this.cells.find((c) => c.name.matches(name));
+        if (!cell) {
+            return Cell.empty(this, ColumnName.getNameValue(name));
+        }
+        return cell;
+    }
+    collectColumnNamesFromCells() {
+        return this.cells.map((cell) => cell.name);
+    }
+}

package/dist/rendering/react/components/Table/model/Table.d.ts

@@ -0,0 +1,19 @@
+import { Row } from "./Row.js";
+import { Column } from "./Column.js";
+import { ObservableValue } from "../../../lib/observable-value/ObservableValue.js";
+import { ColumnOptionsInput } from "./ColumnOptions.js";
+import { TableRenderSetupOutput } from "../../../../setup/TableRenderSetup.js";
+import { ColumnName } from "./ColumnName.js";
+export type TableOptions = TableRenderSetupOutput;
+export type TableColumnsInput<TData = unknown> = Record<string, ColumnOptionsInput<TData>>;
+export declare class Table<T = unknown> {
+    readonly rows: Row<T>[];
+    readonly columns: Column[];
+    readonly overallWidth: ObservableValue<number>;
+    readonly tableOptions?: TableOptions;
+    constructor(data: T[], tableOptions?: TableOptions, columnOptionsInput?: TableColumnsInput<T>);
+    private buildRows;
+    private handleColumnWidthChanged;
+    private buildColumns;
+    getColumn(name: ColumnName | string): Column;
+}

package/dist/rendering/react/components/Table/model/Table.js

@@ -0,0 +1,48 @@
+import { Row } from "./Row.js";
+import { Column } from "./Column.js";
+import { ObservableValue } from "../../../lib/observable-value/ObservableValue.js";
+export class Table {
+    rows;
+    columns;
+    overallWidth = new ObservableValue(0);
+    tableOptions;
+    constructor(data, tableOptions, columnOptionsInput) {
+        this.tableOptions = Object.freeze(tableOptions);
+        this.rows = this.buildRows(data);
+        this.columns = this.buildColumns(this.rows, columnOptionsInput);
+    }
+    buildRows(data) {
+        return data.map((item, index) => Row.fromObject(this, index, item));
+    }
+    handleColumnWidthChanged() {
+        const overallWidth = this.columns.reduce((width, col) => width + col.maxCellWidth.value, 0);
+        this.overallWidth.updateValue(overallWidth);
+    }
+    buildColumns(rows, columnOptions) {
+        const columnsMap = new Map();
+        const addColumn = (columnName) => {
+            const options = columnOptions ? columnOptions[columnName] : {};
+            const column = new Column(this, columnName, options);
+            columnsMap.set(columnName, column);
+            column.maxCellWidth.observe(() => this.handleColumnWidthChanged());
+        };
+        for (const row of rows) {
+            const columns = columnOptions
+                ? Object.entries(columnOptions).map(([name]) => name)
+                : row.collectColumnNamesFromCells().map((n) => n.value);
+            for (const column of columns) {
+                if (!columnsMap.has(column)) {
+                    addColumn(column);
+                }
+            }
+        }
+        return Array.from(columnsMap.values());
+    }
+    getColumn(name) {
+        const col = this.columns.find((col) => col.name.matches(name));
+        if (!col) {
+            throw new Error(`Could not get column with ID ${name}`);
+        }
+        return col;
+    }
+}

package/dist/rendering/react/components/Table/model/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Cell.js";
+export * from "./Column.js";
+export * from "./Table.js";
+export * from "./Row.js";
+export { ColumnName } from "./ColumnName.js";

package/dist/rendering/react/components/Table/model/index.js

@@ -0,0 +1,5 @@
+export * from "./Cell.js";
+export * from "./Column.js";
+export * from "./Table.js";
+export * from "./Row.js";
+export { ColumnName } from "./ColumnName.js";

package/dist/rendering/react/components/Value.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from "react";
+export type ValueProps = PropsWithChildren<{
+    notSet?: boolean;
+}>;
+export declare const Value: React.FC<ValueProps>;

package/dist/rendering/react/components/Value.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+export const Value = ({ children, notSet }) => {
+    if (notSet || children === undefined) {
+        return _jsx(Text, { color: "gray", children: "not set" });
+    }
+    return _jsx(Text, { color: "blue", children: children });
+};

package/dist/rendering/react/components/Warning.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { NoteProps } from "./Note.js";
+export declare const warningColor = "#FF9343";
+export declare const Warning: FC<NoteProps>;

package/dist/rendering/react/components/Warning.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Note } from "./Note.js";
+export const warningColor = "#FF9343";
+export const Warning = (props) => {
+    const { title = "Warning", color = warningColor } = props;
+    return _jsx(Note, { ...props, title: title, color: color });
+};

package/dist/rendering/react/components/WithoutLineBreaks.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const WithoutLineBreaks: FC<PropsWithChildren>;

package/dist/rendering/react/components/WithoutLineBreaks.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, Transform } from "ink";
+import { removeLineBreaks } from "../../../lib/viewhelpers/removeLineBreaks.js";
+export const WithoutLineBreaks = (props) => {
+    const { children } = props;
+    return (_jsx(Transform, { transform: removeLineBreaks, children: _jsx(Text, { children: children }) }));
+};

package/dist/rendering/react/context.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MittwaldAPIV2Client } from "@mittwald/api-client";
+export interface RenderContext {
+    apiClient: MittwaldAPIV2Client;
+    renderAsJson: boolean;
+}
+export declare const renderContext: import("react").Context<RenderContext>;
+export declare const RenderContextProvider: import("react").Provider<RenderContext>;
+export declare const useRenderContext: () => RenderContext;

package/dist/rendering/react/context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+export const renderContext = createContext({
+    renderAsJson: true,
+    apiClient: null,
+});
+export const RenderContextProvider = renderContext.Provider;
+export const useRenderContext = () => useContext(renderContext);

package/dist/rendering/react/error.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Render an error to the terminal; see the ErrorBox component for details.
+ *
+ * @param err The error to render. May be anything; the ErrorBox component will
+ *   handle it.
+ */
+export declare function renderError(err: unknown): void;

package/dist/rendering/react/error.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "ink";
+import { ErrorBox } from "./components/ErrorBox.js";
+/**
+ * Render an error to the terminal; see the ErrorBox component for details.
+ *
+ * @param err The error to render. May be anything; the ErrorBox component will
+ *   handle it.
+ */
+export function renderError(err) {
+    render(_jsx(ErrorBox, { err: err }));
+}

package/dist/rendering/react/hooks/useIncreaseInkStdoutColumns.d.ts

@@ -0,0 +1 @@
+export declare const useIncreaseInkStdoutColumns: () => void;

package/dist/rendering/react/hooks/useIncreaseInkStdoutColumns.js

@@ -0,0 +1,9 @@
+import { useStdout } from "ink";
+// Increase Inks default column width for non-TTY of 80
+export const useIncreaseInkStdoutColumns = () => {
+    const stdout = useStdout().stdout;
+    if (!stdout.isTTY) {
+        // Not using Number.MAX_SAFE_INTEGER here because Ink will fail otherwise
+        stdout.columns = 100_000;
+    }
+};

package/dist/rendering/react/hooks/useMyUserProfile.d.ts

@@ -0,0 +1,2 @@
+import type { MittwaldAPIV2 } from "@mittwald/api-client";
+export declare const useMyUserProfile: () => MittwaldAPIV2.Components.Schemas.SignupProfile;

package/dist/rendering/react/hooks/useMyUserProfile.js

@@ -0,0 +1,15 @@
+import { useRenderContext } from "../context.js";
+import { usePromise } from "@mittwald/react-use-promise";
+import { assertStatus } from "@mittwald/api-client-commons";
+export const useMyUserProfile = () => {
+    const { apiClient } = useRenderContext();
+    const myUserId = usePromise(apiClient.user.getUser, [
+        {
+            userId: "self",
+        },
+    ], {
+        loaderId: "getOwnProfile",
+    });
+    assertStatus(myUserId, 200);
+    return myUserId.data;
+};

package/dist/rendering/react/json/JsonCollectionProvider.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const JsonCollectionProvider: FC<PropsWithChildren>;

package/dist/rendering/react/json/JsonCollectionProvider.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { collectedJsonDataContext } from "./context.js";
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+import { JsonRenderer } from "./JsonRenderer.js";
+const ContextProvider = collectedJsonDataContext.Provider;
+export const JsonCollectionProvider = (props) => {
+    const contextValue = useRef(new ObservableValue(undefined)).current;
+    return (_jsx(ContextProvider, { value: contextValue, children: _jsx(JsonRenderer, { children: props.children }) }));
+};

package/dist/rendering/react/json/JsonRenderer.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const JsonRenderer: FC<PropsWithChildren>;

package/dist/rendering/react/json/JsonRenderer.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { useCollectedJsonData } from "./context.js";
+import { useWatchObservableValue } from "../lib/observable-value/useWatchObservableValue.js";
+import { JSONView } from "../components/JSONView.js";
+import { unpackJsonData } from "./lib/unpackJsonData.js";
+export const JsonRenderer = (props) => {
+    const { children } = props;
+    const jsonValue = useCollectedJsonData();
+    const json = useWatchObservableValue(jsonValue);
+    const display = json ? "none" : "flex";
+    const unpackedData = unpackJsonData(json);
+    return (_jsxs(Box, { children: [_jsx(Box, { display: display, children: children }), _jsx(JSONView, { json: unpackedData })] }));
+};

package/dist/rendering/react/json/RenderJson.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface Props {
+    name: string;
+    data: unknown;
+}
+export declare const RenderJson: FC<Props>;
+export {};

package/dist/rendering/react/json/RenderJson.js

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { useCollectedJsonData } from "./context.js";
+export const RenderJson = (props) => {
+    const { name, data } = props;
+    const jsonData = useCollectedJsonData();
+    useEffect(() => {
+        jsonData.updateValue({
+            ...jsonData.value,
+            [name]: data,
+        });
+        return () => {
+            jsonData.updateValue({
+                ...jsonData.value,
+                [name]: undefined,
+            });
+        };
+    }, [name, data, jsonData]);
+    return null;
+};

package/dist/rendering/react/json/context.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+export type CollectedJsonData = Record<string, unknown>;
+export declare const collectedJsonDataContext: import("react").Context<ObservableValue<CollectedJsonData | undefined>>;
+export declare const useCollectedJsonData: () => ObservableValue<CollectedJsonData | undefined>;

package/dist/rendering/react/json/context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+export const collectedJsonDataContext = createContext(new ObservableValue(undefined));
+export const useCollectedJsonData = () => useContext(collectedJsonDataContext);

package/dist/rendering/react/json/lib/unpackJsonData.d.ts

@@ -0,0 +1 @@
+export declare const unpackJsonData: (json: unknown) => unknown;

package/dist/rendering/react/json/lib/unpackJsonData.js

@@ -0,0 +1,5 @@
+export const unpackJsonData = (json) => {
+    const entries = json && typeof json === "object" ? Object.entries(json) : undefined;
+    const firstEntry = entries?.[0];
+    return entries?.length === 1 && firstEntry ? firstEntry[1] : json;
+};

package/dist/rendering/react/lib/observable-value/ObservableValue.d.ts

@@ -0,0 +1,10 @@
+import { Observer, UnbindObserver } from "./types.js";
+export declare class ObservableValue<T> {
+    value: T;
+    private observers;
+    constructor(value: T);
+    private notifyObservers;
+    get observerCount(): number;
+    observe(observer: Observer<T>): UnbindObserver;
+    updateValue(newValue: T): void;
+}

package/dist/rendering/react/lib/observable-value/ObservableValue.js

@@ -0,0 +1,25 @@
+export class ObservableValue {
+    value;
+    // using unknown since otherwise the ObservableValue seems to be invariant on type T
+    observers = new Set();
+    constructor(value) {
+        this.value = value;
+    }
+    notifyObservers(newValue) {
+        this.observers.forEach((o) => o(newValue));
+    }
+    get observerCount() {
+        return this.observers.size;
+    }
+    observe(observer) {
+        this.observers.add(observer);
+        return () => this.observers.delete(observer);
+    }
+    updateValue(newValue) {
+        if (this.value === newValue) {
+            return;
+        }
+        this.value = newValue;
+        this.notifyObservers(newValue);
+    }
+}

package/dist/rendering/react/lib/observable-value/types.d.ts

@@ -0,0 +1,2 @@
+export type Observer<T> = (newValue: T) => void;
+export type UnbindObserver = () => void;

package/dist/rendering/react/lib/observable-value/types.js

@@ -0,0 +1 @@
+export {};

package/dist/rendering/react/lib/observable-value/useWatchObservableValue.d.ts

@@ -0,0 +1,2 @@
+import { ObservableValue } from "./ObservableValue.js";
+export declare const useWatchObservableValue: <T>(observable: ObservableValue<T>) => T;

package/dist/rendering/react/lib/observable-value/useWatchObservableValue.js

@@ -0,0 +1,9 @@
+import { useEffect, useState } from "react";
+export const useWatchObservableValue = (observable) => {
+    const [watchedValue, setWatchedValue] = useState(observable.value);
+    useEffect(() => {
+        setWatchedValue(observable.value);
+        return observable.observe(setWatchedValue);
+    }, [observable]);
+    return watchedValue;
+};

package/dist/rendering/react/measure/MeasureChildren.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from "react";
+import { Dimension } from "./context.js";
+export type OnDimensionChangedHandler = (dimension: Dimension) => void;
+interface Props {
+    onDimensionChange?: OnDimensionChangedHandler;
+}
+export declare const MeasureChildren: FC<PropsWithChildren<Props>>;
+export {};

package/dist/rendering/react/measure/MeasureChildren.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useId } from "react";
+import { useMeasureContext } from "./context.js";
+export const MeasureChildren = (props) => {
+    const { children, onDimensionChange } = props;
+    const id = useId();
+    const context = useMeasureContext();
+    useEffect(() => {
+        context.addNode(id, children);
+        return () => {
+            context.removeNode(id);
+        };
+    }, [context, children]);
+    useEffect(() => context.getDimension(id).observe(onDimensionChange ??
+        (() => {
+            // not handling
+        })), [id, context, onDimensionChange]);
+    return _jsx(_Fragment, { children: children });
+};

package/dist/rendering/react/measure/MeasureContextProvider.d.ts

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from "react";
+export declare const MeasureContextProvider: FC<PropsWithChildren>;

package/dist/rendering/react/measure/MeasureContextProvider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { useLayoutEffect, useRef, useState, } from "react";
+import { createMeasureContext, measureContext } from "./context.js";
+import { MeasureRenderer } from "./MeasureRenderer.js";
+export const MeasureContextProvider = (props) => {
+    const { children } = props;
+    const context = useRef(createMeasureContext()).current;
+    const [isMeasuring, setIsMeasuring] = useState(true);
+    useLayoutEffect(() => {
+        setIsMeasuring(false);
+    }, []);
+    return (_jsx(measureContext.Provider, { value: context, children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { children: _jsx(MeasureRenderer, {}) }), _jsx(Box, { height: isMeasuring ? 0 : undefined, overflow: isMeasuring ? "hidden" : undefined, children: children })] }) }));
+};

package/dist/rendering/react/measure/MeasureRenderer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from "react";
+export declare const MeasureRenderer: FC;

package/dist/rendering/react/measure/MeasureRenderer.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, measureElement } from "ink";
+import { useEffect, useRef } from "react";
+import { useWatchObservableValue } from "../lib/observable-value/useWatchObservableValue.js";
+import { useMeasureContext } from "./context.js";
+const M = (props) => {
+    const { children, id } = props;
+    const measureContext = useMeasureContext();
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            const dimension = measureElement(ref.current);
+            measureContext.updateDimension(id, dimension);
+        }
+    }, [id, measureContext, ref.current]);
+    return (_jsx(Box, { height: 0, overflow: "hidden", flexShrink: 1, ref: ref, children: children }));
+};
+export const MeasureRenderer = () => {
+    const context = useMeasureContext();
+    const watchedNodes = useWatchObservableValue(context.nodes);
+    return (_jsx(Box, { flexDirection: "row", flexWrap: "wrap", children: Object.entries(watchedNodes).map(([id, node]) => (_jsx(M, { id: id, children: node }, id))) }));
+};

package/dist/rendering/react/measure/context.d.ts

@@ -0,0 +1,18 @@
+import { measureElement } from "ink";
+import { ReactNode } from "react";
+import { ObservableValue } from "../lib/observable-value/ObservableValue.js";
+export type MeasureContextNodes = Record<string, ReactNode>;
+export type Dimension = ReturnType<typeof measureElement>;
+export type Dimensions = Record<string, ObservableValue<Dimension>>;
+interface Context {
+    nodes: ObservableValue<MeasureContextNodes>;
+    dimensions: Dimensions;
+    addNode: (id: string, node: ReactNode) => void;
+    removeNode: (id: string) => void;
+    getDimension: (id: string) => ObservableValue<Dimension>;
+    updateDimension: (id: string, dimension: Dimension) => void;
+}
+export declare const createMeasureContext: () => Context;
+export declare const measureContext: import("react").Context<Context>;
+export declare const useMeasureContext: () => Context;
+export {};