import { LAYOUT_COLS as d, LAYOUT_ROW_HEIGHT as s } from "../../../../sdk/dist/shared/layout-constants.js";
import { useState as a, useEffect as n } from "react";
import { usePreviewMode as v, useEditorHelpers as w } from "../../../../../use-editor.js";
import { debounce as b } from "lodash-es";
function W(r) {
  const [t, u] = a(0);
  v();
  const { setGridConfig: i } = w();
  return n(() => {
    const e = b(() => {
      if (r.current) {
        const c = r.current.clientWidth;
        u(c / d);
      }
    }, 250);
    if (!r.current)
      return;
    e();
    const o = new MutationObserver(e);
    return o.observe(r.current, {
      attributes: !0,
      attributeFilter: ["style", "class"]
    }), window.addEventListener("resize", e, !0), () => {
      window.removeEventListener("resize", e, !0), o.disconnect();
    };
  }, [r]), n(() => {
    t && i({
      colWidth: t,
      rowHeight: s
    });
  }, [t, i]), {
    colWidth: t,
    rowHeight: s
  };
}
export {
  W as useGridObserver
};
//# sourceMappingURL=use-grid-observer.js.map
