Refactor: remove AGPL imgly dependency and migrate background removal to python backend

src/components/TopHeader.tsx

@@ -15,8 +15,10 @@ interface TopHeaderProps {
   onZoomOut?: () => void;
   onZoomReset?: () => void;
   /** Aspect ratio controls */
-  aspectRatio?: '16:9' | '1:1' | '9:16' | '4:5' | '4:3';
-  onAspectRatioChange?: (ratio: '16:9' | '1:1' | '9:16' | '4:5' | '4:3') => void;
+  aspectRatio?: string;
+  onAspectRatioChange?: (ratio: string) => void;
+  disableAspectControls?: boolean;
+  titleOverride?: React.ReactNode;
 }
 
 export const TopHeader: React.FC<TopHeaderProps> = ({
@@ -31,14 +33,19 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
   onZoomReset,
   aspectRatio = '9:16',
   onAspectRatioChange,
+  disableAspectControls,
+  titleOverride,
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const isStudio = currentStep === 'studio';
 
   return (
-    <header className="flex-none border-b border-neutral-800/60 bg-neutral-900/95 backdrop-blur-sm px-3 h-11 flex items-center justify-between z-30 relative">
+    <header 
+      className="flex-none border-b border-neutral-800/60 bg-neutral-900/95 backdrop-blur-sm px-3 h-11 flex items-center justify-between z-30 relative"
+      style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+    >
       {/* Left: Hamburger + Logo */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 ml-[72px]" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
         <div className="relative">
           <button
             onClick={() => setMenuOpen(!menuOpen)}
@@ -88,13 +95,15 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
           <div className="bg-violet-600/20 p-1 rounded text-violet-400">
             <LayoutTemplate size={14} />
           </div>
-          <span className="text-xs font-semibold text-white tracking-tight">SaaS Branding</span>
+          <span className="text-xs font-semibold text-white tracking-tight">
+            {titleOverride || 'SaaS Branding'}
+          </span>
         </div>
       </div>
 
       {/* Center: Zoom controls (only in studio) */}
       {isStudio && onZoomIn && onZoomOut && (
-        <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-1">
+        <div className="absolute left-1/2 -translate-x-1/2 flex items-center gap-1" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
           <button
             onClick={(e) => { e.stopPropagation(); onZoomOut(); }}
             title="Zoom Out"
@@ -118,7 +127,7 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
           </button>
 
           {/* Aspect ratio pills */}
-          {onAspectRatioChange && (
+          {onAspectRatioChange && !disableAspectControls && (
             <>
               <div className="w-px h-4 bg-neutral-700 mx-1" />
               {(['16:9', '9:16', '1:1', '4:5', '4:3'] as const).map(ratio => (
@@ -141,7 +150,7 @@ export const TopHeader: React.FC<TopHeaderProps> = ({
       )}
 
       {/* Right: Editor buttons + Format badge */}
-      <div className="flex items-center gap-2">
+      <div className="flex items-center gap-2 pr-2" style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}>
         {/* Express / Pro buttons — only on dashboard */}
         {currentStep === 'dashboard' && onStartExpressBlank && (
           <button