form 1 topics added

components/practice/fraction-input.tsx

@@ -1,12 +1,20 @@
 "use client";
 
+import { useRef, type KeyboardEvent } from "react";
 import { cn } from "@/lib/utils";
 
+/** Keep only digits and a single leading minus sign, so junk like "1-2" can't be typed. */
+function sanitizeSigned(value: string): string {
+  const cleaned = value.replace(/[^0-9-]/g, "");
+  return cleaned.replace(/(?!^)-/g, ""); // drop any minus that isn't at the start
+}
+
 interface FractionInputProps {
   numerator: string;
   denominator: string;
   onNumeratorChange: (value: string) => void;
   onDenominatorChange: (value: string) => void;
+  onSubmit?: () => void;
   disabled?: boolean;
   className?: string;
 }
@@ -16,31 +24,50 @@ export function FractionInput({
   denominator,
   onNumeratorChange,
   onDenominatorChange,
+  onSubmit,
   disabled = false,
   className,
 }: FractionInputProps) {
+  const denominatorRef = useRef<HTMLInputElement>(null);
+
+  const inputClass =
+    "w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none";
+
   return (
     <div className={cn("inline-flex flex-col items-center gap-0.5", className)}>
       <input
         type="text"
         inputMode="numeric"
-        pattern="[0-9-]*"
         value={numerator}
-        onChange={(e) => onNumeratorChange(e.target.value)}
+        onChange={(e) => onNumeratorChange(sanitizeSigned(e.target.value))}
+        onKeyDown={(e) => {
+          // "/" is how pupils think of a fraction — jump to the denominator.
+          if (e.key === "/" || e.key === "Enter") {
+            if (e.key === "/") {
+              e.preventDefault();
+              denominatorRef.current?.focus();
+            } else {
+              onSubmit?.();
+            }
+          }
+        }}
         disabled={disabled}
-        className="w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none"
+        className={inputClass}
         placeholder="?"
         aria-label="Numerator"
       />
       <div className="h-0.5 w-16 bg-foreground" />
       <input
+        ref={denominatorRef}
         type="text"
         inputMode="numeric"
-        pattern="[0-9-]*"
         value={denominator}
-        onChange={(e) => onDenominatorChange(e.target.value)}
+        onChange={(e) => onDenominatorChange(sanitizeSigned(e.target.value))}
+        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {
+          if (e.key === "Enter") onSubmit?.();
+        }}
         disabled={disabled}
-        className="w-16 rounded-lg border border-border bg-surface px-2 py-1.5 text-center text-lg font-bold focus:border-unit-1 focus:outline-none"
+        className={inputClass}
         placeholder="?"
         aria-label="Denominator"
       />
@@ -51,17 +78,21 @@ export function FractionInput({
 interface DecimalInputProps {
   value: string;
   onChange: (value: string) => void;
+  onSubmit?: () => void;
   disabled?: boolean;
   className?: string;
 }
 
-export function DecimalInput({ value, onChange, disabled, className }: DecimalInputProps) {
+export function DecimalInput({ value, onChange, onSubmit, disabled, className }: DecimalInputProps) {
   return (
     <input
       type="text"
       inputMode="decimal"
       value={value}
       onChange={(e) => onChange(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") onSubmit?.();
+      }}
       disabled={disabled}
       className={cn(
         "w-28 rounded-lg border border-border bg-surface px-3 py-2 text-center text-lg font-bold focus:border-unit-2 focus:outline-none",