@geomak/ui 7.7.0 → 7.7.1

package/dist/index.d.cts

@@ -705,6 +705,9 @@ interface TreeNode {
     nodeData?: any;
     parentLabel?: string;
     children?: TreeNode[];
+    /** Leading icon. On leaves it replaces the default bullet; on parents it
+     *  renders between the chevron and the label. */
+    icon?: react__default.ReactNode;
 }
 interface TreeItemClickPayload {
     isParent: boolean;
@@ -718,6 +721,9 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Default leading icon for every leaf (instead of the bullet dot). A
+     *  node's own `icon` takes precedence. */
+    leafIcon?: react__default.ReactNode;
     /** Extra classes merged onto the tree root. */
     className?: string;
     /** Inline style on the tree root. */
@@ -738,7 +744,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, leafIcon, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 type AccordionVariant = 'separated' | 'contained';
 interface AccordionProps {
@@ -2082,10 +2088,22 @@ interface ScalableContainerProps {
     width?: react__default.CSSProperties['width'];
     /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: react__default.CSSProperties['height'];
-    /** Width when expanded. Default `'100%'` (fills parent). */
+    /**
+     * Width when expanded. A concrete value (e.g. `900` or `'60rem'`) makes the
+     * container grow even when its resting width is `'100%'` inside a flex/grid
+     * cell. Falls back to {@link ScalableContainerProps.expandedWidth}, then
+     * `'100%'`.
+     */
+    targetWidth?: react__default.CSSProperties['width'];
+    /**
+     * Height when expanded. A concrete value (e.g. `600`) lets the container
+     * grow taller and push whatever sits below it further down. Falls back to
+     * {@link ScalableContainerProps.expandedHeight}, then `'100%'`.
+     */
+    targetHeight?: react__default.CSSProperties['height'];
+    /** @deprecated Use `targetWidth`. */
     expandedWidth?: react__default.CSSProperties['width'];
-    /** Height when expanded. Default `'100%'`. Set a concrete value (e.g. 420)
-     *  when the container lives in normal flow and should push siblings down. */
+    /** @deprecated Use `targetHeight`. */
     expandedHeight?: react__default.CSSProperties['height'];
     /** Controlled expanded state. */
     expanded?: boolean;
@@ -2104,60 +2122,38 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /**
-     * Bounding element the expansion is allowed to grow within. When the
-     * container sits in size-constrained flex-item wrappers (where width /
-     * height 100% makes expand-in-place a no-op), providing this ref switches
-     * to PUSH expansion: the container's row becomes `flex-wrap: wrap` and the
-     * container takes the FULL parent width (`flex-basis: 100%`), so sibling
-     * charts reflow below it at full width — pushed, visible, and intact.
-     * Column levels between the container and this element get `flex-grow`
-     * raised so the expanded row dominates vertically too. Collapsing
-     * restores the wrappers' original sizing exactly. Omit for the classic
-     * expand-in-place behaviour.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandContainerRef?: react__default.RefObject<HTMLElement | null>;
-    /**
-     * Vertical dominance of the pushed expansion (push mode only). Default
-     * `3` — the expanded chart keeps expandRatio/(expandRatio+1) of its row's
-     * height (and its row takes expandRatio parts per sibling row), leaving
-     * the reflowed siblings the remainder. Raise for a more fullscreen feel,
-     * lower for a gentler split.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */
     className?: string;
 }
 /**
- * Container that smoothly expands on click and collapses back to its
- * resting size. Reads like a macOS / Windows window resizing — subtle
- * elevation shift, smooth scale, no flash of colour or harsh background
- * change.
- *
- * Two expansion modes:
- * - **In place** (default): animates the container's own width/height to
- *   `expandedWidth`/`expandedHeight`.
- * - **Push** (`expandContainerRef` set): for containers whose resting size is
- *   owned by flex-item wrappers. Expanding makes the container span the FULL
- *   parent width (its row becomes `flex-wrap: wrap` and the wrapper takes
- *   `flex-basis: 100%`), with sibling charts reflowing below it at full
- *   width — visible and intact, not squeezed. Column levels raise `flex-grow`
- *   so the expanded row also dominates vertically. Collapsing restores the
- *   original layout exactly.
+ * Container that smoothly grows to a target size on click and collapses back.
+ * Reads like an OS window resize — subtle elevation lift, smooth scale, no
+ * colour change.
+ *
+ * Expansion grows the container's OWN box to `targetWidth` × `targetHeight` and
+ * makes it `flex-none` while expanded, so it holds that size and simply pushes
+ * its neighbours along the flow — they keep their own dimensions and reflow
+ * (e.g. wrap onto the next row / move down) rather than being squeezed. Nothing
+ * on sibling elements is mutated, so layouts restore exactly on collapse. For
+ * neighbours to reflow *below*, give the parent room to wrap (e.g. a
+ * `flex flex-wrap` row, or block/auto-rows-grid flow).
  *
  * @example
  * ```tsx
- * <ScalableContainer width={480} height={300}>
- *   <Chart data={metrics} />
- * </ScalableContainer>
- *
- * // Push mode inside a flex grid:
- * const sectionRef = useRef<HTMLDivElement>(null)
- * <div ref={sectionRef} className="flex flex-col flex-1 min-h-0 gap-2">…
- *   <ScalableContainer width="100%" height="100%" expandContainerRef={sectionRef}>
+ * // In a flex-wrap chart grid — expands to a concrete size and pushes the rest down.
+ * <div className="flex flex-wrap gap-2">
+ *   <ScalableContainer width="100%" height={240} targetWidth="100%" targetHeight={520}>
+ *     <Chart data={metrics} />
+ *   </ScalableContainer>
+ *   …
+ * </div>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, expandRatio, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, targetWidth, targetHeight, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;

package/dist/index.d.ts

@@ -705,6 +705,9 @@ interface TreeNode {
     nodeData?: any;
     parentLabel?: string;
     children?: TreeNode[];
+    /** Leading icon. On leaves it replaces the default bullet; on parents it
+     *  renders between the chevron and the label. */
+    icon?: react__default.ReactNode;
 }
 interface TreeItemClickPayload {
     isParent: boolean;
@@ -718,6 +721,9 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Default leading icon for every leaf (instead of the bullet dot). A
+     *  node's own `icon` takes precedence. */
+    leafIcon?: react__default.ReactNode;
     /** Extra classes merged onto the tree root. */
     className?: string;
     /** Inline style on the tree root. */
@@ -738,7 +744,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, leafIcon, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 type AccordionVariant = 'separated' | 'contained';
 interface AccordionProps {
@@ -2082,10 +2088,22 @@ interface ScalableContainerProps {
     width?: react__default.CSSProperties['width'];
     /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: react__default.CSSProperties['height'];
-    /** Width when expanded. Default `'100%'` (fills parent). */
+    /**
+     * Width when expanded. A concrete value (e.g. `900` or `'60rem'`) makes the
+     * container grow even when its resting width is `'100%'` inside a flex/grid
+     * cell. Falls back to {@link ScalableContainerProps.expandedWidth}, then
+     * `'100%'`.
+     */
+    targetWidth?: react__default.CSSProperties['width'];
+    /**
+     * Height when expanded. A concrete value (e.g. `600`) lets the container
+     * grow taller and push whatever sits below it further down. Falls back to
+     * {@link ScalableContainerProps.expandedHeight}, then `'100%'`.
+     */
+    targetHeight?: react__default.CSSProperties['height'];
+    /** @deprecated Use `targetWidth`. */
     expandedWidth?: react__default.CSSProperties['width'];
-    /** Height when expanded. Default `'100%'`. Set a concrete value (e.g. 420)
-     *  when the container lives in normal flow and should push siblings down. */
+    /** @deprecated Use `targetHeight`. */
     expandedHeight?: react__default.CSSProperties['height'];
     /** Controlled expanded state. */
     expanded?: boolean;
@@ -2104,60 +2122,38 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /**
-     * Bounding element the expansion is allowed to grow within. When the
-     * container sits in size-constrained flex-item wrappers (where width /
-     * height 100% makes expand-in-place a no-op), providing this ref switches
-     * to PUSH expansion: the container's row becomes `flex-wrap: wrap` and the
-     * container takes the FULL parent width (`flex-basis: 100%`), so sibling
-     * charts reflow below it at full width — pushed, visible, and intact.
-     * Column levels between the container and this element get `flex-grow`
-     * raised so the expanded row dominates vertically too. Collapsing
-     * restores the wrappers' original sizing exactly. Omit for the classic
-     * expand-in-place behaviour.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandContainerRef?: react__default.RefObject<HTMLElement | null>;
-    /**
-     * Vertical dominance of the pushed expansion (push mode only). Default
-     * `3` — the expanded chart keeps expandRatio/(expandRatio+1) of its row's
-     * height (and its row takes expandRatio parts per sibling row), leaving
-     * the reflowed siblings the remainder. Raise for a more fullscreen feel,
-     * lower for a gentler split.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */
     className?: string;
 }
 /**
- * Container that smoothly expands on click and collapses back to its
- * resting size. Reads like a macOS / Windows window resizing — subtle
- * elevation shift, smooth scale, no flash of colour or harsh background
- * change.
- *
- * Two expansion modes:
- * - **In place** (default): animates the container's own width/height to
- *   `expandedWidth`/`expandedHeight`.
- * - **Push** (`expandContainerRef` set): for containers whose resting size is
- *   owned by flex-item wrappers. Expanding makes the container span the FULL
- *   parent width (its row becomes `flex-wrap: wrap` and the wrapper takes
- *   `flex-basis: 100%`), with sibling charts reflowing below it at full
- *   width — visible and intact, not squeezed. Column levels raise `flex-grow`
- *   so the expanded row also dominates vertically. Collapsing restores the
- *   original layout exactly.
+ * Container that smoothly grows to a target size on click and collapses back.
+ * Reads like an OS window resize — subtle elevation lift, smooth scale, no
+ * colour change.
+ *
+ * Expansion grows the container's OWN box to `targetWidth` × `targetHeight` and
+ * makes it `flex-none` while expanded, so it holds that size and simply pushes
+ * its neighbours along the flow — they keep their own dimensions and reflow
+ * (e.g. wrap onto the next row / move down) rather than being squeezed. Nothing
+ * on sibling elements is mutated, so layouts restore exactly on collapse. For
+ * neighbours to reflow *below*, give the parent room to wrap (e.g. a
+ * `flex flex-wrap` row, or block/auto-rows-grid flow).
  *
  * @example
  * ```tsx
- * <ScalableContainer width={480} height={300}>
- *   <Chart data={metrics} />
- * </ScalableContainer>
- *
- * // Push mode inside a flex grid:
- * const sectionRef = useRef<HTMLDivElement>(null)
- * <div ref={sectionRef} className="flex flex-col flex-1 min-h-0 gap-2">…
- *   <ScalableContainer width="100%" height="100%" expandContainerRef={sectionRef}>
+ * // In a flex-wrap chart grid — expands to a concrete size and pushes the rest down.
+ * <div className="flex flex-wrap gap-2">
+ *   <ScalableContainer width="100%" height={240} targetWidth="100%" targetHeight={520}>
+ *     <Chart data={metrics} />
+ *   </ScalableContainer>
+ *   …
+ * </div>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, expandRatio, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, targetWidth, targetHeight, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;

package/dist/index.js

@@ -1177,7 +1177,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
     {
       value,
       disabled,
-      className: cx(base, sz.trigger, layoutCls, closeable ? "pr-8" : "", variantCls, className),
+      className: cx(base, sz.trigger, layoutCls, closeable ? "!pr-8" : "", variantCls, className),
       children: [
         variant === "segmented" && isActive && /* @__PURE__ */ jsx(
           motion.span,
@@ -1262,9 +1262,11 @@ function TreeNodeItem({
   item,
   onNodeClick,
   defaultExpandAll,
-  defaultExpandedKeys
+  defaultExpandedKeys,
+  leafIcon
 }) {
   if (!isParent(item)) {
+    const glyph = item.icon ?? leafIcon;
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1278,7 +1280,10 @@ function TreeNodeItem({
           parentLabel: item.parentLabel
         }),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full flex-shrink-0 bg-foreground-muted group-hover:bg-accent transition-colors duration-150" }),
+          glyph != null ? /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center text-foreground-muted group-hover:text-accent transition-colors duration-150", children: glyph }) : (
+            /* Default leaf bullet */
+            /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full flex-shrink-0 bg-foreground-muted group-hover:bg-accent transition-colors duration-150" })
+          ),
           /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary group-hover:text-foreground transition-colors duration-150", children: item.label })
         ]
       }
@@ -1286,48 +1291,53 @@ function TreeNodeItem({
   }
   const initialOpen = defaultExpandAll || defaultExpandedKeys.includes(item.key) ? [item.key] : [];
   return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { type: "multiple", defaultValue: initialOpen, children: /* @__PURE__ */ jsxs(AccordionPrimitive.Item, { value: item.key, className: "border-none", children: [
-    /* @__PURE__ */ jsxs(
-      AccordionPrimitive.Trigger,
-      {
-        onClick: () => onNodeClick({
-          isParent: true,
-          key: item.key,
-          label: item.label,
-          data: item.nodeData,
-          parentLabel: item.parentLabel
-        }),
-        className: "flex items-center gap-2 cursor-pointer py-1.5 px-2 group focus:outline-none focus-visible:ring-2 focus-visible:ring-accent w-full text-left rounded-md hover:bg-surface-raised transition-colors duration-150",
-        children: [
-          /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md hover:bg-surface-raised transition-colors duration-150", children: [
+      /* @__PURE__ */ jsx(
+        AccordionPrimitive.Trigger,
+        {
+          "aria-label": `Toggle ${item.label}`,
+          className: "group flex flex-shrink-0 items-center justify-center rounded-md p-1.5 cursor-pointer text-foreground-muted hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset transition-colors duration-150",
+          children: /* @__PURE__ */ jsx(
             "svg",
             {
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
               strokeWidth: 2.5,
-              className: "h-3.5 w-3.5 flex-shrink-0 text-foreground-muted transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
+              className: "h-3.5 w-3.5 transition-transform duration-200 group-data-[state=open]:rotate-0 group-data-[state=closed]:-rotate-90",
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  d: "M19 9l-7 7-7-7"
-                }
-              )
+              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
             }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground select-none", children: item.label })
-        ]
-      }
-    ),
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onNodeClick({
+            isParent: true,
+            key: item.key,
+            label: item.label,
+            data: item.nodeData,
+            parentLabel: item.parentLabel
+          }),
+          className: "flex flex-1 min-w-0 items-center gap-2 py-1.5 pr-2 text-left cursor-pointer rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
+          children: [
+            item.icon != null && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center text-foreground-muted", children: item.icon }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground select-none", children: item.label })
+          ]
+        }
+      )
+    ] }) }),
     /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up", children: /* @__PURE__ */ jsx("div", { className: "ml-3.5 border-l border-border py-0.5", children: item.children.map((child) => /* @__PURE__ */ jsx(
       TreeNodeItem,
       {
         item: child,
         onNodeClick,
         defaultExpandAll,
-        defaultExpandedKeys
+        defaultExpandedKeys,
+        leafIcon
       },
       child.key
     )) }) })
@@ -1338,6 +1348,7 @@ function Tree({
   onNodeClick,
   defaultExpandAll = false,
   defaultExpandedKeys = [],
+  leafIcon,
   className = "",
   style
 }) {
@@ -1347,7 +1358,8 @@ function Tree({
       item,
       onNodeClick,
       defaultExpandAll,
-      defaultExpandedKeys
+      defaultExpandedKeys,
+      leafIcon
     },
     item.key
   )) });
@@ -4645,6 +4657,8 @@ var TOGGLE_POSITION_CLASS = {
 function ScalableContainer({
   width = "100%",
   height = "auto",
+  targetWidth,
+  targetHeight,
   expandedWidth = "100%",
   expandedHeight = "100%",
   expanded,
@@ -4654,100 +4668,40 @@ function ScalableContainer({
   expandIcon,
   collapseIcon,
   togglePosition = "top-right",
-  expandContainerRef,
-  expandRatio = 3,
   className = ""
 }) {
   const containerRef = useRef(null);
   const [internalScaled, setInternalScaled] = useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = useReducedMotion();
-  const usePush = expandContainerRef != null;
-  const grownRef = useRef([]);
   const prevScaled = useRef(isScaled);
-  const kickResizeDuringTransition = () => {
+  const expandW = targetWidth ?? expandedWidth;
+  const expandH = targetHeight ?? expandedHeight;
+  useEffect(() => {
+    if (isScaled === prevScaled.current) return;
+    prevScaled.current = isScaled;
     if (typeof window === "undefined") return;
     const kick = () => window.dispatchEvent(new Event("resize"));
     const interval = window.setInterval(kick, 80);
-    window.setTimeout(() => {
+    const stop = window.setTimeout(() => {
       window.clearInterval(interval);
       kick();
-    }, reduced ? 0 : 400);
-  };
-  const growAncestors = () => {
-    const bound = expandContainerRef?.current;
-    if (!bound || !containerRef.current) return;
-    const grown = [];
-    let el = containerRef.current.parentElement;
-    while (el && el !== bound && bound.contains(el)) {
-      const parent = el.parentElement;
-      const parentStyle = parent ? getComputedStyle(parent) : null;
-      if (parent && parentStyle && parentStyle.display.includes("flex")) {
-        grown.push({
-          el,
-          parent,
-          prev: {
-            flexGrow: el.style.flexGrow,
-            flexBasis: el.style.flexBasis,
-            height: el.style.height,
-            transition: el.style.transition,
-            parentFlexWrap: parent.style.flexWrap
-          }
-        });
-        const t = (prop) => `${prop} ${reduced ? 0 : 0.32}s cubic-bezier(0.16, 1, 0.3, 1)`;
-        const ours = `${t("flex-grow")}, ${t("flex-basis")}, ${t("height")}`;
-        el.style.transition = el.style.transition ? `${el.style.transition}, ${ours}` : ours;
-        if (parentStyle.flexDirection.startsWith("row")) {
-          parent.style.flexWrap = "wrap";
-          el.style.flexBasis = "100%";
-          el.style.height = `${expandRatio / (expandRatio + 1) * 100}%`;
-        } else {
-          el.style.flexBasis = "0%";
-          el.style.flexGrow = String(expandRatio);
-        }
-      }
-      el = parent;
-    }
-    grownRef.current = grown;
-  };
-  const restoreAncestors = () => {
-    for (const { el, parent, prev } of grownRef.current) {
-      el.style.flexGrow = prev.flexGrow;
-      el.style.flexBasis = prev.flexBasis;
-      el.style.height = prev.height;
-      window.setTimeout(() => {
-        el.style.transition = prev.transition;
-        parent.style.flexWrap = prev.parentFlexWrap;
-      }, reduced ? 0 : 360);
-    }
-    grownRef.current = [];
-  };
-  useEffect(() => {
-    if (!usePush || isScaled === prevScaled.current) return;
-    prevScaled.current = isScaled;
-    if (isScaled) growAncestors();
-    else restoreAncestors();
-    kickResizeDuringTransition();
-  }, [isScaled, usePush]);
-  useEffect(() => () => {
-    for (const { el, parent, prev } of grownRef.current) {
-      el.style.flexGrow = prev.flexGrow;
-      el.style.flexBasis = prev.flexBasis;
-      el.style.height = prev.height;
-      el.style.transition = prev.transition;
-      parent.style.flexWrap = prev.parentFlexWrap;
+    }, reduced ? 0 : 420);
+    if (isScaled) {
+      window.setTimeout(
+        () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
+        reduced ? 0 : 360
+      );
     }
-  }, []);
+    return () => {
+      window.clearInterval(interval);
+      window.clearTimeout(stop);
+    };
+  }, [isScaled, reduced]);
   const onToggle = () => {
     const next = !isScaled;
     if (expanded === void 0) setInternalScaled(next);
     onExpandedChange?.(next);
-    if (next && !usePush) {
-      window.setTimeout(
-        () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
-        reduced ? 0 : 340
-      );
-    }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
   return /* @__PURE__ */ jsxs(
@@ -4755,24 +4709,20 @@ function ScalableContainer({
     {
       ref: containerRef,
       style: {
-        width: isScaled && !usePush ? expandedWidth : width,
-        height: isScaled && !usePush ? expandedHeight : height
-      },
-      animate: {
-        // Push mode keeps the container filling its (now growing)
-        // wrapper — the wrapper's flex-grow does the work.
-        width: isScaled && !usePush ? expandedWidth : width,
-        height: isScaled && !usePush ? expandedHeight : height
+        width: isScaled ? expandW : width,
+        height: isScaled ? expandH : height,
+        flex: isScaled ? "none" : void 0
       },
+      animate: { width: isScaled ? expandW : width, height: isScaled ? expandH : height },
       transition: reduced ? { duration: 0 } : {
         width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
         height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
       },
       className: cx(
         "relative rounded-lg overflow-hidden",
-        // OS-window aesthetic: subtle elevation at rest, lifted shadow
-        // when expanded. No background colour change.
-        isScaled ? "shadow-2xl" : "shadow-md",
+        // OS-window aesthetic: subtle elevation at rest, lifted shadow +
+        // raised stacking when expanded so it sits above neighbours.
+        isScaled ? "z-raised shadow-2xl" : "shadow-md",
         "transition-shadow duration-300",
         className
       ),