\n
\n \n {readString(props, 'label') ?? title ?? 'Metric'}\n
\n {readText(props, 'value') ?? '0'}
\n {readText(props, 'detail') ?{readText(props, 'detail')}
: null}\n\n {title ?
\n );\n }\n if (type === 'section') {\n return (\n {title}
: null}\n {children}\n{title}
: null}\n {children}\n\n {title ?
\n );\n}\n\nfunction renderVizBlock(\n type: string,\n props: Readonly{title}
: null}\n {children}\n\n {title ?
\n );\n }\n\n return (\n {title}
: null}\n {rows.map((row) => (\n \n {row.label}\n \n \n \n {formatNumber(row.value)}\n
\n ))}\n - \n {title ?
- {title} : null}\n {readArray(props, 'items').map((item) => (\n
- {renderNode(item, depth + 1, context)} \n ))}\n
\n
\n ) : null}\n {title}
\n{renderChildren(props, depth, context)}
\n \n {title ?
\n );\n}\n\nfunction renderChildren(\n props: Readonly{title}
: null}\n \n {columns.length > 0 ? (\n
\n \n {columns.map((column) => {column.header})}\n
\n ) : null}\n {rows.map((row) => (\n \n {columns.map((column) => {readCell(row, column.key)})}\n
\n ))}\n
+ {title ?
+ );
+ }
+ if (type === 'section') {
+ return (
+ {title}
: null} + {children} +{title}
: null} + {children} +
+ {title ?
+ );
+}
+
+function renderVizBlock(
+ type: string,
+ props: Readonly{title}
: null} + {children} +
+ {title ?
+ );
+ }
+
+ return (
+ {title}
: null}
+ {rows.map((row) => (
+
+ {row.label}
+
+
+
+ {formatNumber(row.value)}
+
+ ))}
+
+
+
+
+ {readString(props, 'label') ?? title ?? 'Metric'}
+
+
+ {readText(props, 'value') ?? '0'}
+ {readText(props, 'detail') + ?{readText(props, 'detail')}
+ : null} +-
+ {title ?
- {title} : null} + {readArray(props, 'items').map((item) => ( +
- {renderNode(item, depth + 1, context)} + ))} +
+
+ )
+ : null}
+ {title}
+{renderChildren(props, depth, context)}
+
+ {title ?
+ );
+}
+
+function renderChildren(
+ props: Readonly{title}
: null}
+
+ {columns.length > 0
+ ? (
+
+
+ {columns.map((column) => {column.header})}
+
+ )
+ : null}
+ {rows.map((row, index) => (
+
+ {columns.map((column) => {readCell(row, column.key)})}
+
+ ))}
+
+ Unable to render generated UI.
+
+ );
+}
+
+type ChartDatum = {
+ readonly label: string;
+ readonly value: number;
+};
+
+type Column = {
+ readonly key: string;
+ readonly header: string;
+};
+
+function normalizeChartDatum(value: unknown): ChartDatum | undefined {
+ if (!isRecord(value)) return undefined;
+ const label = readString(value, 'label');
+ const rawValue = value.value;
+ if (label === undefined || typeof rawValue !== 'number' || !Number.isFinite(rawValue)) {
+ return undefined;
+ }
+ return { label, value: rawValue };
+}
+
+function isChartDatum(value: ChartDatum | undefined): value is ChartDatum {
+ return value !== undefined;
+}
+
+function normalizeColumn(value: unknown): Column | undefined {
+ if (typeof value === 'string' && value.length > 0) return { key: value, header: value };
+ if (!isRecord(value)) return undefined;
+ const key = readString(value, 'key');
+ if (key === undefined) return undefined;
+ return { key, header: readString(value, 'header') ?? key };
+}
+
+function isColumn(value: Column | undefined): value is Column {
+ return value !== undefined;
+}
+
+function readCell(row: Readonly