{PROPULSION_METHODS.map((method) => (
diff --git a/src/components/admin/editors/TechnicalSpecsEditor.tsx b/src/components/admin/editors/TechnicalSpecsEditor.tsx
index e6050af7..8efd4fc4 100644
--- a/src/components/admin/editors/TechnicalSpecsEditor.tsx
+++ b/src/components/admin/editors/TechnicalSpecsEditor.tsx
@@ -8,6 +8,7 @@ import { Card } from "@/components/ui/card";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { useUnitPreferences } from "@/hooks/useUnitPreferences";
import { toast } from "sonner";
+import { fieldHints } from "@/lib/enhancedValidation";
import {
convertValueToMetric,
convertValueFromMetric,
diff --git a/src/components/help/TerminologyDialog.tsx b/src/components/help/TerminologyDialog.tsx
new file mode 100644
index 00000000..5478acd3
--- /dev/null
+++ b/src/components/help/TerminologyDialog.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { BookOpen, Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getAllCategories, getTermsByCategory, searchGlossary, type GlossaryTerm } from "@/lib/glossary";
+
+export function TerminologyDialog() {
+ const [open, setOpen] = useState(false);
+ const [searchQuery, setSearchQuery] = useState("");
+
+ const categories = getAllCategories();
+ const searchResults = searchQuery ? searchGlossary(searchQuery) : [];
+
+ const renderTermCard = (term: GlossaryTerm) => (
+
+
+
{term.term}
+
+ {term.category.replace('-', ' ')}
+
+
+
{term.definition}
+ {term.example && (
+
+ Example: {term.example}
+
+ )}
+ {term.relatedTerms && term.relatedTerms.length > 0 && (
+
+ Related:
+ {term.relatedTerms.map(rt => (
+
+ {rt.replace(/-/g, ' ')}
+
+ ))}
+
+ )}
+
+ );
+
+ return (
+
+ );
+}
diff --git a/src/components/ui/term-tooltip.tsx b/src/components/ui/term-tooltip.tsx
new file mode 100644
index 00000000..03f8a37c
--- /dev/null
+++ b/src/components/ui/term-tooltip.tsx
@@ -0,0 +1,56 @@
+import { HelpCircle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { getGlossaryTerm } from "@/lib/glossary";
+import { cn } from "@/lib/utils";
+
+interface TermTooltipProps {
+ term: string;
+ children: React.ReactNode;
+ inline?: boolean;
+ showIcon?: boolean;
+}
+
+export function TermTooltip({ term, children, inline = false, showIcon = true }: TermTooltipProps) {
+ const glossaryEntry = getGlossaryTerm(term);
+
+ if (!glossaryEntry) {
+ return <>{children};
+ }
+
+ return (
+
+
+
+ {children}
+ {showIcon && (
+
+ )}
+
+
+
+
+
{glossaryEntry.term}
+
+ {glossaryEntry.category.replace('-', ' ')}
+
+
{glossaryEntry.definition}
+ {glossaryEntry.example && (
+
+ Example: {glossaryEntry.example}
+
+ )}
+ {glossaryEntry.relatedTerms && glossaryEntry.relatedTerms.length > 0 && (
+
+ See also: {glossaryEntry.relatedTerms.map(t =>
+ getGlossaryTerm(t)?.term || t
+ ).join(', ')}
+
+ )}
+
+ );
+}
diff --git a/src/components/ui/validated-input.tsx b/src/components/ui/validated-input.tsx
new file mode 100644
index 00000000..f92c5b94
--- /dev/null
+++ b/src/components/ui/validated-input.tsx
@@ -0,0 +1,87 @@
+import * as React from "react";
+import { Check, AlertCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Input } from "@/components/ui/input";
+import { useDebouncedCallback } from "use-debounce";
+
+export interface ValidatedInputProps extends React.ComponentProps
{
+ validation?: {
+ isValid?: boolean;
+ error?: string;
+ hint?: string;
+ };
+ showValidation?: boolean;
+ onValidate?: (value: string) => { isValid: boolean; error?: string };
+}
+
+const ValidatedInput = React.forwardRef(
+ ({ className, validation, showValidation = true, onValidate, onChange, ...props }, ref) => {
+ const [localValidation, setLocalValidation] = React.useState<{
+ isValid?: boolean;
+ error?: string;
+ }>({});
+
+ const debouncedValidate = useDebouncedCallback((value: string) => {
+ if (onValidate) {
+ const result = onValidate(value);
+ setLocalValidation(result);
+ }
+ }, 300);
+
+ const handleChange = (e: React.ChangeEvent) => {
+ onChange?.(e);
+ if (onValidate && showValidation) {
+ debouncedValidate(e.target.value);
+ }
+ };
+
+ const validationState = validation || localValidation;
+ const showSuccess = showValidation && validationState.isValid && props.value;
+ const showError = showValidation && validationState.error;
+
+ return (
+
+
+
+ {showValidation && props.value && (
+
+ {validationState.isValid && (
+
+ )}
+ {validationState.error && (
+
+ )}
+
+ )}
+
+
+ {showValidation && validation?.hint && !validationState.error && (
+
+ {validation.hint}
+
+ )}
+
+ {showError && (
+
+
+ {validationState.error}
+
+ )}
+