Control Visibility & Editing Toggle for Plugin Studio

[DJJones66]

PR: Control Visibility & Editing Toggle for Plugin Studio

Summary

This PR introduces a control visibility context and hook that governs when editing controls are displayed in the Plugin Studio and page rendering environment. It also adds a new environment variable (VITE_SHOW_EDITING_CONTROLS) to allow toggling of editing UI elements for development and debugging purposes. Additionally, layout and rendering logic has been updated to ensure consistent published vs. studio behavior.

---

Problem / Context

• Previously, editing controls were tied loosely to route checks and dev mode flags. This made it difficult to reliably hide editing controls outside of the studio environment.
• Resize handles and control overlays were still visible on published pages, creating a poor user experience.
• Developers lacked an easy way to toggle control visibility without modifying core logic.

---

What’s Changed

Configuration

• .env.example

  • Added VITE_SHOW_EDITING_CONTROLS to control visibility of editing UI in development.

• config/index.ts

  • Integrated new env variable into the validated config object.

New Contexts & Hooks

• contexts/ControlVisibilityContext.tsx (new)

  • Provides a React context with showControls, isPluginStudio, renderMode, canEdit, and controlsEnabled.
  • Derives values from route, dev mode, and new env flag.

• hooks/useControlVisibility.ts (new)

  • Lightweight hook to determine if controls should be shown.
  • Simplifies logic reuse across components.

Components Updated

• DynamicPageRenderer.tsx

  • Updated logic: /plugin-studio routes use STUDIO mode only; /pages always use PUBLISHED mode.

• GridItemControls.tsx, UnifiedModuleControls.tsx

  • Respect useShowControls; hide controls when not in studio mode.

• LayoutEngine.tsx

  • Integrated useControlVisibility.
  • Added failsafe to remove resize handles programmatically when controls are hidden.
  • Grid behavior (draggable, resizable) now tied to showControls rather than RenderMode alone.

• ModeController.tsx

  • Don’t render if controls aren’t visible.

• PluginStudioDevModeContext.tsx

  • Disabled non-essential debug features (indicators, panels, perf metrics) for clarity.

Styling

• index.css

  • High-specificity rules added to hide React Grid Layout resize handles and disable pointer events on published pages.

---

Benefits

• ✅ Clear separation of Studio vs. Published behavior.
• ✅ Developers can easily toggle editing controls in dev using VITE_SHOW_EDITING_CONTROLS.
• ✅ Published pages are now clean, with no stray resize handles or editing UI.
• ✅ Centralized control logic improves consistency across components.

---

Risks & Mitigations

• Risk: Misconfigured env vars may hide controls unexpectedly.
  Mitigation: Defaults ensure controls are off in published mode, and only visible in dev + studio routes.
• Risk: Programmatic DOM manipulation in LayoutEngine may have performance impact.
  Mitigation: MutationObserver cleanup + scoped visibility checks reduce overhead.

---

Testing & QA

1. Env toggle

   • Set VITE_SHOW_EDITING_CONTROLS=true in .env → verify controls visible in studio.
   • Set to false → verify hidden controls.

2. Routes

   • /plugin-studio/... → shows editing UI in dev mode.
   • /pages/... → no editing controls, resize handles hidden.

3. Published Mode CSS

   • Inspect .layout-engine--published elements: confirm no resize handles or cursors.

4. Studio Features

   • Verify studio toolbar still visible when in dev mode.
   • Other debug features (indicators, perf panels) are disabled.