@cosxai/ui 0.17.0 → 0.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "COSX design system \u2014 React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/actionbar/ActionBar.tsx

@@ -332,6 +332,44 @@ export function ActionBar({
     return () => window.removeEventListener("keydown", onKey);
   }, [expandedKey, setExpandedKey]);
 
+  // ----- Panel slot (design#13): outside-click + Escape close. -----
+  // Hooks live ABOVE the early returns below — hook order must not
+  // change when the bar switches between empty/collapsed/full.
+  const panelOpen = Boolean(panel?.open);
+  const panelClose = panel?.onOpenChange;
+  useEffect(() => {
+    if (!panelOpen || !panelClose) return;
+    const onDown = (e: MouseEvent) => {
+      const t = e.target as Node | null;
+      if (t && barRef.current?.contains(t)) return;
+      panelClose(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") panelClose(false);
+    };
+    window.addEventListener("mousedown", onDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("mousedown", onDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [panelOpen, panelClose]);
+
+  // Horizontal clamp: centred on the bar unless that would push the
+  // panel past a viewport edge — then shift just enough to fit.
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  useLayoutEffect(() => {
+    if (!panelOpen) return;
+    const el = panelRef.current;
+    if (!el) return;
+    el.style.marginLeft = "0px";
+    const rect = el.getBoundingClientRect();
+    let shift = 0;
+    if (rect.left < 8) shift = 8 - rect.left;
+    else if (rect.right > window.innerWidth - 8) shift = window.innerWidth - 8 - rect.right;
+    if (shift !== 0) el.style.marginLeft = `${Math.round(shift)}px`;
+  }, [panelOpen, pos]);
+
   // ----- Empty state -----
   // Bar renders when EITHER any page item is registered OR the
   // status dot is set. Without the statusDot check, an app whose
@@ -383,42 +421,6 @@ export function ActionBar({
     );
   }
 
-  // ----- Panel slot (design#13): outside-click + Escape close. -----
-  const panelOpen = Boolean(panel?.open);
-  const panelClose = panel?.onOpenChange;
-  useEffect(() => {
-    if (!panelOpen || !panelClose) return;
-    const onDown = (e: MouseEvent) => {
-      const t = e.target as Node | null;
-      if (t && barRef.current?.contains(t)) return;
-      panelClose(false);
-    };
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") panelClose(false);
-    };
-    window.addEventListener("mousedown", onDown);
-    window.addEventListener("keydown", onKey);
-    return () => {
-      window.removeEventListener("mousedown", onDown);
-      window.removeEventListener("keydown", onKey);
-    };
-  }, [panelOpen, panelClose]);
-
-  // Horizontal clamp: centred on the bar unless that would push the
-  // panel past a viewport edge — then shift just enough to fit.
-  const panelRef = useRef<HTMLDivElement | null>(null);
-  useLayoutEffect(() => {
-    if (!panelOpen) return;
-    const el = panelRef.current;
-    if (!el) return;
-    el.style.marginLeft = "0px";
-    const rect = el.getBoundingClientRect();
-    let shift = 0;
-    if (rect.left < 8) shift = 8 - rect.left;
-    else if (rect.right > window.innerWidth - 8) shift = window.innerWidth - 8 - rect.right;
-    if (shift !== 0) el.style.marginLeft = `${Math.round(shift)}px`;
-  }, [panelOpen, pos]);
-
   // ----- Full bar -----
   const isDefault = pos.type === "default";
   return (