@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/workbench/settings/StructuredDataForm.tsx

@@ -1,619 +1,619 @@
-export * from './structuredDataSchema';
-
-import { useId, useMemo, useState, type FormEvent, type ReactNode } from 'react';
-import { Button } from '../../primitives/button';
-import { Checkbox } from '../../primitives/checkbox';
-import { EmptyState } from '../../primitives/empty-state';
-import { WorkbenchStructuredDataTableView } from './StructuredDataTableView';
-import { Field } from '../../primitives/field';
-import { IconButton } from '../../primitives/icon-button';
-import { Select } from '../../primitives/select';
-import { TextArea } from '../../primitives/text-area';
-import { TextInput } from '../../primitives/text-input';
-import { SegmentedControl } from '../../primitives/workbench-editor';
-import { WorkbenchColorInput } from '../../layout/WorkbenchPropertyPanel';
-import { cx } from '../../utils/cx';
-import { WorkbenchSectionedPanel } from './SectionedPanel';
-import {
-  coerceWorkbenchStructuredDataFormFieldValue,
-  coerceWorkbenchStructuredDataSchemaFieldValue,
-  booleanWorkbenchStructuredDataSchemaFieldValue,
-  buildWorkbenchStructuredDataSchemaSelectOptions,
-  formatWorkbenchStructuredDataSchemaLabel,
-  getWorkbenchStructuredDataFormErrors,
-  getWorkbenchStructuredDataSchemaFieldControl,
-  getWorkbenchStructuredDataValue,
-  isWorkbenchStructuredDataFormSubmittable,
-  normalizeWorkbenchStructuredDataFormData,
-  setWorkbenchStructuredDataValue,
-  stringifyWorkbenchStructuredDataSchemaFieldValue,
-  type WorkbenchStructuredDataFieldValue,
-  type WorkbenchStructuredDataFormErrors,
-  type WorkbenchStructuredDataFormField,
-  type WorkbenchStructuredDataFormFieldChangeContext,
-  type WorkbenchStructuredDataFormProps,
-  type WorkbenchStructuredDataFormSection,
-  type WorkbenchStructuredDataRecord,
-  type WorkbenchStructuredDataSchemaFieldInputProps,
-  type WorkbenchStructuredDataTextArrayInputProps,
-} from './structuredDataSchema';
-
-export function WorkbenchStructuredDataForm({
-  ariaLabel,
-  cancelLabel = 'Cancel',
-  className,
-  data,
-  defaultData = {},
-  disabled = false,
-  emptyLabel = 'No structured data sections',
-  errors,
-  onCancel,
-  onDataChange,
-  onFieldChange,
-  onSubmit,
-  readOnly = false,
-  sections,
-  showActions = true,
-  submitLabel = 'Save',
-  ...props
-}: WorkbenchStructuredDataFormProps) {
-  const generatedId = useId().replace(/:/g, '');
-  const [uncontrolledData, setUncontrolledData] = useState(() =>
-    normalizeWorkbenchStructuredDataFormData(sections, defaultData),
-  );
-  const resolvedData = useMemo(
-    () => normalizeWorkbenchStructuredDataFormData(sections, data ?? uncontrolledData),
-    [data, sections, uncontrolledData],
-  );
-  const resolvedErrors = useMemo(
-    () => ({
-      ...getWorkbenchStructuredDataFormErrors(sections, resolvedData),
-      ...(errors ?? {}),
-    }),
-    [errors, resolvedData, sections],
-  );
-  const submittable = isWorkbenchStructuredDataFormSubmittable({
-    disabled,
-    errors: resolvedErrors,
-    readOnly,
-  });
-
-  const updateFieldValue = (
-    field: WorkbenchStructuredDataFormField,
-    value: WorkbenchStructuredDataFieldValue,
-  ) => {
-    const coercedValue = coerceWorkbenchStructuredDataFormFieldValue(field, value);
-    const nextData = setWorkbenchStructuredDataValue(resolvedData, field.path, coercedValue);
-    const context: WorkbenchStructuredDataFormFieldChangeContext = {
-      data: nextData,
-      field,
-      fieldId: field.id,
-      path: field.path,
-      value: coercedValue,
-    };
-
-    if (data === undefined) {
-      setUncontrolledData(nextData);
-    }
-
-    onFieldChange?.(context);
-    onDataChange?.(nextData, context);
-  };
-
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!submittable) return;
-
-    onSubmit?.(resolvedData, { data: resolvedData, event });
-  };
-
-  return (
-    <form
-      className={cx('ui-workbench-structured-data-form', className)}
-      data-readonly={readOnly ? 'true' : undefined}
-      onSubmit={handleSubmit}
-      {...props}
-    >
-      {sections.length === 0 ? (
-        <EmptyState compact icon="codicon-settings-gear">
-          {emptyLabel}
-        </EmptyState>
-      ) : (
-        <WorkbenchSectionedPanel
-          ariaLabel={ariaLabel}
-          className="ui-workbench-structured-data-form__panel"
-          items={sections.map((section) => ({
-            anchorId: section.id,
-            count: section.count ?? section.fields?.length,
-            title: section.title,
-            render: () => (
-              <StructuredDataSection
-                key={section.id}
-                data={resolvedData}
-                disabled={disabled}
-                errors={resolvedErrors}
-                generatedId={generatedId}
-                readOnly={readOnly}
-                section={section}
-                onFieldChange={updateFieldValue}
-              />
-            ),
-          }))}
-          readOnly={readOnly}
-        />
-      )}
-      {showActions ? (
-        <div className="ui-workbench-structured-data-form__actions">
-          <Button disabled={disabled} onClick={() => onCancel?.({ data: resolvedData })}>
-            {cancelLabel}
-          </Button>
-          <Button disabled={!submittable} type="submit" variant="primary">
-            {submitLabel}
-          </Button>
-        </div>
-      ) : null}
-    </form>
-  );
-}
-
-function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
-  return error !== undefined && error !== null && error !== false && error !== '';
-}
-
-function StructuredDataSection({
-  data,
-  disabled,
-  errors,
-  generatedId,
-  onFieldChange,
-  readOnly,
-  section,
-}: {
-  data: WorkbenchStructuredDataRecord;
-  disabled: boolean;
-  errors: WorkbenchStructuredDataFormErrors;
-  generatedId: string;
-  onFieldChange: (
-    field: WorkbenchStructuredDataFormField,
-    value: WorkbenchStructuredDataFieldValue,
-  ) => void;
-  readOnly: boolean;
-  section: WorkbenchStructuredDataFormSection;
-}) {
-  return (
-    <section
-      id={section.id}
-      className="ui-workbench-structured-data-form__section"
-      aria-labelledby={`${generatedId}-${section.id}-title`}
-    >
-      <h2 id={`${generatedId}-${section.id}-title`}>{section.title}</h2>
-      {section.description ? <p>{section.description}</p> : null}
-      {section.fields?.length ? (
-        <div className="ui-workbench-structured-data-form__fields">
-          {section.fields.map((field) => {
-            const fieldInputId = `${generatedId}-${field.id}`;
-            const error = errors[field.id];
-            const errorId = isRenderableWorkbenchStructuredDataFormError(error)
-              ? `${fieldInputId}-error`
-              : undefined;
-            const value = coerceWorkbenchStructuredDataFormFieldValue(
-              field,
-              getWorkbenchStructuredDataValue(data, field.path),
-            );
-
-            return (
-              <div
-                key={field.id}
-                className="ui-workbench-structured-data-form__field"
-                data-field-id={field.id}
-                data-field-type={field.type}
-              >
-                {renderStructuredDataField({
-                  disabled: disabled || Boolean(field.disabled),
-                  errorId,
-                  field,
-                  id: fieldInputId,
-                  readOnly: readOnly || Boolean(field.readOnly),
-                  value,
-                  onChange: (nextValue) => onFieldChange(field, nextValue),
-                })}
-                {isRenderableWorkbenchStructuredDataFormError(error) ? (
-                  <div
-                    id={errorId}
-                    className="ui-workbench-structured-data-form__error"
-                    role="alert"
-                  >
-                    {error}
-                  </div>
-                ) : null}
-              </div>
-            );
-          })}
-        </div>
-      ) : null}
-      {section.tables?.map((table) => (
-        <WorkbenchStructuredDataTableView
-          key={table.id}
-          className="ui-workbench-structured-data-form__table-section"
-          table={table}
-        />
-      ))}
-    </section>
-  );
-}
-
-function renderStructuredDataField({
-  disabled,
-  errorId,
-  field,
-  id,
-  onChange,
-  readOnly,
-  value,
-}: {
-  disabled: boolean;
-  errorId?: string;
-  field: WorkbenchStructuredDataFormField;
-  id: string;
-  onChange: (value: WorkbenchStructuredDataFieldValue) => void;
-  readOnly: boolean;
-  value: WorkbenchStructuredDataFieldValue;
-}) {
-  if (field.type === 'checkbox') {
-    return (
-      <Field description={field.description}>
-        <Checkbox
-          aria-describedby={errorId}
-          checked={Boolean(value)}
-          disabled={disabled || readOnly}
-          label={field.label}
-          onChange={(event) => onChange(event.currentTarget.checked)}
-        />
-      </Field>
-    );
-  }
-
-  if (field.type === 'select') {
-    return (
-      <Field description={field.description} htmlFor={id} label={field.label}>
-        <Select
-          id={id}
-          aria-describedby={errorId}
-          controlWidth="full"
-          disabled={disabled || readOnly}
-          value={String(value)}
-          onChange={(event) => onChange(event.currentTarget.value)}
-        >
-          {field.emptyOptionLabel ? <option value="">{field.emptyOptionLabel}</option> : null}
-          {field.options.map((option) => (
-            <option key={option.value} disabled={option.disabled} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </Select>
-      </Field>
-    );
-  }
-
-  if (field.type === 'text-array') {
-    const itemLabel = field.itemLabel ?? getStructuredDataLabelText(field.label, 'Item');
-
-    return (
-      <Field
-        className="ui-workbench-structured-data-form__array-field"
-        description={field.description}
-        label={field.label}
-      >
-        <WorkbenchStructuredDataTextArrayInput
-          addLabel={field.addLabel}
-          ariaDescribedBy={errorId}
-          ariaLabel={itemLabel}
-          disabled={disabled}
-          emptyLabel={field.emptyLabel}
-          maxItems={field.maxItems}
-          minItems={field.minItems}
-          placeholder={field.itemPlaceholder}
-          readOnly={readOnly}
-          removeLabel={field.removeLabel}
-          value={value}
-          onValueChange={onChange}
-        />
-      </Field>
-    );
-  }
-
-  return (
-    <Field description={field.description} htmlFor={id} label={field.label}>
-      <TextInput
-        id={id}
-        aria-describedby={errorId}
-        autoComplete={field.type === 'text' ? field.autocomplete : undefined}
-        controlWidth="full"
-        disabled={disabled}
-        max={field.type === 'number' ? field.max : undefined}
-        min={field.type === 'number' ? field.min : undefined}
-        monospace={field.type === 'text' ? field.monospace : false}
-        placeholder={field.placeholder}
-        readOnly={readOnly}
-        step={field.type === 'number' ? field.step : undefined}
-        type={field.type}
-        value={String(value)}
-        onChange={(event) => onChange(event.currentTarget.value)}
-      />
-    </Field>
-  );
-}
-
-function structuredDataTextArrayItems(value: unknown) {
-  if (Array.isArray(value)) {
-    return value.map((item) => (item === null || item === undefined ? '' : String(item)));
-  }
-  if (value === '' || value === null || value === undefined) return [];
-  return [String(value)];
-}
-
-export function WorkbenchStructuredDataSchemaFieldInput({
-  addTextArrayLabel,
-  checkboxClassName,
-  className,
-  definition,
-  fieldErrorId,
-  fieldPath,
-  invalid = false,
-  onBlur,
-  onValueChange,
-  readOnly = false,
-  removeTextArrayLabel,
-  textareaClassName,
-  textArrayClassName,
-  validationMessage,
-  value,
-}: WorkbenchStructuredDataSchemaFieldInputProps) {
-  const control = getWorkbenchStructuredDataSchemaFieldControl(definition);
-  const label = definition?.title ?? formatWorkbenchStructuredDataSchemaLabel(fieldPath);
-  const stringValue = stringifyWorkbenchStructuredDataSchemaFieldValue(value, definition);
-  const controlClassName = cx(
-    className,
-    invalid && 'ui-workbench-structured-data-schema-field-input--invalid',
-  );
-  const describedBy = fieldErrorId && validationMessage ? fieldErrorId : fieldErrorId || undefined;
-  const min = definition?.minimum ?? definition?.min;
-  const max = definition?.maximum ?? definition?.max;
-  const selectOptions = buildWorkbenchStructuredDataSchemaSelectOptions(definition);
-
-  const emitValueChange = (nextValue: unknown) => {
-    if (!readOnly) {
-      onValueChange?.(nextValue);
-    }
-  };
-
-  if (definition?.type === 'array' && definition.items?.type === 'string') {
-    return (
-      <WorkbenchStructuredDataTextArrayInput
-        addLabel={addTextArrayLabel}
-        ariaLabel={label}
-        className={cx(className, textArrayClassName)}
-        placeholder={definition.ui?.placeholder}
-        readOnly={readOnly}
-        removeLabel={removeTextArrayLabel}
-        value={value}
-        onValueChange={onValueChange}
-      />
-    );
-  }
-
-  if (control === 'color') {
-    return (
-      <WorkbenchColorInput
-        aria-describedby={describedBy}
-        aria-invalid={invalid || undefined}
-        className={controlClassName}
-        disabled={readOnly}
-        fallbackValue="#000000"
-        value={stringValue || '#000000'}
-        onValueChange={(nextValue) => emitValueChange(nextValue)}
-      />
-    );
-  }
-
-  if (control === 'radio') {
-    return (
-      <SegmentedControl
-        ariaLabel={label}
-        options={selectOptions.map((option) => ({
-          label: option.label,
-          value: option.value,
-        }))}
-        value={stringValue}
-        onChange={(nextValue) =>
-          emitValueChange(coerceWorkbenchStructuredDataSchemaFieldValue(nextValue, definition))
-        }
-      />
-    );
-  }
-
-  if (control === 'select') {
-    return (
-      <Select
-        aria-describedby={describedBy}
-        aria-invalid={invalid || undefined}
-        aria-label={label}
-        className={controlClassName}
-        controlWidth="full"
-        disabled={readOnly}
-        value={stringValue}
-        onBlur={onBlur}
-        onChange={(event) =>
-          emitValueChange(
-            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
-          )
-        }
-      >
-        {selectOptions.map((option) => (
-          <option key={option.value} disabled={option.disabled} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </Select>
-    );
-  }
-
-  if (control === 'textarea') {
-    return (
-      <TextArea
-        aria-describedby={describedBy}
-        aria-invalid={invalid || undefined}
-        aria-label={label}
-        className={cx(controlClassName, textareaClassName)}
-        controlWidth="full"
-        monospace={definition?.type === 'array' || definition?.type === 'object'}
-        placeholder={definition?.ui?.placeholder}
-        readOnly={readOnly}
-        resize="vertical"
-        rows={definition?.ui?.rows ?? (definition?.type === 'array' ? 3 : 4)}
-        value={stringValue}
-        onBlur={onBlur}
-        onChange={(event) => {
-          emitValueChange(
-            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
-          );
-        }}
-      />
-    );
-  }
-
-  if (control === 'checkbox') {
-    return (
-      <Checkbox
-        checked={booleanWorkbenchStructuredDataSchemaFieldValue(value)}
-        className={checkboxClassName}
-        disabled={readOnly}
-        label={booleanWorkbenchStructuredDataSchemaFieldValue(value) ? 'Enabled' : 'Disabled'}
-        onChange={(event) => onValueChange?.(event.currentTarget.checked)}
-      />
-    );
-  }
-
-  if (control === 'date') {
-    return (
-      <TextInput
-        aria-describedby={describedBy}
-        aria-invalid={invalid || undefined}
-        aria-label={label}
-        className={controlClassName}
-        controlWidth="full"
-        placeholder={definition?.ui?.placeholder}
-        readOnly={readOnly}
-        type="date"
-        value={stringValue}
-        onBlur={onBlur}
-        onChange={(event) => {
-          emitValueChange(
-            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
-          );
-        }}
-      />
-    );
-  }
-
-  return (
-    <TextInput
-      aria-describedby={describedBy}
-      aria-invalid={invalid || undefined}
-      aria-label={label}
-      className={controlClassName}
-      controlWidth="full"
-      max={control === 'number' ? max : undefined}
-      min={control === 'number' ? min : undefined}
-      placeholder={definition?.ui?.placeholder}
-      readOnly={readOnly}
-      type={control === 'number' ? control : 'text'}
-      value={stringValue}
-      onBlur={onBlur}
-      onChange={(event) => {
-        emitValueChange(
-          coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
-        );
-      }}
-    />
-  );
-}
-
-export function WorkbenchStructuredDataTextArrayInput({
-  addLabel = 'Add item',
-  ariaDescribedBy,
-  ariaLabel,
-  className,
-  disabled = false,
-  emptyLabel,
-  maxItems,
-  minItems,
-  placeholder,
-  readOnly = false,
-  removeLabel = 'Remove',
-  value,
-  onValueChange,
-  ...props
-}: WorkbenchStructuredDataTextArrayInputProps) {
-  const generatedId = useId();
-  const items = structuredDataTextArrayItems(value);
-  const canEdit = !disabled && !readOnly;
-  const addDisabled = !canEdit || (maxItems !== undefined && items.length >= maxItems);
-  const removeDisabled = !canEdit || (minItems !== undefined && items.length <= minItems);
-
-  const updateItem = (index: number, nextValue: string) => {
-    onValueChange?.(items.map((item, itemIndex) => (itemIndex === index ? nextValue : item)));
-  };
-
-  const removeItem = (index: number) => {
-    onValueChange?.(items.filter((_, itemIndex) => itemIndex !== index));
-  };
-
-  return (
-    <div className={cx('ui-workbench-structured-data-form__array', className)} {...props}>
-      {items.length === 0 && emptyLabel ? (
-        <div className="ui-workbench-structured-data-form__array-empty">{emptyLabel}</div>
-      ) : null}
-      {items.map((item, index) => {
-        const itemNumber = index + 1;
-        const itemInputId = `${generatedId}-${itemNumber}`;
-
-        return (
-          <div className="ui-workbench-structured-data-form__array-row" key={itemInputId}>
-            <TextInput
-              id={itemInputId}
-              aria-describedby={ariaDescribedBy}
-              aria-label={`${ariaLabel} ${itemNumber}`}
-              controlWidth="full"
-              disabled={disabled}
-              placeholder={placeholder}
-              readOnly={readOnly}
-              value={item}
-              onChange={(event) => updateItem(index, event.currentTarget.value)}
-            />
-            <IconButton
-              compact
-              disabled={removeDisabled}
-              icon="codicon-trash"
-              label={`${removeLabel} ${ariaLabel} ${itemNumber}`}
-              onClick={() => removeItem(index)}
-            />
-          </div>
-        );
-      })}
-      <Button
-        compact
-        disabled={addDisabled}
-        icon="codicon-add"
-        onClick={() => onValueChange?.([...items, ''])}
-      >
-        {addLabel}
-      </Button>
-    </div>
-  );
-}
-
-function getStructuredDataLabelText(label: ReactNode, fallback: string) {
-  if (typeof label === 'string' || typeof label === 'number') return String(label);
-  return fallback;
-}
+export * from './structuredDataSchema';
+
+import { useId, useMemo, useState, type FormEvent, type ReactNode } from 'react';
+import { Button } from '../../primitives/button';
+import { Checkbox } from '../../primitives/checkbox';
+import { EmptyState } from '../../primitives/empty-state';
+import { WorkbenchStructuredDataTableView } from './StructuredDataTableView';
+import { Field } from '../../primitives/field';
+import { IconButton } from '../../primitives/icon-button';
+import { Select } from '../../primitives/select';
+import { TextArea } from '../../primitives/text-area';
+import { TextInput } from '../../primitives/text-input';
+import { SegmentedControl } from '../../primitives/workbench-editor';
+import { WorkbenchColorInput } from '../../layout/WorkbenchPropertyPanel';
+import { cx } from '../../utils/cx';
+import { WorkbenchSectionedPanel } from './SectionedPanel';
+import {
+  coerceWorkbenchStructuredDataFormFieldValue,
+  coerceWorkbenchStructuredDataSchemaFieldValue,
+  booleanWorkbenchStructuredDataSchemaFieldValue,
+  buildWorkbenchStructuredDataSchemaSelectOptions,
+  formatWorkbenchStructuredDataSchemaLabel,
+  getWorkbenchStructuredDataFormErrors,
+  getWorkbenchStructuredDataSchemaFieldControl,
+  getWorkbenchStructuredDataValue,
+  isWorkbenchStructuredDataFormSubmittable,
+  normalizeWorkbenchStructuredDataFormData,
+  setWorkbenchStructuredDataValue,
+  stringifyWorkbenchStructuredDataSchemaFieldValue,
+  type WorkbenchStructuredDataFieldValue,
+  type WorkbenchStructuredDataFormErrors,
+  type WorkbenchStructuredDataFormField,
+  type WorkbenchStructuredDataFormFieldChangeContext,
+  type WorkbenchStructuredDataFormProps,
+  type WorkbenchStructuredDataFormSection,
+  type WorkbenchStructuredDataRecord,
+  type WorkbenchStructuredDataSchemaFieldInputProps,
+  type WorkbenchStructuredDataTextArrayInputProps,
+} from './structuredDataSchema';
+
+export function WorkbenchStructuredDataForm({
+  ariaLabel,
+  cancelLabel = 'Cancel',
+  className,
+  data,
+  defaultData = {},
+  disabled = false,
+  emptyLabel = 'No structured data sections',
+  errors,
+  onCancel,
+  onDataChange,
+  onFieldChange,
+  onSubmit,
+  readOnly = false,
+  sections,
+  showActions = true,
+  submitLabel = 'Save',
+  ...props
+}: WorkbenchStructuredDataFormProps) {
+  const generatedId = useId().replace(/:/g, '');
+  const [uncontrolledData, setUncontrolledData] = useState(() =>
+    normalizeWorkbenchStructuredDataFormData(sections, defaultData),
+  );
+  const resolvedData = useMemo(
+    () => normalizeWorkbenchStructuredDataFormData(sections, data ?? uncontrolledData),
+    [data, sections, uncontrolledData],
+  );
+  const resolvedErrors = useMemo(
+    () => ({
+      ...getWorkbenchStructuredDataFormErrors(sections, resolvedData),
+      ...(errors ?? {}),
+    }),
+    [errors, resolvedData, sections],
+  );
+  const submittable = isWorkbenchStructuredDataFormSubmittable({
+    disabled,
+    errors: resolvedErrors,
+    readOnly,
+  });
+
+  const updateFieldValue = (
+    field: WorkbenchStructuredDataFormField,
+    value: WorkbenchStructuredDataFieldValue,
+  ) => {
+    const coercedValue = coerceWorkbenchStructuredDataFormFieldValue(field, value);
+    const nextData = setWorkbenchStructuredDataValue(resolvedData, field.path, coercedValue);
+    const context: WorkbenchStructuredDataFormFieldChangeContext = {
+      data: nextData,
+      field,
+      fieldId: field.id,
+      path: field.path,
+      value: coercedValue,
+    };
+
+    if (data === undefined) {
+      setUncontrolledData(nextData);
+    }
+
+    onFieldChange?.(context);
+    onDataChange?.(nextData, context);
+  };
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (!submittable) return;
+
+    onSubmit?.(resolvedData, { data: resolvedData, event });
+  };
+
+  return (
+    <form
+      className={cx('ui-workbench-structured-data-form', className)}
+      data-readonly={readOnly ? 'true' : undefined}
+      onSubmit={handleSubmit}
+      {...props}
+    >
+      {sections.length === 0 ? (
+        <EmptyState compact icon="codicon-settings-gear">
+          {emptyLabel}
+        </EmptyState>
+      ) : (
+        <WorkbenchSectionedPanel
+          ariaLabel={ariaLabel}
+          className="ui-workbench-structured-data-form__panel"
+          items={sections.map((section) => ({
+            anchorId: section.id,
+            count: section.count ?? section.fields?.length,
+            title: section.title,
+            render: () => (
+              <StructuredDataSection
+                key={section.id}
+                data={resolvedData}
+                disabled={disabled}
+                errors={resolvedErrors}
+                generatedId={generatedId}
+                readOnly={readOnly}
+                section={section}
+                onFieldChange={updateFieldValue}
+              />
+            ),
+          }))}
+          readOnly={readOnly}
+        />
+      )}
+      {showActions ? (
+        <div className="ui-workbench-structured-data-form__actions">
+          <Button disabled={disabled} onClick={() => onCancel?.({ data: resolvedData })}>
+            {cancelLabel}
+          </Button>
+          <Button disabled={!submittable} type="submit" variant="primary">
+            {submitLabel}
+          </Button>
+        </div>
+      ) : null}
+    </form>
+  );
+}
+
+function isRenderableWorkbenchStructuredDataFormError(error: ReactNode) {
+  return error !== undefined && error !== null && error !== false && error !== '';
+}
+
+function StructuredDataSection({
+  data,
+  disabled,
+  errors,
+  generatedId,
+  onFieldChange,
+  readOnly,
+  section,
+}: {
+  data: WorkbenchStructuredDataRecord;
+  disabled: boolean;
+  errors: WorkbenchStructuredDataFormErrors;
+  generatedId: string;
+  onFieldChange: (
+    field: WorkbenchStructuredDataFormField,
+    value: WorkbenchStructuredDataFieldValue,
+  ) => void;
+  readOnly: boolean;
+  section: WorkbenchStructuredDataFormSection;
+}) {
+  return (
+    <section
+      id={section.id}
+      className="ui-workbench-structured-data-form__section"
+      aria-labelledby={`${generatedId}-${section.id}-title`}
+    >
+      <h2 id={`${generatedId}-${section.id}-title`}>{section.title}</h2>
+      {section.description ? <p>{section.description}</p> : null}
+      {section.fields?.length ? (
+        <div className="ui-workbench-structured-data-form__fields">
+          {section.fields.map((field) => {
+            const fieldInputId = `${generatedId}-${field.id}`;
+            const error = errors[field.id];
+            const errorId = isRenderableWorkbenchStructuredDataFormError(error)
+              ? `${fieldInputId}-error`
+              : undefined;
+            const value = coerceWorkbenchStructuredDataFormFieldValue(
+              field,
+              getWorkbenchStructuredDataValue(data, field.path),
+            );
+
+            return (
+              <div
+                key={field.id}
+                className="ui-workbench-structured-data-form__field"
+                data-field-id={field.id}
+                data-field-type={field.type}
+              >
+                {renderStructuredDataField({
+                  disabled: disabled || Boolean(field.disabled),
+                  errorId,
+                  field,
+                  id: fieldInputId,
+                  readOnly: readOnly || Boolean(field.readOnly),
+                  value,
+                  onChange: (nextValue) => onFieldChange(field, nextValue),
+                })}
+                {isRenderableWorkbenchStructuredDataFormError(error) ? (
+                  <div
+                    id={errorId}
+                    className="ui-workbench-structured-data-form__error"
+                    role="alert"
+                  >
+                    {error}
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+      {section.tables?.map((table) => (
+        <WorkbenchStructuredDataTableView
+          key={table.id}
+          className="ui-workbench-structured-data-form__table-section"
+          table={table}
+        />
+      ))}
+    </section>
+  );
+}
+
+function renderStructuredDataField({
+  disabled,
+  errorId,
+  field,
+  id,
+  onChange,
+  readOnly,
+  value,
+}: {
+  disabled: boolean;
+  errorId?: string;
+  field: WorkbenchStructuredDataFormField;
+  id: string;
+  onChange: (value: WorkbenchStructuredDataFieldValue) => void;
+  readOnly: boolean;
+  value: WorkbenchStructuredDataFieldValue;
+}) {
+  if (field.type === 'checkbox') {
+    return (
+      <Field description={field.description}>
+        <Checkbox
+          aria-describedby={errorId}
+          checked={Boolean(value)}
+          disabled={disabled || readOnly}
+          label={field.label}
+          onChange={(event) => onChange(event.currentTarget.checked)}
+        />
+      </Field>
+    );
+  }
+
+  if (field.type === 'select') {
+    return (
+      <Field description={field.description} htmlFor={id} label={field.label}>
+        <Select
+          id={id}
+          aria-describedby={errorId}
+          controlWidth="full"
+          disabled={disabled || readOnly}
+          value={String(value)}
+          onChange={(event) => onChange(event.currentTarget.value)}
+        >
+          {field.emptyOptionLabel ? <option value="">{field.emptyOptionLabel}</option> : null}
+          {field.options.map((option) => (
+            <option key={option.value} disabled={option.disabled} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
+      </Field>
+    );
+  }
+
+  if (field.type === 'text-array') {
+    const itemLabel = field.itemLabel ?? getStructuredDataLabelText(field.label, 'Item');
+
+    return (
+      <Field
+        className="ui-workbench-structured-data-form__array-field"
+        description={field.description}
+        label={field.label}
+      >
+        <WorkbenchStructuredDataTextArrayInput
+          addLabel={field.addLabel}
+          ariaDescribedBy={errorId}
+          ariaLabel={itemLabel}
+          disabled={disabled}
+          emptyLabel={field.emptyLabel}
+          maxItems={field.maxItems}
+          minItems={field.minItems}
+          placeholder={field.itemPlaceholder}
+          readOnly={readOnly}
+          removeLabel={field.removeLabel}
+          value={value}
+          onValueChange={onChange}
+        />
+      </Field>
+    );
+  }
+
+  return (
+    <Field description={field.description} htmlFor={id} label={field.label}>
+      <TextInput
+        id={id}
+        aria-describedby={errorId}
+        autoComplete={field.type === 'text' ? field.autocomplete : undefined}
+        controlWidth="full"
+        disabled={disabled}
+        max={field.type === 'number' ? field.max : undefined}
+        min={field.type === 'number' ? field.min : undefined}
+        monospace={field.type === 'text' ? field.monospace : false}
+        placeholder={field.placeholder}
+        readOnly={readOnly}
+        step={field.type === 'number' ? field.step : undefined}
+        type={field.type}
+        value={String(value)}
+        onChange={(event) => onChange(event.currentTarget.value)}
+      />
+    </Field>
+  );
+}
+
+function structuredDataTextArrayItems(value: unknown) {
+  if (Array.isArray(value)) {
+    return value.map((item) => (item === null || item === undefined ? '' : String(item)));
+  }
+  if (value === '' || value === null || value === undefined) return [];
+  return [String(value)];
+}
+
+export function WorkbenchStructuredDataSchemaFieldInput({
+  addTextArrayLabel,
+  checkboxClassName,
+  className,
+  definition,
+  fieldErrorId,
+  fieldPath,
+  invalid = false,
+  onBlur,
+  onValueChange,
+  readOnly = false,
+  removeTextArrayLabel,
+  textareaClassName,
+  textArrayClassName,
+  validationMessage,
+  value,
+}: WorkbenchStructuredDataSchemaFieldInputProps) {
+  const control = getWorkbenchStructuredDataSchemaFieldControl(definition);
+  const label = definition?.title ?? formatWorkbenchStructuredDataSchemaLabel(fieldPath);
+  const stringValue = stringifyWorkbenchStructuredDataSchemaFieldValue(value, definition);
+  const controlClassName = cx(
+    className,
+    invalid && 'ui-workbench-structured-data-schema-field-input--invalid',
+  );
+  const describedBy = fieldErrorId && validationMessage ? fieldErrorId : fieldErrorId || undefined;
+  const min = definition?.minimum ?? definition?.min;
+  const max = definition?.maximum ?? definition?.max;
+  const selectOptions = buildWorkbenchStructuredDataSchemaSelectOptions(definition);
+
+  const emitValueChange = (nextValue: unknown) => {
+    if (!readOnly) {
+      onValueChange?.(nextValue);
+    }
+  };
+
+  if (definition?.type === 'array' && definition.items?.type === 'string') {
+    return (
+      <WorkbenchStructuredDataTextArrayInput
+        addLabel={addTextArrayLabel}
+        ariaLabel={label}
+        className={cx(className, textArrayClassName)}
+        placeholder={definition.ui?.placeholder}
+        readOnly={readOnly}
+        removeLabel={removeTextArrayLabel}
+        value={value}
+        onValueChange={onValueChange}
+      />
+    );
+  }
+
+  if (control === 'color') {
+    return (
+      <WorkbenchColorInput
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        className={controlClassName}
+        disabled={readOnly}
+        fallbackValue="#000000"
+        value={stringValue || '#000000'}
+        onValueChange={(nextValue) => emitValueChange(nextValue)}
+      />
+    );
+  }
+
+  if (control === 'radio') {
+    return (
+      <SegmentedControl
+        ariaLabel={label}
+        options={selectOptions.map((option) => ({
+          label: option.label,
+          value: option.value,
+        }))}
+        value={stringValue}
+        onChange={(nextValue) =>
+          emitValueChange(coerceWorkbenchStructuredDataSchemaFieldValue(nextValue, definition))
+        }
+      />
+    );
+  }
+
+  if (control === 'select') {
+    return (
+      <Select
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        aria-label={label}
+        className={controlClassName}
+        controlWidth="full"
+        disabled={readOnly}
+        value={stringValue}
+        onBlur={onBlur}
+        onChange={(event) =>
+          emitValueChange(
+            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
+          )
+        }
+      >
+        {selectOptions.map((option) => (
+          <option key={option.value} disabled={option.disabled} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </Select>
+    );
+  }
+
+  if (control === 'textarea') {
+    return (
+      <TextArea
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        aria-label={label}
+        className={cx(controlClassName, textareaClassName)}
+        controlWidth="full"
+        monospace={definition?.type === 'array' || definition?.type === 'object'}
+        placeholder={definition?.ui?.placeholder}
+        readOnly={readOnly}
+        resize="vertical"
+        rows={definition?.ui?.rows ?? (definition?.type === 'array' ? 3 : 4)}
+        value={stringValue}
+        onBlur={onBlur}
+        onChange={(event) => {
+          emitValueChange(
+            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
+          );
+        }}
+      />
+    );
+  }
+
+  if (control === 'checkbox') {
+    return (
+      <Checkbox
+        checked={booleanWorkbenchStructuredDataSchemaFieldValue(value)}
+        className={checkboxClassName}
+        disabled={readOnly}
+        label={booleanWorkbenchStructuredDataSchemaFieldValue(value) ? 'Enabled' : 'Disabled'}
+        onChange={(event) => onValueChange?.(event.currentTarget.checked)}
+      />
+    );
+  }
+
+  if (control === 'date') {
+    return (
+      <TextInput
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
+        aria-label={label}
+        className={controlClassName}
+        controlWidth="full"
+        placeholder={definition?.ui?.placeholder}
+        readOnly={readOnly}
+        type="date"
+        value={stringValue}
+        onBlur={onBlur}
+        onChange={(event) => {
+          emitValueChange(
+            coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
+          );
+        }}
+      />
+    );
+  }
+
+  return (
+    <TextInput
+      aria-describedby={describedBy}
+      aria-invalid={invalid || undefined}
+      aria-label={label}
+      className={controlClassName}
+      controlWidth="full"
+      max={control === 'number' ? max : undefined}
+      min={control === 'number' ? min : undefined}
+      placeholder={definition?.ui?.placeholder}
+      readOnly={readOnly}
+      type={control === 'number' ? control : 'text'}
+      value={stringValue}
+      onBlur={onBlur}
+      onChange={(event) => {
+        emitValueChange(
+          coerceWorkbenchStructuredDataSchemaFieldValue(event.currentTarget.value, definition),
+        );
+      }}
+    />
+  );
+}
+
+export function WorkbenchStructuredDataTextArrayInput({
+  addLabel = 'Add item',
+  ariaDescribedBy,
+  ariaLabel,
+  className,
+  disabled = false,
+  emptyLabel,
+  maxItems,
+  minItems,
+  placeholder,
+  readOnly = false,
+  removeLabel = 'Remove',
+  value,
+  onValueChange,
+  ...props
+}: WorkbenchStructuredDataTextArrayInputProps) {
+  const generatedId = useId();
+  const items = structuredDataTextArrayItems(value);
+  const canEdit = !disabled && !readOnly;
+  const addDisabled = !canEdit || (maxItems !== undefined && items.length >= maxItems);
+  const removeDisabled = !canEdit || (minItems !== undefined && items.length <= minItems);
+
+  const updateItem = (index: number, nextValue: string) => {
+    onValueChange?.(items.map((item, itemIndex) => (itemIndex === index ? nextValue : item)));
+  };
+
+  const removeItem = (index: number) => {
+    onValueChange?.(items.filter((_, itemIndex) => itemIndex !== index));
+  };
+
+  return (
+    <div className={cx('ui-workbench-structured-data-form__array', className)} {...props}>
+      {items.length === 0 && emptyLabel ? (
+        <div className="ui-workbench-structured-data-form__array-empty">{emptyLabel}</div>
+      ) : null}
+      {items.map((item, index) => {
+        const itemNumber = index + 1;
+        const itemInputId = `${generatedId}-${itemNumber}`;
+
+        return (
+          <div className="ui-workbench-structured-data-form__array-row" key={itemInputId}>
+            <TextInput
+              id={itemInputId}
+              aria-describedby={ariaDescribedBy}
+              aria-label={`${ariaLabel} ${itemNumber}`}
+              controlWidth="full"
+              disabled={disabled}
+              placeholder={placeholder}
+              readOnly={readOnly}
+              value={item}
+              onChange={(event) => updateItem(index, event.currentTarget.value)}
+            />
+            <IconButton
+              compact
+              disabled={removeDisabled}
+              icon="codicon-trash"
+              label={`${removeLabel} ${ariaLabel} ${itemNumber}`}
+              onClick={() => removeItem(index)}
+            />
+          </div>
+        );
+      })}
+      <Button
+        compact
+        disabled={addDisabled}
+        icon="codicon-add"
+        onClick={() => onValueChange?.([...items, ''])}
+      >
+        {addLabel}
+      </Button>
+    </div>
+  );
+}
+
+function getStructuredDataLabelText(label: ReactNode, fallback: string) {
+  if (typeof label === 'string' || typeof label === 'number') return String(label);
+  return fallback;
+}