feat(ui): Autohide command context panel, when needed it floats over the viewport more like AutoCAD

Author: bearjcc

packages/chili-ui/src/CommandContextPanel.ts

@@ -4,8 +4,11 @@ import { CommandContext } from "./ribbon/commandContext";
 import style from "./ribbon/ribbon.module.css";
 
 export class CommandContextPanel extends HTMLElement {
-    private readonly _panel = div({ className: style.commandContextPanel });
+    private readonly _panel = div({
+        className: style.commandContextOverlay + " " + style.commandContextOverlayHidden,
+    });
     private commandContext?: CommandContext;
+    private _visible = false;
 
     constructor() {
         super();
@@ -28,14 +31,25 @@ export class CommandContextPanel extends HTMLElement {
         }
         this.commandContext = new CommandContext(command);
         this._panel.append(this.commandContext);
+        this.setVisible(true);
     };
 
     private readonly closeContext = () => {
         this.commandContext?.remove();
         this.commandContext?.dispose();
         this.commandContext = undefined;
         this._panel.innerHTML = "";
+        this.setVisible(false);
     };
+
+    private setVisible(visible: boolean) {
+        this._visible = visible;
+        if (visible) {
+            this._panel.className = style.commandContextOverlay;
+        } else {
+            this._panel.className = style.commandContextOverlay + " " + style.commandContextOverlayHidden;
+        }
+    }
 }
 
 customElements.define("command-context-panel", CommandContextPanel);

packages/chili-ui/src/ribbon/ribbon.module.css

@@ -251,6 +251,30 @@
     border-bottom: 1px solid var(--border-color);
 }
 
+.commandContextOverlay {
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 600px;
+    min-width: 320px;
+    width: 60%;
+    z-index: 10;
+    background: var(--panel-background-color);
+    /* Subtle, soft shadow only on bottom and sides */
+    box-shadow:
+        0 6px 24px -6px rgba(0, 0, 0, 0.1),
+        0 2px 8px -2px rgba(0, 0, 0, 0.08);
+    border-radius: 0 0 12px 12px;
+    opacity: 1;
+    transition: opacity 0.2s;
+    pointer-events: auto;
+}
+.commandContextOverlayHidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
 .ribbonGroup {
     position: relative;
     display: grid;