📖 Complete Setup Instructions 🎨 Phase 1: Design Mode (The Mockup Builder)

Create a new mobile-sized page in Bubble.

Add a Floating Group to your page. Make it span the entire width and height of the screen, and right-click to "Send to Back".

Drop the SwiftShell element inside this Floating Group and expand it. It will magically generate a visual iPhone mockup with red "Safe Area" guides!

Build your App! Drag your normal Bubble Groups into the white space. The mockup ensures your design never gets hidden by the iPhone's notch or bottom bar.

🚀 Phase 2: Live Mode (Preparing for Launch)

Once your design is finished, take the SwiftShell element out of the Floating Group and place it anywhere directly on the page.

Resize the SwiftShell element to 1x1 pixels (it will run invisibly in the background and generate the real navigation bar dynamically over your app).

You can now delete the Floating Group.

🧠 Phase 3: The Logic (SPA Setup)

Create your screens as standard Groups (e.g., Group Home, Group Search).

Make sure they are NOT visible on page load, and check "Collapse when hidden".

Go to each Group's Conditionals and add:

When SwiftShell's current_tab is 1 -> This element is visible (Check the box).

Done! The plugin will handle the CSS, the haptics, and the state changes instantly.