@structuralists/scaffolding 0.1.1 → 0.1.3

package/bun.lock

@@ -23,6 +23,7 @@
         "eslint": "^10.3.0",
         "eslint-plugin-boundaries": "^6.0.2",
         "eslint-plugin-storybook": "10.3.6",
+        "prettier": "^3.8.3",
         "react-router": "^7.14.2",
         "storybook": "^10.3.6",
         "typescript": "^6.0.3",
@@ -755,6 +756,8 @@
 
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
+    "prettier": ["prettier@3.8.3", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw=="],
+
     "pretty-format": ["pretty-format@27.5.1", "", { "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", "react-is": "^17.0.1" } }, "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ=="],
 
     "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structuralists/scaffolding",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "main": "./index.ts",
   "types": "./index.ts",
   "exports": {
@@ -42,6 +42,7 @@
     "eslint": "^10.3.0",
     "eslint-plugin-boundaries": "^6.0.2",
     "eslint-plugin-storybook": "10.3.6",
+    "prettier": "^3.8.3",
     "react-router": "^7.14.2",
     "storybook": "^10.3.6",
     "typescript": "^6.0.3",

package/src/components/Layout/Panels/index.tsx

@@ -1,5 +1,6 @@
 import {
   useEffect,
+  useRef,
   useState,
   type CSSProperties,
   type ReactNode,
@@ -52,6 +53,11 @@ export const Panels = (props: PanelsProps) => {
 
   const [renderedOverlay, setRenderedOverlay] = useState<ReactNode>(rightOverlay ?? null);
   const [isOverlayClosing, setIsOverlayClosing] = useState(false);
+  // True only when the overlay is freshly mounting so the slide-in animation
+  // plays. Not set when a close is cancelled mid-animation (rapid reopen),
+  // which would otherwise re-trigger the slide-in unintentionally.
+  const [isOverlayEntering, setIsOverlayEntering] = useState(rightOverlay != null);
+  const renderedOverlayRef = useRef<ReactNode>(rightOverlay ?? null);
 
   // Outside-click dismissal. Gated to the open state so the close
   // animation window — where `rightOverlay` is null but `renderedOverlay`
@@ -63,12 +69,21 @@ export const Panels = (props: PanelsProps) => {
 
   useEffect(() => {
     if (rightOverlay != null) {
+      // If renderedOverlayRef still has content, the close animation was
+      // interrupted (rapid reopen). Cancel without replaying the slide-in.
+      const isCancellingClose = renderedOverlayRef.current != null;
+      renderedOverlayRef.current = rightOverlay;
       setRenderedOverlay(rightOverlay);
       setIsOverlayClosing(false);
+      if (!isCancellingClose) {
+        setIsOverlayEntering(true);
+      }
       return;
     }
+    setIsOverlayEntering(false);
     setIsOverlayClosing(true);
     const timer = setTimeout(() => {
+      renderedOverlayRef.current = null;
       setRenderedOverlay(null);
       setIsOverlayClosing(false);
     }, OVERLAY_CLOSE_ANIMATION_MS);
@@ -113,8 +128,13 @@ export const Panels = (props: PanelsProps) => {
         {renderedOverlay != null && (
           <div
             ref={overlayRef}
-            className={cx(styles.rightOverlay, isOverlayClosing && styles.closing)}
+            className={cx(
+              styles.rightOverlay,
+              isOverlayEntering && !isOverlayClosing && styles.entering,
+              isOverlayClosing && styles.closing,
+            )}
             style={rightOverlayStyle}
+            onAnimationEnd={() => setIsOverlayEntering(false)}
           >
             {renderedOverlay}
           </div>

package/src/components/Layout/Panels/styles.module.css

@@ -78,6 +78,9 @@
   border-left: 1px solid var(--ui-border);
   box-shadow: -4px 0 20px var(--ui-shadow);
   z-index: 1;
+}
+
+.rightOverlay.entering {
   animation: panels-overlay-in 200ms ease-out;
 }
 
@@ -96,7 +99,7 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .rightOverlay,
+  .rightOverlay.entering,
   .rightOverlay.closing {
     animation: none;
   }