@dreamboard-games/ui-sdk 0.0.41

package/src/components/InteractionForm.tsx

@@ -0,0 +1,1029 @@
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type CSSProperties,
+  type FormEvent,
+  type ReactNode,
+} from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Input } from "../internal/ui/input.js";
+import { Label } from "../internal/ui/label.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from "../internal/ui/select.js";
+import { surfaceStyle } from "../theme/derive.js";
+import { useTheme, useThemeCssVars } from "../theme/ThemeProvider.js";
+import type {
+  DraftValidation,
+  InteractionHandle,
+  InteractionParamsShape,
+} from "../hooks/useInteractionHandle.js";
+import type {
+  InteractionChoiceOption,
+  InteractionDescriptor,
+  InteractionInputDescriptor,
+  InputDomain,
+} from "../types/plugin-state.js";
+import { interactionLabel } from "../utils/interaction-labels.js";
+import { useChromeSuppression } from "./ChromeSuppressionContext.js";
+import { ThemedButton } from "./ThemedButton.js";
+
+export interface InteractionFieldRenderProps<
+  Params extends InteractionParamsShape = InteractionParamsShape,
+  Key extends keyof Params & string = keyof Params & string,
+> {
+  descriptor: InteractionDescriptor;
+  input: InteractionInputDescriptor & { key: Key };
+  handle: InteractionHandle<Params>;
+  value: Params[Key] | undefined;
+  setValue: (value: Params[Key]) => void;
+  clearValue: () => void;
+  errors: readonly string[];
+  missing: boolean;
+  disabled: boolean;
+}
+
+export type InteractionFieldRenderMap<
+  Params extends InteractionParamsShape = InteractionParamsShape,
+> = Partial<{
+  [K in keyof Params & string]: (
+    props: InteractionFieldRenderProps<Params, K>,
+  ) => ReactNode;
+}>;
+
+export interface InteractionFieldProps<
+  Params extends InteractionParamsShape = InteractionParamsShape,
+  Key extends keyof Params & string = keyof Params & string,
+> {
+  descriptor: InteractionDescriptor;
+  inputKey: Key;
+  handle: InteractionHandle<Params>;
+  errors?: readonly string[];
+  missing?: boolean;
+  disabled?: boolean;
+  render?: InteractionFieldRenderMap<Params>[Key];
+}
+
+export interface InteractionFormProps<
+  Params extends InteractionParamsShape = InteractionParamsShape,
+  DefaultedKeys extends keyof Params & string = never,
+> {
+  descriptor: InteractionDescriptor;
+  handle: InteractionHandle<Params, DefaultedKeys>;
+  fields?: ReadonlyArray<keyof Params & string>;
+  hiddenFields?: ReadonlyArray<keyof Params & string>;
+  renderFields?: InteractionFieldRenderMap<Params>;
+  title?: ReactNode;
+  description?: ReactNode;
+  submitLabel?: ReactNode;
+  cancelLabel?: ReactNode;
+  onCancel?: () => void;
+  onSubmitSuccess?: () => void;
+  disabled?: boolean;
+  accordion?: boolean;
+  defaultOpen?: boolean;
+  style?: CSSProperties;
+}
+
+const EMPTY_FIELD_ERRORS: readonly string[] = [];
+
+export function InteractionForm<
+  Params extends InteractionParamsShape = InteractionParamsShape,
+  DefaultedKeys extends keyof Params & string = never,
+>({
+  descriptor,
+  handle,
+  fields,
+  hiddenFields,
+  renderFields,
+  title,
+  description,
+  submitLabel,
+  cancelLabel = "Cancel",
+  onCancel,
+  onSubmitSuccess,
+  disabled = false,
+  accordion = true,
+  defaultOpen = false,
+  style,
+}: InteractionFormProps<Params, DefaultedKeys>) {
+  const theme = useTheme();
+  const fallbackLabel = interactionLabel(descriptor);
+  const formId = useId();
+  useChromeSuppression(formId, true);
+  const [pending, setPending] = useState(false);
+  const [validation, setValidation] = useState<DraftValidation<Params> | null>(
+    null,
+  );
+  const [formError, setFormError] = useState<string | null>(null);
+  const [accordionOpen, setAccordionOpen] = useState(defaultOpen);
+  const hidden = useMemo(() => new Set(hiddenFields ?? []), [hiddenFields]);
+  const visibleInputs = useMemo(() => {
+    const allowed = fields ? new Set(fields) : null;
+    return defaultFormInputs(descriptor).filter((input) => {
+      const key = input.key as keyof Params & string;
+      if (allowed && !allowed.has(key)) return false;
+      return !hidden.has(key);
+    });
+  }, [descriptor, fields, hidden]);
+
+  const currentValidation = validation;
+  const fieldErrors = (currentValidation?.fieldErrors ?? {}) as Partial<
+    Record<keyof Params & string, readonly string[]>
+  >;
+  const missing = new Set<string>(currentValidation?.missing ?? []);
+  const formErrors = [
+    ...(currentValidation?.formErrors ?? []),
+    ...(formError ? [formError] : []),
+  ];
+  const isDisabled = disabled || pending || !descriptor.available;
+  const useAccordion = accordion && visibleInputs.length > 0;
+
+  useEffect(() => {
+    setAccordionOpen(defaultOpen);
+  }, [defaultOpen, descriptor.interactionId]);
+
+  const containerStyle: CSSProperties = {
+    ...surfaceStyle(theme, { tone: "card" }),
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.space[2],
+    padding: theme.space[3],
+    minWidth: "min(100%, 280px)",
+    boxSizing: "border-box",
+    fontFamily: theme.typography.fontFamily.body,
+    ...style,
+  };
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (isDisabled) return;
+    const nextValidation = handle.validateDraft();
+    setValidation(nextValidation);
+    setFormError(null);
+    if (!nextValidation.ok) {
+      setAccordionOpen(true);
+      return;
+    }
+    setPending(true);
+    try {
+      await handle.submitDraft();
+      onSubmitSuccess?.();
+      setAccordionOpen(defaultOpen);
+    } catch (error) {
+      setAccordionOpen(true);
+      setFormError(
+        error instanceof Error
+          ? error.message
+          : "Interaction submission failed",
+      );
+    } finally {
+      setPending(false);
+    }
+  };
+
+  const header = (
+    <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+      <strong
+        style={{
+          fontFamily: theme.typography.fontFamily.display,
+          fontSize: theme.typography.fontSize.md,
+          color: theme.semantic.text.primary,
+        }}
+      >
+        {title ?? fallbackLabel}
+      </strong>
+      {description ? (
+        <span
+          style={{
+            fontSize: theme.typography.fontSize.sm,
+            color: theme.semantic.text.muted,
+          }}
+        >
+          {description}
+        </span>
+      ) : null}
+    </div>
+  );
+
+  const fieldsContent =
+    visibleInputs.length > 0 ? (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.space[3],
+        }}
+      >
+        {visibleInputs.map((input) => {
+          const key = input.key as keyof Params & string;
+          return (
+            <InteractionField<Params>
+              key={input.key}
+              descriptor={descriptor}
+              inputKey={key}
+              handle={handle}
+              errors={fieldErrors[key] ?? []}
+              missing={missing.has(key)}
+              disabled={isDisabled}
+              render={renderFields?.[key]}
+            />
+          );
+        })}
+      </div>
+    ) : (
+      <span
+        style={{
+          fontSize: theme.typography.fontSize.sm,
+          color: theme.semantic.text.muted,
+        }}
+      >
+        No visible fields are required. Board or card selection may complete
+        this interaction.
+      </span>
+    );
+
+  const formErrorContent =
+    formErrors.length > 0 ? (
+      <div
+        role="alert"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.space[1],
+          color: theme.semantic.intent.danger.solid,
+          fontSize: theme.typography.fontSize.sm,
+        }}
+      >
+        {formErrors.map((error) => (
+          <span key={error}>{error}</span>
+        ))}
+      </div>
+    ) : null;
+
+  const actions = (
+    <div
+      style={{
+        display: "flex",
+        gap: theme.space[2],
+        justifyContent: "flex-end",
+      }}
+    >
+      {onCancel ? (
+        <ThemedButton
+          type="button"
+          variant="secondary"
+          size="sm"
+          disabled={pending}
+          onClick={onCancel}
+          className="h-9 px-3 text-sm"
+        >
+          {cancelLabel}
+        </ThemedButton>
+      ) : null}
+      <ThemedButton
+        type="submit"
+        variant="primary"
+        size="sm"
+        disabled={isDisabled}
+        className="h-9 px-3 text-sm"
+      >
+        {pending ? "Submitting..." : (submitLabel ?? fallbackLabel)}
+      </ThemedButton>
+    </div>
+  );
+
+  const body = (
+    <>
+      {fieldsContent}
+      {formErrorContent}
+      {actions}
+    </>
+  );
+
+  return (
+    <form
+      data-interaction-form
+      data-interaction-id={descriptor.interactionId}
+      onSubmit={(event) => void submit(event)}
+      style={containerStyle}
+    >
+      {useAccordion ? (
+        <AccordionPrimitive.Root
+          type="single"
+          collapsible
+          value={accordionOpen ? "fields" : undefined}
+          onValueChange={(value: string) =>
+            setAccordionOpen(value === "fields")
+          }
+        >
+          <AccordionPrimitive.Item value="fields">
+            <AccordionPrimitive.Header style={{ margin: 0 }}>
+              <AccordionPrimitive.Trigger
+                style={{
+                  alignItems: "center",
+                  appearance: "none",
+                  background: "transparent",
+                  border: 0,
+                  color: theme.semantic.text.primary,
+                  cursor: "pointer",
+                  display: "flex",
+                  fontFamily: theme.typography.fontFamily.display,
+                  fontSize: theme.typography.fontSize.md,
+                  fontWeight: theme.typography.fontWeight.bold,
+                  justifyContent: "space-between",
+                  padding: 0,
+                  textAlign: "left",
+                  width: "100%",
+                }}
+              >
+                <span>{title ?? fallbackLabel}</span>
+                <span aria-hidden>{accordionOpen ? "−" : "+"}</span>
+              </AccordionPrimitive.Trigger>
+            </AccordionPrimitive.Header>
+            <AccordionPrimitive.Content>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: theme.space[2],
+                  marginTop: theme.space[2],
+                }}
+              >
+                {description ? (
+                  <span
+                    style={{
+                      fontSize: theme.typography.fontSize.sm,
+                      color: theme.semantic.text.muted,
+                    }}
+                  >
+                    {description}
+                  </span>
+                ) : null}
+                {body}
+              </div>
+            </AccordionPrimitive.Content>
+          </AccordionPrimitive.Item>
+        </AccordionPrimitive.Root>
+      ) : (
+        <>
+          {header}
+          {body}
+        </>
+      )}
+    </form>
+  );
+}
+
+export function InteractionField<
+  Params extends InteractionParamsShape = InteractionParamsShape,
+  Key extends keyof Params & string = keyof Params & string,
+>({
+  descriptor,
+  inputKey,
+  handle,
+  errors = EMPTY_FIELD_ERRORS,
+  missing = false,
+  disabled = false,
+  render,
+}: InteractionFieldProps<Params, Key>) {
+  const input = descriptor.inputs.find(
+    (candidate) => candidate.key === inputKey,
+  );
+  if (!input) return null;
+  const typedInput = input as InteractionInputDescriptor & { key: Key };
+  const value = handle.values[inputKey] as Params[Key] | undefined;
+  const props: InteractionFieldRenderProps<Params, Key> = {
+    descriptor,
+    input: typedInput,
+    handle,
+    value,
+    setValue: (next) => handle.setInput(inputKey, next),
+    clearValue: () => handle.clearInput(inputKey),
+    errors,
+    missing,
+    disabled,
+  };
+  if (render) return <>{render(props)}</>;
+  return <DefaultInteractionField {...props} />;
+}
+
+export function hasDefaultInteractionFormFields(
+  descriptor: Pick<InteractionDescriptor, "inputs">,
+): boolean {
+  return defaultFormInputs(descriptor).length > 0;
+}
+
+export function defaultFormInputs(
+  descriptor: Pick<InteractionDescriptor, "inputs">,
+): InteractionInputDescriptor[] {
+  return descriptor.inputs.filter((input) => {
+    switch (input.domain.type) {
+      case "choice":
+      case "choiceList":
+      case "resourceMap":
+      case "boundedNumber":
+        return true;
+      case "target":
+        return input.domain.selection?.mode === "many";
+    }
+  });
+}
+
+function DefaultInteractionField<
+  Params extends InteractionParamsShape,
+  Key extends keyof Params & string,
+>(props: InteractionFieldRenderProps<Params, Key>) {
+  const { input } = props;
+  switch (input.domain.type) {
+    case "choice":
+      if (input.domain.selection?.mode === "many") {
+        return (
+          <ChoiceListField
+            {...props}
+            domain={{
+              type: "choiceList",
+              choices: input.domain.choices,
+              min: input.domain.selection.min ?? 0,
+              max: input.domain.selection.max,
+              selection: input.domain.selection,
+            }}
+          />
+        );
+      }
+      return <ChoiceField {...props} domain={input.domain} />;
+    case "choiceList":
+      return <ChoiceListField {...props} domain={input.domain} />;
+    case "resourceMap":
+      return <ResourceMapField {...props} domain={input.domain} />;
+    case "boundedNumber":
+      return <BoundedNumberField {...props} domain={input.domain} />;
+    case "target":
+      return <TargetSummaryField {...props} domain={input.domain} />;
+  }
+}
+
+function FieldFrame({
+  label,
+  controlId,
+  errors,
+  missing,
+  children,
+}: {
+  label: ReactNode;
+  controlId?: string;
+  errors: readonly string[];
+  missing: boolean;
+  children: ReactNode;
+}) {
+  const theme = useTheme();
+  const messages = errors.length > 0 ? errors : missing ? ["Required"] : [];
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.space[1],
+        fontSize: theme.typography.fontSize.sm,
+        color: theme.semantic.text.primary,
+      }}
+    >
+      <Label
+        htmlFor={controlId}
+        style={{
+          color: theme.semantic.text.primary,
+          fontWeight: theme.typography.fontWeight.bold,
+        }}
+      >
+        {label}
+      </Label>
+      {children}
+      {messages.length > 0 ? (
+        <span
+          role="alert"
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+            color: theme.semantic.intent.danger.solid,
+            fontSize: theme.typography.fontSize.xs,
+          }}
+        >
+          {messages.map((message) => (
+            <span key={message}>{message}</span>
+          ))}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+function ChoiceOptionLabel({ choice }: { choice: InteractionChoiceOption }) {
+  const theme = useTheme();
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        minWidth: 0,
+      }}
+    >
+      <span
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          minWidth: 0,
+        }}
+      >
+        {choice.icon ? (
+          <span aria-hidden style={{ fontSize: "1.1em", lineHeight: 1 }}>
+            {choice.icon}
+          </span>
+        ) : null}
+        <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+          {choice.label}
+        </span>
+      </span>
+      {choice.badge ? (
+        <span
+          style={{
+            borderRadius: 999,
+            background: theme.semantic.surface.inset,
+            color: theme.semantic.text.muted,
+            fontSize: theme.typography.fontSize.xs,
+            fontWeight: theme.typography.fontWeight.bold,
+            lineHeight: 1,
+            padding: "3px 6px",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {choice.badge}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+function ChoiceDescription({ choice }: { choice?: InteractionChoiceOption }) {
+  const theme = useTheme();
+  const message = choice?.disabledReason ?? choice?.description;
+  if (!message) return null;
+  return (
+    <span
+      style={{
+        color: choice?.disabledReason
+          ? theme.semantic.intent.danger.solid
+          : theme.semantic.text.muted,
+        fontSize: theme.typography.fontSize.xs,
+      }}
+    >
+      {message}
+    </span>
+  );
+}
+
+function ChoiceField<
+  Params extends InteractionParamsShape,
+  Key extends keyof Params & string,
+>({
+  input,
+  value,
+  setValue,
+  errors,
+  missing,
+  disabled,
+  domain,
+}: InteractionFieldRenderProps<Params, Key> & {
+  domain: InputDomain;
+}) {
+  const theme = useTheme();
+  const themeCssVars = useThemeCssVars();
+  const choices = domain.choices ?? [];
+  const controlId = useId();
+  const selectedChoice =
+    typeof value === "string"
+      ? choices.find((choice) => choice.value === value)
+      : undefined;
+  if (choices.length > 0 && choices.length <= 3) {
+    return (
+      <FieldFrame
+        label={labelForInput(input)}
+        errors={errors}
+        missing={missing}
+      >
+        <span
+          style={{
+            display: "inline-flex",
+            flexWrap: "wrap",
+            gap: theme.space[1],
+          }}
+        >
+          {choices.map((choice) => {
+            const selected = value === choice.value;
+            return (
+              <ThemedButton
+                key={choice.value}
+                type="button"
+                variant={selected ? "primary" : "secondary"}
+                size="sm"
+                disabled={disabled || choice.disabled}
+                aria-pressed={selected}
+                title={choice.disabledReason ?? choice.description}
+                onClick={() => setValue(choice.value as Params[Key])}
+                className="h-8 px-3 text-sm"
+              >
+                <ChoiceOptionLabel choice={choice} />
+              </ThemedButton>
+            );
+          })}
+        </span>
+      </FieldFrame>
+    );
+  }
+  return (
+    <FieldFrame
+      label={labelForInput(input)}
+      controlId={controlId}
+      errors={errors}
+      missing={missing}
+    >
+      <Select
+        disabled={disabled}
+        value={typeof value === "string" ? value : undefined}
+        onValueChange={(next: string) => setValue(next as Params[Key])}
+      >
+        <SelectTrigger id={controlId} size="sm" className="w-full bg-white">
+          <span data-slot="select-value">
+            {selectedChoice ? (
+              <ChoiceOptionLabel choice={selectedChoice} />
+            ) : (
+              <span style={{ color: theme.semantic.text.muted }}>
+                Choose...
+              </span>
+            )}
+          </span>
+        </SelectTrigger>
+        <SelectContent
+          style={{
+            ...themeCssVars,
+            fontFamily: theme.typography.fontFamily.body,
+          }}
+        >
+          {choices.map((choice) => (
+            <SelectItem
+              key={choice.value}
+              value={choice.value}
+              textValue={choice.label}
+              disabled={choice.disabled}
+            >
+              <ChoiceOptionLabel choice={choice} />
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <ChoiceDescription choice={selectedChoice} />
+    </FieldFrame>
+  );
+}
+
+function ChoiceListField<
+  Params extends InteractionParamsShape,
+  Key extends keyof Params & string,
+>({
+  input,
+  value,
+  setValue,
+  errors,
+  missing,
+  disabled,
+  domain,
+}: InteractionFieldRenderProps<Params, Key> & {
+  domain: InputDomain;
+}) {
+  const theme = useTheme();
+  const selected = new Set(Array.isArray(value) ? (value as string[]) : []);
+  const min =
+    domain.selection?.mode === "many"
+      ? (domain.selection.min ?? 0)
+      : domain.min;
+  const max =
+    (domain.selection?.mode === "many" ? domain.selection.max : domain.max) ??
+    domain.choices?.length ??
+    Number.POSITIVE_INFINITY;
+  const toggle = (choice: string) => {
+    const next = new Set(selected);
+    if (next.has(choice)) next.delete(choice);
+    else if (next.size < max) next.add(choice);
+    setValue([...next] as Params[Key]);
+  };
+  const meta =
+    min || Number.isFinite(max)
+      ? `Pick ${min ?? 0}${Number.isFinite(max) ? `-${max}` : "+"}`
+      : undefined;
+  return (
+    <FieldFrame
+      label={
+        <span
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            gap: theme.space[2],
+          }}
+        >
+          <span>{labelForInput(input)}</span>
+          {meta ? (
+            <span style={{ color: theme.semantic.text.muted }}>{meta}</span>
+          ) : null}
+        </span>
+      }
+      errors={errors}
+      missing={missing}
+    >
+      <span style={{ display: "flex", flexWrap: "wrap", gap: theme.space[1] }}>
+        {(domain.choices ?? []).map((choice) => {
+          const checked = selected.has(choice.value);
+          return (
+            <ThemedButton
+              key={choice.value}
+              type="button"
+              variant={checked ? "primary" : "secondary"}
+              size="sm"
+              disabled={
+                disabled ||
+                choice.disabled ||
+                (!checked && selected.size >= max)
+              }
+              aria-pressed={checked}
+              title={choice.disabledReason ?? choice.description}
+              onClick={() => toggle(choice.value)}
+              className="h-8 px-3 text-sm"
+            >
+              <ChoiceOptionLabel choice={choice} />
+            </ThemedButton>
+          );
+        })}
+      </span>
+    </FieldFrame>
+  );
+}
+
+function ResourceMapField<
+  Params extends InteractionParamsShape,
+  Key extends keyof Params & string,
+>({
+  input,
+  value,
+  setValue,
+  errors,
+  missing,
+  disabled,
+  domain,
+}: InteractionFieldRenderProps<Params, Key> & {
+  domain: InputDomain;
+}) {
+  const theme = useTheme();
+  const current: Record<string, unknown> = isRecord(value) ? value : {};
+  const update = (
+    resourceId: string,
+    delta: number,
+    min: number,
+    max: number,
+  ) => {
+    const previous = numberOrZero(current[resourceId]);
+    const next = Math.max(min, Math.min(max, previous + delta));
+    setValue({ ...current, [resourceId]: next } as Params[Key]);
+  };
+  return (
+    <FieldFrame label={labelForInput(input)} errors={errors} missing={missing}>
+      <span
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
+          gap: theme.space[2],
+        }}
+      >
+        {(domain.resources ?? []).map((resource) => {
+          const min = resource.min ?? 0;
+          const max = resource.max ?? 0;
+          const amount = numberOrZero(current[resource.resourceId]);
+          return (
+            <span
+              key={resource.resourceId}
+              style={{
+                display: "grid",
+                gridTemplateColumns: "minmax(0, 1fr) auto auto auto",
+                alignItems: "center",
+                gap: theme.space[1],
+                padding: theme.space[2],
+                borderRadius: theme.radius.md,
+                background: theme.semantic.surface.inset,
+              }}
+            >
+              <span
+                style={{
+                  minWidth: 0,
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: theme.space[1],
+                }}
+              >
+                {resource.icon ? (
+                  <span aria-hidden style={{ fontSize: "1.1em" }}>
+                    {resource.icon}
+                  </span>
+                ) : null}
+                {resource.label ?? humanize(input.key)}
+              </span>
+              <StepperButton
+                label={`Decrease ${resource.label ?? resource.resourceId}`}
+                disabled={disabled || amount <= min}
+                onClick={() => update(resource.resourceId, -1, min, max)}
+              >
+                -
+              </StepperButton>
+              <span
+                style={{
+                  minWidth: "2ch",
+                  textAlign: "center",
+                  fontVariantNumeric: "tabular-nums",
+                }}
+              >
+                {amount}
+              </span>
+              <StepperButton
+                label={`Increase ${resource.label ?? resource.resourceId}`}
+                disabled={disabled || amount >= max}
+                onClick={() => update(resource.resourceId, 1, min, max)}
+              >
+                +
+              </StepperButton>
+            </span>
+          );
+        })}
+      </span>
+    </FieldFrame>
+  );
+}
+
+function BoundedNumberField<
+  Params extends InteractionParamsShape,
+  Key extends keyof Params & string,
+>({
+  input,
+  value,
+  setValue,
+  errors,
+  missing,
+  disabled,
+  domain,
+}: InteractionFieldRenderProps<Params, Key> & {
+  domain: InputDomain;
+}) {
+  const theme = useTheme();
+  const min = domain.min ?? 0;
+  const max = domain.max ?? Number.POSITIVE_INFINITY;
+  const step = domain.step ?? 1;
+  const current = typeof value === "number" ? value : min;
+  const controlId = useId();
+  const update = (next: number) =>
+    setValue(Math.max(min, Math.min(max, next)) as Params[Key]);
+  return (
+    <FieldFrame
+      label={labelForInput(input)}
+      controlId={controlId}
+      errors={errors}
+      missing={missing}
+    >
+      <span
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: theme.space[1],
+        }}
+      >
+        <StepperButton
+          label={`Decrease ${input.key}`}
+          disabled={disabled || current <= min}
+          onClick={() => update(current - step)}
+        >
+          -
+        </StepperButton>
+        <Input
+          id={controlId}
+          type="number"
+          min={min}
+          max={Number.isFinite(max) ? max : undefined}
+          step={step}
+          value={current}
+          disabled={disabled}
+          onChange={(event) => update(Number(event.target.value))}
+          className="h-9 w-[8ch] px-2 text-center text-sm md:text-sm"
+        />
+        <StepperButton
+          label={`Increase ${input.key}`}
+          disabled={disabled || current >= max}
+          onClick={() => update(current + step)}
+        >
+          +
+        </StepperButton>
+      </span>
+    </FieldFrame>
+  );
+}
+
+function TargetSummaryField<
+  Params extends InteractionParamsShape,
+  Key extends keyof Params & string,
+>({
+  input,
+  value,
+  errors,
+  missing,
+  domain,
+}: InteractionFieldRenderProps<Params, Key> & {
+  domain: InputDomain;
+}) {
+  return (
+    <FieldFrame label={labelForInput(input)} errors={errors} missing={missing}>
+      <span>
+        {Array.isArray(value)
+          ? value.length > 0
+            ? `${value.length} selected: ${value.join(", ")}`
+            : `Select ${targetSelectionLabel(domain)}.`
+          : typeof value === "string"
+            ? value
+            : `Select a ${domain.targetKind ?? "target"} on the board.`}
+      </span>
+    </FieldFrame>
+  );
+}
+
+function targetSelectionLabel(domain: InputDomain): string {
+  const target = domain.targetKind ?? "target";
+  const selection = domain.selection;
+  if (selection?.mode !== "many") return `a ${target}`;
+  const min = selection.min ?? 0;
+  if (selection.max !== undefined && min === selection.max) {
+    return `${min} ${target}${min === 1 ? "" : "s"}`;
+  }
+  return `${min}${selection.max ? `-${selection.max}` : "+"} ${target}s`;
+}
+
+function StepperButton({
+  label,
+  disabled,
+  onClick,
+  children,
+}: {
+  label: string;
+  disabled: boolean;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <ThemedButton
+      type="button"
+      variant="secondary"
+      size="sm"
+      aria-label={label}
+      disabled={disabled}
+      onClick={onClick}
+      className="h-8 w-8 text-sm"
+    >
+      {children}
+    </ThemedButton>
+  );
+}
+
+function labelForInput(input: InteractionInputDescriptor): string {
+  if (input.domain.type === "choice") {
+    const exact = input.domain.choices?.find(
+      (choice) => choice.value === input.defaultValue,
+    );
+    if (exact?.label && input.key === exact.value) return exact.label;
+  }
+  return humanize(input.key);
+}
+
+function humanize(key: string): string {
+  return key
+    .replace(/Id$/, "")
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[-_]+/g, " ")
+    .replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function numberOrZero(value: unknown): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}