initial ai assistance

src/form/ArrayField.tsx

@@ -135,7 +135,8 @@ function ArrayList({ schema: s, itemSchema, items, onChange, path, compound }: {
                 </span>
                 {compound ? (
                   <button type="button" className="cms-item__title" aria-expanded={expanded} onClick={() => setOpen((o) => ({ ...o, [k]: !expanded }))}>
-                    <Icon name="chevron" size={16} className={`cms-chev${expanded ? ' is-open' : ''}`} /> {summarise(root, itemSchema, item, i)}
+                    <Icon name="chevron" size={16} className={`cms-chev${expanded ? ' is-open' : ''}`} />
+                    <span className="cms-item__text">{summarise(root, itemSchema, item, i)}</span>
                   </button>
                 ) : (
                   <div className="cms-item__value">

src/form/Form.tsx

@@ -5,6 +5,8 @@ import type { Controller } from '../controller'
 import { fieldEditorFor } from '../registry'
 import { labelOf, READONLY_KEYS } from '../schema'
 import { Summary } from '../ui/Summary'
+import { RewriteButton } from '../ai/RewriteButton'
+import { Guard } from '../ui/Guard'
 import { ArrayField } from './ArrayField'
 import { FormContext, useForm } from './context'
 import { MapField } from './MapField'
@@ -205,13 +207,27 @@ export function StringInput({ schema: s, value, onChange }: { schema: JSONSchema
   const text = typeof value === 'string' ? value : value == null ? '' : String(value)
   if (x && ['textarea', 'markdown', 'monaco', 'html', 'richtext'].includes(x) || (s.maxLength ?? 0) > 200) {
     const mono = x === 'monaco' || x === 'html'
-    return <textarea className={`cms-input cms-input--area${mono ? ' cms-mono' : ''}`} rows={x === 'markdown' || x === 'richtext' ? 8 : 5} value={text} onChange={(e) => onChange(e.target.value)} spellCheck={!mono} />
+    return (
+      <>
+        <textarea className={`cms-input cms-input--area${mono ? ' cms-mono' : ''}`} rows={x === 'markdown' || x === 'richtext' ? 8 : 5} value={text} onChange={(e) => onChange(e.target.value)} spellCheck={!mono} />
+        {x !== 'monaco' && (
+          <Guard name="Rewrite">
+            <RewriteButton schema={s} value={text} onAccept={onChange} />
+          </Guard>
+        )}
+      </>
+    )
   }
   const type = ({ email: 'email', uri: 'url', url: 'url', date: 'date', time: 'time' } as Record<string, string>)[s.format] ?? 'text'
   return (
     <>
       <input className={`cms-input${x === 'node' ? ' cms-mono' : ''}`} type={type} value={text} placeholder={x === 'node' ? 'node id' : s.default ?? s.examples?.[0] ?? ''} onChange={(e) => onChange(e.target.value)} />
       {x === 'asset' && looksLikeImage(text) && <img className="cms-thumb" src={text} alt="" />}
+      {!x && !s.format && !s.enum && (
+        <Guard name="Rewrite">
+          <RewriteButton schema={s} value={text} onAccept={onChange} />
+        </Guard>
+      )}
     </>
   )
 }