Polish pass: removed lastTouched dead code, selective useWatch perf, token sweep, required-field messages, scroll-to-first-error, file prefill display, matrix sticky shadow

components/fields/FieldRenderer.tsx

@@ -25,6 +25,10 @@ interface FieldRendererProps {
  * Currency, percent, and number all use input type="number" with appropriate
  * `step` and inputMode for mobile keyboards. We keep formatting light — the
  * server is the source of truth for normalization.
+ *
+ * Required-field validation: when `field.required` is true, RHF's register
+ * receives a string error message so the inline ErrorText has something to
+ * display. Without that, validation would block submit silently.
  */
 export function FieldRenderer({
   field,
@@ -39,6 +43,7 @@ export function FieldRenderer({
   const describedBy = [helpId, errorId].filter(Boolean).join(" ") || undefined;
   const errorMsg = errors[field.name]?.message as string | undefined;
   const effectiveOptions = resolvedOptions ?? field.options ?? [];
+  const requiredOpt = field.required ? `${field.label} is required.` : false;
 
   const baseInputClass =
     "w-full rounded-md border border-rule bg-paper px-3 py-2 text-ink " +
@@ -49,7 +54,6 @@ export function FieldRenderer({
 
   // ── Readonly display field ──────────────────────────────────────────────
   if (field.type === "readonly") {
-    // Look up the human label if this readonly references an option-group field.
     const opt = effectiveOptions.find((o) => o.value === readonlyValue);
     const display =
       readonlyValue == null || readonlyValue === ""
@@ -62,7 +66,7 @@ export function FieldRenderer({
           id={id}
           role="textbox"
           aria-readonly="true"
-          className="rounded-md border border-stone-200 bg-stone-50 px-3 py-2 text-stone-700"
+          className="rounded-md border border-rule bg-paper-2/40 px-3 py-2 text-ink-soft"
         >
           {display}
         </div>
@@ -80,11 +84,11 @@ export function FieldRenderer({
           type="checkbox"
           aria-describedby={describedBy}
           aria-invalid={errorMsg ? true : undefined}
-          {...register(field.name)}
-          className="mt-0.5 h-4 w-4 rounded border-stone-400 text-leaf-700 focus:ring-2 focus:ring-leaf-500/40"
+          {...register(field.name, { required: requiredOpt })}
+          className="mt-0.5 h-4 w-4 rounded border-rule text-leaf-700 focus:ring-2 focus:ring-leaf-500/40"
         />
         <div className="flex-1">
-          <label htmlFor={id} className="font-medium text-stone-800 cursor-pointer">
+          <label htmlFor={id} className="font-medium text-ink cursor-pointer">
             {field.label}
             {field.required && <RequiredMark />}
           </label>
@@ -108,7 +112,7 @@ export function FieldRenderer({
           placeholder={field.placeholder}
           maxLength={field.maxLength}
           rows={4}
-          {...register(field.name, { required: field.required })}
+          {...register(field.name, { required: requiredOpt })}
           className={baseInputClass + " min-h-[7rem] leading-6"}
         />
         {field.help && <Help id={helpId!}>{field.help}</Help>}
@@ -127,8 +131,8 @@ export function FieldRenderer({
           aria-describedby={describedBy}
           aria-invalid={errorMsg ? true : undefined}
           aria-required={field.required || undefined}
-          {...register(field.name, { required: field.required })}
-          className={baseInputClass + " bg-white"}
+          {...register(field.name, { required: requiredOpt })}
+          className={baseInputClass}
           defaultValue=""
         >
           <option value="" disabled>
@@ -154,7 +158,7 @@ export function FieldRenderer({
         aria-invalid={errorMsg ? true : undefined}
         className="space-y-2"
       >
-        <legend className="block text-sm font-medium text-stone-800">
+        <legend className="block text-sm font-medium text-ink">
           {field.label}
           {field.required && <RequiredMark />}
         </legend>
@@ -165,16 +169,16 @@ export function FieldRenderer({
               <label
                 key={o.value}
                 htmlFor={optId}
-                className="flex items-start gap-2 rounded border border-stone-200 px-3 py-2 hover:bg-stone-50 cursor-pointer"
+                className="flex items-start gap-2 rounded border border-rule bg-paper px-3 py-2 hover:bg-paper-2/60 cursor-pointer transition-colors"
               >
                 <input
                   id={optId}
                   type="checkbox"
                   value={o.value}
                   {...register(field.name)}
-                  className="mt-0.5 h-4 w-4 rounded border-stone-400 text-leaf-700 focus:ring-2 focus:ring-leaf-500/40"
+                  className="mt-0.5 h-4 w-4 rounded border-rule text-leaf-700 focus:ring-2 focus:ring-leaf-500/40"
                 />
-                <span className="text-sm text-stone-800">{o.label}</span>
+                <span className="text-sm text-ink-soft">{o.label}</span>
               </label>
             );
           })}
@@ -187,17 +191,24 @@ export function FieldRenderer({
 
   // ── File ────────────────────────────────────────────────────────────────
   if (field.type === "file") {
+    const priorName = typeof readonlyValue === "string" ? readonlyValue : "";
+    const hasPrior = priorName.length > 0;
     return (
       <div className="space-y-1">
         <Label id={id} field={field} />
+        {hasPrior && (
+          <p className="text-xs text-ink-soft" aria-live="polite">
+            Currently on file: <span className="font-medium text-ink">{priorName}</span>
+          </p>
+        )}
         <input
           id={id}
           type="file"
           aria-describedby={describedBy}
           aria-invalid={errorMsg ? true : undefined}
           aria-required={field.required || undefined}
-          {...register(field.name, { required: field.required })}
-          className="block w-full text-sm text-stone-700 file:mr-3 file:rounded-md file:border-0 file:bg-leaf-100 file:px-3 file:py-2 file:text-leaf-800 file:text-sm file:font-medium hover:file:bg-leaf-200 cursor-pointer"
+          {...register(field.name, { required: requiredOpt })}
+          className="block w-full text-sm text-ink-soft file:mr-3 file:rounded-md file:border-0 file:bg-leaf-100 file:px-3 file:py-2 file:text-leaf-800 file:text-sm file:font-medium hover:file:bg-leaf-200 cursor-pointer transition"
         />
         {field.help && <Help id={helpId!}>{field.help}</Help>}
         {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
@@ -216,7 +227,7 @@ export function FieldRenderer({
           {prefix && (
             <span
               aria-hidden
-              className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-stone-500"
+              className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-mute"
             >
               {prefix}
             </span>
@@ -233,11 +244,12 @@ export function FieldRenderer({
             min={field.min}
             max={field.max}
             {...register(field.name, {
-              required: field.required,
+              required: requiredOpt,
               valueAsNumber: true,
             })}
             className={
               baseInputClass +
+              " tabular-nums" +
               (prefix ? " pl-7" : "") +
               (suffix ? " pr-8" : "")
             }
@@ -245,7 +257,7 @@ export function FieldRenderer({
           {suffix && (
             <span
               aria-hidden
-              className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-stone-500"
+              className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-ink-mute"
             >
               {suffix}
             </span>
@@ -280,7 +292,7 @@ export function FieldRenderer({
           field.type === "phone" ? "tel" :
           undefined
         }
-        {...register(field.name, { required: field.required })}
+        {...register(field.name, { required: requiredOpt })}
         className={baseInputClass}
       />
       {field.help && <Help id={helpId!}>{field.help}</Help>}
@@ -291,7 +303,7 @@ export function FieldRenderer({
 
 function Label({ id, field }: { id: string; field: FieldConfig }) {
   return (
-    <label htmlFor={id} className="block text-sm font-medium text-stone-800">
+    <label htmlFor={id} className="block text-sm font-medium text-ink">
       {field.label}
       {field.required && <RequiredMark />}
     </label>
@@ -300,7 +312,7 @@ function Label({ id, field }: { id: string; field: FieldConfig }) {
 
 function RequiredMark() {
   return (
-    <span aria-label="required" className="ml-1 text-red-600">
+    <span aria-label="required" className="ml-1 text-clay-700">
       *
     </span>
   );
@@ -308,7 +320,7 @@ function RequiredMark() {
 
 function Help({ id, children }: { id: string; children: React.ReactNode }) {
   return (
-    <p id={id} className="text-xs text-stone-600">
+    <p id={id} className="text-xs text-ink-mute leading-relaxed">
       {children}
     </p>
   );
@@ -316,7 +328,7 @@ function Help({ id, children }: { id: string; children: React.ReactNode }) {
 
 function ErrorText({ id, children }: { id: string; children: React.ReactNode }) {
   return (
-    <p id={id} role="alert" className="text-xs font-medium text-red-700">
+    <p id={id} role="alert" className="text-xs font-medium text-clay-700">
       {children}
     </p>
   );