From 320233f6d7ec2004a916bb79f939fc8c5c6f5b85 Mon Sep 17 00:00:00 2001
From: minsung <minsung.kim.hanmaceng@gmail.com>
Date: Mon, 12 Oct 2026 18:57:53 +0900
Subject: [PATCH] fix(ui): open/close tool windows with the hidden attribute

panelUtils owns the window's inline left/top/z-index/height, so React
should not manage its style at all; use `hidden` (+ a CSS rule against
the frame's display:flex) instead of style.display (#1). Also drops a
dynamic style value the HMDesign guard reported as unverifiable.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/FloatingPanel.tsx | 5 +++--
 src/hm-theme.css                 | 3 +++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/FloatingPanel.tsx b/src/components/FloatingPanel.tsx
index 43183d4..92e5c0e 100644
--- a/src/components/FloatingPanel.tsx
+++ b/src/components/FloatingPanel.tsx
@@ -29,7 +29,8 @@ const GAP = 12
  * Drag (header), collapse (header double-click / button) and focus-to-front come from the ported
  * `makePanelDraggableAndCollapsible` (src/engine/panelUtils.ts, unchanged); resizing is CSS `resize: both` on the
  * frame, as in the sample. The frame keeps a static className because panelUtils toggles `collapsed` on it, and
- * React would overwrite a changing className. Open/closed only touches `style.display`.
+ * React would overwrite a changing className; panelUtils also owns its inline left/top/z-index/height. Open/closed
+ * is the `hidden` attribute, so neither of those is touched.
  */
 export function FloatingPanel({ title, icon, meta, actions, open, onClose, slot, anchorRef, size = "tall", children }: Props) {
   const frameRef = useRef<HTMLElement>(null)
@@ -71,7 +72,7 @@ export function FloatingPanel({ title, icon, meta, actions, open, onClose, slot,
       className="viewer-window"
       data-size={size}
       aria-label={title}
-      style={{ display: open ? undefined : "none" }}
+      hidden={!open}
     >
       <Card size="sm" className="viewer-window-card">
         <CardHeader ref={headerRef} className="viewer-window-header border-b">
diff --git a/src/hm-theme.css b/src/hm-theme.css
index 1e50111..1b8b561 100644
--- a/src/hm-theme.css
+++ b/src/hm-theme.css
@@ -126,6 +126,9 @@
   border-radius: var(--hm-radius-container);
   box-shadow: var(--hm-sem-floating-shadow);
 }
+.viewer-window[hidden] {
+  display: none;
+}
 .viewer-window[data-size="auto"] {
   height: auto;
   max-height: min(78dvh, 760px);