Function useGroupCommits

packages/studio/src/hooks/useGroupCommits.ts:126–188

(params: UseGroupCommitsParams)

}

export function useGroupCommits(params: UseGroupCommitsParams) {
  const { activeCompPath, showToast, projectIdRef } = params;

  const groupSelection = useCallback(
    async (members: DomEditSelection[]): Promise<string | null> => {
      const pid = projectIdRef.current;
      if (!pid || members.length === 0) return null;

      // All members must live in the same source file — the wrapper is one node
      // in one document. (Cross-file grouping is out of scope.)
      const targetPath = members[0].sourceFile || activeCompPath || "index.html";
      if (members.some((m) => (m.sourceFile || activeCompPath || "index.html") !== targetPath)) {
        showToast("Can't group elements from different files", "error");
        return null;
      }

      // Auto-name "Group N" by the count of existing groups in the document.
      const doc = members[0].element.ownerDocument;
      const groupId = `Group ${doc.querySelectorAll("[data-hf-group]").length + 1}`;
      const { bbox, targets, rebases } = computeGroupGeometry(members);

      try {
        const data = await commitStructuralMutation(
          pid,
          targetPath,
          "wrap-elements",
          { targets, groupId, bbox, rebases },
          "Group elements",
          params,
        );
        return data.groupId ?? groupId;
      } catch (error) {
        showToast(error instanceof Error ? error.message : "Failed to group elements", "error");
        return null;
      }
    },
    [activeCompPath, projectIdRef, showToast, params],
  );

  const ungroupSelection = useCallback(
    async (group: DomEditSelection): Promise<void> => {
      const pid = projectIdRef.current;
      if (!pid) return;
      const targetPath = group.sourceFile || activeCompPath || "index.html";

      try {
        await commitStructuralMutation(
          pid,
          targetPath,
          "unwrap-elements",
          { target: buildDomEditPatchTarget(group) },
          "Ungroup elements",
          params,
        );
      } catch (error) {
        showToast(error instanceof Error ? error.message : "Failed to ungroup elements", "error");
      }
    },