feat(spa): editable ArrayField via comma-delimited input (#242)

Follows the JSON/Duration editors: ArrayField was read-only. Render a
comma-delimited text input mirroring Django's SimpleArrayField widget —
the raw string is sent as-is and SimpleArrayField splits + coerces each
element (a bad element surfaces as a normal field error). No backend
change (rule 3). Values containing commas aren't supported, the same
limitation as Django's default admin widget.

- FieldType: add `array` (backend already emits it).
- FieldInput: `array` → comma-delimited text input.
- Seeding (DetailPage/CreatePage): seed the comma-joined value, checked
  before the M2M array branch so the scalar list isn't mapped to {id}.

range remains the last read-only structured type (needs the multi-widget
write path, #238) — #242 stays open for it.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: martin-castro-laminr-ai

frontend/apps/web/src/pages/CreatePage.tsx

@@ -140,6 +140,11 @@ function CreateForm({ schema, onCreate, onCancel }: CreateFormProps) {
         init[name] = v === null || v === undefined ? null : JSON.stringify(v, null, 2);
         continue;
       }
+      if (field.type === 'array') {
+        // ArrayField editor (#242): seed the comma-joined default (string).
+        init[name] = Array.isArray(v) ? v.join(',') : null;
+        continue;
+      }
       // Seed with the model default where the wire carries a scalar;
       // FK envelopes / html start empty for a new object.
       init[name] = v !== null && typeof v !== 'object' ? v : null;

frontend/apps/web/src/pages/DetailPage.tsx

@@ -352,6 +352,12 @@ function initialValueFor(field: DetailResponse['fields'][string]): WriteValue {
     // a JSON array isn't mistaken for an M2M id list.
     return JSON.stringify(v, null, 2);
   }
+  if (field.type === 'array') {
+    // ArrayField editor (#242): seed the comma-joined value (string),
+    // matching Django's SimpleArrayField widget. Checked before the M2M
+    // array branch so the scalar list isn't mapped to {id} envelopes.
+    return Array.isArray(v) ? v.join(',') : null;
+  }
   if (Array.isArray(v)) {
     // M2M (#240): [{id,label}, ...] → [id, ...] (bare pks for the write).
     return v.map((item) =>

frontend/packages/api/src/contract.ts

@@ -18,10 +18,11 @@ export type FieldType =
   | 'datetime'
   | 'time'
   | 'uuid'
-  // Structured types the backend emits (#242). `json` and `duration`
-  // have editable SPA widgets; others currently render read-only.
+  // Structured types the backend emits (#242). `json` / `duration` /
+  // `array` have editable SPA widgets; others currently render read-only.
   | 'json'
   | 'duration'
+  | 'array'
   | 'choice'
   | 'foreignkey'
   | 'manytomany'

frontend/packages/form/src/FieldInput.test.tsx

@@ -108,6 +108,24 @@ describe('FieldInput — structured editors (#242)', () => {
     expect(onChange).toHaveBeenCalledWith('1 00:00:00');
   });
 
+  it('renders a comma-delimited text input for an array field', () => {
+    const onChange = vi.fn();
+    render(
+      <FieldInput
+        name="tags"
+        field={field({ type: 'array' })}
+        value="a,b,c"
+        error={undefined}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByRole('textbox');
+    expect(input.tagName).toBe('INPUT');
+    expect(input).toHaveValue('a,b,c');
+    fireEvent.change(input, { target: { value: 'a,b' } });
+    expect(onChange).toHaveBeenCalledWith('a,b');
+  });
+
   it('keeps a readonly json field read-only (no textbox)', () => {
     render(
       <FieldInput

frontend/packages/form/src/FieldInput.tsx

@@ -252,6 +252,23 @@ export function FieldInput({ name, field, value, error, onChange }: FieldInputPr
         className={base}
       />
     );
+  } else if (field.type === 'array') {
+    // ArrayField editor (#242): a comma-delimited text input, mirroring
+    // Django's SimpleArrayField widget. The form seeds it as the
+    // comma-joined value; the raw string is sent as-is and SimpleArrayField
+    // splits + coerces each element (reporting a bad element as a normal
+    // field error). Values containing commas aren't supported — the same
+    // limitation as Django's default admin widget.
+    control = (
+      <input
+        id={id}
+        type="text"
+        value={value == null ? '' : String(value)}
+        placeholder="comma,separated,values"
+        onChange={(e) => onChange(e.target.value)}
+        className={base}
+      />
+    );
   } else {
     // Fallback: render value read-only for any type without an editor.
     control = (