Object editor

"use client";

import { ObjectEditor } from "@publictheta/ui/components/object-editor/object-editor.tsx";
import type { ObjectEditorHandle } from "@publictheta/ui/components/object-editor/object-editor.tsx";
import { schema, validate } from "@publictheta/ui/primitives/schema.ts";
import { useRef, useState } from "react";

const product = schema({
  kind: "object",
  fields: [
    { key: "name", schema: { kind: "text", label: "Name", maxLength: 30 } },
    {
      key: "price",
      schema: {
        kind: "number",
        label: "Price",
        minimum: 0,
        precision: 0,
        format: "currency",
        currency: "USD",
      },
    },
    {
      key: "status",
      schema: {
        kind: "choice",
        label: "Status",
        options: [
          { value: "draft", label: "Draft" },
          { value: "review", label: "In review" },
          { value: "live", label: "Live" },
        ],
      },
    },
    { key: "released", schema: { kind: "date", label: "Released", optional: true } },
    { key: "featured", schema: { kind: "boolean", label: "Featured" } },
    {
      key: "size",
      schema: {
        kind: "object",
        label: "Size",
        fields: [
          {
            key: "width",
            schema: {
              kind: "number",
              label: "Width",
              minimum: 0,
              precision: 1,
              dimension: "length",
              unit: "mm",
            },
          },
          {
            key: "height",
            schema: {
              kind: "number",
              label: "Height",
              minimum: 0,
              precision: 1,
              dimension: "length",
              unit: "mm",
            },
          },
        ],
      },
    },
    {
      key: "tags",
      schema: {
        kind: "list",
        label: "Tag",
        description: "Lowercase letters, digits and hyphens.",
        maxItems: 3,
        item: { kind: "text", pattern: "[a-z0-9-]+" },
      },
    },
  ],
});

export default function ProductEditor() {
  const [value, setValue] = useState<unknown>({
    name: "Teapot",
    price: 48,
    status: "draft",
    released: null,
    featured: false,
    size: { width: 180, height: 120 },
    tags: ["kitchen"],
  });
  const [attempted, setAttempted] = useState(false);
  const editor = useRef<ObjectEditorHandle>(null);
  const problems = validate(product, value).length;

  return (
    <div className="grid w-full gap-6 lg:grid-cols-2">
      <form
        className="flex flex-col gap-4"
        onSubmit={(event) => {
          event.preventDefault();
          setAttempted(true);
          editor.current?.focusFirstIssue();
        }}
      >
        <ObjectEditor
          ref={editor}
          schema={product}
          locale="en-US"
          value={value}
          onValueChange={setValue}
          showAllIssues={attempted}
        />
        <div className="flex items-center gap-3">
          <button
            type="submit"
            className="h-8 rounded-md bg-selected px-3 text-sm text-on-selected outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 pointer-coarse:h-11"
          >
            Save
          </button>
          <p aria-live="polite" className="text-sm text-fg-muted">
            {!attempted
              ? ""
              : problems === 0
                ? "Saved."
                : `${problems} ${problems === 1 ? "problem" : "problems"} to fix.`}
          </p>
        </div>
      </form>
      <pre className="self-start overflow-x-auto rounded-lg bg-surface p-3 font-mono text-[12px] leading-relaxed text-fg ring-1 ring-border-muted">
        {JSON.stringify(value, null, 2)}
      </pre>
    </div>
  );
}

"use client";

import { ObjectEditor } from "@publictheta/ui/components/object-editor/object-editor.tsx";
import { Button } from "@publictheta/ui/components/button/button.tsx";
import { deriveNested, deriveRecord, derivationsOf } from "@publictheta/ui/primitives/derived.ts";
import type { Lock } from "@publictheta/ui/primitives/derived.ts";
import { createHistory } from "@publictheta/ui/primitives/history.ts";
import { schema } from "@publictheta/ui/primitives/schema.ts";
import type { ObjectSchema } from "@publictheta/ui/primitives/schema.ts";
import { useRef, useState } from "react";

const money = { kind: "number", format: "currency", currency: "USD", minimum: 0 } as const;

const order: ObjectSchema = schema({
  kind: "object",
  fields: [
    { key: "customer", schema: { kind: "text", label: "Customer" } },
    {
      key: "lines",
      schema: {
        kind: "list",
        label: "Line",
        item: {
          kind: "object",
          fields: [
            { key: "item", schema: { kind: "text", label: "Item" } },
            { key: "price", schema: { ...money, label: "Price" } },
            { key: "quantity", schema: { kind: "number", label: "Quantity", minimum: 0, precision: 0 } },
            { key: "amount", schema: { ...money, label: "Amount", formula: "price * quantity" } },
          ],
        },
      },
    },
    { key: "subtotal", schema: { ...money, label: "Subtotal", formula: "sum(lines.amount)" } },
    {
      key: "discount",
      schema: {
        kind: "number",
        label: "Discount",
        format: "percent",
        optional: true,
        minimum: 0,
        maximum: 1,
      },
    },
    {
      key: "total",
      schema: { ...money, label: "Total", formula: "round(subtotal * (1 - coalesce(discount, 0)), 2)" },
    },
    { key: "due", schema: { kind: "date", label: "Due", formula: "today() + 30" } },
  ],
});

/** The order as it is first shown, with every computed value made right. */
function first(): Record<string, unknown> {
  const entered = {
    customer: "Tea House",
    lines: [
      { item: "Teapot", price: 48, quantity: 2 },
      { item: "Cup", price: 12, quantity: 6 },
    ],
    discount: 0.1,
  };
  return deriveRecord(derivationsOf(order).plan, deriveNested(order, undefined, entered));
}

interface State {
  readonly value: unknown;
  readonly locks: ReadonlyMap<string, Lock>;
}

/** What one action did, to take back and to do again: a lock and the change it came with are one. */
interface Step {
  readonly before: State;
  readonly after: State;
}

const formatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });

export default function OrderEditor() {
  const [state, setState] = useState<State>(() => ({ value: first(), locks: new Map() }));
  const [history] = useState(() => createHistory<Step>());
  // Whether a step is being written: what arrives within the same event belongs to it.
  const writing = useRef(false);
  const [, setSteps] = useState(0);

  function record(next: State): void {
    const step = { before: state, after: next };
    if (writing.current) history.merge(step, (last) => ({ before: last.before, after: next }));
    else history.push(step);
    writing.current = true;
    queueMicrotask(() => {
      writing.current = false;
    });
    setSteps((count) => count + 1);
  }

  // Each callback sees the state the last one left, within one event as across them.
  const latest = useRef(state);
  function apply(next: State): void {
    record(next);
    latest.current = next;
    setState(next);
  }

  function travel(direction: "undo" | "redo"): void {
    const step = direction === "undo" ? history.undo() : history.redo();
    if (step === undefined) return;
    const next = direction === "undo" ? step.before : step.after;
    latest.current = next;
    setState(next);
    setSteps((count) => count + 1);
  }

  const total = (state.value as { total?: unknown }).total;
  const locked = [...state.locks].map(([key, lock]) => `${key} ${lock}`).join(", ");

  return (
    <div className="grid w-full gap-6 @container">
      <div className="flex min-w-0 flex-col gap-4">
        <ObjectEditor
          aria-label="Order"
          schema={order}
          locale="en-US"
          value={state.value}
          locks={state.locks}
          onLocksChange={(locks) => apply({ ...latest.current, locks })}
          onValueChange={(value) => apply({ ...latest.current, value })}
        />
        <div className="flex flex-wrap items-center gap-2">
          <Button focusableWhenDisabled disabled={!history.canUndo()} onClick={() => travel("undo")}>
            Undo
          </Button>
          <Button focusableWhenDisabled disabled={!history.canRedo()} onClick={() => travel("redo")}>
            Redo
          </Button>
        </div>
      </div>
      <dl className="grid content-start gap-x-4 gap-y-1 self-start rounded-lg bg-surface p-3 text-sm ring-1 ring-border-muted [grid-template-columns:auto_minmax(0,1fr)]">
        <dt className="text-fg-muted">Total</dt>
        <dd className="text-fg-strong tabular-nums">
          {typeof total === "number" ? formatter.format(total) : "—"}
        </dd>
        <dt className="text-fg-muted">Locks</dt>
        <dd className="text-fg-strong">{locked === "" ? "None" : locked}</dd>
        <dt className="col-span-2 mt-2 text-fg-muted">The record</dt>
        <dd className="col-span-2">
          <pre className="overflow-x-auto font-mono text-[12px] leading-relaxed text-fg">
            {JSON.stringify(state.value, null, 2)}
          </pre>
        </dd>
      </dl>
    </div>
  );
}

"use client";

import { DataGrid } from "@publictheta/ui/components/data-grid/data-grid.tsx";
import type { CellChange, Run } from "@publictheta/ui/components/data-grid/data-grid.tsx";
import { ObjectEditor } from "@publictheta/ui/components/object-editor/object-editor.tsx";
import type { ObjectEditorHandle } from "@publictheta/ui/components/object-editor/object-editor.tsx";
import { Select, SelectItem } from "@publictheta/ui/components/select/select.tsx";
import { Button } from "@publictheta/ui/components/button/button.tsx";
import {
  checkSchema,
  fieldSchema,
  fromSchema,
  schemaSchema,
  toSchema,
} from "@publictheta/ui/primitives/schema-schema.ts";
import {
  blank,
  conform,
  conforms,
  schema,
  tagSchema,
  validate,
  withValueAt,
  withVariant,
} from "@publictheta/ui/primitives/schema.ts";
import type { Issue, ObjectSchema } from "@publictheta/ui/primitives/schema.ts";
import {
  conformRecords,
  deriveNested,
  deriveRecord,
  derivationsOf,
  lockKey,
} from "@publictheta/ui/primitives/derived.ts";
import type { Lock } from "@publictheta/ui/primitives/derived.ts";
import { useEffect, useId, useMemo, useRef, useState } from "react";
import type { ReactNode } from "react";

const product = schema({
  kind: "object",
  fields: [
    { key: "name", schema: { kind: "text", label: "Name", maxLength: 40 } },
    {
      key: "price",
      schema: { kind: "number", label: "Price", minimum: 0, format: "currency", currency: "USD" },
    },
    {
      key: "taxed",
      schema: {
        kind: "number",
        label: "With tax",
        format: "currency",
        currency: "USD",
        formula: "round(price * 1.1, 2)",
      },
    },
    {
      key: "status",
      schema: {
        kind: "choice",
        label: "Status",
        default: "draft",
        options: [
          { value: "draft", label: "Draft" },
          { value: "review", label: "In review" },
          { value: "live", label: "Live" },
        ],
      },
    },
    { key: "released", schema: { kind: "date", label: "Released", optional: true } },
    {
      key: "tags",
      schema: {
        kind: "list",
        label: "Tag",
        description: "Lowercase letters, digits and hyphens.",
        maxItems: 3,
        item: { kind: "text", pattern: "[a-z0-9-]+" },
      },
    },
    {
      key: "dimensions",
      schema: {
        kind: "object",
        label: "Dimensions",
        fields: [
          {
            key: "width",
            schema: { kind: "number", label: "Width", minimum: 0, dimension: "length", unit: "mm" },
          },
          {
            key: "height",
            schema: { kind: "number", label: "Height", minimum: 0, dimension: "length", unit: "mm" },
          },
        ],
      },
    },
  ],
});

type Row = Readonly<Record<string, unknown>>;

const PRODUCTS: readonly Row[] = [
  {
    name: "Teapot",
    price: 48,
    status: "live",
    released: "2026-03-02",
    tags: ["kitchen", "stoneware"],
    dimensions: { width: 180, height: 120 },
  },
  {
    name: "Tea caddy",
    price: 22.5,
    status: "review",
    released: null,
    tags: ["kitchen"],
    dimensions: { width: 80, height: 110 },
  },
  {
    name: "Tray",
    price: 36,
    status: "draft",
    released: null,
    tags: [],
    dimensions: { width: 320, height: 20 },
  },
];

/** One field in a record's description, whole or not: its `key`, and its `schema`'s description. */
type Field = Readonly<Record<string, unknown>>;

/** The description of the record's schema as it is being edited, whole or not. */
interface Description {
  readonly kind: "object";
  readonly fields: readonly Field[];
  readonly [setting: string]: unknown;
}

/** A field as the table of fields shows it: the settings worth a column of their own. */
const fieldRow = schema({
  kind: "object",
  fields: [
    { key: "key", schema: { kind: "text", label: "Key" } },
    // The kinds a schema can be, as the schema of schemas lists them.
    { key: "kind", schema: tagSchema(schemaSchema) },
    { key: "label", schema: { kind: "text", label: "Label", optional: true } },
    { key: "optional", schema: { kind: "boolean", label: "Optional" } },
    { key: "formula", schema: { kind: "text", label: "Formula", optional: true } },
  ],
});

const isRecord = (value: unknown): value is Record<string, unknown> =>
  typeof value === "object" && value !== null && !Array.isArray(value);

// The same row for the same field, so the table sees a change only where there was one.
const rows = new WeakMap<Field, Row>();

function rowOf(field: Field): Row {
  let row = rows.get(field);
  if (row === undefined) {
    const of = isRecord(field.schema) ? field.schema : {};
    row = {
      key: field.key,
      kind: of.kind ?? null,
      label: of.label ?? null,
      optional: of.optional === true,
      formula: of.formula ?? null,
    };
    rows.set(field, row);
  }
  return row;
}

/** A field with one cell of its row changed. Another kind keeps the settings the two kinds share. */
function withCell(field: Field, key: string, value: unknown): Field {
  if (key === "key") return { ...field, key: value };
  if (key === "kind") {
    return {
      ...field,
      schema: withVariant(schemaSchema, field.schema, typeof value === "string" ? value : null),
    };
  }
  if (!isRecord(field.schema)) return field;
  return { ...field, schema: { ...field.schema, [key]: key === "optional" ? value === true : value } };
}

/** The field a new row of the table stands for. */
function fieldOf(row: Row): Field {
  let field: Field = blank(fieldSchema);
  for (const key of ["kind", "key", "label", "optional", "formula"]) {
    if (row[key] !== undefined && row[key] !== null) field = withCell(field, key, row[key]);
  }
  return field;
}

/**
 * What is wrong with a description: what the schema of schemas says of it, and
 * once that is nothing, what it cannot say — a minimum above its maximum, a key
 * used twice.
 */
function problemsOf(description: Description): Issue[] {
  if (!conforms(schemaSchema, description)) return validate(schemaSchema, description);
  return checkSchema(toSchema(description));
}

interface State {
  /** The schema as it is being edited, whole or not. */
  readonly description: Description;
  /** The last description with nothing wrong, as a schema: what the form and the records are built from. */
  readonly schema: ObjectSchema;
  readonly records: readonly Row[];
  /** The record in the form. */
  readonly draft: unknown;
  /** The locks on the form's fields. */
  readonly locks: ReadonlyMap<string, Lock>;
  /** The locks on the records' cells, each under the record's place and the field's key. */
  readonly recordLocks: ReadonlyMap<string, Lock>;
  /** Why the description as it stands is not the schema, though nothing is wrong with it. */
  readonly refused: string | null;
}

/** A record with every value it computes made right, keeping what is frozen. */
function computed(definition: ObjectSchema, record: unknown, frozen?: (key: string) => boolean): Row {
  const fitted = isRecord(record) ? record : {};
  const whole = deriveNested(definition, undefined, fitted);
  return deriveRecord(derivationsOf(definition).plan, whole, frozen === undefined ? {} : { frozen });
}

/** The same record when it already computes as it should, so the table sees a change only where there was one. */
function recomputed(definition: ObjectSchema, record: Row, frozen?: (key: string) => boolean): Row {
  const next = computed(definition, record, frozen);
  return Object.keys(next).every((key) => Object.is(next[key], record[key])) ? record : next;
}

/**
 * The held values a schema change would take or move — in the form's record, and
 * in the records — by name, with the values; `null` when there are none.
 */
function heldTaken(state: State, next: ObjectSchema, draft: Row, records: readonly Row[]): string | null {
  const named: string[] = [];
  const formLock = (key: string) => state.locks.get(key);
  const taken = conformRecords(next, state.schema, [state.draft as Row], (_row, key) =>
    formLock(key),
  ).blocked.map((cell) => cell.key);
  // A formula changed under a held value would move it as surely.
  for (const key of state.locks.keys()) {
    if (formLock(key) === "held" && !taken.includes(key) && Object.hasOwn(draft, key)) {
      if (!Object.is(draft[key], (state.draft as Row)[key])) taken.push(key);
    }
  }
  for (const key of taken)
    named.push(`${key} (${JSON.stringify((state.draft as Row)[key] ?? null)}) in the form`);
  const recordLock = (row: number, key: string) => state.recordLocks.get(lockKey(String(row), key));
  const blocked = conformRecords(next, state.schema, state.records, recordLock).blocked;
  const moved = new Set(blocked.map((cell) => `${cell.row} ${cell.key}`));
  for (const [row, record] of state.records.entries()) {
    for (const key of Object.keys(record)) {
      const now = records[row];
      if (recordLock(row, key) === "held" && now !== undefined && Object.hasOwn(now, key)) {
        if (!Object.is(now[key], record[key])) moved.add(`${row} ${key}`);
      }
    }
  }
  for (const at of moved) {
    const [row = "0", key = ""] = at.split(" ");
    const value = state.records[Number(row)]?.[key] ?? null;
    named.push(`${key} (${JSON.stringify(value)}) in record ${Number(row) + 1}`);
  }
  if (named.length === 0) return null;
  return `Not applied: it would change ${named.length === 1 ? "a held value" : "held values"} — ${named.join(", ")}. Unlock ${named.length === 1 ? "it" : "them"} first.`;
}

/** The records' locks kept under the names their fields now have. */
function renamedRecordLocks(
  locks: ReadonlyMap<string, Lock>,
  before: ObjectSchema,
  after: ObjectSchema,
): ReadonlyMap<string, Lock> {
  if (locks.size === 0) return locks;
  const byRecord = new Map<string, Map<string, Lock>>();
  for (const [key, lock] of locks) {
    const [row = "", field = ""] = key.split("\u001f");
    const fields = byRecord.get(row) ?? new Map<string, Lock>();
    fields.set(field, lock);
    byRecord.set(row, fields);
  }
  const next = new Map<string, Lock>();
  for (const [row, fields] of byRecord) {
    for (const [field, lock] of renamedLocks(fields, before, after)) next.set(lockKey(row, field), lock);
  }
  return next;
}

/** Locks kept under the names their fields now have. */
function renamedLocks(
  locks: ReadonlyMap<string, Lock>,
  before: ObjectSchema,
  after: ObjectSchema,
): ReadonlyMap<string, Lock> {
  if (locks.size === 0) return locks;
  const next = new Map<string, Lock>();
  const now = new Set(after.fields.map((field) => field.key));
  const was = new Set(before.fields.map((field) => field.key));
  for (const [key, lock] of locks) {
    if (now.has(key)) next.set(key, lock);
    else {
      // Renamed in place: the field now where it stood has a name it did not have before.
      const at = before.fields.findIndex((field) => field.key === key);
      const there = after.fields[at]?.key;
      if (there !== undefined && !was.has(there)) next.set(there, lock);
    }
  }
  return next;
}

/**
 * The state after an edit of the description. A whole description becomes the
 * schema, and every record is made to fit it: what still fits is kept, a
 * renamed field keeps its value, the rest starts blank, and what is computed
 * is computed. A change that would take a held value from the form is not made.
 */
function described(state: State, description: Description): State {
  if (!conforms(schemaSchema, description) || problemsOf(description).length > 0) {
    return { ...state, description, refused: null };
  }
  const next = toSchema(description) as ObjectSchema;
  const locks = renamedLocks(state.locks, state.schema, next);
  const draft = computed(
    next,
    conform(next, state.draft, state.schema),
    (key) => locks.get(key) === "frozen",
  );
  const recordLocks = renamedRecordLocks(state.recordLocks, state.schema, next);
  // What each record computes is computed again, but for what is frozen in it.
  const records = state.records.map((record, row) =>
    recomputed(
      next,
      conform(next, record, state.schema),
      (key) => recordLocks.get(lockKey(String(row), key)) === "frozen",
    ),
  );
  const refused = heldTaken(state, next, draft, records);
  if (refused !== null) return { ...state, description, refused };
  return {
    description,
    schema: next,
    records: records.every((record, index) => record === state.records[index]) ? state.records : records,
    draft,
    locks,
    recordLocks,
    refused: null,
  };
}

function Section({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="flex min-w-0 flex-col gap-3">
      <h4 className="text-sm font-semibold text-fg-strong">{title}</h4>
      {children}
    </section>
  );
}

export default function SchemaEditor() {
  const [state, setState] = useState<State>(() => ({
    description: fromSchema(product) as Description & { readonly kind: "object" },
    schema: product,
    records: PRODUCTS.map((row) => computed(product, row)),
    draft: computed(product, blank(product)),
    locks: new Map(),
    recordLocks: new Map(),
    refused: null,
  }));
  const { description, records, draft } = state;
  const { fields } = description;
  const change = (next: Description) => setState((current) => described(current, next));
  const setFields = (next: readonly Field[]) => change({ ...description, fields: next });

  // Which field the inspector shows.
  const [picked, setPicked] = useState(0);
  const at = Math.min(picked, fields.length - 1);
  const field = fields[at];
  const fieldLabelId = useId();
  const name = (index: number) => {
    const key = fields[index]?.key;
    return typeof key === "string" && key !== "" ? key : `Field ${index + 1}`;
  };
  function move(by: 1 | -1) {
    const to = at + by;
    if (field === undefined || to < 0 || to >= fields.length) return;
    setFields(fields.toSpliced(at, 1).toSpliced(to, 0, field));
    setPicked(to);
  }

  const problems = useMemo(() => problemsOf(description), [description]);
  // Those of the field in the inspector, as paths within it.
  const fieldProblems = useMemo(
    () =>
      problems
        .filter((issue) => issue.path[0] === "fields" && issue.path[1] === at)
        .map((issue) => ({ ...issue, path: issue.path.slice(2) })),
    [problems, at],
  );
  // Those the table has a cell for, each by its field's place and the column it is in.
  const cellProblems = useMemo(
    () =>
      problems.flatMap((issue): Issue[] => {
        const [list, index, part, setting] = issue.path;
        if (list !== "fields" || typeof index !== "number") return [];
        const column = part === "schema" ? setting : part;
        return typeof column === "string" ? [{ ...issue, path: [index, column] }] : [];
      }),
    [problems],
  );
  const inspector = useRef<ObjectEditorHandle>(null);
  const [shown, setShown] = useState(false);
  // How many times the first problem has been asked for: each time, focus goes to it.
  const [sought, setSought] = useState(0);
  useEffect(() => {
    if (sought > 0) inspector.current?.focusFirstIssue();
  }, [sought]);
  const fieldRows = useMemo(() => fields.map(rowOf), [fields]);

  const form = useRef<ObjectEditorHandle>(null);
  const [attempted, setAttempted] = useState(false);
  const formatter = new Intl.NumberFormat("en-US");

  return (
    <div className="@container w-full">
      <div className="grid gap-x-6 gap-y-10 @2xl:grid-cols-2">
        <div className="flex min-w-0 flex-col gap-6">
          <Section title="Fields">
            <DataGrid
              aria-label="Fields"
              schema={fieldRow}
              locale="en-US"
              rows={fieldRows}
              onCellsChange={(changes: readonly CellChange[]) => {
                const next = fields.slice();
                for (const { row, key, value } of changes) {
                  if (next[row] !== undefined) next[row] = withCell(next[row], key, value);
                }
                setFields(next);
              }}
              onRowsInsert={(index, added) => {
                setFields(fields.toSpliced(index, 0, ...added.map(fieldOf)));
                setPicked(index);
              }}
              onRowsRemove={(runs: ReadonlyArray<Run<Row>>) => {
                const gone = new Set(runs.flatMap((run) => run.rows.map((_, index) => run.at + index)));
                setFields(fields.filter((_, index) => !gone.has(index)));
              }}
              issues={cellProblems}
              // The inspector shows the field whose row the active cell is in.
              onActiveCellChange={(cell) => {
                if (cell !== null && cell.row < fields.length) setPicked(cell.row);
              }}
              columnWidth={116}
              style={{ height: 264 }}
            />
            <p aria-live="polite" className="flex min-h-8 flex-wrap items-center gap-x-3 gap-y-1 text-sm">
              {problems.length === 0 && state.refused !== null ? (
                <span className="text-danger">{state.refused}</span>
              ) : problems.length === 0 ? (
                <span className="text-fg-muted">The form and the records follow every change.</span>
              ) : (
                <>
                  <span className="text-danger">
                    {formatter.format(problems.length)} {problems.length === 1 ? "problem" : "problems"}: the
                    form and the records keep the last schema that had none.
                  </span>
                  <Button
                    onClick={() => {
                      const first = problems.find((issue) => issue.path[0] === "fields");
                      if (typeof first?.path[1] === "number") setPicked(first.path[1]);
                      setShown(true);
                      setSought(sought + 1);
                    }}
                  >
                    Show the first
                  </Button>
                </>
              )}
            </p>
          </Section>

          <Section title="Field">
            {field === undefined ? (
              <p className="text-sm text-fg-muted">Type a key into the table above to add a field.</p>
            ) : (
              <>
                <div className="flex flex-wrap items-center gap-2">
                  <span id={fieldLabelId} className="sr-only">
                    Field
                  </span>
                  <Select
                    aria-labelledby={fieldLabelId}
                    className="min-w-0 flex-1"
                    value={String(at)}
                    onValueChange={(next) => setPicked(Number(next))}
                  >
                    {fields.map((_, index) => (
                      // Fields have no identity but their place: a key may be missing, or used twice.
                      // oxlint-disable-next-line react/no-array-index-key
                      <SelectItem key={index} value={String(index)}>
                        {name(index)}
                      </SelectItem>
                    ))}
                  </Select>
                  <Button disabled={at === 0} onClick={() => move(-1)}>
                    Move up
                  </Button>
                  <Button disabled={at === fields.length - 1} onClick={() => move(1)}>
                    Move down
                  </Button>
                </div>
                <ObjectEditor
                  ref={inspector}
                  aria-label={name(at)}
                  schema={fieldSchema}
                  locale="en-US"
                  value={field}
                  onValueChange={(next) => change(withValueAt(description, ["fields", at], next))}
                  issues={fieldProblems}
                  showAllIssues={shown}
                />
              </>
            )}
          </Section>
        </div>

        <div className="flex min-w-0 flex-col gap-6">
          <Section title="A record">
            <form
              className="flex flex-col gap-4"
              onSubmit={(event) => {
                event.preventDefault();
                if (validate(state.schema, draft).length > 0) {
                  setAttempted(true);
                  form.current?.focusFirstIssue();
                  return;
                }
                setAttempted(false);
                // The record goes into the table with its locks.
                const recordLocks = new Map(state.recordLocks);
                for (const [key, lock] of state.locks)
                  recordLocks.set(lockKey(String(records.length), key), lock);
                setState({
                  ...state,
                  records: [...records, draft as Row],
                  draft: computed(state.schema, blank(state.schema)),
                  locks: new Map(),
                  recordLocks,
                });
              }}
            >
              <ObjectEditor
                ref={form}
                schema={state.schema}
                locale="en-US"
                value={draft}
                onValueChange={(next) => setState((current) => ({ ...current, draft: next }))}
                locks={state.locks}
                onLocksChange={(locks) => setState((current) => ({ ...current, locks }))}
                showAllIssues={attempted}
              />
              <Button type="submit" className="self-start">
                Add to the records
              </Button>
            </form>
          </Section>

          <Section title="Records">
            <DataGrid
              aria-label="Records"
              schema={state.schema}
              locale="en-US"
              rows={records}
              // What a row computes comes with what was typed into it, from the table itself.
              onRowsChange={(next) => setState((current) => ({ ...current, records: next }))}
              locks={state.recordLocks}
              onLocksChange={(recordLocks) => setState((current) => ({ ...current, recordLocks }))}
              columnWidth={132}
              style={{ height: 220 }}
            />
            <p className="text-sm text-fg-muted">
              {formatter.format(records.length)} {records.length === 1 ? "record" : "records"}. A list or a
              nested record has no column: it is edited in the form. With tax follows the price; type over it
              to freeze it, or hold a cell from the menu, and a change to the schema that would move it is
              refused.
            </p>
          </Section>
        </div>
      </div>
    </div>
  );
}