fix(elements): delay hiding sidebar and properties panels during native-mode transition and use transparent rgba border for frame to avoid layout jumps

ts_web/elements/wcc-sidebar.ts

@@ -44,6 +44,10 @@ export class WccSidebar extends DeesElement {
   @state()
   accessor isResizing: boolean = false;
 
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
   private sectionsInitialized = false;
 
   public render(): TemplateResult {
@@ -67,7 +71,7 @@ export class WccSidebar extends DeesElement {
           --ring: #3b82f6;
           --radius: 4px;
 
-          display: ${this.isNative ? 'none' : 'block'};
+          display: ${this.isHidden ? 'none' : 'block'};
           border-right: 1px solid rgba(255, 255, 255, 0.08);
           font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
           font-size: 14px;
@@ -732,6 +736,19 @@ export class WccSidebar extends DeesElement {
   protected updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
 
+    // Handle delayed hide for native mode transition
+    if (changedProperties.has('isNative')) {
+      if (this.isNative) {
+        // Delay hiding until frame animation completes
+        setTimeout(() => {
+          this.isHidden = true;
+        }, 300);
+      } else {
+        // Show immediately when exiting native mode
+        this.isHidden = false;
+      }
+    }
+
     // Auto-expand folder when a multi-demo element is selected
     if (changedProperties.has('selectedItem') && this.selectedItem && this.dashboardRef?.sections) {
       // Find the element in any section