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-properties.ts

@@ -63,6 +63,10 @@ export class WccProperties extends DeesElement {
   @state()
   accessor recordingDuration: number = 0;
 
+  // Delayed hide for native mode transition
+  @state()
+  accessor isHidden: boolean = false;
+
   public editorHeight: number = 300;
 
   public render(): TemplateResult {
@@ -99,7 +103,7 @@ export class WccProperties extends DeesElement {
           overflow: hidden;
           background: var(--background);
           color: var(--foreground);
-          display: ${this.isNative ? 'none' : 'block'};
+          display: ${this.isHidden ? 'none' : 'block'};
         }
         .grid {
           display: grid;
@@ -931,6 +935,19 @@ export class WccProperties 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;
+      }
+    }
+
     // Only recreate properties when selectedItem changes
     if (changedProperties.has('selectedItem')) {
       this.createProperties().catch(error => {