@sp-days-framework/docusaurus-plugin-interactive-tasks 1.0.3 → 1.0.4

package/lib/theme/Task/styles.module.css

@@ -1,12 +1,30 @@
 /* ===================== TASK COMPONENT ===================== */
 
+/* Style all heading levels that appear right before a task or task-example */
+/* The heading is injected by the remark plugin for TOC integration */
+:global(.theme-doc-markdown) > h2:has(+ div[class*="taskContainer"]),
+:global(.theme-doc-markdown) > h3:has(+ div[class*="taskContainer"]),
+:global(.theme-doc-markdown) > h4:has(+ div[class*="taskContainer"]),
+:global(.theme-doc-markdown) > h5:has(+ div[class*="taskContainer"]),
+:global(.theme-doc-markdown) > h6:has(+ div[class*="taskContainer"]) {
+  /* Visually hide the heading but keep it for TOC and accessibility */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .taskContainer {
   margin-bottom: 1.5rem;
   border: 2px solid var(--ifm-color-emphasis-300);
   border-radius: 8px;
   background-color: var(--ifm-background-surface-color);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease,
-    max-height 0.3s ease-out;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
   overflow: hidden;
 }
 
@@ -47,35 +65,12 @@
   justify-content: space-between;
   gap: 1rem;
   padding: 1rem 1.25rem;
-  cursor: pointer;
   user-select: none;
   position: relative;
   background: var(--ifm-background-surface-color);
   transition: background 0.3s ease;
 }
 
-.taskHeader::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    to bottom,
-    var(--ifm-color-emphasis-200) 0%,
-    transparent 80%
-  );
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.taskHeader:hover::before {
-  opacity: 1;
-}
-
 .taskHeaderLeft {
   display: flex;
   align-items: center;
@@ -100,21 +95,23 @@
   flex-shrink: 0;
 }
 
-.taskName {
-  margin: 0;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--ifm-font-color-base);
+.taskNameWrapper {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   flex: 1;
   min-width: 0;
-  margin-bottom: 1px;
+}
+
+.taskNameText {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--ifm-font-color-base);
   transition: color 0.6s ease-out;
 }
 
-.taskCompleted .taskName {
+.taskCompleted .taskNameText {
   color: var(--ifm-color-success);
 }
 
@@ -173,21 +170,30 @@
 
 .expandButton {
   background: none;
-  border: none;
+  border: 1px solid transparent;
   padding: 0.25rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ifm-color-emphasis-700);
-  transition: color 0.2s ease;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
   flex-shrink: 0;
   position: relative;
   z-index: 1;
+  border-radius: 4px;
 }
 
 .expandButton:hover {
   color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-emphasis-200);
+  border-color: var(--ifm-color-emphasis-300);
+}
+
+.expandButton:active {
+  color: var(--ifm-color-primary);
+  background-color: var(--ifm-color-primary-lightest);
+  border-color: var(--ifm-color-primary);
 }
 
 .chevron {
@@ -204,42 +210,22 @@
 
 /* ===================== TASK BODY ===================== */
 
-.taskBody {
-  padding: 0 1.25rem 1rem 1.25rem;
-  animation: slideDown 0.3s ease-out;
-  overflow: hidden;
+.taskContentWrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.3s ease-out;
 }
 
-.taskBodyCollapsing {
-  animation: slideUp 0.3s ease-out;
+.taskContentExpanded {
+  grid-template-rows: 1fr;
 }
 
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    max-height: 0;
-    transform: translateY(-8px);
-  }
-
-  to {
-    opacity: 1;
-    max-height: 2000px;
-    transform: translateY(0);
-  }
+.taskContentInner {
+  overflow: hidden;
 }
 
-@keyframes slideUp {
-  from {
-    opacity: 1;
-    max-height: 2000px;
-    transform: translateY(0);
-  }
-
-  to {
-    opacity: 0;
-    max-height: 0;
-    transform: translateY(-8px);
-  }
+.taskBody {
+  padding: 0 1.25rem 1rem 1.25rem;
 }
 
 /* ===================== TASK FOOTER ===================== */
@@ -252,12 +238,6 @@
   gap: 0.75rem;
   flex-wrap: wrap;
   position: relative;
-  animation: slideDown 0.3s ease-out;
-  overflow: hidden;
-}
-
-.taskFooterCollapsing {
-  animation: slideUp 0.3s ease-out;
 }
 
 .taskFooter::before {
@@ -356,136 +336,84 @@
 /* ===================== PANELS (Hint/Solution) ===================== */
 
 .panelWrapper {
-  position: relative;
-  margin: 0 1.25rem 0rem 1.25rem;
+  margin: 0 1.25rem;
 }
 
-.panelSpacer {
-  /* Invisible spacer that maintains layout space */
-  width: 100%;
+.panelGridWrapper {
   overflow: hidden;
+  height: 0;
+  transition: height 0.3s ease-out;
+}
+
+/* Collapsing state - animates back to 0 while content fades out */
+.panelGridCollapsing {
+  height: 0 !important;
+}
+
+/* Shared container for both panels - they overlap using positioning */
+.panelSharedContainer {
+  position: relative;
 }
 
 .panelContainer {
   border-radius: 6px;
   overflow: hidden;
-  transition: margin 0.3s ease-out;
-}
-
-.panelAbsolute {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
+  /* Hidden panels use absolute positioning to not affect layout */
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-  transform: translateX(0);
 }
 
 .panelVisible {
-  /* Don't set opacity here - let animations handle it */
-  pointer-events: auto;
+  opacity: 1;
   visibility: visible;
+  pointer-events: auto;
+  /* Visible panel stays in document flow */
+  position: relative;
 }
 
-.panelContainerExpanding {
-  animation: expandPanel 0.3s ease-out forwards;
-}
-
-.panelContainerCollapsing {
-  animation: collapsePanel 0.3s ease-out forwards;
-}
-
-.hintPanelContainerExpandingSwitching {
-  animation: expandLeftToRight 0.3s ease-out forwards;
-}
-
-.hintPanelContainerCollapsingSwitching {
-  animation: collapseRightToLeft 0.3s ease-out forwards;
-}
-
-.solutionPanelContainerExpandingSwitching {
-  animation: expandRightToLeft 0.3s ease-out forwards;
-}
-
-.solutionPanelContainerCollapsingSwitching {
-  animation: collapseLeftToRight 0.3s ease-out forwards;
-}
-
-@keyframes expandPanel {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes collapsePanel {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
+/* When switching panels, both use absolute positioning and crossfade */
+.panelSwitching {
+  visibility: visible;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
 }
 
-@keyframes expandRightToLeft {
-  /* Appears from the RIGHT, slides to center (used when showing hint from solution) */
-  from {
-    opacity: 0;
-    transform: translateX(30px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
+/* Sequential fade animations for panel switching */
+.panelFadingIn {
+  animation: fadeIn 0.30s ease-out 0.30s forwards;
+  /* Start invisible and let animation handle the fade */
+  opacity: 0 !important;
 }
 
-@keyframes collapseRightToLeft {
-  /* Disappears to the LEFT (used when hiding hint to show solution) */
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-
-  to {
-    opacity: 0;
-    transform: translateX(-30px);
-  }
+.panelFadingOut {
+  animation: fadeOut 0.30s ease-out forwards;
+  /* Start visible and animate to invisible */
+  opacity: 1 !important;
 }
 
-@keyframes expandLeftToRight {
-  /* Appears from the LEFT, slides to center (used when showing solution from hint) */
+@keyframes fadeIn {
   from {
     opacity: 0;
-    transform: translateX(-30px);
   }
-
   to {
     opacity: 1;
-    transform: translateX(0);
   }
 }
 
-@keyframes collapseLeftToRight {
-  /* Disappears to the RIGHT (used when hiding solution to show hint) */
+@keyframes fadeOut {
   from {
     opacity: 1;
-    transform: translateX(0);
   }
-
   to {
     opacity: 0;
-    transform: translateX(30px);
   }
 }
 

package/lib/theme/TaskExample/index.d.ts

@@ -11,6 +11,7 @@ import { type ReactNode, type ReactElement } from 'react';
 export interface TaskExampleProps {
     name: string;
     children?: ReactNode;
+    id?: string;
 }
-export default function TaskExample({ name, children }: TaskExampleProps): ReactElement;
+export default function TaskExample({ name, children, id }: TaskExampleProps): ReactElement;
 //# sourceMappingURL=index.d.ts.map

package/lib/theme/TaskExample/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/TaskExample/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAc,EAAE,KAAK,SAAS,EAAY,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAM9F,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAsTtF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/TaskExample/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAc,EAAE,KAAK,SAAS,EAAY,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAC;AAM9F,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAoS1F"}

package/lib/theme/TaskExample/index.js

@@ -51,7 +51,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const DocTaskCounterProvider_1 = require("../DocTaskCounterProvider");
 const icons_1 = require("../../utils/icons");
 const styles_module_css_1 = __importDefault(require("../Task/styles.module.css")); // Reuse Task styles
-function TaskExample({ name, children }) {
+function TaskExample({ name, children, id }) {
     // Get auto-incremented example number
     const exampleNumber = (0, DocTaskCounterProvider_1.useTaskExampleNumber)();
     // Local state only (no persistence)
@@ -61,16 +61,28 @@ function TaskExample({ name, children }) {
     const [showSolution, setShowSolution] = (0, react_1.useState)(false);
     const [isAnimatingCompletion, setIsAnimatingCompletion] = (0, react_1.useState)(false);
     const [isRemovingCheckmark, setIsRemovingCheckmark] = (0, react_1.useState)(false);
-    const [isCollapsingHint, setIsCollapsingHint] = (0, react_1.useState)(false);
-    const [isCollapsingSolution, setIsCollapsingSolution] = (0, react_1.useState)(false);
     const [isSwitchingPanels, setIsSwitchingPanels] = (0, react_1.useState)(false);
-    const [isCollapsingBody, setIsCollapsingBody] = (0, react_1.useState)(false);
-    const [panelSpacerHeight, setPanelSpacerHeight] = (0, react_1.useState)(0);
-    // Refs for measuring panel heights
+    const [isClosingHint, setIsClosingHint] = (0, react_1.useState)(false);
+    const [isClosingSolution, setIsClosingSolution] = (0, react_1.useState)(false);
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)(null);
+    // Refs for switching animations
     const hintRef = (0, react_1.useRef)(null);
     const solutionRef = (0, react_1.useRef)(null);
     // Track previous completion state
     const prevIsCompleted = (0, react_1.useRef)(isCompleted);
+    // Measure panel heights and update container height for smooth transitions
+    (0, react_1.useEffect)(() => {
+        if (showHint || showSolution || isSwitchingPanels) {
+            const activeRef = showHint ? hintRef : solutionRef;
+            if (activeRef.current) {
+                const height = activeRef.current.scrollHeight;
+                setContainerHeight(height + 16); // Add small buffer for padding/margin
+            }
+        }
+        else {
+            setContainerHeight(null);
+        }
+    }, [showHint, showSolution, isSwitchingPanels]);
     // Detect when completion state changes
     (0, react_1.useEffect)(() => {
         if (prevIsCompleted.current !== isCompleted) {
@@ -89,38 +101,14 @@ function TaskExample({ name, children }) {
             prevIsCompleted.current = isCompleted;
         }
     }, [isCompleted]);
-    // Measure panel heights and update spacer
-    (0, react_1.useEffect)(() => {
-        const updateSpacerHeight = () => {
-            if (showHint && hintRef.current) {
-                setPanelSpacerHeight(hintRef.current.offsetHeight);
-            }
-            else if (showSolution && solutionRef.current) {
-                setPanelSpacerHeight(solutionRef.current.offsetHeight);
-            }
-            else {
-                setPanelSpacerHeight(0);
-            }
-        };
-        // Update immediately
-        updateSpacerHeight();
-        // Also update on window resize (for responsive content)
-        window.addEventListener('resize', updateSpacerHeight);
-        return () => window.removeEventListener('resize', updateSpacerHeight);
-    }, [showHint, showSolution]);
     const toggleExpanded = () => {
-        // When collapsing, start animation then remove from DOM
         if (isExpanded) {
-            setIsCollapsingBody(true);
+            // Close panels when collapsing
             setShowHint(false);
             setShowSolution(false);
-            setTimeout(() => {
-                setIsExpanded(false);
-                setIsCollapsingBody(false);
-            }, 300); // Match animation duration
+            setIsExpanded(false);
         }
         else {
-            // When expanding, add to DOM immediately
             setIsExpanded(true);
         }
     };
@@ -130,62 +118,54 @@ function TaskExample({ name, children }) {
     };
     const toggleHint = () => {
         if (showHint) {
-            // Closing hint
-            setIsCollapsingHint(true);
-            setIsSwitchingPanels(false);
+            // Closing hint - fade out while grid collapses
+            setIsClosingHint(true);
+            setShowHint(false);
+            // Remove from DOM after animation completes
             setTimeout(() => {
-                setShowHint(false);
-                setIsCollapsingHint(false);
+                setIsClosingHint(false);
             }, 300);
         }
         else {
             // Opening hint
             if (showSolution) {
-                // Switching from solution to hint
+                // Switching from solution to hint - sequential fade
                 setIsSwitchingPanels(true);
-                setIsCollapsingSolution(true);
+                setShowHint(true);
+                // Wait for sequential fade animation before hiding solution
                 setTimeout(() => {
                     setShowSolution(false);
-                    setIsCollapsingSolution(false);
-                    // Delay before showing hint panel
-                    setTimeout(() => {
-                        setShowHint(true);
-                    }, 25);
+                    setIsSwitchingPanels(false);
                 }, 300);
             }
             else {
-                setIsSwitchingPanels(false);
                 setShowHint(true);
             }
         }
     };
     const toggleSolution = () => {
         if (showSolution) {
-            // Closing solution
-            setIsCollapsingSolution(true);
-            setIsSwitchingPanels(false);
+            // Closing solution - fade out while grid collapses
+            setIsClosingSolution(true);
+            setShowSolution(false);
+            // Remove from DOM after animation completes
             setTimeout(() => {
-                setShowSolution(false);
-                setIsCollapsingSolution(false);
+                setIsClosingSolution(false);
             }, 300);
         }
         else {
             // Opening solution
             if (showHint) {
-                // Switching from hint to solution
+                // Switching from hint to solution - sequential fade
                 setIsSwitchingPanels(true);
-                setIsCollapsingHint(true);
+                setShowSolution(true);
+                // Wait for sequential fade animation before hiding hint
                 setTimeout(() => {
                     setShowHint(false);
-                    setIsCollapsingHint(false);
-                    // Delay before showing solution panel
-                    setTimeout(() => {
-                        setShowSolution(true);
-                    }, 25);
+                    setIsSwitchingPanels(false);
                 }, 300);
             }
             else {
-                setIsSwitchingPanels(false);
                 setShowSolution(true);
             }
         }
@@ -210,40 +190,39 @@ function TaskExample({ name, children }) {
     });
     // Build task identifier badge
     const taskBadge = `Example ${exampleNumber}`;
-    return (react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.taskContainer, isCompleted && styles_module_css_1.default.taskCompleted, isAnimatingCompletion && styles_module_css_1.default.taskCompletedAnimating) },
-        react_1.default.createElement("div", { className: styles_module_css_1.default.taskHeader, onClick: toggleExpanded },
+    return (react_1.default.createElement("div", { id: id, className: (0, clsx_1.default)(styles_module_css_1.default.taskContainer, isCompleted && styles_module_css_1.default.taskCompleted, isAnimatingCompletion && styles_module_css_1.default.taskCompletedAnimating) },
+        react_1.default.createElement("div", { className: styles_module_css_1.default.taskHeader },
             react_1.default.createElement("div", { className: styles_module_css_1.default.taskHeaderLeft },
                 react_1.default.createElement("span", { className: styles_module_css_1.default.taskBadge }, taskBadge),
-                react_1.default.createElement("h3", { className: styles_module_css_1.default.taskName },
-                    name,
+                react_1.default.createElement("div", { className: styles_module_css_1.default.taskNameWrapper },
+                    react_1.default.createElement("span", { className: styles_module_css_1.default.taskNameText }, name),
                     react_1.default.createElement("span", { className: (0, clsx_1.default)(styles_module_css_1.default.checkmark, isCompleted && !isAnimatingCompletion && !isRemovingCheckmark && styles_module_css_1.default.checkmarkVisible, isAnimatingCompletion && styles_module_css_1.default.checkmarkAnimating, isRemovingCheckmark && styles_module_css_1.default.checkmarkRemoving) }, icons_1.CHECKMARK_CIRCLE_FILL_ICON))),
-            react_1.default.createElement("button", { type: "button", className: styles_module_css_1.default.expandButton, "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse task' : 'Expand task' },
+            react_1.default.createElement("button", { type: "button", className: styles_module_css_1.default.expandButton, onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-label": isExpanded ? 'Collapse task' : 'Expand task' },
                 react_1.default.createElement("span", { className: (0, clsx_1.default)(styles_module_css_1.default.chevron, !isExpanded && styles_module_css_1.default.chevronCollapsed) }, icons_1.CHEVRON_DOWN_ICON))),
-        (isExpanded || isCollapsingBody) && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.taskBody, isCollapsingBody && styles_module_css_1.default.taskBodyCollapsing) }, textComponent),
-            react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.taskFooter, isCollapsingBody && styles_module_css_1.default.taskFooterCollapsing) },
-                react_1.default.createElement("div", { className: styles_module_css_1.default.taskActions },
-                    hintComponent && (react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.hintButton, showHint && styles_module_css_1.default.active), onClick: (e) => {
-                            e.stopPropagation();
-                            toggleHint();
-                        } }, "Hint")),
-                    solutionComponent && (react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.solutionButton, showSolution && styles_module_css_1.default.active), onClick: (e) => {
+        react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.taskContentWrapper, isExpanded && styles_module_css_1.default.taskContentExpanded) },
+            react_1.default.createElement("div", { className: styles_module_css_1.default.taskContentInner },
+                react_1.default.createElement("div", { className: styles_module_css_1.default.taskBody }, textComponent),
+                react_1.default.createElement("div", { className: styles_module_css_1.default.taskFooter },
+                    react_1.default.createElement("div", { className: styles_module_css_1.default.taskActions },
+                        hintComponent && (react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.hintButton, showHint && styles_module_css_1.default.active), onClick: (e) => {
+                                e.stopPropagation();
+                                toggleHint();
+                            } }, "Hint")),
+                        solutionComponent && (react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.solutionButton, showSolution && styles_module_css_1.default.active), onClick: (e) => {
+                                e.stopPropagation();
+                                toggleSolution();
+                            } }, "Solution"))),
+                    react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.completeButton, isCompleted && styles_module_css_1.default.completedButton), onClick: (e) => {
                             e.stopPropagation();
-                            toggleSolution();
-                        } }, "Solution"))),
-                react_1.default.createElement("button", { type: "button", className: (0, clsx_1.default)(styles_module_css_1.default.taskButton, styles_module_css_1.default.completeButton, isCompleted && styles_module_css_1.default.completedButton), onClick: (e) => {
-                        e.stopPropagation();
-                        toggleCompleted();
-                    } }, isCompleted ? 'Undo Task' : 'Mark as Done')),
-            (hintComponent || solutionComponent) && (react_1.default.createElement("div", { className: styles_module_css_1.default.panelWrapper, style: {
-                    marginBottom: panelSpacerHeight > 0 ? '1rem' : 0,
-                    transition: 'margin-bottom 0.3s ease-out'
-                } },
-                react_1.default.createElement("div", { className: styles_module_css_1.default.panelSpacer, style: {
-                        height: panelSpacerHeight > 0 ? `${panelSpacerHeight}px` : 0,
-                        transition: 'height 0.3s ease-out'
-                    } }),
-                hintComponent && (react_1.default.createElement("div", { ref: hintRef, className: (0, clsx_1.default)(styles_module_css_1.default.panelContainer, styles_module_css_1.default.panelAbsolute, (showHint || isCollapsingHint) && styles_module_css_1.default.panelVisible, showHint && !isCollapsingHint && !isSwitchingPanels && styles_module_css_1.default.panelContainerExpanding, showHint && !isCollapsingHint && isSwitchingPanels && styles_module_css_1.default.hintPanelContainerExpandingSwitching, isCollapsingHint && !isSwitchingPanels && styles_module_css_1.default.panelContainerCollapsing, isCollapsingHint && isSwitchingPanels && styles_module_css_1.default.hintPanelContainerCollapsingSwitching) }, hintComponent)),
-                solutionComponent && (react_1.default.createElement("div", { ref: solutionRef, className: (0, clsx_1.default)(styles_module_css_1.default.panelContainer, styles_module_css_1.default.panelAbsolute, (showSolution || isCollapsingSolution) && styles_module_css_1.default.panelVisible, showSolution && !isCollapsingSolution && !isSwitchingPanels && styles_module_css_1.default.panelContainerExpanding, showSolution && !isCollapsingSolution && isSwitchingPanels && styles_module_css_1.default.solutionPanelContainerExpandingSwitching, isCollapsingSolution && !isSwitchingPanels && styles_module_css_1.default.panelContainerCollapsing, isCollapsingSolution && isSwitchingPanels && styles_module_css_1.default.solutionPanelContainerCollapsingSwitching) }, solutionComponent))))))));
+                            toggleCompleted();
+                        } }, isCompleted ? 'Undo Task' : 'Mark as Done')),
+                (hintComponent || solutionComponent) && (react_1.default.createElement("div", { className: styles_module_css_1.default.panelWrapper },
+                    react_1.default.createElement("div", { className: (0, clsx_1.default)(styles_module_css_1.default.panelGridWrapper, (showHint || showSolution || isSwitchingPanels) && styles_module_css_1.default.panelGridExpanded, (isClosingHint || isClosingSolution) && !isSwitchingPanels && styles_module_css_1.default.panelGridCollapsing), style: {
+                            height: containerHeight !== null ? `${containerHeight}px` : undefined
+                        } },
+                        react_1.default.createElement("div", { className: styles_module_css_1.default.panelGridInner },
+                            react_1.default.createElement("div", { className: styles_module_css_1.default.panelSharedContainer },
+                                hintComponent && (react_1.default.createElement("div", { ref: hintRef, className: (0, clsx_1.default)(styles_module_css_1.default.panelContainer, showHint && !isSwitchingPanels && styles_module_css_1.default.panelVisible, showHint && isSwitchingPanels && styles_module_css_1.default.panelFadingIn, !showHint && isSwitchingPanels && styles_module_css_1.default.panelFadingOut, isClosingHint && styles_module_css_1.default.panelFadingOut, isSwitchingPanels && styles_module_css_1.default.panelSwitching) }, hintComponent)),
+                                solutionComponent && (react_1.default.createElement("div", { ref: solutionRef, className: (0, clsx_1.default)(styles_module_css_1.default.panelContainer, showSolution && !isSwitchingPanels && styles_module_css_1.default.panelVisible, showSolution && isSwitchingPanels && styles_module_css_1.default.panelFadingIn, !showSolution && isSwitchingPanels && styles_module_css_1.default.panelFadingOut, isClosingSolution && styles_module_css_1.default.panelFadingOut, isSwitchingPanels && styles_module_css_1.default.panelSwitching) }, solutionComponent)))))))))));
 }
 //# sourceMappingURL=index.js.map