@xemahq/ui-kernel 0.9.2 → 0.11.0

package/src/ui/capture/schema-field-input.tsx

@@ -17,15 +17,19 @@ import { Eye, EyeOff, Plus, Trash2 } from 'lucide-react';
 import { useCallback, useRef, useState, type ReactNode } from 'react';
 
 import { cn } from '../cn';
+import {
+  applyCaptureTransform,
+  CaptureFieldType,
+  type CaptureFieldSpec,
+  type CaptureValues,
+} from './field-spec';
+import { asString } from './value-format';
 import { Button } from '../primitives/button';
 import { Checkbox } from '../primitives/checkbox';
 import { Input } from '../primitives/input';
 import { Label } from '../primitives/label';
 import { Textarea } from '../primitives/textarea';
 
-import { applyCaptureTransform, CaptureFieldType, type CaptureFieldSpec, type CaptureValues } from './field-spec';
-import { asString } from './value-format';
-
 const SELECT_CLASS =
   'mt-1 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-body-1 text-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50';
 
@@ -51,7 +55,9 @@ export interface SchemaFieldInputProps {
 }
 
 /** Native `type` for the single-line text-ish capture types. */
-function nativeInputType(type: CaptureFieldSpec['type']): 'text' | 'email' | 'url' {
+function nativeInputType(
+  type: CaptureFieldSpec['type'],
+): 'text' | 'email' | 'url' {
   switch (type) {
     case CaptureFieldType.Email:
       return 'email';
@@ -69,17 +75,38 @@ export function SchemaFieldInput(props: SchemaFieldInputProps) {
   // The ONE place a captured string is normalized. Composites (object/list)
   // emit records/arrays and pass through untouched.
   const emit = (next: unknown): void =>
-    onChange(typeof next === 'string' ? applyCaptureTransform(next, field.transform) : next);
+    onChange(
+      typeof next === 'string'
+        ? applyCaptureTransform(next, field.transform)
+        : next,
+    );
 
   // DECLARED secrecy wins over the field type: a secret is always write-only
   // and masked, whatever shape it has. Never inferred from `type`.
   if (field.isSecret === true) {
-    return <SecretFieldInput field={field} value={value} onChange={emit} disabled={disabled} inputId={inputId} />;
+    return (
+      <SecretFieldInput
+        field={field}
+        value={value}
+        onChange={emit}
+        disabled={disabled}
+        inputId={inputId}
+      />
+    );
   }
 
   switch (field.type) {
     case CaptureFieldType.Text:
-      return <Textarea id={inputId} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} rows={4} placeholder={field.placeholder} />;
+      return (
+        <Textarea
+          id={inputId}
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+          rows={4}
+          placeholder={field.placeholder}
+        />
+      );
     case CaptureFieldType.Json:
       return (
         <Textarea
@@ -99,29 +126,76 @@ export function SchemaFieldInput(props: SchemaFieldInputProps) {
           id={inputId}
           type="number"
           value={asString(value)}
-          onChange={(e) => emit(e.target.value === '' ? '' : Number(e.target.value))}
+          onChange={(e) =>
+            emit(e.target.value === '' ? '' : Number(e.target.value))
+          }
           disabled={disabled}
           placeholder={field.placeholder}
         />
       );
     case CaptureFieldType.Decimal:
       // NUMERIC carried verbatim as text — never Number()-coerced (precision).
-      return <Input id={inputId} type="text" inputMode="decimal" value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? '0.00'} />;
+      return (
+        <Input
+          id={inputId}
+          type="text"
+          inputMode="decimal"
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+          placeholder={field.placeholder ?? '0.00'}
+        />
+      );
     case CaptureFieldType.User:
-      return <Input id={inputId} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? 'subject id'} />;
+      return (
+        <Input
+          id={inputId}
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+          placeholder={field.placeholder ?? 'subject id'}
+        />
+      );
     case CaptureFieldType.Boolean:
       return (
         <div className="mt-1">
-          <Checkbox id={inputId} checked={value === true} onCheckedChange={(checked) => emit(checked === true)} disabled={disabled} />
+          <Checkbox
+            id={inputId}
+            checked={value === true}
+            onCheckedChange={(checked) => emit(checked === true)}
+            disabled={disabled}
+          />
         </div>
       );
     case CaptureFieldType.Date:
-      return <Input id={inputId} type="date" value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} />;
+      return (
+        <Input
+          id={inputId}
+          type="date"
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+        />
+      );
     case CaptureFieldType.Datetime:
-      return <Input id={inputId} type="datetime-local" value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} />;
+      return (
+        <Input
+          id={inputId}
+          type="datetime-local"
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+        />
+      );
     case CaptureFieldType.Enum:
       return (
-        <select id={inputId} className={SELECT_CLASS} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled}>
+        <select
+          id={inputId}
+          className={SELECT_CLASS}
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+        >
           <option value="">— select —</option>
           {(field.enumValues ?? []).map((v) => (
             <option key={v} value={v}>
@@ -132,9 +206,17 @@ export function SchemaFieldInput(props: SchemaFieldInputProps) {
       );
     case CaptureFieldType.Reference:
       return renderReference ? (
-        <>{renderReference({ field, value, onChange: emit, disabled, inputId })}</>
+        <>
+          {renderReference({ field, value, onChange: emit, disabled, inputId })}
+        </>
       ) : (
-        <Input id={inputId} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder ?? 'reference id'} />
+        <Input
+          id={inputId}
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+          placeholder={field.placeholder ?? 'reference id'}
+        />
       );
     case CaptureFieldType.Object:
       return <ObjectInput {...props} />;
@@ -147,7 +229,16 @@ export function SchemaFieldInput(props: SchemaFieldInputProps) {
       return <AudioFieldInput {...props} />;
     // string / email / url (and any unknown) — single-line input.
     default:
-      return <Input id={inputId} type={nativeInputType(field.type)} value={asString(value)} onChange={(e) => emit(e.target.value)} disabled={disabled} placeholder={field.placeholder} />;
+      return (
+        <Input
+          id={inputId}
+          type={nativeInputType(field.type)}
+          value={asString(value)}
+          onChange={(e) => emit(e.target.value)}
+          disabled={disabled}
+          placeholder={field.placeholder}
+        />
+      );
   }
 }
 
@@ -174,7 +265,9 @@ function SecretFieldInput({
   inputId: string;
 }>) {
   const [reveal, setReveal] = useState(false);
-  const multiline = field.type === CaptureFieldType.Json || field.type === CaptureFieldType.Text;
+  const multiline =
+    field.type === CaptureFieldType.Json ||
+    field.type === CaptureFieldType.Text;
 
   if (multiline && reveal) {
     return (
@@ -214,7 +307,10 @@ function SecretFieldInput({
   );
 }
 
-function RevealToggle({ reveal, onToggle }: Readonly<{ reveal: boolean; onToggle: () => void }>) {
+function RevealToggle({
+  reveal,
+  onToggle,
+}: Readonly<{ reveal: boolean; onToggle: () => void }>) {
   return (
     <Button
       type="button"
@@ -245,7 +341,13 @@ function readAsDataUrl(file: Blob, onDone: (dataUrl: string) => void): void {
  * the camera directly. The value is a data-URL so it stays JSON-serializable and
  * flows unchanged through the record model + offline outbox.
  */
-function MediaFieldInput({ field, value, onChange, disabled, path }: SchemaFieldInputProps) {
+function MediaFieldInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  path,
+}: SchemaFieldInputProps) {
   const inputId = `field-${path}`;
   const current = asString(value);
   const isImage = field.type === CaptureFieldType.Image;
@@ -269,11 +371,23 @@ function MediaFieldInput({ field, value, onChange, disabled, path }: SchemaField
       {current ? (
         <div className="flex items-center gap-2">
           {isImage && current.startsWith('data:image') ? (
-            <img src={current} alt={field.label} className="max-h-32 rounded-md border border-input" />
+            <img
+              src={current}
+              alt={field.label}
+              className="max-h-32 rounded-md border border-input"
+            />
           ) : (
-            <span className="truncate text-body-2 text-muted-foreground">Attached</span>
+            <span className="truncate text-body-2 text-muted-foreground">
+              Attached
+            </span>
           )}
-          <Button type="button" variant="ghost" size="sm" onClick={() => onChange('')} disabled={disabled}>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onChange('')}
+            disabled={disabled}
+          >
             Clear
           </Button>
         </div>
@@ -286,7 +400,12 @@ function MediaFieldInput({ field, value, onChange, disabled, path }: SchemaField
  * `audio` capture — records a voice memo via MediaRecorder and stores it as a
  * data-URL. Browser APIs are touched only inside the record handler (SSR-safe).
  */
-function AudioFieldInput({ value, onChange, disabled, path }: SchemaFieldInputProps) {
+function AudioFieldInput({
+  value,
+  onChange,
+  disabled,
+  path,
+}: SchemaFieldInputProps) {
   const inputId = `field-${path}`;
   const current = asString(value);
   const [recording, setRecording] = useState(false);
@@ -310,7 +429,9 @@ function AudioFieldInput({ value, onChange, disabled, path }: SchemaFieldInputPr
           track.stop();
         }
         readAsDataUrl(
-          new Blob(chunksRef.current, { type: recorder.mimeType || 'audio/webm' }),
+          new Blob(chunksRef.current, {
+            type: recorder.mimeType || 'audio/webm',
+          }),
           onChange,
         );
       };
@@ -332,16 +453,34 @@ function AudioFieldInput({ value, onChange, disabled, path }: SchemaFieldInputPr
     <div className="mt-1 space-y-2">
       <div className="flex items-center gap-2">
         {recording ? (
-          <Button type="button" variant="secondary" size="sm" onClick={stop} disabled={disabled}>
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={stop}
+            disabled={disabled}
+          >
             Stop
           </Button>
         ) : (
-          <Button type="button" variant="secondary" size="sm" onClick={() => void start()} disabled={disabled}>
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() => void start()}
+            disabled={disabled}
+          >
             {current ? 'Re-record' : 'Record'}
           </Button>
         )}
         {current ? (
-          <Button type="button" variant="ghost" size="sm" onClick={() => onChange('')} disabled={disabled}>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => onChange('')}
+            disabled={disabled}
+          >
             Clear
           </Button>
         ) : null}
@@ -368,15 +507,29 @@ function NestedField(props: SchemaFieldInputProps) {
         {field.label}
         {field.required ? <span className="text-destructive"> *</span> : null}
       </Label>
-      {field.description ? <p className="mb-1 text-caption text-ink-3">{field.description}</p> : null}
+      {field.description ? (
+        <p className="mb-1 text-caption text-ink-3">{field.description}</p>
+      ) : null}
       <SchemaFieldInput {...props} />
-      {error ? <p className="mt-1 text-caption text-destructive">{error}</p> : null}
+      {error ? (
+        <p className="mt-1 text-caption text-destructive">{error}</p>
+      ) : null}
     </div>
   );
 }
 
-function ObjectInput({ field, value, onChange, disabled, path, errors, renderReference }: SchemaFieldInputProps) {
-  const record = (value && typeof value === 'object' && !Array.isArray(value) ? value : {}) as CaptureValues;
+function ObjectInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  path,
+  errors,
+  renderReference,
+}: SchemaFieldInputProps) {
+  const record = (
+    value && typeof value === 'object' && !Array.isArray(value) ? value : {}
+  ) as CaptureValues;
   const fields = field.fields ?? [];
   return (
     <div className="mt-1 space-y-3 rounded-lg border border-rule bg-paper-elev/40 p-3">
@@ -396,24 +549,44 @@ function ObjectInput({ field, value, onChange, disabled, path, errors, renderRef
   );
 }
 
-function ListInput({ field, value, onChange, disabled, path, errors, renderReference }: SchemaFieldInputProps) {
+function ListInput({
+  field,
+  value,
+  onChange,
+  disabled,
+  path,
+  errors,
+  renderReference,
+}: SchemaFieldInputProps) {
   const items = (Array.isArray(value) ? value : []) as CaptureValues[];
   const fields = field.fields ?? [];
   const atMax = typeof field.max === 'number' && items.length >= field.max;
 
-  const setItem = (index: number, next: CaptureValues) => onChange(items.map((it, i) => (i === index ? next : it)));
-  const removeItem = (index: number) => onChange(items.filter((_, i) => i !== index));
+  const setItem = (index: number, next: CaptureValues) =>
+    onChange(items.map((it, i) => (i === index ? next : it)));
+  const removeItem = (index: number) =>
+    onChange(items.filter((_, i) => i !== index));
   const addItem = () => onChange([...items, {}]);
 
   return (
     <div className="mt-1 space-y-2">
       {items.map((item, index) => (
-        <div key={index} className="relative space-y-3 rounded-lg border border-rule bg-paper-elev/40 p-3">
+        <div
+          key={index}
+          className="relative space-y-3 rounded-lg border border-rule bg-paper-elev/40 p-3"
+        >
           <div className="flex items-center justify-between">
             <span className="text-caption font-medium text-ink-3">
               {field.label} #{index + 1}
             </span>
-            <Button type="button" variant="ghost" size="icon" onClick={() => removeItem(index)} disabled={disabled} aria-label={`Remove ${field.label} ${index + 1}`}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => removeItem(index)}
+              disabled={disabled}
+              aria-label={`Remove ${field.label} ${index + 1}`}
+            >
               <Trash2 className="h-4 w-4" />
             </Button>
           </div>
@@ -431,7 +604,14 @@ function ListInput({ field, value, onChange, disabled, path, errors, renderRefer
           ))}
         </div>
       ))}
-      <Button type="button" variant="outline" size="sm" onClick={addItem} disabled={disabled || atMax} className={cn(items.length === 0 && 'w-full')}>
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={addItem}
+        disabled={disabled || atMax}
+        className={cn(items.length === 0 && 'w-full')}
+      >
         <Plus className="mr-1.5 h-3.5 w-3.5" />
         Add {field.label}
       </Button>

package/src/ui/capture/schema-form.tsx

@@ -15,12 +15,17 @@ import { Sparkles } from 'lucide-react';
 import { type ReactNode } from 'react';
 
 import { cn } from '../cn';
+import {
+  type CaptureFieldSpec,
+  type CaptureSchema,
+  type CaptureSection,
+  type CaptureValues,
+  toSections,
+} from './field-spec';
+import { SchemaFieldInput, type RenderReference } from './schema-field-input';
 import { Badge } from '../primitives/badge';
 import { Label } from '../primitives/label';
 
-import { type CaptureFieldSpec, type CaptureSchema, type CaptureSection, type CaptureValues, toSections } from './field-spec';
-import { SchemaFieldInput, type RenderReference } from './schema-field-input';
-
 export interface SchemaFormProps {
   /** Flat schema. Mutually exclusive with `sections`. */
   readonly fields?: readonly CaptureFieldSpec[];
@@ -44,7 +49,9 @@ export interface SchemaFormProps {
 }
 
 function toSet(keys: SchemaFormProps['suggestedKeys']): ReadonlySet<string> {
-  if (!keys) return new Set();
+  if (!keys) {
+    return new Set();
+  }
   return keys instanceof Set ? keys : new Set(keys as readonly string[]);
 }
 
@@ -54,20 +61,43 @@ function toSet(keys: SchemaFormProps['suggestedKeys']): ReadonlySet<string> {
  * const { errors } = useSchemaValidation(fields, values);
  * <SchemaForm fields={fields} values={values} onChange={setValues} errors={errors} />
  */
-export function SchemaForm({ fields, sections, schema, values, onChange, errors, suggestedKeys, disabled, renderReference, className, footer }: SchemaFormProps) {
-  const resolved: readonly CaptureSection[] = toSections(sections ?? (fields ? fields : schema) ?? []);
+export function SchemaForm({
+  fields,
+  sections,
+  schema,
+  values,
+  onChange,
+  errors,
+  suggestedKeys,
+  disabled,
+  renderReference,
+  className,
+  footer,
+}: SchemaFormProps) {
+  const resolved: readonly CaptureSection[] = toSections(
+    sections ?? (fields ? fields : schema) ?? [],
+  );
   const suggested = toSet(suggestedKeys);
 
-  const setField = (key: string, value: unknown) => onChange({ ...values, [key]: value });
+  const setField = (key: string, value: unknown) =>
+    onChange({ ...values, [key]: value });
 
   return (
     <div className={cn('space-y-6', className)}>
       {resolved.map((section) => (
-        <fieldset key={section.key} className="space-y-3 border-0 p-0" disabled={disabled}>
+        <fieldset
+          key={section.key}
+          className="space-y-3 border-0 p-0"
+          disabled={disabled}
+        >
           {section.title ? (
             <legend className="mb-1 text-subtitle font-semibold text-ink">
               {section.title}
-              {section.description ? <span className="mt-0.5 block text-caption font-normal text-ink-3">{section.description}</span> : null}
+              {section.description ? (
+                <span className="mt-0.5 block text-caption font-normal text-ink-3">
+                  {section.description}
+                </span>
+              ) : null}
             </legend>
           ) : null}
           {section.fields.map((field) => {
@@ -78,15 +108,24 @@ export function SchemaForm({ fields, sections, schema, values, onChange, errors,
                 <div className="flex items-center gap-2">
                   <Label htmlFor={`field-${field.key}`}>
                     {field.label}
-                    {field.required ? <span className="text-destructive"> *</span> : null}
+                    {field.required ? (
+                      <span className="text-destructive"> *</span>
+                    ) : null}
                   </Label>
                   {isSuggested ? (
-                    <Badge variant="outline" className="gap-1 border-primary/30 bg-primary/10 px-1.5 py-0 text-caption text-primary">
+                    <Badge
+                      variant="outline"
+                      className="gap-1 border-primary/30 bg-primary/10 px-1.5 py-0 text-caption text-primary"
+                    >
                       <Sparkles className="h-3 w-3" /> AI suggested
                     </Badge>
                   ) : null}
                 </div>
-                {field.description ? <p className="mb-1 text-caption text-ink-3">{field.description}</p> : null}
+                {field.description ? (
+                  <p className="mb-1 text-caption text-ink-3">
+                    {field.description}
+                  </p>
+                ) : null}
                 <SchemaFieldInput
                   field={field}
                   value={values[field.key]}
@@ -96,7 +135,9 @@ export function SchemaForm({ fields, sections, schema, values, onChange, errors,
                   errors={errors}
                   renderReference={renderReference}
                 />
-                {error ? <p className="mt-1 text-caption text-destructive">{error}</p> : null}
+                {error ? (
+                  <p className="mt-1 text-caption text-destructive">{error}</p>
+                ) : null}
               </div>
             );
           })}

package/src/ui/capture/use-prefill.ts

@@ -57,8 +57,12 @@ export function usePrefill<T extends CaptureValues = CaptureValues>(
 ): UsePrefillResult<T> {
   const { fetchDefaults, initialValues, enabled = true } = options;
 
-  const [values, setValuesState] = useState<T>(() => ({ ...(initialValues ?? ({} as T)) }));
-  const [suggested, setSuggested] = useState<ReadonlySet<string>>(() => new Set());
+  const [values, setValuesState] = useState<T>(() => ({
+    ...(initialValues ?? ({} as T)),
+  }));
+  const [suggested, setSuggested] = useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<unknown>(null);
 
@@ -72,7 +76,9 @@ export function usePrefill<T extends CaptureValues = CaptureValues>(
     touched.current.add(key);
     setValuesState((prev) => ({ ...prev, [key]: value }));
     setSuggested((prev) => {
-      if (!prev.has(key)) return prev;
+      if (!prev.has(key)) {
+        return prev;
+      }
       const next = new Set(prev);
       next.delete(key);
       return next;
@@ -82,9 +88,7 @@ export function usePrefill<T extends CaptureValues = CaptureValues>(
   const setValues = useCallback((updater: Partial<T> | ((prev: T) => T)) => {
     setValuesState((prev) => {
       const next =
-        typeof updater === 'function'
-          ? updater(prev)
-          : { ...prev, ...updater };
+        typeof updater === 'function' ? updater(prev) : { ...prev, ...updater };
       const changed = new Set<string>();
       for (const k of Object.keys(next)) {
         if (next[k] !== prev[k]) {
@@ -94,9 +98,13 @@ export function usePrefill<T extends CaptureValues = CaptureValues>(
       }
       if (changed.size > 0) {
         setSuggested((prevSug) => {
-          if (![...changed].some((k) => prevSug.has(k))) return prevSug;
+          if (![...changed].some((k) => prevSug.has(k))) {
+            return prevSug;
+          }
           const n = new Set(prevSug);
-          for (const k of changed) n.delete(k);
+          for (const k of changed) {
+            n.delete(k);
+          }
           return n;
         });
       }
@@ -110,14 +118,17 @@ export function usePrefill<T extends CaptureValues = CaptureValues>(
     setError(null);
     void fetchDefaults()
       .then((defaults) => {
-        if (id !== requestId.current) return; // superseded — drop
+        if (id !== requestId.current) {
+          return;
+        } // superseded — drop
         const applied: string[] = [];
         setValuesState((prev) => {
           const next = { ...prev };
           for (const [key, value] of Object.entries(defaults)) {
             // Only fill keys the user hasn't touched and that are still empty.
             const current = prev[key];
-            const isEmpty = current === undefined || current === null || current === '';
+            const isEmpty =
+              current === undefined || current === null || current === '';
             if (!touched.current.has(key) && isEmpty && value !== undefined) {
               (next as CaptureValues)[key] = value;
               applied.push(key);
@@ -126,28 +137,50 @@ export function usePrefill<T extends CaptureValues = CaptureValues>(
           return next;
         });
         setSuggested((prev) => {
-          if (applied.length === 0) return prev;
+          if (applied.length === 0) {
+            return prev;
+          }
           const n = new Set(prev);
-          for (const k of applied) n.add(k);
+          for (const k of applied) {
+            n.add(k);
+          }
           return n;
         });
       })
       .catch((e: unknown) => {
-        if (id !== requestId.current) return;
+        if (id !== requestId.current) {
+          return;
+        }
         setError(e);
       })
       .finally(() => {
-        if (id === requestId.current) setLoading(false);
+        if (id === requestId.current) {
+          setLoading(false);
+        }
       });
   }, [fetchDefaults]);
 
   useEffect(() => {
-    if (enabled) run();
+    if (enabled) {
+      run();
+    }
     // Run once on mount / when re-enabled; `reload()` is the explicit re-fetch.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enabled]);
 
-  const isSuggested = useCallback((key: string) => suggested.has(key), [suggested]);
+  const isSuggested = useCallback(
+    (key: string) => suggested.has(key),
+    [suggested],
+  );
 
-  return { values, setValue, setValues, suggestedKeys: suggested, isSuggested, loading, error, reload: run };
+  return {
+    values,
+    setValue,
+    setValues,
+    suggestedKeys: suggested,
+    isSuggested,
+    loading,
+    error,
+    reload: run,
+  };
 }