feat: add ProductHub component for document editing and conversion

frontend/.env

@@ -1 +1,2 @@
-VITE_GATEWAY_URL=http://127.0.0.1:8765
+# VITE_GATEWAY_URL=http://127.0.0.1:8765
+VITE_GATEWAY_URL=https://pdfapi-dev.maskantech.in

frontend/src/App.tsx

@@ -31,6 +31,7 @@ import { UnlockModal } from './components/UnlockModal';
 import type { UnlockModalState } from './components/UnlockModal';
 import { CompareModal } from './components/CompareModal';
 import { CompareWorkspace } from './components/CompareWorkspace';
+import { ProductHub } from './components/ProductHub';
 import type { DocumentInfo, SearchResult, EditOperation, DocumentMetadata, FontInfo, OutlineItem, PDFPermissions, CompareResponse, DocumentSummary } from './lib/gatewayService';
 import { viewportRectToPdf } from './lib/coordinateMapping';
 import type { Rect } from './lib/coordinateMapping';
@@ -42,6 +43,7 @@ const rid = (p: string) => `${p}_${Math.random().toString(36).substring(2, 11)}`
 
 function App() {
   const viewerRef = useRef<PDFViewerRef>(null);
+  const [productView, setProductView] = useState<'chooser' | 'editor' | 'conversion'>('chooser');
 
   const [documents, setDocuments] = useState<DocumentInfo[]>([]);
   const [activeDoc, setActiveDoc] = useState<DocumentInfo | null>(null);
@@ -1198,6 +1200,17 @@ function App() {
     }], 'Annotation updated');
   };
 
+  if (productView !== 'editor') {
+    return (
+      <ProductHub
+        view={productView}
+        onOpenEditor={() => setProductView('editor')}
+        onOpenConversion={() => setProductView('conversion')}
+        onBack={() => setProductView('chooser')}
+      />
+    );
+  }
+
   return (
     <div className="flex h-full w-full flex-col overflow-hidden bg-[#f1f2f4] text-[#18212e] antialiased">
       <TopBar
@@ -1241,6 +1254,7 @@ function App() {
         onGoToPage={(p) => viewerRef.current?.scrollToPage(p)}
         onSave={handleSave}
         isRemote={isRemote}
+        onBackToHome={() => setProductView('chooser')}
       />
 
       <div className="flex min-h-0 flex-1">

frontend/src/components/TopBar.tsx

@@ -40,6 +40,7 @@ interface TopBarProps {
   canExport?: boolean;
   canAssemble?: boolean;
   isRemote?: boolean;
+  onBackToHome?: () => void;
 }
 
 const ZOOM_PRESETS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];
@@ -48,7 +49,7 @@ export const TopBar: React.FC<TopBarProps> = ({
   documentName, backendHealthy, engineReady, zoom, onZoomChange, onFitWidth,
   currentPage, totalPages, onGoToPage, canUndo, canRedo, onUndo, onRedo,
   isSaving, isDirtySaved, onRotate, onExport, onPrint, onProtect, onUnlock, onCompare, onMergePDF, isEncrypted, onUpload, onNewBlankPDF, onSave,
-  canPrint = true, canExport = true, canAssemble = true, isRemote = false,
+  canPrint = true, canExport = true, canAssemble = true, isRemote = false, onBackToHome,
 }) => {
   const fileRef = useRef<HTMLInputElement>(null);
   const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -63,6 +64,7 @@ export const TopBar: React.FC<TopBarProps> = ({
       style={{ height: '56px', paddingLeft: '24px', paddingRight: '24px' }}
     >
       <div className="flex shrink-0 items-center gap-2">
+        {onBackToHome && <CustomButton variant="unstyled" className="flex h-8 items-center rounded-[8px] px-2 text-[12px] font-bold text-text-secondary hover:bg-bg-tertiary hover:text-text-primary" onClick={onBackToHome} title="Back to workspace">&lt; Workspaces</CustomButton>}
         <div className="flex items-center gap-2">
           <div className="flex h-8 w-8 items-center justify-center rounded-[9px] bg-brand-primary text-white shadow-sm">
             <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">