feat: Phase 2 - Frontend meta fields components (Level 1)

Implemented: Frontend Components for Level 1 Compatibility

Created Components:
- MetaFields.tsx - Generic meta field renderer
- useMetaFields.ts - Hook for field registry

Integrated Into:
- Orders/Edit.tsx - Meta fields after OrderForm
- Products/Edit.tsx - Meta fields after ProductForm

Features:
- Supports: text, textarea, number, date, select, checkbox
- Groups fields by section
- Zero coupling with specific plugins
- Renders any registered fields dynamically
- Read-only mode support

How It Works:
1. Backend exposes meta via API (Phase 1)
2. PHP registers fields via MetaFieldsRegistry (Phase 3 - next)
3. Fields localized to window.WooNooWMetaFields
4. useMetaFields hook reads registry
5. MetaFields component renders fields
6. User edits fields
7. Form submission includes meta
8. Backend saves via update_order_meta_data()

Result:
- Generic, reusable components
- Zero plugin-specific code
- Works with any registered fields
- Clean separation of concerns

Next: Phase 3 - PHP MetaFieldsRegistry system

admin-spa/src/hooks/useMetaFields.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect } from 'react';
+import type { MetaField } from '@/components/MetaFields';
+
+interface MetaFieldsRegistry {
+  orders: MetaField[];
+  products: MetaField[];
+}
+
+// Global registry exposed by PHP via wp_localize_script
+declare global {
+  interface Window {
+    WooNooWMetaFields?: MetaFieldsRegistry;
+  }
+}
+
+/**
+ * useMetaFields Hook
+ * 
+ * Retrieves registered meta fields from global registry (set by PHP).
+ * Part of Level 1 compatibility - allows plugins to register their fields
+ * via PHP filters, which are then exposed to the frontend.
+ * 
+ * Zero coupling with specific plugins - just reads the registry.
+ * 
+ * @param type - 'orders' or 'products'
+ * @returns Array of registered meta fields
+ * 
+ * @example
+ * ```tsx
+ * const metaFields = useMetaFields('orders');
+ * 
+ * return (
+ *   <MetaFields
+ *     meta={order.meta}
+ *     fields={metaFields}
+ *     onChange={handleMetaChange}
+ *   />
+ * );
+ * ```
+ */
+export function useMetaFields(type: 'orders' | 'products'): MetaField[] {
+  const [fields, setFields] = useState<MetaField[]>([]);
+
+  useEffect(() => {
+    // Get fields from global registry (set by PHP via wp_localize_script)
+    const registry = window.WooNooWMetaFields || { orders: [], products: [] };
+    setFields(registry[type] || []);
+
+    // Listen for dynamic field registration (for future extensibility)
+    const handleFieldsUpdated = (e: CustomEvent) => {
+      if (e.detail.type === type) {
+        setFields(e.detail.fields);
+      }
+    };
+
+    window.addEventListener(
+      'woonoow:meta_fields_updated',
+      handleFieldsUpdated as EventListener
+    );
+
+    return () => {
+      window.removeEventListener(
+        'woonoow:meta_fields_updated',
+        handleFieldsUpdated as EventListener
+      );
+    };
+  }, [type]);
+
+  return fields;
+}