@smithers-orchestrator/components 0.16.0

package/src/components/EscalationChainProps.ts

@@ -0,0 +1,20 @@
+import type React from "react";
+import type { ApprovalRequest } from "./ApprovalRequest.ts";
+import type { EscalationLevel } from "./EscalationLevel.ts";
+import type { OutputTarget } from "./OutputTarget.ts";
+
+export type EscalationChainProps = {
+	/** ID prefix for generated nodes. */
+	id?: string;
+	/** Ordered escalation levels. Each level runs only if the previous escalated. */
+	levels: EscalationLevel[];
+	/** If `true`, the final escalation produces a human approval node. */
+	humanFallback?: boolean;
+	/** Approval request config used when `humanFallback` is `true`. */
+	humanRequest?: ApprovalRequest;
+	/** Output target for escalation tracking at each level. */
+	escalationOutput: OutputTarget;
+	skipIf?: boolean;
+	/** Prompt / input passed to each agent level. */
+	children?: React.ReactNode;
+};

package/src/components/EscalationLevel.ts

@@ -0,0 +1,13 @@
+import type { AgentLike } from "@smithers-orchestrator/agents/AgentLike";
+import type { OutputTarget } from "./OutputTarget.ts";
+
+export type EscalationLevel = {
+	/** Agent to handle this escalation level. */
+	agent: AgentLike;
+	/** Output target for this level's result. */
+	output: OutputTarget;
+	/** Display label for this level. */
+	label?: string;
+	/** Predicate evaluated on the level's result. Return `true` to escalate. */
+	escalateIf?: (result: unknown) => boolean;
+};

package/src/components/GatherAndSynthesize.js

@@ -0,0 +1,69 @@
+// @smithers-type-exports-begin
+/** @typedef {import("./GatherAndSynthesizeProps.ts").GatherAndSynthesizeProps} GatherAndSynthesizeProps */
+/** @typedef {import("./SourceDef.ts").SourceDef} SourceDef */
+// @smithers-type-exports-end
+
+import React from "react";
+import { Sequence } from "./Sequence.js";
+import { Parallel } from "./Parallel.js";
+import { Task } from "./Task.js";
+/**
+ * <GatherAndSynthesize> — Parallel data collection from different sources,
+ * then synthesis into a unified result.
+ *
+ * Composes Sequence, Parallel, and Task. First a Parallel block gathers data
+ * from each source agent, then a synthesis Task receives all gathered data
+ * and produces a combined output.
+ * @param {GatherAndSynthesizeProps} props
+ */
+export function GatherAndSynthesize(props) {
+    if (props.skipIf)
+        return null;
+    const { id, sources, synthesizer, gatherOutput, synthesisOutput, gatheredResults, maxConcurrency, synthesisPrompt, children, } = props;
+    const prefix = id ?? "gather-and-synthesize";
+    const sourceNames = Object.keys(sources);
+    // Step 1: Parallel gather from all sources
+    const gatherTasks = sourceNames.map((name) => {
+        const source = sources[name];
+        const output = source.output ?? gatherOutput;
+        const taskId = `${prefix}-gather-${name}`;
+        const content = source.children ??
+            source.prompt ??
+            `Gather data from source "${name}".`;
+        return React.createElement(Task, {
+            key: taskId,
+            id: taskId,
+            output,
+            agent: source.agent,
+            label: `Gather: ${name}`,
+            children: content,
+        });
+    });
+    const gatherParallel = React.createElement(Parallel, {
+        key: `${prefix}-gather`,
+        id: `${prefix}-gather`,
+        maxConcurrency,
+    }, ...gatherTasks);
+    // Step 2: Build needs map — synthesis task depends on all gather tasks
+    const needs = {};
+    for (const name of sourceNames) {
+        needs[name] = `${prefix}-gather-${name}`;
+    }
+    // Build synthesis prompt from gathered results
+    const defaultSynthesisPrompt = gatheredResults
+        ? `Synthesize the following gathered data into a unified result:\n\n${Object.entries(gatheredResults)
+            .map(([name, data]) => `## ${name}\n${JSON.stringify(data, null, 2)}`)
+            .join("\n\n")}`
+        : `Synthesize the gathered data from sources: ${sourceNames.join(", ")}.`;
+    const synthesisContent = children ?? synthesisPrompt ?? defaultSynthesisPrompt;
+    const synthesisTask = React.createElement(Task, {
+        key: `${prefix}-synthesize`,
+        id: `${prefix}-synthesize`,
+        output: synthesisOutput,
+        agent: synthesizer,
+        needs,
+        label: "Synthesize",
+        children: synthesisContent,
+    });
+    return React.createElement(Sequence, null, gatherParallel, synthesisTask);
+}

package/src/components/GatherAndSynthesizeProps.ts

@@ -0,0 +1,24 @@
+import type React from "react";
+import type { AgentLike } from "@smithers-orchestrator/agents/AgentLike";
+import type { OutputTarget } from "./OutputTarget.ts";
+import type { SourceDef } from "./SourceDef.ts";
+
+export type GatherAndSynthesizeProps = {
+	id?: string;
+	/** Record mapping source names to source definitions. */
+	sources: Record<string, SourceDef>;
+	/** Agent that synthesizes gathered data. */
+	synthesizer: AgentLike;
+	/** Default output schema for each source gather task. */
+	gatherOutput: OutputTarget;
+	/** Output schema for the synthesis task. */
+	synthesisOutput: OutputTarget;
+	/** Gathered results keyed by source name. Typically from ctx.outputMaybe(). */
+	gatheredResults?: Record<string, unknown> | null;
+	/** Max parallel gatherers. */
+	maxConcurrency?: number;
+	/** Prompt for the synthesis task. If omitted, a default prompt is generated. */
+	synthesisPrompt?: string;
+	skipIf?: boolean;
+	children?: React.ReactNode;
+};

package/src/components/HumanTask.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { renderPromptToText } from "./Task.js";
+import { getTaskRuntime } from "@smithers-orchestrator/driver/task-runtime";
+import { SmithersDb } from "@smithers-orchestrator/db/adapter";
+import { buildHumanRequestId } from "@smithers-orchestrator/db/buildHumanRequestId";
+import { SmithersError } from "@smithers-orchestrator/errors/SmithersError";
+/** @typedef {import("./HumanTaskProps.ts").HumanTaskProps} HumanTaskProps */
+
+/**
+ * @param {unknown} value
+ * @returns {value is import("zod").ZodObject<import("zod").ZodRawShape>}
+ */
+function isZodObject(value) {
+    return Boolean(value && typeof value === "object" && "shape" in value);
+}
+/**
+ * @param {HumanTaskProps} props
+ * @returns {React.ReactElement | null}
+ */
+export function HumanTask(props) {
+    if (props.skipIf)
+        return null;
+    const maxAttempts = props.maxAttempts ?? 10;
+    const outputSchema = props.outputSchema ?? (isZodObject(props.output) ? props.output : undefined);
+    const promptText = renderPromptToText(props.prompt);
+    const humanMeta = {
+        humanTask: true,
+        maxAttempts,
+        prompt: promptText,
+        ...props.meta,
+    };
+    /**
+   * @returns {Promise<unknown>}
+   */
+    const computeHumanInput = async () => {
+        const runtime = getTaskRuntime();
+        if (!runtime) {
+            throw new SmithersError("HUMAN_TASK_OUTSIDE_RUNTIME", "HumanTask can only be resolved while a Smithers task is executing.");
+        }
+        const adapter = new SmithersDb(runtime.db);
+        const requestId = buildHumanRequestId(runtime.runId, props.id, runtime.iteration);
+        const humanRequest = await adapter.getHumanRequest(requestId);
+        const approval = await adapter.getApproval(runtime.runId, props.id, runtime.iteration);
+        let rawInput = humanRequest?.responseJson ?? null;
+        if (rawInput == null &&
+            humanRequest?.status !== "cancelled" &&
+            humanRequest?.status !== "expired" &&
+            typeof approval?.note === "string") {
+            rawInput = approval.note;
+            await adapter.answerHumanRequest(requestId, rawInput, approval.decidedAtMs ?? Date.now(), approval.decidedBy ?? null);
+        }
+        if (rawInput == null) {
+            if (humanRequest?.status === "cancelled") {
+                throw new SmithersError("HUMAN_TASK_CANCELLED", `Human input for task "${props.id}" was cancelled.`);
+            }
+            throw new SmithersError("HUMAN_TASK_NO_INPUT", `No human input received for task "${props.id}".`);
+        }
+        let parsed;
+        try {
+            parsed = typeof rawInput === "string" ? JSON.parse(rawInput) : rawInput;
+        }
+        catch {
+            throw new SmithersError("HUMAN_TASK_INVALID_JSON", `Human input for task "${props.id}" is not valid JSON.`);
+        }
+        // Validate against output schema if provided
+        if (outputSchema) {
+            const result = outputSchema.safeParse(parsed);
+            if (!result.success) {
+                throw new SmithersError("HUMAN_TASK_VALIDATION_FAILED", `Human input for task "${props.id}" does not match the output schema: ${result.error.message}`);
+            }
+            return result.data;
+        }
+        return parsed;
+    };
+    return React.createElement("smithers:task", {
+        id: props.id,
+        key: props.key,
+        output: props.output,
+        outputSchema,
+        dependsOn: props.dependsOn,
+        needs: props.needs,
+        needsApproval: true,
+        waitAsync: props.async === true,
+        approvalMode: "decision",
+        timeoutMs: props.timeoutMs,
+        retries: maxAttempts - 1,
+        retryPolicy: { backoff: "fixed", initialDelayMs: 0 },
+        continueOnFail: props.continueOnFail,
+        label: props.label ?? `human:${props.id}`,
+        meta: humanMeta,
+        __smithersKind: "human",
+        __smithersComputeFn: computeHumanInput,
+    });
+}

package/src/components/HumanTaskProps.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+import type { z } from "zod";
+import type { OutputTarget } from "./OutputTarget.ts";
+
+export type HumanTaskProps = {
+	id: string;
+	/** Where to store the human's response. */
+	output: OutputTarget;
+	/** Zod schema the human must conform to. Used for validation. */
+	outputSchema?: z.ZodObject<z.ZodRawShape>;
+	/** Instructions for the human (string or ReactNode). */
+	prompt: string | React.ReactNode;
+	/** Max validation retries before failure. */
+	maxAttempts?: number;
+	/** Do not block unrelated downstream flow while waiting for human input. */
+	async?: boolean;
+	skipIf?: boolean;
+	timeoutMs?: number;
+	continueOnFail?: boolean;
+	/** Explicit dependency on other task node IDs. */
+	dependsOn?: string[];
+	/** Named dependencies on other tasks. Keys become context keys, values are task node IDs. */
+	needs?: Record<string, string>;
+	label?: string;
+	meta?: Record<string, unknown>;
+	key?: string;
+};

package/src/components/InferDeps.ts

@@ -0,0 +1,8 @@
+import type { DepsSpec } from "./DepsSpec.ts";
+import type { InferOutputEntry } from "@smithers-orchestrator/driver/OutputAccessor";
+
+type InferDepValue<T> = T extends string ? unknown : InferOutputEntry<T>;
+
+export type InferDeps<D extends DepsSpec> = {
+	[K in keyof D]: InferDepValue<D[K]>;
+};

package/src/components/Kanban.js

@@ -0,0 +1,68 @@
+// @smithers-type-exports-begin
+/** @typedef {import("./ColumnDef.ts").ColumnDef} ColumnDef */
+/** @typedef {import("./KanbanProps.ts").KanbanProps} KanbanProps */
+// @smithers-type-exports-end
+
+import React from "react";
+import { Sequence } from "./Sequence.js";
+import { Parallel } from "./Parallel.js";
+import { Loop } from "./Ralph.js";
+import { Task } from "./Task.js";
+/**
+ * <Kanban> — Process items through columns with pluggable ticket source.
+ *
+ * Composes Loop, Sequence, Parallel, and Task to create a board where items
+ * flow through columns. Each column processes items via its assigned agent.
+ * Items in the same column can be processed in parallel.
+ * @param {KanbanProps} props
+ */
+export function Kanban(props) {
+    if (props.skipIf)
+        return null;
+    const { id, columns, useTickets, agents, maxConcurrency, onComplete, until = false, maxIterations = 5, children, } = props;
+    const prefix = id ?? "kanban";
+    const tickets = useTickets();
+    // Build a Sequence of columns. Each column processes all tickets in Parallel.
+    const columnElements = columns.map((col, colIdx) => {
+        const agent = agents?.[col.name] ?? col.agent;
+        const taskElements = tickets.map((item) => {
+            const taskId = `${prefix}-${col.name}-${item.id}`;
+            const taskProps = col.task ?? {};
+            const prompt = col.prompt
+                ? col.prompt({ item, column: col.name })
+                : `Process item ${item.id} in column "${col.name}".`;
+            return React.createElement(Task, {
+                ...taskProps,
+                key: `${col.name}-${item.id}`,
+                id: taskId,
+                output: col.output,
+                agent,
+                continueOnFail: taskProps.continueOnFail ?? true,
+                label: taskProps.label ?? `${col.name}: ${item.id}`,
+                children: prompt,
+            });
+        });
+        return React.createElement(Parallel, {
+            key: `col-${colIdx}-${col.name}`,
+            id: `${prefix}-col-${col.name}`,
+            maxConcurrency,
+        }, ...taskElements);
+    });
+    const sequence = React.createElement(Sequence, null, ...columnElements);
+    const loop = React.createElement(Loop, {
+        id: `${prefix}-loop`,
+        until,
+        maxIterations,
+        onMaxReached: "return-last",
+    }, sequence);
+    if (!onComplete) {
+        return loop;
+    }
+    return React.createElement(Sequence, null, loop, React.createElement(Task, {
+        key: `${prefix}-complete`,
+        id: `${prefix}-complete`,
+        output: onComplete,
+        label: "Board complete",
+        children: children ?? null,
+    }));
+}

package/src/components/KanbanProps.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+import type { AgentLike } from "@smithers-orchestrator/agents/AgentLike";
+import type { ColumnDef } from "./ColumnDef.ts";
+import type { OutputTarget } from "./OutputTarget.ts";
+
+export type KanbanProps = {
+	id?: string;
+	/** Column definitions in order. Items flow left to right. */
+	columns: ColumnDef[];
+	/** Function that returns ticket items to process. Each item must have an `id` field. */
+	useTickets: () => Array<{
+		id: string;
+		[key: string]: unknown;
+	}>;
+	/** Record mapping column names to agents. Overrides column-level agents. */
+	agents?: Record<string, AgentLike>;
+	/** Max items processed in parallel per column. */
+	maxConcurrency?: number;
+	/** Callback output schema when an item reaches the final column. */
+	onComplete?: OutputTarget;
+	/** Whether the board loop is done. When true, the loop exits. */
+	until?: boolean;
+	/** Max iterations through the column pipeline. */
+	maxIterations?: number;
+	skipIf?: boolean;
+	children?: React.ReactNode | Record<string, unknown>;
+};

package/src/components/Loop.js

@@ -0,0 +1,6 @@
+// @smithers-type-exports-begin
+/** @typedef {import("./LoopProps.ts").LoopProps} LoopProps */
+/** @typedef {import("./RalphProps.ts").RalphProps} RalphProps */
+// @smithers-type-exports-end
+
+export { Loop, Ralph } from "./Ralph.js";

package/src/components/LoopProps.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+
+export type LoopProps = {
+	id?: string;
+	until?: boolean;
+	maxIterations?: number;
+	onMaxReached?: "fail" | "return-last";
+	continueAsNewEvery?: number;
+	skipIf?: boolean;
+	children?: React.ReactNode;
+};

package/src/components/MergeQueue.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { DEFAULT_MERGE_QUEUE_CONCURRENCY } from "@smithers-orchestrator/graph/constants";
+/** @typedef {import("./MergeQueueProps.ts").MergeQueueProps} MergeQueueProps */
+
+/**
+ * @param {MergeQueueProps} props
+ */
+export function MergeQueue(props) {
+    if (props.skipIf)
+        return null;
+    const next = {
+        maxConcurrency: props.maxConcurrency ?? DEFAULT_MERGE_QUEUE_CONCURRENCY,
+        id: props.id,
+    };
+    return React.createElement("smithers:merge-queue", next, props.children);
+}

package/src/components/MergeQueueProps.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+
+/**
+ * Queue tasks so that at most `maxConcurrency` run concurrently across the group.
+ * Defaults to 1, providing an easy merge queue primitive.
+ */
+export type MergeQueueProps = {
+	id?: string;
+	maxConcurrency?: number;
+	skipIf?: boolean;
+	children?: React.ReactNode;
+};

package/src/components/Optimizer.js

@@ -0,0 +1,52 @@
+// @smithers-type-exports-begin
+/** @typedef {import("./OptimizerProps.ts").OptimizerProps} OptimizerProps */
+// @smithers-type-exports-end
+
+import React from "react";
+import { Loop } from "./Ralph.js";
+import { Sequence } from "./Sequence.js";
+import { Task } from "./Task.js";
+/**
+ * Generate -> evaluate -> improve loop with score convergence.
+ *
+ * Composes Loop, Sequence, and Task to create an iterative
+ * optimization pattern. Each iteration receives the previous
+ * score and feedback to guide improvement.
+ * @param {OptimizerProps} props
+ */
+export function Optimizer(props) {
+    if (props.skipIf)
+        return null;
+    const { id, generator, evaluator, generateOutput, evaluateOutput, targetScore, maxIterations = 10, onMaxReached = "return-last", children, } = props;
+    const prefix = id ?? "optimizer";
+    const generateId = `${prefix}-generate`;
+    const evaluateId = `${prefix}-evaluate`;
+    // `until` is false — the runtime re-renders and checks the evaluate
+    // output's `score` field against `targetScore` each frame.
+    // When no targetScore is set, the loop always runs all iterations.
+    const isAgentEvaluator = typeof evaluator !== "function";
+    return React.createElement(Loop, {
+        id: prefix,
+        until: false,
+        maxIterations,
+        onMaxReached,
+    }, React.createElement(Sequence, null, React.createElement(Task, {
+        id: generateId,
+        output: generateOutput,
+        agent: generator,
+        children,
+    }), isAgentEvaluator
+        ? React.createElement(Task, {
+            id: evaluateId,
+            output: evaluateOutput,
+            agent: evaluator,
+            needs: { candidate: generateId },
+            children: `Evaluate the generated candidate and provide a score.`,
+        })
+        : React.createElement(Task, {
+            id: evaluateId,
+            output: evaluateOutput,
+            needs: { candidate: generateId },
+            children: evaluator,
+        })));
+}

package/src/components/OptimizerProps.ts

@@ -0,0 +1,25 @@
+import type React from "react";
+import type { AgentLike } from "@smithers-orchestrator/agents/AgentLike";
+import type { OutputTarget } from "./OutputTarget.ts";
+
+export type OptimizerProps = {
+	id?: string;
+	/** Agent that generates or improves candidates each iteration. */
+	generator: AgentLike;
+	/** Agent (or compute function) that scores candidates. */
+	evaluator: AgentLike | ((candidate: unknown) => unknown | Promise<unknown>);
+	/** Output schema for generated candidates. */
+	generateOutput: OutputTarget;
+	/** Output schema for evaluation results. Must include a `score: number` field. */
+	evaluateOutput: OutputTarget;
+	/** Score threshold to stop early. When omitted, runs all iterations. */
+	targetScore?: number;
+	/** Maximum optimization rounds. @default 10 */
+	maxIterations?: number;
+	/** Behavior when maxIterations is reached. @default "return-last" */
+	onMaxReached?: "return-last" | "fail";
+	/** Skip the entire optimization loop. */
+	skipIf?: boolean;
+	/** Initial generation prompt (string or ReactNode). */
+	children: string | React.ReactNode;
+};

package/src/components/OutputTarget.ts

@@ -0,0 +1,6 @@
+import type { z } from "zod";
+
+/** Valid output targets: a Zod schema (recommended), a Drizzle table object, or a string key (escape hatch). */
+export type OutputTarget = z.ZodObject<z.ZodRawShape> | {
+	$inferSelect: Record<string, unknown>;
+} | string;

package/src/components/Panel.js

@@ -0,0 +1,69 @@
+// @smithers-type-exports-begin
+/** @typedef {import("./PanelProps.ts").PanelProps} PanelProps */
+// @smithers-type-exports-end
+
+import React from "react";
+import { Sequence } from "./Sequence.js";
+import { Parallel } from "./Parallel.js";
+import { Task } from "./Task.js";
+/** @typedef {import("@smithers-orchestrator/agents/AgentLike").AgentLike} AgentLike */
+/** @typedef {import("./PanelistConfig.ts").PanelistConfig} PanelistConfig */
+
+/**
+ * @param {PanelistConfig | AgentLike} entry
+ * @param {number} index
+ * @returns {PanelistConfig}
+ */
+function normalizePanelist(entry, index) {
+    if ("generate" in entry && !("agent" in entry)) {
+        return { agent: entry, label: `panelist-${index}` };
+    }
+    return entry;
+}
+/**
+ * <Panel> — Parallel specialists review the same input, then a moderator synthesizes.
+ *
+ * Composes: Sequence > Parallel[Task per panelist] > Task(moderator)
+ * @param {PanelProps} props
+ */
+export function Panel(props) {
+    if (props.skipIf)
+        return null;
+    const { id, panelists, moderator, panelistOutput, moderatorOutput, strategy = "synthesize", minAgree, maxConcurrency, children, } = props;
+    const prefix = id ?? "panel";
+    const normalized = panelists.map(normalizePanelist);
+    // Build parallel panelist tasks
+    const panelistTasks = normalized.map((p, i) => {
+        const taskId = `${prefix}-${p.label ?? p.role ?? `panelist-${i}`}`;
+        return React.createElement(Task, {
+            key: taskId,
+            id: taskId,
+            output: panelistOutput,
+            agent: p.agent,
+            label: p.role ?? p.label,
+            children,
+        });
+    });
+    const parallelEl = React.createElement(Parallel, { maxConcurrency }, ...panelistTasks);
+    // Build needs map: each panelist task id -> its task id
+    const needs = {};
+    normalized.forEach((p, i) => {
+        const taskId = `${prefix}-${p.label ?? p.role ?? `panelist-${i}`}`;
+        needs[taskId] = taskId;
+    });
+    // Moderator prompt includes strategy metadata
+    const strategyPrompt = strategy === "vote"
+        ? `\n\nStrategy: VOTE. Count how many panelists agree. ${minAgree ? `Minimum agreement required: ${minAgree}.` : ""}`
+        : strategy === "consensus"
+            ? `\n\nStrategy: CONSENSUS. All panelists must converge. ${minAgree ? `Minimum agreement required: ${minAgree}.` : ""}`
+            : `\n\nStrategy: SYNTHESIZE. Combine all panelist outputs into a single coherent result.`;
+    const moderatorChildren = `Synthesize the following panelist outputs.${strategyPrompt}`;
+    const moderatorTask = React.createElement(Task, {
+        id: `${prefix}-moderator`,
+        output: moderatorOutput,
+        agent: moderator,
+        needs,
+        children: moderatorChildren,
+    });
+    return React.createElement(Sequence, null, parallelEl, moderatorTask);
+}

package/src/components/PanelProps.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+import type { AgentLike } from "@smithers-orchestrator/agents/AgentLike";
+import type { PanelistConfig } from "./PanelistConfig.ts";
+import type { OutputTarget } from "./OutputTarget.ts";
+
+export type PanelProps = {
+	id?: string;
+	panelists: PanelistConfig[] | AgentLike[];
+	moderator: AgentLike;
+	panelistOutput: OutputTarget;
+	moderatorOutput: OutputTarget;
+	strategy?: "synthesize" | "vote" | "consensus";
+	minAgree?: number;
+	maxConcurrency?: number;
+	skipIf?: boolean;
+	children: string | React.ReactNode;
+};

package/src/components/PanelistConfig.ts

@@ -0,0 +1,7 @@
+import type { AgentLike } from "@smithers-orchestrator/agents/AgentLike";
+
+export type PanelistConfig = {
+	agent: AgentLike;
+	role?: string;
+	label?: string;
+};

package/src/components/Parallel.js

@@ -0,0 +1,16 @@
+import React from "react";
+/** @typedef {import("./ParallelProps.ts").ParallelProps} ParallelProps */
+
+/**
+ * @param {ParallelProps} props
+ */
+export function Parallel(props) {
+    if (props.skipIf)
+        return null;
+    // Align prop sanitization with other structural components
+    const next = {
+        maxConcurrency: props.maxConcurrency,
+        id: props.id,
+    };
+    return React.createElement("smithers:parallel", next, props.children);
+}

package/src/components/ParallelProps.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+
+export type ParallelProps = {
+	id?: string;
+	maxConcurrency?: number;
+	skipIf?: boolean;
+	children?: React.ReactNode;
+};