@xemahq/ui-kernel 0.11.0 → 0.11.2

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

@@ -1,620 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// SchemaFieldInput — one typed input per CaptureFieldType
-//
-// Mirrors app-forge-web's `FieldInput` (the 10 typed inputs) using ui-kernel
-// primitives, and ADDS the `object` (nested group) and `list` (repeatable
-// items) composites. `reference` is source-agnostic here: it defaults to a text
-// input, but a caller can inject a picker via `renderReference` (that is the
-// seam app-forge uses to plug its record-backed `ReferenceSelect`).
-//
-// This is the ONE schema→input renderer in the tree. The connector-specific
-// `CredentialFormRenderer` was folded in here: a DECLARED-secret field
-// (`spec.isSecret`) renders the write-only masked input, and `email`/`url`/
-// `json` are ordinary capture field types. Secrecy is never inferred from the
-// field type.
-// ═══════════════════════════════════════════════════════════════════════════
-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';
-
-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';
-
-/** Optional override for the `reference` field type (record-backed picker). */
-export type RenderReference = (args: {
-  readonly field: CaptureFieldSpec;
-  readonly value: unknown;
-  readonly onChange: (value: unknown) => void;
-  readonly disabled?: boolean;
-  readonly inputId: string;
-}) => ReactNode;
-
-export interface SchemaFieldInputProps {
-  readonly field: CaptureFieldSpec;
-  readonly value: unknown;
-  readonly onChange: (value: unknown) => void;
-  readonly disabled?: boolean;
-  /** Dot-path prefix for nested/list item fields (labels/ids stay unique). */
-  readonly path: string;
-  /** Per-field errors keyed by dot-path (from `useSchemaValidation` or server). */
-  readonly errors?: Readonly<Record<string, string>>;
-  readonly renderReference?: RenderReference;
-}
-
-/** Native `type` for the single-line text-ish capture types. */
-function nativeInputType(
-  type: CaptureFieldSpec['type'],
-): 'text' | 'email' | 'url' {
-  switch (type) {
-    case CaptureFieldType.Email:
-      return 'email';
-    case CaptureFieldType.Url:
-      return 'url';
-    default:
-      return 'text';
-  }
-}
-
-export function SchemaFieldInput(props: SchemaFieldInputProps) {
-  const { field, value, onChange, disabled, path, renderReference } = props;
-  const inputId = `field-${path}`;
-
-  // 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,
-    );
-
-  // 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}
-      />
-    );
-  }
-
-  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}
-        />
-      );
-    case CaptureFieldType.Json:
-      return (
-        <Textarea
-          id={inputId}
-          value={asString(value)}
-          onChange={(e) => emit(e.target.value)}
-          disabled={disabled}
-          rows={6}
-          spellCheck={false}
-          className="min-h-[120px] font-mono"
-          placeholder={field.placeholder}
-        />
-      );
-    case CaptureFieldType.Number:
-      return (
-        <Input
-          id={inputId}
-          type="number"
-          value={asString(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'}
-        />
-      );
-    case CaptureFieldType.User:
-      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}
-          />
-        </div>
-      );
-    case CaptureFieldType.Date:
-      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}
-        />
-      );
-    case CaptureFieldType.Enum:
-      return (
-        <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}>
-              {v}
-            </option>
-          ))}
-        </select>
-      );
-    case CaptureFieldType.Reference:
-      return renderReference ? (
-        <>
-          {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'}
-        />
-      );
-    case CaptureFieldType.Object:
-      return <ObjectInput {...props} />;
-    case CaptureFieldType.List:
-      return <ListInput {...props} />;
-    case CaptureFieldType.Image:
-    case CaptureFieldType.File:
-      return <MediaFieldInput {...props} />;
-    case CaptureFieldType.Audio:
-      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}
-        />
-      );
-  }
-}
-
-/**
- * Write-only input for a DECLARED-secret field.
- *
- * `autoComplete="off"` + `data-lpignore` keep password managers and the browser
- * credential store from persisting the value; the reveal toggle is local and
- * transient. The component holds no cache: it renders exactly the value the
- * caller passes and nothing else, so a read path that returns no secret
- * material (the only kind this kit is used with) can never repopulate it.
- */
-function SecretFieldInput({
-  field,
-  value,
-  onChange,
-  disabled,
-  inputId,
-}: Readonly<{
-  field: CaptureFieldSpec;
-  value: unknown;
-  onChange: (next: unknown) => void;
-  disabled?: boolean;
-  inputId: string;
-}>) {
-  const [reveal, setReveal] = useState(false);
-  const multiline =
-    field.type === CaptureFieldType.Json ||
-    field.type === CaptureFieldType.Text;
-
-  if (multiline && reveal) {
-    return (
-      <div className="relative">
-        <Textarea
-          id={inputId}
-          value={asString(value)}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          rows={6}
-          spellCheck={false}
-          autoComplete="off"
-          className="min-h-[120px] pr-9 font-mono"
-          placeholder={field.placeholder}
-        />
-        <RevealToggle reveal={reveal} onToggle={() => setReveal((v) => !v)} />
-      </div>
-    );
-  }
-
-  return (
-    <div className="relative">
-      <Input
-        id={inputId}
-        type={reveal ? 'text' : 'password'}
-        value={asString(value)}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        autoComplete="off"
-        spellCheck={false}
-        data-lpignore="true"
-        className="pr-9 font-mono"
-        placeholder={field.placeholder}
-      />
-      <RevealToggle reveal={reveal} onToggle={() => setReveal((v) => !v)} />
-    </div>
-  );
-}
-
-function RevealToggle({
-  reveal,
-  onToggle,
-}: Readonly<{ reveal: boolean; onToggle: () => void }>) {
-  return (
-    <Button
-      type="button"
-      size="sm"
-      variant="ghost"
-      className="absolute right-0 top-0 h-9 w-9 p-0"
-      onClick={onToggle}
-      aria-label={reveal ? 'Hide value' : 'Show value'}
-    >
-      {reveal ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-    </Button>
-  );
-}
-
-const FILE_INPUT_CLASS =
-  'block w-full text-body-2 text-foreground file:mr-3 file:rounded-md file:border-0 file:bg-secondary file:px-3 file:py-1.5 file:text-body-2 file:text-secondary-foreground hover:file:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50';
-
-/** Read a File/Blob as a base64 data-URL (JSON-serializable, offline-safe). */
-function readAsDataUrl(file: Blob, onDone: (dataUrl: string) => void): void {
-  const reader = new FileReader();
-  reader.onload = () =>
-    onDone(typeof reader.result === 'string' ? reader.result : '');
-  reader.readAsDataURL(file);
-}
-
-/**
- * `image`/`file` capture. On mobile, `field.capture` makes an image field open
- * 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) {
-  const inputId = `field-${path}`;
-  const current = asString(value);
-  const isImage = field.type === CaptureFieldType.Image;
-  const accept = field.accept ?? (isImage ? 'image/*' : undefined);
-  return (
-    <div className="mt-1 space-y-2">
-      <input
-        id={inputId}
-        type="file"
-        className={FILE_INPUT_CLASS}
-        disabled={disabled}
-        {...(accept ? { accept } : {})}
-        {...(field.capture ? { capture: field.capture } : {})}
-        onChange={(e) => {
-          const file = e.target.files?.[0];
-          if (file) {
-            readAsDataUrl(file, onChange);
-          }
-        }}
-      />
-      {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"
-            />
-          ) : (
-            <span className="truncate text-body-2 text-muted-foreground">
-              Attached
-            </span>
-          )}
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={() => onChange('')}
-            disabled={disabled}
-          >
-            Clear
-          </Button>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * `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) {
-  const inputId = `field-${path}`;
-  const current = asString(value);
-  const [recording, setRecording] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const recorderRef = useRef<MediaRecorder | null>(null);
-  const chunksRef = useRef<Blob[]>([]);
-
-  const start = useCallback(async () => {
-    setError(null);
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      const recorder = new MediaRecorder(stream);
-      chunksRef.current = [];
-      recorder.ondataavailable = (e) => {
-        if (e.data.size > 0) {
-          chunksRef.current.push(e.data);
-        }
-      };
-      recorder.onstop = () => {
-        for (const track of stream.getTracks()) {
-          track.stop();
-        }
-        readAsDataUrl(
-          new Blob(chunksRef.current, {
-            type: recorder.mimeType || 'audio/webm',
-          }),
-          onChange,
-        );
-      };
-      recorderRef.current = recorder;
-      recorder.start();
-      setRecording(true);
-    } catch {
-      setError('Microphone unavailable or permission denied.');
-    }
-  }, [onChange]);
-
-  const stop = useCallback(() => {
-    recorderRef.current?.stop();
-    recorderRef.current = null;
-    setRecording(false);
-  }, []);
-
-  return (
-    <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}
-          >
-            Stop
-          </Button>
-        ) : (
-          <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}
-          >
-            Clear
-          </Button>
-        ) : null}
-      </div>
-      {error ? <p className="text-body-2 text-destructive">{error}</p> : null}
-      {current && !recording ? (
-        <Button asChild variant="outline" size="sm">
-          <a id={inputId} href={current} target="_blank" rel="noreferrer">
-            Open recorded audio
-          </a>
-        </Button>
-      ) : null}
-    </div>
-  );
-}
-
-/** Renders one label + input + error block for a nested field. */
-function NestedField(props: SchemaFieldInputProps) {
-  const { field, path, errors } = props;
-  const error = errors?.[path];
-  return (
-    <div>
-      <Label htmlFor={`field-${path}`}>
-        {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}
-      <SchemaFieldInput {...props} />
-      {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;
-  const fields = field.fields ?? [];
-  return (
-    <div className="mt-1 space-y-3 rounded-lg border border-rule bg-paper-elev/40 p-3">
-      {fields.map((child) => (
-        <NestedField
-          key={child.key}
-          field={child}
-          value={record[child.key]}
-          onChange={(v) => onChange({ ...record, [child.key]: v })}
-          disabled={disabled}
-          path={`${path}.${child.key}`}
-          errors={errors}
-          renderReference={renderReference}
-        />
-      ))}
-    </div>
-  );
-}
-
-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 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 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}`}
-            >
-              <Trash2 className="h-4 w-4" />
-            </Button>
-          </div>
-          {fields.map((child) => (
-            <NestedField
-              key={child.key}
-              field={child}
-              value={item[child.key]}
-              onChange={(v) => setItem(index, { ...item, [child.key]: v })}
-              disabled={disabled}
-              path={`${path}.${index}.${child.key}`}
-              errors={errors}
-              renderReference={renderReference}
-            />
-          ))}
-        </div>
-      ))}
-      <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>
-    </div>
-  );
-}